{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-11",
  "title": "Hero 11",
  "description": "A split-copy hero with a light product studio mock — issue feed, properties, and a floating agent panel that fades into the page.",
  "dependencies": [
    "react-wrap-balancer",
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "avatar",
    "separator",
    "badge"
  ],
  "files": [
    {
      "path": "registry/blocks/hero/hero-11/hero-11.tsx",
      "content": "import { ArrowRight } from 'lucide-react'\nimport Balancer from 'react-wrap-balancer'\n\nimport { Hero11Studio } from './hero-11-studio'\n\nexport function Hero11() {\n  return (\n    <section className=\"relative isolate w-full overflow-hidden\">\n      <div className=\"relative z-10 mx-auto flex max-w-7xl flex-col gap-8 px-6 pt-20 pb-0 sm:gap-10 sm:pt-28\">\n        <div className=\"flex w-full flex-col gap-4 sm:gap-5\">\n          <h1 className=\"text-foreground max-w-xl font-serif text-3xl font-normal tracking-tight text-balance sm:text-4xl md:text-5xl lg:text-[3.25rem]\">\n            <Balancer>The interface system for teams and agents.</Balancer>\n          </h1>\n\n          <div className=\"flex w-full flex-col gap-3 sm:flex-row sm:items-end sm:justify-between sm:gap-8\">\n            <p className=\"text-muted-foreground max-w-md text-sm leading-relaxed sm:text-base\">\n              <Balancer>\n                Purpose-built blocks for planning and shipping product UI.\n                Designed for the AI era.\n              </Balancer>\n            </p>\n            <a\n              href=\"#\"\n              className=\"text-foreground group inline-flex shrink-0 items-center gap-2 text-sm font-medium transition-[opacity,transform] hover:opacity-80 active:scale-[0.96]\"\n            >\n              <span>Compositions</span>\n              <ArrowRight className=\"size-3.5 transition-transform group-hover:translate-x-0.5\" />\n            </a>\n          </div>\n        </div>\n\n        <div className=\"relative mx-auto w-full max-w-7xl\">\n          <div className=\"relative w-full overflow-hidden mask-r-from-90% mask-r-to-100%\">\n            <Hero11Studio />\n          </div>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/blocks/hero/hero-11.tsx"
    },
    {
      "path": "registry/blocks/hero/hero-11/hero-11-studio.tsx",
      "content": "import type * as React from 'react'\nimport {\n  ArrowUp,\n  Boxes,\n  CircleDot,\n  Component,\n  FileText,\n  Layers,\n  LayoutTemplate,\n  MoreHorizontal,\n  Paperclip,\n  Plus,\n  Search,\n  SignalHigh,\n  Sparkles,\n} from 'lucide-react'\n\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Separator } from '@/components/ui/separator'\nimport { cn } from '@/lib/utils'\n\nconst nav = [\n  { icon: Boxes, label: 'Catalog', count: '128' },\n  { icon: LayoutTemplate, label: 'Blocks', count: '48' },\n  { icon: Layers, label: 'Patterns' },\n  { icon: Component, label: 'Compositions' },\n]\n\nconst collections = [\n  { label: 'Heroes' },\n  { label: 'Forms' },\n  { label: 'Illustrations' },\n]\n\nconst recent = [\n  { label: 'Split-copy hero', active: true },\n  { label: 'Agent studio' },\n  { label: 'Empty states' },\n  { label: 'Auth screens' },\n]\n\nconst activity = [\n  {\n    src: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=64&q=80',\n    name: 'Flex',\n    action: 'added to catalog',\n    time: '2m',\n    body: null as string | null,\n  },\n  {\n    src: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=64&q=80',\n    name: 'Maya',\n    action: 'tagged',\n    time: '6m',\n    body: null,\n    badge: 'Hero',\n  },\n  {\n    src: 'https://images.unsplash.com/photo-1633332755192-727a05c4013d?w=64&q=80',\n    name: 'Noah',\n    action: 'commented',\n    time: '4m',\n    body: 'Keep the right edge soft — sidebar stays crisp against the page.',\n  },\n  {\n    src: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=64&q=80',\n    name: 'Ava',\n    action: 'commented',\n    time: '3m',\n    body: 'Light-first. Soft shadows, concentric radii, tabular counts.',\n  },\n]\n\nconst changedFiles = [\n  { name: 'studio-demo.tsx', add: 48, del: 12 },\n  { name: 'hero-11.tsx', add: 16, del: 4 },\n]\n\nexport function Hero11Studio() {\n  return (\n    <div className=\"relative w-full\">\n      <div\n        className={cn(\n          'bg-card w-full overflow-hidden rounded-xl border',\n          'shadow-[10px_18px_40px_-18px_rgba(0,0,0,0.16)]',\n          'dark:shadow-[10px_18px_40px_-18px_rgba(0,0,0,0.5)]',\n        )}\n      >\n        <div className=\"flex min-h-[30rem]\">\n          {/* Sidebar */}\n          <aside className=\"bg-card hidden w-52 shrink-0 flex-col border-r sm:flex\">\n            <div className=\"flex items-center gap-2 px-3 py-3\">\n              <div className=\"bg-foreground text-background flex size-5 items-center justify-center rounded-md text-[10px] font-semibold\">\n                F\n              </div>\n              <span className=\"truncate text-sm font-semibold tracking-tight\">\n                Flexnative\n              </span>\n              <div className=\"ml-auto flex items-center gap-0.5\">\n                <Button\n                  size=\"icon-xs\"\n                  variant=\"ghost\"\n                  className=\"text-muted-foreground\"\n                  aria-label=\"Search\"\n                >\n                  <Search className=\"size-3.5\" />\n                </Button>\n                <Button\n                  size=\"icon-xs\"\n                  variant=\"ghost\"\n                  className=\"text-muted-foreground\"\n                  aria-label=\"New block\"\n                >\n                  <Plus className=\"size-3.5\" />\n                </Button>\n              </div>\n            </div>\n\n            <nav className=\"flex flex-col gap-0.5 px-2\">\n              {nav.map(({ icon: Icon, label, count }) => (\n                <div\n                  key={label}\n                  className=\"text-muted-foreground hover:bg-muted flex items-center gap-2 rounded-md px-2 py-1.5 text-xs\"\n                >\n                  <Icon className=\"size-3.5 shrink-0\" />\n                  <span className=\"min-w-0 flex-1 truncate\">{label}</span>\n                  {count && (\n                    <span className=\"text-muted-foreground/80 tabular-nums\">\n                      {count}\n                    </span>\n                  )}\n                </div>\n              ))}\n            </nav>\n\n            <div className=\"mt-4 px-2\">\n              <span className=\"text-muted-foreground px-2 text-[10px] font-medium tracking-wide uppercase\">\n                Collections\n              </span>\n              <div className=\"mt-1 flex flex-col gap-0.5\">\n                {collections.map(({ label }) => (\n                  <div\n                    key={label}\n                    className=\"text-muted-foreground hover:bg-muted truncate rounded-md px-2 py-1.5 text-xs\"\n                  >\n                    {label}\n                  </div>\n                ))}\n              </div>\n            </div>\n\n            <div className=\"mt-4 flex-1 px-2 pb-3\">\n              <span className=\"text-muted-foreground px-2 text-[10px] font-medium tracking-wide uppercase\">\n                Recent\n              </span>\n              <div className=\"mt-1 flex flex-col gap-0.5\">\n                {recent.map(({ label, active }) => (\n                  <div\n                    key={label}\n                    className={cn(\n                      'truncate rounded-md px-2 py-1.5 text-xs',\n                      active\n                        ? 'bg-muted text-foreground font-medium'\n                        : 'text-muted-foreground hover:bg-muted',\n                    )}\n                  >\n                    {label}\n                  </div>\n                ))}\n              </div>\n            </div>\n          </aside>\n\n          {/* Main */}\n          <div className=\"flex min-w-0 flex-1 flex-col\">\n            <header className=\"flex items-center gap-2 border-b px-3 py-2.5 sm:px-4\">\n              <span className=\"truncate text-sm font-medium tracking-tight\">\n                Split-copy hero\n              </span>\n              <div className=\"text-muted-foreground ml-auto flex items-center gap-1.5 text-[10px] tabular-nums\">\n                <span>02</span>\n                <span className=\"text-muted-foreground/50\">/</span>\n                <span>128</span>\n              </div>\n            </header>\n\n            <div className=\"flex min-h-0 flex-1\">\n              <div className=\"flex min-w-0 flex-1 flex-col gap-4 p-4 sm:p-5\">\n                <div className=\"space-y-2\">\n                  <h2 className=\"text-xl font-semibold tracking-tight sm:text-2xl\">\n                    Split-copy hero\n                  </h2>\n                  <p className=\"text-muted-foreground max-w-xl text-xs leading-relaxed text-pretty sm:text-[13px]\">\n                    A product studio mock with split copy, concentric radii, and\n                    a soft{' '}\n                    <code className=\"bg-muted rounded px-1 py-0.5 font-mono text-[11px]\">\n                      mask-*\n                    </code>{' '}\n                    fade so the interface dissolves into the page.\n                  </p>\n                </div>\n\n                <Separator />\n\n                <div className=\"flex flex-col gap-3\">\n                  {activity.map((item, i) => (\n                    <div key={`${item.name}-${i}`} className=\"flex gap-2.5\">\n                      <Avatar className=\"mt-0.5 size-6 shrink-0\">\n                        <AvatarImage src={item.src} alt=\"\" />\n                        <AvatarFallback className=\"text-[9px]\">\n                          {item.name[0]}\n                        </AvatarFallback>\n                      </Avatar>\n                      <div className=\"min-w-0 flex-1 space-y-1.5\">\n                        <div className=\"flex flex-wrap items-baseline gap-x-1.5 gap-y-0.5 text-xs\">\n                          <span className=\"font-medium\">{item.name}</span>\n                          <span className=\"text-muted-foreground\">\n                            {item.action}\n                          </span>\n                          {'badge' in item && item.badge && (\n                            <Badge\n                              variant=\"secondary\"\n                              className=\"h-4 px-1.5 text-[9px]\"\n                            >\n                              {item.badge}\n                            </Badge>\n                          )}\n                          <span className=\"text-muted-foreground ml-auto text-[10px] tabular-nums\">\n                            {item.time}\n                          </span>\n                        </div>\n                        {item.body && (\n                          <div className=\"bg-muted/50 rounded-lg px-3 py-2 text-xs leading-relaxed text-pretty\">\n                            {item.body}\n                          </div>\n                        )}\n                      </div>\n                    </div>\n                  ))}\n\n                  <div className=\"flex items-center gap-2.5 text-xs\">\n                    <div className=\"flex size-6 shrink-0 items-center justify-center rounded-full border border-amber-400/40 bg-amber-400/10\">\n                      <CircleDot className=\"size-3 text-amber-500\" />\n                    </div>\n                    <span className=\"text-muted-foreground\">\n                      Moved from{' '}\n                      <span className=\"text-foreground font-medium\">Draft</span>{' '}\n                      to{' '}\n                      <span className=\"text-foreground font-medium\">\n                        In review\n                      </span>\n                    </span>\n                    <span className=\"text-muted-foreground ml-auto text-[10px] tabular-nums\">\n                      1m\n                    </span>\n                  </div>\n                </div>\n              </div>\n\n              {/* Properties */}\n              <aside className=\"hidden w-40 shrink-0 flex-col gap-3 border-l p-3 md:flex lg:w-44\">\n                <Property\n                  label=\"Status\"\n                  value={\n                    <span className=\"flex items-center gap-1.5\">\n                      <span className=\"size-1.5 rounded-full bg-amber-400\" />\n                      In review\n                    </span>\n                  }\n                />\n                <Property\n                  label=\"Priority\"\n                  value={\n                    <span className=\"flex items-center gap-1.5\">\n                      <SignalHigh className=\"size-3.5 text-orange-500\" />\n                      High\n                    </span>\n                  }\n                />\n                <Property\n                  label=\"Owner\"\n                  value={\n                    <span className=\"flex items-center gap-1.5\">\n                      <Avatar className=\"size-4\">\n                        <AvatarImage\n                          src=\"https://images.unsplash.com/photo-1633332755192-727a05c4013d?w=64&q=80\"\n                          alt=\"\"\n                        />\n                        <AvatarFallback className=\"text-[8px]\">\n                          N\n                        </AvatarFallback>\n                      </Avatar>\n                      Noah\n                    </span>\n                  }\n                />\n                <Property\n                  label=\"Category\"\n                  value={\n                    <span className=\"flex items-center gap-1.5\">\n                      <span className=\"bg-foreground/90 size-3.5 rounded-[4px]\" />\n                      Hero\n                    </span>\n                  }\n                />\n                <Property\n                  label=\"Slug\"\n                  value={<span className=\"font-mono text-[11px]\">hero-11</span>}\n                />\n              </aside>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      {/* Floating agent panel */}\n      <div\n        className={cn(\n          'bg-card absolute right-2 bottom-3 z-10 w-[min(100%-1rem,17.5rem)] overflow-hidden rounded-xl sm:right-4 sm:w-72',\n          'shadow-[0_10px_32px_-8px_rgba(0,0,0,0.2)]',\n          'dark:shadow-[0_10px_32px_-8px_rgba(0,0,0,0.55)]',\n        )}\n      >\n        <div className=\"flex items-center gap-2 border-b px-3 py-2\">\n          <Sparkles className=\"text-foreground size-3.5 shrink-0\" />\n          <span className=\"truncate text-xs font-medium tracking-tight\">\n            Flex Agent\n          </span>\n          <Badge\n            variant=\"secondary\"\n            className=\"h-4 border-emerald-500/20 bg-emerald-500/10 px-1.5 text-[9px] text-emerald-700 dark:text-emerald-400\"\n          >\n            Live\n          </Badge>\n          <Button\n            size=\"icon-xs\"\n            variant=\"ghost\"\n            className=\"text-muted-foreground ml-auto\"\n            aria-label=\"More\"\n          >\n            <MoreHorizontal className=\"size-3.5\" />\n          </Button>\n        </div>\n\n        <div className=\"space-y-2.5 px-3 py-2.5\">\n          <p className=\"text-muted-foreground text-[11px] leading-relaxed\">\n            Examining the hero mask path…\n          </p>\n          <p className=\"text-muted-foreground text-[10px] tabular-nums\">\n            Worked for 7s\n          </p>\n          <p className=\"text-[11px] leading-relaxed\">\n            Pushed and opened a draft PR.\n          </p>\n\n          <div className=\"bg-muted/60 space-y-1.5 rounded-lg p-2\">\n            <div className=\"flex items-center justify-between gap-2\">\n              <span className=\"text-[10px] font-medium\">\n                Changed 2 files{' '}\n                <span className=\"text-emerald-600 tabular-nums dark:text-emerald-400\">\n                  +64\n                </span>{' '}\n                <span className=\"text-red-500 tabular-nums dark:text-red-400\">\n                  -16\n                </span>\n              </span>\n              <Button\n                size=\"xs\"\n                variant=\"outline\"\n                className=\"h-5 px-1.5 text-[9px]\"\n              >\n                Preview\n              </Button>\n            </div>\n            {changedFiles.map((f) => (\n              <div\n                key={f.name}\n                className=\"text-muted-foreground flex items-center gap-1.5 text-[10px]\"\n              >\n                <FileText className=\"size-3 shrink-0\" />\n                <span className=\"min-w-0 flex-1 truncate font-mono\">\n                  {f.name}\n                </span>\n                <span className=\"text-emerald-600 tabular-nums dark:text-emerald-400\">\n                  +{f.add}\n                </span>\n                <span className=\"text-red-500 tabular-nums dark:text-red-400\">\n                  -{f.del}\n                </span>\n              </div>\n            ))}\n          </div>\n        </div>\n\n        <div className=\"border-t p-2\">\n          <div className=\"bg-muted/50 flex items-center gap-1.5 rounded-lg px-2 py-1.5\">\n            <span className=\"text-muted-foreground min-w-0 flex-1 truncate text-[11px]\">\n              Tell Flex what to do next…\n            </span>\n            <Button\n              size=\"icon-xs\"\n              variant=\"ghost\"\n              className=\"text-muted-foreground\"\n              aria-label=\"Attach\"\n            >\n              <Paperclip className=\"size-3.5\" />\n            </Button>\n            <Button\n              size=\"icon-xs\"\n              variant=\"default\"\n              className=\"size-6 rounded-md active:scale-[0.96]\"\n              aria-label=\"Send\"\n            >\n              <ArrowUp className=\"size-3.5\" />\n            </Button>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction Property({\n  label,\n  value,\n}: Readonly<{ label: string; value: React.ReactNode }>) {\n  return (\n    <div className=\"space-y-1\">\n      <span className=\"text-muted-foreground text-[10px]\">{label}</span>\n      <div className=\"text-foreground text-xs font-medium\">{value}</div>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/blocks/hero/hero-11-studio.tsx"
    }
  ],
  "meta": {
    "iframeHeight": 1100
  },
  "type": "registry:block"
}