Bamboo Education Hero
A warm, organic hero block designed for education and e-learning platforms.
Features
- Split layout — Hero text with CTA on the left, stats grid on the right
- Animated stat cards — Four key metrics with icons and hover elevation
- Social proof — Avatar stack with star rating and learner count
- Subject pills — Staggered reveal of popular course categories
- Organic SVG curves — Flowing wave background for visual warmth
- Trust badges — Accreditation and award indicators
- Light/dark mode — Full WCAG AA contrast in both modes
Dependencies
lucide-vue-next — BookOpen, GraduationCap, Users, Star, ArrowRight, Play icons@/components/vue-ui/button — Shadcn-Vue Button@/components/vue-ui/badge — Shadcn-Vue Badge@/components/vue-ui/separator — Shadcn-Vue Separator@/components/vue-ui/avatar — Shadcn-Vue Avatar, AvatarFallback
Customization
- Stats: Modify the
stats array for your own KPIs
- Subjects: Change the
pills array for your course categories
- Colors: Swap green tones for your brand palette
- Fonts: Replace Nunito/Merriweather with your typography
