Midnight Analytics Comparison
A data-forward pricing comparison block designed for analytics platforms, built on a deep midnight navy palette with teal/cyan accent highlights.
Features
- Three-plan comparison — Starter, Professional, and Enterprise tiers displayed in a clean grid
- Feature checklist — Each plan shows included/excluded features with check/cross icons
- Recommended badge — The middle plan is highlighted with a gradient badge and subtle glow
- Usage limit bars — Animated progress bars show relative event limits per plan
- Hover borders — Cards reveal a gradient border glow on hover for interactivity
- Staggered animations — Cards slide up sequentially on load
- Dot grid background — Subtle cyan-tinted dot pattern adds depth
Dependencies
@/components/ui/badge — Shadcn Badge@/components/ui/button — Shadcn Button@/components/ui/card — Shadcn Card components@/components/ui/separator — Shadcn Separator@remixicon/react — RiCheckLine, RiCloseLine, RiStarFill, RiArrowRightLine
Customization
- Colors: Adjust the cyan/blue gradient stops to match your brand
- Plans: Modify the plans array to change pricing, features, and limits
- Typography: Uses Space Mono for data labels and Manrope for headings
