Video Hero Section

Heroes 1

About

Video Hero Section This is a full-screen hero section component featuring a video background, animated text overlays, and app store links. It's designed to be easily reused by passing different content through props.

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

Code

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

Usage.tsx

// demo.tsx

import { ZomatoHero } from "@/components/ui/video-hero-section"; // Adjust the import path as needed

const ZomatoHeroDemo = () => {
  return (
    <div className="w-full h-screen bg-background">
      <ZomatoHero
        // A placeholder food video from Pexels
        videoSrc="https://cdn.21st.dev/assets/mirror/f9/f946ac036839260c3e26108803597d0d5a58be6f32a8820565f76a9350cf723c.mp4"
        // Zomato logo from a reliable CDN
        logoSrc="https://cdn.21st.dev/assets/mirror/55/552537e1cd8aa947f98c442afb1a667f36a483faf7bb3fdf65c89c4f0a7b85f0.png"
        subtitle="India's #1 food delivery app"
        description="Experience fast & easy online ordering on the Zomato app"
        googlePlayLink="https://21st.dev/ravikatiyar"
        appStoreLink="https://21st.dev/ravikatiyar"
      />
      {/* You can add more sections below to test the 'Scroll down' functionality */}
      {/* <div className="h-screen bg-background p-8"><h2 className="text-2xl">Next Section</h2></div> */}
    </div>
  );
};

export default ZomatoHeroDemo;