{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-sections-01",
  "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": [
    "badge",
    "button"
  ],
  "files": [
    {
      "path": "examples/blocks/marketing/hero-sections/01/page.tsx",
      "content": "import Link from \"next/link\";\nimport { ArrowUpRight } from \"lucide-react\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\n\nexport default function HeroSection() {\n  return (\n    <section className=\"py-10 lg:py-16\">\n      <div className=\"mx-auto max-w-7xl px-4\">\n        <div className=\"grid items-center gap-8 lg:grid-cols-2\">\n          <header className=\"flex flex-col items-center text-center lg:items-start lg:text-left\">\n            <Badge variant=\"outline\">\n              🚀 Launch Faster\n              <ArrowUpRight />\n            </Badge>\n            <h1 className=\"font-heading my-4 text-4xl text-balance md:text-5xl lg:leading-14\">\n              All-in-One Platform for Managing Your SaaS\n            </h1>\n            <p className=\"text-muted-foreground mb-8 text-balance lg:text-lg\">\n              Streamline operations, track metrics, and scale your SaaS business with ease.\n              Everything you need, in one powerful dashboard.\n            </p>\n            <div className=\"flex justify-center gap-2\">\n              <Button asChild>\n                <Link href=\"https://app.yoursaas.com/signup\">Start Free Trial</Link>\n              </Button>\n              <Button asChild variant=\"outline\">\n                <Link href=\"https://app.yoursaas.com/demo\">Request a Demo</Link>\n              </Button>\n            </div>\n          </header>\n          <img\n            src=\"https://images.unsplash.com/photo-1748723594319-142e211b46a9?q=80&w=700&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n            alt=\"Dashboard interface of the SaaS platform\"\n            className=\"aspect-square w-full rounded-md object-cover\"\n          />\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/hero-sections-01.tsx"
    }
  ],
  "meta": {
    "isPro": false
  }
}