feat: flatten routes and merge marketing and onboarding directories

design-templates/VIBN (2)/mission.jsx

@@ -0,0 +1,107 @@
+// Mission whisper — three sentences, one CTA. Sits between Audience and
+// Closing. Intentionally small, intentionally separate from the product pitch.
+
+function Mission() {
+  return (
+    <section className="section mission">
+      <style>{`
+        .mission {
+          padding-block: clamp(70px, 10vh, 120px);
+          position: relative;
+        }
+        .mission-card {
+          position: relative;
+          max-width: 820px; margin: 0 auto;
+          padding: clamp(40px, 6vw, 64px) clamp(28px, 5vw, 56px);
+          border-radius: 24px;
+          background:
+            radial-gradient(ellipse 80% 60% at 50% 0%, oklch(0.74 0.175 35 / 0.10), transparent 70%),
+            linear-gradient(180deg, oklch(0.19 0.009 60 / 0.65), oklch(0.16 0.008 60 / 0.5));
+          border: 1px solid var(--hairline);
+          overflow: hidden;
+          text-align: center;
+        }
+        .mission-card::before {
+          content: "";
+          position: absolute; top: 0; left: 0; right: 0; height: 1px;
+          background: linear-gradient(90deg, transparent, var(--accent), transparent);
+          opacity: .7;
+        }
+        .mission-eye {
+          display: inline-flex; align-items: center; gap: 10px;
+          font-family: var(--font-mono);
+          font-size: 11px; letter-spacing: 0.16em;
+          text-transform: uppercase;
+          color: var(--accent);
+        }
+        .mission-eye::before, .mission-eye::after {
+          content: ""; width: 24px; height: 1px;
+          background: oklch(0.74 0.175 35 / 0.4);
+        }
+        .mission-title {
+          margin-top: 18px;
+          font-size: clamp(28px, 3.6vw, 44px);
+          font-weight: 500;
+          letter-spacing: -0.025em;
+          line-height: 1.08;
+          text-wrap: balance;
+        }
+        .mission-title em {
+          font-style: normal;
+          background: linear-gradient(180deg, var(--accent), oklch(0.62 0.18 18));
+          -webkit-background-clip: text; background-clip: text;
+          color: transparent;
+        }
+        .mission-body {
+          margin-top: 22px;
+          font-size: clamp(15px, 1.55vw, 18px);
+          color: var(--fg-dim);
+          line-height: 1.6;
+          max-width: 580px; margin-inline: auto;
+          text-wrap: balance;
+        }
+        .mission-body b {
+          color: var(--fg);
+          font-weight: 500;
+        }
+        .mission-cta {
+          margin-top: 28px;
+          display: inline-flex; align-items: center; gap: 8px;
+          padding: 10px 16px;
+          border-radius: 999px;
+          font-size: 14px;
+          font-weight: 500;
+          color: var(--accent);
+          border: 1px solid oklch(0.74 0.175 35 / 0.4);
+          background: oklch(0.74 0.175 35 / 0.08);
+          transition: background .15s, transform .12s, border-color .15s;
+        }
+        .mission-cta:hover {
+          background: oklch(0.74 0.175 35 / 0.16);
+          border-color: oklch(0.74 0.175 35 / 0.6);
+          transform: translateY(-1px);
+        }
+      `}</style>
+
+      <div className="wrap">
+        <div className="mission-card">
+          <div className="mission-eye">Why Vibn exists</div>
+          <h2 className="mission-title">
+            This is bigger than software.
+            <br/>It's <em>the golden age of small business.</em>
+          </h2>
+          <p className="mission-body">
+            For twenty years, small business got the leftovers — generic tools, monthly rent,
+            software built for someone else. <b>AI changes the math.</b> The custom system a business
+            needs to actually thrive is finally something they can have, own, and afford.
+          </p>
+          <a href="#" className="mission-cta">
+            Read our mission <Arrow size={12} />
+          </a>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+Object.assign(window, { Mission });