Kordant/tasks/landing-pages-and-admin/05-pricing-features-pages.md

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