footers

<section>
  <div class="px-8 py-12 mx-auto md:px-12 lg:px-24 max-w-7xl relative">
    <div class="grid items-end grid-cols-1 sm:grid-cols-2 gap-4">
      <div>
        <p class="text-xl font-semibold tracking-tight text-gray-900">
          Get started with our app today
        </p>
        <p class="mt-4 text-sm text-gray-500 lg:text-base">
          Streamline your workflow and collaborate seamlessly on staging and
          temporary environments
        </p>
      </div>
      <div class="flex flex-col lg:flex-row items-center gap-2 sm:ml-auto">
        <button
          class="flex items-center w-full lg:w-auto justify-between sm:justify-center gap-2 h-10 px-4 py-2 text-sm font-medium text-gray-500 transition-all bg-gray-50 border border-gray-300 rounded-lg hover:text-gray-700 focus:ring-2 md:justify-center shadow shadow-gray-500/5 focus:ring-gray-900 focus:ring-offset-2 ring-offset-gray-200 duration-300 hover:border-gray-200 hover:shadow-none"
        >
          <svg
            class="size-5"
            viewBox="0 0 32 32"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M16.9998 14.5L21.1998 10L4.8998 1.2C4.7998 1.1 4.5998 1.1 4.2998 1L16.9998 14.5Z"
              fill="#00F076"
            ></path>
            <path
              d="M22.9998 21L28.8998 17.8C29.5998 17.4 29.9998 16.8 29.9998 16C29.9998 15.2 29.5998 14.5 28.8998 14.2L22.9998 11L18.2998 16L22.9998 21Z"
              fill="#FFC900"
            ></path>
            <path
              d="M2.4 1.8999C2.1 2.1999 2 2.5999 2 2.9999V28.9999C2 29.3999 2.1 29.7999 2.4 30.1999L15.6 15.9999L2.4 1.8999Z"
              fill="#00D6FF"
            ></path>
            <path
              d="M16.9998 17.5L4.2998 31C4.4998 31 4.6998 30.9 4.8998 30.8L21.1998 22L16.9998 17.5Z"
              fill="#FF3A44"
            ></path>
          </svg>
          <span class="text-xs text-gray-600"
            >Download on Google Play</span
          ></button
        ><button
          class="flex items-center w-full lg:w-auto justify-between sm:justify-center gap-2 h-10 px-4 py-2 text-sm font-medium text-gray-500 transition-all bg-gray-50 border border-gray-300 rounded-lg hover:text-gray-700 focus:ring-2 shadow shadow-gray-500/5 focus:ring-gray-900 focus:ring-offset-2 ring-offset-gray-200 duration-300 hover:border-gray-200 hover:shadow-none"
        >
          <svg
            class="size-5"
            viewBox="0 0 61 74"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M51.0332 39.3793C51.0696 36.549 51.8214 33.7739 53.2186 31.3122C54.6157 28.8506 56.6129 26.7823 59.0241 25.2999C57.4923 23.1122 55.4715 21.3118 53.1222 20.0417C50.7728 18.7716 48.1597 18.0668 45.4904 17.9833C39.7961 17.3856 34.2759 21.3906 31.3741 21.3906C28.4163 21.3906 23.9488 18.0427 19.1379 18.1416C16.0261 18.2422 12.9935 19.147 10.3354 20.7681C7.6773 22.3892 5.48446 24.6711 3.97052 27.3917C-2.5874 38.7459 2.30423 55.433 8.58628 64.611C11.7293 69.1052 15.4027 74.1253 20.2092 73.9473C24.9126 73.7522 26.6693 70.948 32.3467 70.948C37.9715 70.948 39.6195 73.9473 44.5236 73.8341C49.5706 73.7522 52.7504 69.3199 55.7833 64.7832C58.0416 61.5809 59.7793 58.0417 60.9322 54.2966C58 53.0565 55.4977 50.9806 53.7374 48.3279C51.9771 45.6751 51.0366 42.5629 51.0332 39.3793Z"
              fill="black"
            ></path>
            <path
              d="M41.7704 11.9472C44.5223 8.64377 45.878 4.39769 45.5498 0.110733C41.3456 0.5523 37.4621 2.56163 34.673 5.73837C33.3094 7.29028 32.265 9.09575 31.5995 11.0515C30.9341 13.0073 30.6606 15.0751 30.7948 17.1367C32.8976 17.1583 34.978 16.7025 36.8791 15.8036C38.7803 14.9047 40.4527 13.5862 41.7704 11.9472V11.9472Z"
              fill="currentColor"
            ></path>
          </svg>
          <span class="text-xs text-gray-600">Download on App Store</span>
        </button>
      </div>
    </div>
    <div
      class="grid pt-6 mt-6 border-t grid-cols-2 md:grid-cols-4 gap-x-8 gap-y-24"
    >
      <div class="space-y-4">
        <nav aria-labelledby="footer-heading-0">
          <h3 id="footer-heading-0" class="text-sm font-medium text-gray-900">
            Company
          </h3>
          <ul class="mt-4 space-y-4">
            <li>
              <a
                href="#"
                class="text-gray-600 text-sm md:text-base hover:text-blue-500 duration-300"
              >
                About
              </a>
            </li>
            <li>
              <a
                href="#"
                class="text-gray-600 text-sm md:text-base hover:text-blue-500 duration-300"
              >
                Mission
              </a>
            </li>
            <li>
              <a
                href="#"
                class="text-gray-600 text-sm md:text-base hover:text-blue-500 duration-300"
              >
                Leadership Team
              </a>
            </li>
            <li>
              <a
                href="#"
                class="text-gray-600 text-sm md:text-base hover:text-blue-500 duration-300"
              >
                History
              </a>
            </li>
          </ul>
        </nav>
      </div>
      <div class="space-y-4">
        <nav aria-labelledby="footer-heading-1">
          <h3 id="footer-heading-1" class="text-sm font-medium text-gray-900">
            Services
          </h3>
          <ul class="mt-4 space-y-4">
            <li>
              <a
                href="#"
                class="text-gray-600 text-sm md:text-base hover:text-blue-500 duration-300"
              >
                Marketing
              </a>
            </li>
            <li>
              <a
                href="#"
                class="text-gray-600 text-sm md:text-base hover:text-blue-500 duration-300"
              >
                Analytics
              </a>
            </li>
            <li>
              <a
                href="#"
                class="text-gray-600 text-sm md:text-base hover:text-blue-500 duration-300"
              >
                Commerce
              </a>
            </li>
            <li>
              <a
                href="#"
                class="text-gray-600 text-sm md:text-base hover:text-blue-500 duration-300"
              >
                Insights
              </a>
            </li>
          </ul>
        </nav>
      </div>
      <div class="space-y-4">
        <nav aria-labelledby="footer-heading-2">
          <h3 id="footer-heading-2" class="text-sm font-medium text-gray-900">
            Resources
          </h3>
          <ul class="mt-4 space-y-4">
            <li>
              <a
                href="#"
                class="text-gray-600 text-sm md:text-base hover:text-blue-500 duration-300"
              >
                Documentation
              </a>
            </li>
            <li>
              <a
                href="#"
                class="text-gray-600 text-sm md:text-base hover:text-blue-500 duration-300"
              >
                Guides
              </a>
            </li>
            <li>
              <a
                href="#"
                class="text-gray-600 text-sm md:text-base hover:text-blue-500 duration-300"
              >
                Webinars
              </a>
            </li>
            <li>
              <a
                href="#"
                class="text-gray-600 text-sm md:text-base hover:text-blue-500 duration-300"
              >
                White Papers
              </a>
            </li>
          </ul>
        </nav>
      </div>
      <div class="space-y-4">
        <nav aria-labelledby="footer-heading-3">
          <h3 id="footer-heading-3" class="text-sm font-medium text-gray-900">
            Support &amp; Legal
          </h3>
          <ul class="mt-4 space-y-4">
            <li>
              <a
                href="#"
                class="text-gray-600 text-sm md:text-base hover:text-blue-500 duration-300"
              >
                Pricing
              </a>
            </li>
            <li>
              <a
                href="#"
                class="text-gray-600 text-sm md:text-base hover:text-blue-500 duration-300"
              >
                API Status
              </a>
            </li>
            <li>
              <a
                href="#"
                class="text-gray-600 text-sm md:text-base hover:text-blue-500 duration-300"
              >
                Live Chat
              </a>
            </li>
            <li>
              <a
                href="#"
                class="text-gray-600 text-sm md:text-base hover:text-blue-500 duration-300"
              >
                Email Support
              </a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
    <div
      class="pt-6 mt-12 border-t flex flex-col md:flex-row items-center justify-between"
    >
      <a
        href="#_"
        class="font-medium w-full sm:w-auto group flex gap-3 items-center group-hover:text-blue-600 duration-300 group-hover:animate-pulse"
        ><img
          class="h-7 2xl:h-12"
          src="/images/oxbow/blueLineLogo.png"
          alt="#_"
        />
        Oxbow UI</a
      >
      <p class="border-gray-700 text-gray-400 text-sm">
        Copyright © 2024 Oxbow UI. All rights reserved.
      </p>
    </div>
  </div>
</section>