landing pages #01

<!-- Navigation bar section -->
<div class="justify-center w-full mx-auto bg-base-50">
  <div
    x-data="{ open: false }"
    class="relative flex flex-col w-full px-8 py-2 mx-auto md:px-12 md:items-center md:justify-between md:flex-row lg:px-24 max-w-screen-xl"
  >
    <div class="flex flex-row items-center justify-between text-black">
      <a
        class="text-base flex items-center font-medium hover:text-blue-500 gap-2 text-base-900"
        href="#_"
      >
        <img
          class="h-7 2xl:h-12"
          src="/images/oxbow/blueLineLogo.png"
          alt="#_"
        />
        Oxbow UI
      </a>
      <button
        class="flex items-center justify-center text-center shadow-subtle font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:outline-offset-2 text-black bg-white hover:bg-base-100 focus:outline-base-900 size-9 p-2 text-sm rounded-md md:hidden"
        @click="open = !open"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="icon icon-tabler-layout-grid size-3"
          x-data="{ open: false }"
        >
          <!-- Paths for burger icon -->
          <path
            x-show="!open"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M4 6h16M4 12h16M4 18h16"
          ></path>
          <!-- Paths for close icon (toggle icon) -->
          <path
            x-show="open"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M6 18L18 6M6 6l12 12"
          ></path>
        </svg>
      </button>
    </div>
    <nav
      :class="{'flex': open, 'hidden': !open}"
      class="flex-col items-center flex-grow hidden p-4 px-5 gap-3 md:px-0 md:pb-0 md:flex md:justify-center md:flex-row lg:p-0"
    >
      <a
        class="text-base font-medium hover:text-blue-500 text-base-500 md:ml-auto"
        href="#_"
      >
        Features
      </a>
      <a
        class="text-base font-medium hover:text-blue-500 text-base-500"
        href="#_"
      >
        About
      </a>
      <button
        class="flex items-center justify-center text-center font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:outline-offset-2 focus:z-10 select-none text-white bg-blue-500 outline outline-accent-500 hover:bg-blue-600 focus:outline-accent-600 shadow-sm h-9 px-4 py-2 text-sm rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md"
      >
        Button
      </button>
    </nav>
  </div>
</div>
<!-- Main hero section with headline and call to action -->
<section class="relative overflow-hidden">
  <div class="mx-auto px-8 md:px-12 lg:px-20 w-full max-w-7xl py-24">
    <div class="items-center grid grid-cols-1 lg:grid-cols-3 gap-12">
      <div>
        <p class="text-sm relative text-base-500 text-blue-500">OxbowUI</p>
        <h1
          class="text-3xl sm:text-3xl md:text-4xl lg:text-5xl mt-12 font-semibold tracking-tight text-base-900 lg:text-balance"
        >
          Banking, but not boring
        </h1>
        <p class="text-sm mt-4 lg:text-balance text-base-500">
          Ditch the clunky legacy systems — collaborate on staging like it’s
          2025, not 2005.
        </p>
        <div class="flex flex-wrap items-center mx-auto mt-8 gap-2">
          <button
            class="flex items-center justify-center text-center font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:outline-offset-2 focus:z-10 select-none text-white bg-blue-500 outline outline-accent-500 hover:bg-blue-600 focus:outline-accent-600 shadow-sm h-9 px-4 py-2 text-sm rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md"
          >
            Get started
          </button>
          <button
            class="flex items-center justify-center text-center font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:outline-offset-2 focus:z-10 select-none text-base-700 bg-white outline outline-base-200 hover:shadow-sm focus:outline-base-900 shadow-sm h-9 px-4 py-2 text-sm rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md"
          >
            Learn more
          </button>
        </div>
      </div>
      <div class="lg:col-span-2">
        <img
          src="/.netlify/images?url=_astro%2FdashboardLight.DuO0a6ir.svg&#38;w=1200&#38;h=1200"
          loading="eager"
          decoding="async"
          alt="dashboard"
          width="1200"
          height="1200"
          class="object-cover h-full rounded-lg shadow outline outline-base-200"
        />
      </div>
    </div>
  </div>
</section>
<!-- Feature section highlighting key benefits or services -->
<section>
  <div class="relative px-8 pt-24 mx-auto md:px-12 lg:px-24 max-w-7xl">
    <div class="max-w-3xl">
      <p class="text-sm font-bold uppercase text-blue-600">Tagline</p>
      <h2
        class="text-2xl md:text-3xl lg:text-4xl mt-4 font-semibold text-base-900 lg:text-balance"
      >
        Transforming the banking experience for a digital future
      </h2>
      <p class="text-base mt-4 font-medium text-base-500">
        The fastest method for working together on staging and temporary
        environments.
      </p>
    </div>
    <div
      class="mt-12 gap-x-2 gap-y-14 lg:gap-12 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"
    >
      <div>
        <div>
          <h3 class="text-lg md:text-xl font-medium text-base-900">
            Innovative Design
          </h3>
          <p class="text-base mt-4 font-medium text-base-500">
            Our cutting-edge design offers a fresh, modern look that transforms
            your project into a standout experience.
          </p>
        </div>
        <ul
          role="list"
          class="mt-6 text-base font-medium space-y-1 text-base-900"
        >
          <li>
            <div class="flex items-center gap-4">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="icon icon-tabler-circle-check size-5 text-blue-600"
                slot="icon"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path
                  d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"
                  stroke-width="0"
                  fill="currentColor"
                ></path>
              </svg>
              <span class="text-base"> Revolutionizing communication </span>
            </div>
          </li>
          <li>
            <div class="flex items-center gap-4">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="icon icon-tabler-circle-check size-5 text-blue-600"
                slot="icon"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path
                  d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"
                  stroke-width="0"
                  fill="currentColor"
                ></path>
              </svg>
              <span class="text-base"> Enhancing productivity </span>
            </div>
          </li>
        </ul>
      </div>
      <div>
        <div>
          <h3 class="text-lg md:text-xl font-medium text-base-900">
            Powerful Functionality
          </h3>
          <p class="text-base mt-4 font-medium text-base-500">
            Equipped with advanced features and tools, our solution effortlessly
            manages complex tasks and workflows.
          </p>
        </div>
        <ul
          role="list"
          class="mt-6 text-base font-medium space-y-1 text-base-900"
        >
          <li>
            <div class="flex items-center gap-4">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="icon icon-tabler-circle-check size-5 text-blue-600"
                slot="icon"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path
                  d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"
                  stroke-width="0"
                  fill="currentColor"
                ></path>
              </svg>
              <span class="text-base"> Unlocking innovative solutions </span>
            </div>
          </li>
          <li>
            <div class="flex items-center gap-4">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="icon icon-tabler-circle-check size-5 text-blue-600"
                slot="icon"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path
                  d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"
                  stroke-width="0"
                  fill="currentColor"
                ></path>
              </svg>
              <span class="text-base"> Enabling interoperability </span>
            </div>
          </li>
        </ul>
      </div>
      <div>
        <div>
          <h3 class="text-lg md:text-xl font-medium text-base-900">
            Easy Integration
          </h3>
          <p class="text-base mt-4 font-medium text-base-500">
            Integrating with existing systems is smooth and hassle-free, thanks
            to our incredible flexible approach.
          </p>
        </div>
        <ul
          role="list"
          class="mt-6 text-base font-medium space-y-1 text-base-900"
        >
          <li>
            <div class="flex items-center gap-4">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="icon icon-tabler-circle-check size-5 text-blue-600"
                slot="icon"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path
                  d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"
                  stroke-width="0"
                  fill="currentColor"
                ></path>
              </svg>
              <span class="text-base"> Streamlining operations </span>
            </div>
          </li>
          <li>
            <div class="flex items-center gap-4">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="icon icon-tabler-circle-check size-5 text-blue-600"
                slot="icon"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path
                  d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"
                  stroke-width="0"
                  fill="currentColor"
                ></path>
              </svg>
              <span class="text-base"> Simplifying implementation </span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="w-full mt-12 -mb-12">
      <img
        src="/images/dashboardLight.svg"
        alt="#_"
        class="w-full shadow rounded-t-2xl"
      />
    </div>
  </div>
</section>
<!-- Testimonials section displaying customer feedback -->
<section>
  <div class="relative px-8 py-24 mx-auto md:px-12 lg:px-24 max-w-7xl">
    <ul
      role="list"
      class="text-center grid sm:grid-cols-2 md:grid-cols-3 gap-12"
    >
      <li>
        <figure class="flex flex-col">
          <span
            class="flex items-center justify-center rounded-full gap-2 text-amber-500"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="icon icon-tabler-star size-4"
            >
              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
              <path
                d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z"
              ></path>
            </svg>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="icon icon-tabler-star size-4"
            >
              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
              <path
                d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z"
              ></path>
            </svg>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="icon icon-tabler-star size-4"
            >
              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
              <path
                d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z"
              ></path>
            </svg>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="icon icon-tabler-star size-4"
            >
              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
              <path
                d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z"
              ></path>
            </svg>
          </span>
          <blockquote
            class="text-xl sm:text-xl md:text-2xl italic font-medium text-base-500 mt-14"
          >
            Being in the financial industry, we were always looking for ways to
            enhance our transactions.
          </blockquote>
        </figure>
      </li>
      <li>
        <figure class="flex flex-col">
          <span
            class="flex items-center justify-center rounded-full gap-2 text-amber-500"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="icon icon-tabler-star size-4"
            >
              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
              <path
                d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z"
              ></path>
            </svg>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="icon icon-tabler-star size-4"
            >
              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
              <path
                d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z"
              ></path>
            </svg>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="icon icon-tabler-star size-4"
            >
              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
              <path
                d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z"
              ></path>
            </svg>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="icon icon-tabler-star size-4"
            >
              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
              <path
                d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z"
              ></path>
            </svg>
          </span>
          <blockquote
            class="text-xl sm:text-xl md:text-2xl italic font-medium text-base-500 mt-14"
          >
            Oxbow UI is a platform that allows you to create a customized
            landing page.
          </blockquote>
        </figure>
      </li>
      <li>
        <figure class="flex flex-col">
          <span
            class="flex items-center justify-center rounded-full gap-2 text-amber-500"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="icon icon-tabler-star size-4"
            >
              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
              <path
                d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z"
              ></path>
            </svg>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="icon icon-tabler-star size-4"
            >
              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
              <path
                d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z"
              ></path>
            </svg>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="icon icon-tabler-star size-4"
            >
              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
              <path
                d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z"
              ></path>
            </svg>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="icon icon-tabler-star size-4"
            >
              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
              <path
                d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z"
              ></path>
            </svg>
          </span>
          <blockquote
            class="text-xl sm:text-xl md:text-2xl italic font-medium text-base-500 mt-14"
          >
            With Oxbow UI, we can create a customized landing page for our
            business that showcases our products.
          </blockquote>
        </figure>
      </li>
    </ul>
  </div>
</section>
<!-- Pricing section with available plans and details -->
<section x-data="{ duration: 'monthly' }" class="bg-base-50">
  <div class="mx-auto px-8 md:px-12 lg:px-20 w-full max-w-7xl py-24">
    <div class="max-w-xl mx-auto text-center">
      <h1
        class="text-2xl md:text-3xl lg:text-4xl font-medium tracking-tight text-base-900 text-balance"
      >
        Give your team tools that don’t suck
      </h1>
      <p class="text-base mt-2 font-medium text-base-600 text-balance">
        Start with what you need, skip what you don’t. Scale up when
        spreadsheets stop cutting it.
      </p>
      <!-- Pricing Toggle -->
      <div
        aria-labelledby="pricing-toggle"
        class="relative z-0 inline-flex justify-center w-full p-1 mx-auto mt-8 overflow-hidden bg-white shadow ring-1 ring-base-200 ring-offset-2 gap-4 lg:mx-0 rounded-md max-w-52"
      >
        <div
          class="absolute inset-0 bg-base-50 rounded-md transition-transform duration-200 ease-in-out"
          :class="duration === 'monthly' ? 'w-1/2 translate-x-0' : 'w-1/2 translate-x-full'"
        ></div>
        <button
          class="relative z-10 flex items-center justify-center w-full h-6 px-2 text-xs font-medium focus:outline-none transition-colors duration-300"
          :class="duration === 'monthly' ? 'text-base-600' : 'focus:text-base-900 hover:text-base-900'"
          @click="duration = 'monthly'"
          type="button"
          :aria-pressed="duration === 'monthly'"
        >
          Monthly
        </button>
        <button
          class="relative z-10 flex items-center justify-center w-full h-6 px-2 text-xs font-medium focus:outline-none transition-colors duration-300"
          :class="duration === 'annual' ? 'text-base-600' : 'focus:text-base-900 hover:text-base-900'"
          @click="duration = 'annual'"
          type="button"
          :aria-pressed="duration === 'annual'"
        >
          Annual
        </button>
      </div>
    </div>
    <div class="max-w-2xl mx-auto mt-12 grid grid-cols-1 gap-4 sm:grid-cols-2">
      <div
        class="flex flex-col justify-between h-full p-8 bg-white shadow outline outline-base-200 rounded-xl"
      >
        <div>
          <div class="flex flex-col">
            <h3 class="text-base font-medium text-base-900">Core</h3>
            <p
              class="text-xl md:text-2xl lg:text-3xl flex items-baseline mt-4 font-medium tracking-tighter text-base-900"
            >
              <span
                data-monthly="$29.00"
                data-annual="$19.00"
                x-text="$el.dataset[duration]"
              ></span>
              <span class="text-sm font-normal tracking-normal text-base-500">
                <span x-show="duration === 'monthly'">/month</span>
                <span x-show="duration === 'annual'" style="display: none">
                  /annually
                </span>
              </span>
            </p>
            <p class="text-sm mt-2 text-base-500">
              For solo builders, side project warriors, and anyone who just
              wants the essentials without the enterprise bloat.
            </p>
            <div class="w-full mt-4">
              <button
                class="flex items-center justify-center text-center font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:outline-offset-2 focus:z-10 select-none text-base-700 bg-white outline outline-base-200 hover:shadow-sm focus:outline-base-900 shadow-sm h-9 px-4 py-2 text-sm rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md w-full"
              >
                Get Started
              </button>
            </div>
          </div>
          <div class="mt-8">
            <p class="text-xs font-medium uppercase text-base-500">
              Core plan includes:
            </p>
            <ul
              class="flex flex-col mt-4 text-sm text-base-600 gap-y-3"
              role="list"
            >
              <li class="flex items-center gap-2">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="icon icon-tabler-layout-users-group size-4"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                  <path d="M10 13a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"></path>
                  <path d="M8 21v-1a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v1"></path>
                  <path d="M15 5a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"></path>
                  <path d="M17 10h2a2 2 0 0 1 2 2v1"></path>
                  <path d="M5 5a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"></path>
                  <path d="M3 13v-1a2 2 0 0 1 2 -2h2"></path>
                </svg>
                <span>1 Teams</span>
              </li>
              <li class="flex items-center gap-2">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="icon icon-tabler-arrow-settings-exclamation size-4"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                  <path
                    d="M15.004 18.401a1.724 1.724 0 0 0 -1.329 1.282c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.079 .262 1.495 1.305 1.248 2.17"
                  ></path>
                  <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"></path>
                  <path d="M19 16v3"></path>
                  <path d="M19 22v.01"></path>
                </svg>
                <span>50 issues</span>
              </li>
              <li class="flex items-center gap-2">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="icon icon-tabler-arrow-user-plus size-4"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                  <path d="M5 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"></path>
                  <path
                    d="M3 21v-2a4 4 0 0 1 4 -4h4c.96 0 1.84 .338 2.53 .901"
                  ></path>
                  <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                  <path d="M16 19h6"></path>
                  <path d="M19 16v6"></path>
                </svg>
                <span>Unlimited members</span>
              </li>
              <li class="flex items-center gap-2">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="icon icon-tabler-arrow-alert-api-app size-4"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                  <path d="M12 15h-6.5a2.5 2.5 0 1 1 0 -5h.5"></path>
                  <path d="M15 12v6.5a2.5 2.5 0 1 1 -5 0v-.5"></path>
                  <path d="M12 9h6.5a2.5 2.5 0 1 1 0 5h-.5"></path>
                  <path d="M9 12v-6.5a2.5 2.5 0 0 1 5 0v.5"></path>
                </svg>
                <span>Slack, GitHub, and API access</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="flex items-center pt-4 mt-4 border-t gap-2 border-base-200">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="icon icon-tabler-circle-check size-4 text-blue-500"
          >
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <path
              d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"
              stroke-width="0"
              fill="currentColor"
            ></path>
          </svg>
          <p class="text-sm font-medium text-base-500">
            No credit card required
          </p>
        </div>
      </div>
      <div
        class="flex flex-col justify-between h-full p-8 bg-white shadow outline outline-base-200 rounded-xl"
      >
        <div>
          <div class="flex flex-col">
            <h3 class="text-base font-medium text-base-900">Momentum</h3>
            <p
              class="text-xl md:text-2xl lg:text-3xl flex items-baseline mt-4 font-medium tracking-tighter text-base-900"
            >
              <span
                data-monthly="$49.00"
                data-annual="$39.00"
                x-text="$el.dataset[duration]"
              ></span>
              <span class="text-sm font-normal tracking-normal text-base-500">
                <span x-show="duration === 'monthly'">/month</span>
                <span x-show="duration === 'annual'" style="display: none">
                  /annually
                </span>
              </span>
            </p>
            <p class="text-sm mt-2 text-base-500">
              Perfect for growing teams that need more power, more flexibility,
              and fewer excuses to miss a deadline.
            </p>
            <div class="w-full mt-4">
              <button
                class="flex items-center justify-center text-center font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:outline-offset-2 focus:z-10 select-none text-white bg-blue-500 outline outline-accent-500 hover:bg-blue-600 focus:outline-accent-600 shadow-sm h-9 px-4 py-2 text-sm rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md w-full"
              >
                Get Started
              </button>
            </div>
          </div>
          <div class="mt-8">
            <p class="text-xs font-medium uppercase text-base-500">
              Everything in Core plus:
            </p>
            <ul
              class="flex flex-col mt-4 text-sm text-base-600 gap-y-3"
              role="list"
            >
              <li class="flex items-center gap-2">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="icon icon-tabler-plus size-4"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                  <path d="M12 5l0 14"></path>
                  <path d="M5 12l14 0"></path>
                </svg>
                <span>All Core plan features</span>
              </li>
              <li class="flex items-center gap-2">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="icon icon-tabler-bulb size-4"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                  <path
                    d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"
                  ></path>
                  <path
                    d="M9 16a5 5 0 1 1 6 0a3.5 3.5 0 0 0 -1 3a2 2 0 0 1 -4 0a3.5 3.5 0 0 0 -1 -3"
                  ></path>
                  <path d="M9.7 17l4.6 0"></path>
                </svg>
                <span>Insights</span>
              </li>
              <li class="flex items-center gap-2">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="icon icon-tabler-arrow-user-plus size-4"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                  <path d="M5 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"></path>
                  <path
                    d="M3 21v-2a4 4 0 0 1 4 -4h4c.96 0 1.84 .338 2.53 .901"
                  ></path>
                  <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                  <path d="M16 19h6"></path>
                  <path d="M19 16v6"></path>
                </svg>
                <span>Unlimited teams</span>
              </li>
              <li class="flex items-center gap-2">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="icon icon-tabler-arrow-lock size-4"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                  <path
                    d="M5 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-6z"
                  ></path>
                  <path d="M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"></path>
                  <path d="M8 11v-4a4 4 0 1 1 8 0v4"></path>
                </svg>
                <span>Private teams and guest</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="flex items-center pt-4 mt-4 border-t gap-2 border-base-200">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="icon icon-tabler-circle-check size-4 text-blue-500"
          >
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <path
              d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"
              stroke-width="0"
              fill="currentColor"
            ></path>
          </svg>
          <p class="text-sm font-medium text-base-500">
            No credit card required
          </p>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- Frequently Asked Questions section -->
<section>
  <div class="relative px-8 py-24 mx-auto md:px-12 lg:px-24 max-w-7xl">
    <div>
      <p class="text-sm font-bold uppercase text-blue-600">Tagline</p>
      <h2
        class="text-2xl md:text-3xl lg:text-4xl mt-4 font-semibold text-base-900 lg:text-balance"
      >
        Frequently Asked Questions
      </h2>
      <p class="text-base mt-4 font-medium text-base-500">
        Everything you need to know about our platform.
      </p>
    </div>
    <ul role="list" class="mt-12 space-y-8 divide-y divide-base-900/10">
      <div class="pt-8 lg:grid lg:grid-cols-12 lg:gap-12">
        <div class="lg:col-span-5">
          <h3 class="text-lg md:text-xl font-medium text-base-900">
            How does end-to-end encryption work?
          </h3>
        </div>
        <div class="mt-4 lg:col-span-7 lg:mt-0">
          <p class="text-base font-medium text-base-500">
            End-to-end encryption ensures that only the sender and recipient can
            access the content of a message.
          </p>
        </div>
      </div>
      <div class="pt-8 lg:grid lg:grid-cols-12 lg:gap-12">
        <div class="lg:col-span-5">
          <h3 class="text-lg md:text-xl font-medium text-base-900">
            Can I access my encrypted data if I forget my encryption key?
          </h3>
        </div>
        <div class="mt-4 lg:col-span-7 lg:mt-0">
          <p class="text-base font-medium text-base-500">
            No, forgetting or losing your encryption key means that your
            encrypted data cannot be accessed.
          </p>
        </div>
      </div>
      <div class="pt-8 lg:grid lg:grid-cols-12 lg:gap-12">
        <div class="lg:col-span-5">
          <h3 class="text-lg md:text-xl font-medium text-base-900">
            Are there any limitations to the self-destructing messages feature?
          </h3>
        </div>
        <div class="mt-4 lg:col-span-7 lg:mt-0">
          <p class="text-base font-medium text-base-500">
            Self-destructing messages are designed to automatically delete
            themselves after a specific period or upon being read by the
            recipient.
          </p>
        </div>
      </div>
      <div class="pt-8 lg:grid lg:grid-cols-12 lg:gap-12">
        <div class="lg:col-span-5">
          <h3 class="text-lg md:text-xl font-medium text-base-900">
            What happens if I enable two-factor authentication and lose my
            device?
          </h3>
        </div>
        <div class="mt-4 lg:col-span-7 lg:mt-0">
          <p class="text-base font-medium text-base-500">
            Losing your device doesn&#39;t automatically compromise your
            account&#39;s security.
          </p>
        </div>
      </div>
      <div class="pt-8 lg:grid lg:grid-cols-12 lg:gap-12">
        <div class="lg:col-span-5">
          <h3 class="text-lg md:text-xl font-medium text-base-900">
            Is my personal information shared or sold to third parties?
          </h3>
        </div>
        <div class="mt-4 lg:col-span-7 lg:mt-0">
          <p class="text-base font-medium text-base-500">
            No, we strictly adhere to a privacy-centric approach. Your personal
            information is never shared, sold, or monetized. We prioritize your
            privacy and ensure that your data remains confidential and only
            accessible to you.
          </p>
        </div>
      </div>
      <!-- More questions... -->
    </ul>
  </div>
</section>
<!-- Footer section with links, contact info, and social media -->
<section>
  <div class="relative px-8 py-12 mx-auto md:px-12 lg:px-24 max-w-7xl">
    <div class="items-end grid grid-cols-1 sm:grid-cols-2 gap-4">
      <div>
        <h2 class="text-lg md:text-xl font-semibold text-base-900">
          Get started with our app today
        </h2>
        <p class="text-base mt-4 font-medium text-base-500 lg:text-balance">
          Streamline your workflow and collaborate seamlessly on staging and
          temporary environments
        </p>
      </div>
      <div class="flex flex-col items-center lg:flex-row gap-2 sm:ml-auto">
        <button
          class="flex items-center justify-center text-center font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:outline-offset-2 focus:z-10 select-none text-base-700 bg-white outline outline-base-200 hover:shadow-sm focus:outline-base-900 shadow-sm h-9 px-4 py-2 text-sm gap-2 rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="icon icon-tabler-layout-apple size-4"
            slot="left-icon"
          >
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <path
              d="M8.286 7.008c-3.216 0 -4.286 3.23 -4.286 5.92c0 3.229 2.143 8.072 4.286 8.072c1.165 -.05 1.799 -.538 3.214 -.538c1.406 0 1.607 .538 3.214 .538s4.286 -3.229 4.286 -5.381c-.03 -.011 -2.649 -.434 -2.679 -3.23c-.02 -2.335 2.589 -3.179 2.679 -3.228c-1.096 -1.606 -3.162 -2.113 -3.75 -2.153c-1.535 -.12 -3.032 1.077 -3.75 1.077c-.729 0 -2.036 -1.077 -3.214 -1.077z"
            ></path>
            <path d="M12 4a2 2 0 0 0 2 -2a2 2 0 0 0 -2 2"></path>
          </svg>
          <span>Download on App Store</span>
        </button>
        <button
          class="flex items-center justify-center text-center font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:outline-offset-2 focus:z-10 select-none text-base-700 bg-white outline outline-base-200 hover:shadow-sm focus:outline-base-900 shadow-sm h-9 px-4 py-2 text-sm gap-2 rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="icon icon-tabler-layout-grid size-4"
            slot="left-icon"
          >
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <path
              d="M4 3.71v16.58a.7 .7 0 0 0 1.05 .606l14.622 -8.42a.55 .55 0 0 0 0 -.953l-14.622 -8.419a.7 .7 0 0 0 -1.05 .607z"
            ></path>
            <path d="M15 9l-10.5 11.5"></path>
            <path d="M4.5 3.5l10.5 11.5"></path>
          </svg>
          <span>Download on Google Play</span>
        </button>
      </div>
    </div>
    <div
      class="pt-6 mt-6 border-t grid grid-cols-2 md:grid-cols-4 gap-x-8 gap-y-24 border-base-200"
    >
      <div class="space-y-4">
        <nav aria-labelledby="footer-heading-0">
          <h2
            class="text-base font-semibold text-base-900"
            id="footer-heading-0"
          >
            Company
          </h2>
          <ul class="mt-4 space-y-4">
            <li>
              <a
                class="text-base font-medium hover:text-blue-500 text-base-500"
                href="#_"
              >
                About
              </a>
            </li>
            <li>
              <a
                class="text-base font-medium hover:text-blue-500 text-base-500"
                href="#_"
              >
                Mission
              </a>
            </li>
            <li>
              <a
                class="text-base font-medium hover:text-blue-500 text-base-500"
                href="#_"
              >
                Leadership Team
              </a>
            </li>
            <li>
              <a
                class="text-base font-medium hover:text-blue-500 text-base-500"
                href="#_"
              >
                History
              </a>
            </li>
          </ul>
        </nav>
      </div>
      <div class="space-y-4">
        <nav aria-labelledby="footer-heading-1">
          <h2
            class="text-base font-semibold text-base-900"
            id="footer-heading-1"
          >
            Services
          </h2>
          <ul class="mt-4 space-y-4">
            <li>
              <a
                class="text-base font-medium hover:text-blue-500 text-base-500"
                href="#_"
              >
                Marketing
              </a>
            </li>
            <li>
              <a
                class="text-base font-medium hover:text-blue-500 text-base-500"
                href="#_"
              >
                Analytics
              </a>
            </li>
            <li>
              <a
                class="text-base font-medium hover:text-blue-500 text-base-500"
                href="#_"
              >
                Commerce
              </a>
            </li>
            <li>
              <a
                class="text-base font-medium hover:text-blue-500 text-base-500"
                href="#_"
              >
                Insights
              </a>
            </li>
          </ul>
        </nav>
      </div>
      <div class="space-y-4">
        <nav aria-labelledby="footer-heading-2">
          <h2
            class="text-base font-semibold text-base-900"
            id="footer-heading-2"
          >
            Resources
          </h2>
          <ul class="mt-4 space-y-4">
            <li>
              <a
                class="text-base font-medium hover:text-blue-500 text-base-500"
                href="#_"
              >
                Documentation
              </a>
            </li>
            <li>
              <a
                class="text-base font-medium hover:text-blue-500 text-base-500"
                href="#_"
              >
                Guides
              </a>
            </li>
            <li>
              <a
                class="text-base font-medium hover:text-blue-500 text-base-500"
                href="#_"
              >
                Webinars
              </a>
            </li>
            <li>
              <a
                class="text-base font-medium hover:text-blue-500 text-base-500"
                href="#_"
              >
                White Papers
              </a>
            </li>
          </ul>
        </nav>
      </div>
      <div class="space-y-4">
        <nav aria-labelledby="footer-heading-3">
          <h2
            class="text-base font-semibold text-base-900"
            id="footer-heading-3"
          >
            Support &amp; Legal
          </h2>
          <ul class="mt-4 space-y-4">
            <li>
              <a
                class="text-base font-medium hover:text-blue-500 text-base-500"
                href="#_"
              >
                Pricing
              </a>
            </li>
            <li>
              <a
                class="text-base font-medium hover:text-blue-500 text-base-500"
                href="#_"
              >
                API Status
              </a>
            </li>
            <li>
              <a
                class="text-base font-medium hover:text-blue-500 text-base-500"
                href="#_"
              >
                Live Chat
              </a>
            </li>
            <li>
              <a
                class="text-base font-medium hover:text-blue-500 text-base-500"
                href="#_"
              >
                Email Support
              </a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
    <div
      class="flex flex-col items-center justify-between pt-6 mt-12 border-t md:flex-row border-base-200"
    >
      <a
        class="text-base flex items-center font-medium hover:text-blue-500 gap-2 text-base-900"
        href="#_"
      >
        <img
          class="h-7 2xl:h-12"
          src="/images/oxbow/blueLineLogo.png"
          alt="#_"
        />
        Oxbow UI
      </a>
      <h2 class="text-sm font-medium text-base-400">
        Copyright © 2024 Oxbow UI. All rights reserved.
      </h2>
    </div>
  </div>
</section>