Nomad Ledger

# Nomad Ledger — Borderless Banking Landing Page

## Goal
Build a production-ready borderless banking landing page called "Nomad Ledger". Overall vibe: passport-stamp energy — global, quick, trustworthy without being stiff. It should look hand-crafted by a senior product designer — not like a generic template.

## Design System
- **Palette**: midnight #0E1220 base, cloud #EEF1F8 text, aurora gradient (teal #2DD4BF → azure #38BDF8) reserved for the card art and one CTA
- **Typography**: modern grotesque; hero 64-80px with tight tracking, currency amounts in semibold tabular
- **Grid & spacing**: 12-col grid, 8px base unit. Desktop sections 112-128px vertical padding, mobile 56-64px.
- **Corners & borders**: cards 16px radius, buttons 10px, inputs 10px. 1px borders at 8-12% white (dark) or 8% black (light).
- **Shadows**: layered, soft (0 1px 2px + 0 8px 24px), never harsh.

## Page Structure
1. **Navbar** — logo, Personal/Business/Rates, language/currency switcher (globe icon), 'Open account' gradient button.
2. **Hero** — centered headline 'One account. Every border.' + sub; below, a 3D-tilted debit card (pure CSS transform) with aurora gradient face and floating currency chips (€ ¥ £ $) orbiting slowly.
3. **Rate widget** — glass card: 'Live rates' with 4 currency pairs, fake values ticking ±0.0002 every 2s, tiny sparklines.
4. **Feature trio** — Hold 30+ currencies / Spend like a local / Get paid globally — each with a small illustrative UI fragment instead of an icon.
5. **Fee comparison** — horizontal bars comparing a $1,000 transfer: Nomad vs 'Legacy bank' vs 'Other apps'; bars animate width on reveal.
6. **Security strip** — 3 short items with lock/shield line icons + 'Regulated & safeguarded' microcopy.
7. **Testimonial trio** — cards with country flags next to names (their audience is international).
8. **CTA** — gradient band: 'Join 900k borderless people' + button; footer standard.

## Motion
- Card tilts toward cursor (rotateX/Y max 10°) with springy return; currency chips orbit on 10-14s loops.
- Rate values tick with a quick color flash (teal up / soft red down) then settle.
- Comparison bars grow from 0 with 150ms stagger; Nomad bar lands with a tiny overshoot.
- All entrances use IntersectionObserver-triggered reveals; never animate on every scroll tick.
- Respect `prefers-reduced-motion`: disable transforms, keep opacity fades under 150ms.

## Details That Matter
- Currency switcher swaps hero amounts live (e.g. $10 → €9.2) — delightful and on-message.
- Card art: subtle fine-line guilloché-style pattern via SVG for authenticity.

## Tech & Quality Bar
- Next.js App Router + TypeScript + Tailwind CSS. No UI kit — style from scratch.
- Fully responsive at 375 / 768 / 1024 / 1440px. Mobile nav becomes a full-screen overlay with staggered link reveal.
- Semantic landmarks (header/main/section/footer), WCAG AA contrast, focus-visible rings on all interactive elements.
- Optimize LCP: hero media preloaded, fonts `display: swap`, zero layout shift.