Kordant/tasks/shieldai-unified-restructure/05-landing-page-hero.md

05. Landing Page — Hero Section with Animated Background

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

objective:

• Build the hero section of the ShieldAI landing page, inspired by Lendair's landing page structure but with ShieldAI-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)
  • ShieldAI 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>ShieldAI — 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 ShieldAI 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).