{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-03",
  "title": "Hero 03",
  "description": "A centered hero with dual CTAs and an image that fades into the page below the copy.",
  "dependencies": [
    "react-wrap-balancer",
    "motion"
  ],
  "registryDependencies": [
    "@flx/cta"
  ],
  "files": [
    {
      "path": "registry/blocks/hero/hero-03/hero-03.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'\n\nexport interface Hero03Props {\n  title: string\n  description: string\n  portraitImage: string\n  portraitAlt?: string\n  animation?: 'none' | 'subtle'\n  primaryCTA: CtaProps\n  secondaryCTA?: CtaProps\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: 'mx-auto max-w-lg text-sm sm:text-base leading-relaxed',\n    header: 'gap-5',\n    content: 'gap-14 sm:gap-20',\n    portrait: 'max-w-3xl',\n  },\n  compact: {\n    section: 'py-14 sm:py-20',\n    title: 'text-2xl sm:text-3xl md:text-4xl',\n    description: 'mx-auto max-w-md text-sm leading-relaxed',\n    header: 'gap-4',\n    content: 'gap-10 sm:gap-14',\n    portrait: 'max-w-2xl',\n  },\n} 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: [0.22, 1, 0.36, 1] },\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, ease: [0.22, 1, 0.36, 1] },\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 Hero03({\n  title,\n  description,\n  portraitImage,\n  portraitAlt = '',\n  animation = 'none',\n  primaryCTA,\n  secondaryCTA,\n  variant = 'standard',\n}: Readonly<Hero03Props>) {\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-serif font-normal 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-x-5 gap-y-3\">\n      {primaryCTA?.ctaEnabled && <Cta cta={primaryCTA} />}\n      {secondaryCTA?.ctaEnabled && (\n        <Cta\n          cta={{ ...secondaryCTA, variant: secondaryCTA.variant ?? 'link' }}\n        />\n      )}\n    </div>\n  )\n\n  const mediaElement = portraitImage && (\n    <div className={cn('relative mx-auto w-full', vs.portrait)}>\n      <div\n        className={cn(\n          'relative z-10 mx-auto w-full overflow-hidden',\n          'mask-x-from-75% mask-x-to-100%',\n          'mask-t-from-55% mask-t-to-100%',\n          'mask-b-from-55% mask-b-to-100%',\n          'mask-radial-[80%_70%] mask-radial-from-70% mask-radial-to-100% mask-radial-at-center',\n          'dark:opacity-85 dark:mix-blend-darken',\n        )}\n      >\n        <div\n          aria-hidden\n          className=\"bg-background/25 dark:bg-background/40 pointer-events-none absolute inset-0 mix-blend-overlay\"\n        />\n        <img\n          src={portraitImage}\n          alt={portraitAlt}\n          decoding=\"async\"\n          className=\"relative aspect-[5/4] w-full object-cover object-[center_15%] dark:mix-blend-lighten dark:brightness-[0.92] dark:contrast-[1.05] dark:saturate-[0.9]\"\n        />\n      </div>\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 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        <Reveal\n          active={animate}\n          className={cn(\n            'mx-auto flex w-full max-w-2xl flex-col items-center text-center',\n            vs.header,\n          )}\n        >\n          {titleElement}\n          {descriptionElement}\n          {ctasElement}\n        </Reveal>\n\n        <Reveal active={animate} variants={mediaItem} className=\"w-full\">\n          {mediaElement}\n        </Reveal>\n      </motion.div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/blocks/hero/hero-03/hero-03.tsx"
    },
    {
      "path": "registry/blocks/hero/hero-03/hero-03-example.tsx",
      "content": "import { Hero03, type Hero03Props } from './hero-03'\n\nexport const values = {\n  title: 'Ideas worth sharing with the world.',\n  description:\n    'Turn rough notes into polished stories. Write, refine, and publish from one calm workspace built for focus.',\n  portraitImage:\n    'https://images.unsplash.com/photo-1746467364902-ab40952e33fe?q=80&w=1131&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n  portraitAlt: 'Alt',\n  animation: 'subtle',\n  primaryCTA: {\n    ctaEnabled: true,\n    text: 'Get started',\n    link: '',\n    variant: 'default',\n    size: 'default',\n  },\n  secondaryCTA: {\n    ctaEnabled: true,\n    text: 'Learn more',\n    link: '',\n    variant: 'link',\n  },\n} satisfies Hero03Props\n\nexport function Hero03Example() {\n  return <Hero03 {...values} />\n}\n",
      "type": "registry:component",
      "target": "components/flx/blocks/hero/hero-03/hero-03-example.tsx"
    }
  ],
  "meta": {
    "iframeHeight": 1200
  },
  "type": "registry:block"
}