"The city, in motion." A multi-screen, front-end-only prototype of a ride-hailing
product. Single index.html, Tailwind via CDN, vanilla JS. No backend — all data is mocked.
The whole app lives in one file as JS-switched views (deep-linkable via URL hash):
| Screen | Hash | What it does |
|---|---|---|
| Landing | / or #screen-home |
Hero + quick-book, stats, how-it-works, ride types, why-Veer, testimonial, app download |
| Booking | #screen-book |
Pickup/destination, recent places, ride-now vs. schedule, "Find rides" |
| Choose a ride | #screen-confirm |
Map + route, ride options (Go / Electric / Comfort / XL) with upfront fares, payment, confirm |
| Tracking | #screen-track |
Live map with moving car, driver card, call/message/share, trip progress, ETA countdown |
Flow: Home → Book → Choose a ride → Tracking → Home. Selecting a ride updates the confirm button; opening tracking starts a 2-minute ETA countdown.
- Name: Veer
- Palette (custom, no default Tailwind blue/indigo):
- Ink
#0B0E14, Surface#131720, Floaty#1A2030 - Signature sunset coral
#FF6A3D(light#FF8A5C, deep#E8501F) - Electric mint
#4FE3A1, Cream#F5F2EC, Muted#99A1B0
- Ink
- Type: Space Grotesk (display) + Inter (body)
- Texture: layered radial gradients + SVG grain; layered, color-tinted shadows
Maps are drawn with CSS gradients + inline SVG (streets, route, pins, animated car) — no external map tiles or API keys.
node serve.mjs # serves project root at http://localhost:3000screenshot.mjs drives the Chrome that ships in this machine's puppeteer cache via
puppeteer-core. Output lands in temporary screenshots/ (auto-incremented).
node screenshot.mjs http://localhost:3000 home # desktop (1440x900)
node screenshot.mjs "http://localhost:3000/#screen-book" book
node screenshot.mjs http://localhost:3000 home mobile # mobile (390x844)index.html— the entire appserve.mjs— static file server (port 3000)screenshot.mjs— puppeteer-core screenshot helperCLAUDE.md— front-end design rules for this workspace