{"version":1,"id":"bento-grid-lab","framework":"next","kind":"block","files":[{"path":"src/blocks/gfa/bento-grid-lab.tsx","content":"\"use client\";\n\nimport { BookOpen, ShieldCheck } from \"lucide-react\";\nimport Image from \"next/image\";\nimport { cn } from \"@/lib/utils\";\n\nconst EYE_MACRO = \"/gfa-bento/bento-eye-macro.png\";\nconst MINIMAL_RIPPLES = \"/gfa-bento/bento-minimalist-ripples.png\";\n\nfunction CoverTile({\n  src,\n  alt,\n  className,\n  children,\n}: {\n  src: string;\n  alt: string;\n  className?: string;\n  children: React.ReactNode;\n}) {\n  return (\n    <div className={cn(\"gfa-bento-shimmer-border relative h-full min-h-[5.5rem] overflow-hidden\", className)}>\n      <div className=\"absolute inset-[1px] z-0 h-full min-h-[5.5rem] overflow-hidden rounded-[calc(var(--radius-3xl)-1px)] text-white\">\n        <Image\n          src={src}\n          alt={alt}\n          fill\n          className=\"object-cover\"\n          sizes=\"(max-width: 768px) 100vw, 280px\"\n          priority={false}\n        />\n        <div className=\"pointer-events-none absolute inset-0 bg-gradient-to-t from-black/85 via-black/40 to-black/15\" />\n        <div className=\"relative flex h-full min-h-[5.5rem] flex-col justify-end p-4 sm:p-5\">{children}</div>\n      </div>\n    </div>\n  );\n}\n\nfunction Tile({\n  className,\n  children,\n  dim = false,\n}: {\n  className?: string;\n  children: React.ReactNode;\n  /** Dark / full-bleed style tile */\n  dim?: boolean;\n}) {\n  return (\n    <div className={cn(\"gfa-bento-shimmer-border relative h-full min-h-0 overflow-hidden\", className)}>\n      <div\n        className={cn(\n          \"absolute inset-[1px] z-0 flex h-full min-h-0 flex-col justify-center overflow-hidden rounded-[calc(var(--radius-3xl)-1px)] p-4 sm:p-5\",\n          dim\n            ? \"bg-gradient-to-br from-zinc-900 via-zinc-950 to-black text-white\"\n            : \"bg-muted/35 text-foreground\",\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n\nexport type BentoGridLabProps = {\n  className?: string;\n};\n\n/**\n * GFA showcase bento — demo layout summarizing the design system, docs, and lab content.\n * 12-column CSS Grid; desktop at `md+`, single column on small screens.\n * Cover images are loaded from `public/gfa-bento/` (`next/image` remote path).\n */\nexport function BentoGridLab({ className }: BentoGridLabProps) {\n  return (\n    <div className={cn(\"space-y-6\", className)}>\n      <div className=\"space-y-2\">\n        <h1 className=\"gfa-lab-title-shimmer bg-clip-text text-2xl font-semibold tracking-tight text-transparent sm:text-3xl\">\n          GFA showcase bento\n        </h1>\n        <p className=\"max-w-2xl text-sm leading-relaxed text-muted-foreground\">\n          The GFA design-system shell brings components, blocks, documentation, and portable HTML examples together in this\n          monorepo. Images in the left column load from{\" \"}\n          <code className=\"rounded bg-muted px-1.5 py-0.5 font-mono text-[11px] text-foreground\">public/gfa-bento</code>;\n          other tiles are copy placeholders — swap in your own product messaging.\n        </p>\n      </div>\n\n      <div className=\"grid auto-rows-[minmax(5.5rem,auto)] grid-cols-12 gap-3 sm:gap-4\">\n        {/* Row 1 */}\n        <Tile dim className=\"col-span-12 min-h-[6.5rem] md:col-span-6 md:min-h-[5.5rem]\">\n          <p className=\"text-xs font-semibold uppercase tracking-wider gfa-lab-title-shimmer-dark bg-clip-text text-transparent\">\n            Consistency\n          </p>\n          <p className=\"mt-1 text-balance text-sm font-medium leading-snug text-white/88 sm:text-base\">\n            One theme file, shared tokens, and ready-made components — keep the same visual language across your Next.js app.\n          </p>\n        </Tile>\n        <Tile className=\"col-span-6 min-h-[5.5rem] md:col-span-2\">\n          <p className=\"text-2xl font-semibold tabular-nums tracking-tight text-foreground\">6</p>\n          <p className=\"mt-1 text-xs text-muted-foreground\">Locales (i18n)</p>\n        </Tile>\n        <Tile className=\"col-span-6 min-h-[5.5rem] md:col-span-4\">\n          <div className=\"flex min-h-0 w-full flex-1 items-center justify-between gap-3\">\n            <div className=\"min-w-0 flex-1\">\n              <p className=\"text-xs font-semibold uppercase tracking-wide gfa-lab-title-shimmer bg-clip-text text-transparent\">\n                Docs\n              </p>\n              <p className=\"mt-1 text-sm font-medium leading-snug text-foreground\">\n                Live-preview component pages and props tables\n              </p>\n            </div>\n            <div className=\"gfa-bento-docs-icon-host\" aria-hidden>\n              <BookOpen className=\"gfa-bento-docs-icon size-16 shrink-0 sm:size-[4.25rem]\" strokeWidth={1.15} />\n            </div>\n          </div>\n        </Tile>\n\n        {/* Middle: left stack | hero | right stack */}\n        <div className=\"col-span-12 flex min-h-[14rem] flex-col gap-3 md:col-span-3 md:row-span-3 md:min-h-0\">\n          <CoverTile src={EYE_MACRO} alt=\"Detailed UI — GFA component quality\">\n            <p className=\"text-xs font-semibold uppercase tracking-wide gfa-lab-title-shimmer-dark bg-clip-text text-transparent\">\n              Focus\n            </p>\n            <p className=\"mt-1 text-sm font-medium text-white/90\">Accessible, type-safe UI primitives</p>\n          </CoverTile>\n          <CoverTile src={MINIMAL_RIPPLES} alt=\"Calm visual surface — GFA theme tones\">\n            <p className=\"text-sm font-semibold gfa-lab-title-shimmer-dark bg-clip-text text-transparent\">\n              Minimal interface layer\n            </p>\n          </CoverTile>\n        </div>\n\n        <Tile dim className=\"col-span-12 min-h-[16rem] md:col-span-6 md:row-span-3 md:min-h-[18rem]\">\n          <div className=\"pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_30%_20%,rgba(255,255,255,0.09),transparent_55%),radial-gradient(ellipse_at_72%_78%,rgba(255,255,255,0.05),transparent_50%)]\" />\n          <div className=\"relative flex h-full flex-col justify-end\">\n            <p className=\"text-4xl font-bold tracking-tighter sm:text-5xl sm:tracking-tight\">\n              <span className=\"gfa-lab-hero-shimmer bg-clip-text text-transparent\">GFA</span>\n            </p>\n            <p className=\"mt-2 max-w-md text-sm font-medium leading-snug text-white/72\">\n              Development &amp; design studio — shared design-system shell\n            </p>\n          </div>\n        </Tile>\n\n        <div className=\"col-span-12 flex min-h-[14rem] flex-col gap-3 md:col-span-3 md:row-span-3 md:min-h-0\">\n          <Tile className=\"min-h-[4.5rem] flex-1\">\n            <div className=\"flex min-h-0 w-full flex-1 items-center justify-between gap-3\">\n              <div className=\"min-w-0 flex-1\">\n                <p className=\"text-xs font-semibold uppercase tracking-wide gfa-lab-title-shimmer bg-clip-text text-transparent\">\n                  Secure defaults\n                </p>\n                <p className=\"mt-1 text-sm font-medium leading-snug text-muted-foreground\">\n                  Examples for NextAuth sessions, Prisma data access, and route-handler patterns\n                </p>\n              </div>\n              <div className=\"gfa-bento-secure-icon-host\" aria-hidden>\n                <ShieldCheck className=\"gfa-bento-secure-icon size-12 shrink-0 sm:size-14\" strokeWidth={1.2} />\n              </div>\n            </div>\n          </Tile>\n          <Tile className=\"flex min-h-[6rem] flex-1 flex-col justify-center\">\n            <p className=\"text-2xl font-semibold tabular-nums text-foreground\">38</p>\n            <p className=\"mt-1 text-xs text-muted-foreground\">Button showcase routes</p>\n          </Tile>\n          <Tile dim className=\"min-h-[5rem] flex-1\">\n            <p className=\"text-sm font-semibold gfa-lab-title-shimmer-dark bg-clip-text text-transparent\">Blocks with motion</p>\n          </Tile>\n        </div>\n\n        {/* Bottom strip — plain copy */}\n        <Tile className=\"col-span-6 min-h-[5.5rem] sm:col-span-4 md:col-span-2\">\n          <p className=\"text-xs font-semibold leading-snug gfa-lab-title-shimmer bg-clip-text text-transparent\">\n            GFA Studio CLI\n          </p>\n        </Tile>\n        <Tile className=\"col-span-6 min-h-[5.5rem] sm:col-span-4 md:col-span-3\">\n          <p className=\"text-xs font-semibold uppercase tracking-wide gfa-lab-title-shimmer bg-clip-text text-transparent\">\n            Stack\n          </p>\n          <p className=\"mt-1 text-sm font-medium leading-snug text-foreground\">\n            Next.js, Prisma, NextAuth — monorepo layout\n          </p>\n        </Tile>\n        <Tile dim className=\"col-span-6 min-h-[5.5rem] sm:col-span-4 md:col-span-2\">\n          <p className=\"text-sm font-semibold gfa-lab-title-shimmer-dark bg-clip-text text-transparent\">globals.css tokens</p>\n        </Tile>\n        <Tile className=\"col-span-6 min-h-[5.5rem] sm:col-span-6 md:col-span-2\">\n          <p className=\"text-sm font-semibold gfa-lab-title-shimmer bg-clip-text text-transparent\">Portable HTML</p>\n        </Tile>\n        <Tile className=\"col-span-6 min-h-[5.5rem] sm:col-span-6 md:col-span-2\">\n          <p className=\"text-sm font-semibold gfa-lab-title-shimmer bg-clip-text text-transparent\">Light / dark theme</p>\n        </Tile>\n        <Tile className=\"col-span-12 min-h-[5.5rem] sm:col-span-6 md:col-span-1\">\n          <p className=\"text-sm font-semibold gfa-lab-title-shimmer bg-clip-text text-transparent\">pnpm</p>\n        </Tile>\n      </div>\n    </div>\n  );\n}\n"}],"meta":{"studioName":"GFA Development & Design Studio","siteUrl":"https://ui.gkhn.dev"}}