Crystalline Healthcare Hero
An elegant frosted-glass hero block designed for healthcare and medical technology landing pages.
Features
- Crystalline aesthetic — Geometric glass shapes with frosted blur effects
- Google Font: Outfit — Modern geometric heading typeface
- Floating stat cards — 4 healthcare metrics with backdrop-blur glass effect
- Dual CTA buttons — Primary filled and secondary outline styles
- Light/dark mode — Pale sky-blue in light, deep slate-blue in dark
- Accessible contrast — All text meets WCAG AA 4.5:1 minimum
- Staggered animations — Progressive reveal on mount
Dependencies
@/components/vue-ui/badge — Shadcn-Vue Badge@/components/vue-ui/button — Shadcn-Vue Button@/components/vue-ui/card — Shadcn-Vue Card, CardContent@/components/vue-ui/separator — Shadcn-Vue Separatorlucide-vue-next — Heart, Shield, Users, Activity icons
Customization
- Colors: Adjust sky/cyan gradient stops to match your brand
- Stats: Replace the 4 metric cards with your own KPIs
- Font: Swap Outfit for another Google Font in the style attribute
