Skip to content

Commit 295f5ef

Browse files
DanielEmmanuel1DanielEmmanuel1
authored
Merge pull request #6 from Depo-dev/implement-spherre-dapp-welcome-page
Implement spherre dapp welcome page
2 parents 93aec8e + 4616bba commit 295f5ef

File tree

10 files changed

+86
-131
lines changed

10 files changed

+86
-131
lines changed

‎frontend/app/components/welcome.tsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import Image from 'next/image'
2+
import logo from '../../public/Images/spherrelogo.png'
3+
import wall from '../../public/Images/wall.png'
4+
import add from '../../public/Images/Add.png'
5+
6+
const Welcome = () => {
7+
return (
8+
<div className="flex flex-col lg:flex-row">
9+
{/* Left Section with Image */}
10+
<div className="lg:w-[40vw]">
11+
<Image
12+
src={wall}
13+
alt={''}
14+
className="w-full h-32 lg:h-screen object-cover p-4 rounded-lg"
15+
/>
16+
</div>
17+
18+
{/* Right Section */}
19+
<div className="flex-1 flex flex-col justify-between p-4 lg:p-14">
20+
{/* Logo and Title */}
21+
<div className="flex items-center gap-2">
22+
<Image src={logo} height={50} width={50} alt={''} />
23+
<p className="text-xl font-semibold">Spherre</p>
24+
</div>
25+
26+
{/* Centered Content */}
27+
<div className="flex flex-col justify-center items-center flex-1 gap-4">
28+
<p className="opacity-40">Welcome to Spherre!</p>
29+
<div className="text-center">
30+
{/* Responsive Text */}
31+
<p className="text-lg md:text-2xl lg:text-4xl w-full md:w-[80%] lg:w-[60%] mx-auto">
32+
The Future of Secure, Collaborative Crypto Management!
33+
</p>
34+
35+
{/* Responsive Button */}
36+
<button className="bg-white w-full sm:w-72 flex items-center justify-center gap-1 px-6 py-2 rounded-lg mx-auto my-3">
37+
<Image src={add} height={30} width={24} alt={'add'} />
38+
<p className="text-black">Create Spherre</p>
39+
</button>
40+
</div>
41+
</div>
42+
</div>
43+
</div>
44+
)
45+
}
46+
47+
export default Welcome

‎frontend/app/layout.tsx‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,26 @@
1-
import type { Metadata } from "next";
2-
import { Geist, Geist_Mono } from "next/font/google";
3-
import "./globals.css";
1+
import type { Metadata } from 'next'
2+
import { Geist, Geist_Mono } from 'next/font/google'
3+
import './globals.css'
44

55
const geistSans = Geist({
6-
variable: "--font-geist-sans",
7-
subsets: ["latin"],
8-
});
6+
variable: '--font-geist-sans',
7+
subsets: ['latin'],
8+
})
99

1010
const geistMono = Geist_Mono({
11-
variable: "--font-geist-mono",
12-
subsets: ["latin"],
13-
});
11+
variable: '--font-geist-mono',
12+
subsets: ['latin'],
13+
})
1414

1515
export const metadata: Metadata = {
16-
title: "Create Next App",
17-
description: "Generated by create next app",
18-
};
16+
title: 'Create Next App',
17+
description: 'Generated by create next app',
18+
}
1919

2020
export default function RootLayout({
2121
children,
2222
}: Readonly<{
23-
children: React.ReactNode;
23+
children: React.ReactNode
2424
}>) {
2525
return (
2626
<html lang="en">
@@ -30,5 +30,5 @@ export default function RootLayout({
3030
{children}
3131
</body>
3232
</html>
33-
);
33+
)
3434
}

‎frontend/app/page.tsx‎

Lines changed: 4 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1,101 +1,9 @@
1-
import Image from "next/image";
1+
import Welcome from './components/welcome'
22

33
export default function Home() {
44
return (
5-
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
6-
<main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
7-
<Image
8-
className="dark:invert"
9-
src="/next.svg"
10-
alt="Next.js logo"
11-
width={180}
12-
height={38}
13-
priority
14-
/>
15-
<ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
16-
<li className="mb-2">
17-
Get started by editing{" "}
18-
<code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
19-
app/page.tsx
20-
</code>
21-
.
22-
</li>
23-
<li>Save and see your changes instantly.</li>
24-
</ol>
25-
26-
<div className="flex gap-4 items-center flex-col sm:flex-row">
27-
<a
28-
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
29-
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
30-
target="_blank"
31-
rel="noopener noreferrer"
32-
>
33-
<Image
34-
className="dark:invert"
35-
src="/vercel.svg"
36-
alt="Vercel logomark"
37-
width={20}
38-
height={20}
39-
/>
40-
Deploy now
41-
</a>
42-
<a
43-
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
44-
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
45-
target="_blank"
46-
rel="noopener noreferrer"
47-
>
48-
Read our docs
49-
</a>
50-
</div>
51-
</main>
52-
<footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
53-
<a
54-
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
55-
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
56-
target="_blank"
57-
rel="noopener noreferrer"
58-
>
59-
<Image
60-
aria-hidden
61-
src="/file.svg"
62-
alt="File icon"
63-
width={16}
64-
height={16}
65-
/>
66-
Learn
67-
</a>
68-
<a
69-
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
70-
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
71-
target="_blank"
72-
rel="noopener noreferrer"
73-
>
74-
<Image
75-
aria-hidden
76-
src="/window.svg"
77-
alt="Window icon"
78-
width={16}
79-
height={16}
80-
/>
81-
Examples
82-
</a>
83-
<a
84-
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
85-
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
86-
target="_blank"
87-
rel="noopener noreferrer"
88-
>
89-
<Image
90-
aria-hidden
91-
src="/globe.svg"
92-
alt="Globe icon"
93-
width={16}
94-
height={16}
95-
/>
96-
Go to nextjs.org →
97-
</a>
98-
</footer>
5+
<div className="">
6+
<Welcome />
997
</div>
100-
);
8+
)
1019
}

‎frontend/eslint.config.mjs‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
import { dirname } from "path";
2-
import { fileURLToPath } from "url";
3-
import { FlatCompat } from "@eslint/eslintrc";
1+
import { dirname } from 'path'
2+
import { fileURLToPath } from 'url'
3+
import { FlatCompat } from '@eslint/eslintrc'
44

5-
const __filename = fileURLToPath(import.meta.url);
6-
const __dirname = dirname(__filename);
5+
const __filename = fileURLToPath(import.meta.url)
6+
const __dirname = dirname(__filename)
77

88
const compat = new FlatCompat({
99
baseDirectory: __dirname,
10-
});
10+
})
1111

1212
const eslintConfig = [
13-
...compat.extends("next/core-web-vitals", "next/typescript"),
14-
];
13+
...compat.extends('next/core-web-vitals', 'next/typescript'),
14+
]
1515

16-
export default eslintConfig;
16+
export default eslintConfig

‎frontend/next.config.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import type { NextConfig } from "next";
1+
import type { NextConfig } from 'next'
22

33
const nextConfig: NextConfig = {
44
/* config options here */
5-
};
5+
}
66

7-
export default nextConfig;
7+
export default nextConfig

‎frontend/postcss.config.mjs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,6 @@ const config = {
33
plugins: {
44
tailwindcss: {},
55
},
6-
};
6+
}
77

8-
export default config;
8+
export default config

‎frontend/public/Images/Add.png‎

509 Bytes
Loading

‎frontend/public/Images/spherrelogo.png‎

3.58 KB
Loading

‎frontend/public/Images/wall.png‎

2.03 MB
Loading

‎frontend/tailwind.config.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
1-
import type { Config } from "tailwindcss";
1+
import type { Config } from 'tailwindcss'
22

33
export default {
44
content: [
5-
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
6-
"./components/**/*.{js,ts,jsx,tsx,mdx}",
7-
"./app/**/*.{js,ts,jsx,tsx,mdx}",
5+
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
6+
'./components/**/*.{js,ts,jsx,tsx,mdx}',
7+
'./app/**/*.{js,ts,jsx,tsx,mdx}',
88
],
99
theme: {
1010
extend: {
1111
colors: {
12-
background: "var(--background)",
13-
foreground: "var(--foreground)",
12+
background: 'var(--background)',
13+
foreground: 'var(--foreground)',
1414
},
1515
},
1616
},
1717
plugins: [],
18-
} satisfies Config;
18+
} satisfies Config

0 commit comments

Comments
 (0)