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

0
app/(marketing)/features/page.tsx → app/(justine)/features/page.tsx
View File

47
app/(justine)/layout.tsx Normal file
View 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
View File

@@ -0,0 +1,5 @@
import { JustineHomePage } from "@/marketing/components/justine/JustineHomePage";
export default function LandingPage() {
return <JustineHomePage />;
}

0
app/(marketing)/pricing/page.tsx → app/(justine)/pricing/page.tsx
View File

0
app/(marketing)/privacy/page.tsx → app/(justine)/privacy/page.tsx
View File

0
app/(marketing)/terms/page.tsx → app/(justine)/terms/page.tsx
View File

94
app/(marketing)/layout.tsx
View File

@@ -1,94 +0,0 @@
import { Button } from "@/components/ui/button";
import Link from "next/link";
import type { Metadata } from "next";
import { homepage } from "@/marketing/content/homepage";
import { Footer } from "@/marketing/components";
export const metadata: Metadata = {
title: homepage.meta.title,
description: homepage.meta.description,
openGraph: {
title: homepage.meta.title,
description: homepage.meta.description,
url: "https://www.vibnai.com",
siteName: "VIBN",
type: "website",
},
twitter: {
card: "summary_large_image",
title: homepage.meta.title,
description: homepage.meta.description,
},
};
export default function MarketingLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<div className="flex min-h-screen flex-col">
{/* Navigation */}
<header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
<div className="container flex h-16 items-center">
<div className="flex gap-6 md:gap-10">
<Link href="/" className="flex items-center space-x-2">
<img
src="/vibn-black-circle-logo.png"
alt="Vib'n"
className="h-8 w-8"
/>
<span className="font-serif text-xl font-bold tracking-tight">Vib&apos;n</span>
</Link>
</div>
<div className="flex flex-1 items-center justify-between space-x-2 md:justify-end">
<nav className="flex items-center space-x-6">
<Link
href="/#features"
className="text-sm font-medium transition-colors hover:text-primary"
>
Features
</Link>
<Link
href="/#how-it-works"
className="text-sm font-medium transition-colors hover:text-primary"
>
How It Works
</Link>
<Link
href="/#pricing"
className="text-sm font-medium transition-colors hover:text-primary"
>
Pricing
</Link>
<Link
href="https://github.com/MawkOne/viben"
target="_blank"
rel="noopener noreferrer"
className="text-sm font-medium transition-colors hover:text-primary"
>
GitHub
</Link>
</nav>
<div className="flex items-center space-x-4">
<Link href="/auth">
<Button variant="ghost" size="sm">
Sign In
</Button>
</Link>
<Link href="/auth">
<Button size="sm">Get Started</Button>
</Link>
</div>
</div>
</div>
</header>
{/* Main Content */}
<main className="flex-1 w-full">{children}</main>
<Footer />
</div>
);
}

26
app/(marketing)/page.tsx
View File

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