{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-4",
  "title": "Hero 4: split with interactive globe",
  "author": "Ballmac <https://ui.ballmac.com>",
  "description": "Split hero with a live pill, headline, two actions and headline stats beside a large draggable WebGL globe marking your regions.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.ballmac.com/r/button.json",
    "https://ui.ballmac.com/r/globe.json",
    "https://ui.ballmac.com/r/media.json"
  ],
  "files": [
    {
      "path": "registry/ballmac/components/blocks/hero-4/hero-4.tsx",
      "content": "// Ballmac UI: Hero 4. https://ui.ballmac.com/blocks/hero-4\nimport * as React from \"react\"\nimport { ArrowRight } from \"lucide-react\"\n\nimport { buttonVariants } from \"@/components/ballmac/button\"\nimport { Globe, type GlobeMarker } from \"@/components/ballmac/globe\"\nimport { cn } from \"@/lib/utils\"\nimport { Media, type MediaSource } from \"@/components/ballmac/media\"\n\ntype Action = { label: string; href: string }\n\ntype Hero4Props = Omit<React.ComponentProps<\"section\">, \"title\"> & {\n  /** Short line in the pill above the heading. */\n  announcement?: string\n  /** The heading. */\n  title?: React.ReactNode\n  /** One or two sentences under the heading. */\n  description?: string\n  /** Main call to action. */\n  primaryAction?: Action\n  /** Secondary call to action. */\n  secondaryAction?: Action\n  /** Headline numbers under the actions. */\n  stats?: { value: string; label: string }[]\n  /** Points on the globe, such as your regions or offices. */\n  markers?: GlobeMarker[]\n  /** Your own image instead of the globe. An image URL (give it mediaAlt), an object with alt text and a dark-mode file, or your own element. */\n  media?: MediaSource\n  /** Describes `media` when it is a plain URL. */\n  mediaAlt?: string\n}\n\nconst defaultMarkers: GlobeMarker[] = [\n  { location: [37.77, -122.42], size: 0.06 },\n  { location: [40.71, -74.01], size: 0.07 },\n  { location: [-23.55, -46.63], size: 0.06 },\n  { location: [51.51, -0.13], size: 0.07 },\n  { location: [50.11, 8.68], size: 0.05 },\n  { location: [19.08, 72.88], size: 0.06 },\n  { location: [1.35, 103.82], size: 0.06 },\n  { location: [35.68, 139.69], size: 0.07 },\n  { location: [-33.87, 151.21], size: 0.05 },\n]\n\nfunction Hero4({\n  announcement = \"Now in 35 regions\",\n  title = \"Your app, close to every user.\",\n  description = \"Deploy once and run at the edge on every continent, with no configuration and no cold starts.\",\n  primaryAction = { label: \"Start deploying\", href: \"#\" },\n  secondaryAction = { label: \"See the network\", href: \"#\" },\n  stats = [\n    { value: \"35\", label: \"regions\" },\n    { value: \"38 ms\", label: \"median latency\" },\n    { value: \"99.99%\", label: \"uptime\" },\n  ],\n  markers = defaultMarkers,\n  media,\n  mediaAlt,\n  className,\n  ...props\n}: Hero4Props) {\n  return (\n    <section data-slot=\"hero-4\" className={cn(\"relative isolate overflow-hidden\", className)} {...props}>\n      <div className=\"mx-auto grid max-w-6xl grid-cols-1 items-center gap-6 px-4 pt-20 sm:px-6 lg:grid-cols-[1.05fr_1fr] lg:pt-16\">\n        <div className=\"relative z-10 py-4 lg:py-24\">\n          <span className=\"inline-flex items-center gap-2 rounded-full border bg-background/70 px-3 py-1 text-xs font-medium backdrop-blur\">\n            <span className=\"relative flex size-2\" aria-hidden=\"true\">\n              <span className=\"absolute inset-0 animate-ping rounded-full bg-chart-2 opacity-60 motion-reduce:animate-none\" />\n              <span className=\"relative size-2 rounded-full bg-chart-2\" />\n            </span>\n            {announcement}\n          </span>\n          <h1 className=\"mt-6 text-4xl leading-[1.04] font-semibold tracking-[-0.045em] text-balance sm:text-6xl\">{title}</h1>\n          <p className=\"mt-5 max-w-lg text-lg leading-relaxed text-pretty text-muted-foreground\">{description}</p>\n          <div className=\"mt-8 flex flex-wrap gap-3\">\n            <a href={primaryAction.href} className={buttonVariants({ size: \"lg\", shape: \"pill\" })}>\n              {primaryAction.label} <ArrowRight  className=\"rtl:rotate-180\"/>\n            </a>\n            <a href={secondaryAction.href} className={buttonVariants({ size: \"lg\", shape: \"pill\", variant: \"outline\" })}>\n              {secondaryAction.label}\n            </a>\n          </div>\n          {stats.length > 0 && (\n            <dl className=\"mt-12 grid max-w-md grid-cols-3 gap-6 border-t pt-6\">\n              {stats.map((s) => (\n                <div key={s.label} className=\"flex flex-col-reverse gap-1\">\n                  <dt className=\"text-sm text-muted-foreground\">{s.label}</dt>\n                  <dd className=\"text-2xl font-semibold tracking-tight tabular-nums\">{s.value}</dd>\n                </div>\n              ))}\n            </dl>\n          )}\n        </div>\n        <Media media={media} alt={mediaAlt} aspect=\"square\" priority fallback={\n        <div className=\"relative -mx-4 aspect-square sm:mx-auto sm:w-full sm:max-w-[560px] lg:-me-24 lg:max-w-none\">\n          <div aria-hidden=\"true\" className=\"absolute inset-[12%] -z-10 rounded-full bg-chart-1/20 blur-3xl\" />\n          <Globe markers={markers} label={`Globe with ${markers.length} highlighted regions`} className=\"size-full\" />\n        </div>\n        } />\n      </div>\n    </section>\n  )\n}\n\nexport { Hero4, type Hero4Props }\n",
      "type": "registry:component",
      "target": "@components/ballmac/blocks/hero-4/hero-4.tsx"
    }
  ],
  "meta": {
    "schema": 1,
    "tier": "free",
    "tags": [
      "hero",
      "globe",
      "infrastructure",
      "landing",
      "3d"
    ],
    "version": "1.0.0",
    "updated": "2026-09-29",
    "ai": {
      "summary": "Top-of-page hero for global or infrastructure products. Edit announcement, title, description, actions, stats and globe markers ([lat, long]).",
      "whenToUse": [
        "Infrastructure, hosting, edge or global-reach products",
        "Companies with offices or users worldwide"
      ],
      "whenNotToUse": [
        "Products where geography doesn't matter (use hero-1 or hero-2)"
      ],
      "composesWith": [
        "header-1",
        "logo-cloud-1",
        "features-3"
      ],
      "a11y": [],
      "customization": [
        "markers: [{ location: [lat, long], size }]",
        "stats: up to three { value, label }"
      ]
    },
    "examples": [
      "hero-4-demo"
    ],
    "url": "https://ui.ballmac.com/components/hero-4"
  },
  "categories": [
    "blocks",
    "hero"
  ],
  "type": "registry:block"
}