diff --git a/thoughts-frontend/components/landing-page.tsx b/thoughts-frontend/components/landing-page.tsx
new file mode 100644
index 0000000..9c7f3a3
--- /dev/null
+++ b/thoughts-frontend/components/landing-page.tsx
@@ -0,0 +1,170 @@
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { LandingFeatures } from "./landing-features";
+
+export function LandingPage() {
+  return (
+    <div className="landing-bg min-h-screen relative overflow-hidden font-sans">
+      {/* Ambient orbs */}
+      <div
+        className="landing-orb"
+        style={{
+          width: 280, height: 280,
+          background: "radial-gradient(circle, rgba(147,210,255,0.55) 0%, transparent 70%)",
+          top: -80, left: -60,
+          "--orb-duration": "16s",
+          "--orb-delay": "0s",
+        } as React.CSSProperties}
+      />
+      <div
+        className="landing-orb"
+        style={{
+          width: 220, height: 220,
+          background: "radial-gradient(circle, rgba(134,239,172,0.5) 0%, transparent 70%)",
+          bottom: "10%", right: "5%",
+          "--orb-duration": "20s",
+          "--orb-delay": "-5s",
+          animationDirection: "reverse",
+        } as React.CSSProperties}
+      />
+      <div
+        className="landing-orb"
+        style={{
+          width: 160, height: 160,
+          background: "radial-gradient(circle, rgba(196,181,253,0.5) 0%, transparent 70%)",
+          top: "35%", left: "65%",
+          "--orb-duration": "14s",
+          "--orb-delay": "-8s",
+        } as React.CSSProperties}
+      />
+      <div
+        className="landing-orb hidden sm:block"
+        style={{
+          width: 200, height: 200,
+          background: "radial-gradient(circle, rgba(253,186,116,0.3) 0%, transparent 70%)",
+          top: "60%", left: "10%",
+          "--orb-duration": "18s",
+          "--orb-delay": "-3s",
+          animationDirection: "reverse",
+        } as React.CSSProperties}
+      />
+      <div
+        className="landing-orb hidden lg:block"
+        style={{
+          width: 140, height: 140,
+          background: "radial-gradient(circle, rgba(167,243,208,0.45) 0%, transparent 70%)",
+          top: "20%", right: "20%",
+          "--orb-duration": "12s",
+          "--orb-delay": "-10s",
+        } as React.CSSProperties}
+      />
+
+      {/* ── Section 1: Hero ── */}
+      <section className="relative z-10 flex items-center justify-center min-h-screen px-4 py-16">
+        <div className="landing-hero-card glass-effect rounded-2xl shadow-fa-lg p-8 sm:p-12 text-center max-w-md w-full mx-auto">
+          <h1 className="text-4xl sm:text-5xl font-black tracking-tight mb-3 text-shadow-sm">
+            Thoughts
+          </h1>
+          <p className="text-muted-foreground text-base sm:text-lg mb-8">
+            128 characters. No algorithms. Your web.
+          </p>
+          <div className="flex flex-col sm:flex-row gap-3 justify-center mb-6 relative z-10">
+            <Button
+              asChild
+              size="lg"
+              className="landing-cta rounded-full border-0 text-white"
+            >
+              <Link href="/register">Register</Link>
+            </Button>
+            <Button asChild size="lg" variant="outline" className="rounded-full">
+              <Link href="/login">Sign in</Link>
+            </Button>
+          </div>
+          <div className="flex items-center justify-center gap-2 text-xs text-muted-foreground relative z-10">
+            <span className="landing-badge-dot" />
+            Works with Mastodon, Pixelfed &amp; more
+          </div>
+        </div>
+      </section>
+
+      {/* ── Section 2: Features ── */}
+      <section className="relative z-10 container mx-auto max-w-3xl px-4 py-16">
+        <p className="text-xs font-semibold uppercase tracking-widest text-muted-foreground text-center mb-2">
+          What you can do
+        </p>
+        <LandingFeatures />
+      </section>
+
+      {/* ── Section 3: Fediverse ── */}
+      <section className="relative z-10 container mx-auto max-w-2xl px-4 py-16">
+        <div className="glass-effect rounded-2xl p-8 shadow-fa-md border border-sky-200/30">
+          <p className="text-xs font-semibold uppercase tracking-widest text-muted-foreground mb-2">
+            Part of something bigger
+          </p>
+          <h2 className="text-2xl font-bold mb-4">
+            Thoughts speaks ActivityPub
+          </h2>
+          <p className="text-muted-foreground text-sm leading-relaxed mb-6">
+            Follow and be followed by anyone on Mastodon, Pixelfed, or any
+            ActivityPub-compatible platform. Your thoughts travel across the
+            open web.
+          </p>
+          <div className="flex flex-wrap gap-2 mb-6">
+            {["🐘 Mastodon", "📷 Pixelfed"].map((label) => (
+              <span
+                key={label}
+                className="px-3 py-1 rounded-full text-xs font-medium bg-white/40 border border-white/60 hover:shadow-fa-sm transition-shadow cursor-default"
+              >
+                {label}
+              </span>
+            ))}
+          </div>
+          <Link
+            href="/about/fediverse"
+            className="text-sm text-primary hover:underline inline-flex items-center gap-1"
+          >
+            What is the Fediverse? →
+          </Link>
+        </div>
+      </section>
+
+      {/* ── Section 4: Vision ── */}
+      <section className="relative z-10 container mx-auto max-w-xl px-4 py-16 text-center">
+        <p className="text-xs font-semibold uppercase tracking-widest text-muted-foreground mb-3">
+          Why we built this
+        </p>
+        <h2 className="text-2xl sm:text-3xl font-bold mb-6">
+          The web used to feel human
+        </h2>
+        <p className="text-muted-foreground leading-relaxed mb-6">
+          No algorithms deciding what you see. No ads. No engagement bait. Just
+          people sharing what&apos;s on their mind, with friends they chose, in
+          spaces they decorated themselves.
+        </p>
+        <p className="text-sm italic text-muted-foreground">
+          That web still exists. You&apos;re looking at it.
+        </p>
+      </section>
+
+      {/* ── Section 5: Footer CTA ── */}
+      <section className="relative z-10 container mx-auto max-w-md px-4 py-16 text-center">
+        <div className="landing-hero-card glass-effect rounded-2xl p-8 shadow-fa-lg">
+          <h2 className="text-xl font-bold mb-6">Ready to join?</h2>
+          <Button
+            asChild
+            size="lg"
+            className="landing-cta rounded-full border-0 text-white w-full mb-3"
+          >
+            <Link href="/register">Register</Link>
+          </Button>
+          <p className="text-sm text-muted-foreground relative z-10">
+            Already have an account?{" "}
+            <Link href="/login" className="text-primary hover:underline">
+              Sign in
+            </Link>
+          </p>
+        </div>
+      </section>
+    </div>
+  );
+}