Skip to content

Commit 520d96b

Browse files
ThomasCode92ThomasCode92
committed
Add a (Base for) Home Page
1 parent 46dc54f commit 520d96b

2 files changed

Lines changed: 146 additions & 2 deletions

File tree

‎README.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,16 @@ To apply the same base UI in a project, run the following command:
3535
npx shadcn@latest add "https://v0.dev/chat/b/b_fFQhsfElqQi"
3636
```
3737

38+
#### 🏠 Homepage
39+
40+
The homepage layout was also crafted using v0. The generation prompt for it was:
41+
42+
```text
43+
A minimal homepage for a Google Drive clone named T4S Drive. It should be just a
44+
marketing page with a "get started" button. A gradient would be nice, please use
45+
black and dark neutral grays.
46+
```
47+
3848
### 🧰 Learn More about the T3 Stack
3949

4050
To explore more about the [T3 Stack](https://create.t3.gg/), refer to the

‎src/app/(home)/page.tsx‎

Lines changed: 136 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,137 @@
1-
export default async function HomePage() {
2-
return <h1>Welcome to your Drive</h1>;
1+
import { Cloud, Shield, Users, Zap } from "lucide-react";
2+
import Link from "next/link";
3+
import { Button } from "~/components/ui/button";
4+
5+
export default function HomePage() {
6+
return (
7+
<div className="min-h-screen bg-gradient-to-br from-black via-gray-900 to-gray-800 text-white">
8+
{/* Navigation */}
9+
<nav className="mx-auto flex max-w-7xl items-center justify-between p-6">
10+
<div className="flex items-center space-x-2">
11+
<Cloud className="h-8 w-8 text-white" />
12+
<span className="text-2xl font-bold">T4S Drive</span>
13+
</div>
14+
<div className="hidden items-center space-x-8 md:flex">
15+
<Link
16+
href="#features"
17+
className="text-gray-300 transition-colors hover:text-white"
18+
>
19+
Features
20+
</Link>
21+
<Link
22+
href="#pricing"
23+
className="text-gray-300 transition-colors hover:text-white"
24+
>
25+
Pricing
26+
</Link>
27+
<Link
28+
href="#contact"
29+
className="text-gray-300 transition-colors hover:text-white"
30+
>
31+
Contact
32+
</Link>
33+
</div>
34+
</nav>
35+
36+
{/* Hero Section */}
37+
<main className="mx-auto flex max-w-4xl flex-col items-center justify-center px-6 py-20 text-center">
38+
<div className="space-y-8">
39+
<h1 className="text-5xl font-bold tracking-tight md:text-7xl">
40+
Your files,
41+
<br />
42+
<span className="bg-gradient-to-r from-gray-400 to-gray-200 bg-clip-text text-transparent">
43+
everywhere
44+
</span>
45+
</h1>
46+
47+
<p className="mx-auto max-w-2xl text-xl leading-relaxed text-gray-300 md:text-2xl">
48+
Store, sync, and share your files with T4S Drive. Access your
49+
documents from any device, anywhere in the world.
50+
</p>
51+
52+
<div className="pt-8">
53+
<Button
54+
size="lg"
55+
className="rounded-full bg-white px-8 py-6 text-lg font-semibold text-black transition-all duration-200 hover:scale-105 hover:bg-gray-100"
56+
>
57+
Get Started
58+
</Button>
59+
</div>
60+
61+
<p className="pt-4 text-sm text-gray-400">
62+
Free 15GB storage • No credit card required
63+
</p>
64+
</div>
65+
</main>
66+
67+
{/* Features Section */}
68+
<section className="mx-auto max-w-6xl px-6 py-20">
69+
<div className="grid gap-8 md:grid-cols-3">
70+
<div className="space-y-4 text-center">
71+
<div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-gray-800">
72+
<Shield className="h-8 w-8 text-gray-300" />
73+
</div>
74+
<h3 className="text-xl font-semibold">Secure Storage</h3>
75+
<p className="text-gray-400">
76+
Your files are encrypted and protected with enterprise-grade
77+
security.
78+
</p>
79+
</div>
80+
81+
<div className="space-y-4 text-center">
82+
<div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-gray-800">
83+
<Zap className="h-8 w-8 text-gray-300" />
84+
</div>
85+
<h3 className="text-xl font-semibold">Lightning Fast</h3>
86+
<p className="text-gray-400">
87+
Upload and download files at blazing speeds with our global CDN.
88+
</p>
89+
</div>
90+
91+
<div className="space-y-4 text-center">
92+
<div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-gray-800">
93+
<Users className="h-8 w-8 text-gray-300" />
94+
</div>
95+
<h3 className="text-xl font-semibold">Easy Sharing</h3>
96+
<p className="text-gray-400">
97+
Share files and folders with anyone, with granular permission
98+
controls.
99+
</p>
100+
</div>
101+
</div>
102+
</section>
103+
104+
{/* Footer */}
105+
<footer className="mt-20 border-t border-gray-800 px-6 py-8">
106+
<div className="mx-auto flex max-w-6xl flex-col items-center justify-between md:flex-row">
107+
<div className="mb-4 flex items-center space-x-2 md:mb-0">
108+
<Cloud className="h-6 w-6 text-gray-400" />
109+
<span className="text-gray-400">
110+
© 2024 T4S Drive. All rights reserved.
111+
</span>
112+
</div>
113+
<div className="flex space-x-6">
114+
<Link
115+
href="#"
116+
className="text-gray-400 transition-colors hover:text-white"
117+
>
118+
Privacy
119+
</Link>
120+
<Link
121+
href="#"
122+
className="text-gray-400 transition-colors hover:text-white"
123+
>
124+
Terms
125+
</Link>
126+
<Link
127+
href="#"
128+
className="text-gray-400 transition-colors hover:text-white"
129+
>
130+
Support
131+
</Link>
132+
</div>
133+
</div>
134+
</footer>
135+
</div>
136+
);
3137
}

0 commit comments

Comments
 (0)