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'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>
);
}