{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "content-04",
  "title": "Content 04",
  "description": "Two-column card grid with a serif section header, copy above each image, and subtle entrance motion.",
  "dependencies": [
    "motion",
    "react-wrap-balancer"
  ],
  "registryDependencies": [
    "card"
  ],
  "files": [
    {
      "path": "registry/blocks/content/content-04/content-04.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 {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/components/ui/card'\nimport { cn } from '@/lib/utils'\n\nexport interface Content04Item {\n  title: string\n  description?: string\n  media: {\n    src: string\n    alt: string\n  }\n}\n\nexport interface Content04Props {\n  title: string\n  description?: string\n  items: Content04Item[]\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    cardHeader: 'pt-6',\n    cardTitle: 'text-lg',\n    cardDescription: 'text-sm',\n    media: 'aspect-video min-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    cardHeader: 'pt-5',\n    cardTitle: 'text-base',\n    cardDescription: 'text-xs',\n    media: 'aspect-video min-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 cardItem: 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 Content04({\n  title,\n  description,\n  items,\n  variant = 'standard',\n  animation = 'none',\n}: Readonly<Content04Props>) {\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 renderCard = (itemData: Content04Item, index: number) => (\n    <Card className=\"h-full overflow-hidden pt-0 shadow-sm\">\n      <CardHeader className={vs.cardHeader}>\n        <CardTitle className={vs.cardTitle}>{itemData.title}</CardTitle>\n        {itemData.description && (\n          <CardDescription className={vs.cardDescription}>\n            {itemData.description}\n          </CardDescription>\n        )}\n      </CardHeader>\n      <CardContent className=\"mt-auto pt-0 pb-0\">\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}\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      </CardContent>\n    </Card>\n  )\n\n  const gridElement = (\n    <div className={cn('grid', vs.grid)}>\n      {items.map((itemData, index) => (\n        <div key={itemData.title + index}>{renderCard(itemData, index)}</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={cardItem}>\n          {renderCard(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\n        active={animate}\n        className={cn('flex max-w-2xl flex-col', vs.header)}\n      >\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-04/content-04.tsx"
    },
    {
      "path": "registry/blocks/content/content-04/content-04-example.tsx",
      "content": "import { Content04, type Content04Props } from './content-04'\n\nexport const values = {\n  title: 'Build with clarity',\n  description:\n    'Two focused stories, each with a headline, a short explanation, and a visual anchor.',\n  variant: 'standard',\n  animation: 'subtle',\n  items: [\n    {\n      title: 'Design',\n      description:\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    },\n    {\n      title: 'Components',\n      description:\n        'Pre-built blocks you can drop into any layout. Customize once, reuse everywhere.',\n      media: {\n        src: 'https://images.unsplash.com/photo-1683143724745-d66cf5ea5ce7?q=80&w=1202&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n        alt: 'alt image',\n      },\n    },\n  ],\n} satisfies Content04Props\n\nexport function Content04Example() {\n  return (\n    <Content04\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-04/content-04-example.tsx"
    }
  ],
  "meta": {
    "iframeHeight": 900
  },
  "type": "registry:block"
}