Vermillion Hero Landing
A bold, maximalist hero section designed for ecommerce storefronts and curated marketplaces.
Features
- Dramatic typography — Fraunces serif display font with large, expressive headline
- Asymmetric layout — Left headline/CTA with right-side decorative product grid
- Floating badge — 'New Season' indicator with sparkle icon
- Trust indicators — Free shipping, returns, secure checkout, same-day dispatch
- Dual CTAs — Primary vermillion button + outline secondary
- Floating stats card — Overlaid card showing item and designer counts
- Full dark mode — Warm cream-to-dark-brown palette transition
Dependencies
@/components/vue-ui/button — CTA buttons@/components/vue-ui/badge — Season badge@/components/vue-ui/separator — Visual dividers@/components/vue-ui/card — Floating stats cardlucide-vue-next — Trust indicator and UI icons
Customization
- Colors: Replace
#E34234 (vermillion) and #FFF8F0 (cream) with your brand palette
- Trust indicators: Edit the
trustIndicators array
- Product grid: Customize
gridColors for different decorative layouts
- Fonts: Fraunces (serif) and Outfit (sans) loaded via Google Fonts
