Arctic Comparison Grid
A comprehensive AI model comparison component with an icy arctic aesthetic.
Features
- 3 model cards with name, tagline, pricing, and CTA buttons
- 'Recommended' badge on the highlighted middle column
- 12-row feature comparison with checkmarks (✓), X marks (✗), and text values
- Alternating row backgrounds for readability
- Tooltip-ready help icons on each feature row
- Arctic blue (#E0F7FA, #B2EBF2) accent on recommended column cells
- Dark mode: deep arctic navy (#0A1929) with icy blue accents
- Outfit Google Font for modern geometric typography
- Gradient CTA button on recommended model
- Bottom CTA with links to talk to team or try free
- Responsive grid layout
Dependencies
lucide-react for icons- Shadcn UI: Badge, Button, Card, Separator
Customization
- Replace models array with your product tiers/plans
- Modify features array to match your comparison criteria
- Adjust cyan/sky color values for your brand palette
- Add tooltip functionality using Shadcn Tooltip component
- Connect CTA buttons to your signup/checkout flow
