Sentinel Security

# Sentinel — Cybersecurity Company Website

## Goal
Build a production-ready cybersecurity company website called "Sentinel". Overall vibe: calm authority under pressure — an ops room at 2am, everything under control. It should look hand-crafted by a senior product designer — not like a generic template.

## Design System
- **Palette**: void #060A0F base, steel #C9D4DF text, guardian green #22C55E for 'secure' states, amber #F59E0B reserved for threat accents
- **Typography**: technical sans (Inter/IBM Plex Sans); mono for all data readouts and IPs
- **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. **Alert bar** — slim top strip: 'SOC status: monitoring 4,218 endpoints' in mono with green pulse dot.
2. **Navbar** — logo with shield mark, Platform/Solutions/Research/Company, 'Get a demo' green-outline button.
3. **Hero** — left copy: headline about seeing threats before they see you, sub, dual CTA; right: animated radar sweep (conic gradient rotating in a ringed circle) with 3-4 blips that ping and fade.
4. **Threat ticker** — horizontal marquee of mono strings: 'Blocked · phishing · 14:02:11 UTC · AS3949…' alternating green/amber markers.
5. **Platform grid** — 4 cards: Detect, Investigate, Respond, Comply — each with a thin-line icon and 'Learn more' arrow that nudges on hover.
6. **How it works** — 3-step horizontal timeline with connecting line that draws on scroll; steps: Ingest, Correlate, Neutralize.
7. **Compliance row** — SOC2 / ISO 27001 / GDPR / HIPAA badge placeholders in muted steel.
8. **Case study teaser** — dark card: customer logo, one bold metric '11 min mean time to respond', link.
9. **Footer** — 4 columns + 'Report a vulnerability' link (important for the audience).

## Motion
- Radar sweep rotates continuously (6s/rev); blips scale in with a ring ripple then decay over 2s at randomized positions/intervals.
- Timeline line draws via scaleX as user scrolls through the section (GSAP ScrollTrigger scrub).
- Ticker pauses on hover; items are real-feeling but fabricated data.
- 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
- All numeric data in tabular mono; timestamps in UTC — the audience notices.
- Add a 'Trust center' link in navbar dropdown — enterprise buyers look for it.

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