{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-06",
  "title": "Hero 06",
  "description": "A split product hero with dual CTA, a compact logo row, and the Spot 01 illustration.",
  "dependencies": [
    "react-wrap-balancer",
    "motion"
  ],
  "registryDependencies": [
    "@flx/cta",
    "@flx/spot-01"
  ],
  "files": [
    {
      "path": "registry/blocks/hero/hero-06/hero-06.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 type { CtaProps } from '../../shared/cta'\nimport { Cta } from '../../shared/cta'\nimport { Spot01 } from '../../../illustrations/spot/spot-01'\n\nexport interface Hero06Props {\n  title: string\n  highlight?: string\n  description: string\n  animation?: 'none' | 'subtle'\n  primaryCTA: CtaProps\n  secondaryCTA?: CtaProps\n  logos: string[]\n  logosLabel?: string\n}\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: [0.22, 1, 0.36, 1] },\n  },\n}\n\nfunction Reveal({\n  active,\n  className,\n  children,\n}: Readonly<{\n  active: boolean\n  className?: string\n  children: React.ReactNode\n}>) {\n  if (!active) return <div className={className}>{children}</div>\n\n  return (\n    <motion.div variants={item} className={className}>\n      {children}\n    </motion.div>\n  )\n}\n\nexport function Hero06({\n  title,\n  highlight,\n  description,\n  animation = 'none',\n  primaryCTA,\n  secondaryCTA,\n  logos = [],\n  logosLabel,\n}: Readonly<Hero06Props>) {\n  const reduce = useReducedMotion()\n  const animate = animation === 'subtle' && !reduce\n\n  const titleElement = title && (\n    <h1 className=\"text-foreground font-serif text-2xl font-normal tracking-tight text-balance sm:text-3xl md:text-4xl\">\n      <Balancer>{title}</Balancer>\n      {highlight && (\n        <>\n          {' '}\n          <span className=\"text-muted-foreground\">{highlight}</span>\n        </>\n      )}\n    </h1>\n  )\n\n  const descriptionElement = description && (\n    <p className=\"text-muted-foreground max-w-md text-base sm:text-lg\">\n      <Balancer>{description}</Balancer>\n    </p>\n  )\n\n  const ctasElement = (primaryCTA?.ctaEnabled || secondaryCTA?.ctaEnabled) && (\n    <div className=\"flex w-full flex-col gap-3 sm:w-auto sm:flex-row\">\n      {primaryCTA && <Cta cta={primaryCTA} className=\"w-full sm:w-fit\" />}\n      {secondaryCTA && <Cta cta={secondaryCTA} className=\"w-full sm:w-fit\" />}\n    </div>\n  )\n\n  const logosElement = (\n    <div className=\"flex flex-col gap-3\">\n      {logosLabel && logos.length > 0 && (\n        <p className=\"text-muted-foreground/80 text-xs tracking-wide uppercase\">\n          {logosLabel}\n        </p>\n      )}\n      {logos.length > 0 && (\n        <div className=\"flex flex-wrap items-center gap-x-6 gap-y-3\">\n          {logos.map((logo, index) => (\n            <span\n              key={index}\n              className=\"text-muted-foreground/60 text-sm font-semibold tracking-tight\"\n            >\n              {logo}\n            </span>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n\n  return (\n    <section className=\"bg-background relative w-full overflow-hidden\">\n      <div\n        aria-hidden\n        className=\"pointer-events-none absolute inset-0 -z-10 opacity-70 dark:opacity-40\"\n        style={{\n          backgroundImage:\n            'linear-gradient(to right, var(--border) 1px, transparent 1px), linear-gradient(to bottom, var(--border) 1px, transparent 1px)',\n          backgroundSize: '64px 64px',\n          maskImage:\n            'radial-gradient(ellipse 80% 60% at 75% 25%, black 30%, transparent 72%)',\n          WebkitMaskImage:\n            'radial-gradient(ellipse 80% 60% at 75% 25%, black 30%, transparent 72%)',\n        }}\n      />\n\n      <motion.div\n        className=\"mx-auto grid max-w-6xl grid-cols-1 items-center gap-12 px-6 py-16 sm:py-24 lg:grid-cols-2 lg:gap-16\"\n        variants={animate ? container : undefined}\n        initial={animate ? 'hidden' : false}\n        whileInView={animate ? 'visible' : undefined}\n        viewport={{ once: true, margin: '-80px' }}\n      >\n        <div className=\"flex flex-col items-start gap-8\">\n          <Reveal active={animate} className=\"flex flex-col items-start gap-5\">\n            {titleElement}\n            {descriptionElement}\n          </Reveal>\n\n          <Reveal active={animate}>{ctasElement}</Reveal>\n\n          <Reveal active={animate}>{logosElement}</Reveal>\n        </div>\n\n        <Reveal active={animate} className=\"w-full\">\n          <Spot01 size=\"lg\" />\n        </Reveal>\n      </motion.div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/blocks/hero/hero-06/hero-06.tsx"
    },
    {
      "path": "registry/blocks/hero/hero-06/hero-06-example.tsx",
      "content": "import { Hero06, type Hero06Props } from './hero-06'\n\nexport const values = {\n  title: 'Ship your best work,',\n  highlight: 'without the busywork.',\n  description:\n    'One workspace to plan, build, and launch. No context switching, no clutter.',\n  animation: 'subtle',\n  primaryCTA: {\n    ctaEnabled: true,\n    text: 'Start for free',\n    link: '',\n    variant: 'default',\n  },\n  secondaryCTA: {\n    ctaEnabled: true,\n    text: 'Book a demo',\n    link: '',\n    variant: 'outline',\n  },\n  logosLabel: 'Trusted by fast-moving teams',\n  logos: ['Acme', 'Globex', 'Initech', 'Umbrella'],\n} satisfies Hero06Props\n\nexport function Hero06Example() {\n  return <Hero06 {...values} />\n}\n",
      "type": "registry:component",
      "target": "components/flx/blocks/hero/hero-06/hero-06-example.tsx"
    }
  ],
  "meta": {
    "iframeHeight": 820
  },
  "type": "registry:block"
}