{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-01",
  "title": "Hero 01",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/hero-01/Hero01.tsx",
      "content": "import { ArrowRight, PlayCircle, Sparkles } from 'lucide-react'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\n\nexport function Hero01() {\n  return (\n    <section className=\"bg-background relative overflow-hidden\">\n      <div className=\"bg-primary/10 pointer-events-none absolute -top-40 left-1/2 size-[600px] -translate-x-1/2 rounded-full blur-3xl\" />\n\n      <div className=\"relative mx-auto max-w-6xl px-6 py-24 lg:py-32\">\n        <div className=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n          <div className=\"space-y-6\">\n            <Badge variant=\"secondary\" className=\"gap-1\">\n              <Sparkles className=\"size-3\" />\n              New: AI-powered insights\n            </Badge>\n            <h1 className=\"text-4xl font-semibold tracking-tight sm:text-5xl lg:text-6xl\">\n              The platform your team will actually use.\n            </h1>\n            <p className=\"text-muted-foreground max-w-xl text-lg\">\n              One workspace for everything your team needs. Built on shadcn-vue primitives — fast, accessible, easy to\n              customise.\n            </p>\n            <div className=\"flex flex-wrap items-center gap-3\">\n              <Button size=\"lg\">\n                Start free trial\n                <ArrowRight className=\"ml-2 size-4\" />\n              </Button>\n              <Button size=\"lg\" variant=\"outline\">\n                <PlayCircle className=\"mr-2 size-4\" />\n                Watch demo (2 min)\n              </Button>\n            </div>\n            <div className=\"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 className=\"relative\">\n            <Card className=\"absolute -top-4 right-0 w-56 rotate-2 shadow-lg\">\n              <CardContent className=\"space-y-1 p-4\">\n                <p className=\"text-muted-foreground text-xs uppercase\">Active users</p>\n                <p className=\"text-2xl font-semibold\">1,284</p>\n                <p className=\"text-xs text-[var(--success)]\">+8.2% MoM</p>\n              </CardContent>\n            </Card>\n            <Card className=\"absolute top-32 -left-2 w-52 -rotate-3 shadow-lg\">\n              <CardContent className=\"space-y-1 p-4\">\n                <p className=\"text-muted-foreground text-xs uppercase\">Uptime</p>\n                <p className=\"text-2xl font-semibold\">100%</p>\n                <p className=\"text-muted-foreground text-xs\">12 cycles, 0 misses</p>\n              </CardContent>\n            </Card>\n            <Card className=\"ml-auto w-72 shadow-xl\">\n              <CardHeader>\n                <CardTitle className=\"text-base\">Onboarding queue</CardTitle>\n                <CardDescription>3 starting Monday</CardDescription>\n              </CardHeader>\n              <CardContent className=\"space-y-3\">\n                <div className=\"flex items-center gap-3\">\n                  <Avatar className=\"size-8\">\n                    <AvatarFallback>LW</AvatarFallback>\n                  </Avatar>\n                  <div className=\"flex-1\">\n                    <p className=\"text-sm font-medium\">Lena Wei</p>\n                    <p className=\"text-muted-foreground text-xs\">Engineering</p>\n                  </div>\n                  <Badge variant=\"secondary\">Pending</Badge>\n                </div>\n                <div className=\"flex items-center gap-3\">\n                  <Avatar className=\"size-8\">\n                    <AvatarFallback>JR</AvatarFallback>\n                  </Avatar>\n                  <div className=\"flex-1\">\n                    <p className=\"text-sm font-medium\">Joaquín Reyes</p>\n                    <p className=\"text-muted-foreground text-xs\">Engineering</p>\n                  </div>\n                  <Badge variant=\"secondary\">Pending</Badge>\n                </div>\n                <div className=\"flex items-center gap-3\">\n                  <Avatar className=\"size-8\">\n                    <AvatarFallback>PS</AvatarFallback>\n                  </Avatar>\n                  <div className=\"flex-1\">\n                    <p className=\"text-sm font-medium\">Priya Shah</p>\n                    <p className=\"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  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/Hero01.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/avatar.json",
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/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"
  ]
}