Kordant/tasks/shieldai-unified-restructure/06-landing-page-features.md

06. Landing Page — Features, How It Works, CTA Sections

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

objective:

• Complete the landing page by adding the remaining content sections: How It Works (step timeline), Platform Features (6-card grid), For Users split panel, Why ShieldAI value props, and a final CTA banner. These should match Lendair's section structure and visual quality.

deliverables:

• web/src/components/landing/HowItWorksSection.tsx — 3-step staggered timeline:
  • Step 1: "Enroll Your Identity" — Sign up and add emails, phones, family members
  • Step 2: "We Monitor 24/7" — Dark web scans, voiceprint detection, spam filtering
  • Step 3: "Get Instant Alerts" — Real-time notifications when threats are detected
  • Alternating left/right layout on desktop, stacked on mobile
  • Numbered circles with .gradient-primary and .shadow-glow-primary
• web/src/components/landing/FeaturesGridSection.tsx — 6 feature cards:
  • DarkWatch: Dark web monitoring
  • VoicePrint: AI voice clone detection
  • SpamShield: Spam & scam call blocking
  • HomeTitle: Property fraud alerts
  • RemoveBrokers: Data broker removal
  • Family Plans: Protect your whole household
  • Each card: icon, title, description, in .gradient-card with border
• web/src/components/landing/ForUsersSection.tsx — Split panel:
  • Left: "For Individuals" — personal protection features
  • Right: "For Families" — family group management, shared alerts
  • Each panel: icon, heading, description, bullet list with checkmarks
• web/src/components/landing/WhyShieldAISection.tsx — 3 value prop cards:
  • "Proactive, Not Reactive" — detect threats before damage
  • "AI-Powered Detection" — ML models trained on real scam data
  • "Privacy First" — encrypted data, no selling, GDPR/CCPA compliant
  • Each with title, description, and bullet points with check icons
• web/src/components/landing/CTABannerSection.tsx — Final call-to-action:
  • Gradient card with headline "Ready to protect your identity?"
  • Subtext and two buttons: "Create Account" + "Sign In"
• Updated web/src/routes/index.tsx composing all sections with clip-path polygon transitions between them.

steps:

1. Create each section component in web/src/components/landing/.
2. HowItWorksSection:
   • Use Lendair's staggered timeline pattern (alternating flex-row/flex-row-reverse)
   • Add dot-grid background class to the section container
   • Use CSS clip-path: polygon(...) for angled section transitions
3. FeaturesGridSection:
   • Use CSS Grid: grid-cols-1 md:grid-cols-2 lg:grid-cols-3
   • Each card uses the Card primitive with an icon slot
   • Icons: use Heroicons-style SVGs inline (shield, microphone, phone, home, user-group, lock)
4. ForUsersSection:
   • Two-column grid with .gradient-card panels
   • Bullet lists use CheckIcon component (green checkmark SVG)
5. WhyShieldAISection:
   • Three cards in a row with checkmark bullet lists
   • Use .backdrop-blur-2xl and angled clip-path like Lendair
6. CTABannerSection:
   • Full-width gradient card inside PageContainer
   • Buttons navigate to /signup and /login
7. Update index.tsx:
   • Import all sections
   • Add <Title> and <Meta> tags for SEO
   • Apply clip-path transitions between sections using inline styles
   • Ensure ColorWaveBackground from task 05 is still present behind hero
8. Add smooth scroll behavior and anchor links (e.g., #features, #how-it-works).

steps:

• Unit: Each section renders its content correctly
• Unit: All <For> loops over feature arrays render expected number of items
• Visual: Verify clip-path transitions render correctly in Chrome, Firefox, Safari
• Visual: Check responsive stacking on mobile viewport
• Accessibility: Verify heading hierarchy (single H1 in hero, H2s in sections)

acceptance_criteria:

• Landing page contains all 5 content sections plus hero from task 05
• Each section has correct heading hierarchy (no skipped levels)
• Clip-path polygon transitions render without gaps or overlaps
• Feature cards display 6 items in responsive grid
• All icons, buttons, and links use theme tokens
• Dark mode renders correctly for all sections
• Anchor links (#features, #how-it-works) scroll smoothly to sections
• No horizontal scroll on mobile viewport (320px–414px)

validation:

• Open http://localhost:3000 and scroll through entire page
• Verify all sections render with correct content and spacing
• Run axe DevTools or Lighthouse accessibility audit; verify no critical issues
• Test on mobile viewport in DevTools

notes:

• Reference Lendair ~/code/Lendair/web/src/routes/index.tsx lines 200–469 for exact section structure, clip-path math, and spacing patterns.
• The --cut CSS variable (clamp(16px, 2.5vw, 40px)) controls the angle of clip-path transitions — reuse this exact pattern.
• Keep all copy ShieldAI-specific; do not leave any Lendair references (e.g., "borrow", "lend", "peer-to-peer").
• Use the IconPath helper pattern from Lendair for consistent SVG sizing and stroke styling.