{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-screenshot",
  "title": "Product screenshot hero",
  "description": "Centered headline above a dashboard in a browser frame with a border beam and a logo row.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils",
    "button",
    "https://velora.colorlib.com/r/blur-fade.json",
    "https://velora.colorlib.com/r/border-beam.json",
    "https://velora.colorlib.com/r/browser-mockup.json",
    "https://velora.colorlib.com/r/logo-cloud.json"
  ],
  "files": [
    {
      "path": "src/components/blocks/hero-screenshot.tsx",
      "content": "import { useId } from \"react\";\nimport {\n  ArrowRightIcon,\n  BarChart3Icon,\n  BellIcon,\n  CalendarIcon,\n  FolderIcon,\n  HomeIcon,\n  PlayCircleIcon,\n  SearchIcon,\n  SettingsIcon,\n  UsersIcon,\n} from \"lucide-react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { BlurFade } from \"@/components/velora/blur-fade\";\nimport { BorderBeam } from \"@/components/velora/border-beam\";\nimport { BrowserMockup } from \"@/components/velora/browser-mockup\";\nimport { LogoCloud } from \"@/components/velora/logo-cloud\";\n\nconst NAV = [\n  { icon: HomeIcon, label: \"Overview\", active: true },\n  { icon: BarChart3Icon, label: \"Reports\" },\n  { icon: UsersIcon, label: \"Customers\" },\n  { icon: FolderIcon, label: \"Projects\" },\n  { icon: SettingsIcon, label: \"Settings\" },\n];\n\nconst KPIS = [\n  { label: \"Revenue\", value: \"$48,210\", delta: \"+12.4%\" },\n  { label: \"Active users\", value: \"8,642\", delta: \"+5.1%\" },\n  { label: \"Conversion\", value: \"3.8%\", delta: \"+0.6%\" },\n  { label: \"Avg. session\", value: \"4m 12s\", delta: \"+18s\" },\n];\n\n// Weekly revenue, 0–100 scale — drives the area chart\nconst SERIES = [32, 38, 35, 46, 42, 55, 51, 60, 58, 70, 66, 78];\n\nconst CHANNELS = [\n  { name: \"Organic\", share: 42 },\n  { name: \"Referral\", share: 27 },\n  { name: \"Paid\", share: 19 },\n  { name: \"Email\", share: 12 },\n];\n\nconst ACTIVITY = [\n  { who: \"Northwind\", what: \"Upgraded to Scale\", amount: \"$1,200\" },\n  { who: \"Halcyon\", what: \"New subscription\", amount: \"$480\" },\n  { who: \"Acme Co.\", what: \"Added 12 seats\", amount: \"$360\" },\n];\n\n// Fictional wordmarks with simple geometric marks — swap in your customers.\nconst LOGOS = [\n  { name: \"Acme\", mark: <path d=\"M12 3 21 20H3z\" /> },\n  {\n    name: \"Northwind\",\n    mark: (\n      <path\n        d=\"M3 8h13a3 3 0 1 0-3-3M3 13h17a3 3 0 1 1-3 3M3 18h8\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n      />\n    ),\n  },\n  { name: \"Beacon\", mark: <circle cx=\"12\" cy=\"12\" r=\"8\" /> },\n  {\n    name: \"Orbit\",\n    mark: (\n      <path\n        d=\"M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Zm0 5a4 4 0 1 1 0 8 4 4 0 0 1 0-8Z\"\n        fillRule=\"evenodd\"\n      />\n    ),\n  },\n  { name: \"Halcyon\", mark: <path d=\"m12 2 8.66 5v10L12 22l-8.66-5V7z\" /> },\n  { name: \"Quanta\", mark: <path d=\"M3 3h8v8H3zm10 10h8v8h-8zM13 3h8v8h-8z\" /> },\n].map(({ name, mark }) => ({\n  name,\n  logo: (\n    <span className=\"flex items-center gap-2 text-lg font-semibold tracking-tight\">\n      <svg viewBox=\"0 0 24 24\" className=\"size-6 fill-current\" aria-hidden>\n        {mark}\n      </svg>\n      {name}\n    </span>\n  ),\n}));\n\n/** A dashboard drawn with Tailwind — no image to host, and it re-themes. */\nfunction DashboardPreview() {\n  const id = useId();\n  const w = 600;\n  const h = 180;\n  const points = SERIES.map((v, i) => [\n    (i / (SERIES.length - 1)) * w,\n    h - (v / 100) * h,\n  ]);\n  const line = points.map(([x, y], i) => `${i ? \"L\" : \"M\"}${x},${y}`).join(\" \");\n\n  return (\n    <div\n      role=\"img\"\n      aria-label=\"Preview of the Lumen analytics dashboard: revenue up 12.4% with a rising weekly revenue chart\"\n      className=\"flex bg-background text-left\"\n    >\n      <aside className=\"hidden w-48 shrink-0 flex-col gap-1 border-r bg-muted/30 p-3 lg:flex\">\n        <div className=\"mb-3 flex items-center gap-2 px-2 py-1 font-semibold\">\n          <span className=\"size-5 rounded-md bg-gradient-to-br from-brand-from to-brand-to\" />\n          Lumen\n        </div>\n        {NAV.map(({ icon: Icon, label, active }) => (\n          <div\n            key={label}\n            className={\n              active\n                ? \"flex items-center gap-2 rounded-md bg-background px-2 py-1.5 text-sm font-medium shadow-xs ring-1 ring-border\"\n                : \"flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-muted-foreground\"\n            }\n          >\n            <Icon className=\"size-4\" />\n            {label}\n          </div>\n        ))}\n      </aside>\n\n      <div className=\"min-w-0 flex-1 p-4 sm:p-6\">\n        <div className=\"flex items-center justify-between gap-4\">\n          <div>\n            <div className=\"text-sm font-semibold sm:text-base\">Overview</div>\n            <div className=\"text-xs text-muted-foreground\">Last 12 weeks</div>\n          </div>\n          <div className=\"flex items-center gap-2\">\n            <div className=\"hidden h-8 w-44 items-center gap-2 rounded-md border px-2 text-xs text-muted-foreground sm:flex\">\n              <SearchIcon className=\"size-3.5\" /> Search…\n            </div>\n            <div className=\"flex h-8 items-center gap-1.5 rounded-md border px-2 text-xs text-muted-foreground\">\n              <CalendarIcon className=\"size-3.5\" /> Q3\n            </div>\n            <div className=\"grid size-8 place-items-center rounded-md border text-muted-foreground\">\n              <BellIcon className=\"size-3.5\" />\n            </div>\n          </div>\n        </div>\n\n        <div className=\"mt-5 grid grid-cols-2 gap-3 md:grid-cols-4\">\n          {KPIS.map((k) => (\n            <div key={k.label} className=\"rounded-lg border bg-card p-3\">\n              <div className=\"text-xs text-muted-foreground\">{k.label}</div>\n              <div className=\"mt-1 flex items-baseline justify-between gap-2\">\n                <span className=\"text-base font-semibold tracking-tight sm:text-xl\">\n                  {k.value}\n                </span>\n                <span className=\"rounded-full bg-brand/10 px-1.5 py-0.5 text-[10px] font-medium text-brand\">\n                  {k.delta}\n                </span>\n              </div>\n            </div>\n          ))}\n        </div>\n\n        <div className=\"mt-3 grid gap-3 md:grid-cols-3\">\n          <div className=\"rounded-lg border bg-card p-4 md:col-span-2\">\n            <div className=\"flex items-center justify-between text-xs\">\n              <span className=\"font-medium\">Weekly revenue</span>\n              <span className=\"text-muted-foreground\">USD</span>\n            </div>\n            <svg\n              viewBox={`0 -8 ${w} ${h + 8}`}\n              preserveAspectRatio=\"none\"\n              className=\"mt-4 h-32 w-full sm:h-40\"\n            >\n              <defs>\n                <linearGradient id={`${id}-fill`} x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">\n                  <stop\n                    offset=\"0%\"\n                    stopColor=\"var(--brand)\"\n                    stopOpacity=\"0.28\"\n                  />\n                  <stop\n                    offset=\"100%\"\n                    stopColor=\"var(--brand)\"\n                    stopOpacity=\"0\"\n                  />\n                </linearGradient>\n              </defs>\n              {[0.25, 0.5, 0.75].map((f) => (\n                <line\n                  key={f}\n                  x1=\"0\"\n                  x2={w}\n                  y1={h * f}\n                  y2={h * f}\n                  className=\"stroke-border\"\n                  strokeDasharray=\"4 6\"\n                  vectorEffect=\"non-scaling-stroke\"\n                />\n              ))}\n              <path\n                d={`${line} L${w},${h} L0,${h} Z`}\n                fill={`url(#${id}-fill)`}\n              />\n              <path\n                d={line}\n                fill=\"none\"\n                className=\"stroke-brand\"\n                strokeWidth=\"2\"\n                strokeLinejoin=\"round\"\n                vectorEffect=\"non-scaling-stroke\"\n              />\n            </svg>\n          </div>\n\n          <div className=\"hidden rounded-lg border bg-card p-4 md:block\">\n            <div className=\"text-xs font-medium\">Traffic by channel</div>\n            <div className=\"mt-4 space-y-3\">\n              {CHANNELS.map((c) => (\n                <div key={c.name}>\n                  <div className=\"flex justify-between text-xs text-muted-foreground\">\n                    <span>{c.name}</span>\n                    <span className=\"tabular-nums\">{c.share}%</span>\n                  </div>\n                  <div className=\"mt-1.5 h-1.5 rounded-full bg-muted\">\n                    <div\n                      className=\"h-full rounded-full bg-gradient-to-r from-brand-from to-brand-to\"\n                      style={{\n                        width: `${(c.share / CHANNELS[0].share) * 100}%`,\n                      }}\n                    />\n                  </div>\n                </div>\n              ))}\n            </div>\n          </div>\n        </div>\n\n        <div className=\"mt-3 hidden rounded-lg border bg-card sm:block\">\n          {ACTIVITY.map((a, i) => (\n            <div\n              key={a.who}\n              className={`flex items-center gap-3 px-4 py-2.5 text-xs ${i ? \"border-t\" : \"\"}`}\n            >\n              <span className=\"grid size-7 place-items-center rounded-full bg-muted font-medium\">\n                {a.who[0]}\n              </span>\n              <span className=\"font-medium\">{a.who}</span>\n              <span className=\"text-muted-foreground\">{a.what}</span>\n              <span className=\"ml-auto font-medium tabular-nums\">\n                {a.amount}\n              </span>\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n\n/**\n * Centered product hero: headline and calls to action above a full dashboard\n * in a browser frame, traced by a border beam, with a customer logo row\n * underneath. The dashboard is plain Tailwind — edit it like any markup.\n */\nexport function HeroScreenshot() {\n  return (\n    <section className=\"relative isolate overflow-hidden px-6 py-24 sm:py-32 lg:px-8\">\n      <div\n        aria-hidden\n        className=\"absolute inset-x-0 top-0 -z-10 h-[36rem] bg-gradient-to-b from-brand/10 to-transparent\"\n      />\n\n      <div className=\"mx-auto max-w-3xl text-center\">\n        <BlurFade>\n          <p className=\"text-sm font-medium text-brand\">Lumen Analytics 3.0</p>\n        </BlurFade>\n        <h1 className=\"mt-4 text-4xl font-semibold tracking-tight text-balance sm:text-6xl\">\n          Every number your team needs, on one calm screen\n        </h1>\n        <p className=\"mx-auto mt-6 max-w-xl text-lg text-pretty text-muted-foreground\">\n          Connect your product, billing and marketing data in minutes. Lumen\n          turns it into a live dashboard your whole team actually opens.\n        </p>\n        <BlurFade delay={0.3}>\n          <div className=\"mt-10 flex flex-col items-center justify-center gap-3 sm:flex-row\">\n            <Button\n              size=\"lg\"\n              className=\"h-11 w-full rounded-full px-6 sm:w-auto\"\n              asChild\n            >\n              <a href=\"#\">\n                Start free trial <ArrowRightIcon />\n              </a>\n            </Button>\n            <Button\n              variant=\"ghost\"\n              size=\"lg\"\n              className=\"h-11 rounded-full px-6\"\n              asChild\n            >\n              <a href=\"#\">\n                <PlayCircleIcon /> Watch the 2-min tour\n              </a>\n            </Button>\n          </div>\n        </BlurFade>\n      </div>\n\n      <BlurFade\n        delay={0.4}\n        offset={32}\n        className=\"relative mx-auto mt-16 max-w-6xl sm:mt-20\"\n      >\n        {/* Glow under the frame */}\n        <div\n          aria-hidden\n          className=\"absolute inset-x-8 top-12 -bottom-8 -z-10 rounded-[3rem] bg-gradient-to-r from-brand-from/30 via-brand-via/20 to-brand-to/30 blur-3xl\"\n        />\n        <BrowserMockup url=\"app.lumen.io/overview\" className=\"relative bg-card\">\n          <DashboardPreview />\n          <BorderBeam size={120} duration={10} />\n        </BrowserMockup>\n      </BlurFade>\n\n      <div className=\"mx-auto mt-20 max-w-5xl\">\n        <p className=\"text-center text-sm text-muted-foreground\">\n          Trusted by 2,000+ product teams, from seed to IPO\n        </p>\n        <LogoCloud logos={LOGOS} className=\"mt-8 lg:grid-cols-6\" />\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/blocks/hero-screenshot.tsx"
    }
  ],
  "categories": [
    "hero-sections"
  ],
  "type": "registry:block"
}