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

meta:
  id: kordant-unified-restructure-06
  feature: kordant-unified-restructure
  priority: P0
  depends_on: [kordant-unified-restructure-02, kordant-unified-restructure-03, kordant-unified-restructure-04, kordant-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 Kordant 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/WhyKordantSection.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. **WhyKordantSection**:
   - 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 Kordant-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.