feat: flatten routes and merge marketing and onboarding directories

2026-06-06 18:52:03 -07:00
parent 47417d13a0
commit 0480b306f1
139 changed files with 36409 additions and 229 deletions
--- a/(2)/vibn-app/README.md
+++ b/(2)/vibn-app/README.md
@@ -0,0 +1,123 @@
+# Vibn — Marketing Site
+
+Production Vite + React 18 + Tailwind CSS implementation of the Vibn marketing
+homepage and beta-invite signup page.
+
+## Stack
+
+- **Vite 6** — dev server, HMR, multi-page build
+- **React 18** — function components + hooks, no router (two static entries)
+- **Tailwind CSS 3** — utility classes + a small `@layer components` block for
+  things that don't compress cleanly to utilities (gradients, pseudo-elements,
+  custom shadows)
+- **No CSS-in-JS, no UI library** — design tokens live as CSS custom properties
+  so a tweak panel or theme switcher can runtime-swap the accent palette
+- **Geist + Geist Mono** — loaded from Google Fonts in each entry HTML
+
+## Getting started
+
+```bash
+npm install
+npm run dev          # http://localhost:5173 (homepage)
+                     # http://localhost:5173/beta.html (signup)
+npm run build        # production build → dist/
+npm run preview      # serve the built bundle
+```
+
+## Project layout
+
+```
+vibn-app/
+├── index.html              ← homepage entry
+├── beta.html               ← beta-signup entry
+├── vite.config.js          ← multi-page input config
+├── tailwind.config.js      ← design tokens + named animations
+├── postcss.config.js
+├── public/
+│   └── logo-black.png      ← favicon (V_ mark on black)
+└── src/
+    ├── main.jsx            ← mounts <App />
+    ├── beta-main.jsx       ← mounts <BetaApp />
+    ├── styles.css          ← Tailwind + tokens + keyframes + .btn / .card / .logo-mark
+    ├── App.jsx             ← homepage composition
+    ├── BetaApp.jsx         ← signup-page composition
+    ├── lib/
+    │   └── primitives.jsx  ← Logo, LogoMark, Arrow, Eyebrow, Glow, TrustStrip
+    └── components/
+        ├── Nav.jsx
+        ├── Hero.jsx                ← Reddit-quote / promise variants + prompt input
+        ├── Wall.jsx                ← faux chat-window "homework wall" scene
+        ├── CrossedOut.jsx          ← animated strike-through term wall
+        ├── Journey.jsx             ← 4-step path + "where others stop" marker
+        ├── Audience.jsx            ← 3 audience cards w/ Reddit-style quotes
+        ├── Closing.jsx
+        ├── Footer.jsx
+        ├── LaunchModal.jsx         ← hero prompt-submit modal
+        └── beta/
+            ├── BetaForm.jsx        ← 5-step form
+            ├── Confirmed.jsx       ← submitted state w/ queue card + referral
+            └── Benefits.jsx        ← "what you get inside" trio
+```
+
+## Design tokens
+
+All colors are exposed as CSS custom properties (see `src/styles.css`,
+`:root` block) and aliased in `tailwind.config.js → theme.extend.colors`:
+
+| Tailwind class | CSS var          | Default                          |
+|---|---|---|
+| `bg-bg`         | `--c-bg`         | `oklch(0.155 0.008 60)`          |
+| `bg-bg-1`       | `--c-bg-1`       | `oklch(0.185 0.009 60)`          |
+| `text-fg`       | `--c-fg`         | `oklch(0.97 0.005 80)`           |
+| `text-fg-dim`   | `--c-fg-dim`     | `oklch(0.78 0.006 80)`           |
+| `text-fg-mute`  | `--c-fg-mute`    | `oklch(0.58 0.006 80)`           |
+| `text-fg-faint` | `--c-fg-faint`   | `oklch(0.42 0.006 80)`           |
+| `text-accent`   | `--c-accent`     | `oklch(0.74 0.175 35)` (coral)   |
+| `bg-accent`     | `--c-accent`     | (same)                           |
+| `border-hairline` | `--c-hairline` | `oklch(0.32 0.010 60 / 0.55)`    |
+| `text-ok`       | `--c-ok`         | `oklch(0.78 0.16 155)`           |
+
+To re-theme at runtime, set the variables on `:root` from JS:
+
+```js
+document.documentElement.style.setProperty("--c-accent", "#9ee649");
+document.documentElement.style.setProperty("--c-accent-glow", "#9ee64959");
+document.documentElement.style.setProperty("--c-accent-fg",  "#0f1408");
+```
+
+## Type scale
+
+Fluid `clamp()` sizes are used inline:
+
+- Hero headline: `clamp(44px, 7.4vw, 104px)`
+- Section H2: `clamp(36px, 4.8vw, 64px)`
+- Body / sub: `clamp(16–17px, 1.6–2.2vw, 19–28px)`
+
+Geist is the body face; Geist Mono is reserved for tags, eyebrows, code, and
+"trust strip" details.
+
+## Animations
+
+Keyframes are defined once in `styles.css`; some are also registered as named
+Tailwind utilities (`animate-caret-blink`, `animate-pulse-ok`, etc.) for
+ergonomics. Anything not in the config uses an inline `style={{ animation: ... }}`
+with the keyframe name.
+
+## Notes & next steps
+
+- **No router.** Homepage links to `/beta.html` directly. Drop in
+  `react-router-dom` if you need client-side navigation between more pages.
+- **Form submission is a stub.** `BetaForm` just waits 700 ms and toggles to
+  the confirmed state. Wire to your real endpoint (e.g. `fetch("/api/invite", …)`).
+- **Queue position is deterministic on email.** Replace with the real one from
+  your backend.
+- **The hero "Live from minute one" pill is currently not rendered** in this
+  port (the marketing prototype defaults it off). Re-add by uncommenting the
+  pill in `Hero.jsx` if you want it back.
+- **The Tweaks panel from the prototype is not ported.** Tweaks are a design-time
+  tool; runtime theming is enough via the CSS-var token system.
+
+## Browser support
+
+Uses `oklch()`, `text-wrap: balance`, and `backdrop-filter`. Safari 15.4+,
+Chrome 111+, Firefox 113+.