---
import BaseLayout from "../layouts/BaseLayout.astro";
import { FeatureMarquee } from "../components/FeatureMarquee";
import Container from "../components/Container.astro";
import UsecaseItem from "../components/UsecaseItem.astro";
import { ExampleButton } from "../components/examples/ExampleButton";
---
<BaseLayout>
  <div class="bg-yellow-300">
    <Container>
      <div class="py-24 flex justify-start items-center gap-4">
        <div class="flex-grow">
          <h1 class="text-9xl mb-4 font-bold">driver.js</h1>
          <p class="text-3xl">Product tours, highlight features, contextual help and more.</p>
          <div class="mt-12 mb-2 flex gap-2 items-stretch">
            <button class="bg-black rounded-xl py-4 px-5 font-medium text-white text-xl">Show Demo Tour</button>
            <a href="#" class="flex items-center font-bold text-xl border-4 border-black rounded-xl px-5 bg-white">
              Get Started
            </a>
          </div>
        </div>
        <div class="flex-shrink-0">
          <img src="/driver.svg" alt="Hero Image" class="h-72" />
        </div>
      </div>
    </Container>
  </div>
  <div class="bg-white overflow-x-hidden relative h-[64px]">
    <FeatureMarquee client:load />
  </div>

  <div class="py-32 bg-black text-white">
    <Container>
      <h2 class="text-6xl font-bold mb-6">Examples</h2>
      <p class="text-2xl text-gray-300 mb-12">Here are just a few examples; find more <a
        class="text-yellow-300 underline underline-offset-4" href="#">in the documentation</a>.</p>

      <div class="flex flex-wrap gap-3">
        <ExampleButton text="Animated Tour" />
        <ExampleButton text="Non-Animated Tour" />
        <ExampleButton text="Asynchronous Tour" />
        <ExampleButton text="Confirm on Exit" />
        <ExampleButton text="Show Progress" />
        <ExampleButton text="Simple Element Highlight" />
        <ExampleButton text="Prevent Tour from Closing" />
        <ExampleButton text="Selective Popover Buttons" />
        <ExampleButton text="Overlay Color" />
        <ExampleButton text="Popover Positioning" />
        <ExampleButton text="Customizing Popover" />
        <ExampleButton text="Hooks for Everything" />
        <a href="/"
           class="items-center flex text-lg text-gray-900 bg-yellow-300 rounded-xl px-5 hover:bg-yellow-500 hover:text-black">
          and much more ...
        </a>
      </div>

      <p class="text-2xl my-14 text-gray-300">Due to it's extensive API, driver.js can be used for a wide range of use
        cases.</p>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
        <UsecaseItem
          title="Onboard Users"
          description="Onboard your users by explaining how to use your product and answer common questions."
        />
        <UsecaseItem
          title="Remove Distractions"
          description="With highlight feature, you can remove distractions and focus your users attention on what matters."
        />
        <UsecaseItem
          title="Contextual Help"
          description="Provide contextual help for your users, explain how to use your product and answer common questions."
        />
        <UsecaseItem
          title="Feature Adoption"
          description="Highlight new features, explain how to use them and make sure your users don't miss them."
        />
      </div>
    </Container>
  </div>

</BaseLayout>