{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "hero-01",
  "title": "Metric Showcase Hero",
  "type": "registry:block",
  "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",
  "files": [
    {
      "path": "packages/elements-lit/src/blocks/hero-01/hero-01.ts",
      "content": "import { LitElement, css, html } from 'lit'\nimport { ArrowRight, PlayCircle } from 'lucide'\nimport { tailwind } from '../../lib/styles'\nimport { ThemeController } from '../../lib/theme'\nimport { icon } from '../../lib/icon'\n// Side-effect imports: register the composed elements for standalone use\n// (consumers who install only this block still get working primitives).\nimport '../../components/avatar/avatar'\nimport '../../components/badge/badge'\nimport '../../components/button/button'\nimport '../../components/card/card'\n\nconst queue = [\n  { initials: 'LW', name: 'Lena Wei', role: 'Engineering' },\n  { initials: 'JR', name: 'Joaquín Reyes', role: 'Engineering' },\n  { initials: 'PS', name: 'Priya Shah', role: 'Engineering' },\n]\n\n/**\n * <uip-hero-01> — the registry Hero01 block as a web component.\n *\n * Class strings are React's Hero01 verbatim. The section is static (React\n * holds no state); the three KPI cards compose <uip-card> parts and the\n * onboarding rows compose <uip-avatar> + <uip-badge>. (React imports Badge\n * but never renders it for the eyebrow — there is no eyebrow badge in the\n * source, so none is ported.)\n */\nexport class UipHero01 extends LitElement {\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n  // :host display can't be a utility class (the host has no template of its own).\n  static styles = [tailwind, css`:host { display: block; }`]\n\n  constructor() {\n    super()\n    new ThemeController(this)\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.setAttribute('data-uipkge', '')\n    this.setAttribute('data-slot', 'hero-01')\n  }\n\n  render() {\n    return html`\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 unbundled UI primitives — fast, accessible,\n                easy to customise.\n              </p>\n              <div class=\"flex flex-wrap items-center gap-3\">\n                <uip-button size=\"lg\">\n                  Start free trial ${icon(ArrowRight, 'arrow-right', 'ml-2 size-4')}\n                </uip-button>\n                <uip-button size=\"lg\" variant=\"outline\">\n                  ${icon(PlayCircle, 'circle-play', 'mr-2 size-4')} Watch demo (2 min)\n                </uip-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              <uip-card class=\"absolute -top-4 right-0 w-56 rotate-2 shadow-lg\">\n                <uip-card-content 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                </uip-card-content>\n              </uip-card>\n              <uip-card class=\"absolute top-32 -left-2 w-52 -rotate-3 shadow-lg\">\n                <uip-card-content 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                </uip-card-content>\n              </uip-card>\n              <uip-card class=\"ml-auto w-72 shadow-xl\">\n                <uip-card-header>\n                  <uip-card-title class=\"text-base\">Onboarding queue</uip-card-title>\n                  <uip-card-description>3 starting Monday</uip-card-description>\n                </uip-card-header>\n                <uip-card-content class=\"space-y-3\">\n                  ${queue.map(\n                    (person) => html`\n                      <div class=\"flex items-center gap-3\">\n                        <uip-avatar class=\"[&::part(base)]:size-8\">\n                          <uip-avatar-fallback>${person.initials}</uip-avatar-fallback>\n                        </uip-avatar>\n                        <div class=\"flex-1\">\n                          <p class=\"text-sm font-medium\">${person.name}</p>\n                          <p class=\"text-muted-foreground text-xs\">${person.role}</p>\n                        </div>\n                        <uip-badge variant=\"secondary\">Pending</uip-badge>\n                      </div>\n                    `,\n                  )}\n                </uip-card-content>\n              </uip-card>\n            </div>\n          </div>\n        </div>\n      </section>\n    `\n  }\n}\n\ncustomElements.get('uip-hero-01') || customElements.define('uip-hero-01', UipHero01)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uip-hero-01': UipHero01\n  }\n}\n",
      "type": "registry:file",
      "target": "src/uip/blocks/hero-01/hero-01.ts"
    }
  ],
  "dependencies": [
    "lit",
    "lucide"
  ],
  "registryDependencies": [
    "https://uipkge.dev/r/lit/avatar.json",
    "https://uipkge.dev/r/lit/badge.json",
    "https://uipkge.dev/r/lit/button.json",
    "https://uipkge.dev/r/lit/card.json",
    "https://uipkge.dev/r/lit/lit-core.json"
  ]
}