{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-07",
  "title": "Feature 07",
  "description": "Full-width video player section with a poster image and an animated play button overlay. Use it on landing pages to embed a product demo or explainer video where showing beats telling.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "src/registry/blocks/feature-07/feature.tsx",
      "content": "\"use client\";\n\nimport { useState, useRef } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { Play, Pause, ArrowUpRight } from \"lucide-react\";\n\ninterface Feature07Props {\n  label?: string;\n  title?: string;\n  description?: string;\n  videoSrc?: string;\n  thumbnailSrc?: string;\n  overlayTitle?: string;\n  overlayDescription?: string;\n  showArrowButton?: boolean;\n  arrowButtonHref?: string;\n  aspectRatio?: \"video\" | \"wide\" | \"square\";\n  className?: string;\n}\n\nconst Feature07 = ({\n  label = \"See it in action\",\n  title = \"A demo is worth a thousand words\",\n  description = \"Watch how our platform transforms the way teams work together. No complex setup, just results.\",\n  videoSrc = \"https://videos.pexels.com/video-files/8005482/8005482-uhd_2560_1440_25fps.mp4\",\n  thumbnailSrc = \"https://www.apple.com/v/airpods-max/j/images/overview/bento/blue/bento_1_airpod_max_blue__blqgkfdancya_xlarge_2x.jpg\",\n  overlayTitle,\n  overlayDescription,\n  showArrowButton = false,\n  arrowButtonHref = \"#\",\n  aspectRatio = \"video\",\n  className,\n}: Feature07Props) => {\n  const [isPlaying, setIsPlaying] = useState(false);\n  const [showControls, setShowControls] = useState(true);\n  const videoRef = useRef<HTMLVideoElement>(null);\n\n  const togglePlay = () => {\n    if (!videoRef.current) return;\n    isPlaying ? videoRef.current.pause() : videoRef.current.play();\n    setIsPlaying(!isPlaying);\n  };\n\n  const aspectClass = {\n    video: \"aspect-video\",\n    wide: \"aspect-[21/9]\",\n    square: \"aspect-square\",\n  }[aspectRatio];\n\n  return (\n    <section className={cn(\"container mx-auto px-8 py-12 md:py-24\", className)}>\n      <div className=\"mx-auto flex max-w-5xl flex-col items-center gap-4 text-center\">\n        {label && (\n          <p className=\"text-sm font-semibold tracking-widest text-muted-foreground uppercase\">\n            {label}\n          </p>\n        )}\n        <h2 className=\"text-3xl font-medium tracking-tight md:text-4xl lg:text-5xl\">\n          {title}\n        </h2>\n        {description && (\n          <p className=\"text-muted-foreground md:text-lg\">{description}</p>\n        )}\n      </div>\n\n      <div className=\"mx-auto mt-12 max-w-5xl\">\n        <div\n          className={cn(\n            \"group relative cursor-pointer overflow-hidden rounded-2xl bg-black shadow-2xl\",\n            aspectClass,\n          )}\n          onClick={togglePlay}\n          onMouseEnter={() => setShowControls(true)}\n          onMouseLeave={() => isPlaying && setShowControls(false)}\n        >\n          <video\n            ref={videoRef}\n            src={videoSrc}\n            poster={thumbnailSrc}\n            className=\"size-full object-cover\"\n            onEnded={() => {\n              setIsPlaying(false);\n              setShowControls(true);\n            }}\n            playsInline\n          />\n          {(!isPlaying || overlayTitle || overlayDescription) && (\n            <div\n              className={cn(\n                \"absolute inset-0 bg-linear-to-t from-black/60 via-transparent to-black/30 transition-opacity duration-300\",\n                isPlaying && !overlayTitle && !overlayDescription\n                  ? \"opacity-0\"\n                  : \"opacity-100\",\n              )}\n            />\n          )}\n          {overlayTitle && (\n            <div className=\"absolute top-6 right-6 left-6\">\n              <p className=\"text-lg font-medium text-white md:text-xl\">\n                {overlayTitle}\n              </p>\n            </div>\n          )}\n          {overlayDescription && (\n            <div className=\"absolute right-16 bottom-6 left-6\">\n              <p className=\"text-sm text-white/90 md:text-base\">\n                {overlayDescription}\n              </p>\n            </div>\n          )}\n          <div\n            className={cn(\n              \"absolute inset-0 flex items-center justify-center transition-opacity duration-300\",\n              isPlaying && !showControls ? \"opacity-0\" : \"opacity-100\",\n            )}\n          >\n            <button\n              onClick={(e) => {\n                e.stopPropagation();\n                togglePlay();\n              }}\n              className={cn(\n                \"flex items-center justify-center rounded-full bg-white/95 shadow-lg backdrop-blur-sm transition-all duration-300 hover:scale-110 hover:bg-white\",\n                isPlaying ? \"size-14\" : \"size-16 md:size-20\",\n              )}\n              aria-label={isPlaying ? \"Pause video\" : \"Play video\"}\n            >\n              {isPlaying ? (\n                <Pause className=\"size-6 fill-black text-black md:size-7\" />\n              ) : (\n                <Play className=\"ml-1 size-7 fill-black text-black md:size-8\" />\n              )}\n            </button>\n          </div>\n          {showArrowButton && (\n            <a\n              href={arrowButtonHref}\n              onClick={(e) => e.stopPropagation()}\n              className=\"absolute right-4 bottom-4 flex size-10 items-center justify-center rounded-full bg-white/20 backdrop-blur-sm transition-all duration-300 hover:scale-110 hover:bg-white/30 md:size-12\"\n              aria-label=\"Learn more\"\n            >\n              <ArrowUpRight className=\"size-5 text-white md:size-6\" />\n            </a>\n          )}\n          {!isPlaying && (\n            <div className=\"absolute bottom-4 left-4 rounded-sm bg-black/60 px-2 py-1 backdrop-blur-sm\">\n              <span className=\"text-xs font-medium text-white\">2:45</span>\n            </div>\n          )}\n        </div>\n      </div>\n    </section>\n  );\n};\n\nconst Feature07WithOverlay = (\n  props: Omit<\n    Feature07Props,\n    \"overlayTitle\" | \"overlayDescription\" | \"showArrowButton\"\n  >,\n) => (\n  <Feature07\n    {...props}\n    overlayTitle=\"Quality candidates, faster\"\n    overlayDescription=\"Match with expert recruiters and fill your hardest roles in record time.\"\n    showArrowButton\n    label=\"\"\n    title=\"\"\n    description=\"\"\n  />\n);\n\nconst Feature07Minimal = (\n  props: Omit<Feature07Props, \"label\" | \"title\" | \"description\">,\n) => <Feature07 {...props} label=\"\" title=\"\" description=\"\" />;\n\nexport default Feature07;\nexport { Feature07WithOverlay, Feature07Minimal };\n",
      "type": "registry:component",
      "target": "components/feature-07.tsx"
    }
  ],
  "meta": {
    "image": "/r/previews/feature-07.webp",
    "imageDark": "/r/previews/feature-07-dark.webp",
    "prose": {
      "about": "Feature 07 is a full-width video embed section with a poster image and an animated play button overlay. Clicking the play button replaces the static poster with an embedded video player. Built with Tailwind CSS and a lightweight click-to-play pattern, it avoids loading the full video iframe until the user explicitly requests it — keeping page load fast. The poster image, video URL, and aspect ratio are all configurable.",
      "whenToUse": [
        "Products where a 60-second demo video converts better than any written copy",
        "Landing pages for tools with a visual workflow that is hard to describe in text alone",
        "SaaS products where a founder walkthrough or product tour is a key part of the sales motion",
        "Pages where you want video content but can not afford the page-speed cost of an auto-loading embed"
      ],
      "notes": "Use a high-quality static poster image (ideally a frame from the video) so the section looks complete even if the user never clicks play. The lazy-load pattern prevents the YouTube or Vimeo iframe from blocking page rendering."
    }
  },
  "categories": [
    "feature"
  ],
  "type": "registry:block"
}