{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-sections-04",
  "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",
    "avatar"
  ],
  "files": [
    {
      "path": "examples/blocks/marketing/hero-sections/04/page.tsx",
      "content": "import { Star } from \"lucide-react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Avatar, AvatarImage } from \"@/components/ui/avatar\";\nimport Link from \"next/link\";\n\nexport default function HeroSection() {\n  return (\n    <section className=\"py-12 lg:py-20\">\n      <div className=\"mx-auto max-w-7xl px-4 text-center\">\n        <header className=\"mx-auto flex max-w-3xl flex-col gap-4\">\n          <h1 className=\"font-heading text-4xl text-balance lg:text-5xl lg:leading-14\">\n            Simplify Your Workflow with Our SaaS Platform\n          </h1>\n          <p className=\"text-muted-foreground text-balance lg:text-lg\">\n            Manage users, track analytics, automate tasks, and grow your business with a single\n            platform designed for modern SaaS teams.\n          </p>\n        </header>\n\n        <div className=\"mt-8 flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-center\">\n          <Button asChild className=\"w-full sm:w-auto\">\n            <Link href=\"https://app.yoursaas.com/signup\">Start Free Trial</Link>\n          </Button>\n          <Button asChild variant=\"outline\" className=\"w-full sm:w-auto\">\n            <Link href=\"https://app.yoursaas.com/demo\">Request a Demo</Link>\n          </Button>\n        </div>\n\n        <div className=\"mx-auto mt-10 flex w-fit flex-col items-center gap-4 sm:flex-row\">\n          <div className=\"inline-flex items-center -space-x-4\">\n            <Avatar className=\"size-10\">\n              <AvatarImage\n                src=\"https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8YXZhdGFyfGVufDB8fDB8fHwy\"\n                alt=\"User 1\"\n              />\n            </Avatar>\n            <Avatar className=\"size-10\">\n              <AvatarImage\n                src=\"https://images.unsplash.com/photo-1728577740843-5f29c7586afe?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8YXZhdGFyfGVufDB8fDB8fHwy\"\n                alt=\"User 2\"\n              />\n            </Avatar>\n            <Avatar className=\"size-10\">\n              <AvatarImage\n                src=\"https://images.unsplash.com/photo-1654110455429-cf322b40a906?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8YXZhdGFyfGVufDB8fDB8fHwy\"\n                alt=\"User 3\"\n              />\n            </Avatar>\n            <Avatar className=\"size-10\">\n              <AvatarImage\n                src=\"https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8YXZhdGFyfGVufDB8fDB8fHwy\"\n                alt=\"User 4\"\n              />\n            </Avatar>\n            <Avatar className=\"size-10\">\n              <AvatarImage\n                src=\"https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTh8fGF2YXRhcnxlbnwwfHwwfHx8Mg%3D%3D\"\n                alt=\"User 5\"\n              />\n            </Avatar>\n          </div>\n          <div>\n            <div className=\"flex items-center gap-1.5\">\n              {[...Array(5)].map((_, index) => (\n                <Star key={index} className=\"size-4 fill-yellow-400 text-yellow-400\" />\n              ))}\n              <span className=\"text-sm font-semibold\">4.9</span>\n            </div>\n            <p className=\"text-muted-foreground text-start text-xs font-medium\">\n              from 500+ reviews\n            </p>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/hero-sections-04.tsx"
    }
  ],
  "meta": {
    "isPro": true
  }
}