mark/vibn-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(justine): isolate design system — verbatim CSS + (justine) route group

Browse Source 
- 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
This commit is contained in:
Mark Henderson
2026-04-02 12:05:33 -07:00
parent 74f8dc4282
commit ccc6cc1da5
13 changed files with 1075 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
marketing/components/justine/JustineFooter.tsx Normal file
View File

@@ -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>
);
}

518
marketing/components/justine/JustineHomePage.tsx Normal file
View File

@@ -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>
</>
);
}

115
marketing/components/justine/JustineNav.tsx Normal file
View File

@@ -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>
</>
);
}

3
marketing/components/justine/index.ts Normal file
View File

@@ -0,0 +1,3 @@
export { JustineNav } from "./JustineNav";
export { JustineFooter } from "./JustineFooter";
export { JustineHomePage } from "./JustineHomePage";