{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-5",
  "title": "Hero 5: Mac app with opening laptop",
  "author": "Ballmac <https://ui.ballmac.com>",
  "description": "Centered hero for a Mac app: shiny highlighted headline, download button and requirements, over a laptop whose lid opens into view on a live app window.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.ballmac.com/r/button.json",
    "https://ui.ballmac.com/r/gradient-text.json",
    "https://ui.ballmac.com/r/laptop-frame.json",
    "https://ui.ballmac.com/r/mac-window.json"
  ],
  "files": [
    {
      "path": "registry/ballmac/components/blocks/hero-5/hero-5.tsx",
      "content": "// Ballmac UI: Hero 5. https://ui.ballmac.com/blocks/hero-5\nimport * as React from \"react\"\nimport { Check, Circle, Download, Inbox, ListTodo, Search, Star, Sun } from \"lucide-react\"\n\nimport { buttonVariants } from \"@/components/ballmac/button\"\nimport { GradientText } from \"@/components/ballmac/gradient-text\"\nimport { LaptopFrame } from \"@/components/ballmac/laptop-frame\"\nimport {\n  MacWindow,\n  MacWindowContent,\n  MacWindowMain,\n  MacWindowSidebar,\n  MacWindowSidebarItem,\n  MacWindowTitleBar,\n  MacWindowToolbarButton,\n} from \"@/components/ballmac/mac-window\"\nimport { cn } from \"@/lib/utils\"\n\ntype Action = { label: string; href: string }\n\ntype Hero5Props = Omit<React.ComponentProps<\"section\">, \"title\"> & {\n  /** Headline before the highlighted phrase. */\n  title?: string\n  /** Phrase rendered with a shiny gradient at the end of the headline. */\n  highlight?: string\n  /** One or two sentences under the heading. */\n  description?: string\n  /** Download button. */\n  primaryAction?: Action\n  /** Secondary link, e.g. pricing or a tour. */\n  secondaryAction?: Action\n  /** Small print under the buttons, e.g. system requirements. */\n  requirements?: string\n  /** What the laptop shows. Defaults to a to-do app window; pass a screenshot or your own UI. */\n  screen?: React.ReactNode\n}\n\nconst lists = [\n  { icon: Inbox, label: \"Inbox\", count: 4 },\n  { icon: Sun, label: \"Today\", count: 6, selected: true },\n  { icon: Star, label: \"Planned\", count: 12 },\n  { icon: ListTodo, label: \"Someday\", count: 23 },\n]\n\nconst tasks = [\n  { title: \"Review the launch checklist\", tag: \"Launch\", done: true },\n  { title: \"Record the product walkthrough\", tag: \"Launch\", done: true },\n  { title: \"Reply to beta feedback\", tag: \"Support\" },\n  { title: \"Notarize and staple the build\", tag: \"Release\" },\n  { title: \"Schedule the announcement for 9:00\", tag: \"Launch\" },\n]\n\n/** Default screen: a wallpaper and a to-do app window, drawn with Ballmac components. */\nfunction DefaultScreen() {\n  return (\n    <div className=\"relative size-full overflow-hidden\">\n      <div aria-hidden=\"true\" className=\"absolute inset-0 bg-linear-to-br from-chart-1 via-chart-4 to-chart-5 dark:brightness-[0.55]\" />\n      <div aria-hidden=\"true\" className=\"absolute inset-x-0 top-0 h-7 bg-white/30 backdrop-blur-xl dark:bg-black/30\" />\n      <MacWindow className=\"absolute inset-x-[7%] top-[9%] bottom-[7%] text-[15px]\">\n        <MacWindowSidebar>\n          {lists.map((l) => (\n            <MacWindowSidebarItem key={l.label} selected={l.selected}>\n              <l.icon className=\"size-4\" aria-hidden=\"true\" />\n              <span className=\"flex-1\">{l.label}</span>\n              <span className=\"text-xs text-muted-foreground tabular-nums\">{l.count}</span>\n            </MacWindowSidebarItem>\n          ))}\n        </MacWindowSidebar>\n        <MacWindowMain>\n          <MacWindowTitleBar title=\"Today\" controls={false}>\n            <MacWindowToolbarButton aria-label=\"Search\">\n              <Search />\n            </MacWindowToolbarButton>\n          </MacWindowTitleBar>\n          <MacWindowContent className=\"px-8 py-6\">\n            <p className=\"text-3xl font-semibold tracking-tight\">Today</p>\n            <p className=\"mt-1 text-sm text-muted-foreground\">Tuesday, September 29</p>\n            <ul className=\"mt-6 divide-y\">\n              {tasks.map((t) => (\n                <li key={t.title} className=\"flex items-center gap-3 py-3\">\n                  {t.done ? (\n                    <span className=\"flex size-5 items-center justify-center rounded-full bg-primary text-primary-foreground\">\n                      <Check className=\"size-3\" strokeWidth={3} aria-hidden=\"true\" />\n                    </span>\n                  ) : (\n                    <Circle className=\"size-5 text-muted-foreground/60\" aria-hidden=\"true\" />\n                  )}\n                  <span className={cn(\"flex-1\", t.done && \"text-muted-foreground line-through\")}>{t.title}</span>\n                  <span className=\"rounded-md bg-muted px-2 py-0.5 text-xs text-muted-foreground\">{t.tag}</span>\n                </li>\n              ))}\n            </ul>\n          </MacWindowContent>\n        </MacWindowMain>\n      </MacWindow>\n    </div>\n  )\n}\n\nfunction Hero5({\n  title = \"Your day, planned in\",\n  highlight = \"one calm place.\",\n  description = \"A fast, native to-do app that lives in your menu bar, syncs through iCloud and never sends your tasks anywhere else.\",\n  primaryAction = { label: \"Download for Mac\", href: \"#\" },\n  secondaryAction = { label: \"See pricing\", href: \"#pricing\" },\n  requirements = \"Free to try · macOS 14 or later · Apple silicon and Intel\",\n  screen,\n  className,\n  ...props\n}: Hero5Props) {\n  return (\n    <section data-slot=\"hero-5\" className={cn(\"relative isolate overflow-hidden\", className)} {...props}>\n      <div aria-hidden=\"true\" className=\"absolute inset-x-0 top-0 -z-10 h-[520px] bg-[radial-gradient(60%_60%_at_50%_0%,color-mix(in_oklch,var(--chart-1)_22%,transparent),transparent)]\" />\n      <div className=\"mx-auto max-w-6xl px-4 pt-20 text-center sm:px-6 sm:pt-28\">\n        <h1 className=\"mx-auto max-w-3xl text-4xl leading-[1.04] font-semibold tracking-[-0.045em] text-balance sm:text-6xl lg:text-7xl\">\n          {title} <GradientText variant=\"shiny\">{highlight}</GradientText>\n        </h1>\n        <p className=\"mx-auto mt-6 max-w-xl text-lg leading-relaxed text-pretty text-muted-foreground\">{description}</p>\n        <div className=\"mt-8 flex flex-wrap justify-center gap-3\">\n          <a href={primaryAction.href} className={buttonVariants({ size: \"lg\", shape: \"pill\" })}>\n            <Download /> {primaryAction.label}\n          </a>\n          <a href={secondaryAction.href} className={buttonVariants({ size: \"lg\", shape: \"pill\", variant: \"outline\" })}>\n            {secondaryAction.label}\n          </a>\n        </div>\n        {requirements && <p className=\"mt-4 text-xs text-muted-foreground\">{requirements}</p>}\n        <div className=\"mx-auto mt-14 max-w-5xl sm:mt-20\">\n          <LaptopFrame openAnimation=\"in-view\" screenWidth={1280}>\n            {screen ?? <DefaultScreen />}\n          </LaptopFrame>\n        </div>\n      </div>\n    </section>\n  )\n}\n\nexport { Hero5, type Hero5Props }\n",
      "type": "registry:component",
      "target": "@components/ballmac/blocks/hero-5/hero-5.tsx"
    }
  ],
  "meta": {
    "schema": 1,
    "tier": "free",
    "tags": [
      "hero",
      "mac app",
      "download",
      "laptop",
      "product"
    ],
    "version": "1.0.0",
    "updated": "2026-09-29",
    "ai": {
      "summary": "Top of a desktop-app landing page. Edit title, highlight, description, actions and requirements; pass `screen` (an image or your UI) to replace the sample app window.",
      "whenToUse": [
        "Landing pages for Mac or desktop apps",
        "Products whose UI is the selling point"
      ],
      "whenNotToUse": [
        "Web SaaS without a desktop app (use hero-1)",
        "Mobile apps (compose phone-frame instead)"
      ],
      "composesWith": [
        "header-1",
        "features-4",
        "pricing-1",
        "template-ledger"
      ],
      "a11y": [],
      "customization": [
        "title + highlight (shiny gradient)",
        "screen: any ReactNode laid out at 1280px wide and scaled"
      ]
    },
    "examples": [
      "hero-5-demo"
    ],
    "url": "https://ui.ballmac.com/components/hero-5"
  },
  "categories": [
    "blocks",
    "hero"
  ],
  "type": "registry:block"
}