{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-14",
  "title": "Hero 14",
  "description": "A centered product hero with dual CTAs, a full-width photo with a floating block-builder demo panel, and a logo strip.",
  "dependencies": [
    "react-wrap-balancer",
    "motion",
    "lucide-react"
  ],
  "registryDependencies": [
    "@flx/cta",
    "button"
  ],
  "files": [
    {
      "path": "registry/blocks/hero/hero-14/hero-14.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { motion, useReducedMotion, type Variants } from 'motion/react'\nimport Balancer from 'react-wrap-balancer'\n\nimport { cn } from '@/lib/utils'\n\nimport { Cta, type CtaProps } from '../../shared/cta'\nimport { BlockBuilderDemo } from './block-builder-demo'\n\nexport interface Hero14Props {\n  title: string\n  description: string\n  primaryCTA: CtaProps\n  secondaryCTA?: CtaProps\n  image: string\n  imageAlt?: string\n  logos?: string[]\n  animation?: 'none' | 'subtle'\n  variant?: 'standard' | 'compact'\n}\n\nconst variantStyles = {\n  standard: {\n    section: 'py-20 sm:py-28',\n    title: 'text-3xl sm:text-4xl md:text-5xl',\n    description: 'max-w-xl text-sm sm:text-base',\n    header: 'gap-3 sm:gap-4',\n    copy: 'gap-5 sm:gap-6',\n    content: 'gap-10 sm:gap-14',\n    mediaPadding: 'px-6 py-10 sm:px-12 sm:py-16',\n    logos: 'gap-x-10 gap-y-4 pt-8 sm:pt-10',\n  },\n  compact: {\n    section: 'py-14 sm:py-20',\n    title: 'text-2xl sm:text-3xl md:text-4xl',\n    description: 'max-w-lg text-sm',\n    header: 'gap-2.5 sm:gap-3',\n    copy: 'gap-4 sm:gap-5',\n    content: 'gap-8 sm:gap-10',\n    mediaPadding: 'px-5 py-8 sm:px-10 sm:py-12',\n    logos: 'gap-x-8 gap-y-3 pt-6 sm:pt-8',\n  },\n} as const\n\nconst easeOut = [0.22, 1, 0.36, 1] as const\n\nconst container: Variants = {\n  hidden: {},\n  visible: { transition: { staggerChildren: 0.1, delayChildren: 0.05 } },\n}\n\nconst item: Variants = {\n  hidden: { opacity: 0, y: 12, filter: 'blur(6px)' },\n  visible: {\n    opacity: 1,\n    y: 0,\n    filter: 'blur(0px)',\n    transition: { duration: 0.5, ease: easeOut },\n  },\n}\n\nconst mediaItem: Variants = {\n  hidden: { opacity: 0, y: 24, filter: 'blur(8px)' },\n  visible: {\n    opacity: 1,\n    y: 0,\n    filter: 'blur(0px)',\n    transition: { duration: 0.6, delay: 0.15, ease: easeOut },\n  },\n}\n\nconst logosItem: Variants = {\n  hidden: { opacity: 0, y: 8 },\n  visible: {\n    opacity: 1,\n    y: 0,\n    transition: { duration: 0.5, delay: 0.35, ease: easeOut },\n  },\n}\n\nfunction Reveal({\n  active,\n  variants,\n  className,\n  children,\n}: Readonly<{\n  active: boolean\n  variants?: Variants\n  className?: string\n  children: React.ReactNode\n}>) {\n  if (!active) return <div className={className}>{children}</div>\n\n  return (\n    <motion.div variants={variants ?? item} className={className}>\n      {children}\n    </motion.div>\n  )\n}\n\nexport function Hero14({\n  title,\n  description,\n  primaryCTA,\n  secondaryCTA,\n  image,\n  imageAlt = '',\n  logos = [],\n  animation = 'none',\n  variant = 'standard',\n}: Readonly<Hero14Props>) {\n  const reduce = useReducedMotion()\n  const animate = animation === 'subtle' && !reduce\n  const vs = variantStyles[variant]\n\n  const titleElement = title && (\n    <h1\n      className={cn(\n        'text-foreground font-semibold tracking-tight text-balance',\n        vs.title,\n      )}\n    >\n      <Balancer>{title}</Balancer>\n    </h1>\n  )\n\n  const descriptionElement = description && (\n    <p className={cn('text-muted-foreground', vs.description)}>\n      <Balancer>{description}</Balancer>\n    </p>\n  )\n\n  const ctasElement = (primaryCTA?.ctaEnabled || secondaryCTA?.ctaEnabled) && (\n    <div className=\"flex flex-wrap items-center justify-center gap-3\">\n      {secondaryCTA?.ctaEnabled && (\n        <Cta\n          cta={{ ...secondaryCTA, variant: secondaryCTA.variant ?? 'outline' }}\n        />\n      )}\n      {primaryCTA?.ctaEnabled && <Cta cta={primaryCTA} />}\n    </div>\n  )\n\n  const mediaElement = image && (\n    <div className=\"relative w-full overflow-hidden rounded-2xl outline outline-black/10 dark:outline-white/10\">\n      <img\n        src={image}\n        alt={imageAlt}\n        decoding=\"async\"\n        className=\"absolute inset-0 size-full object-cover\"\n      />\n      <div\n        aria-hidden\n        className=\"absolute inset-0 bg-gradient-to-t from-black/15 via-transparent to-black/5\"\n      />\n      <div\n        className={cn(\n          'relative flex items-center justify-center',\n          vs.mediaPadding,\n        )}\n      >\n        <BlockBuilderDemo />\n      </div>\n    </div>\n  )\n\n  const logosElement = logos.length > 0 && (\n    <div\n      className={cn(\n        'flex w-full flex-wrap items-center justify-center border-t',\n        vs.logos,\n      )}\n    >\n      {logos.map((logo, index) => (\n        <span\n          key={`${logo}-${index}`}\n          className=\"text-muted-foreground/70 text-sm font-semibold tracking-tight\"\n        >\n          {logo}\n        </span>\n      ))}\n    </div>\n  )\n\n  return (\n    <section className=\"bg-background relative isolate w-full overflow-hidden\">\n      <motion.div\n        className={cn(\n          'relative z-10 mx-auto flex max-w-6xl flex-col items-center px-6',\n          vs.section,\n          vs.content,\n        )}\n        variants={animate ? container : undefined}\n        initial={animate ? 'hidden' : false}\n        whileInView={animate ? 'visible' : undefined}\n        viewport={{ once: true, margin: '-80px' }}\n      >\n        <div\n          className={cn(\n            'flex w-full max-w-2xl flex-col items-center',\n            vs.copy,\n          )}\n        >\n          <Reveal\n            active={animate}\n            className={cn(\n              'flex flex-col items-center text-center',\n              vs.header,\n            )}\n          >\n            {titleElement}\n            {descriptionElement}\n          </Reveal>\n\n          <Reveal active={animate}>{ctasElement}</Reveal>\n        </div>\n\n        <Reveal active={animate} variants={mediaItem} className=\"w-full\">\n          {mediaElement}\n        </Reveal>\n\n        <Reveal active={animate} variants={logosItem} className=\"w-full\">\n          {logosElement}\n        </Reveal>\n      </motion.div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/blocks/hero/hero-14/hero-14.tsx"
    },
    {
      "path": "registry/blocks/hero/hero-14/hero-14-example.tsx",
      "content": "import { Hero14, type Hero14Props } from './hero-14'\n\nexport const values = {\n  title: 'Describe the screen. Ship the block.',\n  description:\n    'Turn a plain-language brief into a production-ready block you can copy into your app.',\n  image:\n    'https://images.unsplash.com/photo-1673271044466-b23ea152130f?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n  imageAlt: 'A pastel wildflower meadow at golden hour',\n  logos: ['Northwind', 'Vertex Labs', 'Solstice', 'Anchorpoint', 'Lumen'],\n  animation: 'subtle',\n  variant: 'standard',\n  primaryCTA: {\n    ctaEnabled: true,\n    text: 'Browse Blocks',\n    link: '',\n    size: 'default',\n  },\n  secondaryCTA: {\n    ctaEnabled: true,\n    text: 'How It Works',\n    link: '',\n    variant: 'outline',\n    size: 'default',\n  },\n} satisfies Hero14Props\n\nexport function Hero14Example() {\n  return <Hero14 {...values} />\n}\n",
      "type": "registry:component",
      "target": "components/flx/blocks/hero/hero-14/hero-14-example.tsx"
    },
    {
      "path": "registry/blocks/hero/hero-14/block-builder-demo.tsx",
      "content": "import { CheckCircle2, Send, Sparkles } from 'lucide-react'\n\nimport { Button } from '@/components/ui/button'\nimport { cn } from '@/lib/utils'\n\nconst checklist = ['Three-tier layout', 'Monthly / yearly toggle']\n\nexport function BlockBuilderDemo() {\n  return (\n    <div\n      className={cn(\n        'bg-card w-full max-w-md overflow-hidden rounded-xl border',\n        'shadow-[0_20px_50px_-16px_rgba(0,0,0,0.25)]',\n        'dark:shadow-[0_20px_50px_-16px_rgba(0,0,0,0.6)]',\n      )}\n    >\n      <div className=\"border-b px-5 py-3\">\n        <span className=\"text-muted-foreground text-[11px] font-medium tracking-wide uppercase\">\n          Block builder\n        </span>\n      </div>\n\n      <div className=\"flex flex-col gap-3.5 px-5 py-5\">\n        <div className=\"flex items-end gap-2.5\">\n          <div className=\"bg-foreground text-background flex size-7 shrink-0 items-center justify-center rounded-md\">\n            <Sparkles className=\"size-4\" />\n          </div>\n          <div className=\"bg-muted max-w-[80%] rounded-xl rounded-bl-sm px-3.5 py-2.5 text-[13px] leading-relaxed\">\n            Hi! Describe the block you want to build.\n          </div>\n        </div>\n\n        <div className=\"flex justify-end\">\n          <div className=\"bg-foreground text-background max-w-[80%] rounded-xl rounded-br-sm px-3.5 py-2.5 text-[13px] leading-relaxed\">\n            A pricing section with three tiers\n          </div>\n        </div>\n\n        <div className=\"bg-muted/60 space-y-2 rounded-xl p-3.5\">\n          <span className=\"text-sm font-medium tracking-tight\">\n            Pricing-03 block\n          </span>\n          <ul className=\"text-muted-foreground space-y-1 text-xs leading-relaxed\">\n            {checklist.map((entry) => (\n              <li key={entry}>{entry}</li>\n            ))}\n          </ul>\n          <div className=\"text-foreground flex items-center gap-1.5 pt-0.5 text-xs font-medium\">\n            <CheckCircle2 className=\"size-3.5 text-emerald-600 dark:text-emerald-400\" />\n            Ready to copy\n          </div>\n        </div>\n      </div>\n\n      <div className=\"border-t p-3\">\n        <div className=\"bg-muted/50 flex items-center gap-2 rounded-full py-2 pr-1.5 pl-4\">\n          <span className=\"text-muted-foreground min-w-0 flex-1 truncate text-[13px]\">\n            Describe your block…\n          </span>\n          <Button\n            size=\"icon-xs\"\n            variant=\"default\"\n            className=\"size-8 shrink-0 rounded-full active:scale-[0.96]\"\n            aria-label=\"Send\"\n          >\n            <Send className=\"size-4\" />\n          </Button>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/blocks/hero/hero-14/block-builder-demo.tsx"
    }
  ],
  "meta": {
    "iframeHeight": 1200
  },
  "type": "registry:block"
}