76 lines
4.1 KiB
Markdown
76 lines
4.1 KiB
Markdown
# 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).
|