mostly android

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

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