Components
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.
Loading preview...
import {BackgroundVideoHero, TypingAnimation} from "@/components/ui/hero-section-1"
import {Button} from "@/components/ui/button"
export default function CombinedHeroDemo() {
return (
<BackgroundVideoHero
videoSrc="https://thethinkschool.com/wp-content/uploads/2025/06/main-File-1-1.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>
);
}