---
import Layout from '/src/layouts/Layout.astro'
---
 <Layout>
  <section class="flex flex-col min-h-screen">
    <main class="max-w-7xl grow px-8 pt-24 mx-auto">
      <div>
        <div class="max-w-xl mx-auto text-center">
          <div
            class="prose text-gray-500 prose-sm prose-headings:font-normal prose-headings:text-xl mx-auto max-w-sm w-full">
            <h1>Sticky footer</h1>
          </div>
        </div>
        <div class="mt-6 border-t pt-12 max-w-xl mx-auto w-full">
          <div class="prose prose-sm 2xl:text-lg text-gray-500">
            <!-- Your content goes here -->
            <p>
              In the throbbing heart of London's vibrant streets, amidst the
              colorful tapestry of the 1980s, I drew my first breaths at St
              Thomas’ Hospital Medical School. An intricate blend of European
              heritage defines my roots - my father's lineage tracing back to
              the rolling hills of Italy, while my mother embodies the fiery
              spirit of Spain.
            </p>
            <!-- More content... -->
            <p>
              Thank you for taking the time to acquaint yourself with my story.
              I am filled with anticipation for the adventures that lie ahead,
              eagerly anticipating the ongoing evolution of my projects and
              personal endeavors. May your day be filled with beauty and
              inspiration.
            </p>
            <p>Michael Andreuzza</p>
          </div>
        </div>
      </div>
    </main>
    <!-- Footer starts here -->
    <footer
      class="border-t py-6 px-8 w-full mx-auto max-w-xl text-center space-y-4">
      <span class="mx-auto text-2xl">✺</span>
      <p class="text-gray-500">I am your Footer....</p>

    </footer>
    <!-- Footer ends here -->
  </section>
</Layout>
<!-- Starts links to tutorial -->
<div
  class="pointer-events-none fixed inset-x-0 bottom-0 sm:flex sm:justify-center p-2 ">
  <div
    class="pointer-events-auto flex w-full max-w-md divide-x divide-neutral-200 rounded-lg bg-white shadow-xl border">
    <div class="flex w-0 flex-1 items-center p-4">
      <div class="w-full">
        <p class="text-sm font-medium text-neutral-900">Tutorial</p>
        <p class="mt-1 text-sm text-neutral-500">
          How to create a sticky footer with Tailwind CSS
        </p>
        <p class="mt-2 text-xs text-orange-500 underline">
          <a href="https://lexingtonthemes.com"> by © Lexington Themes</a>
        </p>
      </div>
    </div>
    <div class="flex">
      <div class="flex flex-col divide-y divide-neutral-200">
        <div class="flex h-0 flex-1">
          <a
            href="https://lexingtonthemes.com/tutorials/how-to-create-a-sticky-footer-with-tailwind-css/"
            type="button"
            class="flex w-full items-center justify-center rounded-none rounded-tr-lg border border-transparent px-4 py-3 text-sm font-medium text-orange-600 hover:text-blue-600 focus:z-10 focus:outline-none focus:ring-2 focus:ring-orange-500"
            >Tutorial</a
          >
        </div>
        <div class="flex h-0 flex-1">
          <a
            href="https://github.com/Lexington-Themes/lexington-tutorials/blob/main/src/pages/sticky-footer/index.astro"
            class="flex w-full items-center justify-center rounded-none rounded-br-lg border border-transparent px-4 py-3 text-sm font-medium text-neutral-700 hover:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-orange-500"
            >Get the code</a
          >
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Ends links to tutorial -->