diff --git a/package.json b/package.json
index b4052776..90eae8fc 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "next": "^15.1.8",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-icons": "^5.6.0",
     "reframe": ".",
     "tailwind-merge": "^3.6.0",
     "wasm-feature-detect": "^1.8.0"
diff --git a/src/app/globals.css b/src/app/globals.css
index 52b2929d..602f8484 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -36,26 +36,12 @@
   --error-hover: #991b1b;
 }
 
-/* ── High contrast mode tokens ── */
-[data-theme="high-contrast"] {
-  --bg: #000000;
-  --surface: #000000;
-  --border: #FFFFFF;
 
-  --text: #FFFFFF;
-  --muted: #FFFFFF;
-
-  --accent: #FFFF00;
-  --accent-hover: #FFFF00;
-
-  --error: #FF6666;
-  --success: #66FF66;
-
-  --film-600: #FF6666;
-  --film-400: #66FF66;
-}
 
 /* ── Base styles ── */
+html {
+  scroll-behavior: smooth;
+}
 body {
   background-color: var(--bg);
   color: var(--text);
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 03ee0db9..71bc75c3 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -3,9 +3,8 @@ import { Bebas_Neue, Syne, DM_Sans } from "next/font/google";
 import ErrorBoundary from "@/components/ErrorBoundary";
 import "./globals.css";
 import { ThemeProvider } from "@/components/ThemeProvider";
-import { ThemeToggle } from "@/components/ThemeToggle";
+import Header from "@/components/Header";
 import ScrollToTop from "@/components/ScrollToTop";
-import BrandLogo from "@/components/BrandLogo";
 
 export const metadata: Metadata = {
   title: "Reframe — Resize, trim, and export videos in your browser",
@@ -47,7 +46,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-<html lang="en" suppressHydrationWarning>
+    <html lang="en" suppressHydrationWarning>
       <head>
         <link rel="preconnect" href="https://cdn.jsdelivr.net" />
         <link rel="dns-prefetch" href="https://cdn.jsdelivr.net" />
@@ -87,16 +86,7 @@ export default function RootLayout({
         </a>
         <ThemeProvider>
           <ErrorBoundary>
-            <header
-              role="banner"
-              className="sticky top-0 z-50 flex items-center justify-between px-6 py-3 border-b border-[var(--border)] bg-[var(--bg)]"
-            >
-              <div className="flex items-center gap-2">
-                <BrandLogo size={24} />
-                <h1 className="text-lg font-semibold">Reframe</h1>
-              </div>
-              <ThemeToggle />
-            </header>
+            <Header />
             <main id="main-content" tabIndex={-1}>
               {children}
             </main>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 637feae3..5a52f5bf 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,24 +1,5 @@
-import VideoEditor from "@/components/VideoEditor";
-import Footer from "@/components/Footer"; 
+import LandingWrapper from "@/components/landing/LandingWrapper";
 
-export default function Home() {
-  return (
-    <>
-      <a
-        href="https://github.com/magic-peach/reframe"
-        target="_blank"
-        rel="noopener noreferrer"
-        className="hidden min-[300px]:flex fixed top-4 right-16 z-50 items-center gap-1.5 px-3 py-1.5 rounded-lg border border-[var(--border)] bg-[var(--surface)] text-[10px] font-heading font-semibold uppercase tracking-wider transition-all duration-200 ease-in-out hover:scale-105 hover:shadow-[0_0_10px_rgba(255,255,255,0.15)] hover:bg-white/10"
-      >
-        ⭐ Star on GitHub
-      </a>
-
-      <main id="main-content" tabIndex={-1}>
-        <VideoEditor />
-      </main>
-
-      <Footer />
-    </>
-  );
+export default function Page() {
+  return <LandingWrapper />;
 }
-    
diff --git a/src/app/reframe/page.tsx b/src/app/reframe/page.tsx
new file mode 100644
index 00000000..e339f69e
--- /dev/null
+++ b/src/app/reframe/page.tsx
@@ -0,0 +1,23 @@
+import VideoEditor from "@/components/VideoEditor";
+import Footer from "@/components/Footer"; 
+
+export default function ReframePage() {
+  return (
+    <>
+      <a
+        href="https://github.com/magic-peach/reframe"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="hidden min-[300px]:flex fixed top-4 right-16 z-50 items-center gap-1.5 px-3 py-1.5 rounded-lg border border-[var(--border)] bg-[var(--surface)] text-[10px] font-heading font-semibold uppercase tracking-wider transition-all duration-200 ease-in-out hover:scale-105 hover:shadow-[0_0_10px_rgba(255,255,255,0.15)] hover:bg-white/10"
+      >
+        ⭐ Star on GitHub
+      </a>
+
+      <main id="main-content" tabIndex={-1}>
+        <VideoEditor />
+      </main>
+
+      <Footer />
+    </>
+  );
+}
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
new file mode 100644
index 00000000..8800bfd9
--- /dev/null
+++ b/src/components/Header.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import BrandLogo from "@/components/BrandLogo";
+import { ThemeToggle } from "@/components/ThemeToggle";
+
+export default function Header() {
+  const pathname = usePathname();
+
+  // Hide the default editor header on the landing page
+  if (pathname === "/") {
+    return null;
+  }
+
+  return (
+    <header
+      role="banner"
+      className="sticky top-0 z-50 flex items-center justify-between px-6 py-3 border-b border-[var(--border)] bg-[var(--bg)]"
+    >
+      <div className="flex items-center gap-2">
+        <BrandLogo size={24} />
+        <span className="text-lg font-semibold">Reframe</span>
+      </div>
+      <ThemeToggle />
+    </header>
+  );
+}
diff --git a/src/components/ThemeProvider.tsx b/src/components/ThemeProvider.tsx
index 7c65cef3..23f6d688 100644
--- a/src/components/ThemeProvider.tsx
+++ b/src/components/ThemeProvider.tsx
@@ -9,7 +9,7 @@ import {
   type ReactNode,
 } from "react";
 
-type Theme = "light" | "dark" | "high-contrast";
+type Theme = "light" | "dark";
 
 interface ThemeContextValue {
   theme: Theme;
@@ -27,15 +27,15 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
   // we just sync React state here so the toggle button shows the right icon.
   useEffect(() => {
     try {
-    const stored = localStorage.getItem("theme") as Theme | null;
-    if (stored === "light" || stored === "dark" || stored === "high-contrast") {
-      setThemeState(stored);
-    } else {
-      const prefersDark = window.matchMedia(
-        "(prefers-color-scheme: dark)"
-      ).matches;
-      setThemeState(prefersDark ? "dark" : "light");
-    }
+      const stored = localStorage.getItem("theme") as Theme | null;
+      if (stored === "light" || stored === "dark") {
+        setThemeState(stored);
+      } else {
+        const prefersDark = window.matchMedia(
+          "(prefers-color-scheme: dark)"
+        ).matches;
+        setThemeState(prefersDark ? "dark" : "light");
+      }
     } catch {
       const prefersDark = window.matchMedia(
         "(prefers-color-scheme: dark)"
@@ -62,14 +62,8 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
       } else {
         document.documentElement.classList.remove("dark");
       }
-      if (next === "high-contrast") {
-      document.documentElement.setAttribute(
-        "data-theme",
-        "high-contrast"
-      );
-      } else {
+      // Always remove high-contrast data theme attribute
       document.documentElement.removeAttribute("data-theme");
-      }
       if (persist) {
         localStorage.setItem("theme", next);
       }
@@ -78,13 +72,7 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
   );
 
   const toggleTheme = useCallback(() => {
-    applyTheme(
-      theme === "light"
-        ? "dark"
-        : theme === "dark"
-        ? "high-contrast"
-        : "light"
-    ); 
+    applyTheme(theme === "light" ? "dark" : "light"); 
   }, [theme, applyTheme]);
 
   const setTheme = useCallback(
diff --git a/src/components/ThemeToggle.tsx b/src/components/ThemeToggle.tsx
index f8ceeb9f..4384dbe3 100644
--- a/src/components/ThemeToggle.tsx
+++ b/src/components/ThemeToggle.tsx
@@ -12,22 +12,10 @@ export function ThemeToggle() {
 
   return (
     <button
-       type="button"
-       onClick={toggleTheme}
-       aria-label={
-         theme === "light"
-           ? "Switch to dark mode"
-           : theme === "dark"
-           ? "Switch to high contrast mode"
-           : "Switch to light mode"
-      } 
-       title={
-         theme === "light"
-           ? "Switch to dark mode"
-           : theme === "dark"
-           ? "Switch to high contrast mode"
-           : "Switch to light mode"
-     }
+      type="button"
+      onClick={toggleTheme}
+      aria-label={theme === "light" ? "Switch to dark mode" : "Switch to light mode"}
+      title={theme === "light" ? "Switch to dark mode" : "Switch to light mode"}
       className="
         relative flex items-center justify-center
         w-9 h-9 rounded-full
@@ -57,7 +45,7 @@ export function ThemeToggle() {
           <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" />
         </svg>
       ) : (
-       /* Moon icon — shown in dark/high contrast mode */
+        /* Moon icon — shown in dark mode */
         <svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 24 24"
diff --git a/src/components/landing/CTASection.tsx b/src/components/landing/CTASection.tsx
new file mode 100644
index 00000000..fa226b02
--- /dev/null
+++ b/src/components/landing/CTASection.tsx
@@ -0,0 +1,90 @@
+"use client";
+
+import Link from "next/link";
+import { FiArrowRight, FiGithub, FiShield, FiHeart } from "react-icons/fi";
+import BrandLogo from "@/components/BrandLogo";
+import Sparkles from "./Sparkles";
+
+export default function CTASection() {
+  return (
+    <section className="relative overflow-hidden min-h-screen flex flex-col justify-between pt-24 pb-6">
+      <Sparkles />
+      <div className="absolute inset-0 bg-gradient-to-b from-transparent via-blue-500/3 to-indigo-500/5 -z-10" />
+
+      {/* CTA */}
+      <div className="my-auto mx-auto w-full max-w-6xl px-6 md:px-10 text-center">
+        <h2 className="text-4xl sm:text-5xl font-semibold tracking-tight text-[var(--text)] mb-5 leading-tight">
+          Ready to edit?
+        </h2>
+        <p className="mx-auto max-w-md text-base text-[var(--muted)] mb-10 leading-relaxed">
+          No signups, no watermarks, no usage limits. Just you and your video.
+        </p>
+        <div className="flex flex-wrap items-center justify-center gap-4">
+          <Link
+            href="/reframe"
+            className="inline-flex items-center gap-2 rounded-lg bg-[var(--accent)] px-7 py-3 text-sm text-white shadow-md shadow-blue-500/10 hover:shadow-blue-500/20 hover:bg-[var(--accent-hover)] transition-all hover:-translate-y-px"
+          >
+            Open Editor
+            <FiArrowRight className="h-4 w-4" />
+          </Link>
+          <a
+            href="https://github.com/magic-peach/reframe"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-2 rounded-lg border border-[var(--border)] bg-[var(--surface)]/60 px-7 py-3 text-sm text-[var(--text)] hover:bg-[var(--surface)] transition-all hover:-translate-y-px"
+          >
+            <FiGithub className="h-4 w-4" />
+            GitHub
+          </a>
+        </div>
+      </div>
+
+      {/* Footer */}
+      <footer className="w-full mt-auto pt-10 pb-4">
+        <div className="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-12 gap-8 px-6 md:px-10">
+
+          <div className="md:col-span-5 space-y-3">
+            <div className="flex items-center gap-1.5">
+              <BrandLogo size={20} className="text-film-600" />
+              <span className="text-sm font-medium tracking-tight text-[var(--text)]">Reframe</span>
+            </div>
+            <p className="text-xs text-[var(--muted)] leading-relaxed max-w-xs">
+              Free, open-source video editor. Resize, trim, and format videos without uploading a single byte.
+            </p>
+            <div className="flex items-center gap-1.5 text-xs text-[var(--muted)]">
+              <FiShield className="h-3.5 w-3.5 text-emerald-500" />
+              Videos never leave your computer.
+            </div>
+          </div>
+
+          <div className="md:col-span-3 md:col-start-8 space-y-3">
+            <p className="text-[10px] uppercase tracking-widest text-[var(--muted)]">Product</p>
+            <nav className="flex flex-col gap-1.5 text-xs text-[var(--muted)]">
+              <Link href="/reframe" className="hover:text-[var(--text)] transition-colors">Open Editor</Link>
+              <a href="#features" onClick={(e) => { e.preventDefault(); document.getElementById("features")?.scrollIntoView({ behavior: "smooth" }); }} className="hover:text-[var(--text)] transition-colors">Features</a>
+              <a href="#workflow" onClick={(e) => { e.preventDefault(); document.getElementById("workflow")?.scrollIntoView({ behavior: "smooth" }); }} className="hover:text-[var(--text)] transition-colors">How It Works</a>
+            </nav>
+          </div>
+
+          <div className="md:col-span-2 space-y-3">
+            <p className="text-[10px] uppercase tracking-widest text-[var(--muted)]">Legal</p>
+            <nav className="flex flex-col gap-1.5 text-xs text-[var(--muted)]">
+              <Link href="/privacy" className="hover:text-[var(--text)] transition-colors">Privacy Policy</Link>
+              <Link href="/contact" className="hover:text-[var(--text)] transition-colors">Contact</Link>
+              <a href="https://github.com/magic-peach/reframe" target="_blank" rel="noopener noreferrer" className="flex items-center gap-1 hover:text-[var(--text)] transition-colors">
+                <FiGithub className="h-3.5 w-3.5" /> GitHub
+              </a>
+            </nav>
+          </div>
+        </div>
+
+        <div className="max-w-6xl mx-auto mt-8 pt-4 border-t border-[var(--border)]/30 flex flex-col sm:flex-row justify-between items-center gap-2 text-[10px] text-[var(--muted)] px-6 md:px-10">
+          <p>&copy; {new Date().getFullYear()} Reframe. MIT License.</p>
+          <p className="flex items-center gap-1">
+            Made with <FiHeart className="h-3 w-3 text-rose-500 fill-rose-500" /> for privacy.
+          </p>
+        </div>
+      </footer>
+    </section>
+  );
+}
diff --git a/src/components/landing/FeatureSection.tsx b/src/components/landing/FeatureSection.tsx
new file mode 100644
index 00000000..164bf25b
--- /dev/null
+++ b/src/components/landing/FeatureSection.tsx
@@ -0,0 +1,93 @@
+"use client";
+
+import { useState } from "react";
+import { FiLayout, FiMove, FiScissors, FiZap, FiVolume2, FiDownload } from "react-icons/fi";
+
+const features = [
+  {
+    icon: <FiLayout className="h-5 w-5" />,
+    title: "Instant Resizing",
+    description: "Resize for YouTube, TikTok, Reels, or square — one click, done.",
+    color: "text-blue-500",
+    bg: "bg-blue-500/8 dark:bg-blue-500/10",
+  },
+  {
+    icon: <FiMove className="h-5 w-5" />,
+    title: "Flexible Framing",
+    description: "Reposition and scale your subject dynamically to keep focus where it matters.",
+    color: "text-violet-500",
+    bg: "bg-violet-500/8 dark:bg-violet-500/10",
+  },
+  {
+    icon: <FiScissors className="h-5 w-5" />,
+    title: "Precise Trimming",
+    description: "Cut timelines with sub-second precision. Keep the good parts, drop the rest.",
+    color: "text-rose-500",
+    bg: "bg-rose-500/8 dark:bg-rose-500/10",
+  },
+  {
+    icon: <FiZap className="h-5 w-5" />,
+    title: "Speed Control",
+    description: "Slow-motion replays or quick timelapses — adjust playback speed per segment.",
+    color: "text-amber-500",
+    bg: "bg-amber-500/8 dark:bg-amber-500/10",
+  },
+  {
+    icon: <FiVolume2 className="h-5 w-5" />,
+    title: "Audio Control",
+    description: "Adjust volume, extract tracks, or mute — all from the same interface.",
+    color: "text-emerald-500",
+    bg: "bg-emerald-500/8 dark:bg-emerald-500/10",
+  },
+  {
+    icon: <FiDownload className="h-5 w-5" />,
+    title: "Fast Export",
+    description: "Renders locally via FFmpeg WASM. No waiting on servers, no quality loss.",
+    color: "text-cyan-500",
+    bg: "bg-cyan-500/8 dark:bg-cyan-500/10",
+  },
+];
+
+export default function FeatureSection() {
+  const [hovered, setHovered] = useState<number | null>(null);
+
+  return (
+    <section id="features" className="min-h-screen flex flex-col justify-center py-16 relative overflow-hidden">
+      <div className="mx-auto w-full max-w-6xl px-6 md:px-10">
+
+        {/* Header */}
+        <div className="max-w-xl mb-14">
+          <p className="text-xs uppercase tracking-widest text-[var(--accent)] mb-3">Capabilities</p>
+          <h2 className="text-3xl sm:text-4xl font-semibold tracking-tight text-[var(--text)] leading-tight">
+            Everything you need,<br />running locally.
+          </h2>
+          <p className="mt-3 text-sm text-[var(--muted)] leading-relaxed max-w-md">
+            A full video toolkit powered by WebAssembly. Nothing leaves your machine.
+          </p>
+        </div>
+
+        {/* Grid */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+          {features.map((f, i) => (
+            <div
+              key={i}
+              className="group relative rounded-xl bg-[var(--surface)]/60 backdrop-blur-sm p-5 ring-1 ring-[var(--border)]/40 hover:ring-[var(--border)] transition-all duration-300 cursor-default"
+              onMouseEnter={() => setHovered(i)}
+              onMouseLeave={() => setHovered(null)}
+              style={{
+                transform: hovered === i ? "translateY(-3px)" : "translateY(0)",
+              }}
+            >
+              <div className={`inline-flex items-center justify-center h-9 w-9 rounded-lg ${f.bg} ${f.color} mb-4`}>
+                {f.icon}
+              </div>
+              <h3 className="text-sm font-medium text-[var(--text)] mb-1.5">{f.title}</h3>
+              <p className="text-xs text-[var(--muted)] leading-relaxed">{f.description}</p>
+            </div>
+          ))}
+        </div>
+
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/landing/Footer.tsx b/src/components/landing/Footer.tsx
new file mode 100644
index 00000000..6efec146
--- /dev/null
+++ b/src/components/landing/Footer.tsx
@@ -0,0 +1,78 @@
+"use client";
+
+import Link from "next/link";
+import { FiGithub, FiShield, FiHeart } from "react-icons/fi";
+import BrandLogo from "@/components/BrandLogo";
+
+export default function Footer() {
+  return (
+    <footer className="w-full border-t border-[var(--border)] bg-[var(--surface)]/40 backdrop-blur-sm text-[var(--text)] px-6 py-20 lg:py-28 transition-colors duration-300">
+      <div className="max-w-[1720px] mx-auto grid grid-cols-1 md:grid-cols-12 gap-16 md:gap-8 px-6 md:px-12 lg:px-20">
+        
+        {/* Brand Section */}
+        <div className="md:col-span-6 space-y-8">
+          <div className="flex items-center gap-2">
+            <BrandLogo size={28} className="text-film-600" />
+            <span className="text-xl font-bold tracking-tight">Reframe</span>
+          </div>
+          
+          <p className="text-base text-[var(--muted)] leading-relaxed max-w-md">
+            Free, open-source video editor running entirely client-side. Resize, trim, and format videos securely without uploading a single byte.
+          </p>
+
+          <div className="flex items-center gap-2 text-sm text-[var(--muted)]">
+            <FiShield className="h-5 w-5 text-green-500" />
+            <span>Your videos and data never leave your computer.</span>
+          </div>
+        </div>
+
+        {/* Links Column 1 */}
+        <div className="md:col-span-3 space-y-6">
+          <h3 className="text-sm font-bold uppercase tracking-wider text-[var(--text)] opacity-60">Product</h3>
+          <nav className="flex flex-col gap-3.5 text-base text-[var(--muted)]">
+            <Link href="/reframe" className="hover:text-[var(--text)] transition-colors duration-200">
+              Open Editor
+            </Link>
+            <a href="#features" className="hover:text-[var(--text)] transition-colors duration-200">
+              Features
+            </a>
+            <a href="#workflow" className="hover:text-[var(--text)] transition-colors duration-200">
+              How It Works
+            </a>
+          </nav>
+        </div>
+
+        {/* Links Column 2 */}
+        <div className="md:col-span-3 space-y-6">
+          <h3 className="text-sm font-bold uppercase tracking-wider text-[var(--text)] opacity-60">Legal & Source</h3>
+          <nav className="flex flex-col gap-3.5 text-base text-[var(--muted)]">
+            <Link href="/privacy" className="hover:text-[var(--text)] transition-colors duration-200">
+              Privacy Policy
+            </Link>
+            <Link href="/contact" className="hover:text-[var(--text)] transition-colors duration-200">
+              Contact Support
+            </Link>
+            <a
+              href="https://github.com/magic-peach/reframe"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-2 hover:text-[var(--text)] transition-colors duration-200"
+            >
+              <FiGithub className="h-5 w-5" />
+              GitHub
+            </a>
+          </nav>
+        </div>
+
+      </div>
+
+      {/* Bottom Bar */}
+      <div className="max-w-[1720px] mx-auto mt-16 pt-8 border-t border-[var(--border)] flex flex-col sm:flex-row justify-between items-center gap-4 text-sm text-[var(--muted)] px-6 md:px-12 lg:px-20">
+        <p>© {new Date().getFullYear()} Reframe. Released under the MIT License.</p>
+        <p className="flex items-center gap-1.5">
+          Built with <FiHeart className="h-4 w-4 text-red-500 fill-red-500" /> for privacy on the web.
+        </p>
+      </div>
+    </footer>
+  );
+}
diff --git a/src/components/landing/Hero.tsx b/src/components/landing/Hero.tsx
new file mode 100644
index 00000000..1cbb5555
--- /dev/null
+++ b/src/components/landing/Hero.tsx
@@ -0,0 +1,148 @@
+"use client";
+
+import Link from "next/link";
+import { FiArrowRight, FiShield, FiUserX, FiCloudOff, FiCode, FiTv } from "react-icons/fi";
+import Sparkles from "./Sparkles";
+
+export default function Hero() {
+  const scrollTo = (e: React.MouseEvent<HTMLAnchorElement>, id: string) => {
+    e.preventDefault();
+    document.getElementById(id)?.scrollIntoView({ behavior: "smooth" });
+  };
+
+  return (
+    <section className="relative overflow-hidden min-h-[calc(100vh-76px)] flex items-center py-12">
+      <Sparkles />
+      <div className="absolute top-0 left-1/4 -z-10 h-[420px] w-[600px] rounded-full bg-blue-500/8 blur-[120px] dark:bg-blue-400/5" />
+      <div className="absolute bottom-10 right-1/4 -z-10 h-[350px] w-[550px] rounded-full bg-violet-400/8 blur-[100px] dark:bg-violet-400/4" />
+
+      <div className="mx-auto w-full max-w-6xl px-6 md:px-10">
+        <div className="grid grid-cols-1 gap-14 lg:grid-cols-12 lg:gap-10 items-center">
+
+          {/* Left copy */}
+          <div className="lg:col-span-6 space-y-7">
+
+            <div className="inline-flex items-center gap-2 rounded-full border border-[var(--border)] bg-[var(--surface)]/50 px-3.5 py-1 text-xs tracking-wide text-[var(--accent)] backdrop-blur-sm">
+              <FiShield className="h-3.5 w-3.5" />
+              <span>100% browser-based</span>
+            </div>
+
+            <div className="space-y-5">
+              <h1 className="text-4xl sm:text-5xl lg:text-[3.5rem] font-semibold tracking-tight text-[var(--text)] leading-[1.1]">
+                Edit videos, <br className="hidden sm:block" />
+                <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-indigo-500 dark:from-blue-400 dark:to-indigo-400">
+                  right in your browser.
+                </span>
+              </h1>
+              <p className="max-w-md text-base text-[var(--muted)] leading-relaxed">
+                Resize, trim, rotate, and export — all processed locally. Your files never touch a server.
+              </p>
+            </div>
+
+            <div className="flex flex-wrap gap-3">
+              <Link
+                href="/reframe"
+                className="inline-flex items-center gap-2 rounded-lg bg-[var(--accent)] px-6 py-3 text-sm text-white shadow-md shadow-blue-500/10 hover:shadow-blue-500/20 hover:bg-[var(--accent-hover)] transition-all hover:-translate-y-px active:translate-y-0"
+              >
+                Open Editor
+                <FiArrowRight className="h-4 w-4" />
+              </Link>
+              <a
+                href="#features"
+                onClick={(e) => scrollTo(e, "features")}
+                className="inline-flex items-center gap-2 rounded-lg border border-[var(--border)] bg-[var(--surface)]/60 px-6 py-3 text-sm text-[var(--text)] hover:bg-[var(--surface)] transition-all hover:-translate-y-px active:translate-y-0"
+              >
+                See what it does
+              </a>
+            </div>
+
+            {/* Trust chips */}
+            <div className="flex items-center gap-6 pt-4">
+              {[
+                { icon: <FiUserX className="h-3.5 w-3.5" />, label: "No login" },
+                { icon: <FiCloudOff className="h-3.5 w-3.5" />, label: "No uploads" },
+                { icon: <FiCode className="h-3.5 w-3.5" />, label: "Open source" },
+              ].map((t, i) => (
+                <div key={i} className="flex items-center gap-1.5 text-xs text-[var(--muted)]">
+                  <span className="text-[var(--accent)]">{t.icon}</span>
+                  {t.label}
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Right mockup */}
+          <div className="lg:col-span-6 flex justify-center w-full">
+            <div className="relative w-full max-w-md rounded-xl bg-[var(--surface)] p-4 shadow-xl ring-1 ring-[var(--border)]/50 transition-transform duration-500 hover:scale-[1.01]">
+
+              {/* Window chrome */}
+              <div className="flex items-center justify-between pb-3 mb-3 border-b border-[var(--border)]/50">
+                <div className="flex items-center gap-1.5">
+                  <span className="h-2.5 w-2.5 rounded-full bg-red-400/70" />
+                  <span className="h-2.5 w-2.5 rounded-full bg-amber-400/70" />
+                  <span className="h-2.5 w-2.5 rounded-full bg-green-400/70" />
+                </div>
+                <span className="text-[10px] text-[var(--muted)]">Reframe Studio</span>
+                <FiTv className="h-3.5 w-3.5 text-[var(--muted)]/60" />
+              </div>
+
+              {/* Workspace */}
+              <div className="grid grid-cols-12 gap-2.5 h-48">
+                {/* Sidebar */}
+                <div className="col-span-4 rounded-lg bg-[var(--bg)] ring-1 ring-[var(--border)]/40 p-2 flex flex-col justify-between">
+                  <div>
+                    <span className="block text-[8px] uppercase tracking-wider text-[var(--muted)] mb-2">Aspect Ratio</span>
+                    <div className="space-y-1">
+                      <div className="rounded px-2 py-1 text-[9px] bg-[var(--accent)]/10 ring-1 ring-[var(--accent)]/30 text-[var(--accent)]">9:16 Reels</div>
+                      <div className="rounded px-2 py-1 text-[9px] text-[var(--muted)]">16:9 YouTube</div>
+                      <div className="rounded px-2 py-1 text-[9px] text-[var(--muted)]">1:1 Square</div>
+                    </div>
+                  </div>
+                  <div className="rounded bg-emerald-500/10 p-1.5 text-center">
+                    <span className="text-[8px] text-emerald-600 dark:text-emerald-400">Local WASM</span>
+                  </div>
+                </div>
+
+                {/* Preview */}
+                <div className="col-span-8 rounded-lg bg-[var(--bg)] ring-1 ring-[var(--border)]/40 relative flex items-center justify-center overflow-hidden">
+                  <div className="w-20 h-36 rounded border border-dashed border-film-400/60 flex flex-col items-center justify-center bg-black/30 relative">
+                    <span className="absolute top-1 text-[6px] text-white/40 tracking-widest uppercase">9:16</span>
+                    <div className="w-10 h-10 rounded-full bg-gradient-to-tr from-blue-500 to-indigo-500 animate-pulse flex items-center justify-center text-white">
+                      <FiCode className="h-4 w-4" />
+                    </div>
+                    <div className="absolute bottom-1.5 inset-x-1.5 h-3 rounded bg-white/10 backdrop-blur-sm flex items-center justify-between px-1">
+                      <span className="text-[6px] text-white/60 font-mono">0:04 / 0:15</span>
+                      <div className="h-1 w-1 rounded-full bg-film-600" />
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* Timeline */}
+              <div className="mt-2.5 pt-2.5 border-t border-[var(--border)]/40">
+                <div className="flex items-center justify-between text-[9px] text-[var(--muted)] font-mono mb-1">
+                  <span>Track 1</span>
+                  <span>0:15</span>
+                </div>
+                <div className="relative h-7 w-full rounded bg-[var(--bg)] ring-1 ring-[var(--border)]/40 flex items-center px-0.5 overflow-hidden">
+                  <div className="absolute left-6 right-16 top-0.5 bottom-0.5 rounded bg-film-600/10 border border-film-400/40 flex items-center justify-between px-0.5">
+                    <div className="w-[2px] h-full bg-film-400/60 rounded-sm" />
+                    <div className="flex gap-[2px] items-center h-3 opacity-40">
+                      <div className="w-[2px] h-2.5 bg-film-400" />
+                      <div className="w-[2px] h-3 bg-film-400" />
+                      <div className="w-[2px] h-2 bg-film-400" />
+                      <div className="w-[2px] h-3 bg-film-400" />
+                      <div className="w-[2px] h-2 bg-film-400" />
+                    </div>
+                    <div className="w-[2px] h-full bg-film-400/60 rounded-sm" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/landing/LandingWrapper.tsx b/src/components/landing/LandingWrapper.tsx
new file mode 100644
index 00000000..1142d5cb
--- /dev/null
+++ b/src/components/landing/LandingWrapper.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import { useState } from "react";
+import Navbar from "./Navbar";
+import Hero from "./Hero";
+import FeatureSection from "./FeatureSection";
+import PrivacySection from "./PrivacySection";
+import WorkflowSection from "./WorkflowSection";
+import CTASection from "./CTASection";
+import LoadingScreen from "./LoadingScreen";
+
+export default function LandingWrapper() {
+  const [loading, setLoading] = useState(true);
+
+  if (loading) {
+    return <LoadingScreen onComplete={() => setLoading(false)} />;
+  }
+
+  return (
+    <div className="min-h-screen bg-[var(--bg)] text-[var(--text)] transition-colors duration-300">
+      <Navbar />
+      <main>
+        <Hero />
+        <FeatureSection />
+        <PrivacySection />
+        <WorkflowSection />
+        <CTASection />
+      </main>
+    </div>
+  );
+}
diff --git a/src/components/landing/LoadingScreen.tsx b/src/components/landing/LoadingScreen.tsx
new file mode 100644
index 00000000..b89b68bb
--- /dev/null
+++ b/src/components/landing/LoadingScreen.tsx
@@ -0,0 +1,178 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+
+interface TextParticle {
+  x: number;
+  y: number;
+  originX: number;
+  originY: number;
+  color: string;
+  size: number;
+  vx: number;
+  vy: number;
+  ease: number;
+  friction: number;
+}
+
+export default function LoadingScreen({ onComplete }: { onComplete?: () => void }) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const [percent, setPercent] = useState(0);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+
+    let particles: TextParticle[] = [];
+    let animationFrameId: number;
+
+    const isDark = document.documentElement.classList.contains("dark");
+    const textColor = isDark ? "#ffffff" : "#181412";
+    const accentColor = "#e63946"; // film-600
+
+    // Render hidden text to inspect pixel data
+    const tempCanvas = document.createElement("canvas");
+    const tempCtx = tempCanvas.getContext("2d");
+    if (tempCtx) {
+      tempCanvas.width = canvas.width;
+      tempCanvas.height = canvas.height;
+      
+      const fontSize = Math.min(canvas.width * 0.12, 100);
+      tempCtx.font = `bold ${fontSize}px sans-serif`;
+      tempCtx.fillStyle = "#ffffff";
+      tempCtx.textAlign = "center";
+      tempCtx.textBaseline = "middle";
+      tempCtx.fillText("REFRAME", canvas.width / 2, canvas.height / 2 - 40);
+
+      const pixels = tempCtx.getImageData(0, 0, canvas.width, canvas.height).data;
+      
+      // Sample pixels
+      const gap = 6;
+      for (let y = 0; y < canvas.height; y += gap) {
+        for (let x = 0; x < canvas.width; x += gap) {
+          const index = (y * canvas.width + x) * 4;
+          const alpha = pixels[index + 3];
+          if (alpha && alpha > 128) {
+            particles.push({
+              x: Math.random() * canvas.width,
+              y: Math.random() * canvas.height,
+              originX: x,
+              originY: y,
+              color: Math.random() > 0.85 ? accentColor : textColor,
+              size: Math.random() * 2 + 1,
+              vx: 0,
+              vy: 0,
+              ease: Math.random() * 0.08 + 0.04,
+              friction: 0.9,
+            });
+          }
+        }
+      }
+    }
+
+    const mouse = {
+      x: 0,
+      y: 0,
+      radius: 90,
+    };
+
+    const handleMouseMove = (e: MouseEvent) => {
+      mouse.x = e.clientX;
+      mouse.y = e.clientY;
+    };
+
+    window.addEventListener("mousemove", handleMouseMove);
+
+    const animate = () => {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+      particles.forEach((p) => {
+        // Calculate interactive reaction
+        const dx = mouse.x - p.x;
+        const dy = mouse.y - p.y;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        
+        if (distance < mouse.radius) {
+          const force = (mouse.radius - distance) / mouse.radius;
+          const angle = Math.atan2(dy, dx);
+          const pushX = Math.cos(angle) * force * 15;
+          const pushY = Math.sin(angle) * force * 15;
+          p.vx -= pushX;
+          p.vy -= pushY;
+        }
+
+        // Return to origin
+        p.vx += (p.originX - p.x) * p.ease;
+        p.vy += (p.originY - p.y) * p.ease;
+
+        p.vx *= p.friction;
+        p.vy *= p.friction;
+
+        p.x += p.vx;
+        p.y += p.vy;
+
+        ctx.fillStyle = p.color;
+        ctx.beginPath();
+        ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
+        ctx.fill();
+      });
+
+      animationFrameId = requestAnimationFrame(animate);
+    };
+
+    animate();
+
+    // Fake loading progress
+    const interval = setInterval(() => {
+      setPercent((prev) => {
+        if (prev >= 100) {
+          clearInterval(interval);
+          setTimeout(() => {
+            if (onComplete) onComplete();
+          }, 800);
+          return 100;
+        }
+        return prev + 5;
+      });
+    }, 60);
+
+    const handleResize = () => {
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+    };
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("resize", handleResize);
+      cancelAnimationFrame(animationFrameId);
+      clearInterval(interval);
+    };
+  }, [onComplete]);
+
+  return (
+    <div className="fixed inset-0 z-[9999] flex flex-col items-center justify-center bg-[var(--bg)] transition-colors duration-300">
+      <canvas ref={canvasRef} className="absolute inset-0 cursor-none" />
+      
+      {/* Loading Progress Text */}
+      <div className="absolute bottom-20 flex flex-col items-center gap-3 pointer-events-none select-none">
+        <span className="text-xs font-mono font-bold tracking-[0.35em] text-[var(--muted)] uppercase animate-pulse">
+          Initializing local workspace
+        </span>
+        <span className="text-2xl font-black text-[var(--text)]">{percent}%</span>
+        {/* Visual Loading bar */}
+        <div className="h-[3px] w-56 rounded bg-[var(--border)] overflow-hidden">
+          <div
+            className="h-full bg-[var(--accent)] transition-all duration-300 ease-out"
+            style={{ width: `${percent}%` }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/landing/Navbar.tsx b/src/components/landing/Navbar.tsx
new file mode 100644
index 00000000..ab040180
--- /dev/null
+++ b/src/components/landing/Navbar.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import Link from "next/link";
+import BrandLogo from "@/components/BrandLogo";
+import { ThemeToggle } from "@/components/ThemeToggle";
+import { FiArrowRight } from "react-icons/fi";
+
+export default function Navbar() {
+  const scroll = (e: React.MouseEvent<HTMLAnchorElement>, id: string) => {
+    e.preventDefault();
+    document.getElementById(id)?.scrollIntoView({ behavior: "smooth" });
+  };
+
+  return (
+    <div className="sticky top-3 z-50 mx-auto w-[95%] max-w-5xl px-1">
+      <nav className="flex items-center justify-between rounded-2xl bg-[var(--surface)]/70 backdrop-blur-xl px-5 py-2.5 shadow-sm ring-1 ring-[var(--border)]/60">
+        {/* Logo */}
+        <Link href="/" className="flex items-center gap-1.5 opacity-90 hover:opacity-100 transition-opacity">
+          <BrandLogo size={22} className="text-film-600" />
+          <span className="text-base font-semibold tracking-tight text-[var(--text)]">Reframe</span>
+        </Link>
+
+        {/* Center links */}
+        <div className="hidden md:flex items-center gap-8">
+          <a href="#features" onClick={(e) => scroll(e, "features")} className="text-sm text-[var(--muted)] hover:text-[var(--text)] transition-colors">Features</a>
+          <a href="#privacy" onClick={(e) => scroll(e, "privacy")} className="text-sm text-[var(--muted)] hover:text-[var(--text)] transition-colors">Privacy</a>
+          <a href="#workflow" onClick={(e) => scroll(e, "workflow")} className="text-sm text-[var(--muted)] hover:text-[var(--text)] transition-colors">How It Works</a>
+        </div>
+
+        {/* Right */}
+        <div className="flex items-center gap-3">
+          <ThemeToggle />
+          <Link
+            href="/reframe"
+            className="inline-flex items-center gap-1.5 rounded-lg bg-[var(--accent)] px-3.5 py-1.5 text-sm text-white hover:bg-[var(--accent-hover)] transition-colors"
+          >
+            Open Editor
+            <FiArrowRight className="h-3.5 w-3.5" />
+          </Link>
+        </div>
+      </nav>
+    </div>
+  );
+}
diff --git a/src/components/landing/PrivacySection.tsx b/src/components/landing/PrivacySection.tsx
new file mode 100644
index 00000000..ec775910
--- /dev/null
+++ b/src/components/landing/PrivacySection.tsx
@@ -0,0 +1,123 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { FiLock, FiCpu, FiCloudOff, FiEyeOff, FiKey } from "react-icons/fi";
+
+/* ── tiny animated bar chart to show "zero data leaves" visually ── */
+function DataFlowChart() {
+  const bars = [
+    { label: "Uploaded", value: 0, color: "bg-emerald-500" },
+    { label: "Processed locally", value: 100, color: "bg-blue-500" },
+    { label: "Stored on server", value: 0, color: "bg-emerald-500" },
+    { label: "Shared externally", value: 0, color: "bg-emerald-500" },
+  ];
+  const [animate, setAnimate] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => { if (entry?.isIntersecting) setAnimate(true); },
+      { threshold: 0.5 }
+    );
+    if (ref.current) observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <div ref={ref} className="space-y-3 mt-6">
+      <p className="text-[10px] uppercase tracking-widest text-[var(--muted)]">Data flow breakdown</p>
+      {bars.map((b, i) => (
+        <div key={i} className="flex items-center gap-3">
+          <span className="text-[11px] text-[var(--muted)] w-32 shrink-0 text-right">{b.label}</span>
+          <div className="flex-1 h-4 rounded-full bg-[var(--bg)] ring-1 ring-[var(--border)]/30 overflow-hidden">
+            <div
+              className={`h-full rounded-full ${b.color} transition-all duration-1000 ease-out`}
+              style={{ width: animate ? `${b.value}%` : "0%" }}
+            />
+          </div>
+          <span className="text-[11px] font-mono text-[var(--muted)] w-10">{b.value}%</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+const trustCards = [
+  {
+    icon: <FiLock className="h-4.5 w-4.5" />,
+    title: "Browser-only processing",
+    desc: "Video renders execute in your browser tab. No external calls, no relay servers.",
+    accent: "text-emerald-500",
+    ring: "ring-emerald-500/15",
+  },
+  {
+    icon: <FiCpu className="h-4.5 w-4.5" />,
+    title: "Client-side FFmpeg",
+    desc: "WebAssembly runs native C libraries in a sandboxed environment right on your CPU.",
+    accent: "text-blue-500",
+    ring: "ring-blue-500/15",
+  },
+  {
+    icon: <FiCloudOff className="h-4.5 w-4.5" />,
+    title: "No uploads",
+    desc: "Files load into browser memory and are deleted the moment you close the tab.",
+    accent: "text-rose-500",
+    ring: "ring-rose-500/15",
+  },
+  {
+    icon: <FiEyeOff className="h-4.5 w-4.5" />,
+    title: "No tracking",
+    desc: "Zero analytics, zero usage logs, zero personal data collection.",
+    accent: "text-violet-500",
+    ring: "ring-violet-500/15",
+  },
+  {
+    icon: <FiKey className="h-4.5 w-4.5" />,
+    title: "No login required",
+    desc: "No email, no password, no sign-up. Just open the page and start editing.",
+    accent: "text-amber-500",
+    ring: "ring-amber-500/15",
+  },
+];
+
+export default function PrivacySection() {
+  return (
+    <section id="privacy" className="min-h-screen flex flex-col justify-center py-16 relative overflow-hidden">
+      <div className="absolute right-0 top-1/3 -z-10 h-80 w-80 rounded-full bg-indigo-500/6 blur-[100px]" />
+
+      <div className="mx-auto w-full max-w-6xl px-6 md:px-10">
+        <div className="grid grid-cols-1 gap-14 lg:grid-cols-12 lg:gap-10 items-start">
+
+          {/* Left column */}
+          <div className="lg:col-span-5 space-y-5">
+            <p className="text-xs uppercase tracking-widest text-[var(--accent)]">Privacy</p>
+            <h2 className="text-3xl sm:text-4xl font-semibold tracking-tight text-[var(--text)] leading-tight">
+              Your videos never leave your device.
+            </h2>
+            <p className="text-sm text-[var(--muted)] leading-relaxed">
+              Most online editors upload gigabytes to their servers. Reframe processes every frame on your machine — saving bandwidth, time, and your peace of mind.
+            </p>
+
+            {/* Interactive chart */}
+            <DataFlowChart />
+          </div>
+
+          {/* Right cards */}
+          <div className="lg:col-span-7 grid grid-cols-1 sm:grid-cols-2 gap-3">
+            {trustCards.map((card, i) => (
+              <div
+                key={i}
+                className={`rounded-xl bg-[var(--surface)]/50 backdrop-blur-sm p-4 ring-1 ${card.ring} hover:ring-[var(--border)] transition-all duration-300 ${i === 0 ? "sm:col-span-2" : ""}`}
+              >
+                <div className={`${card.accent} mb-3`}>{card.icon}</div>
+                <h4 className="text-sm font-medium text-[var(--text)] mb-1">{card.title}</h4>
+                <p className="text-xs text-[var(--muted)] leading-relaxed">{card.desc}</p>
+              </div>
+            ))}
+          </div>
+
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/landing/Sparkles.tsx b/src/components/landing/Sparkles.tsx
new file mode 100644
index 00000000..d418b413
--- /dev/null
+++ b/src/components/landing/Sparkles.tsx
@@ -0,0 +1,93 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+
+interface SparkleParticle {
+  x: number;
+  y: number;
+  size: number;
+  speedY: number;
+  speedX: number;
+  alpha: number;
+  decay: number;
+}
+
+export default function Sparkles({ className }: { className?: string }) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    let animationFrameId: number;
+    let particles: SparkleParticle[] = [];
+
+    const handleResize = () => {
+      if (!canvas.parentElement) return;
+      canvas.width = canvas.parentElement.clientWidth;
+      canvas.height = canvas.parentElement.clientHeight;
+    };
+
+    window.addEventListener("resize", handleResize);
+    handleResize();
+
+    const createParticle = (): SparkleParticle => {
+      return {
+        x: Math.random() * canvas.width,
+        y: Math.random() * canvas.height,
+        size: Math.random() * 2.2 + 0.4,
+        speedY: (Math.random() - 0.5) * 0.3,
+        speedX: (Math.random() - 0.5) * 0.3,
+        alpha: Math.random() * 0.5 + 0.1,
+        decay: Math.random() * 0.003 + 0.001,
+      };
+    };
+
+    // Initialize particles
+    for (let i = 0; i < 40; i++) {
+      particles.push(createParticle());
+    }
+
+    const animate = () => {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      const isDark = document.documentElement.classList.contains("dark");
+      // White sparks in dark mode, brand-blue in light mode
+      const color = isDark ? "255, 255, 255" : "59, 130, 246"; 
+
+      particles.forEach((p, idx) => {
+        p.y += p.speedY;
+        p.x += p.speedX;
+        p.alpha -= p.decay;
+
+        // Draw sparkle dot
+        ctx.fillStyle = `rgba(${color}, ${p.alpha})`;
+        ctx.beginPath();
+        ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
+        ctx.fill();
+
+        // Respawn if fully faded or drifted out
+        if (p.alpha <= 0 || p.x < 0 || p.x > canvas.width || p.y < 0 || p.y > canvas.height) {
+          particles[idx] = createParticle();
+        }
+      });
+
+      animationFrameId = requestAnimationFrame(animate);
+    };
+
+    animate();
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      cancelAnimationFrame(animationFrameId);
+    };
+  }, []);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      className={`absolute inset-0 pointer-events-none -z-10 ${className || ""}`}
+    />
+  );
+}
diff --git a/src/components/landing/WorkflowSection.tsx b/src/components/landing/WorkflowSection.tsx
new file mode 100644
index 00000000..35b04619
--- /dev/null
+++ b/src/components/landing/WorkflowSection.tsx
@@ -0,0 +1,96 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { FiFolder, FiSliders, FiDownload } from "react-icons/fi";
+
+const steps = [
+  {
+    num: "01",
+    icon: <FiFolder className="h-5 w-5" />,
+    title: "Open your video",
+    desc: "Drag any file in. It loads straight into browser memory — no upload progress bar.",
+    color: "text-blue-500",
+    ring: "ring-blue-500/20",
+    bg: "bg-blue-500/8",
+  },
+  {
+    num: "02",
+    icon: <FiSliders className="h-5 w-5" />,
+    title: "Edit & customize",
+    desc: "Choose aspect ratios, trim the timeline, adjust speed, or rotate — all with live preview.",
+    color: "text-violet-500",
+    ring: "ring-violet-500/20",
+    bg: "bg-violet-500/8",
+  },
+  {
+    num: "03",
+    icon: <FiDownload className="h-5 w-5" />,
+    title: "Export & save",
+    desc: "FFmpeg WASM renders the final file directly to your downloads folder.",
+    color: "text-emerald-500",
+    ring: "ring-emerald-500/20",
+    bg: "bg-emerald-500/8",
+  },
+];
+
+/* Animated progress bar per step — triggers on scroll */
+function StepProgress({ active }: { active: boolean }) {
+  return (
+    <div className="h-[2px] w-full rounded-full bg-[var(--border)]/30 mt-4 overflow-hidden">
+      <div
+        className="h-full rounded-full bg-[var(--accent)] transition-all duration-[1.5s] ease-out"
+        style={{ width: active ? "100%" : "0%" }}
+      />
+    </div>
+  );
+}
+
+export default function WorkflowSection() {
+  const [visible, setVisible] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => { if (entry?.isIntersecting) setVisible(true); },
+      { threshold: 0.3 }
+    );
+    if (ref.current) observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <section id="workflow" className="min-h-screen flex flex-col justify-center py-16 relative overflow-hidden">
+      <div className="mx-auto w-full max-w-6xl px-6 md:px-10">
+
+        {/* Header */}
+        <div className="max-w-xl mb-14">
+          <p className="text-xs uppercase tracking-widest text-[var(--accent)] mb-3">How it works</p>
+          <h2 className="text-3xl sm:text-4xl font-semibold tracking-tight text-[var(--text)] leading-tight">
+            Three steps. No config.
+          </h2>
+          <p className="mt-3 text-sm text-[var(--muted)] leading-relaxed max-w-md">
+            From file to export in under a minute — entirely in your browser.
+          </p>
+        </div>
+
+        {/* Steps */}
+        <div ref={ref} className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          {steps.map((step, i) => (
+            <div key={i} className="group">
+              <div className={`flex items-center gap-3 mb-4`}>
+                <div className={`inline-flex h-10 w-10 items-center justify-center rounded-lg ${step.bg} ${step.color}`}>
+                  {step.icon}
+                </div>
+                <span className="text-xs font-mono text-[var(--muted)] tracking-widest">Step {step.num}</span>
+              </div>
+              <h3 className="text-base font-medium text-[var(--text)] mb-2">{step.title}</h3>
+              <p className="text-xs text-[var(--muted)] leading-relaxed">{step.desc}</p>
+              <StepProgress active={visible} />
+            </div>
+          ))}
+        </div>
+
+      </div>
+    </section>
+  );
+}
