Components
Loading preview...
Hero Section Component This component creates a dynamic and engaging hero section, perfect for landing pages. It features a two-column layout with animated text, actionable buttons, social proof statistics, and a visually appealing image collage.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/hero-section-9import HeroSection from '@/components/ui/hero-section-9'; // Adjust the import path as needed
import { Users, Briefcase, Link as LinkIcon } from 'lucide-react';
const HeroSectionDemo = () => {
// Sample data to be passed as props
const heroData = {
title: (
<>
A new way to learn <br /> & get knowledge
</>
),
subtitle: 'EduFlex is here for you with various courses & materials from skilled tutors all around the world.',
actions: [
{
text: 'Join the Class',
onClick: () => alert('Join the Class clicked!'),
variant: 'default',
},
{
text: 'Learn more',
onClick: () => alert('Learn More clicked!'),
variant: 'outline',
},
],
stats: [
{
value: '15,2K',
label: 'Active students',
icon: <Users className="h-5 w-5 text-muted-foreground" />,
},
{
value: '4,5K',
label: 'Tutors',
icon: <Briefcase className="h-5 w-5 text-muted-foreground" />,
},
{
value: 'Resources',
label: '',
icon: <LinkIcon className="h-5 w-5 text-muted-foreground" />,
},
],
images: [
'https://images.unsplash.com/photo-1522202176988-66273c2fd55f?q=80&w=2071&auto=format&fit=crop',
'https://images.unsplash.com/photo-1543269865-cbf427effbad?q=80&w=2070&auto=format&fit=crop',
'https://plus.unsplash.com/premium_photo-1663054774427-55adfb2be76f?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8cGVvcGxlfGVufDB8fDB8fHww&auto=format&fit=crop&q=60&w=900?q=80&w=2070&auto=format&fit=crop',
],
};
return (
<div className="w-full bg-background">
<HeroSection
title={heroData.title}
subtitle={heroData.subtitle}
actions={heroData.actions}
stats={heroData.stats}
images={heroData.images}
/>
</div>
);
};
export default HeroSectionDemo;