{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-sections-02",
  "type": "registry:component",
  "title": "Hero Sections",
  "author": "Toby Belhome",
  "description": "Explore beautifully crafted Tailwind CSS hero sections designed to deliver a powerful first impression with clarity and purpose. These layouts blend minimalist design, strong visual hierarchy, and persuasive calls-to-action to communicate your product’s value from the very first glance. Ideal for landing pages, SaaS platforms, and marketing websites seeking a refined, modern, and conversion-ready above-the-fold experience.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "badge",
    "button",
    "dialog",
    "button"
  ],
  "files": [
    {
      "path": "examples/blocks/marketing/hero-sections/02/page.tsx",
      "content": "import Link from \"next/link\";\nimport { ArrowUpRight, PlayIcon } from \"lucide-react\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { VideoModal } from \"./video-modal\";\n\nexport default function HeroSection() {\n  return (\n    <section className=\"py-10 lg:py-16\">\n      <div className=\"mx-auto max-w-7xl px-4\">\n        <div className=\"grid items-center gap-8 lg:grid-cols-2\">\n          <header className=\"flex flex-col items-center text-center lg:items-start lg:text-left\">\n            <Badge variant=\"outline\">\n              🚀 Launch Faster\n              <ArrowUpRight />\n            </Badge>\n            <h1 className=\"font-heading my-4 text-4xl text-balance md:text-5xl lg:leading-14\">\n              All-in-One Platform for Managing Your SaaS\n            </h1>\n            <p className=\"text-muted-foreground mb-8 text-balance lg:text-lg\">\n              Streamline operations, track metrics, and scale your SaaS business with ease.\n              Everything you need, in one powerful dashboard.\n            </p>\n            <div className=\"flex justify-center gap-2\">\n              <Button asChild>\n                <Link href=\"https://app.yoursaas.com/signup\">Start Free Trial</Link>\n              </Button>\n              <Button asChild variant=\"outline\">\n                <Link href=\"https://app.yoursaas.com/demo\">Request a Demo</Link>\n              </Button>\n            </div>\n          </header>\n          <figure className=\"relative\">\n            <img\n              src=\"https://images.unsplash.com/photo-1763503834047-ac85c4105c0b?q=80&w=2080&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n              alt=\"Dashboard interface of the SaaS platform\"\n              className=\"aspect-square w-full rounded-md object-cover\"\n            />\n            <div className=\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transform\">\n              <VideoModal videoUrl=\"https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4\" />\n            </div>\n          </figure>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/hero-sections/hero-sections.tsx"
    },
    {
      "path": "examples/blocks/marketing/hero-sections/02/video-modal.tsx",
      "content": "\"use client\";\n\nimport { useRef } from \"react\";\nimport { Dialog, DialogContent, DialogTrigger } from \"@/components/ui/dialog\";\nimport { PlayIcon } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\n\ninterface VideoModalProps {\n  videoUrl: string;\n}\n\nexport function VideoModal({ videoUrl }: VideoModalProps) {\n  const videoRef = useRef<HTMLVideoElement>(null);\n\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"secondary\" className=\"size-12 rounded-full lg:size-16\" size=\"icon-lg\">\n          <PlayIcon className=\"size-4 lg:size-6\" />\n        </Button>\n      </DialogTrigger>\n      <DialogContent className=\"overflow-hidden p-0 lg:max-w-5xl\">\n        <div className=\"relative aspect-video w-full\">\n          <video\n            ref={videoRef}\n            className=\"h-full w-full\"\n            controls\n            controlsList=\"nodownload\"\n            playsInline\n            autoPlay>\n            <source src={videoUrl} type=\"video/mp4\" />\n            Your browser does not support the video tag.\n          </video>\n        </div>\n      </DialogContent>\n    </Dialog>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/hero-sections/video-modal.tsx"
    }
  ],
  "meta": {
    "isPro": true
  }
}