NightOwl Marketing Website — Build from Scratch

# NightOwl Marketing Website — Build from Scratch

Build a complete, production-quality marketing website for NightOwl from the brief below. You make ALL decisions: tech stack, design, content, structure.

## Product Brief

NightOwl is a sleep tracking platform designed specifically for knowledge workers. It helps people who work demanding cognitive jobs understand how their sleep patterns affect their productivity, focus, and decision-making quality.

### Target audience

- Software engineers, data scientists, researchers, writers, and other knowledge workers
- Ages 25-45, tech-savvy but not necessarily health-tech users
- People who suspect their sleep affects their work but lack data to prove it
- Remote workers with irregular schedules

### Core value proposition

"Sleep smarter, think sharper." NightOwl connects sleep quality to work performance, giving knowledge workers actionable insights — not just sleep scores.

### Key features (for website content)

1. **Smart Sleep Tracking** — Passive tracking via phone/wearable, no manual logging
2. **Cognitive Performance Correlation** — Links sleep data to focus time, code quality, writing output
3. **Team Insights** (for managers) — Anonymous aggregate sleep health for distributed teams
4. **Personalized Recommendations** — AI-driven suggestions based on your chronotype and work schedule
5. **Integration Hub** — Connects with GitHub, Linear, Notion, Google Calendar, Slack

### Brand personality

- Intelligent but approachable
- Data-driven but not clinical
- Modern and minimal
- Dark-mode-first aesthetic (fitting for a sleep product)
- Trustworthy with personal health data

## Requirements

1. Build a complete, production-quality marketing website
2. Include all standard sections: hero, features overview, how-it-works, social proof/testimonials, pricing tiers, integrations showcase, FAQ, footer with links
3. Must be responsive, accessible (WCAG 2.1 AA), and performant
4. Must pass `npm run build` and `npx eslint . --max-warnings 0`
5. Use a real framework and project structure (not a single HTML file)
6. Dark-mode-first design with a premium, trustworthy feel
7. Write real, compelling copy — not lorem ipsum
8. Include proper SEO (meta tags, semantic HTML, heading hierarchy)
9. Create a design system with consistent tokens (colors, typography, spacing)
10. Make all interactive elements keyboard-accessible with proper ARIA attributes

## What is NOT specified (intentionally)

- Technology stack (framework, CSS approach, hosting)
- Visual design (colors, typography, layout)
- Number of pages vs single-page
- Animation/interaction approach

These decisions should emerge from the design and development process. Build everything from scratch — make it production-ready.