Hero section

Heroes 5

About

Hero Section – High-impact intro with dynamic motion. Combines animated visuals, bold typography, and clear CTAs to instantly capture attention. Ideal for landing pages, campaigns, or product intros looking to make a strong first impression.

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

Code

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

Usage.tsx

import {BackgroundVideoHero, TypingAnimation} from "@/components/ui/hero-section-1"
import {Button} from "@/components/ui/button"
export default function CombinedHeroDemo() {
  return (
    <BackgroundVideoHero
      videoSrc="https://cdn.21st.dev/assets/mirror/bb/bb0a00d4105f1867b9788c3a47ecc09ccbdb22dae61932b3a09d25d08fb4a15d.mp4"
      posterSrc="http://googleusercontent.com/file_content/0"
    >
      <div className="flex w-full flex-col items-center justify-center z-20 gap-6 text-center">
        <TypingAnimation
          staticText="Think"
          words={["Business", "Smarter", "Different", "Creative"]}
        />
        <p className="max-w-xl text-lg text-white/80 sm:text-xl z-40">
          Inspiring Visionaries, Entrepreneurs and Leaders to redefine India&apos;s
          Next Chapter.
        </p>
        <div className="flex z-40 flex-col gap-4 sm:flex-row">
          <Button size="lg">Explore Courses</Button>
          <Button size="lg" variant="secondary">
            Learn Storytelling
          </Button>
        </div>
      </div>
      <div className="absolute inset-0 w-full h-full bg-gradient-to-b from-black/90 via-black/30 to-black/90 z-10" />
    </BackgroundVideoHero>
  );
}