<!-- Header -->
<section
  class="mb-20 p-5"
  style="
    background-image: url(/img/Background-post.png);
    background-size: cover;
    background-repeat: no-repeat;
  "
>
  <div class="container">
    <div class="p-5 rounded-lg">
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
        <div
          class="relative w-full order-2 lg:order-1 flex items-center justify-center"
        >
          <img src="/img/blog-image.png" alt="" class="w-full" />
          <div
            class="backdrop-blur-sm p-2 lg:p-5 rounded-xl absolute w-[80%] h-[80%] custom-shadow flex items-center justify-center text-center"
          >
            <p
              class="bg-gradient-to-t from-[#5E0C92] to-black inline-block text-transparent bg-clip-text text-xl sm:text-4xl lg:text-3xl font-bold text-center"
            >
              <%=doc.name%>
            </p>
          </div>
        </div>
        <div class="flex flex-col gap-4 items-start order-1 lg:order-2">
          <h2
            class="bg-gradient-to-t from-[#5E0C92] to-black inline-block text-transparent bg-clip-text text-xl sm:text-4xl lg:text-3xl font-bold"
          >
            <%=doc.title%>
          </h2>
          <p class=""><%=doc.introduction%></p>
          <div class="flex justify-between">
            <div class="flex items-center gap-4">
              <img src="/users/<%=doc.author.photo%>" alt="" />
              <div class="">
                <p class="font-medium"><%=doc.author.name%></p>
                <p><%=doc.author.workfield%></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<section class="mb-20 p-5">
<article class="container ">
  <div class="p-5">
<%-doc.mainText%>
  </div>
  
  
  </article>
</section>
<section class="container grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-4 mb-20">
  <%if(suggested.length>0){%> <%suggested.forEach(item=>{%>
  <div class="flex flex-col gap-6">
    <div class="relative w-full flex items-center justify-center">
      <img src="/img/blog-image.png" alt="" class="w-full" />
      <div
        class="backdrop-blur-sm bg-white p-2 lg:p-5 rounded-xl absolute w-[80%] h-[80%] custom-shadow flex items-center justify-center text-center"
      >
        <p
          class="bg-gradient-to-t from-[#5E0C92] to-black inline-block text-transparent bg-clip-text text-xl font-bold text-center"
        >
        <%=item.name%>
        </p>
      </div>
    </div>
    <div class="flex flex-col gap-4 items-start p-1">
      <h2
        class="bg-gradient-to-t from-[#5E0C92] to-black inline-block text-transparent bg-clip-text text-lg font-bold"
      >
       <%=item.title%>
      </h2>
      <p class="text-sm text-gray-700">
       <%=item.introduction%>
      </p>
      <div class="flex justify-between">
        <div class="flex items-center gap-4">
          <img src="/users/<%=item.author.phoro%>" alt="" />
          <div class="">
            <p class="font-medium text-sm"><%=item.author.name%></p>
            <p class="text-sm"><%=item.author.workfield%></p>
          </div>
        </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>
