{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-sections-05",
  "type": "registry:component",
  "title": "Hero Sections",
  "author": "Toby Belhome",
  "description": "Explore beautifully crafted Tailwind CSS hero sections designed to deliver a powerful first impression with clarity and purpose. These layouts blend minimalist design, strong visual hierarchy, and persuasive calls-to-action to communicate your product’s value from the very first glance. Ideal for landing pages, SaaS platforms, and marketing websites seeking a refined, modern, and conversion-ready above-the-fold experience.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "badge",
    "card",
    "avatar"
  ],
  "files": [
    {
      "path": "examples/blocks/marketing/hero-sections/05/page.tsx",
      "content": "import { Sun } from \"lucide-react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { Avatar, AvatarImage, AvatarFallback } from \"@/components/ui/avatar\";\n\nexport default function HeroSection() {\n  return (\n    <section className=\"mx-auto w-full max-w-7xl px-6 lg:py-20\">\n      <div className=\"grid grid-cols-1 items-center gap-12 lg:grid-cols-2\">\n        <div className=\"space-y-8\">\n          <Badge\n            variant=\"outline\"\n            className=\"inline-flex items-center gap-2 rounded-full px-2 py-1\">\n            <Sun className=\"size-4\" />\n            2.0 version is here\n          </Badge>\n\n          <div className=\"mx-auto max-w-xl space-y-6 text-center lg:mx-0 lg:text-start\">\n            <h1 className=\"text-5xl lg:text-6xl\">\n              <span>Welcome to the</span> <br />\n              <span className=\"text-muted-foreground italic\">innovation</span>\n              <span className=\"text-muted-foreground not-italic\"> oasis</span>\n            </h1>\n\n            <p className=\"text-muted-foreground text-lg leading-relaxed\">\n              Step into our innovation oasis, where groundbreaking ideas bloom, and every click is a\n              step into a world of endless possibilities.\n            </p>\n          </div>\n\n          <div className=\"flex justify-center gap-4 lg:justify-start\">\n            <Button size=\"lg\" className=\"rounded-full\">\n              Get Started\n            </Button>\n            <Button size=\"lg\" variant=\"outline\" className=\"rounded-full\">\n              Watch Demo\n            </Button>\n          </div>\n        </div>\n\n        <div className=\"grid grid-cols-2 gap-6 space-y-6\">\n          <div className=\"space-y-6\">\n            <Card className=\"mt-8 overflow-hidden border-none p-0 shadow-none\">\n              <img\n                src=\"https://images.pexels.com/photos/4386321/pexels-photo-4386321.jpeg?auto=compress&cs=tinysrgb&w=800\"\n                alt=\"Mobile app\"\n                className=\"aspect-4/3 w-full object-cover\"\n              />\n            </Card>\n            <Card className=\"bg-muted aspect-4/3 border-none shadow-none\">\n              <CardContent className=\"flex h-full flex-col justify-end\">\n                <div>\n                  <div className=\"mb-2 text-4xl\">27k+</div>\n                  <div className=\"text-muted-foreground\">Raised by startups</div>\n                </div>\n              </CardContent>\n            </Card>\n          </div>\n\n          <div className=\"-mb-8 space-y-6\">\n            <Card className=\"bg-muted aspect-4/3 border-none shadow-none\">\n              <CardContent className=\"flex h-full flex-col justify-end\">\n                <div>\n                  <div className=\"mb-2 text-4xl\">$14B</div>\n                  <div className=\"text-muted-foreground\">Funds & Syndicates</div>\n                </div>\n              </CardContent>\n            </Card>\n            <Card className=\"aspect-4/3 border-none bg-amber-50 shadow-none dark:bg-amber-950\">\n              <CardContent className=\"flex h-full flex-col justify-end\">\n                <div className=\"mb-2 text-4xl\">80k</div>\n                <div className=\"text-muted-foreground mb-4\">Active members</div>\n                <div className=\"flex -space-x-2\">\n                  <Avatar className=\"border-background border-2\">\n                    <AvatarImage src=\"https://images.pexels.com/photos/2379004/pexels-photo-2379004.jpeg?auto=compress&cs=tinysrgb&w=100&h=100\" />\n                    <AvatarFallback>U1</AvatarFallback>\n                  </Avatar>\n                  <Avatar className=\"border-background border-2\">\n                    <AvatarImage src=\"https://images.pexels.com/photos/1222271/pexels-photo-1222271.jpeg?auto=compress&cs=tinysrgb&w=100&h=100\" />\n                    <AvatarFallback>U2</AvatarFallback>\n                  </Avatar>\n                  <Avatar className=\"border-background border-2\">\n                    <AvatarImage src=\"https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=100&h=100\" />\n                    <AvatarFallback>U3</AvatarFallback>\n                  </Avatar>\n                  <Avatar className=\"border-background border-2\">\n                    <AvatarImage src=\"https://images.pexels.com/photos/1516680/pexels-photo-1516680.jpeg?auto=compress&cs=tinysrgb&w=100&h=100\" />\n                    <AvatarFallback>U4</AvatarFallback>\n                  </Avatar>\n                </div>\n              </CardContent>\n            </Card>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/hero-sections-05.tsx"
    }
  ],
  "meta": {
    "isPro": true
  }
}