www_mycelium/templates/partials/usecases2.html

<div class="py-24 sm:py-32">
    <div class="mx-auto max-w-7xl px-6 lg:px-8">
      <div class="mx-auto max-w-2xl lg:max-w-4xl">
        <h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl">Use Cases</h2>
        <p class="mt-2 text-lg leading-8 text-gray-50">Uncover how TF9's advanced technology is revolutionizing various industries and delivering exceptional results through our in-depth use cases.</p>
        <div class="mt-16 space-y-20 lg:mt-20 lg:space-y-20">
          <!-- Article 1 -->
          <article class="relative isolate flex flex-col gap-8 lg:flex-row">
            <div class="relative aspect-[16/9] sm:aspect-[2/1] lg:aspect-square lg:w-64 lg:shrink-0">
              <img src="https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3603&q=80" alt="" class="absolute inset-0 h-full w-full rounded-2xl bg-gray-50 object-cover">
              <div class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>
            </div>
            <div>
              <div class="flex items-center gap-x-4 text-xs">
                <time datetime="2020-03-16" class="text-gray-50">Mar 16, 2020</time>
                <a href="#" class="relative z-10 rounded-full bg-gray-50 px-3 py-1.5 font-medium text-gray-600 hover:bg-gray-100">Marketing</a>
              </div>
              <div class="group relative max-w-xl">
                <h3 class="mt-3 text-lg font-semibold leading-6 text-white group-hover:text-gray-600">
                  <a href="#">
                    <span class="absolute inset-0"></span>
                    Tier-S Data Center
                  </a>
                </h3>
                <p class="mt-5 text-sm leading-6 text-gray-50">Tier 3 and Tier 4 Data centers are outdated due to the transformative impact of AI.</p>
              </div>
              <div class="mt-6 flex border-t border-gray-900/5 pt-6">
                <div class="relative flex items-center gap-x-4">
                  <a href="#" class="text-sm font-semibold leading-6 text-indigo-400 hover:text-indigo-500">Read Use Case <span aria-hidden="true">&rarr;</span></a>
                </div>
              </div>
            </div>
          </article>
          
          <!-- Article 2 -->
          <article class="relative isolate flex flex-col gap-8 lg:flex-row">
            <div class="relative aspect-[16/9] sm:aspect-[2/1] lg:aspect-square lg:w-64 lg:shrink-0">
              <img src="https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3603&q=80" alt="" class="absolute inset-0 h-full w-full rounded-2xl bg-gray-50 object-cover">
              <div class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>
            </div>
            <div>
              <div class="flex items-center gap-x-4 text-xs">
                <time datetime="2020-03-16" class="text-gray-50">Mar 16, 2020</time>
                <a href="#" class="relative z-10 rounded-full bg-gray-50 px-3 py-1.5 font-medium text-gray-600 hover:bg-gray-100">Marketing</a>
              </div>
              <div class="group relative max-w-xl">
                <h3 class="mt-3 text-lg font-semibold leading-6 text-white group-hover:text-gray-600">
                  <a href="#">
                    <span class="absolute inset-0"></span>
                    Tier-S Data Center
                  </a>
                </h3>
                <p class="mt-5 text-sm leading-6 text-gray-50">Tier 3 and Tier 4 Data centers are outdated due to the transformative impact of AI.</p>
              </div>
              <div class="mt-6 flex border-t border-gray-900/5 pt-6">
                <div class="relative flex items-center gap-x-4">
                  <a href="#" class="text-sm font-semibold leading-6 text-indigo-400 hover:text-indigo-500">Read Use Case <span aria-hidden="true">&rarr;</span></a>
                </div>
              </div>
            </div>
          </article>
  
          <!-- Article 3 -->
          <article class="relative isolate flex flex-col gap-8 lg:flex-row">
            <div class="relative aspect-[16/9] sm:aspect-[2/1] lg:aspect-square lg:w-64 lg:shrink-0">
              <img src="https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3603&q=80" alt="" class="absolute inset-0 h-full w-full rounded-2xl bg-gray-50 object-cover">
              <div class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>
            </div>
            <div>
              <div class="flex items-center gap-x-4 text-xs">
                <time datetime="2020-03-16" class="text-gray-50">Mar 16, 2020</time>
                <a href="#" class="relative z-10 rounded-full bg-gray-50 px-3 py-1.5 font-medium text-gray-600 hover:bg-gray-100">Marketing</a>
              </div>
              <div class="group relative max-w-xl">
                <h3 class="mt-3 text-lg font-semibold leading-6 text-white group-hover:text-gray-600">
                  <a href="#">
                    <span class="absolute inset-0"></span>
                    Tier-S Data Center
                  </a>
                </h3>
                <p class="mt-5 text-sm leading-6 text-gray-50">Tier 3 and Tier 4 Data centers are outdated due to the transformative impact of AI.</p>
              </div>
              <div class="mt-6 flex border-t border-gray-900/5 pt-6">
                <div class="relative flex items-center gap-x-4">
                  <a href="#" class="text-sm font-semibold leading-6 text-indigo-400 hover:text-indigo-500">Read Use Case <span aria-hidden="true">&rarr;</span></a>
                </div>
              </div>
            </div>
          </article>
  
          <!-- Article 4 -->
          <article class="relative isolate flex flex-col gap-8 lg:flex-row">
            <div class="relative aspect-[16/9] sm:aspect-[2/1] lg:aspect-square lg:w-64 lg:shrink-0">
              <img src="https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3603&q=80" alt="" class="absolute inset-0 h-full w-full rounded-2xl bg-gray-50 object-cover">
              <div class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>
            </div>
            <div>
              <div class="flex items-center gap-x-4 text-xs">
                <time datetime="2020-03-16" class="text-gray-50">Mar 16, 2020</time>
                <a href="#" class="relative z-10 rounded-full bg-gray-50 px-3 py-1.5 font-medium text-gray-600 hover:bg-gray-100">Marketing</a>
              </div>
              <div class="group relative max-w-xl">
                <h3 class="mt-3 text-lg font-semibold leading-6 text-white group-hover:text-gray-600">
                  <a href="#">
                    <span class="absolute inset-0"></span>
                    Tier-S Data Center
                  </a>
                </h3>
                <p class="mt-5 text-sm leading-6 text-gray-50">Tier 3 and Tier 4 Data centers are outdated due to the transformative impact of AI.</p>
              </div>
              <div class="mt-6 flex border-t border-gray-900/5 pt-6">
                <div class="relative flex items-center gap-x-4">
                  <a href="#" class="text-sm font-semibold leading-6 text-indigo-400 hover:text-indigo-500">Read Use Case <span aria-hidden="true">&rarr;</span></a>
                </div>
              </div>
            </div>
          </article>
        </div>
      </div>
    </div>
</div>