{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "hero-01",
  "title": "Metric Showcase Hero",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-svelte/blocks/hero-01/Hero01.svelte",
      "content": "<script lang=\"ts\">\n  import { ArrowRight, PlayCircle } from '@lucide/svelte'\n  import { Avatar, AvatarFallback } from '$lib/components/ui/avatar'\n  import { Badge } from '$lib/components/ui/badge'\n  import { Button } from '$lib/components/ui/button'\n  import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '$lib/components/ui/card'\n</script>\n\n<section data-slot=\"hero-01\" class=\"bg-background relative overflow-hidden\">\n  <div class=\"relative mx-auto max-w-6xl px-6 py-24 lg:py-32\">\n    <div class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n      <div class=\"space-y-6\">\n        <h1 class=\"text-4xl font-semibold tracking-tight sm:text-5xl lg:text-6xl\">\n          The platform your team will actually use.\n        </h1>\n        <p class=\"text-muted-foreground max-w-xl text-lg\">\n          One workspace for everything your team needs. Built on shadcn-svelte primitives — fast, accessible, easy to\n          customise.\n        </p>\n        <div class=\"flex flex-wrap items-center gap-3\">\n          <Button size=\"lg\">\n            Start free trial\n            <ArrowRight class=\"ml-2 size-4\" />\n          </Button>\n          <Button size=\"lg\" variant=\"outline\">\n            <PlayCircle class=\"mr-2 size-4\" />\n            Watch demo (2 min)\n          </Button>\n        </div>\n        <div class=\"text-muted-foreground flex flex-wrap items-center gap-x-6 gap-y-2 text-sm\">\n          <span>★★★★★ 4.9 on G2</span>\n          <span>14-day free trial</span>\n          <span>No credit card required</span>\n        </div>\n      </div>\n\n      <div class=\"relative\">\n        <Card class=\"absolute -top-4 right-0 w-56 rotate-2 shadow-lg\">\n          <CardContent class=\"space-y-1 p-4\">\n            <p class=\"text-muted-foreground text-xs uppercase\">Active users</p>\n            <p class=\"text-2xl font-semibold\">1,284</p>\n            <p class=\"text-success text-xs\">+8.2% MoM</p>\n          </CardContent>\n        </Card>\n        <Card class=\"absolute top-32 -left-2 w-52 -rotate-3 shadow-lg\">\n          <CardContent class=\"space-y-1 p-4\">\n            <p class=\"text-muted-foreground text-xs uppercase\">Uptime</p>\n            <p class=\"text-2xl font-semibold\">100%</p>\n            <p class=\"text-muted-foreground text-xs\">12 cycles, 0 misses</p>\n          </CardContent>\n        </Card>\n        <Card class=\"ml-auto w-72 shadow-xl\">\n          <CardHeader>\n            <CardTitle class=\"text-base\">Onboarding queue</CardTitle>\n            <CardDescription>3 starting Monday</CardDescription>\n          </CardHeader>\n          <CardContent class=\"space-y-3\">\n            <div class=\"flex items-center gap-3\">\n              <Avatar class=\"size-8\">\n                <AvatarFallback>LW</AvatarFallback>\n              </Avatar>\n              <div class=\"flex-1\">\n                <p class=\"text-sm font-medium\">Lena Wei</p>\n                <p class=\"text-muted-foreground text-xs\">Engineering</p>\n              </div>\n              <Badge variant=\"secondary\">Pending</Badge>\n            </div>\n            <div class=\"flex items-center gap-3\">\n              <Avatar class=\"size-8\">\n                <AvatarFallback>JR</AvatarFallback>\n              </Avatar>\n              <div class=\"flex-1\">\n                <p class=\"text-sm font-medium\">Joaquín Reyes</p>\n                <p class=\"text-muted-foreground text-xs\">Engineering</p>\n              </div>\n              <Badge variant=\"secondary\">Pending</Badge>\n            </div>\n            <div class=\"flex items-center gap-3\">\n              <Avatar class=\"size-8\">\n                <AvatarFallback>PS</AvatarFallback>\n              </Avatar>\n              <div class=\"flex-1\">\n                <p class=\"text-sm font-medium\">Priya Shah</p>\n                <p class=\"text-muted-foreground text-xs\">Engineering</p>\n              </div>\n              <Badge variant=\"secondary\">Pending</Badge>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n    </div>\n  </div>\n</section>\n",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/hero-01/Hero01.svelte"
    }
  ],
  "dependencies": [
    "@lucide/svelte"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/svelte/avatar.json",
    "https://uipkge.dev/r/svelte/badge.json",
    "https://uipkge.dev/r/svelte/button.json",
    "https://uipkge.dev/r/svelte/card.json"
  ],
  "description": "Two-column hero with badge eyebrow, large headline, supporting copy, primary + outline CTAs, social proof row, and a collage of three rotated KPI cards (active users / uptime / onboarding queue) on the right.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "hero"
}