feat(web): landing page for Clicked

apps/web/src/app/globals.css

@@ -1,26 +1,34 @@
 @import "tailwindcss";
 
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
+  --background: #0a0a0f;
+  --foreground: #f0f0f5;
+  --accent: #7c5cfc;
+  --accent-light: #a78bfa;
+  --muted: #3f3f50;
+  --card: #13131f;
+  --border: #1e1e2e;
 }
 
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
+  --color-accent: var(--accent);
+  --color-accent-light: var(--accent-light);
+  --color-muted: var(--muted);
+  --color-card: var(--card);
+  --color-border: var(--border);
   --font-sans: var(--font-geist-sans);
   --font-mono: var(--font-geist-mono);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--font-sans), Arial, Helvetica, sans-serif;
+}
+
+/* Smooth scrolling */
+html {
+  scroll-behavior: smooth;
 }

apps/web/src/app/layout.tsx

@@ -13,8 +13,9 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Clicked — Web3 Social Messaging",
+  description:
+    "Chat, send tokens, and fund ideas — all in one place. A decentralized messaging platform built on Stellar.",
 };
 
 export default function RootLayout({

apps/web/src/app/page.tsx

@@ -1,65 +1,23 @@
-import Image from "next/image";
+import { Navbar } from "@/components/landing/Navbar";
+import { Hero } from "@/components/landing/Hero";
+import { Features } from "@/components/landing/Features";
+import { HowItWorks } from "@/components/landing/HowItWorks";
+import { TechStack } from "@/components/landing/TechStack";
+import { CTA } from "@/components/landing/CTA";
+import { Footer } from "@/components/landing/Footer";
 
-export default function Home() {
+export default function LandingPage() {
   return (
-    <div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
-        </div>
+    <>
+      <Navbar />
+      <main>
+        <Hero />
+        <Features />
+        <HowItWorks />
+        <TechStack />
+        <CTA />
       </main>
-    </div>
+      <Footer />
+    </>
   );
 }

apps/web/src/components/landing/CTA.tsx

@@ -0,0 +1,28 @@
+export function CTA() {
+  return (
+    <section className="border-t border-[var(--border)]">
+      <div className="relative mx-auto max-w-6xl overflow-hidden px-6 py-32 text-center">
+        <div
+          aria-hidden
+          className="pointer-events-none absolute inset-0 flex items-center justify-center"
+        >
+          <div className="h-[400px] w-[400px] rounded-full bg-[var(--accent)]/10 blur-[100px]" />
+        </div>
+        <div className="relative z-10">
+          <h2 className="text-3xl font-bold tracking-tight text-[var(--foreground)] sm:text-4xl">
+            Ready to coordinate on-chain?
+          </h2>
+          <p className="mt-4 text-[var(--foreground)]/50">
+            Connect your Stellar wallet and start building with your community.
+          </p>
+          <a
+            href="/app"
+            className="mt-8 inline-flex rounded-full bg-[var(--accent)] px-10 py-3.5 text-sm font-semibold text-white shadow-lg shadow-[var(--accent)]/20 transition-opacity hover:opacity-90"
+          >
+            Launch App
+          </a>
+        </div>
+      </div>
+    </section>
+  );
+}

apps/web/src/components/landing/Features.tsx

@@ -0,0 +1,66 @@
+const FEATURES = [
+  {
+    icon: "💬",
+    title: "Wallet-to-Wallet Messaging",
+    description:
+      "Chat directly with any Stellar wallet address. No email, no username — just your public key.",
+  },
+  {
+    icon: "💸",
+    title: "Send Tokens in Chat",
+    description:
+      "Transfer XLM or any Soroban token inside a conversation. Payments feel as natural as sending a message.",
+  },
+  {
+    icon: "🏦",
+    title: "Group Treasuries",
+    description:
+      "Communities pool funds into a shared on-chain treasury. Transparent, permissionless, always auditable.",
+  },
+  {
+    icon: "📋",
+    title: "Community Proposals",
+    description:
+      "Submit funding ideas and let the group decide. Proposals live on-chain — no back-room decisions.",
+  },
+  {
+    icon: "🗳️",
+    title: "DAO-style Voting",
+    description:
+      "Lightweight on-chain voting tied to your wallet stake. One address, one voice — or weighted by contribution.",
+  },
+  {
+    icon: "🤖",
+    title: "AI-powered Insights",
+    description:
+      "Fraud detection, proposal summarisation, and smart assistants baked into the conversation layer.",
+  },
+];
+
+export function Features() {
+  return (
+    <section id="features" className="mx-auto max-w-6xl px-6 py-32">
+      <div className="mb-16 text-center">
+        <h2 className="text-3xl font-bold tracking-tight text-[var(--foreground)] sm:text-4xl">
+          Everything in one place
+        </h2>
+        <p className="mt-4 text-[var(--foreground)]/50">
+          No more switching between Telegram, Gnosis Safe, and Snapshot.
+        </p>
+      </div>
+
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        {FEATURES.map((f) => (
+          <div
+            key={f.title}
+            className="group rounded-2xl border border-[var(--border)] bg-[var(--card)] p-6 transition-colors hover:border-[var(--muted)]"
+          >
+            <span className="text-3xl">{f.icon}</span>
+            <h3 className="mt-4 text-base font-semibold text-[var(--foreground)]">{f.title}</h3>
+            <p className="mt-2 text-sm leading-relaxed text-[var(--foreground)]/50">{f.description}</p>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

apps/web/src/components/landing/Footer.tsx

@@ -0,0 +1,30 @@
+export function Footer() {
+  return (
+    <footer className="border-t border-[var(--border)] px-6 py-10">
+      <div className="mx-auto flex max-w-6xl flex-col items-center justify-between gap-4 text-sm text-[var(--foreground)]/40 sm:flex-row">
+        <span>
+          clicked<span className="text-[var(--accent)]">.</span> — Web3 Social Messaging
+        </span>
+        <div className="flex items-center gap-6">
+          <a
+            href="https://github.com/codebestia/clicked"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="hover:text-[var(--foreground)] transition-colors"
+          >
+            GitHub
+          </a>
+          <a
+            href="https://stellar.org"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="hover:text-[var(--foreground)] transition-colors"
+          >
+            Stellar
+          </a>
+          <span>MIT License</span>
+        </div>
+      </div>
+    </footer>
+  );
+}

apps/web/src/components/landing/Hero.tsx

@@ -0,0 +1,98 @@
+export function Hero() {
+  return (
+    <section className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden px-6 pt-24 text-center">
+      {/* Background glow */}
+      <div
+        aria-hidden
+        className="pointer-events-none absolute inset-0 flex items-center justify-center"
+      >
+        <div className="h-[600px] w-[600px] rounded-full bg-[var(--accent)]/10 blur-[120px]" />
+      </div>
+
+      <div className="relative z-10 flex max-w-3xl flex-col items-center gap-6">
+        <span className="inline-flex items-center gap-2 rounded-full border border-[var(--accent)]/30 bg-[var(--accent)]/10 px-4 py-1.5 text-xs font-medium text-[var(--accent-light)]">
+          <span className="h-1.5 w-1.5 rounded-full bg-[var(--accent-light)]" />
+          Built on Stellar · Powered by Soroban
+        </span>
+
+        <h1 className="text-5xl font-bold leading-tight tracking-tight text-[var(--foreground)] sm:text-6xl lg:text-7xl">
+          Chat. Pay.{" "}
+          <span className="bg-gradient-to-r from-[var(--accent)] to-[var(--accent-light)] bg-clip-text text-transparent">
+            Build together.
+          </span>
+        </h1>
+
+        <p className="max-w-xl text-lg leading-relaxed text-[var(--foreground)]/60">
+          Clicked is a decentralized messaging platform where you can send tokens
+          as easily as messages, fund community ideas, and govern shared
+          treasuries — all in one place.
+        </p>
+
+        <div className="flex flex-col gap-3 sm:flex-row">
+          <a
+            href="/app"
+            className="rounded-full bg-[var(--accent)] px-8 py-3 text-sm font-semibold text-white shadow-lg shadow-[var(--accent)]/20 transition-opacity hover:opacity-90"
+          >
+            Launch App
+          </a>
+          <a
+            href="https://github.com/codebestia/clicked"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="rounded-full border border-[var(--border)] px-8 py-3 text-sm font-semibold text-[var(--foreground)]/70 transition-colors hover:border-[var(--muted)] hover:text-[var(--foreground)]"
+          >
+            View on GitHub
+          </a>
+        </div>
+      </div>
+
+      {/* Mock chat preview */}
+      <div className="relative z-10 mt-20 w-full max-w-2xl">
+        <div className="rounded-2xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-2xl shadow-black/40">
+          <div className="mb-4 flex items-center gap-3 border-b border-[var(--border)] pb-4">
+            <div className="h-8 w-8 rounded-full bg-[var(--accent)]/30" />
+            <div>
+              <p className="text-sm font-medium text-[var(--foreground)]">builders-dao</p>
+              <p className="text-xs text-[var(--foreground)]/40">4 members</p>
+            </div>
+          </div>
+          <div className="flex flex-col gap-3 text-sm">
+            <ChatBubble align="left" name="alice.xlm" message="Should we fund the new UI sprint? 🎨" />
+            <ChatBubble align="right" name="You" message="Sent 50 XLM to the treasury ✓" highlight />
+            <ChatBubble align="left" name="bob.xlm" message="Proposal live — 3/4 votes so far 🗳️" />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function ChatBubble({
+  align,
+  name,
+  message,
+  highlight,
+}: {
+  align: "left" | "right";
+  name: string;
+  message: string;
+  highlight?: boolean;
+}) {
+  return (
+    <div className={`flex gap-2 ${align === "right" ? "flex-row-reverse" : ""}`}>
+      <div className="mt-1 h-6 w-6 shrink-0 rounded-full bg-[var(--muted)]" />
+      <div className={`max-w-xs ${align === "right" ? "items-end" : "items-start"} flex flex-col gap-0.5`}>
+        <span className="px-1 text-xs text-[var(--foreground)]/40">{name}</span>
+        <div
+          className={`rounded-2xl px-4 py-2 text-sm ${
+            highlight
+              ? "bg-[var(--accent)] text-white"
+              : "bg-[var(--border)] text-[var(--foreground)]/80"
+          }`}
+        >
+          {message}
+        </div>
+      </div>
+    </div>
+  );
+}