{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "video-hero-showcase",
  "type": "registry:ui",
  "title": "Video Hero Showcase",
  "description": "A dynamic hero section featuring video backgrounds and interactive elements",
  "dependencies": [
    "motion",
    "react-icons"
  ],
  "registryDependencies": [
    "button",
    "badge"
  ],
  "files": [
    {
      "path": "registry/ruixenui/video-hero-showcase.tsx",
      "content": "\"use client\";\n\nimport Link from \"next/link\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { VideoPlayer } from \"@/components/VideoPlayer\";\nimport { FaGithub } from \"react-icons/fa\";\n\nexport interface VideoHeroShowcaseProps {\n  badgeText?: string;\n  badgeLink?: string;\n  title?: string;\n  subtitle?: string;\n  primaryButtonText?: string;\n  primaryButtonHref?: string;\n  secondaryButtonText?: string;\n  secondaryButtonHref?: string;\n  videoSrc?: string;\n  videoPoster?: string;\n}\n\nexport default function VideoHeroShowcase({\n  badgeText = \"Discover the Animal World\",\n  badgeLink = \"https://ruixen.com\",\n  title = \"Explore nature’s most fascinating creatures\",\n  subtitle = \"Learn about wildlife, their habitats, and amazing facts. From the tiniest insects to the largest mammals — dive into the beauty of the animal kingdom.\",\n  primaryButtonText = \"Start Exploring\",\n  primaryButtonHref = \"/docs/ui/getting-started/introduction\",\n  secondaryButtonText = \"Animal Data\",\n  secondaryButtonHref = \"https://ruixen.com/components\",\n  videoSrc = \"https://videos.pexels.com/video-files/26772138/12003967_1920_1080_30fps.mp4\",\n  videoPoster = \"https://videos.pexels.com/video-files/26772138/12003967_1920_1080_30fps.jpg\",\n}: VideoHeroShowcaseProps) {\n  return (\n    <section\n      className=\"relative flex flex-col max-w-6xl mx-auto items-center justify-center gap-8 px-10 text-center py-16 pt-24 \n      bg-gradient-to-b from-green-50 via-green-100/40 to-white \n      rounded-[4rem] shadow-sm\"\n    >\n      {/* Badge */}\n      <div className=\"flex items-center justify-center gap-4 flex-col\">\n        <Badge\n          className=\"rounded-full cursor-pointer font-medium\"\n          variant={\"secondary\"}\n          onClick={() => {\n            window.open(badgeLink, \"_blank\");\n          }}\n        >\n          {badgeText}\n        </Badge>\n      </div>\n\n      {/* Heading */}\n      <div className=\"flex items-center justify-center gap-4 flex-col\">\n        <h1 className=\"text-6xl max-sm:text-4xl font-medium tracking-tighter\">\n          {title}\n        </h1>\n        <p className=\"max-sm:text-sm text-gray-500\">{subtitle}</p>\n      </div>\n\n      {/* Buttons */}\n      <div className=\"flex items-center justify-center gap-2 flex-wrap\">\n        <Button asChild className=\"grow rounded-xl\" size={\"sm\"}>\n          <Link href={primaryButtonHref} className=\"font-normal\">\n            {primaryButtonText} <span className=\"opacity-70\">- It's free</span>\n          </Link>\n        </Button>\n        <Button\n          asChild\n          variant=\"outline\"\n          className=\"grow rounded-xl\"\n          size={\"sm\"}\n        >\n          <Link\n            href={secondaryButtonHref}\n            className=\"font-normal flex items-center justify-between gap-2\"\n          >\n            <span className=\"flex items-center gap-2\">\n              <FaGithub />\n              {secondaryButtonText}\n            </span>\n          </Link>\n        </Button>\n      </div>\n\n      {/* Video */}\n      <div className=\"border border-gray-200 dark:border-gray-800 shadow-lg rounded-3xl overflow-hidden w-full\">\n        <VideoPlayer\n          src={videoSrc}\n          poster={videoPoster}\n          size={\"full\"}\n          className=\"w-full h-auto rounded-3xl\"\n        />\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ruixen/video-hero-showcase.tsx"
    }
  ]
}