drive-tutorial/src/app/(home)/layout.tsx at c6251ffe170a872a2ffbd032a9ff61dd58e9bd2f · ThomasCode92/drive-tutorial · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
import { Cloud, Shield, Users, Zap } from "lucide-react";
import Link from "next/link";

export default function HomePage({ children }: { children: React.ReactNode }) {
  return (
    <div className="min-h-screen bg-gradient-to-br from-black via-gray-900 to-gray-800 text-white">
      {/* Navigation */}
      <nav className="mx-auto flex max-w-7xl items-center justify-between p-6">
        <div className="flex items-center space-x-2">
          <Cloud className="h-8 w-8 text-white" />
          <span className="text-2xl font-bold">T4S Drive</span>
        </div>
        <div className="hidden items-center space-x-8 md:flex">
          <Link
            href="#features"
            className="text-gray-300 transition-colors hover:text-white"
          >
            Features
          </Link>
          <Link
            href="#pricing"
            className="text-gray-300 transition-colors hover:text-white"
          >
            Pricing
          </Link>
          <Link
            href="#contact"
            className="text-gray-300 transition-colors hover:text-white"
          >
            Contact
          </Link>
        </div>
      </nav>

      {/* Hero Section */}
      <main className="mx-auto flex max-w-4xl flex-col items-center justify-center px-6 py-20 text-center">
        <div className="space-y-8">
          <h1 className="text-5xl font-bold tracking-tight md:text-7xl">
            Your files,
            <br />
            <span className="bg-gradient-to-r from-gray-400 to-gray-200 bg-clip-text text-transparent">
              everywhere
            </span>
          </h1>

          <p className="mx-auto max-w-2xl text-xl leading-relaxed text-gray-300 md:text-2xl">
            Store, sync, and share your files with T4S Drive. Access your
            documents from any device, anywhere in the world.
          </p>

          {children}

          <p className="pt-4 text-sm text-gray-400">
            Free 15GB storage • No credit card required
          </p>
        </div>
      </main>

      {/* Features Section */}
      <section className="mx-auto max-w-6xl px-6 py-20">
        <div className="grid gap-8 md:grid-cols-3">
          <div className="space-y-4 text-center">
            <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-gray-800">
              <Shield className="h-8 w-8 text-gray-300" />
            </div>
            <h3 className="text-xl font-semibold">Secure Storage</h3>
            <p className="text-gray-400">
              Your files are encrypted and protected with enterprise-grade
              security.
            </p>
          </div>

          <div className="space-y-4 text-center">
            <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-gray-800">
              <Zap className="h-8 w-8 text-gray-300" />
            </div>
            <h3 className="text-xl font-semibold">Lightning Fast</h3>
            <p className="text-gray-400">
              Upload and download files at blazing speeds with our global CDN.
            </p>
          </div>

          <div className="space-y-4 text-center">
            <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-gray-800">
              <Users className="h-8 w-8 text-gray-300" />
            </div>
            <h3 className="text-xl font-semibold">Easy Sharing</h3>
            <p className="text-gray-400">
              Share files and folders with anyone, with granular permission
              controls.
            </p>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="mt-20 border-t border-gray-800 px-6 py-8">
        <div className="mx-auto flex max-w-6xl flex-col items-center justify-between md:flex-row">
          <div className="mb-4 flex items-center space-x-2 md:mb-0">
            <Cloud className="h-6 w-6 text-gray-400" />
            <span className="text-gray-400">
              © 2024 T4S Drive. All rights reserved.
            </span>
          </div>
          <div className="flex space-x-6">
            <Link
              href="#"
              className="text-gray-400 transition-colors hover:text-white"
            >
              Privacy
            </Link>
            <Link
              href="#"
              className="text-gray-400 transition-colors hover:text-white"
            >
              Terms
            </Link>
            <Link
              href="#"
              className="text-gray-400 transition-colors hover:text-white"
            >
              Support
            </Link>
          </div>
        </div>
      </footer>
    </div>
  );
}