<script>
  export default {};
</script>
<template>
  <section class="bg-gray-divriots flex justify-center">
    <div
      class="text-center grid gap-8 my-16 text-4xl sm:text-5xl lg:text-6xl p-16 md:rounded-lg max-w-4xl bg-black-divriots text-white">
      <div>The landing in front of you is made with <span class="text-primary">Backlight</span></div>
      <span class="mx-auto text-gray-light text-lg max-w-2xl"
        >Using TailwindCSS with Vue, React and Svelte components!</span>
      <a class="btn-primary mx-auto text-lg flex" href="/edit/1SuMaEt5uxgp62VC8WVP/hero">Explore</a>
    </div>
  </section>
</template>