Hero Section with Animated Text This component provides a full hero section layout. It features a title, an animated subtitle that cycles through a list of phrases with a typewriter effect, a descriptive paragraph, an information badge, a primary call-to-action button, and a social proof element with stacked avatars.
// demo.tsx
import { HeroSection } from "@/components/ui/hero-4"; // Adjust the import path as needed
// Demo data for avatars
const avatarData = [
{
src: "https://cdn.21st.dev/assets/mirror/f0/f02fed36023656a5b5df6f247c83c96c53bfa9db5b98085cdee93ffc938a5f37.jpg",
alt: "User 1",
fallback: "U1",
},
{
src: "https://cdn.21st.dev/assets/mirror/5b/5b5b2f3487692d40f629010ea6448d150907f780d8c262c4ca194b7386115c2d.jpg",
alt: "User 2",
fallback: "U2",
},
{
src: "https://cdn.21st.dev/assets/mirror/10/10e2bfa5446e5c116e269b649b5f5e0106d96643f0a903048f3a056e40c35cd8.jpg",
alt: "User 3",
fallback: "U3",
},
];
const HeroSectionDemo = () => {
return (
<div className="w-full bg-background">
<HeroSection
title={<>How to make money <br/></>}
animatedTexts={[
"in digital marketing?",
"with content creation?",
"through e-commerce",
"by mastering SEO",
]}
subtitle="Achieve your goals and learn high-income skills with Coursiv"
infoBadgeText="Annual income of Social Media Marketer: $70,000*"
ctaButtonText="Get started"
socialProofText="More than 100,000+ people joined"
avatars={avatarData}
/>
</div>
);
};
export default HeroSectionDemo;