Components
Loading preview...
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.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/hero-4// demo.tsx
import { HeroSection } from "@/components/ui/hero-4"; // Adjust the import path as needed
// Demo data for avatars
const avatarData = [
{
src: "https://i.pravatar.cc/150?img=1",
alt: "User 1",
fallback: "U1",
},
{
src: "https://i.pravatar.cc/150?img=2",
alt: "User 2",
fallback: "U2",
},
{
src: "https://i.pravatar.cc/150?img=3",
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;