{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "content-06",
  "title": "Content 06",
  "description": "Two-column split with serif headline, supporting copy, optional CTA, and a media panel.",
  "dependencies": [
    "motion",
    "react-wrap-balancer"
  ],
  "registryDependencies": [
    "@flx/cta"
  ],
  "files": [
    {
      "path": "registry/blocks/content/content-06/content-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 { cn } from '@/lib/utils'\n\nexport interface Content06Props {\n  title: string\n  description: string\n  media: {\n    src: string\n    alt: string\n  }\n  cta?: CtaProps\n  variant?: 'standard' | 'compact'\n  animation?: 'none' | 'subtle'\n}\n\nconst variantStyles = {\n  standard: {\n    container: 'py-12 sm:py-16',\n    grid: 'grid-cols-1 gap-10 md:grid-cols-2 md:items-center md:gap-14',\n    copy: 'gap-8',\n    header: 'gap-3',\n    title: 'text-2xl sm:text-3xl',\n    description: 'max-w-sm text-sm sm:text-base',\n    media: 'min-h-80 md:min-h-[420px]',\n    mediaRadius: 'rounded-lg',\n  },\n  compact: {\n    container: 'py-10 sm:py-12',\n    grid: 'grid-cols-1 gap-8 md:grid-cols-2 md:items-center md:gap-10',\n    copy: 'gap-6',\n    header: 'gap-2',\n    title: 'text-xl sm:text-2xl',\n    description: 'max-w-sm text-sm',\n    media: 'min-h-64 md:min-h-80',\n    mediaRadius: 'rounded-md',\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 mediaEnter: Variants = {\n  hidden: { opacity: 0, scale: 0.96, filter: 'blur(8px)' },\n  visible: {\n    opacity: 1,\n    scale: 1,\n    filter: 'blur(0px)',\n    transition: { duration: 0.75, ease: [0.22, 1, 0.36, 1], delay: 0.08 },\n  },\n}\n\nconst viewport = {\n  once: true,\n  margin: '-80px' as const,\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 Content06({\n  title,\n  description,\n  media,\n  cta,\n  variant = 'standard',\n  animation = 'none',\n}: Readonly<Content06Props>) {\n  const reduce = useReducedMotion()\n  const animate = animation === 'subtle' && !reduce\n  const vs = variantStyles[variant]\n\n  const titleElement = title && (\n    <h2\n      className={cn(\n        'text-foreground font-serif font-normal tracking-tight text-balance',\n        vs.title,\n      )}\n    >\n      <Balancer>{title}</Balancer>\n    </h2>\n  )\n\n  const descriptionElement = description && (\n    <p\n      className={cn(\n        'text-muted-foreground whitespace-pre-line',\n        vs.description,\n      )}\n    >\n      <Balancer>{description}</Balancer>\n    </p>\n  )\n\n  const ctaElement = cta?.ctaEnabled && <Cta cta={cta} />\n\n  const copyElement = (\n    <div\n      className={cn(\n        'order-1 flex w-full min-w-0 flex-col self-center',\n        vs.copy,\n      )}\n    >\n      <div className={cn('flex flex-col', vs.header)}>\n        {titleElement}\n        {descriptionElement}\n      </div>\n      {ctaElement}\n    </div>\n  )\n\n  const mediaElement = media && (\n    <div className=\"relative order-2 flex md:h-full md:items-center\">\n      <div\n        className={cn(\n          'group/image relative w-full overflow-hidden outline outline-black/10 dark:outline-white/10',\n          vs.media,\n          vs.mediaRadius,\n        )}\n      >\n        <img\n          src={media.src}\n          alt={media.alt || title}\n          loading=\"eager\"\n          decoding=\"async\"\n          fetchPriority=\"high\"\n          className=\"absolute inset-0 size-full object-cover transition-transform duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] group-hover/image:scale-[1.03]\"\n        />\n      </div>\n    </div>\n  )\n\n  const gridElement = (\n    <div className={cn('grid w-full overflow-x-hidden', vs.grid)}>\n      {copyElement}\n      {mediaElement}\n    </div>\n  )\n\n  const animatedGridElement = (\n    <motion.div\n      className={cn('grid w-full overflow-x-hidden', vs.grid)}\n      variants={container}\n      initial=\"hidden\"\n      whileInView=\"visible\"\n      viewport={viewport}\n    >\n      <Reveal active={animate} className=\"w-full self-center\">\n        {copyElement}\n      </Reveal>\n      <Reveal active={animate} variants={mediaEnter} className=\"relative min-w-0\">\n        {mediaElement}\n      </Reveal>\n    </motion.div>\n  )\n\n  return (\n    <section className=\"w-full\">\n      <div className={cn('mx-auto w-full max-w-6xl px-6', vs.container)}>\n        {animate ? animatedGridElement : gridElement}\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/blocks/content/content-06/content-06.tsx"
    },
    {
      "path": "registry/blocks/content/content-06/content-06-example.tsx",
      "content": "import { Content06, type Content06Props } from './content-06'\n\nexport const values = {\n  title: 'Ship with confidence',\n  description:\n    'Built with TypeScript, clear APIs, and documentation that gets you moving faster.',\n  variant: 'standard',\n  animation: 'subtle',\n  media: {\n    src: 'https://images.unsplash.com/photo-1695152560286-b09a744834e1?q=80&w=1133&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n    alt: 'alt image',\n  },\n  cta: {\n    ctaEnabled: true,\n    text: 'Get started',\n    link: '',\n    variant: 'default',\n  },\n} satisfies Content06Props\n\nexport function Content06Example() {\n  return (\n    <Content06\n      title={values.title}\n      description={values.description}\n      media={values.media}\n      cta={values.cta}\n      variant={values.variant}\n      animation={values.animation}\n    />\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/blocks/content/content-06/content-06-example.tsx"
    }
  ],
  "meta": {
    "iframeHeight": 700
  },
  "type": "registry:block"
}