Obsidian Pricing Grid
A luxury Art Deco-styled pricing section with three comparison tiers.
Features
- Three pricing tiers — Starter, Professional, and Enterprise with feature comparison
- Art Deco aesthetics — Geometric patterns, gold gradients, and elegant serif typography
- Glass-morphism cards — Subtle backdrop blur with border highlights
- Featured tier highlight — Gold glow border and "Most Popular" badge on the middle tier
- Staggered animations — Cards and content reveal sequentially on load
- Responsive — Single column on mobile, three columns on desktop
- Light & dark mode — Full theme support with appropriate contrast
Dependencies
@remixicon/react — Check and star icons
@/components/ui/badge — Tier badges
@/components/ui/button — CTA buttons
@/components/ui/card — Pricing cards
@/components/ui/separator — Visual dividers
Customization
- Adjust pricing data in the
tiers array
- Modify gold accent colors via the gradient stops
- Change fonts by updating the Google Fonts import