From ccc6cc1da5eace0d3d111f808813bc4979023062 Mon Sep 17 00:00:00 2001
From: Mark Henderson <mark@getacquired.com>
Date: Thu, 2 Apr 2026 12:05:33 -0700
Subject: [PATCH] =?UTF-8?q?feat(justine):=20isolate=20design=20system=20?=
 =?UTF-8?q?=E2=80=94=20verbatim=20CSS=20+=20(justine)=20route=20group?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add app/styles/justine/01-homepage.css: rules from 01_homepage.html scoped to [data-justine]
- Replace app/(marketing) with app/(justine): layout wraps data-justine + Plus Jakarta
- JustineHomePage/Nav/Footer: original class names (btn-ink, hero-grid, …) + inline styles from HTML
- Remove app/justine-marketing.css; move /features /pricing /privacy /terms under (justine)

Made-with: Cursor
---
 .../features/page.tsx                         |   0
 app/(justine)/layout.tsx                      |  47 ++
 app/(justine)/page.tsx                        |   5 +
 .../pricing/page.tsx                          |   0
 .../privacy/page.tsx                          |   0
 app/{(marketing) => (justine)}/terms/page.tsx |   0
 app/(marketing)/layout.tsx                    |  94 ----
 app/(marketing)/page.tsx                      |  26 -
 app/styles/justine/01-homepage.css            | 355 ++++++++++++
 .../components/justine/JustineFooter.tsx      |  32 ++
 .../components/justine/JustineHomePage.tsx    | 518 ++++++++++++++++++
 marketing/components/justine/JustineNav.tsx   | 115 ++++
 marketing/components/justine/index.ts         |   3 +
 13 files changed, 1075 insertions(+), 120 deletions(-)
 rename app/{(marketing) => (justine)}/features/page.tsx (100%)
 create mode 100644 app/(justine)/layout.tsx
 create mode 100644 app/(justine)/page.tsx
 rename app/{(marketing) => (justine)}/pricing/page.tsx (100%)
 rename app/{(marketing) => (justine)}/privacy/page.tsx (100%)
 rename app/{(marketing) => (justine)}/terms/page.tsx (100%)
 delete mode 100644 app/(marketing)/layout.tsx
 delete mode 100644 app/(marketing)/page.tsx
 create mode 100644 app/styles/justine/01-homepage.css
 create mode 100644 marketing/components/justine/JustineFooter.tsx
 create mode 100644 marketing/components/justine/JustineHomePage.tsx
 create mode 100644 marketing/components/justine/JustineNav.tsx
 create mode 100644 marketing/components/justine/index.ts

diff --git a/app/(marketing)/features/page.tsx b/app/(justine)/features/page.tsx
similarity index 100%
rename from app/(marketing)/features/page.tsx
rename to app/(justine)/features/page.tsx
diff --git a/app/(justine)/layout.tsx b/app/(justine)/layout.tsx
new file mode 100644
index 0000000..421cd87
--- /dev/null
+++ b/app/(justine)/layout.tsx
@@ -0,0 +1,47 @@
+import type { Metadata } from "next";
+import { Plus_Jakarta_Sans } from "next/font/google";
+import { homepage } from "@/marketing/content/homepage";
+import { JustineNav } from "@/marketing/components/justine/JustineNav";
+import { JustineFooter } from "@/marketing/components/justine/JustineFooter";
+import "../styles/justine/01-homepage.css";
+
+const justineJakarta = Plus_Jakarta_Sans({
+  subsets: ["latin"],
+  weight: ["400", "500", "600", "700", "800"],
+  variable: "--font-justine-jakarta",
+  display: "swap",
+});
+
+export const metadata: Metadata = {
+  title: homepage.meta.title,
+  description: homepage.meta.description,
+  openGraph: {
+    title: homepage.meta.title,
+    description: homepage.meta.description,
+    url: "https://www.vibnai.com",
+    siteName: "VIBN",
+    type: "website",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: homepage.meta.title,
+    description: homepage.meta.description,
+  },
+};
+
+export default function JustineLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div
+      data-justine
+      className={`${justineJakarta.variable} flex min-h-screen flex-col`}
+    >
+      <JustineNav />
+      <main>{children}</main>
+      <JustineFooter />
+    </div>
+  );
+}
diff --git a/app/(justine)/page.tsx b/app/(justine)/page.tsx
new file mode 100644
index 0000000..cd77307
--- /dev/null
+++ b/app/(justine)/page.tsx
@@ -0,0 +1,5 @@
+import { JustineHomePage } from "@/marketing/components/justine/JustineHomePage";
+
+export default function LandingPage() {
+  return <JustineHomePage />;
+}
diff --git a/app/(marketing)/pricing/page.tsx b/app/(justine)/pricing/page.tsx
similarity index 100%
rename from app/(marketing)/pricing/page.tsx
rename to app/(justine)/pricing/page.tsx
diff --git a/app/(marketing)/privacy/page.tsx b/app/(justine)/privacy/page.tsx
similarity index 100%
rename from app/(marketing)/privacy/page.tsx
rename to app/(justine)/privacy/page.tsx
diff --git a/app/(marketing)/terms/page.tsx b/app/(justine)/terms/page.tsx
similarity index 100%
rename from app/(marketing)/terms/page.tsx
rename to app/(justine)/terms/page.tsx
diff --git a/app/(marketing)/layout.tsx b/app/(marketing)/layout.tsx
deleted file mode 100644
index 34a9b70..0000000
--- a/app/(marketing)/layout.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { Button } from "@/components/ui/button";
-import Link from "next/link";
-import type { Metadata } from "next";
-import { homepage } from "@/marketing/content/homepage";
-import { Footer } from "@/marketing/components";
-
-export const metadata: Metadata = {
-  title: homepage.meta.title,
-  description: homepage.meta.description,
-  openGraph: {
-    title: homepage.meta.title,
-    description: homepage.meta.description,
-    url: "https://www.vibnai.com",
-    siteName: "VIBN",
-    type: "website",
-  },
-  twitter: {
-    card: "summary_large_image",
-    title: homepage.meta.title,
-    description: homepage.meta.description,
-  },
-};
-
-export default function MarketingLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <div className="flex min-h-screen flex-col">
-      {/* Navigation */}
-      <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-        <div className="container flex h-16 items-center">
-          <div className="flex gap-6 md:gap-10">
-            <Link href="/" className="flex items-center space-x-2">
-              <img 
-                src="/vibn-black-circle-logo.png" 
-                alt="Vib'n" 
-                className="h-8 w-8"
-              />
-              <span className="font-serif text-xl font-bold tracking-tight">Vib&apos;n</span>
-            </Link>
-          </div>
-          <div className="flex flex-1 items-center justify-between space-x-2 md:justify-end">
-            <nav className="flex items-center space-x-6">
-              <Link
-                href="/#features"
-                className="text-sm font-medium transition-colors hover:text-primary"
-              >
-                Features
-              </Link>
-              <Link
-                href="/#how-it-works"
-                className="text-sm font-medium transition-colors hover:text-primary"
-              >
-                How It Works
-              </Link>
-              <Link
-                href="/#pricing"
-                className="text-sm font-medium transition-colors hover:text-primary"
-              >
-                Pricing
-              </Link>
-              <Link
-                href="https://github.com/MawkOne/viben"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-sm font-medium transition-colors hover:text-primary"
-              >
-                GitHub
-              </Link>
-            </nav>
-            <div className="flex items-center space-x-4">
-              <Link href="/auth">
-                <Button variant="ghost" size="sm">
-                  Sign In
-                </Button>
-              </Link>
-              <Link href="/auth">
-                <Button size="sm">Get Started</Button>
-              </Link>
-            </div>
-          </div>
-        </div>
-      </header>
-
-      {/* Main Content */}
-      <main className="flex-1 w-full">{children}</main>
-
-      <Footer />
-    </div>
-  );
-}
-
diff --git a/app/(marketing)/page.tsx b/app/(marketing)/page.tsx
deleted file mode 100644
index 3e9d07e..0000000
--- a/app/(marketing)/page.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import {
-  Hero,
-  EmotionalHook,
-  WhoItsFor,
-  Transformation,
-  Features,
-  HowItWorks,
-  Pricing,
-  CTA,
-} from "@/marketing/components";
-
-export default function LandingPage() {
-  return (
-    <div className="flex flex-col">
-      <Hero />
-      <EmotionalHook />
-      <WhoItsFor />
-      <Transformation />
-      <Features />
-      <HowItWorks />
-      <Pricing />
-      <CTA />
-    </div>
-  );
-}
-
diff --git a/app/styles/justine/01-homepage.css b/app/styles/justine/01-homepage.css
new file mode 100644
index 0000000..1654840
--- /dev/null
+++ b/app/styles/justine/01-homepage.css
@@ -0,0 +1,355 @@
+/**
+ * Verbatim from justine/01_homepage.html <style>, scoped under [data-justine].
+ * Do not mix Tailwind/shadcn tokens on surfaces inside this root.
+ */
+
+[data-justine] {
+  --ink: #1a1a1a;
+  --ink2: #2c2c2a;
+  --ink3: #444441;
+  --mid: #6b7280;
+  --muted: #9ca3af;
+  --stone: #b4b2a9;
+  --parch: #d3d1c7;
+  --cream: #f1efe8;
+  --paper: #f7f4ee;
+  --white: #ffffff;
+  --border: #e5e7eb;
+  --serif: var(--font-justine-jakarta), "Plus Jakarta Sans", sans-serif;
+  --sans: var(--font-justine-jakarta), "Plus Jakarta Sans", sans-serif;
+
+  font-family: var(--sans);
+  background: linear-gradient(to bottom, #fafafe, #f0eeff);
+  min-height: 100vh;
+  color: var(--ink);
+}
+
+[data-justine] > main {
+  flex: 1;
+  width: 100%;
+}
+
+[data-justine] * {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+[data-justine] .f {
+  font-family: var(--serif);
+}
+
+[data-justine] nav {
+  background: rgba(250, 250, 250, 0.95);
+  border-bottom: 1px solid var(--border);
+  padding: 0 52px;
+  height: 62px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: sticky;
+  top: 0;
+  z-index: 50;
+}
+
+[data-justine] .nav-links {
+  display: flex;
+  gap: 32px;
+  align-items: center;
+}
+
+[data-justine] .btn-ink {
+  background: linear-gradient(135deg, #2e2a5e, #4338ca);
+  color: #ffffff;
+  border: none;
+  border-radius: 8px;
+  padding: 9px 22px;
+  font-family: var(--sans);
+  font-size: 13.5px;
+  font-weight: 600;
+  cursor: pointer;
+  box-shadow: 0 10px 25px rgba(30, 27, 75, 0.15);
+  transition: box-shadow 0.2s ease, transform 0.2s ease;
+}
+[data-justine] .btn-ink:hover {
+  box-shadow: 0 10px 25px rgba(30, 27, 75, 0.15), 0 0 0 6px rgba(99, 102, 241, 0.15);
+  transform: translateY(-1px);
+}
+
+[data-justine] .btn-ink-lg {
+  background: linear-gradient(135deg, #2e2a5e, #4338ca);
+  color: #ffffff;
+  border: none;
+  border-radius: 10px;
+  padding: 15px 36px;
+  font-family: var(--sans);
+  font-size: 15px;
+  font-weight: 600;
+  cursor: pointer;
+  box-shadow: 0 10px 25px rgba(30, 27, 75, 0.15);
+  transition: box-shadow 0.2s ease, transform 0.2s ease;
+}
+[data-justine] .btn-ink-lg:hover {
+  box-shadow: 0 10px 25px rgba(30, 27, 75, 0.15), 0 0 0 6px rgba(99, 102, 241, 0.15);
+  transform: translateY(-1px);
+}
+
+[data-justine] .gradient-em {
+  background: linear-gradient(to right, #6366f1, #8b5cf6);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  font-style: italic;
+}
+
+[data-justine] .gradient-text {
+  background: linear-gradient(to right, #6366f1, #8b5cf6);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+[data-justine] .gradient-num {
+  background: linear-gradient(135deg, #2e2a5e, #4338ca);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+[data-justine] .empathy-card {
+  background: var(--white);
+  border: 1px solid var(--border);
+  border-left: 3px solid rgba(99, 102, 241, 0.8);
+  border-radius: 12px;
+  padding: 18px 20px;
+  display: flex;
+  gap: 14px;
+  align-items: flex-start;
+  box-shadow: 0 10px 30px rgba(30, 27, 75, 0.05);
+  transition: border-color 0.2s ease, background 0.2s ease;
+}
+[data-justine] .empathy-card:hover {
+  border-color: #6366f1;
+  background: #fafaff;
+}
+
+[data-justine] .hero-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 96px;
+  align-items: center;
+}
+[data-justine] .empathy-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 72px;
+  align-items: center;
+}
+[data-justine] .phase-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  border: 1px solid rgba(99, 102, 241, 0.2);
+  border-radius: 14px;
+  overflow: hidden;
+}
+[data-justine] .wyg-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+[data-justine] .quote-grid {
+  display: grid;
+  grid-template-columns: 1fr 1.6fr 1fr;
+  gap: 28px;
+  align-items: center;
+  margin-bottom: 20px;
+}
+[data-justine] .stats-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+}
+
+[data-justine] .footer-tagline {
+  display: block;
+  font-size: 12px;
+  color: var(--muted);
+  margin-top: 4px;
+  font-family: var(--sans);
+}
+
+[data-justine] .hamburger {
+  display: none;
+  flex-direction: column;
+  gap: 5px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 6px;
+}
+[data-justine] .hamburger span {
+  display: block;
+  width: 22px;
+  height: 2px;
+  background: var(--ink);
+  border-radius: 2px;
+  transition: transform 0.25s ease, opacity 0.25s ease;
+}
+[data-justine] .hamburger.open span:nth-child(1) {
+  transform: translateY(7px) rotate(45deg);
+}
+[data-justine] .hamburger.open span:nth-child(2) {
+  opacity: 0;
+}
+[data-justine] .hamburger.open span:nth-child(3) {
+  transform: translateY(-7px) rotate(-45deg);
+}
+
+[data-justine] .mobile-menu {
+  display: none;
+  position: fixed;
+  top: 62px;
+  left: 0;
+  right: 0;
+  background: rgba(250, 250, 250, 0.98);
+  border-bottom: 1px solid var(--border);
+  padding: 20px 24px 28px;
+  z-index: 49;
+  flex-direction: column;
+  gap: 0;
+  box-shadow: 0 8px 24px rgba(30, 27, 75, 0.08);
+}
+[data-justine] .mobile-menu.open {
+  display: flex;
+}
+[data-justine] .mobile-menu a {
+  font-size: 15px;
+  color: var(--ink);
+  text-decoration: none;
+  padding: 13px 0;
+  border-bottom: 1px solid var(--border);
+  font-weight: 500;
+}
+[data-justine] .mobile-menu a:last-of-type {
+  border-bottom: none;
+}
+[data-justine] .mobile-menu .mobile-menu-cta {
+  margin-top: 18px;
+}
+
+[data-justine] footer {
+  background: rgba(250, 250, 250, 0.95);
+  border-top: 1px solid var(--border);
+  padding: 32px 52px;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+}
+
+[data-justine] .footer-links {
+  display: flex;
+  gap: 28px;
+}
+
+@media (max-width: 768px) {
+  [data-justine] nav {
+    padding: 0 20px;
+  }
+  [data-justine] .nav-links {
+    display: none;
+  }
+  [data-justine] .nav-right-btns {
+    display: none !important;
+  }
+  [data-justine] .hamburger {
+    display: flex;
+  }
+  [data-justine] .hero-grid {
+    grid-template-columns: 1fr;
+    gap: 44px;
+  }
+  [data-justine] .hero-section {
+    padding: 52px 24px 48px !important;
+  }
+  [data-justine] .empathy-section {
+    padding: 56px 24px !important;
+  }
+  [data-justine] .empathy-grid {
+    grid-template-columns: 1fr;
+    gap: 36px;
+  }
+  [data-justine] .how-section {
+    padding: 64px 24px !important;
+  }
+  [data-justine] .phase-grid {
+    grid-template-columns: 1fr;
+  }
+  [data-justine] .phase-grid > div {
+    border-right: none !important;
+    padding: 28px 24px !important;
+  }
+  [data-justine] .wyg-grid {
+    grid-template-columns: 1fr;
+  }
+  [data-justine] .wyg-grid > div {
+    border-right: none !important;
+    border-bottom: 1px solid var(--border);
+    padding: 32px 24px !important;
+  }
+  [data-justine] .wyg-grid > div:last-child {
+    border-bottom: none;
+  }
+  [data-justine] .wyg-section {
+    padding: 0 24px !important;
+  }
+  [data-justine] .quote-grid {
+    grid-template-columns: 1fr;
+  }
+  [data-justine] .quote-side {
+    display: none !important;
+  }
+  [data-justine] .quote-section {
+    padding: 32px 24px 28px !important;
+  }
+  [data-justine] .stats-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+  [data-justine] .stats-grid > div {
+    padding: 28px 16px !important;
+  }
+  [data-justine] .stats-grid > div:nth-child(odd) {
+    padding-left: 0 !important;
+  }
+  [data-justine] .stats-grid > div:nth-child(3),
+  [data-justine] .stats-grid > div:nth-child(4) {
+    border-top: 1px solid var(--border);
+  }
+  [data-justine] .stats-grid > div:nth-child(even) {
+    border-right: none !important;
+  }
+  [data-justine] .stats-section {
+    padding: 0 24px !important;
+  }
+  [data-justine] .cta-section {
+    padding: 56px 20px !important;
+  }
+  [data-justine] .cta-card {
+    padding: 44px 28px !important;
+  }
+  [data-justine] .hero-h1 {
+    font-size: 40px !important;
+    line-height: 1.1 !important;
+  }
+  [data-justine] .hero-sub {
+    font-size: 15px !important;
+  }
+  [data-justine] footer {
+    display: flex !important;
+    flex-direction: column;
+    gap: 20px;
+    text-align: center;
+    padding: 32px 24px !important;
+  }
+  [data-justine] .footer-links {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+}
diff --git a/marketing/components/justine/JustineFooter.tsx b/marketing/components/justine/JustineFooter.tsx
new file mode 100644
index 0000000..f92cc27
--- /dev/null
+++ b/marketing/components/justine/JustineFooter.tsx
@@ -0,0 +1,32 @@
+import Link from "next/link";
+
+/** Footer from justine/01_homepage.html */
+export function JustineFooter() {
+  return (
+    <footer>
+      <div>
+        <span className="f" style={{ fontSize: 16, fontWeight: 700, color: "var(--ink)" }}>
+          vibn
+        </span>
+        <span className="footer-tagline">The fastest way from idea to product.</span>
+      </div>
+      <div className="footer-links">
+        <Link href="/#how-it-works" style={{ fontSize: 13, color: "var(--muted)", textDecoration: "none" }}>
+          How it works
+        </Link>
+        <Link href="/pricing" style={{ fontSize: 13, color: "var(--muted)", textDecoration: "none" }}>
+          Pricing
+        </Link>
+        <Link href="/privacy" style={{ fontSize: 13, color: "var(--muted)", textDecoration: "none" }}>
+          Privacy
+        </Link>
+        <Link href="/terms" style={{ fontSize: 13, color: "var(--muted)", textDecoration: "none" }}>
+          Terms
+        </Link>
+      </div>
+      <span style={{ fontSize: 12.5, color: "var(--muted)", textAlign: "right", display: "block" }}>
+        © {new Date().getFullYear()} vibn
+      </span>
+    </footer>
+  );
+}
diff --git a/marketing/components/justine/JustineHomePage.tsx b/marketing/components/justine/JustineHomePage.tsx
new file mode 100644
index 0000000..3d1bf8f
--- /dev/null
+++ b/marketing/components/justine/JustineHomePage.tsx
@@ -0,0 +1,518 @@
+import type { CSSProperties } from "react";
+import Link from "next/link";
+
+/**
+ * Body sections from justine/01_homepage.html — inline styles + classes match the source file.
+ * Lives under [data-justine]; tokens are --ink, --mid, --muted, --border, --white (see 01-homepage.css).
+ */
+export function JustineHomePage() {
+  return (
+    <>
+      <section
+        className="hero-section"
+        style={{ maxWidth: 980, margin: "0 auto", padding: "88px 52px 72px" }}
+      >
+        <div className="hero-grid">
+          <div>
+            <div
+              style={{
+                fontSize: 11,
+                fontWeight: 600,
+                letterSpacing: "0.13em",
+                textTransform: "uppercase",
+                color: "var(--muted)",
+                marginBottom: 22,
+              }}
+            >
+              For non-technical founders
+            </div>
+            <h1
+              className="f hero-h1"
+              style={{
+                fontSize: 58,
+                fontWeight: 700,
+                color: "var(--ink)",
+                letterSpacing: "-0.03em",
+                lineHeight: 1.06,
+                marginBottom: 28,
+              }}
+            >
+              You have the idea.
+              <br />
+              We handle
+              <br />
+              <em className="gradient-em">everything else.</em>
+            </h1>
+            <p className="hero-sub" style={{ fontSize: 17, color: "var(--mid)", lineHeight: 1.75 }}>
+              You describe it. Vibn builds it, launches it, and markets it. From idea to{" "}
+              <strong style={{ color: "var(--ink)" }}>live</strong> product in{" "}
+              <strong style={{ color: "var(--ink)" }}>72 hours</strong> — no code, no agencies, no
+              waiting.
+            </p>
+          </div>
+
+          <div style={{ flexShrink: 0 }}>
+            <div
+              style={{
+                background: "var(--white)",
+                border: "1px solid var(--border)",
+                borderRadius: 16,
+                overflow: "hidden",
+                boxShadow: "0 20px 60px rgba(30,27,75,0.05)",
+              }}
+            >
+              <div
+                style={{
+                  padding: "24px 26px 20px",
+                  background: "#FCFCFF",
+                  borderBottom: "1px solid var(--border)",
+                }}
+              >
+                <div
+                  style={{
+                    fontSize: 10,
+                    fontWeight: 600,
+                    letterSpacing: "0.12em",
+                    textTransform: "uppercase",
+                    color: "var(--muted)",
+                    marginBottom: 12,
+                  }}
+                >
+                  Your idea
+                </div>
+                <p
+                  className="f"
+                  style={{
+                    fontSize: 15,
+                    fontStyle: "italic",
+                    color: "var(--ink)",
+                    lineHeight: 1.65,
+                    marginBottom: 14,
+                  }}
+                >
+                  &quot;I want to build a booking tool for independent personal trainers.&quot;
+                </p>
+                <div style={{ display: "flex", justifyContent: "flex-end" }}>
+                  <span
+                    style={{
+                      fontSize: 11,
+                      color: "var(--muted)",
+                      background: "var(--white)",
+                      border: "1px solid var(--border)",
+                      borderRadius: 5,
+                      padding: "3px 9px",
+                      letterSpacing: "0.04em",
+                    }}
+                  >
+                    ↵ Enter
+                  </span>
+                </div>
+              </div>
+              <div style={{ padding: "20px 26px 24px", background: "var(--white)" }}>
+                <div
+                  style={{
+                    fontSize: 10,
+                    fontWeight: 600,
+                    letterSpacing: "0.12em",
+                    textTransform: "uppercase",
+                    color: "var(--muted)",
+                    marginBottom: 16,
+                  }}
+                >
+                  vibn generated
+                </div>
+                <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
+                  {[
+                    ["Pages", "Landing, Dashboard, Booking, Payments"],
+                    ["Stack", "Auth, database, payments — handled"],
+                    ["Revenue", "Subscription · $29 / mo"],
+                  ].map(([k, v]) => (
+                    <div
+                      key={k}
+                      style={{
+                        display: "flex",
+                        justifyContent: "space-between",
+                        alignItems: "baseline",
+                        padding: "10px 0",
+                        borderBottom: "1px solid var(--border)",
+                      }}
+                    >
+                      <span style={{ fontSize: 12, color: "var(--muted)", fontWeight: 500 }}>{k}</span>
+                      <span style={{ fontSize: 13, color: "var(--ink)", fontWeight: 600 }}>{v}</span>
+                    </div>
+                  ))}
+                  <div
+                    style={{
+                      display: "flex",
+                      justifyContent: "space-between",
+                      alignItems: "baseline",
+                      padding: "10px 0",
+                    }}
+                  >
+                    <span style={{ fontSize: 12, color: "var(--muted)", fontWeight: 500 }}>Status</span>
+                    <span style={{ fontSize: 13, fontWeight: 600, color: "#6366F1" }}>
+                      ⬤&nbsp; Ready to build
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            textAlign: "center",
+            gap: 10,
+            marginTop: 52,
+          }}
+        >
+          <Link href="/auth">
+            <button type="button" className="btn-ink-lg">
+              Start free — no code needed
+            </button>
+          </Link>
+          <div>
+            <span style={{ fontSize: 13.5, color: "#818CF8" }}>★★★★★</span>
+            <span style={{ fontSize: 13.5, color: "var(--stone)" }}>
+              &nbsp;&nbsp;280 founders launched
+            </span>
+          </div>
+          <p style={{ fontSize: 12, color: "#9CA3AF" }}>No credit card required · Free forever plan</p>
+          <Link
+            href="/#how-it-works"
+            style={{
+              fontSize: 13.5,
+              color: "#6366F1",
+              textDecoration: "none",
+              fontWeight: 500,
+              marginTop: 4,
+            }}
+          >
+            See how it works →
+          </Link>
+        </div>
+      </section>
+
+      <section
+        className="empathy-section"
+        style={{ borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)", padding: "80px 52px" }}
+      >
+        <div style={{ maxWidth: 980, margin: "0 auto" }}>
+          <div className="empathy-grid">
+            <div>
+              <div
+                style={{
+                  fontSize: 11,
+                  fontWeight: 600,
+                  letterSpacing: "0.13em",
+                  textTransform: "uppercase",
+                  color: "var(--muted)",
+                  marginBottom: 18,
+                }}
+              >
+                Sound familiar?
+              </div>
+              <h2
+                className="f"
+                style={{
+                  fontSize: 36,
+                  fontWeight: 700,
+                  color: "#1A1A1A",
+                  lineHeight: 1.18,
+                  marginBottom: 24,
+                  letterSpacing: "-0.02em",
+                }}
+              >
+                The idea is the hard part.{" "}
+                <span className="gradient-text">Everything else shouldn&apos;t be.</span>
+              </h2>
+              <p style={{ fontSize: 15, color: "var(--mid)", lineHeight: 1.82, marginBottom: 20 }}>
+                You know exactly what you want to build and who it&apos;s for. But the moment you
+                think about servers, databases, deployment pipelines, SEO — the whole thing stalls.
+              </p>
+              <p style={{ fontSize: 15, color: "var(--mid)", lineHeight: 1.82 }}>
+                vibn exists to remove all of that. Not abstract it —{" "}
+                <em className="f" style={{ fontStyle: "italic" }}>
+                  remove it entirely.
+                </em>
+              </p>
+            </div>
+            <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
+              {[
+                {
+                  t: `No more "I need to hire a developer first"`,
+                  d: "vibn is your developer. Start building the moment you have an idea.",
+                },
+                {
+                  t: "No more staring at a blank marketing calendar",
+                  d: "AI generates and publishes your content every single week.",
+                },
+                {
+                  t: `No more "I'll launch when it's ready"`,
+                  d: "Most founders ship their first version in under 72 hours.",
+                },
+              ].map((row) => (
+                <div key={row.t} className="empathy-card">
+                  <div
+                    style={{
+                      width: 20,
+                      height: 20,
+                      borderRadius: "50%",
+                      border: "1.5px solid rgba(99,102,241,0.4)",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      flexShrink: 0,
+                      marginTop: 2,
+                    }}
+                  >
+                    <div
+                      style={{
+                        width: 7,
+                        height: 7,
+                        borderRadius: "50%",
+                        background: "#6366F1",
+                      }}
+                    />
+                  </div>
+                  <div>
+                    <div className="f" style={{ fontSize: 14, fontWeight: 600, color: "#1A1A1A", marginBottom: 4 }}>
+                      {row.t}
+                    </div>
+                    <div style={{ fontSize: 13, color: "var(--mid)", lineHeight: 1.7 }}>{row.d}</div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section id="how-it-works" className="how-section" style={{ maxWidth: 980, margin: "0 auto", padding: "84px 52px" }}>
+        <div
+          style={{
+            fontSize: 11,
+            fontWeight: 600,
+            letterSpacing: "0.13em",
+            textTransform: "uppercase",
+            color: "var(--muted)",
+            marginBottom: 16,
+          }}
+        >
+          How it works
+        </div>
+        <h2
+          className="f"
+          style={{
+            fontSize: 42,
+            fontWeight: 700,
+            color: "#1A1A1A",
+            letterSpacing: "-0.02em",
+            marginBottom: 54,
+            maxWidth: 480,
+            lineHeight: 1.15,
+          }}
+        >
+          Four phases. One <span className="gradient-text">complete</span> product.
+        </h2>
+        <div className="phase-grid">
+          {[
+            {
+              k: "01 — Discover",
+              t: "Define your idea",
+              p: "Six guided questions turn a rough idea into a full product plan — pages, architecture, revenue model. No jargon.",
+              style: {
+                padding: "40px 44px",
+                background: "var(--white)",
+                borderRight: "1px solid rgba(99,102,241,0.2)",
+                borderBottom: "1px solid rgba(99,102,241,0.2)",
+              } satisfies CSSProperties,
+            },
+            {
+              k: "02 — Design",
+              t: "Choose your style",
+              p: "Pick a visual style and see your exact site and emails live before a single line of code is written.",
+              style: {
+                padding: "40px 44px",
+                background: "var(--white)",
+                borderBottom: "1px solid rgba(99,102,241,0.2)",
+              } satisfies CSSProperties,
+            },
+            {
+              k: "03 — Build",
+              t: "Your app, live",
+              p: "AI writes every line. Auth, database, payments, all pages — deployed and live. Describe changes in plain English.",
+              style: {
+                padding: "40px 44px",
+                background: "var(--white)",
+                borderRight: "1px solid rgba(99,102,241,0.2)",
+              } satisfies CSSProperties,
+            },
+            {
+              k: "04 — Grow",
+              t: "Market & automate",
+              p: "AI generates your blog, emails, and social schedule — publishing on autopilot so you can focus on users.",
+              style: { padding: "40px 44px", background: "var(--white)" } satisfies CSSProperties,
+            },
+          ].map((cell) => (
+            <div key={cell.k} style={cell.style}>
+              <div
+                style={{
+                  fontSize: 11,
+                  fontWeight: 600,
+                  letterSpacing: "0.1em",
+                  textTransform: "uppercase",
+                  color: "rgba(99,102,241,0.6)",
+                  marginBottom: 14,
+                }}
+              >
+                {cell.k}
+              </div>
+              <div className="f" style={{ fontSize: 22, fontWeight: 700, color: "#1A1A1A", marginBottom: 10 }}>
+                {cell.t}
+              </div>
+              <p style={{ fontSize: 13.5, color: "var(--mid)", lineHeight: 1.72 }}>{cell.p}</p>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      <section style={{ background: "var(--white)", borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)" }}>
+        <div className="wyg-grid wyg-section" style={{ maxWidth: 980, margin: "0 auto", padding: "0 52px" }}>
+          <div style={{ padding: "44px 40px 44px 0", borderRight: "1px solid var(--border)" }}>
+            <div style={{ fontSize: 13, fontWeight: 700, color: "#6366F1", marginBottom: 12, textAlign: "center" }}>✦</div>
+            <div className="f" style={{ fontSize: 17, fontWeight: 700, color: "#1A1A1A", marginBottom: 8, textAlign: "center" }}>
+              A live, working product
+            </div>
+            <p style={{ fontSize: 13.5, color: "var(--mid)", lineHeight: 1.7, textAlign: "center" }}>
+              Not a prototype. Real auth, real payments, real database — on your own URL from day one.
+            </p>
+            <p style={{ fontSize: 12, color: "var(--muted)", lineHeight: 1.6, textAlign: "center", marginTop: 10 }}>
+              Runs on your own servers — your data, your infrastructure, no lock-in.
+            </p>
+          </div>
+          <div style={{ padding: "44px 40px", borderRight: "1px solid var(--border)" }}>
+            <div style={{ fontSize: 13, fontWeight: 700, color: "#6366F1", marginBottom: 12, textAlign: "center" }}>✦</div>
+            <div className="f" style={{ fontSize: 17, fontWeight: 700, color: "#1A1A1A", marginBottom: 8, textAlign: "center" }}>
+              A full marketing engine
+            </div>
+            <p style={{ fontSize: 13.5, color: "var(--mid)", lineHeight: 1.7, textAlign: "center" }}>
+              Blog posts, onboarding emails, and social content — written and published automatically every week.
+            </p>
+          </div>
+          <div style={{ padding: "44px 0 44px 40px" }}>
+            <div style={{ fontSize: 13, fontWeight: 700, color: "#6366F1", marginBottom: 12, textAlign: "center" }}>✦</div>
+            <div className="f" style={{ fontSize: 17, fontWeight: 700, color: "#1A1A1A", marginBottom: 8, textAlign: "center" }}>
+              A product that evolves
+            </div>
+            <p style={{ fontSize: 13.5, color: "var(--mid)", lineHeight: 1.7, textAlign: "center" }}>
+              Describe changes in plain English. Vibn handles the code so your product grows as fast as your ideas.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section className="quote-section" style={{ background: "#1A1A1A", padding: "32px 52px 28px" }}>
+        <div style={{ maxWidth: 980, margin: "0 auto" }}>
+          <div className="quote-grid">
+            <div className="quote-side" style={{ display: "flex", gap: 14, opacity: 0.85 }}>
+              <div style={{ width: 2, background: "#6366F1", borderRadius: 2, flexShrink: 0 }} />
+              <div>
+                <p className="f" style={{ fontSize: 12.5, color: "#FFFFFF", lineHeight: 1.65, fontStyle: "italic", marginBottom: 8 }}>
+                  &quot;I had the idea for 2 years. The backend terrified me. vibn shipped it in 4 days and handles all my marketing.&quot;
+                </p>
+                <span style={{ fontSize: 10.5, color: "var(--muted)", fontWeight: 600 }}>— Alex K., founder of Taskly</span>
+              </div>
+            </div>
+            <div style={{ background: "rgba(255,255,255,0.05)", borderRadius: 12, padding: "22px 26px" }}>
+              <div style={{ width: 3, height: 16, background: "#6366F1", borderRadius: 2, marginBottom: 12, opacity: 0.7 }} />
+              <p className="f" style={{ fontSize: 16, color: "#FFFFFF", lineHeight: 1.7, fontStyle: "italic", marginBottom: 12 }}>
+                &quot;I have zero coding experience. Three weeks in, I have 300 paying users. That&apos;s entirely because of vibn.&quot;
+              </p>
+              <span style={{ fontSize: 11, color: "var(--muted)", fontWeight: 600 }}>— Marcus L., founder of Flowmatic</span>
+            </div>
+            <div className="quote-side" style={{ display: "flex", gap: 14, opacity: 0.85 }}>
+              <div style={{ width: 2, background: "#6366F1", borderRadius: 2, flexShrink: 0 }} />
+              <div>
+                <p className="f" style={{ fontSize: 12.5, color: "#FFFFFF", lineHeight: 1.65, fontStyle: "italic", marginBottom: 8 }}>
+                  &quot;The marketing autopilot saved me ten hours a week. My blog runs itself. I just focus on product.&quot;
+                </p>
+                <span style={{ fontSize: 10.5, color: "var(--muted)", fontWeight: 600 }}>— Sara R., founder of Nudge</span>
+              </div>
+            </div>
+          </div>
+          <div style={{ display: "flex", justifyContent: "center", gap: 7 }}>
+            <div style={{ width: 5, height: 5, borderRadius: "50%", background: "rgba(255,255,255,0.3)" }} />
+            <div style={{ width: 16, height: 5, borderRadius: 3, background: "#FFFFFF" }} />
+            <div style={{ width: 5, height: 5, borderRadius: "50%", background: "rgba(255,255,255,0.3)" }} />
+          </div>
+        </div>
+      </section>
+
+      <section style={{ background: "var(--white)", borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)" }}>
+        <div className="stats-grid stats-section" style={{ maxWidth: 980, margin: "0 auto", padding: "0 52px" }}>
+          {[
+            { num: "280+", label: "founders launched", pl: 0, pr: true },
+            { num: "72h", label: "average time to first version", pl: 36, pr: true },
+            { num: "4.9★", label: "average rating", pl: 36, pr: true },
+            { num: "3×", label: "faster than hiring a developer", pl: 36, pr: false },
+          ].map((row) => (
+            <div
+              key={row.label}
+              style={{
+                padding: row.pl ? `40px 0 40px ${row.pl}px` : "40px 0",
+                borderRight: row.pr ? "1px solid var(--border)" : undefined,
+              }}
+            >
+              <div className="f gradient-num" style={{ fontSize: 40, fontWeight: 700, letterSpacing: "-0.03em", marginBottom: 6 }}>
+                {row.num}
+              </div>
+              <div style={{ fontSize: 13, color: "var(--muted)" }}>{row.label}</div>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      <section className="cta-section" style={{ padding: "80px 52px", textAlign: "center" }}>
+        <div
+          className="cta-card"
+          style={{
+            maxWidth: 680,
+            margin: "0 auto",
+            background: "#FFFFFF",
+            borderRadius: 20,
+            padding: "64px 52px",
+            boxShadow: "0 0 0 1px rgba(99,102,241,0.15),0 20px 60px rgba(30,27,75,0.08)",
+          }}
+        >
+          <h2
+            className="f"
+            style={{
+              fontSize: 48,
+              fontWeight: 700,
+              color: "var(--ink)",
+              letterSpacing: "-0.03em",
+              lineHeight: 1.1,
+              marginBottom: 20,
+            }}
+          >
+            Your idea deserves to exist.
+          </h2>
+          <p style={{ fontSize: 16, color: "var(--mid)", lineHeight: 1.75, marginBottom: 38 }}>
+            Thousands of ideas never make it past a spreadsheet. Yours doesn&apos;t have to be one of them.
+          </p>
+          <Link href="/auth">
+            <button type="button" className="btn-ink-lg" style={{ marginBottom: 16 }}>
+              Build my product — free
+            </button>
+          </Link>
+          <div style={{ fontSize: 12.5, color: "var(--muted)" }}>Joins 280+ non-technical founders already live</div>
+        </div>
+      </section>
+    </>
+  );
+}
diff --git a/marketing/components/justine/JustineNav.tsx b/marketing/components/justine/JustineNav.tsx
new file mode 100644
index 0000000..40eef97
--- /dev/null
+++ b/marketing/components/justine/JustineNav.tsx
@@ -0,0 +1,115 @@
+"use client";
+
+import Link from "next/link";
+import { useCallback, useEffect, useState } from "react";
+
+/** Nav from justine/01_homepage.html — classes defined in app/styles/justine/01-homepage.css */
+export function JustineNav() {
+  const [open, setOpen] = useState(false);
+
+  const close = useCallback(() => {
+    setOpen(false);
+    document.body.style.overflow = "";
+  }, []);
+
+  const toggle = useCallback(() => {
+    setOpen((o) => {
+      const next = !o;
+      document.body.style.overflow = next ? "hidden" : "";
+      return next;
+    });
+  }, []);
+
+  useEffect(() => () => {
+    document.body.style.overflow = "";
+  }, []);
+
+  return (
+    <>
+      <nav>
+        <Link href="/" style={{ display: "flex", alignItems: "center", gap: 10, textDecoration: "none" }}>
+          <div
+            className="logo-box"
+            style={{
+              width: 30,
+              height: 30,
+              background: "linear-gradient(135deg,#2E2A5E,#4338CA)",
+              borderRadius: 7,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            <span className="f" style={{ fontSize: 15, fontWeight: 700, color: "#FFFFFF" }}>
+              V
+            </span>
+          </div>
+          <span className="f" style={{ fontSize: 19, fontWeight: 700, color: "var(--ink)", letterSpacing: "-0.02em" }}>
+            vibn
+          </span>
+        </Link>
+
+        <div className="nav-links">
+          <Link href="/#how-it-works" style={{ fontSize: 14, color: "var(--muted)", textDecoration: "none" }}>
+            How it works
+          </Link>
+          <Link href="/pricing" style={{ fontSize: 14, color: "var(--muted)", textDecoration: "none" }}>
+            Pricing
+          </Link>
+          <Link href="/features" style={{ fontSize: 14, color: "var(--muted)", textDecoration: "none" }}>
+            Stories
+          </Link>
+          <span style={{ fontSize: 14, color: "var(--muted)" }}>Blog</span>
+        </div>
+
+        <div className="nav-right-btns" style={{ display: "flex", alignItems: "center", gap: 12 }}>
+          <Link href="/auth" style={{ fontSize: 14, color: "#6366F1", fontWeight: 600, textDecoration: "none" }}>
+            Log in
+          </Link>
+          <Link href="/auth">
+            <button type="button" className="btn-ink">
+              Get started free
+            </button>
+          </Link>
+        </div>
+
+        <button
+          type="button"
+          className={`hamburger ${open ? "open" : ""}`}
+          aria-label={open ? "Close menu" : "Open menu"}
+          aria-expanded={open}
+          onClick={toggle}
+        >
+          <span />
+          <span />
+          <span />
+        </button>
+      </nav>
+
+      <div className={`mobile-menu ${open ? "open" : ""}`}>
+        <Link href="/#how-it-works" onClick={close}>
+          How it works
+        </Link>
+        <Link href="/pricing" onClick={close}>
+          Pricing
+        </Link>
+        <Link href="/features" onClick={close}>
+          Stories
+        </Link>
+        <Link href="#" onClick={(e) => { e.preventDefault(); close(); }}>
+          Blog
+        </Link>
+        <Link href="/auth" style={{ color: "#6366F1", fontWeight: 600 }} onClick={close}>
+          Log in
+        </Link>
+        <div className="mobile-menu-cta">
+          <Link href="/auth" onClick={close} style={{ display: "block", width: "100%" }}>
+            <button type="button" className="btn-ink-lg" style={{ width: "100%" }}>
+              Get started free
+            </button>
+          </Link>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/marketing/components/justine/index.ts b/marketing/components/justine/index.ts
new file mode 100644
index 0000000..1a67480
--- /dev/null
+++ b/marketing/components/justine/index.ts
@@ -0,0 +1,3 @@
+export { JustineNav } from "./JustineNav";
+export { JustineFooter } from "./JustineFooter";
+export { JustineHomePage } from "./JustineHomePage";