{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"marketing-hero-sections-video-background-hero","type":"registry:block","title":"Video Background Hero","files":[{"path":"components/blocks/marketing/hero-sections/video-background-hero.tsx","content":"import { Button } from '@/components/ui/button';\nimport { ArrowRight, Play } from 'lucide-react';\nimport { useState } from 'react';\n\nexport default function VideoBackgroundHero() {\n  const [videoModal, setVideoModal] = useState(false);\n\n  return (\n    <div className=\"relative min-h-[85vh] overflow-hidden bg-black/90\">\n      {/* Video background */}\n      <video\n        autoPlay\n        muted\n        loop\n        className=\"absolute inset-0 h-full w-full object-cover opacity-40\"\n        poster=\"https://images.unsplash.com/photo-1550745165-9bc0b252726f?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3\"\n      >\n        <source\n          src=\"https://player.vimeo.com/progressive_redirect/playback/772380223/rendition/720p/file.mp4?loc=external\"\n          type=\"video/mp4\"\n        />\n        Your browser does not support the video tag.\n      </video>\n\n      {/* Gradient overlay */}\n      <div className=\"absolute inset-0 bg-gradient-to-t from-black via-black/60 to-black/20\"></div>\n\n      {/* Content */}\n      <div className=\"relative container mx-auto flex min-h-[85vh] flex-col items-center justify-center gap-6 px-4 py-24 text-center md:px-6 md:py-32 2xl:max-w-[1400px]\">\n        <div className=\"flex flex-col items-center gap-2\">\n          <span className=\"inline-flex items-center rounded-full border border-white/10 px-3 py-1 text-sm font-medium text-white\">\n            Introducing Our Latest Innovation\n          </span>\n        </div>\n        <h1 className=\"max-w-4xl text-4xl font-bold tracking-tighter text-white md:text-5xl/tight lg:text-6xl/tight\">\n          Revolutionize Your Digital Experience with Cutting-Edge Technology\n        </h1>\n        <p className=\"max-w-[700px] text-white/80 md:text-xl/relaxed\">\n          Discover how our platform is changing the way people interact with\n          technology, creating seamless experiences that drive results.\n        </p>\n\n        <div className=\"mt-6 flex flex-col gap-4 sm:flex-row\">\n          <Button size=\"lg\" asChild variant={'secondary'}>\n            <a href=\"#\">\n              Get Started Free\n              <ArrowRight className=\"ml-2 h-4 w-4\" />\n            </a>\n          </Button>\n          <Button\n            size=\"lg\"\n            variant=\"default\"\n            onClick={() => setVideoModal(true)}\n          >\n            <Play className=\"mr-2 h-4 w-4\" />\n            Watch Demo\n          </Button>\n        </div>\n\n        <div className=\"mt-8 flex items-center gap-4 text-sm text-white/80\">\n          <div className=\"flex items-center gap-1\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              className=\"h-5 w-5\"\n            >\n              <path d=\"M12 2H2v10h10V2Z\" />\n              <path d=\"M22 12H12v10h10V12Z\" />\n              <path d=\"M22 2h-5v5h5V2Z\" />\n              <path d=\"M7 12H2v5h5v-5Z\" />\n            </svg>\n            <span>Modern Interface</span>\n          </div>\n          <div className=\"h-1 w-1 rounded-full bg-white/30\"></div>\n          <div className=\"flex items-center gap-1\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              className=\"h-5 w-5\"\n            >\n              <path d=\"M20 5H9l-7 7 7 7h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2Z\" />\n              <line x1=\"18\" x2=\"12\" y1=\"9\" y2=\"15\" />\n              <line x1=\"12\" x2=\"18\" y1=\"9\" y2=\"15\" />\n            </svg>\n            <span>Enterprise Ready</span>\n          </div>\n          <div className=\"h-1 w-1 rounded-full bg-white/30\"></div>\n          <div className=\"flex items-center gap-1\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              className=\"h-5 w-5\"\n            >\n              <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10\" />\n            </svg>\n            <span>Secure by Design</span>\n          </div>\n        </div>\n      </div>\n\n      {/* Video Modal */}\n      {videoModal && (\n        <div\n          className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/80\"\n          onClick={() => setVideoModal(false)}\n        >\n          <div\n            className=\"relative w-full max-w-4xl p-2\"\n            onClick={(e) => e.stopPropagation()}\n          >\n            <button\n              className=\"absolute -top-10 right-0 text-white hover:text-white/80\"\n              onClick={() => setVideoModal(false)}\n            >\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"24\"\n                height=\"24\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                className=\"h-6 w-6\"\n              >\n                <path d=\"M18 6 6 18\" />\n                <path d=\"m6 6 12 12\" />\n              </svg>\n              <span className=\"sr-only\">Close</span>\n            </button>\n            <div className=\"aspect-video w-full overflow-hidden rounded-lg\">\n              <iframe\n                width=\"100%\"\n                height=\"100%\"\n                src=\"https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1\"\n                title=\"Product Demo\"\n                frameBorder=\"0\"\n                allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n                allowFullScreen\n              ></iframe>\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n","type":"registry:component","target":"components/blocks/marketing/hero-sections/video-background-hero.tsx"},{"path":"components/ui/button.tsx","content":"import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n  \"group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n        outline:\n          \"border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50\",\n        destructive:\n          \"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default:\n          \"h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        xs: \"h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5\",\n        lg: \"h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        icon: \"size-9\",\n        \"icon-xs\":\n          \"size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\":\n          \"size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md\",\n        \"icon-lg\": \"size-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean\n  }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n","type":"registry:ui","target":"components/ui/button.tsx"}],"description":"A hero with a looping video filling the background behind a headline and CTA. Sets an immersive, cinematic tone at the top of a landing page.","dependencies":["class-variance-authority","lucide-react","radix-ui"]}