Hero

Heroes 295

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Hero to your project and fits it to your theme.

Code

How Hero is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

// 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;