www_mycelium/templates/partials/usecases2.html

<div class="">
  <div class="mx-auto max-w-4xl px-4 py-10 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
    <div class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80" aria-hidden="true">
      <div class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-20 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
    </div>
    <div class="absolute -bottom-8 -left-96 -z-10 transform-gpu blur-3xl sm:-bottom-64 sm:-left-40 lg:-bottom-32 lg:left-8 xl:-left-10" aria-hidden="true">
      <div class="aspect-[1266/975] w-[79.125rem] bg-gradient-to-tr from-[#ff4694] to-[#776fff] opacity-20" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
    </div>
    <h2 class="text-3xl pt-16 font-bold text-white">Use Cases</h2>
    <h3 class="text-lg font-light text-gray-50">Uncover how TF9's advanced technology is revolutionizing various industries and delivering exceptional results through our in-depth use cases.</h2>

    <div class="grid grid-cols-1 gap-y-12 gap-x-6 lg:gap-x-16 lg:grid-cols-3 xl:gap-x-8">
      <div>
        <div class="relative pt-16">
          <div class="relative h-72 w-full overflow-hidden rounded-lg">
            <img src="https://tailwindui.com/img/ecommerce-images/product-page-03-related-product-01.jpg" alt="usecase" class="h-full w-full object-cover object-center">
          </div>
          <div class="relative mt-4">
            <h3 class="text-sm font-medium text-white">Tier-S Data Center</h3>
            <p class="mt-1 mb-4 text-sm text-gray-50">Tier 3 and Tier 4 Data centers are outdated due to the transformative impact of AI.</p>
          </div>
          <div class="absolute inset-x-0 top-0 flex h-72 items-end justify-end overflow-hidden rounded-lg p-4">
            <div aria-hidden="true" class="absolute inset-x-0 bottom-0 h-36 bg-gradient-to-t from-black opacity-50"></div>
          </div>
        </div>
        <div class="mt-6">
          <a href="#" class="relative flex items-center justify-center rounded-md border border-transparent bg-indigo-400 px-8 py-2 text-sm font-medium text-white hover:bg-gray-900">Read More</a>
        </div>
      </div>

      <!-- More products... -->
      <div>
        <div class="relative pt-16">
          <div class="relative h-72 w-full overflow-hidden rounded-lg">
            <img src="https://tailwindui.com/img/ecommerce-images/product-page-03-related-product-01.jpg" alt="usecase" class="h-full w-full object-cover object-center">
          </div>
          <div class="relative mt-4">
            <h3 class="text-sm font-medium text-white">ThreeFold Grid</h3>
            <p class="mt-1 mb-4 text-sm text-gray-50">ThreeFold uses TF9 for their decentralized DePIN network, the biggest of its kind globally.</p>
          </div>
          <div class="absolute inset-x-0 top-0 flex h-72 items-end justify-end overflow-hidden rounded-lg p-4">
            <div aria-hidden="true" class="absolute inset-x-0 bottom-0 h-36 bg-gradient-to-t from-black opacity-50"></div>
          </div>
        </div>
        <div class="mt-6">
          <a href="#" class="relative flex items-center justify-center rounded-md border border-transparent bg-indigo-400 px-8 py-2 text-sm font-medium text-white hover:bg-gray-900">Read More</a>
        </div>
      </div>

       <!-- More products... -->
       <div>
        <div class="relative pt-16">
          <div class="relative h-72 w-full overflow-hidden rounded-lg">
            <img src="https://tailwindui.com/img/ecommerce-images/product-page-03-related-product-01.jpg" alt="usecase" class="h-full w-full object-cover object-center">
          </div>
          <div class="relative mt-4">
            <h3 class="text-sm font-medium text-white">Digital Free Zone</h3>
            <p class="mt-1 mb-4 text-sm text-gray-50">Zanzibar is using our technology for the development of a cutting-edge digital free zone.</p>
          </div>
          <div class="absolute inset-x-0 top-0 flex h-72 items-end justify-end overflow-hidden rounded-lg p-4">
            <div aria-hidden="true" class="absolute inset-x-0 bottom-0 h-36 bg-gradient-to-t from-black opacity-50"></div>
          </div>
        </div>
        <div class="mt-6">
          <a href="#" class="relative flex items-center justify-center rounded-md border border-transparent bg-indigo-400 px-8 py-2 text-sm font-medium text-white hover:bg-gray-900">Read More</a>
        </div>
      </div>

       <!-- More products... -->
       <div>
        <div class="relative pt-16">
          <div class="relative h-72 w-full overflow-hidden rounded-lg">
            <img src="https://tailwindui.com/img/ecommerce-images/product-page-03-related-product-01.jpg" alt="usecase" class="h-full w-full object-cover object-center">
          </div>
          <div class="relative mt-4">
            <h3 class="text-sm font-medium text-white">Sovereign Internet for countries</h3>
            <p class="mt-1 mb-4 text-sm text-gray-50">By harnessing TF9's advanced solutions, Tanzania is building its own sovereign internet</p>
          </div>
          <div class="absolute inset-x-0 top-0 flex h-72 items-end justify-end overflow-hidden rounded-lg p-4">
            <div aria-hidden="true" class="absolute inset-x-0 bottom-0 h-36 bg-gradient-to-t from-black opacity-50"></div>
          </div>
        </div>
        <div class="mt-6">
          <a href="#" class="relative flex items-center justify-center rounded-md border border-transparent bg-indigo-400 px-8 py-2 text-sm font-medium text-white hover:bg-gray-900">Read More</a>
        </div>
      </div>

       <!-- 2nd row -->
       <div>
        <div class="relative pt-6 lg:pt-16 xl:pt-16">
          <div class="relative h-72 w-full overflow-hidden rounded-lg">
            <img src="https://tailwindui.com/img/ecommerce-images/product-page-03-related-product-01.jpg" alt="usecase" class="h-full w-full object-cover object-center">
          </div>
          <div class="relative mt-4">
            <h3 class="text-sm font-medium text-white">Cyber Pandemic Solution</h3>
            <p class="mt-1 mb-4 text-sm text-gray-50">The gravity of cyber threats and our robust solutions to protect against them.</p>
          </div>
          <div class="absolute inset-x-0 top-0 flex h-72 items-end justify-end overflow-hidden rounded-lg p-4">
            <div aria-hidden="true" class="absolute inset-x-0 bottom-0 h-36 bg-gradient-to-t from-black opacity-50"></div>
          </div>
        </div>
        <div class="mt-6">
          <a href="#" class="relative flex items-center justify-center rounded-md border border-transparent bg-indigo-400 px-8 py-2 text-sm font-medium text-white hover:bg-gray-900">Read More</a>
        </div>
      </div>
      </div>
    </div>
  </div>
</div>