<section class="hero-1 relative isolate overflow-hidden bg-white px-6 py-24 dark:bg-gray-950 sm:py-32 lg:px-8">
  <div class="hero-1-content mx-auto max-w-2xl text-center">
    <span class="inline-flex items-center rounded-full bg-indigo-500/10 px-4 py-1.5 text-sm font-medium text-indigo-600 ring-1 ring-inset ring-indigo-500/20 dark:text-indigo-400 dark:ring-indigo-400/30">Open source</span>
    <h1 class="mt-4 text-4xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-6xl">Build something great together</h1>
    <p class="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-300">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.</p>
    <div class="mt-10 flex items-center justify-center gap-x-6">
      <a href="#" class="rounded-full bg-gray-900 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100 transition-colors duration-200">Get started</a>
      <a href="#" class="text-sm font-semibold leading-6 text-gray-900 dark:text-white transition-colors duration-200 hover:opacity-80">Learn more <span aria-hidden="true">→</span></a>
    </div>
  </div>
</section>
<style>
  .hero-1-content {
    animation: hero-1-fade-in 0.6s ease-out forwards;
  }
  @keyframes hero-1-fade-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }
</style>

<section class="bg-white dark:bg-gray-950">
  <div class="relative isolate overflow-hidden px-6 py-24 lg:overflow-visible lg:px-0">
    <div class="mx-auto grid max-w-2xl grid-cols-1 gap-16 px-8 lg:mx-0 lg:max-w-none lg:grid-cols-2 lg:gap-y-16 lg:px-8">
      <div class="lg:col-span-2 lg:col-start-1 lg:row-start-1 lg:px-8 lg:pt-8">
        <h1 class="text-4xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-5xl">Ship faster with our platform</h1>
        <p class="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-300">Build and ship in days, not months. Everything you need to launch and scale — no lock-in.</p>
        <div class="mt-10 flex gap-x-6">
          <a href="#" class="rounded-full bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400">Start free trial</a>
          <a href="#" class="text-sm font-semibold leading-6 text-gray-900 dark:text-white">Watch demo <span aria-hidden="true">→</span></a>
        </div>
      </div>
      <div class="flex items-center justify-end lg:col-span-2 lg:col-start-2 lg:row-start-1 lg:px-8">
        <div class="w-full max-w-lg rounded-xl bg-gray-100 dark:bg-gray-800 aspect-video flex items-center justify-center text-gray-400 dark:text-gray-500 text-sm">Preview</div>
      </div>
    </div>
  </div>
</section>

<section class="py-24 sm:py-32">
  <div class="mx-auto max-w-3xl px-6 text-center lg:px-8">
    <h1 class="text-5xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-6xl">One line that says it all</h1>
    <p class="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-300">Supporting line that adds clarity or context.</p>
    <a href="#" class="mt-10 inline-block rounded-full bg-gray-900 px-5 py-2.5 text-sm font-semibold text-white hover:bg-gray-800 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100">Get started</a>
  </div>
</section>

<section class="hero-4 relative overflow-hidden bg-gradient-to-br from-indigo-600 to-purple-800 px-6 py-24 dark:from-indigo-800 dark:to-purple-900 sm:py-32">
  <div class="hero-4-content relative mx-auto max-w-2xl text-center">
    <h1 class="text-4xl font-bold tracking-tight text-white sm:text-5xl">Beautiful gradient hero</h1>
    <p class="mt-6 text-lg leading-8 text-indigo-100">Stand out with a bold gradient. Fully responsive and accessible.</p>
    <div class="mt-10 flex justify-center gap-x-4">
      <a href="#" class="rounded-full bg-white px-4 py-2.5 text-sm font-semibold text-indigo-600 shadow-sm hover:bg-indigo-50 transition-colors duration-200">Get started</a>
      <a href="#" class="rounded-full bg-white/10 px-4 py-2.5 text-sm font-semibold text-white ring-1 ring-inset ring-white/20 hover:bg-white/20 transition-colors duration-200">Learn more</a>
    </div>
  </div>
</section>
<style>
  .hero-4-content {
    animation: hero-4-fade-in 0.6s ease-out forwards;
  }
  @keyframes hero-4-fade-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }
</style>

<section class="bg-white dark:bg-gray-950 py-24 sm:py-32">
  <div class="mx-auto max-w-7xl px-6 lg:px-8">
    <div class="mx-auto max-w-2xl text-center">
      <h1 class="text-4xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-5xl">Trusted by teams everywhere</h1>
      <p class="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-300">Join thousands of teams who ship faster with our tools.</p>
    </div>
    <div class="mx-auto mt-16 grid max-w-3xl grid-cols-3 gap-8 text-center">
      <div>
        <p class="text-3xl font-bold text-indigo-600 dark:text-indigo-400">10k+</p>
        <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Active users</p>
      </div>
      <div>
        <p class="text-3xl font-bold text-indigo-600 dark:text-indigo-400">99.9%</p>
        <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Uptime</p>
      </div>
      <div>
        <p class="text-3xl font-bold text-indigo-600 dark:text-indigo-400">24/7</p>
        <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Support</p>
      </div>
    </div>
    <div class="mt-12 flex justify-center">
      <a href="#" class="rounded-full bg-gray-900 px-4 py-2.5 text-sm font-semibold text-white hover:bg-gray-800 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100">Get started</a>
    </div>
  </div>
</section>

<section class="hero-6 bg-white dark:bg-gray-950">
  <div class="mx-auto max-w-7xl px-6 py-24 lg:flex lg:items-center lg:gap-x-10 lg:px-8 lg:py-32">
    <div class="hero-6-text lg:w-1/2">
      <h1 class="text-4xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-5xl">Everything you need to launch</h1>
      <p class="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-300">From idea to production in one place. No context switching.</p>
      <a href="#" class="mt-8 inline-block rounded-full bg-gray-900 px-4 py-2.5 text-sm font-semibold text-white hover:bg-gray-800 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100 transition-colors duration-200">Start building</a>
    </div>
    <div class="hero-6-image mt-16 lg:mt-0 lg:w-1/2">
      <div class="aspect-square rounded-2xl bg-gray-100 dark:bg-gray-800 flex items-center justify-center text-gray-400 dark:text-gray-500">Image</div>
    </div>
  </div>
</section>
<style>
  .hero-6-text {
    animation: hero-6-fade-in 0.6s ease-out forwards;
  }
  .hero-6-image {
    animation: hero-6-fade-in 0.6s ease-out 0.15s both;
  }
  @keyframes hero-6-fade-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }
</style>

<section class="relative isolate px-6 py-24 dark:bg-gray-950 sm:py-32 lg:px-8">
  <span class="inline-block rounded-full bg-gray-900 px-4 py-1.5 text-sm font-medium text-white dark:bg-white dark:text-gray-900">New release</span>
  <h1 class="mt-4 text-5xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-6xl lg:text-7xl">The future of work is here</h1>
  <p class="mt-6 max-w-2xl text-lg leading-8 text-gray-600 dark:text-gray-300">One platform for your entire team. Collaborate, ship, and iterate faster.</p>
  <div class="mt-10 flex flex-wrap gap-4">
    <a href="#" class="rounded-full bg-gray-900 px-5 py-2.5 text-sm font-semibold text-white hover:bg-gray-800 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100">Try free</a>
    <a href="#" class="rounded-full border border-gray-300 px-5 py-2.5 text-sm font-semibold text-gray-900 hover:bg-gray-50 dark:border-gray-600 dark:text-white dark:hover:bg-gray-800">View docs</a>
  </div>
</section>

<section class="px-6 py-24 sm:py-32">
  <div class="mx-auto max-w-3xl">
    <div class="rounded-2xl border border-gray-200 bg-white p-12 shadow-sm dark:border-gray-700 dark:bg-gray-900 sm:p-16">
      <h1 class="text-4xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-5xl">Card-style hero</h1>
      <p class="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-300">Contained in a card for a clean, focused look. Works in light and dark.</p>
      <a href="#" class="mt-8 inline-block rounded-full bg-gray-900 px-4 py-2.5 text-sm font-semibold text-white hover:bg-gray-800 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100">Get started</a>
    </div>
  </div>
</section>

<section class="bg-gray-900 dark:bg-gray-950 px-6 py-24 sm:py-32">
  <div class="mx-auto max-w-2xl text-center">
    <h1 class="text-4xl font-bold tracking-tight text-white sm:text-5xl">Built for dark mode</h1>
    <p class="mt-6 text-lg leading-8 text-gray-300">This block is always dark. Use it for impact or as a section divider.</p>
    <a href="#" class="mt-10 inline-block rounded-full bg-white px-4 py-2.5 text-sm font-semibold text-gray-900 hover:bg-gray-100">Get started</a>
  </div>
</section>

<section class="bg-white dark:bg-gray-950 py-24 sm:py-32">
  <div class="mx-auto max-w-xl px-6 text-center lg:px-8">
    <h1 class="text-4xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-5xl">Get early access</h1>
    <p class="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-300">Join the waitlist. No spam, unsubscribe anytime.</p>
    <form class="mt-10 flex flex-col gap-3 sm:flex-row sm:justify-center">
      <input type="email" placeholder="you@example.com" class="min-w-0 flex-auto rounded-full border border-gray-300 bg-white px-4 py-2.5 text-gray-900 placeholder:text-gray-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 dark:border-gray-600 dark:bg-gray-900 dark:text-white dark:placeholder:text-gray-500" />
      <button type="submit" class="rounded-full bg-gray-900 px-4 py-2.5 text-sm font-semibold text-white hover:bg-gray-800 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100">Notify me</button>
    </form>
  </div>
</section>

<section class="bg-white dark:bg-gray-950">
  <div class="mx-auto max-w-7xl px-6 py-24 lg:grid lg:grid-cols-12 lg:gap-x-8 lg:px-8 lg:py-32">
    <div class="lg:col-span-7">
      <h1 class="text-4xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-5xl">Asymmetric layout</h1>
      <p class="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-300">Two columns with different weights. Left takes more space for copy.</p>
      <a href="#" class="mt-8 inline-block rounded-full bg-gray-900 px-4 py-2.5 text-sm font-semibold text-white hover:bg-gray-800 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100">Get started</a>
    </div>
    <div class="mt-16 lg:col-span-5 lg:mt-0">
      <div class="rounded-2xl bg-gray-100 dark:bg-gray-800 aspect-[4/3] flex items-center justify-center text-gray-400 dark:text-gray-500">Visual</div>
    </div>
  </div>
</section>

<section class="hero-12 relative overflow-hidden bg-white px-6 py-24 dark:bg-gray-950 sm:py-32">
  <div class="absolute inset-0 -z-10">
    <div class="absolute left-1/2 top-0 -translate-x-1/2 rounded-full bg-indigo-500/10 blur-3xl w-[600px] h-[600px]"></div>
  </div>
  <div class="hero-12-content relative mx-auto max-w-2xl text-center">
    <h1 class="text-4xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-5xl">Floating gradient accent</h1>
    <p class="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-300">Soft blur in the background adds depth without distraction.</p>
    <a href="#" class="mt-10 inline-block rounded-full bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white hover:bg-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400 transition-colors duration-200">Get started</a>
  </div>
</section>
<style>
  .hero-12-content {
    animation: hero-12-fade-in 0.6s ease-out forwards;
  }
  @keyframes hero-12-fade-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }
</style>

<section class="hero-13 bg-white dark:bg-gray-950 px-6 py-20 sm:py-28">
  <div class="mx-auto max-w-3xl">
    <div class="hero-13-content">
      <h1 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">Ship your best work</h1>
      <p class="mt-4 text-lg text-gray-600 dark:text-gray-300">A compact, left-aligned hero. Perfect for product or docs.</p>
      <div class="mt-8 flex flex-wrap gap-4">
        <a href="#" class="rounded-full bg-gray-900 px-4 py-2.5 text-sm font-semibold text-white hover:bg-gray-800 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100 transition-colors duration-200">Get started</a>
        <a href="#" class="rounded-full border border-gray-300 px-4 py-2.5 text-sm font-semibold text-gray-900 hover:bg-gray-50 dark:border-gray-600 dark:text-white dark:hover:bg-gray-800 transition-colors duration-200">Documentation</a>
      </div>
    </div>
  </div>
</section>
<style>
  .hero-13-content {
    animation: hero-13-fade-in 0.5s ease-out forwards;
  }
  @keyframes hero-13-fade-in {
    from { opacity: 0; transform: translateX(-12px); }
    to { opacity: 1; transform: translateX(0); }
  }
</style>

<section class="hero-14 bg-gray-50 dark:bg-gray-900/50 py-24 sm:py-32">
  <div class="mx-auto max-w-2xl px-6 text-center">
    <div class="hero-14-content">
      <h1 class="text-4xl font-bold text-gray-900 dark:text-white sm:text-5xl">Simple by design</h1>
      <p class="mt-4 text-gray-600 dark:text-gray-300">A minimal hero with soft background. Copy-paste and customize.</p>
      <a href="#" class="mt-8 inline-block border-b-2 border-gray-900 pb-1 text-sm font-semibold text-gray-900 hover:border-gray-600 dark:border-white dark:text-white dark:hover:border-gray-300 transition-colors duration-200">Learn more</a>
    </div>
  </div>
</section>
<style>
  .hero-14-content {
    animation: hero-14-fade-in 0.5s ease-out forwards;
  }
  @keyframes hero-14-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
</style>