diff --git a/.gitignore b/.gitignore
index 5ef6a52..f8b926f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -36,6 +36,10 @@ yarn-error.log*
 # vercel
 .vercel
 
+# superdesign
+.superdesign
+
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+.env*.local
diff --git a/next.config.ts b/next.config.ts
index e9ffa30..a9194aa 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -1,7 +1,14 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "images.unsplash.com",
+      },
+    ],
+  },
 };
 
 export default nextConfig;
diff --git a/src/app/globals.css b/src/app/globals.css
index a2dc41e..00fe54f 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,26 +1,314 @@
 @import "tailwindcss";
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
+@theme inline {
+  --color-c47-bg: #0c0a09;
+  --color-c47-accent: #FF6B50;
+  --color-c47-accent-dim: rgba(255, 107, 80, 0.15);
+  --color-c47-accent-glow: rgba(255, 107, 80, 0.4);
+  --color-c47-muted: #78716c;
+  --color-c47-border: #27272a;
+  --color-c47-card: #111111;
+  --color-c47-text: #ebebeb;
+
+  --font-sans: var(--font-satoshi), var(--font-inter), ui-sans-serif, system-ui, sans-serif;
+  --font-mono: var(--font-jetbrains-mono), ui-monospace, monospace;
 }
 
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+/* ── Base ────────────────────────────────────────── */
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  background: var(--color-c47-bg);
+  color: var(--color-c47-text);
+  font-family: var(--font-sans);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+::selection {
+  background: var(--color-c47-accent);
+  color: #fff;
+}
+
+/* ── Scroll Reveal ───────────────────────────────── */
+
+.reveal {
+  opacity: 0;
+  transform: translateY(32px);
+  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
+    transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.reveal.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.reveal-delay-1 { transition-delay: 0.1s; }
+.reveal-delay-2 { transition-delay: 0.2s; }
+.reveal-delay-3 { transition-delay: 0.3s; }
+.reveal-delay-4 { transition-delay: 0.4s; }
+
+/* ── Terminal Line Stagger ───────────────────────── */
+
+.terminal-line {
+  opacity: 0;
+  transform: translateX(-8px);
+  transition: opacity 0.5s ease, transform 0.5s ease;
+}
+
+.terminal-active .terminal-line:nth-child(1) { opacity: 1; transform: translateX(0); transition-delay: 0s; }
+.terminal-active .terminal-line:nth-child(2) { opacity: 1; transform: translateX(0); transition-delay: 0.15s; }
+.terminal-active .terminal-line:nth-child(3) { opacity: 1; transform: translateX(0); transition-delay: 0.3s; }
+
+/* ── Card Shimmer ────────────────────────────────── */
+
+.card-shimmer {
+  position: relative;
+  overflow: hidden;
+}
+
+.card-shimmer::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 50%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 107, 80, 0.04), transparent);
+  transition: none;
+  pointer-events: none;
+}
+
+.card-shimmer:hover::after {
+  animation: shimmer 1.2s ease-out forwards;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+@keyframes shimmer {
+  0% { left: -50%; }
+  100% { left: 150%; }
+}
+
+/* ── CTA Glow Pulse ──────────────────────────────── */
+
+@keyframes glow-pulse {
+  0%, 100% {
+    box-shadow: 0 0 20px rgba(255, 107, 80, 0.2),
+      0 0 40px rgba(255, 107, 80, 0.05);
+  }
+  50% {
+    box-shadow: 0 0 28px rgba(255, 107, 80, 0.35),
+      0 0 56px rgba(255, 107, 80, 0.1);
   }
 }
 
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+.cta-glow {
+  animation: glow-pulse 3s ease-in-out infinite;
+}
+
+.cta-glow:hover {
+  animation: none;
+  box-shadow: 0 0 36px rgba(255, 107, 80, 0.5),
+    0 0 72px rgba(255, 107, 80, 0.15);
+}
+
+/* ── Step Number Bounce ──────────────────────────── */
+
+@keyframes bounceStep {
+  0% { transform: scale(1); }
+  40% { transform: scale(1.08); }
+  70% { transform: scale(0.98); }
+  100% { transform: scale(1.05); }
+}
+
+.step-number {
+  transition: color 0.35s ease, transform 0.35s ease;
+  display: inline-block;
+}
+
+.group\/step:hover .step-number {
+  animation: bounceStep 0.35s ease-out forwards;
+  color: #FF6B50 !important;
+}
+
+/* ── Float Animation ───────────────────────────── */
+
+@keyframes float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-8px); }
+}
+
+.animate-float {
+  animation: float 4s ease-in-out infinite;
+}
+
+.animate-float-delayed {
+  animation: float 4.5s ease-in-out 0.5s infinite;
+}
+
+.animate-float-delayed-2 {
+  animation: float 5s ease-in-out 1s infinite;
+}
+
+/* ── Newsletter Underline ────────────────────────── */
+
+.newsletter-input {
+  background-image: linear-gradient(to right, #FF6B50, #FF9A85);
+  background-size: 0% 2px;
+  background-position: left bottom;
+  background-repeat: no-repeat;
+  transition: background-size 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+    border-color 0.4s ease;
+}
+
+.newsletter-input:focus {
+  background-size: 100% 2px;
+  border-color: transparent !important;
+}
+
+/* ── Gradient Border Glow ────────────────────────── */
+
+.gradient-border-glow {
+  position: relative;
+}
+
+.gradient-border-glow::before {
+  content: "";
+  position: absolute;
+  inset: -1px;
+  border-radius: inherit;
+  padding: 1px;
+  background: linear-gradient(135deg, rgba(255, 107, 80, 0.3), transparent 50%, rgba(255, 107, 80, 0.1));
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.5s ease;
+}
+
+.gradient-border-glow:hover::before {
+  opacity: 1;
+}
+
+/* ── Gradient text helpers ───────────────────────── */
+
+.gradient-text {
+  background: linear-gradient(135deg, #FF6B50 0%, #FF9A85 40%, #ffffff 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.text-gradient {
+  background: linear-gradient(135deg, #FF6B50 0%, #FF9A85 40%, #ffffff 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* ── Nav Separator ───────────────────────────────── */
+
+.nav-separator {
+  width: 1px;
+  background: linear-gradient(to bottom, transparent, rgba(255, 107, 80, 0.4), transparent);
+}
+
+/* ── Social Icon Glow ────────────────────────────── */
+
+.social-glow:hover {
+  box-shadow: 0 8px 24px rgba(255, 107, 80, 0.25);
+  border-color: rgba(255, 107, 80, 0.4) !important;
+}
+
+/* ── Animated Logo ──────────────────────────────── */
+
+.logo-animated {
+  --logo-glow: rgba(231, 229, 228, 0.3);
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  line-height: 1;
+  font-weight: 400;
+  color: var(--color-c47-text);
+  white-space: pre;
+  user-select: none;
+  letter-spacing: -0.08em;
+  cursor: pointer;
+  text-shadow: 0 0 8px rgba(231, 229, 228, 0.15);
+}
+
+.logo-animated__glyph {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  z-index: 1;
+}
+
+.logo-animated__line {
+  display: flex;
+  height: 1.1em;
+}
+
+.logo-animated__char {
+  display: inline-block;
+  min-width: 0.55em;
+  text-align: center;
+  opacity: 0.3;
+  transition: opacity 0.1s ease-out;
+}
+
+.logo-animated.is-animating .logo-animated__char:not(.is-locked) {
+  opacity: 0.5;
+}
+
+.logo-animated__char.is-locked {
+  opacity: 1;
+}
+
+.logo-animated__char.is-flashing {
+  text-shadow: 0 0 6px var(--logo-glow), 0 0 12px rgba(245, 158, 11, 0.25);
+}
+
+.logo-animated.is-complete .logo-animated__glyph {
+  text-shadow: 0 0 1px var(--logo-glow), 0 0 8px var(--logo-glow);
+  animation: logo-breathe 4s ease-in-out infinite;
+  animation-delay: 1s;
+}
+
+@keyframes logo-breathe {
+  0%, to {
+    text-shadow: 0 0 1px var(--logo-glow), 0 0 8px var(--logo-glow);
+  }
+  50% {
+    text-shadow: 0 0 2px var(--logo-glow), 0 0 12px var(--logo-glow), 0 0 20px rgba(231, 229, 228, 0.18);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .logo-animated__char {
+    opacity: 1 !important;
+    transition: none;
+  }
+  .logo-animated__char.is-flashing {
+    color: inherit;
+    text-shadow: none;
+  }
+  .logo-animated.is-complete .logo-animated__glyph {
+    animation: none;
+  }
+}
+
+/* ── View Transitions ────────────────────────────── */
+
+@view-transition { navigation: auto; }
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation-duration: 0.4s;
+  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 976eb90..1a6189c 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,20 +1,54 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import localFont from "next/font/local";
+import { Inter, JetBrains_Mono } from "next/font/google";
 import "./globals.css";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
+const satoshi = localFont({
+  src: [
+    { path: "../fonts/Satoshi-Light.woff2", weight: "300", style: "normal" },
+    { path: "../fonts/Satoshi-Regular.woff2", weight: "400", style: "normal" },
+    { path: "../fonts/Satoshi-Medium.woff2", weight: "500", style: "normal" },
+    { path: "../fonts/Satoshi-Bold.woff2", weight: "700", style: "normal" },
+    { path: "../fonts/Satoshi-Black.woff2", weight: "900", style: "normal" },
+  ],
+  variable: "--font-satoshi",
+  display: "swap",
+});
+
+const inter = Inter({
   subsets: ["latin"],
+  variable: "--font-inter",
+  display: "swap",
 });
 
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
+const jetbrainsMono = JetBrains_Mono({
   subsets: ["latin"],
+  variable: "--font-jetbrains-mono",
+  display: "swap",
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  other: {
+    "view-transition": "same-origin",
+  },
+  title: "channel47 — Turn Reddit threads and Amazon reviews into creative strategy",
+  description:
+    "A free Claude Code plugin that extracts real customer language from public data and turns it into personas and ad angles you can use today.",
+  metadataBase: new URL("https://channel47.dev"),
+  openGraph: {
+    title: "channel47 — Turn Reddit threads and Amazon reviews into creative strategy",
+    description:
+      "A free Claude Code plugin that extracts real customer language from public data and turns it into personas and ad angles you can use today.",
+    url: "https://channel47.dev",
+    siteName: "channel47",
+    type: "website",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "channel47",
+    description:
+      "A free Claude Code plugin that extracts real customer language from public data and turns it into personas and ad angles you can use today.",
+  },
 };
 
 export default function RootLayout({
@@ -25,7 +59,7 @@ export default function RootLayout({
   return (
     <html
       lang="en"
-      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
+      className={`${satoshi.variable} ${inter.variable} ${jetbrainsMono.variable} h-full antialiased`}
     >
       <body className="min-h-full flex flex-col">{children}</body>
     </html>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 3f36f7c..bc3d36d 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,65 +1,275 @@
-import Image from "next/image";
+import ScrollReveal from "@/components/ScrollReveal";
+import TopNavigation from "@/components/TopNavigation";
+import FloatingBottomNav from "@/components/FloatingBottomNav";
+import HeroSection from "@/components/HeroSection";
+import SectionHeader from "@/components/SectionHeader";
+import StepCard from "@/components/StepCard";
+import TerminalQuoteWindow from "@/components/TerminalQuoteWindow";
+import SkillCard from "@/components/SkillCard";
+import ProofCard from "@/components/ProofCard";
+import FloatingGlowOrb from "@/components/FloatingGlowOrb";
+import CTAButton from "@/components/CTAButton";
+import NewsletterForm from "@/components/NewsletterForm";
+import FooterHero from "@/components/FooterHero";
+import SocialIconLink from "@/components/SocialIconLink";
 
 export default function Home() {
   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"
+    <div className="min-h-screen overflow-x-hidden relative">
+      <ScrollReveal />
+      <TopNavigation />
+      <FloatingBottomNav />
+
+      <main className="flex-1">
+        {/* ── Hero ──────────────────────────────────────────── */}
+        <HeroSection />
+
+        {/* ── How It Works + Terminal Preview ────────────────── */}
+        <section className="py-32 px-6 md:px-12 max-w-7xl mx-auto">
+          <SectionHeader label="Why launch slow when you can move fast?" />
+
+          <h2 className="text-4xl md:text-7xl font-medium leading-[1.05] tracking-tight text-white max-w-5xl mb-24 reveal reveal-delay-1">
+            One command.{" "}
+            <span className="text-[#666666]">
+              30 seconds. Real customer language ready to deploy.
+            </span>
+          </h2>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+            {/* Steps card */}
+            <div
+              className="reveal reveal-delay-2 rounded-[2.5rem] p-10 md:p-12 min-h-[520px] flex flex-col justify-between relative overflow-hidden group transition-all duration-500 card-shimmer gradient-border-glow"
+              style={{
+                background:
+                  "radial-gradient(ellipse at top right, rgba(255,107,80,0.06), transparent 60%), linear-gradient(135deg, #111111, #0d0d0d)",
+              }}
             >
-              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"
+              <div className="absolute top-10 right-10 bg-[#1a1a1a] text-[10px] font-bold px-4 py-2 rounded-full uppercase tracking-widest text-[#888888] border border-[#333333]/60">
+                3 Steps
+              </div>
+
+              <div className="flex flex-col gap-10 mt-16">
+                <StepCard
+                  stepNumber="01"
+                  title="Install"
+                  description="Add the plugin to Claude Code. One command, 30 seconds."
+                />
+                <StepCard
+                  stepNumber="02"
+                  title="Run"
+                  description="Tell Claude to research your market. It pulls real quotes from Reddit, review sites, and forums."
+                />
+                <StepCard
+                  stepNumber="03"
+                  title="Get"
+                  description="Personas, angles, and 50+ tagged customer quotes. Ready to use, not ready to guess."
+                />
+              </div>
+            </div>
+
+            {/* Terminal preview card */}
+            <div
+              className="reveal reveal-delay-3 rounded-[2.5rem] p-8 md:p-12 min-h-[520px] flex items-center justify-center relative overflow-hidden group"
+              style={{
+                background:
+                  "linear-gradient(135deg, #FF6B50 0%, #E55A40 40%, #c94430 100%)",
+              }}
             >
-              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"
+              <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[300px] h-[300px] bg-[radial-gradient(circle,_rgba(255,255,255,0.12)_0%,_transparent_70%)] pointer-events-none" />
+              <TerminalQuoteWindow />
+              <div className="absolute inset-0 bg-white/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none" />
+            </div>
+          </div>
+        </section>
+
+        {/* ── Skills Gallery ────────────────────────────────── */}
+        <section id="skills" className="py-32 px-6 md:px-12 max-w-7xl mx-auto">
+          <div className="flex justify-between items-end mb-20 border-b border-[#222222] pb-10 reveal">
+            <h2 className="text-xs font-bold tracking-[0.4em] uppercase text-c47-accent">
+              The Skills
+            </h2>
+            <span className="hidden md:block text-[#444444] text-xs font-medium uppercase tracking-widest">
+              Claude Code Plugin &mdash; 2024
+            </span>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-x-16 gap-y-32">
+            <div className="reveal">
+              <SkillCard
+                title="CUSTOMER RESEARCH"
+                category="Extraction / Real Language"
+                description="50+ real customer quotes from Reddit, review sites, and forums. Each tagged by emotional intensity and buying journey stage."
+                imageSrc="https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?q=80&w=1000&auto=format&fit=crop"
+              />
+            </div>
+            <div className="md:mt-24 reveal reveal-delay-1">
+              <SkillCard
+                title="PERSONA BUILDER"
+                category="Behavior / Journey Maps"
+                description="Behavior-based personas with decision journey monologues, objection maps, and creative briefs."
+                imageSrc="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=1000&auto=format&fit=crop"
+              />
+            </div>
+            <div className="reveal reveal-delay-2">
+              <SkillCard
+                title="ANGLE GENERATOR"
+                category="Hooks / Ad Archetypes"
+                description="Ad angles and hooks mapped to each persona. Organized by archetype: fear, empathy, economics, authority, transformation."
+                imageSrc="https://images.unsplash.com/photo-1550684848-fac1c5b4e853?q=80&w=1000&auto=format&fit=crop"
+              />
+            </div>
+            <div className="md:mt-24 reveal reveal-delay-3">
+              <ProofCard />
+            </div>
+          </div>
+        </section>
+
+        {/* ── Setup Section ($750) ──────────────────────────── */}
+        <section id="setup" className="py-32 px-6 md:px-12 max-w-7xl mx-auto">
+          <div
+            className="rounded-[2.5rem] p-10 md:p-16 relative overflow-hidden group transition-all duration-500 gradient-border-glow reveal"
+            style={{
+              background:
+                "radial-gradient(ellipse at top right, rgba(255,107,80,0.08), transparent 50%), radial-gradient(ellipse at bottom left, rgba(255,107,80,0.04), transparent 50%), linear-gradient(135deg, #111111, #0d0d0d)",
+            }}
           >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
+            <FloatingGlowOrb />
+
+            <div className="relative z-10">
+              <div className="flex items-center gap-3 mb-12">
+                <div
+                  className="w-2 h-2 rounded-full bg-c47-accent"
+                  style={{ boxShadow: "0 0 8px rgba(255,107,80,0.6)" }}
+                />
+                <span className="text-[10px] font-bold tracking-[0.3em] text-[#666666] uppercase">
+                  For Teams
+                </span>
+              </div>
+
+              <div className="flex flex-col md:flex-row gap-16 justify-between items-start">
+                <div className="max-w-xl flex flex-col gap-6">
+                  <h3 className="text-4xl md:text-6xl font-semibold tracking-tight text-white leading-[1.05]">
+                    Want this running for your team{" "}
+                    <span className="text-[#666666]">by end of day?</span>
+                  </h3>
+                  <p className="text-[#888888] leading-relaxed text-lg">
+                    I will install the plugin, configure it for your accounts,
+                    and walk your team through the first research run. You will
+                    have personas and angles for your first product before our
+                    call ends.
+                  </p>
+                </div>
+                <div className="flex flex-col gap-6 shrink-0 w-full md:w-auto md:min-w-[280px]">
+                  <div className="flex flex-col gap-1">
+                    <span className="text-6xl font-bold tracking-tight gradient-text">
+                      $750
+                    </span>
+                    <span className="text-sm text-[#888888]">
+                      one-time setup
+                    </span>
+                  </div>
+                  <CTAButton href="#setup" />
+                  <p className="text-sm text-[#666666]">
+                    One call. Done by end of day.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* ── Newsletter ────────────────────────────────────── */}
+        <section
+          id="newsletter"
+          className="py-32 px-6 md:px-12 max-w-7xl mx-auto border-t border-[#1a1a1a]"
+        >
+          <div className="max-w-2xl mx-auto text-center flex flex-col items-center gap-10 reveal">
+            <div className="flex flex-col gap-4">
+              <h2 className="text-4xl md:text-5xl font-semibold tracking-tight text-white">
+                Build Notes
+              </h2>
+              <p className="text-[#888888] text-lg">
+                What I am building, what is working, what is not. Weekly.
+              </p>
+            </div>
+            <div className="w-full max-w-md">
+              <NewsletterForm />
+            </div>
+          </div>
+        </section>
+      </main>
+
+      {/* ── Footer ──────────────────────────────────────────── */}
+      <footer className="relative pt-48 pb-32 px-6 md:px-12 border-t border-[#1a1a1a]">
+        <div
+          className="absolute top-0 left-0 right-0 h-[400px] pointer-events-none"
+          style={{
+            background:
+              "radial-gradient(ellipse at center top, rgba(255,107,80,0.03), transparent 70%)",
+          }}
+        />
+
+        <div className="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-start md:items-end gap-16 relative z-10">
+          <div className="flex-1">
+            <FooterHero />
+          </div>
+
+          <div className="flex gap-4 md:mb-6">
+            <SocialIconLink
+              href="https://github.com/channel47"
+              label="GitHub"
+              icon={
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
+                  <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+                </svg>
+              }
             />
-            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>
+            <SocialIconLink
+              href="https://x.com/ctrlswing"
+              label="X (Twitter)"
+              icon={
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                  <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+                </svg>
+              }
+            />
+            <SocialIconLink
+              href="mailto:hello@channel47.dev"
+              label="Email"
+              icon={
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <rect width="20" height="16" x="2" y="4" rx="2" />
+                  <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
+                </svg>
+              }
+            />
+            <SocialIconLink
+              href="https://www.skool.com/the-vibe-marketers"
+              label="Skool"
+              icon={
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
+                  <circle cx="12" cy="12" r="10" fillOpacity="0" stroke="currentColor" strokeWidth="2" />
+                  <text x="12" y="16" textAnchor="middle" fontSize="11" fill="currentColor" fontWeight="bold">S</text>
+                </svg>
+              }
+            />
+          </div>
         </div>
-      </main>
+
+        <div className="max-w-7xl mx-auto mt-40 pt-10 border-t border-[#111111] flex flex-col md:flex-row justify-between text-[#333333] text-[10px] font-bold uppercase tracking-widest relative z-10">
+          <p>
+            &copy; 2026 channel47.dev — Built by ctrlswing. All rights reserved.
+          </p>
+          <div className="flex gap-10 mt-6 md:mt-0">
+            <a href="#" className="hover:text-[#666666] transition-colors duration-300">
+              Privacy Policy
+            </a>
+            <a href="#" className="hover:text-[#666666] transition-colors duration-300">
+              Terms of Service
+            </a>
+          </div>
+        </div>
+      </footer>
     </div>
   );
 }
diff --git a/src/components/AnimatedLogo.tsx b/src/components/AnimatedLogo.tsx
new file mode 100644
index 0000000..26c32e4
--- /dev/null
+++ b/src/components/AnimatedLogo.tsx
@@ -0,0 +1,155 @@
+'use client';
+
+import { useRef, useEffect, useCallback } from 'react';
+
+const GLYPHS = ['█','▓','▒','░','▀','▄','▌','▐','■','□','▪','▫','◼','◻','▰','▱'];
+const LINES = ['█ █ ▀▀█', '▀▀█  █'];
+
+function randomGlyph() {
+  return GLYPHS[Math.floor(Math.random() * GLYPHS.length)];
+}
+
+export default function AnimatedLogo({ delay = 0 }: { delay?: number }) {
+  const rootRef = useRef<HTMLSpanElement>(null);
+  const startedRef = useRef(false);
+  const replayingRef = useRef(false);
+
+  const animate = useCallback((isReplay = false) => {
+    const root = rootRef.current;
+    if (!root) return;
+
+    const chars = root.querySelectorAll<HTMLSpanElement>('.logo-animated__char');
+    const targets: string[] = [];
+    chars.forEach(c => targets.push(c.dataset.char || ' '));
+
+    const locked = new Array(chars.length).fill(false);
+
+    // Reset state
+    root.classList.remove('is-complete');
+    root.classList.add('is-animating');
+    if (!isReplay) {
+      chars.forEach(c => c.classList.remove('is-locked'));
+    } else {
+      locked.fill(false);
+      chars.forEach(c => c.classList.remove('is-locked'));
+    }
+
+    // Scramble non-space chars
+    chars.forEach((c, i) => {
+      if (targets[i] !== ' ') c.textContent = randomGlyph();
+    });
+
+    // Continuous scramble
+    const scrambleInterval = window.setInterval(() => {
+      chars.forEach((c, i) => {
+        if (!locked[i] && targets[i] !== ' ') {
+          c.textContent = randomGlyph();
+        }
+      });
+    }, 50);
+
+    // Lock characters with eased stagger
+    const nonSpaceIndices = targets
+      .map((ch, i) => (ch !== ' ' ? i : -1))
+      .filter(i => i !== -1)
+      .sort(() => Math.random() - 0.5);
+
+    const duration = isReplay ? 400 : 800;
+    const baseDelay = isReplay ? 100 : 300;
+    const timeouts: number[] = [];
+
+    nonSpaceIndices.forEach((charIdx, order) => {
+      const progress = order / nonSpaceIndices.length;
+      const eased = 1 - Math.pow(1 - progress, 2);
+      const t = window.setTimeout(() => {
+        locked[charIdx] = true;
+        const el = chars[charIdx];
+        el.textContent = targets[charIdx];
+        el.classList.add('is-locked');
+        el.classList.add('is-flashing');
+        setTimeout(() => el.classList.remove('is-flashing'), 100);
+
+        // Last char — complete
+        if (order === nonSpaceIndices.length - 1) {
+          setTimeout(() => {
+            clearInterval(scrambleInterval);
+            root.classList.add('is-complete');
+            replayingRef.current = false;
+          }, 150);
+        }
+      }, baseDelay + eased * duration);
+      timeouts.push(t);
+    });
+
+    return () => {
+      timeouts.forEach(clearTimeout);
+      clearInterval(scrambleInterval);
+    };
+  }, []);
+
+  useEffect(() => {
+    const root = rootRef.current;
+    if (!root) return;
+
+    const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    if (prefersReduced) {
+      root.classList.add('is-complete');
+      root.querySelectorAll<HTMLSpanElement>('.logo-animated__char').forEach(c => {
+        c.classList.add('is-locked');
+      });
+      return;
+    }
+
+    const observer = new IntersectionObserver(
+      entries => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting && !startedRef.current) {
+            startedRef.current = true;
+            setTimeout(() => animate(false), delay);
+            observer.disconnect();
+          }
+        });
+      },
+      { threshold: 0.5 }
+    );
+
+    observer.observe(root);
+    return () => observer.disconnect();
+  }, [animate, delay]);
+
+  const handleMouseEnter = useCallback(() => {
+    if (
+      !startedRef.current ||
+      replayingRef.current ||
+      window.matchMedia('(prefers-reduced-motion: reduce)').matches
+    ) return;
+    replayingRef.current = true;
+    animate(true);
+  }, [animate]);
+
+  return (
+    <span
+      ref={rootRef}
+      className="logo-animated"
+      role="img"
+      aria-label="Channel47 Logo"
+      onMouseEnter={handleMouseEnter}
+    >
+      <span className="logo-animated__glyph" aria-hidden="true">
+        {LINES.map((line, lineIdx) => (
+          <span key={lineIdx} className="logo-animated__line" data-target={line}>
+            {line.split('').map((ch, charIdx) => (
+              <span
+                key={charIdx}
+                className="logo-animated__char"
+                data-char={ch}
+              >
+                {ch === ' ' ? ' ' : randomGlyph()}
+              </span>
+            ))}
+          </span>
+        ))}
+      </span>
+    </span>
+  );
+}
diff --git a/src/components/CTAButton.tsx b/src/components/CTAButton.tsx
new file mode 100644
index 0000000..ffceaeb
--- /dev/null
+++ b/src/components/CTAButton.tsx
@@ -0,0 +1,10 @@
+export default function CTAButton({ href }: { href: string }) {
+  return (
+    <a
+      href={href}
+      className="cta-glow inline-flex items-center justify-center px-8 py-4 rounded-2xl bg-c47-accent text-white font-semibold text-lg transition-all hover:brightness-110"
+    >
+      Book a setup call
+    </a>
+  );
+}
diff --git a/src/components/CopyButton.tsx b/src/components/CopyButton.tsx
new file mode 100644
index 0000000..fae0c3d
--- /dev/null
+++ b/src/components/CopyButton.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+import { useState } from "react";
+
+export default function CopyButton({ text }: { text: string }) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // Fallback for older browsers
+      const textarea = document.createElement("textarea");
+      textarea.value = text;
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand("copy");
+      document.body.removeChild(textarea);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  return (
+    <button
+      onClick={handleCopy}
+      className="flex-shrink-0 p-2 rounded-lg transition-colors hover:bg-white/10 text-c47-muted hover:text-c47-text"
+      aria-label={copied ? "Copied to clipboard" : "Copy to clipboard"}
+      title={copied ? "Copied!" : "Copy"}
+    >
+      {copied ? (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="18"
+          height="18"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className="text-c47-accent"
+        >
+          <polyline points="20 6 9 17 4 12" />
+        </svg>
+      ) : (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="18"
+          height="18"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
+          <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+        </svg>
+      )}
+    </button>
+  );
+}
diff --git a/src/components/FloatingBottomNav.tsx b/src/components/FloatingBottomNav.tsx
new file mode 100644
index 0000000..f02fc89
--- /dev/null
+++ b/src/components/FloatingBottomNav.tsx
@@ -0,0 +1,54 @@
+const navItems = [
+  { label: "Skills", icon: "M4 4h6v6H4V4zm10 0h6v6h-6V4zM4 14h6v6H4v-6zm10 0h6v6h-6v-6z", active: true },
+  { label: "Global", icon: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 2a8 8 0 0 1 5.29 2H6.71A8 8 0 0 1 12 4zM4 12a8 8 0 0 1 .34-2.3h15.32A8 8 0 0 1 20 12a8 8 0 0 1-.34 2.3H4.34A8 8 0 0 1 4 12zm2.71 6h10.58A8 8 0 0 1 12 20a8 8 0 0 1-5.29-2z", active: false },
+  { label: "Plugin", icon: "M4 17l6-6-6-6M12 19h8", active: false },
+  { label: "Services", icon: "M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 16.8l-6.2 4.5 2.4-7.4L2 9.4h7.6z", active: false },
+  { label: "Updates", icon: "M4 19.5A2.5 2.5 0 0 1 6.5 17H20M4 14.5A2.5 2.5 0 0 1 6.5 12H20M4 4h16v6H4V4z", active: false },
+];
+
+export default function FloatingBottomNav() {
+  return (
+    <div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 hidden md:flex">
+      <div
+        className="flex items-center gap-1 rounded-2xl px-2 py-2 border border-white/[0.08]"
+        style={{
+          background: "rgba(17,17,17,0.85)",
+          backdropFilter: "blur(16px)",
+          boxShadow: "0 8px 32px rgba(0,0,0,0.5)",
+        }}
+      >
+        {navItems.map((item) => (
+          <button
+            key={item.label}
+            className={`w-11 h-11 rounded-xl flex items-center justify-center transition-all ${
+              item.active
+                ? "bg-c47-accent/15 text-c47-accent"
+                : "text-c47-muted hover:text-white hover:bg-white/5"
+            }`}
+            aria-label={item.label}
+          >
+            <svg
+              width="18"
+              height="18"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <path d={item.icon} />
+            </svg>
+          </button>
+        ))}
+        <div className="w-px h-6 bg-white/10 mx-1" />
+        <a
+          href="#setup"
+          className="px-5 py-2 rounded-xl bg-c47-accent text-white text-xs font-bold uppercase tracking-widest hover:brightness-110 transition-all"
+        >
+          Setup
+        </a>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/FloatingGlowOrb.tsx b/src/components/FloatingGlowOrb.tsx
new file mode 100644
index 0000000..c8c90ba
--- /dev/null
+++ b/src/components/FloatingGlowOrb.tsx
@@ -0,0 +1,20 @@
+export default function FloatingGlowOrb() {
+  return (
+    <>
+      <div
+        className="absolute top-0 right-0 w-96 h-96 rounded-full pointer-events-none transition-all duration-700 group-hover:w-[28rem] group-hover:h-[28rem]"
+        style={{
+          background:
+            "radial-gradient(circle, rgba(255,107,80,0.1) 0%, transparent 70%)",
+        }}
+      />
+      <div
+        className="absolute bottom-0 left-1/4 w-64 h-64 rounded-full pointer-events-none"
+        style={{
+          background:
+            "radial-gradient(circle, rgba(255,107,80,0.04) 0%, transparent 70%)",
+        }}
+      />
+    </>
+  );
+}
diff --git a/src/components/FooterHero.tsx b/src/components/FooterHero.tsx
new file mode 100644
index 0000000..4b96a41
--- /dev/null
+++ b/src/components/FooterHero.tsx
@@ -0,0 +1,35 @@
+export default function FooterHero() {
+  return (
+    <div>
+      <h2 className="text-[14vw] md:text-[10vw] leading-[0.85] font-black tracking-tighter mb-12 select-none gradient-text">
+        LET&rsquo;S
+        <br />
+        TALK.
+      </h2>
+      <div className="flex flex-col gap-6">
+        <a
+          href="mailto:hello@channel47.dev"
+          className="text-3xl md:text-4xl font-semibold hover:text-c47-accent transition-all duration-300 w-fit"
+        >
+          hello@channel47.dev
+        </a>
+        <p className="text-[#666666] flex items-center gap-2">
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" />
+            <circle cx="12" cy="10" r="3" />
+          </svg>
+          Available for worldwide collaborations.
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/HeroSection.tsx b/src/components/HeroSection.tsx
new file mode 100644
index 0000000..bca3ec5
--- /dev/null
+++ b/src/components/HeroSection.tsx
@@ -0,0 +1,65 @@
+import CopyButton from "./CopyButton";
+import AnimatedLogo from "./AnimatedLogo";
+
+export default function HeroSection() {
+  return (
+    <header className="min-h-screen flex flex-col items-center justify-center text-center px-6 relative">
+      <div
+        className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[600px] pointer-events-none"
+        style={{
+          background:
+            "radial-gradient(ellipse, rgba(255,255,255,0.04) 0%, transparent 70%)",
+        }}
+      />
+      <div className="reveal relative z-10">
+        <div className="mb-8 flex justify-center">
+          <AnimatedLogo delay={300} />
+        </div>
+        <h1 className="text-[18vw] md:text-[14vw] lg:text-[12vw] font-black tracking-[-0.05em] leading-[0.85] text-white select-none relative">
+          <span
+            className="italic font-extralight absolute"
+            style={{
+              fontSize: "1.35em",
+              lineHeight: "0.7",
+              left: "-0.15em",
+              top: "-0.18em",
+              opacity: 0.9,
+            }}
+          >
+            /
+          </span>
+          <span className="relative">strategy</span>
+        </h1>
+        <p className="mt-8 text-lg md:text-xl text-c47-muted max-w-2xl mx-auto leading-relaxed">
+          A free Claude Code plugin that extracts real customer language from
+          public data and turns it into personas and ad angles you can use today.
+        </p>
+
+        <div className="mt-10 max-w-xl mx-auto">
+          <div className="flex items-center gap-3 bg-c47-card border border-c47-border rounded-lg px-5 py-4 font-mono text-sm">
+            <span className="text-c47-accent select-none">$</span>
+            <code className="flex-1 text-c47-text truncate">
+              claude plugin marketplace add channel47
+            </code>
+            <CopyButton text="claude plugin marketplace add channel47" />
+          </div>
+        </div>
+
+        <a
+          href="#setup"
+          className="inline-block mt-6 text-sm text-c47-muted hover:text-c47-accent transition-colors"
+        >
+          Or have it set up for your team{" "}
+          <span className="text-c47-accent">&rarr;</span>
+        </a>
+      </div>
+
+      <a
+        href="mailto:hello@channel47.dev"
+        className="absolute bottom-8 right-8 text-sm text-c47-muted hover:text-white transition-colors hidden md:block"
+      >
+        hello@channel47.dev
+      </a>
+    </header>
+  );
+}
diff --git a/src/components/NewsletterForm.tsx b/src/components/NewsletterForm.tsx
new file mode 100644
index 0000000..9a13946
--- /dev/null
+++ b/src/components/NewsletterForm.tsx
@@ -0,0 +1,62 @@
+"use client";
+
+import { useState, type FormEvent } from "react";
+
+export default function NewsletterForm() {
+  const [email, setEmail] = useState("");
+  const [status, setStatus] = useState<
+    "idle" | "loading" | "success" | "error"
+  >("idle");
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    if (!email) return;
+
+    setStatus("loading");
+
+    try {
+      await new Promise((resolve) => setTimeout(resolve, 800));
+      setStatus("success");
+      setEmail("");
+    } catch {
+      setStatus("error");
+    }
+  };
+
+  if (status === "success") {
+    return (
+      <p className="text-c47-accent text-lg font-medium">
+        You&rsquo;re in. Watch your inbox.
+      </p>
+    );
+  }
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      className="flex flex-col sm:flex-row gap-4 w-full max-w-md"
+    >
+      <input
+        type="email"
+        required
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+        placeholder="Email address"
+        aria-label="Email address"
+        className="newsletter-input flex-1 bg-transparent border-b-2 border-[#333333] text-zinc-100 px-0 py-3 outline-none placeholder:text-zinc-600 text-sm"
+      />
+      <button
+        type="submit"
+        disabled={status === "loading"}
+        className="text-xs font-bold uppercase tracking-widest text-[#888888] hover:text-c47-accent transition-all duration-300 py-3 px-4 disabled:opacity-60 disabled:cursor-not-allowed"
+      >
+        {status === "loading" ? "Subscribing..." : "Subscribe"}
+      </button>
+      {status === "error" && (
+        <p className="text-red-400 text-sm mt-1 sm:mt-0 sm:self-center">
+          Something went wrong. Try again.
+        </p>
+      )}
+    </form>
+  );
+}
diff --git a/src/components/ProofCard.tsx b/src/components/ProofCard.tsx
new file mode 100644
index 0000000..f1cee95
--- /dev/null
+++ b/src/components/ProofCard.tsx
@@ -0,0 +1,50 @@
+export default function ProofCard() {
+  return (
+    <article className="group cursor-pointer">
+      <div
+        className="aspect-[4/3] overflow-hidden rounded-sm relative flex items-center justify-center p-10"
+        style={{
+          background:
+            "radial-gradient(ellipse at bottom left, rgba(255,107,80,0.08), transparent 60%), #111111",
+        }}
+      >
+        <div className="relative z-10">
+          <p className="text-xl md:text-2xl leading-snug text-zinc-300 italic font-light">
+            &ldquo;Built from running creative strategy across 25+ DTC brands.
+            Every framework was used in production before it became a
+            skill.&rdquo;
+          </p>
+          <p className="text-xs text-[#666666] font-mono mt-6">
+            // Used by marketers managing paid media across Google, Meta, and
+            Microsoft Ads.
+          </p>
+        </div>
+      </div>
+      <div className="mt-8 flex justify-between items-start">
+        <div>
+          <h3 className="text-3xl font-bold tracking-tight mb-2 group-hover:text-c47-accent transition-colors duration-300">
+            BUILT FROM REAL WORK
+          </h3>
+          <p className="text-[#666666] text-[10px] font-bold uppercase tracking-[0.2em]">
+            25+ DTC Brands / Production
+          </p>
+        </div>
+        <div className="p-3 rounded-full border border-[#333333] group-hover:bg-c47-accent group-hover:text-black group-hover:border-transparent transition-all duration-300 group-hover:shadow-[0_0_20px_rgba(255,107,80,0.3)] group-hover:scale-110">
+          <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M7 17L17 7" />
+            <path d="M7 7h10v10" />
+          </svg>
+        </div>
+      </div>
+    </article>
+  );
+}
diff --git a/src/components/ScrollReveal.tsx b/src/components/ScrollReveal.tsx
new file mode 100644
index 0000000..f8dcee5
--- /dev/null
+++ b/src/components/ScrollReveal.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import { useEffect } from "react";
+
+export default function ScrollReveal() {
+  useEffect(() => {
+    const initializeObservers = () => {
+      try {
+        if (!("IntersectionObserver" in window)) {
+          document.querySelectorAll(".reveal").forEach((el) => el.classList.add("visible"));
+          document.querySelectorAll(".terminal-container").forEach((el) => {
+            const lines = el.querySelector(".terminal-lines");
+            if (lines) lines.classList.add("terminal-active");
+          });
+          return;
+        }
+
+        const revealObserver = new IntersectionObserver(
+          (entries) => {
+            entries.forEach((entry) => {
+              if (entry && entry.isIntersecting && entry.target) {
+                entry.target.classList.add("visible");
+              }
+            });
+          },
+          { threshold: 0.1, rootMargin: "0px 0px -40px 0px" }
+        );
+
+        const terminalObserver = new IntersectionObserver(
+          (entries) => {
+            entries.forEach((entry) => {
+              if (entry && entry.isIntersecting && entry.target) {
+                const lines = entry.target.querySelector(".terminal-lines");
+                if (lines) lines.classList.add("terminal-active");
+              }
+            });
+          },
+          { threshold: 0.5 }
+        );
+
+        const observe = () => {
+          document.querySelectorAll(".reveal").forEach((el) => revealObserver.observe(el));
+          document.querySelectorAll(".terminal-container").forEach((el) => terminalObserver.observe(el));
+        };
+
+        observe();
+        setTimeout(observe, 800);
+        setTimeout(observe, 2000);
+
+        return () => {
+          revealObserver.disconnect();
+          terminalObserver.disconnect();
+        };
+      } catch (err) {
+        console.warn("ScrollReveal init failed gracefully:", err);
+        document.querySelectorAll(".reveal").forEach((el) => el.classList.add("visible"));
+      }
+    };
+
+    const cleanup = initializeObservers();
+    return cleanup;
+  }, []);
+
+  return null;
+}
diff --git a/src/components/SectionHeader.tsx b/src/components/SectionHeader.tsx
new file mode 100644
index 0000000..2fd1aa3
--- /dev/null
+++ b/src/components/SectionHeader.tsx
@@ -0,0 +1,13 @@
+export default function SectionHeader({ label }: { label: string }) {
+  return (
+    <div className="flex items-center gap-3 mb-10 reveal">
+      <div
+        className="w-2 h-2 rounded-full bg-c47-accent"
+        style={{ boxShadow: "0 0 8px rgba(255,107,80,0.6)" }}
+      />
+      <span className="text-[10px] font-bold tracking-[0.3em] text-[#666666] uppercase">
+        {label}
+      </span>
+    </div>
+  );
+}
diff --git a/src/components/SkillCard.tsx b/src/components/SkillCard.tsx
new file mode 100644
index 0000000..ba7c906
--- /dev/null
+++ b/src/components/SkillCard.tsx
@@ -0,0 +1,56 @@
+import Image from "next/image";
+
+export default function SkillCard({
+  title,
+  category,
+  description,
+  imageSrc,
+}: {
+  title: string;
+  category: string;
+  description: string;
+  imageSrc: string;
+}) {
+  return (
+    <article className="group cursor-pointer">
+      <div className="aspect-[4/3] overflow-hidden rounded-sm relative">
+        <Image
+          src={imageSrc}
+          alt={title}
+          fill
+          className="object-cover transition-transform duration-700 group-hover:scale-105"
+          sizes="(max-width: 768px) 100vw, 50vw"
+        />
+        <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
+      </div>
+      <div className="mt-8 flex justify-between items-start">
+        <div>
+          <h3 className="text-3xl font-bold tracking-tight mb-2 group-hover:text-c47-accent transition-colors duration-300">
+            {title}
+          </h3>
+          <p className="text-[#666666] text-[10px] font-bold uppercase tracking-[0.2em]">
+            {category}
+          </p>
+        </div>
+        <div className="p-3 rounded-full border border-[#333333] group-hover:bg-c47-accent group-hover:text-black group-hover:border-transparent transition-all duration-300 group-hover:shadow-[0_0_20px_rgba(255,107,80,0.3)] group-hover:scale-110">
+          <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M7 17L17 7" />
+            <path d="M7 7h10v10" />
+          </svg>
+        </div>
+      </div>
+      <p className="mt-4 text-[#888888] text-sm leading-relaxed max-w-md">
+        {description}
+      </p>
+    </article>
+  );
+}
diff --git a/src/components/SocialIconLink.tsx b/src/components/SocialIconLink.tsx
new file mode 100644
index 0000000..3ec83c4
--- /dev/null
+++ b/src/components/SocialIconLink.tsx
@@ -0,0 +1,21 @@
+export default function SocialIconLink({
+  href,
+  label,
+  icon,
+}: {
+  href: string;
+  label: string;
+  icon: React.ReactNode;
+}) {
+  return (
+    <a
+      href={href}
+      target={href.startsWith("mailto:") ? undefined : "_blank"}
+      rel={href.startsWith("mailto:") ? undefined : "noopener noreferrer"}
+      aria-label={label}
+      className="w-12 h-12 rounded-full border border-[#333333] flex items-center justify-center text-c47-muted hover:text-c47-accent hover:border-c47-accent/40 hover:shadow-[0_8px_24px_rgba(255,107,80,0.25)] transition-all duration-300"
+    >
+      {icon}
+    </a>
+  );
+}
diff --git a/src/components/StepCard.tsx b/src/components/StepCard.tsx
new file mode 100644
index 0000000..7cfc18b
--- /dev/null
+++ b/src/components/StepCard.tsx
@@ -0,0 +1,24 @@
+export default function StepCard({
+  stepNumber,
+  title,
+  description,
+}: {
+  stepNumber: string;
+  title: string;
+  description: string;
+}) {
+  return (
+    <div className="group/step flex items-start gap-6 cursor-default">
+      <span
+        className="step-number text-5xl font-bold leading-none"
+        style={{ color: "#222222" }}
+      >
+        {stepNumber}
+      </span>
+      <div>
+        <h3 className="text-xl font-semibold mb-1 text-white">{title}</h3>
+        <p className="text-[#888888] text-sm leading-relaxed">{description}</p>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/TerminalQuoteWindow.tsx b/src/components/TerminalQuoteWindow.tsx
new file mode 100644
index 0000000..6af28b6
--- /dev/null
+++ b/src/components/TerminalQuoteWindow.tsx
@@ -0,0 +1,56 @@
+export default function TerminalQuoteWindow() {
+  return (
+    <div className="w-full max-w-md bg-gradient-to-br from-[#0c0a09] to-[#0a0908] rounded-xl shadow-[0_24px_80px_rgba(0,0,0,0.5)] overflow-hidden transform group-hover:scale-[1.03] transition-all duration-700 ease-out terminal-container">
+      <div className="bg-gradient-to-r from-[#111111] to-[#0f0f0f] px-4 py-3 border-b border-[#222222] flex items-center gap-2">
+        <div className="w-2.5 h-2.5 rounded-full bg-c47-accent/30" />
+        <div className="w-2.5 h-2.5 rounded-full bg-c47-accent/20" />
+        <div className="w-2.5 h-2.5 rounded-full bg-c47-accent/10" />
+        <span className="ml-4 font-mono text-xs text-[#555555]">
+          creative-strategist extract --raw
+        </span>
+      </div>
+      <div className="terminal-lines p-5 font-mono text-xs leading-relaxed text-zinc-400 space-y-4">
+        <div className="flex gap-3 terminal-line">
+          <span className="text-c47-accent shrink-0">[fire-3]</span>
+          <div>
+            <span className="text-zinc-200">
+              &ldquo;Marketing has always been the hardest part for us solo
+              founders. You can build an amazing product but if nobody knows
+              about it, none of that matters.&rdquo;
+            </span>
+            <br />
+            <span className="text-zinc-600">
+              — Reddit, r/SaaS | Journey: Problem-aware
+            </span>
+          </div>
+        </div>
+        <div className="flex gap-3 terminal-line">
+          <span className="text-c47-accent/70 shrink-0">[fire-2]</span>
+          <div>
+            <span className="text-zinc-200">
+              &ldquo;I was burning hours every week hunting for new
+              tools.&rdquo;
+            </span>
+            <br />
+            <span className="text-zinc-600">
+              — PPC.io | Journey: Problem-aware
+            </span>
+          </div>
+        </div>
+        <div className="flex gap-3 terminal-line">
+          <span className="text-c47-accent shrink-0">[fire-3]</span>
+          <div>
+            <span className="text-zinc-200">
+              &ldquo;I found $3,400/month in wasted spend. In one
+              prompt.&rdquo;
+            </span>
+            <br />
+            <span className="text-zinc-600">
+              — Adspirer | Journey: Post-purchase
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/TopNavigation.tsx b/src/components/TopNavigation.tsx
new file mode 100644
index 0000000..f5231d2
--- /dev/null
+++ b/src/components/TopNavigation.tsx
@@ -0,0 +1,66 @@
+import AnimatedLogo from "./AnimatedLogo";
+
+export default function TopNavigation() {
+  return (
+    <nav className="fixed top-0 inset-x-0 z-50">
+      <div
+        className="backdrop-blur-xl border-b border-white/[0.08]"
+        style={{
+          background: "rgba(17,17,17,0.75)",
+          boxShadow: "0 8px 32px rgba(0,0,0,0.4)",
+        }}
+      >
+        <div className="max-w-7xl mx-auto flex items-center justify-between px-6 md:px-12 py-3">
+          <div className="flex items-center gap-8">
+            <a
+              href="/"
+              aria-label="channel47 home"
+            >
+              <AnimatedLogo />
+            </a>
+            <div className="hidden md:flex items-center gap-6 text-sm">
+              <a
+                href="#"
+                className="text-white font-medium hover:text-c47-accent transition-colors"
+              >
+                Home
+              </a>
+              <a
+                href="#skills"
+                className="text-c47-muted hover:text-white transition-colors"
+              >
+                Skills
+              </a>
+              <a
+                href="#proof"
+                className="text-c47-muted hover:text-white transition-colors"
+              >
+                Proof
+              </a>
+              <a
+                href="#setup"
+                className="text-c47-muted hover:text-white transition-colors"
+              >
+                Setup
+              </a>
+            </div>
+          </div>
+          <div className="flex items-center gap-6">
+            <a
+              href="#newsletter"
+              className="hidden md:block text-sm text-c47-muted hover:text-white transition-colors"
+            >
+              Build Notes
+            </a>
+            <a
+              href="#setup"
+              className="text-sm font-medium text-white border border-white/20 rounded-full px-5 py-2 hover:bg-white/10 transition-all"
+            >
+              Get started
+            </a>
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+}
diff --git a/src/fonts/Satoshi-Black.woff2 b/src/fonts/Satoshi-Black.woff2
new file mode 100644
index 0000000..64492d5
Binary files /dev/null and b/src/fonts/Satoshi-Black.woff2 differ
diff --git a/src/fonts/Satoshi-Bold.woff2 b/src/fonts/Satoshi-Bold.woff2
new file mode 100644
index 0000000..0a8db7a
Binary files /dev/null and b/src/fonts/Satoshi-Bold.woff2 differ
diff --git a/src/fonts/Satoshi-Light.woff2 b/src/fonts/Satoshi-Light.woff2
new file mode 100644
index 0000000..cf18cd4
Binary files /dev/null and b/src/fonts/Satoshi-Light.woff2 differ
diff --git a/src/fonts/Satoshi-Medium.woff2 b/src/fonts/Satoshi-Medium.woff2
new file mode 100644
index 0000000..ffd0ac9
Binary files /dev/null and b/src/fonts/Satoshi-Medium.woff2 differ
diff --git a/src/fonts/Satoshi-Regular.woff2 b/src/fonts/Satoshi-Regular.woff2
new file mode 100644
index 0000000..81c40ab
Binary files /dev/null and b/src/fonts/Satoshi-Regular.woff2 differ