96 lines
5.2 KiB
Markdown
96 lines
5.2 KiB
Markdown
# 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.
|