{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "content-07",
  "title": "Content 07",
  "description": "Two-column grid with serif header, media on top, copy, and optional CTA per column.",
  "dependencies": [
    "motion",
    "react-wrap-balancer"
  ],
  "registryDependencies": [
    "@flx/cta"
  ],
  "files": [
    {
      "path": "registry/blocks/content/content-07/content-07.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 Content07Item {\n  title?: string\n  content?: string\n  media?: {\n    src: string\n    alt: string\n  }\n  cta?: CtaProps\n}\n\nexport interface Content07Props {\n  title: string\n  description?: string\n  items: Content07Item[]\n  variant?: 'standard' | 'compact'\n  animation?: 'none' | 'subtle'\n}\n\nconst variantStyles = {\n  standard: {\n    container: 'py-12 sm:py-16',\n    section: 'gap-10 sm:gap-12',\n    header: 'gap-3',\n    title: 'text-2xl sm:text-3xl',\n    description: 'max-w-xl text-sm sm:text-base',\n    grid: 'grid-cols-1 gap-8 md:grid-cols-2',\n    column: 'gap-5',\n    copy: 'gap-2',\n    itemTitle: 'text-lg font-medium tracking-tight',\n    itemContent: 'text-sm',\n    media: 'h-64',\n    mediaRadius: 'rounded-lg',\n  },\n  compact: {\n    container: 'py-10 sm:py-12',\n    section: 'gap-8',\n    header: 'gap-2',\n    title: 'text-xl sm:text-2xl',\n    description: 'max-w-lg text-sm',\n    grid: 'grid-cols-1 gap-6 md:grid-cols-2',\n    column: 'gap-4',\n    copy: 'gap-1.5',\n    itemTitle: 'text-base font-medium tracking-tight',\n    itemContent: 'text-xs',\n    media: 'h-52',\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 columnItem: Variants = {\n  hidden: { opacity: 0, y: 16, filter: 'blur(8px)' },\n  visible: {\n    opacity: 1,\n    y: 0,\n    filter: 'blur(0px)',\n    transition: { duration: 0.55, ease: [0.22, 1, 0.36, 1] },\n  },\n}\n\nconst gridContainer: Variants = {\n  hidden: {},\n  visible: { transition: { staggerChildren: 0.08 } },\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 Content07({\n  title,\n  description,\n  items,\n  variant = 'standard',\n  animation = 'none',\n}: Readonly<Content07Props>) {\n  const reduce = useReducedMotion()\n  const animate = animation === 'subtle' && !reduce\n  const vs = variantStyles[variant]\n\n  if (!items.length) return null\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 className={cn('text-muted-foreground', vs.description)}>\n      <Balancer>{description}</Balancer>\n    </p>\n  )\n\n  const renderColumn = (itemData: Content07Item, index: number) => (\n    <article className={cn('flex flex-col', vs.column)}>\n      {itemData.media && (\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={itemData.media.src}\n            alt={itemData.media.alt || itemData.title || 'Content 07 image'}\n            loading={index === 0 ? 'eager' : 'lazy'}\n            decoding=\"async\"\n            fetchPriority={index === 0 ? 'high' : 'low'}\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      )}\n\n      <div className={cn('flex flex-col', vs.copy)}>\n        {itemData.title && (\n          <h3 className={vs.itemTitle}>{itemData.title}</h3>\n        )}\n        {itemData.content && (\n          <p\n            className={cn(\n              'text-muted-foreground whitespace-pre-line',\n              vs.itemContent,\n            )}\n          >\n            <Balancer>{itemData.content}</Balancer>\n          </p>\n        )}\n      </div>\n\n      {itemData.cta && <Cta cta={itemData.cta} />}\n    </article>\n  )\n\n  const gridElement = (\n    <div className={cn('grid', vs.grid)}>\n      {items.map((itemData, index) => (\n        <div key={`${itemData.title}-${index}`}>\n          {renderColumn(itemData, index)}\n        </div>\n      ))}\n    </div>\n  )\n\n  const animatedGridElement = (\n    <motion.div className={cn('grid', vs.grid)} variants={gridContainer}>\n      {items.map((itemData, index) => (\n        <motion.div key={`${itemData.title}-${index}`} variants={columnItem}>\n          {renderColumn(itemData, index)}\n        </motion.div>\n      ))}\n    </motion.div>\n  )\n\n  const body = (\n    <>\n      {(title || description) && (\n        <div className={cn('flex max-w-2xl flex-col', vs.header)}>\n          {titleElement}\n          {descriptionElement}\n        </div>\n      )}\n      {gridElement}\n    </>\n  )\n\n  const animatedBody = (\n    <>\n      <Reveal active={animate} className={cn('flex max-w-2xl flex-col', vs.header)}>\n        {titleElement}\n        {descriptionElement}\n      </Reveal>\n      <Reveal active={animate}>{animatedGridElement}</Reveal>\n    </>\n  )\n\n  if (animate) {\n    return (\n      <section className=\"w-full\">\n        <div\n          className={cn(\n            'mx-auto flex w-full max-w-6xl flex-col px-6',\n            vs.container,\n            vs.section,\n          )}\n        >\n          <motion.div\n            className={cn('flex flex-col', vs.section)}\n            variants={container}\n            initial=\"hidden\"\n            whileInView=\"visible\"\n            viewport={viewport}\n          >\n            {animatedBody}\n          </motion.div>\n        </div>\n      </section>\n    )\n  }\n\n  return (\n    <section className=\"w-full\">\n      <div\n        className={cn(\n          'mx-auto flex w-full max-w-6xl flex-col px-6',\n          vs.container,\n          vs.section,\n        )}\n      >\n        {body}\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/blocks/content/content-07/content-07.tsx"
    },
    {
      "path": "registry/blocks/content/content-07/content-07-example.tsx",
      "content": "import { Content07, type Content07Props } from './content-07'\n\nexport const values = {\n  title: 'Two ways to move faster',\n  description:\n    'Pair a strong visual with clear copy and an optional action — side by side.',\n  variant: 'standard',\n  animation: 'subtle',\n  items: [\n    {\n      title: 'Design',\n      content:\n        'Clean, accessible components that make your product feel modern and easy to use.',\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: 'Learn more',\n        link: '',\n        variant: 'outline',\n      },\n    },\n    {\n      title: 'Developer Experience',\n      content:\n        'Built with TypeScript, clear APIs, and documentation that gets you shipping faster.',\n      media: {\n        src: 'https://images.unsplash.com/photo-1577083862054-7324cd025fa6?q=80&w=1241&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: 'outline',\n      },\n    },\n  ],\n} satisfies Content07Props\n\nexport function Content07Example() {\n  return (\n    <Content07\n      title={values.title}\n      description={values.description}\n      items={values.items}\n      variant={values.variant}\n      animation={values.animation}\n    />\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/blocks/content/content-07/content-07-example.tsx"
    }
  ],
  "meta": {
    "iframeHeight": 800
  },
  "type": "registry:block"
}