{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-08",
  "title": "Hero 08",
  "description": "A split hero with a bold headline, avatar social proof, and two image cards with invertible overlay text and CTAs.",
  "dependencies": [
    "react-wrap-balancer",
    "motion"
  ],
  "registryDependencies": [
    "@flx/cta",
    "avatar"
  ],
  "files": [
    {
      "path": "registry/blocks/hero/hero-08/hero-08.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 { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\nimport { cn } from '@/lib/utils'\n\nimport { Cta, type CtaProps } from '../../shared/cta'\n\nexport interface Hero08Avatar {\n  src: string\n  fallback: string\n}\n\nexport interface Hero08Card {\n  title: string\n  subtitle: string\n  image: string\n  imageAlt?: string\n  invert?: boolean\n  cta: CtaProps\n}\n\nexport interface Hero08Props {\n  title: string\n  description: string\n  socialProof?: string\n  avatars?: Hero08Avatar[]\n  cards: Hero08Card[]\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: 'text-sm sm:text-base',\n    header: 'gap-10 lg:gap-16',\n    content: 'gap-12 sm:gap-16',\n    grid: 'gap-5 sm:gap-6',\n    card: 'aspect-16/10',\n    cardTitle: 'text-2xl sm:text-3xl',\n    cardBody: 'p-6 sm:p-8',\n  },\n  compact: {\n    section: 'py-14 sm:py-20',\n    title: 'text-2xl sm:text-3xl md:text-4xl',\n    description: 'text-sm',\n    header: 'gap-8 lg:gap-12',\n    content: 'gap-10 sm:gap-12',\n    grid: 'gap-4 sm:gap-5',\n    card: 'aspect-16/11',\n    cardTitle: 'text-xl sm:text-2xl',\n    cardBody: 'p-5 sm:p-6',\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\nfunction FeatureCard({\n  card,\n  vs,\n}: Readonly<{ card: Hero08Card; vs: (typeof variantStyles)[keyof typeof variantStyles] }>) {\n  const titleClass = card.invert ? 'text-white' : 'text-foreground'\n  const subtitleClass = card.invert ? 'text-white/80' : 'text-muted-foreground'\n\n  return (\n    <div\n      className={cn(\n        'relative isolate w-full overflow-hidden rounded-md outline outline-black/10 dark:outline-white/10',\n        vs.card,\n      )}\n    >\n      {card.image && (\n        <img\n          src={card.image}\n          alt={card.imageAlt ?? ''}\n          decoding=\"async\"\n          className=\"absolute inset-0 -z-10 size-full object-cover\"\n        />\n      )}\n\n      {card.invert && (\n        <div\n          aria-hidden\n          className=\"absolute inset-0 -z-10 bg-linear-to-br from-black/40 via-black/15 to-transparent\"\n        />\n      )}\n\n      <div className={cn('flex h-full flex-col items-start', vs.cardBody)}>\n        <h3 className={cn('font-semibold tracking-tight', vs.cardTitle, titleClass)}>\n          <Balancer>{card.title}</Balancer>\n        </h3>\n        <p className={cn('mt-1 text-sm', subtitleClass)}>{card.subtitle}</p>\n        {card.cta?.ctaEnabled && (\n          <div className=\"mt-4\">\n            <Cta cta={card.cta} invert={card.invert} />\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport function Hero08({\n  title,\n  description,\n  socialProof,\n  avatars,\n  cards,\n  animation = 'none',\n  variant = 'standard',\n}: Readonly<Hero08Props>) {\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 max-w-sm', vs.description)}>\n      <Balancer>{description}</Balancer>\n    </p>\n  )\n\n  const socialProofElement = (socialProof || avatars?.length) && (\n    <div className=\"flex flex-col items-start gap-3\">\n      {socialProof && (\n        <p className=\"text-foreground text-sm font-semibold\">{socialProof}</p>\n      )}\n      {avatars?.length ? (\n        <div className=\"flex -space-x-2.5\">\n          {avatars.map((a) => (\n            <Avatar\n              key={a.src}\n              className=\"ring-background size-9 ring-2\"\n            >\n              <AvatarImage src={a.src} alt=\"\" />\n              <AvatarFallback className=\"text-xs\">{a.fallback}</AvatarFallback>\n            </Avatar>\n          ))}\n        </div>\n      ) : null}\n    </div>\n  )\n\n  const cardsElement = cards?.length ? (\n    <div className={cn('grid grid-cols-1 md:grid-cols-2', vs.grid)}>\n      {cards.map((card) => (\n        <FeatureCard key={card.title} card={card} vs={vs} />\n      ))}\n    </div>\n  ) : null\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            'grid grid-cols-1 items-end lg:grid-cols-2',\n            vs.header,\n          )}\n        >\n          {titleElement}\n          <div className=\"flex flex-col items-start gap-5\">\n            {descriptionElement}\n            {socialProofElement}\n          </div>\n        </Reveal>\n\n        <Reveal active={animate} variants={mediaItem} className=\"w-full\">\n          {cardsElement}\n        </Reveal>\n      </motion.div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/blocks/hero/hero-08/hero-08.tsx"
    },
    {
      "path": "registry/blocks/hero/hero-08/hero-08-example.tsx",
      "content": "import { Hero08, type Hero08Props } from './hero-08'\n\nexport const values = {\n  title: 'Learn the craft behind every great design',\n  description:\n    'Hands-on courses taught by working designers, built to fit around your schedule.',\n  socialProof: 'Join 40,000+ Makers Learning With Us',\n  avatars: [\n    {\n      src: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=64&q=80',\n      fallback: 'JD',\n    },\n    {\n      src: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=64&q=80',\n      fallback: 'SL',\n    },\n    {\n      src: 'https://images.unsplash.com/photo-1633332755192-727a05c4013d?w=64&q=80',\n      fallback: 'MV',\n    },\n  ],\n  cards: [\n    {\n      title: 'Design Fundamentals',\n      subtitle: 'Starting at $ 29 per month',\n      image:\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      imageAlt: 'Designers collaborating at a shared desk',\n      invert: true,\n      cta: {\n        ctaEnabled: true,\n        text: 'Get Started',\n        link: '',\n        size: 'default',\n      },\n    },\n    {\n      title: 'Advanced Motion',\n      subtitle: 'Starting at $ 29 per month',\n      image:\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      imageAlt: 'Designer working on a laptop in a studio',\n      invert: true,\n      cta: {\n        ctaEnabled: true,\n        text: 'Get Started',\n        link: '',\n        size: 'default',\n      },\n    },\n  ],\n  animation: 'subtle',\n} satisfies Hero08Props\n\nexport function Hero08Example() {\n  return <Hero08 {...values} />\n}\n",
      "type": "registry:component",
      "target": "components/flx/blocks/hero/hero-08/hero-08-example.tsx"
    }
  ],
  "meta": {
    "iframeHeight": 820
  },
  "type": "registry:block"
}