Meridian Analytics

# Meridian — Analytics SaaS Landing Page

## Goal
Build a production-ready analytics saas landing page called "Meridian". Overall vibe: precise, data-literate, quietly confident — think a tool engineers trust. It should look hand-crafted by a senior product designer — not like a generic template.

## Design System
- **Palette**: near-black #0B0D12 base, slate text #E6E9EF, electric indigo #6366F1 accent with a cyan #22D3EE secondary used only in charts
- **Typography**: Geist or Inter; headings tight (-0.03em), tabular numerals for all metrics
- **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** — slim 60px, logo left, product/docs/pricing center, ghost 'Sign in' + solid 'Start free' right; gains blur + border after 24px scroll.
2. **Hero** — left: headline about turning questions into answers, sub, email-capture inline form; right: a realistic product screenshot in a browser chrome frame, floating metric chips (+12.4% WoW) around it.
3. **Logo wall** — 'Trusted by data teams at' + 6 grayscale logos, opacity lifts on hover.
4. **Feature trio** — 3 cards: Instant SQL, Anomaly alerts, Shareable reports; each with a mini animated chart (sparkline draws in on reveal).
5. **Deep-dive split** — alternating image/text rows ×2: query editor screenshot, alerting flow diagram.
6. **Metrics band** — 4 big numbers (queries/day, p95 latency, uptime, teams) counting up on reveal.
7. **Pricing teaser** — 2 cards (Free / Team) + link to full pricing; Team card has animated gradient border.
8. **Footer** — 4 columns + status badge ('All systems operational' green dot).

## Motion
- Hero screenshot tilts 2° on mouse move (max 6px translate), metric chips float on independent 4-6s loops.
- Sparklines draw with stroke-dashoffset over 800ms when scrolled into view.
- Count-up numbers ease out over 1.2s, formatted with tabular nums to avoid jitter.
- 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
- Email form validates inline, success state swaps button text to 'Check your inbox ✓'.
- Add a subtle dot-grid pattern behind the hero, masked radially so it fades toward edges.

## 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.