1import { FeatureCard } from "../components/FeatureCard";
2import { PricingCard } from "../components/PricingCard";
3
4export default function Home() {
5 return (
6 <main className="flex min-h-screen flex-col items-center justify-between p-24">
7 <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
8 <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4">
9 Get started by editing
10 <code className="font-mono font-bold">app/page.tsx</code>
11 </p>
12 </div>
13
14 <div className="mb-32 text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:text-left">
15 <h1 className="text-5xl font-bold bg-gradient-to-r from-purple-400 to-cyan-400 bg-clip-text text-transparent mb-8">
16 Welcome to Our Platform
17 </h1>
18 <p className="text-gray-400 text-lg mb-12">
19 The next generation of web development
20 </p>
21
22 <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
23 <FeatureCard
24 title="Fast"
25 description="Lightning-fast performance out of the box"
26 icon="⚡"
27 />
28 <FeatureCard
29 title="Scalable"
30 description="Grows with your business needs"
31 icon="📈"
32 />
33 <FeatureCard
34 title="Secure"
35 description="Enterprise-grade security built in"
36 icon="🔒"
37 />
38 </div>
39
40 <div className="mt-16">
41 <h2 className="text-purple-500 text-3xl font-bold text-center mb-8">Pricing</h2>
42 <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
43 <PricingCard name="Starter" price="$9" features={["5 projects", "Basic support"]} />
44 <PricingCard name="Pro" price="$29" features={["Unlimited projects", "Priority support"]} highlighted />
45 </div>
46 </div>
47 </div>
48 </main>
49 );
50}