<section
      class="p-20 mt-5 mb-5"
      style="
        background-image: url(/img/header-bg-image.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
      "
    >
      <div class="flex flex-col gap-2 items-center">
        <h1
          class="py-3 bg-gradient-to-t from-[#5E0C92] to-black inline-block text-transparent bg-clip-text text-8xl font-semibold text-center lg:text-left"
        >
          About Content Planet
        </h1>
        <p class="text-center lg:text-left">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore.
        </p>
      </div>
    </section>

    <section class="mb-40">
      <div
        class="p-6 rounded-lg container max-w-[1200px]"
        style="
          background: linear-gradient(
            90deg,
            #feecff 0%,
            #fecaff 11.71%,
            #feb5ff 26.8%,
            #ffdbe7 40.18%,
            #fff4d6 49.22%,
            #f3fcd7 58.71%,
            #d2f5ee 71.29%,
            #c3efff 84.44%,
            #fbefff 100%
          );
        "
      >
        <figure class="bg-[#ffffff61] p-5 rounded-lg backdrop-blur-2xl">
          <img src="/img/Galaxy.png" alt="" class="w-full" />
        </figure>
      </div>
    </section>

    <!-- Trusted By The Next Generation -->
    <section class="container mb-40">
      <div class="grid grid-cols-3 lg:grid-cols-7">
        <div
          class="flex justify-center items-center px-2 py-4 border-[#b0afaf3b] border-r-[1px] border-b-[1px]"
        >
          <img src="/img/vancLaser.png" alt="" />
        </div>
        <div
          class="flex justify-center items-center px-2 py-4 border-[#b0afaf3b] border-r-[1px] border-b-[1px]"
        >
          <img src="/img/UNAC.png" alt="" />
        </div>
        <div
          class="flex justify-center items-center px-2 py-4 lg:border-r-[1px] border-[#b0afaf3b] border-b-[1px]"
        >
          <img src="/img/pacific-intervention.png" alt="" />
        </div>
        <div
          class="flex justify-center items-center px-2 py-4 border-[#b0afaf3b] border-r-[1px] border-b-[1px]"
        >
          <img src="/img/canguard.png" alt="" />
        </div>
        <div
          class="flex justify-center items-center px-2 py-4 border-[#b0afaf3b] border-r-[1px] border-b-[1px]"
        >
          <img src="/img/Sahar Development.png" alt="" />
        </div>
        <div
          class="flex justify-center items-center px-2 py-4 lg:border-r-[1px] border-b-[1px] border-[#b0afaf3b]"
        >
          <img src="/img/Protocl and Events.png" alt="" />
        </div>
        <div
          class="flex justify-center items-center px-2 py-4 border-r-2 lg:border-r-0 border-[#b0afaf3b] border-b-[1px]"
        >
          <img src="/img/Pioneera Ventures.png" alt="" />
        </div>
        <div
          class="flex justify-center items-center px-2 py-4 border-[#b0afaf3b] border-r-[1px] border-b-[1px]"
        >
          <img src="/img/Fusion.png" alt="" />
        </div>
        <div
          class="flex justify-center items-center px-2 py-4 lg:border-r-[1px] border-[#b0afaf3b] border-b-[1px]"
        >
          <img src="/img/Enhance-Dental.png" alt="" />
        </div>
        <div
          class="col-span-3 lg:row-span-2 px-2 py-4 lg:border-r-[1px] border-[#b0afaf3b] border-b-[1px]"
        >
          <h2
            class="py-3 lg:text-6xl font-medium text-center text-4xl sm:text-6xl"
          >
            Trusted By The
            <span class="text-[#5E0C92] lg:text-[55px]">Next Generation</span>
          </h2>
        </div>
        <div
          class="flex justify-center items-center px-2 py-4 border-[#b0afaf3b] border-r-[1px] border-b-[1px]"
        >
          <img src="/img/CEREFLEX.png" alt="" />
        </div>
        <div
          class="flex justify-center items-center px-2 py-4 border-r-[1px] border-[#b0afaf3b] lg:border-r-0 border-b-[1px]"
        >
          <img src="/img/SupportBench-Logo-300x44.png" alt="" />
        </div>
        <div
          class="flex justify-center items-center px-2 py-4 lg:border-r-[1px] border-[#b0afaf3b] border-b-[1px]"
        >
          <img src="/img/diamondnet 1.png" alt="" />
        </div>
        <div
          class="flex justify-center items-center px-2 py-4 border-r-[1px] border-[#b0afaf3b] border-b-[1px]"
        >
          <img src="/img/Vernon-KIA-Logo-Black-and-red-300x90 1.png" alt="" />
        </div>
        <div
          class="flex justify-center items-center px-2 py-4 border-r-[1px] border-[#b0afaf3b] border-b-[1px]"
        >
          <img src="/img/sum-trade-co-footer-logo.png" alt="" />
        </div>
        <div
          class="flex justify-center items-center px-2 py-4 border-b-[1px] border-[#b0afaf3b]"
        >
          <img src="/img/Elements Film Festival.png" alt="" />
        </div>
        <div
          class="flex justify-center items-center px-2 py-4 border-r-[1px] border-[#b0afaf3b]"
        >
          <img src="/img/Automotivators.png" alt="" />
        </div>
        <div
          class="flex justify-center items-center px-2 py-4 border-r-[1px] border-[#b0afaf3b]"
        >
          <img src="/img/Kavosh.png" alt="" />
        </div>
        <div
          class="flex justify-center items-center px-2 py-4 lg:border-r-[1px] border-[#b0afaf3b]"
        >
          <img src="/img/celebrity-laser-care-desktop.png" alt="" />
        </div>
        <div
          class="lg:flex justify-center items-center px-2 py-4 border-r-[1px] border-[#b0afaf3b] hidden"
        >
          <img src="/img/Weissach.png" alt="" />
        </div>
        <div
          class="lg:flex justify-center items-center px-2 py-4 border-r-[1px] border-[#b0afaf3b] hidden"
        >
          <img src="/img/Greenpath logo 1.png" alt="" />
        </div>
        <div
          class="lg:flex justify-center items-center px-2 py-4 border-r-[1px] border-[#b0afaf3b] hidden"
        >
          <img src="/img/Reborn-Autobody-cropped.png" alt="" />
        </div>
        <div
          class="lg:flex justify-center items-center px-2 py-4 border-r-[1px] border-[#b0afaf3b] lg:border-r-0 hidden"
        >
          <img src="/img/venus-skin-clinic.png" alt="" />
        </div>
      </div>
    </section>

    <section class="container grid grid-cols-1 lg:grid-cols-2 mb-20">
      <div class="col-span-1 flex flex-col gap-2 ">
        <h2
          class="py-3 bg-gradient-to-t from-[#5E0C92] to-black inline-block text-transparent bg-clip-text text-8xl font-semibold text-center lg:text-left"
        >
        Our Insight
        </h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas purus viverra accumsan in nisl nisi. Arcu cursus vitae congue mauris rhoncus aenean vel elit scelerisque. In egestas erat imperdiet sed euismod nisi porta lorem mollis. Morbi tristique senectus et netus.</p>
      </div>
      <div class="col-span-1">
        <img src="/img/about-section-image.png" alt="" class="w-full lg:ml-auto" />
      </div>
    </section>




       <!-- View All Tutorials -->
    <section class="container mb-40">
      <div class="flex flex-col items-center justify-center gap-2 mb-16">
        <h2
          class="py-3 bg-gradient-to-t from-[#5E0C92] to-black inline-block text-transparent bg-clip-text text-4xl sm:text-4xl lg:text-6xl font-semibold text-center"
        >
        Our
        </h2>
        <p class="text-[#3C3C3C] text-center">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
        <button class="px-2 py-1 rounded-lg bg-black text-white mb-2">
          View All Tutorials
        </button>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
        <%doc.forEach(item=>{ %> 
        <div class="relative rounded-2xl overflow-hidden">
          <img
            src="/img/woman-working-home-computer.jpg"
            alt=""
            class="w-full block"
          />
          <!-- Gradient overlay covering only the image -->
          <div
            class="absolute inset-0 z-10 pointer-events-none"
            style="
              background: linear-gradient(
                180deg,
                rgba(255, 255, 255, 0) 10%,
                #5a5398 114.13%
              );
            "
          ></div>
          <div
            class="absolute bottom-2 p-4 z-20 text-white flex flex-col gap-2 w-full"
          >
            <p class="text-sm">Category</p>
            <h3 class="font-medium text-xl">
             <%=item.title%>
            </h3>
            <div class="flex justify-between w-full mt-10 text-sm">
              <p>By <%=item.author.name%></p>
               <% const formattedDate = new Date(item.publishedAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }); %>
              <p>Posted At <%= formattedDate %></p>
              
            </div>
          </div>
        </div>
      <%})%>
      </div>
    </section>
    <!--Work With Us -->
    <section class="container mb-20">
      <div class="grid grid-cols-7 items-center">
        <div class="col-span-7 md:col-span-2 order-3 md:order-1">
          <img src="/img/Work-with-us-image.png" alt="" class="mx-auto" />
        </div>
        <div
          class="col-span-7 md:col-span-3 flex flex-col gap-4 items-center order-2"
        >
          <h2
            class="py-3 bg-gradient-to-t from-[#5E0C92] to-black inline-block text-transparent bg-clip-text text-4xl sm:text-4xl lg:text-6xl font-semibold text-center"
          >
            Work With Us
          </h2>
          <p class="font-medium text-center">
            Are You a Content Writer or Graphic Designer?
          </p>
          <p class="text-center">There is an Empty Set For you in Our Team!</p>
          <div class="flex">
            <button class="px-2 py-1 rounded-lg bg-black text-white mb-2">
              Send a Resume
            </button>
          </div>
        </div>
        <div class="col-span-7 md:col-span-2 order-1 md:order-3">
          <img src="/img/Search-image.png" alt="" class="mx-auto" />
        </div>
      </div>
    </section>