<section className="w-full py-12 md:py-24 lg:py-32 xl:py-48">
  <div className="container px-4 md:px-6 mx-auto">
    <div className="flex flex-col items-center space-y-4 text-center">
      <div className="space-y-2">
        <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-6xl/none">
          Build faster with ToolMate UI
        </h1>
        <p className="mx-auto max-w-[700px] text-muted-foreground md:text-xl">
          Beautifully designed components built with Tailwind CSS. Copy and paste into your apps.
        </p>
      </div>
      <div className="space-x-4">
        <a href="#" className="inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90">Get Started</a>
        <a href="#" className="inline-flex h-9 items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground">Documentation</a>
      </div>
    </div>
  </div>
</section>