{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-05",
  "title": "Hero 05",
  "description": "An editorial hero with a left tagline, right-aligned headline and copy, and a full-width image below.",
  "dependencies": [
    "react-wrap-balancer",
    "motion"
  ],
  "registryDependencies": [
    "@flx/cta"
  ],
  "files": [
    {
      "path": "registry/blocks/hero/hero-05/hero-05.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 Hero05Props {\n  tagline: string\n  title: string\n  description: string\n  landscapeImage: string\n  landscapeAlt?: string\n  animation?: 'none' | 'subtle'\n  primaryCTA?: CtaProps\n  secondaryCTA?: CtaProps\n  variant?: 'standard' | 'compact'\n}\n\nconst variantStyles = {\n  standard: {\n    copy: 'pt-20 pb-10 sm:pt-28 sm:pb-12 lg:pt-32',\n    tagline: 'text-sm sm:text-base',\n    title: 'text-3xl sm:text-4xl md:text-5xl',\n    description: 'text-sm sm:text-base',\n    header: 'gap-6 sm:gap-8',\n    grid: 'gap-10',\n  },\n  compact: {\n    copy: 'pt-14 pb-8 sm:pt-20 sm:pb-10 lg:pt-24',\n    tagline: 'text-sm',\n    title: 'text-2xl sm:text-3xl md:text-4xl',\n    description: 'text-sm',\n    header: 'gap-4 sm:gap-5',\n    grid: 'gap-8',\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.28, ease: [0.22, 1, 0.36, 1] },\n  },\n}\n\nconst mediaItem: Variants = {\n  hidden: { opacity: 0, y: 20, filter: 'blur(8px)' },\n  visible: {\n    opacity: 1,\n    y: 0,\n    filter: 'blur(0px)',\n    transition: { duration: 0.32, 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 Hero05({\n  tagline,\n  title,\n  description,\n  landscapeImage,\n  landscapeAlt = '',\n  animation = 'none',\n  primaryCTA,\n  secondaryCTA,\n  variant = 'standard',\n}: Readonly<Hero05Props>) {\n  const reduce = useReducedMotion()\n  const animate = animation === 'subtle' && !reduce\n  const vs = variantStyles[variant]\n\n  const taglineElement = tagline && (\n    <p\n      className={cn(\n        'text-muted-foreground max-w-xs leading-relaxed tracking-tight',\n        vs.tagline,\n      )}\n    >\n      <Balancer>{tagline}</Balancer>\n    </p>\n  )\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\n      className={cn(\n        'text-muted-foreground max-w-xl leading-relaxed',\n        vs.description,\n      )}\n    >\n      <Balancer>{description}</Balancer>\n    </p>\n  )\n\n  const ctasElement = (primaryCTA?.ctaEnabled || secondaryCTA?.ctaEnabled) && (\n    <div className=\"flex flex-wrap items-center gap-x-4 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 = landscapeImage && (\n    <div className=\"relative w-full overflow-hidden\">\n      <div\n        className={cn(\n          'relative overflow-hidden rounded-b-sm',\n          'mask-t-from-80% mask-t-to-95%',\n        )}\n      >\n        <div\n          aria-hidden\n          className=\"bg-background/15 dark:bg-background/30 pointer-events-none absolute inset-0 z-10 mix-blend-overlay\"\n        />\n        <img\n          src={landscapeImage}\n          alt={landscapeAlt}\n          decoding=\"async\"\n          className=\"aspect-[2/1] w-full object-cover object-center outline outline-black/10 sm:aspect-[9/4] dark:outline-white/10 dark:brightness-[0.97] dark:saturate-[0.92]\"\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 grid max-w-7xl grid-cols-1 px-6 lg:grid-cols-12',\n          vs.copy,\n          vs.grid,\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=\"flex lg:col-span-4 lg:col-start-1 lg:items-end lg:self-stretch\"\n        >\n          {taglineElement}\n        </Reveal>\n\n        <Reveal\n          active={animate}\n          className={cn(\n            'flex flex-col items-start lg:col-span-6 lg:col-start-7',\n            vs.header,\n          )}\n        >\n          {titleElement}\n          {descriptionElement}\n          {ctasElement}\n        </Reveal>\n      </motion.div>\n\n      <Reveal active={animate} variants={mediaItem} className=\"w-full\">\n        {mediaElement}\n      </Reveal>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/blocks/hero/hero-05/hero-05.tsx"
    },
    {
      "path": "registry/blocks/hero/hero-05/hero-05-example.tsx",
      "content": "import { Hero05, type Hero05Props } from './hero-05'\n\nexport const values = {\n  tagline: 'Brand, product, and story for teams building something new',\n  title:\n    'A creative studio for founders who want their work to feel considered.',\n  description:\n    'We help early stage companies turn rough ideas into clear identities, thoughtful digital products, and messaging people remember. Strategy, design, and execution in one place.',\n  landscapeImage:\n    'https://images.unsplash.com/photo-1578301978018-3005759f48f7?q=80&w=1144&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n  landscapeAlt: 'Alt',\n  animation: 'subtle',\n  primaryCTA: {\n    ctaEnabled: false,\n    text: 'Start a project',\n    link: '',\n    variant: 'default',\n  },\n  secondaryCTA: {\n    ctaEnabled: false,\n    text: 'View work',\n    link: '',\n    variant: 'link',\n  },\n} satisfies Hero05Props\n\nexport function Hero05Example() {\n  return <Hero05 {...values} />\n}\n",
      "type": "registry:component",
      "target": "components/flx/blocks/hero/hero-05/hero-05-example.tsx"
    }
  ],
  "meta": {
    "iframeHeight": 1100
  },
  "type": "registry:block"
}