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:
47
app/(justine)/layout.tsx
Normal file
47
app/(justine)/layout.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
5
app/(justine)/page.tsx
Normal file
5
app/(justine)/page.tsx
Normal file
@@ -0,0 +1,5 @@
|
||||
import { JustineHomePage } from "@/marketing/components/justine/JustineHomePage";
|
||||
|
||||
export default function LandingPage() {
|
||||
return <JustineHomePage />;
|
||||
}
|
||||
@@ -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'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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
355
app/styles/justine/01-homepage.css
Normal file
355
app/styles/justine/01-homepage.css
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
32
marketing/components/justine/JustineFooter.tsx
Normal file
32
marketing/components/justine/JustineFooter.tsx
Normal 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
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
115
marketing/components/justine/JustineNav.tsx
Normal file
115
marketing/components/justine/JustineNav.tsx
Normal 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
3
marketing/components/justine/index.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export { JustineNav } from "./JustineNav";
|
||||
export { JustineFooter } from "./JustineFooter";
|
||||
export { JustineHomePage } from "./JustineHomePage";
|
||||
Reference in New Issue
Block a user