<template>
  <!-- Hero card -->
  <div class="relative">
    <div class="absolute inset-x-0 bottom-0 h-1/2 bg-gray-100" />
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
      <div class="relative shadow-xl sm:rounded-2xl sm:overflow-hidden">
        <div class="absolute inset-0">
          <img class="h-full w-full object-cover" src="/hero.jpg" alt="" />
        </div>
        <div class="relative p-8">
          <h1>
            <img
              class="w-full max-w-xs m-auto"
              src="/logo-square.webp"
              alt="Faetale: Once Upon a Time"
            />
          </h1>
          <p
            class="mt-6 max-w-lg mx-auto text-center text-xl text-indigo-500 sm:max-w-3xl"
          >
            ...there was a queer tale of fantasy tabletop roleplaying games.
            Join Gaiety on a journey through her favorite game systems,
            adventures and who knows what else!
          </p>
          <div
            class="mt-10 max-w-sm mx-auto sm:max-w-none sm:flex sm:justify-center"
          >
            <div
              class="space-y-4 sm:space-y-0 sm:mx-auto sm:inline-grid sm:grid-cols-2 sm:gap-5"
            >
              <a
                href="#videolist"
                class="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-indigo-700 bg-white hover:bg-indigo-50 sm:px-8"
              >
                Watch
              </a>
              <a
                href="https://ko-fi.com/gaiety"
                class="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-500 bg-opacity-60 hover:bg-opacity-70 sm:px-8"
              >
                Support
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
