What you see iswhat you ship

1import Image from "next/image";
2import Link from "next/link";
3
4export function LandingPage() {
5  return (
6    <main className="min-h-screen bg-background">
7      {/* Navigation */}
8      <nav className="fixed top-0 left-0 right-0 z-50">
9        <div className="section-padding flex h-16 items-center justify-between">
10          <Link href="/" className="flex items-center gap-2">
11            <Image src="/logo.svg" alt="Wonder" width={24} height={24} />
12            <span className="font-semibold text-foreground">Wonder</span>
13          </Link>
14          <div className="flex items-center gap-4">
15            <Link href="/docs" className="text-sm text-foreground-secondary">
16              Docs
17            </Link>
18            <Button variant="secondary">Go to App</Button>
19          </div>
20        </div>
21      </nav>
22
23      {/* Hero */}
24      <section className="flex items-center justify-center pt-40 pb-24">
25        <div className="flex flex-col items-center gap-8 max-w-xl">
26          <h1 className="text-display text-center">
27            Allow anyone to turn their vision to life
28          </h1>
29          <p className="text-body text-center">
30            Ideate faster with AI. Design on a canvas backed by
31            real code. No rebuilding. No handoff.
32          </p>
33          <div className="flex gap-3">
34            <Button variant="primary">Try Wonder Free</Button>
35            <Button variant="ghost">Join Community</Button>
36          </div>
37        </div>
38      </section>
39
40      {/* Features */}
41      <section className="bg-background-inverted section-y">
42        <div className="section-padding">
43          <div className="grid md:grid-cols-2 gap-8">
44            <div>
45              <span className="label text-accent">Features</span>
46              <h2 className="h2 mt-3">
47                Design and move to production faster
48              </h2>
49            </div>
50            <p className="text-body self-end">
51              Wonder is the design tool where you can design
52              with AI, chat with it, edit alongside it.
53            </p>
54          </div>
55
56          <div className="mt-12 grid md:grid-cols-3 gap-6">
57            <FeatureCard
58              title="Simply Powerful"
59              description="A familiar interface with AI woven in."
60            />
61            <FeatureCard
62              title="Backed by Code"
63              description="Built on code from the ground up."
64            />
65            <FeatureCard
66              title="Built to Explore"
67              description="Generate ideas and iterate faster."
68            />
69          </div>
70        </div>
71      </section>
72
73      {/* Pricing */}
74      <section className="bg-background section-y">
75        <div className="section-padding">
76          <h2 className="h2 text-center text-foreground">
77            Choose your plan
78          </h2>
79          <div className="mt-10 grid md:grid-cols-2 gap-6">
80            <PricingCard plan="free" price="$0" />
81            <PricingCard plan="pro" price="$16/user/mo" billing="yearly" />
82          </div>
83        </div>
84      </section>
85
86      {/* Footer */}
87      <footer className="border-t border-border-subtle">
88        <div className="section-padding cell-padding flex justify-between">
89          <Image src="/logo.svg" alt="Wonder" width={20} height={20} />
90          <nav className="flex gap-6 text-sm text-foreground-secondary">
91            <Link href="/product">Product</Link>
92            <Link href="/docs">Docs</Link>
93            <Link href="/pricing">Pricing</Link>
94          </nav>
95          <p className="text-caption">&copy; 2026 Aquila Labs</p>
96        </div>
97      </footer>
98    </main>
99  );
100}