87 lines
4.9 KiB
Markdown
87 lines
4.9 KiB
Markdown
# 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
|