{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-globe",
  "title": "Globe split hero",
  "description": "Split hero with copy, CTAs and live stats beside an interactive dotted globe with arcs.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils",
    "button",
    "https://velora.colorlib.com/r/blur-fade.json",
    "https://velora.colorlib.com/r/globe.json",
    "https://velora.colorlib.com/r/number-ticker.json"
  ],
  "files": [
    {
      "path": "src/components/blocks/hero-globe.tsx",
      "content": "import { ArrowRightIcon, GlobeIcon } from \"lucide-react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { BlurFade } from \"@/components/velora/blur-fade\";\nimport {\n  Globe,\n  type GlobeArc,\n  type GlobeMarker,\n} from \"@/components/velora/globe\";\nimport { NumberTicker } from \"@/components/velora/number-ticker\";\n\nconst REGIONS: GlobeMarker[] = [\n  { lat: 37.77, lng: -122.42, label: \"San Francisco\" },\n  { lat: 40.71, lng: -74.01, label: \"New York\" },\n  { lat: -23.55, lng: -46.63, label: \"São Paulo\" },\n  { lat: 51.51, lng: -0.13, label: \"London\" },\n  { lat: 50.11, lng: 8.68 }, // unlabelled: too close to London to name both\n  { lat: 6.52, lng: 3.38, label: \"Lagos\" },\n  { lat: 1.35, lng: 103.82, label: \"Singapore\" },\n  { lat: 35.68, lng: 139.69, label: \"Tokyo\" },\n];\n\nconst ROUTES: GlobeArc[] = [\n  { from: [37.77, -122.42], to: [40.71, -74.01] },\n  { from: [40.71, -74.01], to: [51.51, -0.13] },\n  { from: [51.51, -0.13], to: [50.11, 8.68] },\n  { from: [40.71, -74.01], to: [-23.55, -46.63] },\n  { from: [50.11, 8.68], to: [6.52, 3.38] },\n  { from: [50.11, 8.68], to: [1.35, 103.82] },\n];\n\nconst STATS = [\n  { value: 42, suffix: \"\", label: \"edge regions\" },\n  { value: 38, suffix: \"ms\", label: \"median global latency\" },\n  { value: 99.99, suffix: \"%\", decimals: 2, label: \"uptime, last 12 months\" },\n];\n\n/**\n * Split hero for infrastructure and global products: copy, calls to action\n * and headline numbers on the left, an interactive dotted globe with live\n * routes on the right. Stacks with the globe below on small screens.\n */\nexport function HeroGlobe() {\n  return (\n    <section className=\"relative isolate overflow-hidden px-6 py-24 sm:py-32 lg:px-8\">\n      {/* Soft brand wash behind the globe side */}\n      <div\n        aria-hidden\n        className=\"absolute inset-y-0 right-0 -z-10 w-full bg-radial-[at_75%_50%] from-brand/10 to-transparent to-60% lg:w-2/3\"\n      />\n\n      <div className=\"mx-auto grid max-w-7xl items-center gap-16 lg:grid-cols-2 lg:gap-8\">\n        <div className=\"max-w-xl\">\n          <BlurFade>\n            <a\n              href=\"#\"\n              className=\"inline-flex items-center gap-2 rounded-full border bg-background/60 py-1 pr-3 pl-1 text-sm text-muted-foreground backdrop-blur transition-colors hover:text-foreground\"\n            >\n              <span className=\"rounded-full bg-brand/10 px-2 py-0.5 text-xs font-medium text-brand\">\n                New\n              </span>\n              Lagos and São Paulo are live\n              <ArrowRightIcon className=\"size-3.5\" />\n            </a>\n          </BlurFade>\n\n          <h1 className=\"mt-8 text-4xl font-semibold tracking-tight text-balance sm:text-6xl\">\n            Deploy once. Run{\" \"}\n            <span className=\"bg-gradient-to-r from-brand-from via-brand-via to-brand-to bg-clip-text text-transparent\">\n              next to every user.\n            </span>\n          </h1>\n\n          <p className=\"mt-6 text-lg text-pretty text-muted-foreground\">\n            Orbit pushes your app, data and cache to 42 regions in a single\n            command, then routes every request to the closest one. No servers\n            to size, no regions to pick.\n          </p>\n\n          <BlurFade delay={0.3}>\n            <div className=\"mt-10 flex flex-col gap-3 sm:flex-row sm:items-center\">\n              <Button size=\"lg\" className=\"h-11 rounded-full px-6\" asChild>\n                <a href=\"#\">\n                  Start deploying <ArrowRightIcon />\n                </a>\n              </Button>\n              <Button\n                variant=\"outline\"\n                size=\"lg\"\n                className=\"h-11 rounded-full px-6\"\n                asChild\n              >\n                <a href=\"#\">\n                  <GlobeIcon /> See the network map\n                </a>\n              </Button>\n            </div>\n          </BlurFade>\n\n          <BlurFade delay={0.4}>\n            <dl className=\"mt-14 grid grid-cols-3 gap-6 border-t pt-8\">\n              {STATS.map((s) => (\n                <div\n                  key={s.label}\n                  className=\"flex flex-col-reverse justify-end gap-1\"\n                >\n                  <dt className=\"text-xs text-muted-foreground sm:text-sm\">\n                    {s.label}\n                  </dt>\n                  <dd className=\"text-2xl font-semibold tracking-tight sm:text-3xl\">\n                    <NumberTicker\n                      value={s.value}\n                      suffix={s.suffix}\n                      decimalPlaces={s.decimals ?? 0}\n                    />\n                  </dd>\n                </div>\n              ))}\n            </dl>\n          </BlurFade>\n        </div>\n\n        <BlurFade\n          delay={0.2}\n          direction=\"none\"\n          className=\"relative flex justify-center\"\n        >\n          <Globe\n            markers={REGIONS}\n            arcs={ROUTES}\n            center={[28, -20]}\n            speed={5}\n            className=\"max-w-[min(100%,34rem)]\"\n            label=\"Globe showing Orbit edge regions and the routes between them\"\n          />\n        </BlurFade>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/blocks/hero-globe.tsx"
    }
  ],
  "categories": [
    "hero-sections"
  ],
  "type": "registry:block"
}