From a97507cc155db449dc69d1a81f4be412c2006b8e Mon Sep 17 00:00:00 2001
From: Gabriel Kaszewski <gabrielkaszewski@gmail.com>
Date: Fri, 29 May 2026 00:56:28 +0200
Subject: [PATCH] feat(frontend): replace inline LandingPage with new
 multi-section component

---
 thoughts-frontend/app/page.tsx | 114 +--------------------------------
 1 file changed, 1 insertion(+), 113 deletions(-)

diff --git a/thoughts-frontend/app/page.tsx b/thoughts-frontend/app/page.tsx
index 0c034c4..91c778b 100644
--- a/thoughts-frontend/app/page.tsx
+++ b/thoughts-frontend/app/page.tsx
@@ -4,8 +4,7 @@ import { getFeed, getMe, Me, FeedOptions, FeedSortOption } from "@/lib/api";
 import { FiltersSortingPanel } from "@/components/filters-sorting-panel";
 import { ThoughtForm } from "@/components/thought-form";
 import { EmptyState } from "@/components/empty-state";
-import { Button } from "@/components/ui/button";
-import Link from "next/link";
+import { LandingPage } from "@/components/landing-page";
 import { PopularTags } from "@/components/popular-tags";
 import { ThoughtThread } from "@/components/thought-thread";
 import { buildThoughtThreads } from "@/lib/utils";
@@ -150,114 +149,3 @@ async function FeedPage({
   );
 }
 
-function LandingPage() {
-  return (
-    <div className="font-sans min-h-screen flex items-center justify-center relative overflow-hidden">
-      {/* Ambient orbs */}
-      <div
-        className="orb"
-        style={{
-          width: 280,
-          height: 280,
-          background:
-            "radial-gradient(circle, #ffffff 0%, #87ceeb 60%, transparent 100%)",
-          top: "-80px",
-          left: "-60px",
-        }}
-      />
-      <div
-        className="orb"
-        style={{
-          width: 220,
-          height: 220,
-          background:
-            "radial-gradient(circle, #b2f5ea 0%, #48bb78 60%, transparent 100%)",
-          bottom: "-40px",
-          right: "5%",
-        }}
-      />
-      <div
-        className="orb"
-        style={{
-          width: 160,
-          height: 160,
-          background:
-            "radial-gradient(circle, #e0f2fe 0%, #38bdf8 60%, transparent 100%)",
-          top: "35%",
-          left: "65%",
-        }}
-      />
-
-      {/* Hero card */}
-      <div
-        className="container mx-auto max-w-lg p-4 sm:p-6 text-center relative z-10"
-        style={{
-          background: "rgba(255,255,255,0.28)",
-          backdropFilter: "blur(20px)",
-          WebkitBackdropFilter: "blur(20px)",
-          border: "1px solid rgba(255,255,255,0.55)",
-          borderRadius: "20px",
-          boxShadow:
-            "0 8px 32px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.6)",
-        }}
-      >
-        {/* Gloss sweep */}
-        <div
-          aria-hidden
-          style={{
-            position: "absolute",
-            top: 0,
-            left: 0,
-            right: 0,
-            height: "55%",
-            background:
-              "linear-gradient(180deg, rgba(255,255,255,0.38) 0%, transparent 100%)",
-            borderRadius: "20px 20px 0 0",
-            pointerEvents: "none",
-          }}
-        />
-
-        <h1
-          className="text-5xl font-bold relative"
-          style={{
-            textShadow:
-              "0 2px 4px rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.1)",
-          }}
-        >
-          Welcome to Thoughts
-        </h1>
-        <p className="text-muted-foreground mt-3 relative">
-          A federated social network for short-form thoughts.
-          <br />
-          Connect with the Fediverse.
-        </p>
-
-        <div className="mt-8 flex justify-center gap-4 relative">
-          <Button asChild className="px-7">
-            <Link href="/login">Login</Link>
-          </Button>
-          <Button asChild variant="secondary" className="px-7">
-            <Link href="/register">Register</Link>
-          </Button>
-        </div>
-
-        {/* Fediverse badge */}
-        <div className="mt-5 relative flex justify-center">
-          <span
-            className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-xs text-muted-foreground"
-            style={{
-              background: "rgba(255,255,255,0.3)",
-              border: "1px solid rgba(255,255,255,0.5)",
-            }}
-          >
-            <span
-              className="w-2 h-2 rounded-full bg-emerald-400 inline-block"
-              style={{ boxShadow: "0 0 4px #34d399" }}
-            />
-            Works with Mastodon, Pixelfed &amp; more
-          </span>
-        </div>
-      </div>
-    </div>
-  );
-}