---
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, highlights, 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="/docs/installation"
               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] border-b-2 border-b-black">
    <FeatureMarquee client:only />
  </div>

  <div class="py-32 bg-white text-black">
    <Container>
      <h2 class="text-6xl font-bold mb-6">Examples</h2>
      <p class="text-2xl text-black mb-12">Here are just a few examples; find more <a
        class="text-black underline underline-offset-4" href="/docs/installation">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-black">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>

  <div class="py-32 bg-white text-black border-t-2 border-t-black">
    <Container>
      <div class="flex items-center">
        <div>
          <h2 class="text-6xl font-bold mb-4">Loved by Many</h2>
          <p class="text-2xl text-black mb-8">With millions of downloads, Driver.js is an <span class="font-bold">MIT licensed</span>
            opensource
            project and is used by
            thousands of companies around the world.</p>

          <div class="flex gap-3">
            <a href="https://github.com/kamranahmedse/driver.js"
               target="_blank"
               class="flex items-center font-bold text-2xl rounded-xl py-3 px-5 bg-yellow-300 border-black hover:bg-yellow-400">
              <span class="mr-3 inline-flex items-center"><img src="/star.svg" alt="Hero Image" class="h-7 mr-2" /> 14.7k</span>
              GitHub Stars
            </a>
            <a href="/docs/installation"
               class="bg-black text-white flex items-center font-bold text-2xl border-4 border-black rounded-xl py-3 px-5 hover:bg-gray-800">
              Start Using Driver.js
            </a>
          </div>
        </div>
        <img src="/thumbs.svg" alt="Hero Image" class="h-36 ml-16" />
      </div>
    </Container>
  </div>

  <div class="py-8 bg-black text-white">
    <Container>
      <p class="text-lg text-white text-center">
        MIT Licensed &copy; 2023 <span class="mx-3">&middot;</span>
        <a href="/docs/installation" class="">
          Docs
        </a>
        <a href="https://github.com/kamranahmedse/driver.js" target="_blank" class="ml-5">
          GitHub
          <img src="/arrow.svg" class="h-3 inline-block ml-2" alt="GitHub" />
        </a>
        <a href="https://twitter.com/kamranahmedse" target="_blank" class=" ml-5">
          Twitter
          <img src="/arrow.svg" class="h-3 inline-block ml-2" alt="GitHub" />
        </a>
      </p>
    </Container>
  </div>
</BaseLayout>