Aurora SaaS Hero
A premium hero block designed for SaaS marketing pages with a warm aurora gradient palette.
Features
- Aurora gradient — Rose-to-amber gradient text and background radials create a warm, inviting atmosphere
- Eyebrow badge — Sparkles icon badge for product announcements
- Dual CTAs — Gradient primary button and outlined demo button
- Dashboard mockup — Floating browser-chrome card with stat cards and bar chart
- Partner strip — Logo bar for social proof
- Staggered entrance — Vue reactive transitions for smooth content reveal
- Responsive — Mobile-first layout from 375px to 1280px+
- Dark mode — Full dark mode support with adjusted gradient intensities
Dependencies
@/components/vue-ui/badge — Shadcn-Vue Badge@/components/vue-ui/button — Shadcn-Vue Buttonlucide-vue-next — ArrowRight, Sparkles, Play icons
Customization
- Colors: Adjust rose/orange/amber gradient stops in the headline and CTA button
- Dashboard data: Replace stat objects to match your product metrics
- Partner logos: Swap placeholder brand names with your actual partners
