Crimson Hero Banner
A healthcare-focused hero section with rich crimson (#8B0000) accents and clean, trustworthy design.
Features
- Crimson palette — Deep red (#8B0000) with clean white, warm gradients
- Asymmetric layout — Bold hero text left, floating feature cards right
- Typography — Fraunces for display heading, Source Sans 3 for body
- Floating cards — Staggered feature cards with star ratings and offset positioning
- Provider avatars — Online status indicator with team member circles
- Stats row — Patients served, uptime SLA, response time
- Trust badges — HIPAA, FDA, SOC 2, ISO compliance indicators
- Dark/light modes — Full support with crimson-to-red color adaptation
Dependencies
@/components/vue-ui/button — CTA buttons@/components/vue-ui/badge — Hero badge@/components/vue-ui/card — Floating feature cards@/components/vue-ui/separator — Visual dividerslucide-vue-next — Heart, ArrowRight, ShieldCheck, Users, Activity, Clock, Star, CheckCircle icons
Customization
- Colors: Replace #8B0000 with your brand primary color
- Stats: Edit the
stats array for your metrics
- Features: Modify
floatingFeatures for your product highlights
- Trust logos: Update
trustLogos for your compliance certifications
