# 05. Landing Page — Hero Section with Animated Background

meta:
  id: kordant-unified-restructure-05
  feature: kordant-unified-restructure
  priority: P0
  depends_on: [kordant-unified-restructure-02, kordant-unified-restructure-03, kordant-unified-restructure-04]
  tags: [frontend, landing-page, animation, solidjs]

objective:
- Build the hero section of the Kordant landing page, inspired by Lendair's landing page structure but with Kordant-specific content and an animated gradient/mesh background that evokes AI and security.

deliverables:
- `web/src/components/landing/HeroSection.tsx` — Hero component with:
  - Animated background (gradient mesh or wave effect using CSS/Canvas)
  - Kordant logo/icon centered above headline
  - Headline: "AI-Powered Identity Protection for Everyone"
  - Subheadline explaining the value proposition
  - Two CTAs: "Get Started" (primary) and "Learn More" (secondary ghost)
  - Trust indicators: "No credit card required", "Free tier available"
- `web/src/components/landing/ColorWaveBackground.tsx` — Reusable animated background component:
  - Canvas-based or CSS-based flowing gradient mesh
  - Configurable colors (primary brand palette)
  - Respects `prefers-reduced-motion`
  - Performance-optimized (requestAnimationFrame, no layout thrashing)
- `web/src/routes/index.tsx` — Landing page route composing HeroSection + background

steps:
1. Create `web/src/components/landing/` directory.
2. **ColorWaveBackground**:
   - Option A (recommended): Port Lendair's `ColorWaveBackground.tsx` if it exists, or create a CSS-only solution using `@keyframes` on radial gradients.
   - Option B: Use a `<canvas>` with a simple mesh gradient animation.
   - Colors should flow between indigo `#4f46e5`, cyan `#06b6d4`, and deep slate `#0f172a`.
   - Add `prefers-reduced-motion` check that freezes animation.
   - Expose props: `yOffset`, `scale`, `speed` (like Lendair's API).
3. **HeroSection**:
   - Centered text layout inside `PageContainer`
   - Logo: shield SVG with `.gradient-primary` background circle and `.shadow-glow-primary`
   - Headline uses `.text-gradient-primary` for visual impact
   - Subheadline uses `text-text-secondary` with `text-xl`
   - CTA buttons use the `Button` primitive (primary + ghost variants)
   - Small text below buttons for trust signals
   - Add subtle entrance animation (fade-in + translate-y) on mount
4. Compose in `web/src/routes/index.tsx`:
   - Import `ColorWaveBackground`, `HeroSection`, `Title` from meta
   - Set `<Title>Kordant — AI-Powered Identity Protection</Title>`
   - Render background first (absolute or fixed), then HeroSection with `relative z-10`
5. Verify responsive behavior: text scales down on mobile, buttons stack vertically.

steps:
- Unit: HeroSection renders headline and CTAs
- Unit: ColorWaveBackground respects reduced-motion preference
- Visual: Animation runs smoothly at 60fps in Chrome DevTools performance panel
- Accessibility: Verify no seizure-inducing flashes; reduced motion works

acceptance_criteria:
- [ ] Hero section displays Kordant headline, subheadline, and two CTAs
- [ ] Animated background runs smoothly without jank
- [ ] Background respects `prefers-reduced-motion`
- [ ] All text uses theme tokens and shifts correctly in dark mode
- [ ] Responsive: mobile shows stacked layout with readable text
- [ ] CTA buttons are clickable and navigate to correct routes ("/signup", "#features")

validation:
- Open `http://localhost:3000`
- Verify hero renders with animated background
- Toggle dark mode; verify text remains readable against background
- Enable "Reduce motion" in OS settings; verify animation pauses
- Run Lighthouse audit; verify no performance regressions from background animation

notes:
- Reference Lendair's `~/code/Lendair/web/src/routes/index.tsx` hero section for structure and copy patterns.
- The background animation is decorative — it should never interfere with text readability. Use `z-index` and `backdrop-blur` if needed.
- If using Canvas, remember to handle `devicePixelRatio` for crisp rendering on high-DPI screens.
- Keep the animation lightweight; avoid Three.js unless absolutely necessary (it adds significant bundle size).