mawkone
99deb546c8
Theia rip-out (parent):
- Remove theia submodule entry (the local fork, Gitea repo, Coolify app,
Cloud Run services, and Artifact Registry image are all gone)
- Drop README.md + INFRASTRUCTURE.md (obsolete "Project OS" snapshots
that also leaked API tokens) and setup.sh (Theia clone bootstrap)
- Delete UI-DESIGN-GUIDE.md, BACKEND_AGENTS_PLAN.md, VIBN_BUILD_PLAN.md,
VISUAL_EDITOR_PLAN.md, core-packages.md, ai-packages.md, tools-list.md
(all 100% Theia-specific or superseded)
- Surgical scrubs of remaining Theia mentions in
AGENT_EXECUTION_ARCHITECTURE.md and TURBOREPO_MIGRATION_PLAN.md
Submodule bumps:
- vibn-agent-runner: Theia rip-out + MCP refactor (api/wrapper/server
pattern across shell/file/git/memory/prd/search/agent/gitea/coolify)
- vibn-frontend: Theia rip-out + P5.1 attach E2E + Justine UI WIP
Retire platform/ scaffold:
- Remove platform/backend/ (control-plane, executors, mcp-adapter),
platform/client-ide/ (gcp-productos extension), platform/contracts/,
platform/infra/terraform/, platform/scripts/templates/turborepo/
(replaced by vibn-agent-runner + vibn-frontend + Coolify direct)
- Drop architecture.md, technical_spec.md, vision-ext.md,
"1.Generate Control Plane API scaffold.md" (same era)
Docs / planning snapshots (new):
- AI_CAPABILITIES.md, AI_CAPABILITIES_ROADMAP.md
- AGENT_TELEMETRY_STREAMING_PROJECT.md
- VIBN_PRD.md, product-idea-a.md
Design assets (new):
- branding/{coolify,gitea,ux-testing}/ static brand collateral
- justine/ HTML mockups for the new onboarding/build flows
- preview-assist-ui/ Vite scratch app
- master-ai.code-workspace
Infra helpers (new):
- setup-coolify-montreal.sh provisioner
- gitea-docker-compose.yml
- vibn-coolify-schema.sql for the Coolify Postgres extensions
- prd-agent-prompt.pdf, prompt, root.txt, remixed-9edec9e9.tsx scratch
- flatten.sh helper
.gitignore: ignore **/node_modules, **/.next, **/.turbo, **/coverage
Made-with: Cursor
336 lines
26 KiB
HTML
336 lines
26 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="icon" href="favicon_clean.ico">
|
||
<title>vibn — Homepage</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||
<style>
|
||
*{box-sizing:border-box;margin:0;padding:0;}
|
||
:root{--ink:#1A1A1A;--ink2:#2c2c2a;--ink3:#444441;--mid:#6B7280;--muted:#9CA3AF;--stone:#b4b2a9;--parch:#d3d1c7;--cream:#f1efe8;--paper:#f7f4ee;--white:#FFFFFF;--border:#E5E7EB;--serif:'Plus Jakarta Sans',sans-serif;--sans:'Plus Jakarta Sans',sans-serif;}
|
||
body{font-family:var(--sans);background:linear-gradient(to bottom,#FAFAFE,#F0EEFF);min-height:100vh;color:var(--ink);}
|
||
.f{font-family:var(--serif);}
|
||
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;}
|
||
.nav-links{display:flex;gap:32px;align-items:center;}
|
||
.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;}
|
||
.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);}
|
||
.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;}
|
||
.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);}
|
||
.gradient-em{background:linear-gradient(to right,#6366F1,#8B5CF6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-style:italic;}
|
||
.gradient-text{background:linear-gradient(to right,#6366F1,#8B5CF6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
|
||
.gradient-num{background:linear-gradient(135deg,#2E2A5E,#4338CA);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
|
||
.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;}
|
||
.empathy-card:hover{border-color:#6366F1;background:#FAFAFF;}
|
||
|
||
/* ── Layout grid classes (for responsive overrides) ── */
|
||
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:center;}
|
||
.empathy-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;}
|
||
.phase-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid rgba(99,102,241,0.2);border-radius:14px;overflow:hidden;}
|
||
.wyg-grid{display:grid;grid-template-columns:1fr 1fr 1fr;}
|
||
.quote-grid{display:grid;grid-template-columns:1fr 1.6fr 1fr;gap:28px;align-items:center;margin-bottom:20px;}
|
||
.stats-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;}
|
||
.footer-tagline{display:block;font-size:12px;color:var(--muted);margin-top:4px;font-family:var(--sans);}
|
||
|
||
/* ── Hamburger ── */
|
||
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;}
|
||
.hamburger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform 0.25s ease,opacity 0.25s ease;}
|
||
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
|
||
.hamburger.open span:nth-child(2){opacity:0;}
|
||
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
|
||
|
||
/* Mobile drawer */
|
||
.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);}
|
||
.mobile-menu.open{display:flex;}
|
||
.mobile-menu a{font-size:15px;color:var(--ink);text-decoration:none;padding:13px 0;border-bottom:1px solid var(--border);font-weight:500;}
|
||
.mobile-menu a:last-of-type{border-bottom:none;}
|
||
.mobile-menu .mobile-menu-cta{margin-top:18px;}
|
||
|
||
/* ── Mobile ── */
|
||
@media (max-width:768px){
|
||
nav{padding:0 20px;}
|
||
.nav-links{display:none;}
|
||
.hamburger{display:flex;}
|
||
.nav-right-btns{display:none;}
|
||
.hero-grid{grid-template-columns:1fr;gap:44px;}
|
||
.hero-section{padding:52px 24px 48px !important;}
|
||
.empathy-section{padding:56px 24px !important;}
|
||
.empathy-grid{grid-template-columns:1fr;gap:36px;}
|
||
.how-section{padding:64px 24px !important;}
|
||
.phase-grid{grid-template-columns:1fr;}
|
||
.phase-grid > div{border-right:none !important;padding:28px 24px !important;}
|
||
.wyg-grid{grid-template-columns:1fr;}
|
||
.wyg-grid > div{border-right:none !important;border-bottom:1px solid var(--border);padding:32px 24px !important;}
|
||
.wyg-grid > div:last-child{border-bottom:none;}
|
||
.wyg-section{padding:0 24px !important;}
|
||
.quote-grid{grid-template-columns:1fr;}
|
||
.quote-side{display:none !important;}
|
||
.quote-section{padding:32px 24px 28px !important;}
|
||
.stats-grid{grid-template-columns:1fr 1fr;}
|
||
.stats-grid > div{padding:28px 16px !important;}
|
||
.stats-grid > div:nth-child(odd){padding-left:0 !important;}
|
||
.stats-grid > div:nth-child(3),.stats-grid > div:nth-child(4){border-top:1px solid var(--border);}
|
||
.stats-grid > div:nth-child(even){border-right:none !important;}
|
||
.stats-section{padding:0 24px !important;}
|
||
.cta-section{padding:56px 20px !important;}
|
||
.cta-card{padding:44px 28px !important;}
|
||
.hero-h1{font-size:40px !important;line-height:1.1 !important;}
|
||
.hero-sub{font-size:15px !important;}
|
||
footer{flex-direction:column;gap:20px;text-align:center;padding:32px 24px !important;}
|
||
.footer-links{flex-wrap:wrap;justify-content:center;}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<nav>
|
||
<div style="display:flex;align-items:center;gap:10px;">
|
||
<div class="logo-box" style="width:30px;height:30px;background:linear-gradient(135deg,#2E2A5E,#4338CA);border-radius:7px;display:flex;align-items:center;justify-content:center;"><span class="f" style="font-size:15px;font-weight:700;color:#FFFFFF;">V</span></div>
|
||
<span class="f" style="font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-0.02em;">vibn</span>
|
||
</div>
|
||
<div class="nav-links">
|
||
<a href="#how-it-works" style="font-size:14px;color:var(--muted);text-decoration:none;">How it works</a>
|
||
<a href="#" style="font-size:14px;color:var(--muted);text-decoration:none;">Pricing</a>
|
||
<a href="#" style="font-size:14px;color:var(--muted);text-decoration:none;">Stories</a>
|
||
<a href="#" style="font-size:14px;color:var(--muted);text-decoration:none;">Blog</a>
|
||
</div>
|
||
<div class="nav-right-btns" style="display:flex;align-items:center;gap:12px;">
|
||
<a href="03_dashboard.html" style="font-size:14px;color:#6366F1;font-weight:600;text-decoration:none;">Log in</a>
|
||
<a href="02_signup.html"><button class="btn-ink">Get started free</button></a>
|
||
</div>
|
||
<button class="hamburger" id="hamburger" aria-label="Open menu" onclick="toggleMenu()">
|
||
<span></span><span></span><span></span>
|
||
</button>
|
||
</nav>
|
||
|
||
<!-- Mobile drawer -->
|
||
<div class="mobile-menu" id="mobile-menu">
|
||
<a href="#how-it-works" onclick="closeMenu()">How it works</a>
|
||
<a href="#" onclick="closeMenu()">Pricing</a>
|
||
<a href="#" onclick="closeMenu()">Stories</a>
|
||
<a href="#" onclick="closeMenu()">Blog</a>
|
||
<a href="03_dashboard.html" style="color:#6366F1;font-weight:600;" onclick="closeMenu()">Log in</a>
|
||
<div class="mobile-menu-cta">
|
||
<a href="02_signup.html"><button class="btn-ink-lg" style="width:100%;">Get started free</button></a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- HERO -->
|
||
<section class="hero-section" style="max-width:980px;margin:0 auto;padding:88px 52px 72px;">
|
||
<div class="hero-grid">
|
||
|
||
<!-- Left: copy -->
|
||
<div>
|
||
<div style="font-size:11px;font-weight:600;letter-spacing:0.13em;text-transform:uppercase;color:var(--muted);margin-bottom:22px;">For non-technical founders</div>
|
||
<h1 class="f hero-h1" style="font-size:58px;font-weight:700;color:var(--ink);letter-spacing:-0.03em;line-height:1.06;margin-bottom:28px;">
|
||
You have the idea.<br>We handle<br><em class="gradient-em">everything else.</em>
|
||
</h1>
|
||
<p class="hero-sub" style="font-size:17px;color:var(--mid);line-height: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>
|
||
|
||
<!-- Right: product moment card -->
|
||
<div style="flex-shrink:0;">
|
||
<div style="background:var(--white);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 20px 60px rgba(30,27,75,0.05);">
|
||
|
||
<!-- Input area -->
|
||
<div style="padding:24px 26px 20px;background:#FCFCFF;border-bottom:1px solid var(--border);">
|
||
<div style="font-size:10px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;">Your idea</div>
|
||
<p class="f" style="font-size:15px;font-style:italic;color:var(--ink);line-height:1.65;margin-bottom:14px;">"I want to build a booking tool for independent personal trainers."</p>
|
||
<div style="display:flex;justify-content:flex-end;">
|
||
<span style="font-size:11px;color:var(--muted);background:var(--white);border:1px solid var(--border);border-radius:5px;padding:3px 9px;letter-spacing:0.04em;">↵ Enter</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Output area -->
|
||
<div style="padding:20px 26px 24px;background:var(--white);">
|
||
<div style="font-size:10px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;">vibn generated</div>
|
||
<div style="display:flex;flex-direction:column;gap:0;">
|
||
<div style="display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--border);">
|
||
<span style="font-size:12px;color:var(--muted);font-weight:500;">Pages</span>
|
||
<span style="font-size:13px;color:var(--ink);font-weight:600;">Landing, Dashboard, Booking, Payments</span>
|
||
</div>
|
||
<div style="display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--border);">
|
||
<span style="font-size:12px;color:var(--muted);font-weight:500;">Stack</span>
|
||
<span style="font-size:13px;color:var(--ink);font-weight:600;">Auth, database, payments — handled</span>
|
||
</div>
|
||
<div style="display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--border);">
|
||
<span style="font-size:12px;color:var(--muted);font-weight:500;">Revenue</span>
|
||
<span style="font-size:13px;color:var(--ink);font-weight:600;">Subscription · $29 / mo</span>
|
||
</div>
|
||
<div style="display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;">
|
||
<span style="font-size:12px;color:var(--muted);font-weight:500;">Status</span>
|
||
<span style="font-size:13px;font-weight:600;color:#6366F1;">⬤ Ready to build</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- CTA row -->
|
||
<div style="display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;margin-top:52px;">
|
||
<a href="02_signup.html"><button class="btn-ink-lg">Start free — no code needed</button></a>
|
||
<div><span style="font-size:13.5px;color:#818CF8;">★★★★★</span><span style="font-size:13.5px;color:var(--stone);"> 280 founders launched</span></div>
|
||
<p style="font-size:12px;color:#9CA3AF;">No credit card required · Free forever plan</p>
|
||
<a href="#how-it-works" style="font-size:13.5px;color:#6366F1;text-decoration:none;font-weight:500;margin-top:4px;">See how it works →</a>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<!-- EMPATHY -->
|
||
<section class="empathy-section" style="border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:80px 52px;">
|
||
<div style="max-width:980px;margin:0 auto;">
|
||
<div class="empathy-grid">
|
||
<div>
|
||
<div style="font-size:11px;font-weight:600;letter-spacing:0.13em;text-transform:uppercase;color:var(--muted);margin-bottom:18px;">Sound familiar?</div>
|
||
<h2 class="f" style="font-size:36px;font-weight:700;color:#1A1A1A;line-height:1.18;margin-bottom:24px;letter-spacing:-0.02em;">The idea is the hard part. <span class="gradient-text">Everything else shouldn't be.</span></h2>
|
||
<p style="font-size:15px;color:var(--mid);line-height:1.82;margin-bottom:20px;">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="font-size:15px;color:var(--mid);line-height:1.82;">vibn exists to remove all of that. Not abstract it — <em class="f" style="font-style:italic;">remove it entirely.</em></p>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;gap:14px;">
|
||
<div class="empathy-card"><div style="width:20px;height:20px;border-radius:50%;border:1.5px solid rgba(99,102,241,0.4);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;"><div style="width:7px;height:7px;border-radius:50%;background:#6366F1;"></div></div><div><div class="f" style="font-size:14px;font-weight:600;color:#1A1A1A;margin-bottom:4px;">No more "I need to hire a developer first"</div><div style="font-size:13px;color:var(--mid);line-height:1.7;">vibn is your developer. Start building the moment you have an idea.</div></div></div>
|
||
<div class="empathy-card"><div style="width:20px;height:20px;border-radius:50%;border:1.5px solid rgba(99,102,241,0.4);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;"><div style="width:7px;height:7px;border-radius:50%;background:#6366F1;"></div></div><div><div class="f" style="font-size:14px;font-weight:600;color:#1A1A1A;margin-bottom:4px;">No more staring at a blank marketing calendar</div><div style="font-size:13px;color:var(--mid);line-height:1.7;">AI generates and publishes your content every single week.</div></div></div>
|
||
<div class="empathy-card"><div style="width:20px;height:20px;border-radius:50%;border:1.5px solid rgba(99,102,241,0.4);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;"><div style="width:7px;height:7px;border-radius:50%;background:#6366F1;"></div></div><div><div class="f" style="font-size:14px;font-weight:600;color:#1A1A1A;margin-bottom:4px;">No more "I'll launch when it's ready"</div><div style="font-size:13px;color:var(--mid);line-height:1.7;">Most founders ship their first version in under 72 hours.</div></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- HOW IT WORKS -->
|
||
<section id="how-it-works" class="how-section" style="max-width:980px;margin:0 auto;padding:84px 52px;">
|
||
<div style="font-size:11px;font-weight:600;letter-spacing:0.13em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;">How it works</div>
|
||
<h2 class="f" style="font-size:42px;font-weight:700;color:#1A1A1A;letter-spacing:-0.02em;margin-bottom:54px;max-width:480px;line-height:1.15;">Four phases. One <span class="gradient-text">complete</span> product.</h2>
|
||
<div class="phase-grid">
|
||
<div style="padding:40px 44px;background:var(--white);border-right:1px solid rgba(99,102,241,0.2);border-bottom:1px solid rgba(99,102,241,0.2);"><div style="font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:rgba(99,102,241,0.6);margin-bottom:14px;">01 — Discover</div><div class="f" style="font-size:22px;font-weight:700;color:#1A1A1A;margin-bottom:10px;">Define your idea</div><p style="font-size:13.5px;color:var(--mid);line-height:1.72;">Six guided questions turn a rough idea into a full product plan — pages, architecture, revenue model. No jargon.</p></div>
|
||
<div style="padding:40px 44px;background:var(--white);border-bottom:1px solid rgba(99,102,241,0.2);"><div style="font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:rgba(99,102,241,0.6);margin-bottom:14px;">02 — Design</div><div class="f" style="font-size:22px;font-weight:700;color:#1A1A1A;margin-bottom:10px;">Choose your style</div><p style="font-size:13.5px;color:var(--mid);line-height:1.72;">Pick a visual style and see your exact site and emails live before a single line of code is written.</p></div>
|
||
<div style="padding:40px 44px;background:var(--white);border-right:1px solid rgba(99,102,241,0.2);"><div style="font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:rgba(99,102,241,0.6);margin-bottom:14px;">03 — Build</div><div class="f" style="font-size:22px;font-weight:700;color:#1A1A1A;margin-bottom:10px;">Your app, live</div><p style="font-size:13.5px;color:var(--mid);line-height:1.72;">AI writes every line. Auth, database, payments, all pages — deployed and live. Describe changes in plain English.</p></div>
|
||
<div style="padding:40px 44px;background:var(--white);"><div style="font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:rgba(99,102,241,0.6);margin-bottom:14px;">04 — Grow</div><div class="f" style="font-size:22px;font-weight:700;color:#1A1A1A;margin-bottom:10px;">Market & automate</div><p style="font-size:13.5px;color:var(--mid);line-height:1.72;">AI generates your blog, emails, and social schedule — publishing on autopilot so you can focus on users.</p></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- WHAT YOU GET -->
|
||
<section style="background:var(--white);border-top:1px solid var(--border);border-bottom:1px solid var(--border);">
|
||
<div class="wyg-grid wyg-section" style="max-width:980px;margin:0 auto;padding:0 52px;">
|
||
|
||
<div style="padding:44px 40px 44px 0;border-right:1px solid var(--border);">
|
||
<div style="font-size:13px;font-weight:700;color:#6366F1;margin-bottom:12px;text-align:center;">✦</div>
|
||
<div class="f" style="font-size:17px;font-weight:700;color:#1A1A1A;margin-bottom:8px;text-align:center;">A live, working product</div>
|
||
<p style="font-size:13.5px;color:var(--mid);line-height:1.7;text-align:center;">Not a prototype. Real auth, real payments, real database — on your own URL from day one.</p>
|
||
<p style="font-size:12px;color:var(--muted);line-height:1.6;text-align:center;margin-top:10px;">Runs on your own servers — your data, your infrastructure, no lock-in.</p>
|
||
</div>
|
||
|
||
<div style="padding:44px 40px;border-right:1px solid var(--border);">
|
||
<div style="font-size:13px;font-weight:700;color:#6366F1;margin-bottom:12px;text-align:center;">✦</div>
|
||
<div class="f" style="font-size:17px;font-weight:700;color:#1A1A1A;margin-bottom:8px;text-align:center;">A full marketing engine</div>
|
||
<p style="font-size:13.5px;color:var(--mid);line-height:1.7;text-align: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="font-size:13px;font-weight:700;color:#6366F1;margin-bottom:12px;text-align:center;">✦</div>
|
||
<div class="f" style="font-size:17px;font-weight:700;color:#1A1A1A;margin-bottom:8px;text-align:center;">A product that evolves</div>
|
||
<p style="font-size:13.5px;color:var(--mid);line-height:1.7;text-align:center;">Describe changes in plain English. Vibn handles the code so your product grows as fast as your ideas.</p>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- QUOTE BAND -->
|
||
<section class="quote-section" style="background:#1A1A1A;padding:32px 52px 28px;">
|
||
<div style="max-width:980px;margin:0 auto;">
|
||
|
||
<div class="quote-grid">
|
||
|
||
<!-- Left: supporting quote -->
|
||
<div class="quote-side" style="display:flex;gap:14px;opacity:0.85;">
|
||
<div style="width:2px;background:#6366F1;border-radius:2px;flex-shrink:0;"></div>
|
||
<div>
|
||
<p class="f" style="font-size:12.5px;color:#FFFFFF;line-height:1.65;font-style:italic;margin-bottom:8px;">"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="font-size:10.5px;color:var(--muted);font-weight:600;">— Alex K., founder of Taskly</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Center: dominant quote -->
|
||
<div style="background:rgba(255,255,255,0.05);border-radius:12px;padding:22px 26px;">
|
||
<div style="width:3px;height:16px;background:#6366F1;border-radius:2px;margin-bottom:12px;opacity:0.7;"></div>
|
||
<p class="f" style="font-size:16px;color:#FFFFFF;line-height:1.7;font-style:italic;margin-bottom:12px;">"I have zero coding experience. Three weeks in, I have 300 paying users. That's entirely because of vibn."</p>
|
||
<span style="font-size:11px;color:var(--muted);font-weight:600;">— Marcus L., founder of Flowmatic</span>
|
||
</div>
|
||
|
||
<!-- Right: supporting quote -->
|
||
<div class="quote-side" style="display:flex;gap:14px;opacity:0.85;">
|
||
<div style="width:2px;background:#6366F1;border-radius:2px;flex-shrink:0;"></div>
|
||
<div>
|
||
<p class="f" style="font-size:12.5px;color:#FFFFFF;line-height:1.65;font-style:italic;margin-bottom:8px;">"The marketing autopilot saved me ten hours a week. My blog runs itself. I just focus on product."</p>
|
||
<span style="font-size:10.5px;color:var(--muted);font-weight:600;">— Sara R., founder of Nudge</span>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- Pagination dots -->
|
||
<div style="display:flex;justify-content:center;gap:7px;">
|
||
<div style="width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,0.3);"></div>
|
||
<div style="width:16px;height:5px;border-radius:3px;background:#FFFFFF;"></div>
|
||
<div style="width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,0.3);"></div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- STATS -->
|
||
<section style="background:var(--white);border-top:1px solid var(--border);border-bottom:1px solid var(--border);">
|
||
<div class="stats-grid stats-section" style="max-width:980px;margin:0 auto;padding:0 52px;">
|
||
<div style="padding:40px 0;border-right:1px solid var(--border);"><div class="f gradient-num" style="font-size:40px;font-weight:700;letter-spacing:-0.03em;margin-bottom:6px;">280+</div><div style="font-size:13px;color:var(--muted);">founders launched</div></div>
|
||
<div style="padding:40px 0 40px 36px;border-right:1px solid var(--border);"><div class="f gradient-num" style="font-size:40px;font-weight:700;letter-spacing:-0.03em;margin-bottom:6px;">72h</div><div style="font-size:13px;color:var(--muted);">average time to first version</div></div>
|
||
<div style="padding:40px 0 40px 36px;border-right:1px solid var(--border);"><div class="f gradient-num" style="font-size:40px;font-weight:700;letter-spacing:-0.03em;margin-bottom:6px;">4.9★</div><div style="font-size:13px;color:var(--muted);">average rating</div></div>
|
||
<div style="padding:40px 0 40px 36px;"><div class="f gradient-num" style="font-size:40px;font-weight:700;letter-spacing:-0.03em;margin-bottom:6px;">3×</div><div style="font-size:13px;color:var(--muted);">faster than hiring a developer</div></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CTA -->
|
||
<section class="cta-section" style="padding:80px 52px;text-align:center;">
|
||
<div class="cta-card" style="max-width:680px;margin:0 auto;background:#FFFFFF;border-radius:20px;padding:64px 52px;box-shadow:0 0 0 1px rgba(99,102,241,0.15),0 20px 60px rgba(30,27,75,0.08);">
|
||
<h2 class="f" style="font-size:48px;font-weight:700;color:var(--ink);letter-spacing:-0.03em;line-height:1.1;margin-bottom:20px;">Your idea deserves to exist.</h2>
|
||
<p style="font-size:16px;color:var(--mid);line-height:1.75;margin-bottom:38px;">Thousands of ideas never make it past a spreadsheet. Yours doesn't have to be one of them.</p>
|
||
<a href="02_signup.html"><button class="btn-ink-lg" style="margin-bottom:16px;">Build my product — free</button></a>
|
||
<div style="font-size:12.5px;color:var(--muted);">Joins 280+ non-technical founders already live</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FOOTER -->
|
||
<footer style="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;">
|
||
<div>
|
||
<span class="f" style="font-size:16px;font-weight:700;color:var(--ink);">vibn</span>
|
||
<span class="footer-tagline">The fastest way from idea to product.</span>
|
||
</div>
|
||
<div class="footer-links" style="display:flex;gap:28px;">
|
||
<a href="#how-it-works" style="font-size:13px;color:var(--muted);text-decoration:none;">How it works</a>
|
||
<a href="#" style="font-size:13px;color:var(--muted);text-decoration:none;">Pricing</a>
|
||
<a href="#" style="font-size:13px;color:var(--muted);text-decoration:none;">Privacy</a>
|
||
<a href="#" style="font-size:13px;color:var(--muted);text-decoration:none;">Terms</a>
|
||
</div>
|
||
<span style="font-size:12.5px;color:var(--muted);text-align:right;display:block;">© 2026 vibn</span>
|
||
</footer>
|
||
|
||
<script>
|
||
function toggleMenu(){
|
||
var btn=document.getElementById('hamburger');
|
||
var menu=document.getElementById('mobile-menu');
|
||
var open=menu.classList.toggle('open');
|
||
btn.classList.toggle('open',open);
|
||
document.body.style.overflow=open?'hidden':'';
|
||
}
|
||
function closeMenu(){
|
||
document.getElementById('hamburger').classList.remove('open');
|
||
document.getElementById('mobile-menu').classList.remove('open');
|
||
document.body.style.overflow='';
|
||
}
|
||
// Close on anchor click (for same-page links like #how-it-works)
|
||
document.querySelectorAll('.mobile-menu a[href^="#"]').forEach(function(a){
|
||
a.addEventListener('click',closeMenu);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|