# 05. Dedicated /pricing And /features Pages

meta:
  id: landing-pages-and-admin-05
  feature: landing-pages-and-admin
  priority: P1
  depends_on: [landing-pages-and-admin-06]
  tags: [implementation, routes, marketing-pages]

objective:
- Create dedicated `/pricing` and `/features` route pages with full content. Currently the navbar links to these routes but they don't exist. The pricing content exists on `/ads` and features are shown as a section on the landing page. These need to be standalone, polished marketing pages.

deliverables:
- `/web/src/routes/pricing.tsx` — Full pricing page with tier comparison, FAQ, and CTAs
- `/web/src/routes/features.tsx` — Full features page with detailed product showcases
- Pricing data structured as typed arrays (consistent with Lendair inline pattern)
- Feature detail sections for each product (DarkWatch, VoicePrint, SpamShield, HomeTitle, RemoveBrokers, Family Plans)

steps:
- Create `/pricing.tsx`:
  - Hero section: headline, subheadline, value proposition
  - Pricing tiers card grid (3 tiers):
    - Basic ($9/month): Dark web monitoring, email breach alerts, basic scam call blocking, monthly reports
    - Plus ($19/month, "Most Popular"): Everything in Basic + VoicePrint, HomeTitle, RemoveBrokers, Family sharing up to 5
    - Premium ($39/month): Everything in Plus + Unlimited family, 24/7 priority support, real-time alert correlation, advanced analytics, data broker suppression
  - Feature comparison table (checkmarks per tier)
  - FAQ section (accordion-style): billing, cancellation, family sharing, trial period
  - CTA section with "Get Started" button linking to `/signup`
  - Inline data arrays for tiers, features, and FAQ items
- Create `/features.tsx`:
  - Hero section: headline, subheadline
  - Feature detail sections for each product:
    - DarkWatch: dark web monitoring, breach detection, exposure alerts
    - VoicePrint: voice clone detection, deepfake voice identification
    - SpamShield: scam call blocking, spam filtering, call analytics
    - HomeTitle: property fraud alerts, title monitoring, ownership changes
    - RemoveBrokers: data broker removal, opt-out automation, privacy reclamation
    - Family Plans: family sharing, member management, unified dashboard
  - Each feature section includes: icon, title, description, key benefits (bullet list), screenshot/mockup placeholder
  - Alternating left-right layout for visual interest (like Lendair's split panels)
  - Inline data arrays for all feature content
- Ensure both pages use `PageContainer` for consistent layout
- Add proper `<Title>` meta tags for SEO
- Ensure responsive design (mobile, tablet, desktop)
- Link pricing page CTA buttons to `/signup`
- Link features page cards to relevant dashboard routes (e.g., `/darkwatch`, `/voiceprint`)

tests:
- Integration: `/pricing` route loads without errors
- Integration: `/features` route loads without errors
- Integration: All pricing tiers display correctly with correct prices and features
- Integration: All 6 feature sections render with correct content
- Responsive: Pages render correctly at 320px, 768px, 1024px, 1440px
- Navigation: Navbar links to `/pricing` and `/features` work correctly

acceptance_criteria:
- `/pricing` page renders with 3 pricing tiers (Basic $9, Plus $19, Premium $39)
- Plus tier is visually highlighted as "Most Popular"
- Feature comparison table shows checkmarks per tier
- FAQ section has at least 5 questions with accordion toggle
- CTA buttons link to `/signup`
- `/features` page renders with all 6 product sections
- Each feature section has icon, title, description, and bullet-point benefits
- Pages use inline data arrays (not extracted components)
- Responsive layout works across all breakpoints
- Proper meta titles set for SEO
- No console errors or warnings

validation:
- `cd /Users/mike/Code/Kordant/web && pnpm dev` then navigate to `/pricing` and `/features`
- Verify all pricing tiers display correctly with accurate pricing
- Verify feature comparison table renders correctly
- Verify FAQ accordion works (toggle open/close)
- Verify all 6 feature sections render on `/features`
- Click CTA buttons and verify they navigate to correct routes
- Toggle dark/light theme and verify both pages render correctly
- Resize browser to test responsive breakpoints

notes:
- Pricing data currently lives in `/web/src/routes/ads.tsx` — extract and reuse
- Feature data currently lives in `/web/src/components/landing/FeaturesGridSection.tsx` — extract and expand
- Onboarding page (`/onboarding.tsx`) has slightly different pricing ($0 free, $9.99/mo plus, $19.99/mo premium) — use the `/ads` pricing as canonical for the marketing page
- Follow Lendair's inline data pattern for content organization
- Use existing UI components: `Button`, `Card`, `Badge` from `~/components/ui`
- Consider adding smooth scroll animations for feature sections
- Dashboard sidebar links to individual product pages — features page should link to those same routes