framexEngine-pro/app/views/blocks/blog-list/blog-list-4.php

<section>
  <!-- Container -->
  <div class="mx-auto w-full max-w-7xl px-5 py-16 md:px-10 md:py-20">
    <div class="text-center mb-12">
      <!-- Title -->
      <h2 class="mb-4 mt-6 text-3xl font-bold md:text-5xl">
        The latest and greatest news
      </h2>
      <p class="text-gray-500 mt-2">
        Lorem ipsum dolor sit amet elit ut aliquam
      </p>
      <!-- Buttons -->
      <div class="my-10 md:my-20 flex flex-col md:flex-row justify-center gap-3">
        <button class="px-4 py-2 bg-gray-100 font-semibold rounded-full">
          Engaging Articles
        </button>
        <button class="px-4 py-2 bg-black text-white font-semibold rounded-full">
          Product Updates
        </button>
        <button class="px-4 py-2 bg-gray-100 font-semibold rounded-full">
          Reflex Workflows
        </button>
        <button class="px-4 py-2 bg-gray-100 font-semibold rounded-full">
          Artificial Intelligence
        </button>
      </div>
    </div>
    <!-- Blog Content -->
    <div class="max-w-6xl mx-auto">
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
        <!-- Blog Item -->
        <div class=" bg-gray-50 rounded-lg overflow-hidden">
          <div class="relative h-80">
            <img class="h-80 w-full object-cover" src="<?= image() ?>" alt="" />
            <a class="absolute bottom-5 right-5 btn btn-secondary  ">
              Product Updates
            </a>
          </div>

          <div class="p-4 flex justify-between items-center">
            <div>
              <h2 class="text-lg font-semibold mt-2">
                Here is the title for this News
              </h2>
              <p>Lorem ipsum dolor sit amet elit ut aliquam</p>
            </div>

            <button class="cursor-pointer h-14 w-14">
              <svg class="h-14 w-14" width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M30.0001 52.5001C42.4265 52.5001 52.5001 42.4265 52.5001 30.0001C52.5001 17.5736 42.4265 7.5 30.0001 7.5C17.5736 7.5 7.5 17.5736 7.5 30.0001C7.5 42.4265 17.5736 52.5001 30.0001 52.5001Z" fill="black" stroke="black" stroke-width="2" stroke-miterlimit="10" />
                <path d="M31.4297 37.9454L39.375 30L31.4297 22.0547" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                <path d="M20.625 30H39.3751" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
            </button>
          </div>
        </div>

        <!-- Blog Item -->
        <div class="relative bg-gray-50 rounded-lg overflow-hidden">
          <div class="relative h-80">
            <img class="h-80 w-full object-cover" src="<?= image() ?>" alt="" />
            <a class="absolute bottom-5 right-5 btn btn-secondary  ">
              Product Updates
            </a>
          </div>

          <div class="p-4 flex justify-between items-center">
            <div>
              <h2 class="text-lg font-semibold mt-2">
                Here is the title for this News
              </h2>
              <p>Lorem ipsum dolor sit amet elit ut aliquam</p>
            </div>

            <button class="cursor-pointer h-14 w-14">
              <svg class="h-14 w-14" width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M30.0001 52.5001C42.4265 52.5001 52.5001 42.4265 52.5001 30.0001C52.5001 17.5736 42.4265 7.5 30.0001 7.5C17.5736 7.5 7.5 17.5736 7.5 30.0001C7.5 42.4265 17.5736 52.5001 30.0001 52.5001Z" fill="black" stroke="black" stroke-width="2" stroke-miterlimit="10" />
                <path d="M31.4297 37.9454L39.375 30L31.4297 22.0547" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                <path d="M20.625 30H39.3751" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
            </button>
          </div>
        </div>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <!-- Blog Item -->
        <div class="bg-gray-50 rounded-lg overflow-hidden">
          <div class="relative h-72">
            <img class="h-72 w-full object-cover" src="<?= image() ?>" alt="" />
            <a class="absolute bottom-5 right-5 btn btn-secondary  ">
              Product Updates
            </a>
          </div>

          <div class="p-4">
            <h2 class="text-lg font-semibold mt-2">
              Here is the title for this News
            </h2>
            <p class="text-gray-500">
              We make every expression of Hero Spirits with precision and
              passion
            </p>
          </div>
        </div>
        <!-- Blog Item -->
        <div class=" bg-gray-50 rounded-lg overflow-hidden">
          <div class="relative h-72">
            <img class="h-72 w-full object-cover" src="<?= image() ?>" alt="" />
            <a class="absolute bottom-5 right-5 btn btn-secondary  ">
              Product Updates
            </a>
          </div>

          <div class="p-4">
            <h2 class="text-lg font-semibold mt-2">
              Here is the title for this News
            </h2>
            <p class="text-gray-500">
              We make every expression of Hero Spirits with precision and
              passion
            </p>
          </div>
        </div>
        <!-- Blog Item -->
        <div class="bg-gray-50 rounded-lg overflow-hidden">
          <div class="relative h-72">
            <img class="h-72 w-full object-cover" src="<?= image() ?>" alt="" />
            <a class="absolute bottom-5 right-5 btn btn-secondary  ">
              Product Updates
            </a>
          </div>

          <div class="p-4">
            <h2 class="text-lg font-semibold mt-2">
              Here is the title for this News
            </h2>
            <p class="text-gray-500">
              We make every expression of Hero Spirits with precision and
              passion
            </p>
          </div>
        </div>
      </div>

      <!-- Button -->
      <div class="mt-10 md:mt-20 text-center">
        <button class="px-6 py-2 bg-black text-white rounded-lg">
          Load More
        </button>
      </div>
    </div>
  </div>
</section>