{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-mixed-bento-01",
  "title": "Feature Mixed Bento",
  "description": "A mono label over four cards on a five-column grid, each setting its title, copy, and image a different way, over soft blurred glows and a faint plus pattern",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.cortexcn.dev/r/utils.json",
    "card"
  ],
  "files": [
    {
      "path": "registry/blocks/feature-mixed-bento-01/components/feature-mixed-bento.tsx",
      "content": "\"use client\";\n\nimport { useId } from \"react\";\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\";\nimport { cn } from \"@/lib/utils\";\n\n// Cortexcn item \"feature-mixed-bento-01\", revision a75065bea0de, MIT license.\n// https://ui.cortexcn.dev/r/v/feature-mixed-bento-01/a75065bea0de.json\n\ninterface BentoImage {\n  src: string;\n  alt: string;\n}\n\nexport interface BentoFeature {\n  title: string;\n  /** Each entry is its own paragraph. */\n  description: string[];\n  image: BentoImage;\n}\n\nexport interface FeatureMixedBentoProps {\n  /** Small mono label above the grid. */\n  eyebrow?: string;\n  /**\n   * Four cards, each laid out its own way: image beside the copy, below it,\n   * above it, then rising from the bottom edge. More cards repeat the cycle.\n   */\n  features?: BentoFeature[];\n  className?: string;\n}\n\n/** The flower paintings from the Cortexcn site. */\nconst ART_BASE = \"https://www.cortexcn.dev/images/ui-home\";\n\nconst DEFAULT_FEATURES: BentoFeature[] = [\n  {\n    title: \"Own every line of code\",\n    description: [\n      \"The shadcn CLI copies each component's source into your project, so nothing hides inside a package you can't change.\",\n      \"Read it, restyle it, and ship it as yours, with no version to wait on and nothing to eject from later.\",\n    ],\n    image: {\n      src: `${ART_BASE}/pastel-meadow-flowers.webp`,\n      alt: \"A painting of white flowers swaying in a pale blue meadow\",\n    },\n  },\n  {\n    title: \"Charts that match your theme\",\n    description: [\n      \"Area, bar, line, sankey, choropleth, and more, drawn with your color tokens.\",\n      \"Tooltips, legends, and animation come wired up, and every chart follows light and dark mode on its own.\",\n    ],\n    image: {\n      src: `${ART_BASE}/meadow-grass.webp`,\n      alt: \"A painting of tall grass bending in the wind\",\n    },\n  },\n  {\n    title: \"Whole sections, ready to drop in\",\n    description: [\n      \"Hero, feature, and services blocks you can preview live, then add to a page with one command.\",\n    ],\n    image: {\n      src: `${ART_BASE}/white-blooms.webp`,\n      alt: \"A painting of white blooms drifting in the wind\",\n    },\n  },\n  {\n    title: \"Built for your AI assistant\",\n    description: [\n      \"Point Claude Code, Cursor, or Codex at the Cortexcn MCP server and it can search every component, read the docs, and install what it needs.\",\n    ],\n    image: {\n      src: `${ART_BASE}/blue-white-flowers.webp`,\n      alt: \"A painting of white flowers against a pale blue sky\",\n    },\n  },\n];\n\ntype Layout = \"beside\" | \"below\" | \"above\" | \"rising\";\n\n/** Card shapes in order on the five-column grid: three and two, then two and three. */\nconst LAYOUTS: Layout[] = [\"beside\", \"below\", \"above\", \"rising\"];\n\nconst SPANS: Record<Layout, string> = {\n  beside: \"md:col-span-3\",\n  below: \"md:col-span-2\",\n  above: \"md:col-span-2\",\n  rising: \"md:col-span-3\",\n};\n\nfunction FeatureText({\n  feature,\n  className,\n}: {\n  feature: BentoFeature;\n  className?: string;\n}) {\n  return (\n    <CardHeader className={cn(\"content-start gap-3 p-0\", className)}>\n      <CardTitle className=\"text-balance font-medium text-2xl tracking-tight md:text-3xl\">\n        <h3>{feature.title}</h3>\n      </CardTitle>\n      {feature.description.map((paragraph) => (\n        <CardDescription\n          className=\"font-medium text-base leading-snug\"\n          key={paragraph}\n        >\n          {paragraph}\n        </CardDescription>\n      ))}\n    </CardHeader>\n  );\n}\n\nfunction FeatureImage({\n  image,\n  className,\n}: {\n  image: BentoImage;\n  className?: string;\n}) {\n  return (\n    // biome-ignore lint/performance/noImgElement: framework-agnostic registry block\n    <img\n      alt={image.alt}\n      className={cn(\"w-full object-cover\", className)}\n      decoding=\"async\"\n      height={896}\n      loading=\"lazy\"\n      src={image.src}\n      width={1344}\n    />\n  );\n}\n\nfunction FeatureCard({\n  feature,\n  layout,\n  span,\n}: {\n  feature: BentoFeature;\n  layout: Layout;\n  span: string;\n}) {\n  if (layout === \"beside\") {\n    // The image runs off the card's right edge.\n    return (\n      <Card\n        className={cn(\"gap-6 py-6 pl-6 shadow-xl md:flex-row md:gap-12\", span)}\n      >\n        <FeatureText className=\"pr-6 md:flex-1 md:pr-0\" feature={feature} />\n        <CardContent className=\"relative aspect-16/10 overflow-hidden rounded-l-xl border border-r-0 p-0 md:aspect-auto md:min-h-64 md:flex-1\">\n          <FeatureImage\n            className=\"absolute inset-0 size-full\"\n            image={feature.image}\n          />\n        </CardContent>\n      </Card>\n    );\n  }\n\n  if (layout === \"below\") {\n    return (\n      <Card className={cn(\"justify-center gap-6 p-6 shadow-xl\", span)}>\n        <FeatureText feature={feature} />\n        <CardContent className=\"p-0 not-first:pt-0\">\n          <FeatureImage\n            className=\"aspect-[2/1.1] rounded-xl\"\n            image={feature.image}\n          />\n        </CardContent>\n      </Card>\n    );\n  }\n\n  if (layout === \"above\") {\n    return (\n      <Card className={cn(\"gap-6 p-6 shadow-xl\", span)}>\n        <CardContent className=\"p-0\">\n          <FeatureImage\n            className=\"aspect-2/1 rounded-xl\"\n            image={feature.image}\n          />\n        </CardContent>\n        <FeatureText feature={feature} />\n      </Card>\n    );\n  }\n\n  // The image rises from the card's bottom edge.\n  return (\n    <Card className={cn(\"gap-8 pt-6 pb-0 shadow-xl\", span)}>\n      <FeatureText className=\"px-6\" feature={feature} />\n      <CardContent className=\"relative mx-6 mt-auto aspect-[2/1.25] overflow-hidden rounded-t-xl border border-b-0 p-0 not-first:pt-0 md:mx-auto md:w-full md:max-w-100 lg:max-w-125\">\n        <FeatureImage\n          className=\"absolute inset-0 size-full\"\n          image={feature.image}\n        />\n      </CardContent>\n    </Card>\n  );\n}\n\nexport function FeatureMixedBento({\n  eyebrow = \"Why Cortexcn?\",\n  features = DEFAULT_FEATURES,\n  className,\n}: FeatureMixedBentoProps) {\n  const patternId = useId();\n\n  return (\n    <section\n      className={cn(\n        \"relative isolate overflow-hidden px-6 py-24 sm:py-32\",\n        className,\n      )}\n    >\n      <div\n        aria-hidden=\"true\"\n        className=\"pointer-events-none absolute inset-0 -z-10\"\n      >\n        <div className=\"absolute top-1/2 size-[700px] -translate-y-1/2 rounded-full bg-chart-1/30 blur-[300px]\" />\n        <div className=\"absolute top-1/2 right-0 size-[700px] -translate-y-1/2 -rotate-12 rounded-full bg-chart-2/15 blur-[300px]\" />\n        <div className=\"absolute right-20 bottom-10 h-[500px] w-[800px] -rotate-12 rounded-full bg-chart-3/[0.06] blur-[100px]\" />\n      </div>\n      <div\n        aria-hidden=\"true\"\n        className=\"pointer-events-none absolute -inset-x-20 inset-y-0 -z-10 [mask-image:radial-gradient(circle_at_center,black_0%,black_20%,transparent_85%)]\"\n      >\n        <svg\n          aria-hidden=\"true\"\n          className=\"size-full text-foreground/5\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <defs>\n            <pattern\n              height=\"16\"\n              id={patternId}\n              patternUnits=\"userSpaceOnUse\"\n              width=\"16\"\n            >\n              <path d=\"M8 5v6M5 8h6\" stroke=\"currentColor\" strokeWidth=\"1\" />\n            </pattern>\n          </defs>\n          <rect fill={`url(#${patternId})`} height=\"100%\" width=\"100%\" />\n        </svg>\n      </div>\n\n      <div className=\"mx-auto flex max-w-6xl flex-col gap-8\">\n        <h2 className=\"font-mono font-semibold text-muted-foreground text-sm uppercase tracking-widest\">\n          {eyebrow}\n        </h2>\n        <div className=\"grid gap-6 md:grid-cols-5\">\n          {features.map((feature, index) => {\n            const layout = LAYOUTS[index % LAYOUTS.length] ?? \"beside\";\n            return (\n              <FeatureCard\n                feature={feature}\n                key={feature.title}\n                layout={layout}\n                span={SPANS[layout]}\n              />\n            );\n          })}\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/feature-mixed-bento.tsx"
    }
  ],
  "type": "registry:block",
  "author": "Cortexcn (https://ui.cortexcn.dev)",
  "meta": {
    "license": "MIT",
    "revision": "a75065bea0de"
  }
}