rebranding

tasks/kordant-unified-restructure/05-landing-page-hero.md

@@ -0,0 +1,75 @@
+# 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).