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

feat: flatten routes and merge marketing and onboarding directories

Browse Source
This commit is contained in:
mawkone
2026-06-06 18:52:03 -07:00
parent de425667c5
commit fbe991d8e6
25 changed files with 437 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

205
components/marketing/content/homepage.ts Normal file
View File

@@ -0,0 +1,205 @@
/**
* Marketing content for the homepage
* Centralized location for all copy to make updates easier
*/
export const homepage = {
hero: {
title: "AI Coding Tools for Vibe Coders.",
subtitle: "We take you from idea to market and beyond — so you can finally finish what you start and share it with the world.",
cta: {
primary: "Start Your Idea",
secondary: "See How It Works",
},
},
emotionalHook: {
title: "You've been waiting",
subtitle: "Now you can",
description: "You've had the ideas. You've started the projects. But somewhere between no-code limitations and overwhelming dev tools, momentum stalls. Not anymore.",
},
whoItsFor: {
title: "Creators stuck between ideas and code",
subtitle: "You're a Vibe Coder",
description: "You're ambitious. You have vision. You know what you want to build. But you're not fluent in code yet, and no-code tools feel limiting. You're stuck in the gap — and we built Vibn to meet you there.",
traits: [
"You have big ideas but hit walls with no-code tools",
"You want to learn to code, but need to ship while you learn",
"You're tired of starting projects that never launch",
"You need guidance, not just more tutorials",
"You want to build real products, not just prototypes",
],
},
transformation: {
title: "From stalled chaos to unstoppable momentum",
description: "When you join Vibn, something shifts. The overwhelm fades. The path becomes clear. You're not just learning — you're building. You're not just building — you're shipping. And you're not alone.",
outcomes: [
"Clarity on what to build next",
"Confidence in your technical decisions",
"Momentum that carries you forward",
"A product you're proud to share",
],
},
features: {
title: "Everything you need in one calm, guided flow",
description: "Vibn gives you structure without rigidity, guidance without hand-holding, and momentum without overwhelm.",
list: [
{
title: "Project Home",
description: "One central place for your vision, progress, and next steps.",
},
{
title: "Scope & Roadmap",
description: "Define what you're building and break it into achievable milestones.",
},
{
title: "AI Guardrails",
description: "Keep AI coding assistants on track with your project's scope and standards.",
},
{
title: "Build, Don't Babysit",
description: "Track your coding sessions, costs, and progress automatically.",
},
{
title: "Backend & Hosting Simplified",
description: "Deploy with confidence. No DevOps degree required.",
},
{
title: "v0 Integration",
description: "Generate beautiful UI components and iterate visually.",
},
{
title: "Collaboration & Chat",
description: "Get unstuck with AI and human support that understands your project.",
},
{
title: "Launch Suite",
description: "Go from localhost to production with guided deployment.",
},
{
title: "Market & Grow",
description: "Tools to help you share your product and find your first users.",
},
{
title: "Progress & Cost Tracking",
description: "Stay on budget. Stay motivated. See how far you've come.",
},
],
},
howItWorks: {
title: "Plan. Build. Launch. Grow",
description: "Vibn guides you from idea to market, one clear step at a time.",
steps: [
{
number: 1,
title: "Start with your idea",
description: "Tell us what you want to build. We'll help you define scope and create a roadmap that feels achievable.",
},
{
number: 2,
title: "Build with AI assistance",
description: "Use Cursor, ChatGPT, and other AI tools — but with guardrails that keep you on track and on budget.",
},
{
number: 3,
title: "Launch with confidence",
description: "Deploy your product with guided setup for hosting, domains, and everything you need to go live.",
},
{
number: 4,
title: "Grow your product",
description: "Market your launch, gather feedback, and iterate with the same support that got you here.",
},
],
},
pricing: {
title: "Simple, fair, transparent",
description: "Pay for what you use. No surprises. No hidden fees.",
tiers: [
{
name: "Starter",
price: "Free",
description: "For exploring and getting started",
features: [
"1 active project",
"Basic AI tracking",
"Community support",
"7-day history",
],
},
{
name: "Creator",
price: "$29/mo",
description: "For builders shipping real products",
features: [
"5 active projects",
"Full AI tracking & analytics",
"Priority support",
"Unlimited history",
"Deployment guides",
"v0 integration",
],
highlighted: true,
},
{
name: "Studio",
price: "$99/mo",
description: "For teams and agencies",
features: [
"Unlimited projects",
"Team collaboration",
"White-label options",
"Custom integrations",
"Dedicated support",
"SLA guarantee",
],
},
],
},
finalCTA: {
title: "Start your idea — we'll meet you where you are and help you finish what you start.",
cta: {
primary: "Get Started Free",
secondary: "Book a Demo",
},
},
meta: {
title: "VIBN - From Ideas to Market for Vibe Coders",
description: "AI coding tools aren't made for you. We are. Take your product from idea to market with guidance, structure, and momentum.",
},
};
/**
* Future content sections (from PROJECT_INSTRUCTIONS.md)
* TODO: Implement these sections
*/
export const futureContent = {
emotionalHook: {
title: "You've been waiting. Now you can.",
// Short, empathetic copy about frustration and transition
},
whoItsFor: {
title: "Creators stuck between ideas and code",
// Describes Vibe Coders: ambitious, not yet fluent in code
},
transformation: {
title: "From stalled chaos to unstoppable momentum",
// Emotional shift when users join VIBN
},
howItWorks: {
title: "Plan. Build. Launch. Grow.",
// Step-based explanation
},
pricing: {
title: "Simple, fair, transparent",
// Pricing tiers
},
};

1
components/marketing/index.ts Normal file
View File

@@ -0,0 +1 @@
// Public components exports from subdirectories when needed

21
components/marketing/justine/JustineAuthShell.tsx Normal file
View File

@@ -0,0 +1,21 @@
import Link from "next/link";
/** Compact nav from justine/02_signup.html — use inside [data-justine-auth] + 02-signup.css */
export function JustineAuthShell({ children }: { children: React.ReactNode }) {
return (
<>
<nav className="justine-auth-nav" aria-label="Auth">
<Link href="/" className="justine-auth-nav-brand">
<div className="justine-auth-nav-logo">
<span className="f">V</span>
</div>
<span className="justine-auth-nav-wordmark f">vibn</span>
</Link>
<span className="justine-auth-nav-aside">
New to vibn? <Link href="/">View homepage</Link>
</span>
</nav>
<div className="justine-auth-main">{children}</div>
</>
);
}

32
components/marketing/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
components/marketing/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 (
<div className="justine-home-page">
<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?new=1">
<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?new=1">
<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>
</div>
);
}

115
components/marketing/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="/stories" 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?new=1">
<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="/stories" 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?new=1" onClick={close} style={{ display: "block", width: "100%" }}>
<button type="button" className="btn-ink-lg" style={{ width: "100%" }}>
Get started free
</button>
</Link>
</div>
</div>
</>
);
}

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

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

2776
components/marketing/new-site/index.tsx Normal file
View File

File diff suppressed because it is too large Load Diff