{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-bento-grid-01",
  "title": "Feature Bento Grid",
  "description": "A bento of photo tiles, logo tiles, and stat cards on a twelve-column grid, with one call to action",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.cortexcn.dev/r/utils.json",
    "button"
  ],
  "files": [
    {
      "path": "registry/blocks/feature-bento-grid-01/components/feature-bento-grid.tsx",
      "content": "import type { ReactNode } from \"react\";\nimport { buttonVariants } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\n// Cortexcn item \"feature-bento-grid-01\", revision 3604419d69ba, MIT license.\n// https://ui.cortexcn.dev/r/v/feature-bento-grid-01/3604419d69ba.json\n\ninterface BentoImage {\n  src: string;\n  alt: string;\n}\n\ninterface BentoAction {\n  label: string;\n  href: string;\n}\n\ninterface BentoStat {\n  value: string;\n  /** Smaller text set beside the value, such as \"%\" or \"+\". */\n  suffix?: string;\n  label: string;\n}\n\nexport interface FeatureBentoGridProps {\n  /** The tall photo tile that opens the grid. */\n  hero?: { image: BentoImage; label: string };\n  /** Caption on the tall tile that shows the logo. */\n  logoCaption?: string;\n  stat?: BentoStat;\n  /** The wide card with a large figure and one call to action. */\n  highlight?: { value: string; label: string; action: BentoAction };\n  /** The figure over a row of theme swatches. */\n  themes?: BentoStat;\n  /** The wide photo tile with an icon, title, and two-line caption. */\n  closing?: { image: BentoImage; title: string; lines: [string, string] };\n  className?: string;\n}\n\n/** Sample photo from Unsplash (free to use under the Unsplash License). */\nfunction unsplash(id: string, width: number) {\n  return `https://images.unsplash.com/photo-${id}?w=${width}&q=80&auto=format&fit=crop`;\n}\n\nconst DEFAULT_HERO = {\n  image: {\n    src: unsplash(\"1521194263619-39ecc5b55c61\", 1000),\n    alt: \"Sunlight falling in sharp shapes across a concrete wall\",\n  },\n  label: \"Designed with intent.\",\n};\n\nconst DEFAULT_STAT: BentoStat = {\n  value: \"100\",\n  suffix: \"%\",\n  label: \"Open code, copied into your project\",\n};\n\nconst DEFAULT_HIGHLIGHT = {\n  value: \"1 command\",\n  label: \"Adds any block to your project with the shadcn CLI\",\n  action: { label: \"Browse blocks\", href: \"#\" },\n};\n\nconst DEFAULT_THEMES: BentoStat = {\n  value: \"2\",\n  label: \"Themes, light and dark, from one set of tokens\",\n};\n\nconst DEFAULT_CLOSING = {\n  image: {\n    src: unsplash(\"1706451822135-e7276f49b06e\", 1200),\n    alt: \"A concrete staircase cut by diagonal light\",\n  },\n  title: \"Rapid development\",\n  lines: [\"Build your interface faster\", \"with ready-to-use components\"] as [\n    string,\n    string,\n  ],\n};\n\n/** The Cortexcn mark in currentColor: two corner squares and a joined diagonal. */\nfunction CortexcnMark({ className }: { className?: string }) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      className={className}\n      fill=\"currentColor\"\n      viewBox=\"0 0 3 3\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path d=\"M.17 0H.83A.17 .17 0 0 1 1 .17V.83A.17 .17 0 0 1 .83 1H.17A.17 .17 0 0 1 0 .83V.17A.17 .17 0 0 1 .17 0Z\" />\n      <path d=\"M2.17 2H2.83A.17 .17 0 0 1 3 2.17V2.83A.17 .17 0 0 1 2.83 3H2.17A.17 .17 0 0 1 2 2.83V2.17A.17 .17 0 0 1 2.17 2Z\" />\n      <path d=\"M2.17 0H2.83A.17 .17 0 0 1 3 .17V.83A.17 .17 0 0 1 2.83 1H2.32A.32 .32 0 0 0 2 1.32V1.83A.17 .17 0 0 1 1.83 2H1.32A.32 .32 0 0 0 1 2.32V2.83A.17 .17 0 0 1 .83 3H.17A.17 .17 0 0 1 0 2.83V2.17A.17 .17 0 0 1 .17 2H.68A.32 .32 0 0 0 1 1.68V1.17A.17 .17 0 0 1 1.17 1H1.68A.32 .32 0 0 0 2 .68V.17A.17 .17 0 0 1 2.17 0Z\" />\n    </svg>\n  );\n}\n\nfunction ClockIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      className={className}\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth=\"2\"\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path d=\"M12 6v6l4 2\" />\n      <circle cx=\"12\" cy=\"12\" r=\"10\" />\n    </svg>\n  );\n}\n\nconst cardClassName =\n  \"rounded-3xl bg-card text-card-foreground shadow-xs ring-1 ring-foreground/10\";\n\n/** A muted tile with the mark in the middle, in place of a product shot. */\nfunction LogoTile({\n  className,\n  markClassName,\n  children,\n}: {\n  className?: string;\n  markClassName?: string;\n  children?: ReactNode;\n}) {\n  return (\n    <div\n      className={cn(\n        \"relative flex items-center justify-center overflow-hidden rounded-3xl border bg-muted\",\n        className,\n      )}\n    >\n      <CortexcnMark className={cn(\"size-16 text-foreground\", markClassName)} />\n      {children}\n    </div>\n  );\n}\n\nfunction Photo({ image, width }: { image: BentoImage; width: number }) {\n  return (\n    // biome-ignore lint/performance/noImgElement: framework-agnostic registry block\n    <img\n      alt={image.alt}\n      className=\"absolute inset-0 size-full object-cover\"\n      decoding=\"async\"\n      height={Math.round(width * 0.75)}\n      loading=\"lazy\"\n      src={image.src}\n      width={width}\n    />\n  );\n}\n\n/** Theme tokens drawn as overlapping swatches. */\nconst SWATCHES = [\n  \"bg-background\",\n  \"bg-muted\",\n  \"bg-secondary\",\n  \"bg-primary\",\n  \"bg-foreground\",\n];\n\nexport function FeatureBentoGrid({\n  hero = DEFAULT_HERO,\n  logoCaption = \"Build your interface with open code you can read, change, and keep.\",\n  stat = DEFAULT_STAT,\n  highlight = DEFAULT_HIGHLIGHT,\n  themes = DEFAULT_THEMES,\n  closing = DEFAULT_CLOSING,\n  className,\n}: FeatureBentoGridProps) {\n  return (\n    <section className={cn(\"w-full px-6 py-24 sm:py-32\", className)}>\n      <div className=\"mx-auto grid max-w-6xl grid-cols-1 gap-4 md:grid-cols-6 lg:grid-cols-12\">\n        <div className=\"relative h-60 overflow-hidden rounded-3xl bg-muted md:col-span-2 md:row-span-2 md:h-[400px] lg:col-span-4 lg:h-full\">\n          <Photo image={hero.image} width={1000} />\n          <div\n            aria-hidden=\"true\"\n            className=\"absolute inset-0 bg-linear-to-t from-black/50 via-transparent to-transparent\"\n          />\n          <p className=\"absolute bottom-6 left-6 z-10 font-medium text-lg text-white\">\n            {hero.label}\n          </p>\n          <span className=\"absolute top-6 right-6 z-10 flex size-10 items-center justify-center rounded-full bg-white/20 text-white backdrop-blur-sm\">\n            <CortexcnMark className=\"size-4\" />\n          </span>\n        </div>\n\n        <LogoTile\n          className=\"h-60 md:col-span-2 md:row-span-2 md:h-[400px] lg:col-span-4 lg:h-full\"\n          markClassName=\"size-20 lg:size-24\"\n        >\n          <h3 className=\"absolute right-6 bottom-6 left-6 text-balance font-medium text-sm leading-tight md:text-base lg:text-xl\">\n            {logoCaption}\n          </h3>\n        </LogoTile>\n\n        <div\n          className={cn(\n            cardClassName,\n            \"flex flex-col justify-center gap-3 p-4 md:col-span-2 md:h-[192px] md:p-6 lg:col-span-2\",\n          )}\n        >\n          <p className=\"font-bold text-4xl tracking-tight lg:text-6xl\">\n            {stat.value}\n            {stat.suffix && (\n              <span className=\"align-top text-2xl md:text-xl lg:text-3xl\">\n                {stat.suffix}\n              </span>\n            )}\n          </p>\n          <p className=\"text-sm leading-tight\">{stat.label}</p>\n        </div>\n\n        <LogoTile\n          className=\"h-60 md:col-span-2 md:h-[192px] lg:col-span-2\"\n          markClassName=\"size-10\"\n        />\n\n        <div className=\"flex flex-col justify-end gap-2 rounded-3xl bg-muted p-4 shadow-xs ring-1 ring-foreground/10 md:col-span-4 md:h-[300px] md:p-5 lg:col-span-4\">\n          <p className=\"text-4xl tracking-tight md:text-5xl lg:text-6xl\">\n            {highlight.value}\n          </p>\n          <p className=\"text-muted-foreground\">{highlight.label}</p>\n          <a\n            className={cn(buttonVariants(), \"mt-2 self-start\")}\n            href={highlight.action.href}\n          >\n            {highlight.action.label}\n          </a>\n        </div>\n\n        <div\n          className={cn(\n            cardClassName,\n            \"flex flex-col justify-center gap-4 p-4 md:col-span-2 md:h-[300px] md:p-5 lg:col-span-3\",\n          )}\n        >\n          <div>\n            <p className=\"font-bold text-4xl tracking-tight md:text-3xl lg:text-6xl\">\n              {themes.value}\n              {themes.suffix && (\n                <span className=\"align-top text-2xl md:text-xl lg:text-3xl\">\n                  {themes.suffix}\n                </span>\n              )}\n            </p>\n            <p className=\"mt-3 text-sm\">{themes.label}</p>\n          </div>\n          <div aria-hidden=\"true\" className=\"flex -space-x-2\">\n            {SWATCHES.map((swatch) => (\n              <span\n                className={cn(\n                  \"size-8 rounded-full border-2 border-card ring-1 ring-foreground/10 lg:size-10\",\n                  swatch,\n                )}\n                key={swatch}\n              />\n            ))}\n          </div>\n        </div>\n\n        <LogoTile\n          className=\"h-60 md:col-span-3 md:h-[300px] lg:col-span-5\"\n          markClassName=\"size-16 lg:size-20\"\n        />\n\n        <div className=\"relative h-60 overflow-hidden rounded-3xl bg-muted md:col-span-3 md:h-[300px] lg:col-span-4\">\n          <Photo image={closing.image} width={1200} />\n          <div\n            aria-hidden=\"true\"\n            className=\"absolute inset-0 bg-linear-to-r from-black/60 via-black/30 to-transparent\"\n          />\n          <div className=\"absolute inset-0 z-10 flex items-center p-4 text-white md:p-6\">\n            <div>\n              <div className=\"mb-2 flex items-center gap-2 md:gap-3\">\n                <span className=\"flex size-6 items-center justify-center rounded-full bg-white/20 md:size-7\">\n                  <ClockIcon className=\"size-3 md:size-4\" />\n                </span>\n                <h3 className=\"font-semibold text-base md:text-lg\">\n                  {closing.title}\n                </h3>\n              </div>\n              <p className=\"text-sm opacity-90\">\n                {closing.lines[0]}\n                <br />\n                <span className=\"font-semibold\">{closing.lines[1]}</span>\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/feature-bento-grid.tsx"
    }
  ],
  "type": "registry:block",
  "author": "Cortexcn (https://ui.cortexcn.dev)",
  "meta": {
    "license": "MIT",
    "revision": "3604419d69ba"
  }
}