feat(justine): isolate design system — verbatim CSS + (justine) route group
- 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:
518
marketing/components/justine/JustineHomePage.tsx
Normal file
518
marketing/components/justine/JustineHomePage.tsx
Normal 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,
|
||||
}}
|
||||
>
|
||||
"I want to build a booking tool for independent personal trainers."
|
||||
</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" }}>
|
||||
⬤ 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)" }}>
|
||||
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'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'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 }}>
|
||||
"I had the idea for 2 years. The backend terrified me. vibn shipped it in 4 days and handles all my marketing."
|
||||
</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 }}>
|
||||
"I have zero coding experience. Three weeks in, I have 300 paying users. That's entirely because of vibn."
|
||||
</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 }}>
|
||||
"The marketing autopilot saved me ten hours a week. My blog runs itself. I just focus on product."
|
||||
</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'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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user