{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "hero-01",
  "title": "Hero 01",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/hero-01/Hero01.vue",
      "content": "<script setup lang=\"ts\">\nimport { ArrowRight, PlayCircle, Sparkles } from 'lucide-vue-next'\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</script>\n\n<template>\n  <section class=\"bg-background relative overflow-hidden\">\n    <div\n      class=\"bg-primary/10 pointer-events-none absolute -top-40 left-1/2 size-[600px] -translate-x-1/2 rounded-full blur-3xl\"\n    />\n\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          <Badge variant=\"secondary\" class=\"gap-1\">\n            <Sparkles class=\"size-3\" />\n            New: AI-powered insights\n          </Badge>\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-vue 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-xs text-[var(--success)]\">+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</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/Hero01.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/avatar.json",
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/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"
  ]
}