{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-03",
  "title": "Hero 03",
  "description": "Two-column hero with star rating social proof, key statistics card, and call-to-action buttons. Use it when you need to build immediate trust and highlight traction metrics on SaaS or agency landing pages.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "badge",
    "separator"
  ],
  "files": [
    {
      "path": "src/registry/blocks/hero-03/hero.tsx",
      "content": "import { ArrowUpRight, Star } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Separator } from \"@/components/ui/separator\";\n\ninterface Hero03Props {\n  badge?: string;\n  title?: string;\n  description?: string;\n  buttons?: {\n    text: string;\n    url?: string;\n    icon?: React.ReactNode;\n    variant?: \"default\" | \"outline\" | \"ghost\" | \"secondary\" | \"link\";\n  }[];\n  ratingText?: string;\n  img?: string;\n  className?: string;\n}\n\nconst Hero03 = ({\n  badge = \"100% Free & Open Source\",\n  title = \"Shadcn UI Blocks, Copy & Customize\",\n  description = \"Pre-built landing page components for React. Just copy the code and focus on what matters — your product.\",\n  buttons = [\n    {\n      text: \"Browse Components\",\n      url: \"#\",\n      icon: <ArrowUpRight className=\"size-4\" />,\n    },\n    { text: \"View Docs\", url: \"#\", variant: \"outline\" },\n  ],\n  ratingText = \"Loved by developers worldwide\",\n  img = \"https://www.shadcnship.com/images/placeholders/hero-architecture-1.webp\",\n  className,\n}: Hero03Props) => {\n  return (\n    <section className={cn(\"relative w-full overflow-hidden\", className)}>\n      <div className=\"flex min-h-screen flex-col gap-4 lg:flex-row lg:gap-0\">\n        {/* Text */}\n        <div className=\"container m-auto flex flex-col items-center gap-4 px-6 py-16 text-center lg:items-start lg:p-20 lg:text-left\">\n          <Badge\n            variant=\"secondary\"\n            className=\"border border-border py-1\"\n            asChild\n          >\n            <a href=\"#\">{badge}</a>\n          </Badge>\n\n          <h1 className=\"text-4xl leading-tight font-medium tracking-tight md:text-5xl lg:text-6xl\">\n            {title}\n          </h1>\n\n          <p className=\"max-w-3xl text-muted-foreground md:text-lg\">\n            {description}\n          </p>\n\n          {buttons && buttons.length > 0 && (\n            <div className=\"grid w-full grid-cols-1 gap-4 sm:w-fit sm:grid-cols-2\">\n              {buttons.map((btn) => (\n                <Button\n                  key={btn.text}\n                  size=\"lg\"\n                  variant={btn.variant ?? \"default\"}\n                  className=\"w-full\"\n                  asChild\n                >\n                  <a href={btn.url}>\n                    {btn.text}\n                    {btn.icon}\n                  </a>\n                </Button>\n              ))}\n            </div>\n          )}\n\n          <div className=\"mt-4 flex items-center gap-2\">\n            <div className=\"flex\">\n              {[...Array(5)].map((_, i) => (\n                <Star\n                  key={`star-${i}`}\n                  className=\"size-4 fill-primary text-primary\"\n                />\n              ))}\n            </div>\n            <Separator orientation=\"vertical\" className=\"h-4\" />\n            <span className=\"text-sm text-muted-foreground\">{ratingText}</span>\n          </div>\n        </div>\n\n        {/* Image */}\n        {img && (\n          <div className=\"aspect-video w-full bg-muted/30\">\n            <img\n              src={img}\n              alt={title}\n              width={1000}\n              height={200}\n              className=\"aspect-video size-full object-cover\"\n            />\n          </div>\n        )}\n      </div>\n    </section>\n  );\n};\n\nexport default Hero03;\n",
      "type": "registry:component",
      "target": "components/hero-03.tsx"
    }
  ],
  "meta": {
    "image": "/r/previews/hero-03.webp",
    "imageDark": "/r/previews/hero-03-dark.webp",
    "prose": {
      "about": "Hero 03 is a two-column hero section designed to lead with social proof. The left column features a star rating display, a headline, a subtitle, CTA buttons, and a statistics card showing key business metrics. The right column holds a product image or screenshot. Built with shadcn/ui Cards and Tailwind CSS, it uses a responsive grid that collapses to a single column on mobile. The stats card is a nested shadcn Card component that can be updated with real numbers from any data source.",
      "whenToUse": [
        "SaaS or agency landing pages where you want to lead with measurable traction (users, revenue, ratings)",
        "Products with strong review scores or notable growth metrics worth surfacing above the fold",
        "B2B landing pages where trust-building is the primary conversion lever",
        "Situations where a plain headline-and-CTA hero needs more credibility signals"
      ],
      "notes": "Replace the placeholder star rating and stats with real numbers. The stats card is a standalone shadcn Card — you can connect it to a live data source or keep it static."
    }
  },
  "categories": [
    "hero"
  ],
  "type": "registry:block"
}