rebranding

tasks/kordant-unified-restructure/06-landing-page-features.md

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