Saffron Stats Strip
A bold, punchy fitness statistics component with vivid saffron yellow accents.
Features
- 5 stat cards in a responsive grid: Active Members, Weekly Classes, Calories Burned, Goals Achieved, Retention Rate
- Each card features: icon, large number (Oswald font), label, percentage change badge, and progress bar
- Gradient progress bars with saffron yellow fill
- Hover effects with border highlight and shadow
- Monthly highlights summary strip with 3 key metrics
- Top decorative gradient bar
- Saffron yellow (#F4C430, #FFB300) on off-white (#FAFAFA) light mode
- Deep charcoal (#1A1A2E) dark mode with vivid saffron highlights
- Oswald Google Font for numbers, Barlow for body text
- WCAG AA compliant contrast throughout
Dependencies
lucide-react for icons- Shadcn UI: Badge, Separator
Customization
- Replace stats array with your gym's actual metrics
- Adjust progress percentages to reflect real targets
- Swap icon components to match different fitness categories
- Modify saffron hex values for your brand color
- Connect to real-time data via API for live stats
