From c48372d9bdc71830bdaa1c6b7543cfe163b15ad7 Mon Sep 17 00:00:00 2001
From: mawkone <mark@getacquired.com>
Date: Thu, 14 May 2026 12:31:35 -0700
Subject: [PATCH] feat(marketing): add mission page and top nav link

---
 app/(marketing)/mission/page.tsx        | 145 ++++++++++++++++++++++++
 marketing/components/new-site/index.tsx |  22 ++--
 2 files changed, 159 insertions(+), 8 deletions(-)
 create mode 100644 app/(marketing)/mission/page.tsx

diff --git a/app/(marketing)/mission/page.tsx b/app/(marketing)/mission/page.tsx
new file mode 100644
index 00000000..d50c3d76
--- /dev/null
+++ b/app/(marketing)/mission/page.tsx
@@ -0,0 +1,145 @@
+import { Nav, Footer } from "@/marketing/components/new-site";
+import "../../styles/new-site.css";
+
+export const metadata = {
+  title: "Vibn — Our Mission",
+};
+
+export default function MissionPage() {
+  return (
+    <div className="new-site-wrapper" style={{ display: "flex", flexDirection: "column", minHeight: "100vh" }}>
+      <Nav />
+      <main className="mission-page" style={{ flex: 1 }}>
+        <style>{`
+          .mission-hero {
+            padding-block: clamp(80px, 15vh, 160px) clamp(40px, 8vh, 80px);
+            text-align: center;
+          }
+          .mission-eyebrow {
+            display: inline-flex; align-items: center; gap: 8px;
+            font-family: var(--font-mono);
+            font-size: 13px;
+            color: var(--accent);
+            letter-spacing: 0.14em;
+            text-transform: uppercase;
+            margin-bottom: 24px;
+          }
+          .mission-eyebrow::before {
+            content: ""; width: 6px; height: 6px; border-radius: 50%;
+            background: var(--accent); box-shadow: 0 0 12px var(--accent-glow);
+          }
+          .mission-quote {
+            font-size: clamp(32px, 5vw, 56px);
+            font-weight: 500;
+            letter-spacing: -0.025em;
+            line-height: 1.1;
+            text-wrap: balance;
+            max-width: 960px;
+            margin: 0 auto;
+            color: var(--fg);
+          }
+          .mission-quote .highlight {
+            color: var(--accent);
+            text-shadow: 0 0 30px var(--accent-glow);
+          }
+          .mission-content {
+            max-width: 680px;
+            margin: 0 auto;
+            padding-block: 40px 120px;
+            font-size: 18px;
+            line-height: 1.65;
+            color: var(--fg-dim);
+          }
+          .mission-content h2 {
+            font-size: 28px;
+            color: var(--fg);
+            margin-top: 64px;
+            margin-bottom: 24px;
+            font-weight: 500;
+            letter-spacing: -0.015em;
+          }
+          .mission-content p {
+            margin-bottom: 24px;
+          }
+          .mission-content p:last-child {
+            margin-bottom: 0;
+          }
+          .mission-content strong {
+            color: var(--fg);
+            font-weight: 500;
+          }
+          .mission-signoff {
+            margin-top: 64px;
+            padding-top: 32px;
+            border-top: 1px solid var(--hairline);
+            font-family: var(--font-mono);
+            font-size: 14px;
+            color: var(--fg-mute);
+          }
+          .mission-signoff .author {
+            color: var(--fg);
+            font-weight: 500;
+            font-size: 16px;
+            font-family: var(--font-sans);
+            margin-bottom: 4px;
+          }
+          @media (max-width: 760px) {
+            .mission-quote { font-size: clamp(28px, 8vw, 36px); }
+            .mission-content { font-size: 16px; padding-block: 20px 80px; }
+            .mission-content h2 { font-size: 24px; margin-top: 48px; margin-bottom: 20px; }
+          }
+        `}</style>
+
+        <div className="wrap">
+          <section className="mission-hero">
+            <span className="mission-eyebrow">Our Mission</span>
+            <h1 className="mission-quote">
+              "Look at your subscription costs, ask if they're doing the job, <span className="highlight">if not, get building.</span>"
+            </h1>
+          </section>
+
+          <article className="mission-content">
+            <h2>A letter from the founder</h2>
+            <p>I've spent the last ten years trying to help small businesses grow.</p>
+            <p>Startups. Clubs. Plumbers. Bookkeepers. Family restaurants. Single-location retail. The businesses that make neighborhoods what they are. I've watched they struggle and stagnate.</p>
+            <p>Here's what I learned: the biggest thing holding small businesses back isn't the economy, or competition, or marketing. <strong>It's the owner.</strong> Their hesitations. Their (very reasonable) skepticism of change. Most small business owners are run off their feet — they don't have the time or appetite to adopt new tools, new systems, new anything. And when someone tries to sell them on change, they bristle. They've been burned too many times.</p>
+            <p>But I've also learned something else. <strong>When an owner makes an idea theirs, they adopt it instantly.</strong></p>
+            <p>That's what AI changes. For the first time, software can have a real conversation with a small business owner. It can listen to their problem in their words, propose a solution that feels obvious to them, and build it on the spot. The owner isn't being sold to. They're being heard. And when an idea is theirs, the resistance disappears.</p>
+            <p>That's the unlock. That's why this moment matters.</p>
+
+            <h2>Why small business never got the software it deserved</h2>
+            <p>People love to blame SaaS for squeezing small business. I don't think that's quite right.</p>
+            <p>The real story is structural. For the last two decades, the math of venture capital pushed every promising software company toward enterprise. It wasn't a conspiracy — it was incentives. Small business has high churn. Enterprise has multi-year contracts. LPs expect returns on a fund timeline that small business revenue can't deliver. So founders with great ideas for small business software kept getting nudged upmarket — by their investors, their boards, their boards' investors — until eventually the SMB version of every product was an afterthought, and the real product was built for a 500-person finance team.</p>
+            <p>Small business got the leftovers. Monthly subscriptions for software that almost-but-not-quite solves the problem.</p>
+            <p>Nobody set out to underserve small business. The system just didn't reward serving them well. That gap — the gap between what small businesses actually needed and what got built — is the gap Vibn fills.</p>
+
+            <h2>Why now</h2>
+            <p>There's a wave coming. AI is going to displace a lot of people — software engineers especially, but knowledge workers across the board. The doom narrative says this is the end of opportunity. I think it's the opposite.</p>
+            <p><strong>Small business is where the next generation of careers gets built.</strong></p>
+            <p>Not as a consolation prize. As an upgrade. Owning the bakery instead of writing code for a company that sells software to bakeries. Building custom tools for the plumber down the street instead of building dashboards for a Series C SaaS. Working at a thriving local business that owns its own software, instead of grinding through layoffs at companies that don't know what they want to be.</p>
+            <p>For laid-off engineers, this is a place to land — and not a small one. The same skills that built SaaS for the enterprise can build extraordinary things for small businesses now that the tools exist. For young entrepreneurs, this is the cheapest, fastest, most legitimate path to running a real business that has ever existed. For everyone who wants to help small businesses thrive, this is the moment to do it.</p>
+
+            <h2>What Vibn is, really</h2>
+            <p>Vibn is a vibe coding platform. That's the surface.</p>
+            <p>Underneath, it's a wager: that if you make it possible for a small business to have custom software — built by the owner, or by a local freelancer who hands it over — without subscriptions, without endless tool sprawl, without code, without engineering teams — you start to fix something that's been broken for twenty years.</p>
+            <p>Owners build tools and own them outright. Freelancers build custom solutions for their community and get paid like the craftsmen they are. Subscriptions get cancelled. Margins go back to the businesses earning them. Software stops being something small businesses rent forever and starts being something they own.</p>
+            <p>That's the golden age. Not abstract. Concrete. One business at a time. One tool at a time.</p>
+
+            <h2>What you can do right now</h2>
+            <p><strong>If you own a small business:</strong> pull up your bank statement and look at the subscription line. Look at every tool you pay for every month. Ask one question — is this actually doing the job for my business today? If the answer is no, even partially, you should be building.</p>
+            <p><strong>If you're an engineer who got laid off, or never got the job:</strong> there is real work here. Real businesses that need real tools. You don't need a startup, a co-founder, or a Series A. You need one local small business and a willingness to build them exactly what they need.</p>
+            <p><strong>If you're an entrepreneur looking for a wave to ride:</strong> this is it. The tools are here. The customers are here. The moment is here.</p>
+            <p>We built Vibn for all of you.</p>
+            <p>Let's build the golden age.</p>
+
+            <div className="mission-signoff">
+              <div className="author">Mark Henderson</div>
+              Founder, Vibn
+            </div>
+          </article>
+        </div>
+      </main>
+      <Footer />
+    </div>
+  );
+}
diff --git a/marketing/components/new-site/index.tsx b/marketing/components/new-site/index.tsx
index 1e2125ca..80284bd4 100644
--- a/marketing/components/new-site/index.tsx
+++ b/marketing/components/new-site/index.tsx
@@ -701,7 +701,13 @@ function TweakButton({ label, onClick, secondary = false }) {
 // The "V_" mark — bold filled V + terminal-cursor underscore. Sized via the
 // outer .logo-mark; the SVG fills it. `stroke-linejoin="round"` + a thin
 // stroke on the filled paths softens the corners just enough.
-function LogoMark({ size = 26, blink = true }) {
+export function LogoMark({
+  size = 26,
+  blink = true,
+}: {
+  size?: number;
+  blink?: boolean;
+}) {
   return (
     <span className="logo-mark" style={{ width: size, height: size }}>
       <svg
@@ -728,7 +734,7 @@ function LogoMark({ size = 26, blink = true }) {
   );
 }
 
-function Logo({ size = 26 }) {
+export function Logo({ size = 26 }: { size?: number }) {
   return (
     <span className="logo">
       <LogoMark size={size} />
@@ -2358,7 +2364,7 @@ function Closing() {
   );
 }
 
-function Footer() {
+export function Footer() {
   return (
     <footer className="vibn-footer">
       <style>{`
@@ -2543,16 +2549,16 @@ function App() {
   );
 }
 
-function Nav({ scrolled }) {
+export function Nav({ scrolled = false }: { scrolled?: boolean }) {
   return (
     <nav className={`nav${scrolled ? " scrolled" : ""}`}>
       <div className="wrap nav-inner">
         <Logo />
         <div className="nav-links">
-          <a href="#how">How it works</a>
-          <a href="#">Templates</a>
-          <a href="#">Pricing</a>
-          <a href="#">Stories</a>
+          <a href="/#how">How it works</a>
+          <a href="/mission">Our Mission</a>
+          <a href="/#templates">Templates</a>
+          <a href="/#pricing">Pricing</a>
         </div>
         <div className="nav-cta">
           <a