---
import Container from "./Container.astro";
---
<div class="bg-yellow-300">
  <Container>
    <div class="py-10 md:py-14 lg:py-20 flex justify-start items-center gap-4">
      <div class="flex-grow" data-hero-text>
        <h1 data-driver-name class="text-7xl md:text-8xl lg:text-9xl mb-2 md:mb-3 lg:mb-4 font-bold">driver.js</h1>
        <p data-driver-tagline class="text-md md:text-2xl lg:text-3xl">Product tours, highlights, contextual help and more.</p>
        <div class="mt-4 md:mt-8 lg:mt-10 flex flex-col sm:flex-row gap-2 items-stretch">
          <button data-demo-tour class="bg-black rounded-xl py-2 md:py-3 px-6 font-medium text-white text-lg md:text-xl focus:outline-0">
            Show Demo Tour
          </button>
          <a href="/docs/installation"
             data-docs-link
             class="bg-white rounded-xl py-2 md:py-3 px-6 font-medium text-black text-lg md:text-xl focus:outline-0 border-4 border-black text-center">
            Get Started
          </a>
        </div>
      </div>
      <div class="flex-shrink-0 hidden sm:flex">
        <img src="/driver.svg" alt="Hero Image" class="sm:h-48 md:h-60 lg:h-72" />
      </div>
    </div>
  </Container>
</div>