{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "content-09",
  "title": "Content 09",
  "description": "Two-column icon card grid with serif section header and subtle entrance motion.",
  "dependencies": [
    "motion",
    "react-wrap-balancer"
  ],
  "registryDependencies": [
    "@flx/dynamic-icon",
    "card"
  ],
  "files": [
    {
      "path": "registry/blocks/content/content-09/content-09.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { icons } from 'lucide-react'\nimport { motion, useReducedMotion, type Variants } from 'motion/react'\nimport Balancer from 'react-wrap-balancer'\n\nimport {\n  Card,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/components/ui/card'\nimport { cn } from '@/lib/utils'\n\nimport { Icon } from '../../shared/dynamic-icon'\n\nexport interface Content09Item {\n  title: string\n  description: string\n  icon: string\n}\n\nexport interface Content09Props {\n  title: string\n  description?: string\n  items: Content09Item[]\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-6 md:grid-cols-2',\n    cardHeader: 'gap-3',\n    icon: 'size-5',\n    cardTitle: 'text-lg',\n    cardDescription: 'text-sm',\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-4 md:grid-cols-2',\n    cardHeader: 'gap-2',\n    icon: 'size-4',\n    cardTitle: 'text-base',\n    cardDescription: 'text-xs',\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 Content09({\n  title,\n  description,\n  items,\n  variant = 'standard',\n  animation = 'none',\n}: Readonly<Content09Props>) {\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: Content09Item, index: number) => (\n    <Card className=\"h-full shadow-sm\">\n      <CardHeader className={cn('flex flex-col', vs.cardHeader)}>\n        {itemData.icon && (\n          <Icon\n            name={itemData.icon as keyof typeof icons}\n            className={cn('text-muted-foreground shrink-0', vs.icon)}\n          />\n        )}\n        <CardTitle className={vs.cardTitle}>{itemData.title}</CardTitle>\n        {itemData.description && (\n          <CardDescription className={vs.cardDescription}>\n            <Balancer>{itemData.description}</Balancer>\n          </CardDescription>\n        )}\n      </CardHeader>\n    </Card>\n  )\n\n  const gridElement = (\n    <ul className={cn('m-0 grid list-none p-0', vs.grid)}>\n      {items.map((itemData, index) => (\n        <li key={`${itemData.title}-${index}`} className=\"h-full\">\n          {renderCard(itemData, index)}\n        </li>\n      ))}\n    </ul>\n  )\n\n  const animatedGridElement = (\n    <motion.ul\n      className={cn('m-0 grid list-none p-0', vs.grid)}\n      variants={gridContainer}\n    >\n      {items.map((itemData, index) => (\n        <motion.li\n          key={`${itemData.title}-${index}`}\n          className=\"h-full\"\n          variants={cardItem}\n        >\n          {renderCard(itemData, index)}\n        </motion.li>\n      ))}\n    </motion.ul>\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-09/content-09.tsx"
    },
    {
      "path": "registry/blocks/content/content-09/content-09-example.tsx",
      "content": "import { Content09, type Content09Props } from './content-09'\n\nexport const values = {\n  title: 'What we offer',\n  description:\n    'Four focused capabilities, each with a clear icon, headline, and short explanation.',\n  variant: 'standard',\n  animation: 'subtle',\n  items: [\n    {\n      title: 'Modern Design',\n      description:\n        'Beautiful and contemporary UI components that make your projects stand out.',\n      icon: 'Palette',\n    },\n    {\n      title: 'Developer Experience',\n      description:\n        'Built with developers in mind. Easy to use, well documented, and highly customizable.',\n      icon: 'Code',\n    },\n    {\n      title: 'Community Driven',\n      description:\n        'Join thousands of developers contributing to make UI development better for everyone.',\n      icon: 'Users',\n    },\n    {\n      title: 'Fast Performance',\n      description: 'Optimized for speed and efficiency right out of the box.',\n      icon: 'Zap',\n    },\n  ],\n} satisfies Content09Props\n\nexport function Content09Example() {\n  return (\n    <Content09\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-09/content-09-example.tsx"
    }
  ],
  "meta": {
    "iframeHeight": 700
  },
  "type": "registry:block"
}