@extends('layouts.layout')

@section('content')
    <div
        class="w-full px-4 lg:flex hidden justify-center bg-[white] z-40 border-b-[2px] border-primaryColor fixed top-28 ">
        <x-category-list/>
    </div>

    <div class="lg:pt-44 pt-32 w-full flex justify-center py-4">
        <div class="lg:w-[80%] w-full flex flex-col p-8">
              <div class="w-full grid lg:grid-cols-3 md:grid-cols-3 grid-cols-1 gap-2">
                    <div class="w-full lg:col-span-2 md:col-span-2 col-span-1">
                        <div class="w-full px-4">
                                <div class="flex gap-2 text-xs ">
                                    <a href="{{route('home')}}"><i class="fa fa-home"></i></a>
                                    <p>/</p>
                                    <a href="{{route('home')}}" class="text-secondaryColor">
                                        Digital Marketing
                                    </a>
                                </div>
                                <h2 class="gi-breadcrumb-title text-primaryColor block lg:text-3xl md:text-3xl sm:text-2xl text-xl font-Poppins font-semibold my-[0] mx-auto capitalize mt-4">
                                    I will boost your rankings with tier1 dofollow SEO backlinks
                                </h2>
                            <div class="w-full ">
                                <span class="font-semibold text-md"><i class="fa fa-star"></i> 4.9</span> <span class="font-normal text-sm">(478)</span>
                            </div>
                            </div>
                         <div class="w-full flex flex-wrap gap-4 items-center mt-6">
                             <img class="h-32 w-32 rounded-full" src="{{asset('assets/images/u2.jpg')}}" alt="">
                             <div class="flex flex-col">
                                   <span class="font-semibold text-2xl text-primaryColor">Michael</span>
                                    <p class="text-secondaryColor    text-sm ">
                                        <i class="fa fa-location-pin text-xs mr-1"></i>
                                        <span class="font-normal text-sm">United States</span>
                                        <i class=" fa fa-message text-xs mr-1 ml-2"></i>
                                        <span class="font-normal text-sm">English, Hindi</span>
                                    </p>
                                    <p class="text-secondaryColor    text-sm ">
                                        <i class="fa fa-gift text-xs mr-1"></i>
                                        <span class="font-normal text-sm">26,000 orders completed</span>
                                    </p>
                                   <button class="border-[1px] border-black/30 text-black/60 hover:bg-primaryColor hover:text-white shadow-lg shadow-gray-200 px-4 py-1 w-max rounded-sm font-semibold text-sm mt-4">Contact Me</button>
                             </div>
                         </div>
                        <div class="w-full mt-8">
                            <span class="text-black/70 font-semibold  text-lg">Ultimate Digital Services Made in Europe!</span>
                            <p class="text-sm font-semibold text-black/50">🚀 Bringing your business to the extraterrestrial level with SEO & Content Marketing. My name is Virtual Superman and I lift the heaviest weights for you! 🔥</p>
                        </div>
                        <div class="w-full flex gap-x-4 gap-y-1 flex-wrap mt-4">
                            <button class="rounded-full bg-otherColor/10 px-4 py-1 w-max  font-medium text-sm mt-4">SEO</button>
                            <button class="rounded-full bg-otherColor/10 px-4 py-1 w-max  font-medium text-sm mt-4">WordPress</button>
                            <button class="rounded-full bg-otherColor/10 px-4 py-1 w-max  font-medium text-sm mt-4">Keyword research</button>
                            <button class="rounded-full bg-otherColor/10 px-4 py-1 w-max  font-medium text-sm mt-4">Web development</button>
                            <button class="rounded-full bg-otherColor/10 px-4 py-1 w-max  font-medium text-sm mt-4">Social media marketing</button>
                            <button class="rounded-full bg-otherColor/10 px-4 py-1 w-max  font-medium text-sm mt-4">Content writing</button>
                            <button class="rounded-full bg-otherColor/10 px-4 py-1 w-max  font-medium text-sm mt-4">Adobe After Effects</button>

                        </div>
                        <div class="w-full mt-8">
                            <div class="flex items-center gap-4">
                                 <div>
                                     <i class="fa fa-trophy text-2xl text-primaryColor"></i>
                                 </div>
                                <div>
                                    <span class="text-black/70 font-semibold  text-md">Buyers keep returning</span>
                                    <p class="text-sm font-normal text-black/50">Michael has an exceptional number of repeat buyers</p>

                                </div>
                            </div>
                            <div class="flex items-center gap-4 mt-3">
                                 <div>
                                     <i class="fa fa-ranking-star text-2xl text-primaryColor"></i>
                                 </div>
                                <div>
                                    <span class="text-black/70 font-semibold  text-md">Level 2</span>
                                    <p class="text-sm font-normal text-black/50">Has met high performance criteria and has a proven track record for meeting client expectations.</p>

                                </div>
                            </div>
                            <div class="flex items-center gap-4 mt-3">
                                 <div>
                                     <i class="fa fa-bolt text-2xl text-primaryColor"></i>
                                 </div>
                                <div>
                                    <span class="text-black/70 font-semibold  text-md">Highly Responsive</span>
                                    <p class="text-sm font-normal text-black/50">Known for exceptionally quick replies</p>

                                </div>
                            </div>

                        </div>
                        <div class="w-full flex flex-col gap-4 mt-8">
                             <div class="w-full flex justify-between">
                                 <span class="text-black/70 font-semibold  text-xl">What people loved about this freelancer</span>
                                 <span class="text-black/70 font-semibold  text-md">See All Reviews</span>
                             </div>

                            <div class="swiffy-slider slider-nav-autoplay">
                                <ul class="slider-container">
                                    <li>
                                        <div class="w-full border-[1px] border-primaryColor/20 p-4 rounded-md">
                                            <div class="w-full flex gap-4">
                                                <div class="grow">
                                                    <img class="h-8 w-8 rounded-full" src="{{asset('assets/images/u1.jpg')}}" alt="">
                                                </div>
                                                <div class="flex flex-col gap-2 ">
                                                    <div class="flex gap-2 items-center">
                                                        <span class="text-md font-semibold text-black/60">Sellbar</span>
                                                        <span class="text-sm font-normal text-black/60">United State</span>
                                                        <span>
                                                  <i class="fa fa-star text-xs"></i>
                                                  <i class="fa fa-star text-xs"></i>
                                                  <i class="fa fa-star text-xs"></i>
                                                  <i class="fa fa-star text-xs"></i>
                                                  <i class="fa fa-star text-xs"></i>
                                                    <span class="text-md font-semibold text-black/60">5</span>

                                              </span>
                                                    </div>
                                                    <div>
                                                        <p class="text-md font-semibold text-black/40">Very Good Quality Service. Ordered without communications - all the conditions in the description is in details. For an additional large bounce a ...</p>
                                                    </div>
                                                    <div>
                                                        <p class="text-xs font-semibold text-black/30">3 Weeks Ago</p>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </li>
                                    <li>
                                        <div class="w-full border-[1px] border-primaryColor/20 p-4 rounded-md">
                                            <div class="w-full flex gap-4">
                                                <div class="grow">
                                                    <img class="h-8 w-8 rounded-full" src="{{asset('assets/images/u1.jpg')}}" alt="">
                                                </div>
                                                <div class="flex flex-col gap-2 ">
                                                    <div class="flex gap-2 items-center">
                                                        <span class="text-md font-semibold text-black/60">Sellbar</span>
                                                        <span class="text-sm font-normal text-black/60">United State</span>
                                                        <span>
                                                  <i class="fa fa-star text-xs"></i>
                                                  <i class="fa fa-star text-xs"></i>
                                                  <i class="fa fa-star text-xs"></i>
                                                  <i class="fa fa-star text-xs"></i>
                                                  <i class="fa fa-star text-xs"></i>
                                                    <span class="text-md font-semibold text-black/60">5</span>

                                              </span>
                                                    </div>
                                                    <div>
                                                        <p class="text-md font-semibold text-black/40">Very Good Quality Service. Ordered without communications - all the conditions in the description is in details. For an additional large bounce a ...</p>
                                                    </div>
                                                    <div>
                                                        <p class="text-xs font-semibold text-black/30">3 Weeks Ago</p>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </li>  <li>
                                        <div class="w-full border-[1px] border-primaryColor/20 p-4 rounded-md">
                                            <div class="w-full flex gap-4">
                                                <div class="grow">
                                                    <img class="h-8 w-8 rounded-full" src="{{asset('assets/images/u1.jpg')}}" alt="">
                                                </div>
                                                <div class="flex flex-col gap-2 ">
                                                    <div class="flex gap-2 items-center">
                                                        <span class="text-md font-semibold text-black/60">Sellbar</span>
                                                        <span class="text-sm font-normal text-black/60">United State</span>
                                                        <span>
                                                  <i class="fa fa-star text-xs"></i>
                                                  <i class="fa fa-star text-xs"></i>
                                                  <i class="fa fa-star text-xs"></i>
                                                  <i class="fa fa-star text-xs"></i>
                                                  <i class="fa fa-star text-xs"></i>
                                                    <span class="text-md font-semibold text-black/60">5</span>

                                              </span>
                                                    </div>
                                                    <div>
                                                        <p class="text-md font-semibold text-black/40">Very Good Quality Service. Ordered without communications - all the conditions in the description is in details. For an additional large bounce a ...</p>
                                                    </div>
                                                    <div>
                                                        <p class="text-xs font-semibold text-black/30">3 Weeks Ago</p>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </li>  <li>
                                        <div class="w-full border-[1px] border-primaryColor/20 p-4 rounded-md">
                                            <div class="w-full flex gap-4">
                                                <div class="grow">
                                                    <img class="h-8 w-8 rounded-full" src="{{asset('assets/images/u1.jpg')}}" alt="">
                                                </div>
                                                <div class="flex flex-col gap-2 ">
                                                    <div class="flex gap-2 items-center">
                                                        <span class="text-md font-semibold text-black/60">Sellbar</span>
                                                        <span class="text-sm font-normal text-black/60">United State</span>
                                                        <span>
                                                  <i class="fa fa-star text-xs"></i>
                                                  <i class="fa fa-star text-xs"></i>
                                                  <i class="fa fa-star text-xs"></i>
                                                  <i class="fa fa-star text-xs"></i>
                                                  <i class="fa fa-star text-xs"></i>
                                                    <span class="text-md font-semibold text-black/60">5</span>

                                              </span>
                                                    </div>
                                                    <div>
                                                        <p class="text-md font-semibold text-black/40">Very Good Quality Service. Ordered without communications - all the conditions in the description is in details. For an additional large bounce a ...</p>
                                                    </div>
                                                    <div>
                                                        <p class="text-xs font-semibold text-black/30">3 Weeks Ago</p>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </li>  <li>
                                        <div class="w-full border-[1px] border-primaryColor/20 p-4 rounded-md">
                                            <div class="w-full flex gap-4">
                                                <div class="grow">
                                                    <img class="h-8 w-8 rounded-full" src="{{asset('assets/images/u1.jpg')}}" alt="">
                                                </div>
                                                <div class="flex flex-col gap-2 ">
                                                    <div class="flex gap-2 items-center">
                                                        <span class="text-md font-semibold text-black/60">Sellbar</span>
                                                        <span class="text-sm font-normal text-black/60">United State</span>
                                                        <span>
                                                  <i class="fa fa-star text-xs"></i>
                                                  <i class="fa fa-star text-xs"></i>
                                                  <i class="fa fa-star text-xs"></i>
                                                  <i class="fa fa-star text-xs"></i>
                                                  <i class="fa fa-star text-xs"></i>
                                                    <span class="text-md font-semibold text-black/60">5</span>

                                              </span>
                                                    </div>
                                                    <div>
                                                        <p class="text-md font-semibold text-black/40">Very Good Quality Service. Ordered without communications - all the conditions in the description is in details. For an additional large bounce a ...</p>
                                                    </div>
                                                    <div>
                                                        <p class="text-xs font-semibold text-black/30">3 Weeks Ago</p>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </li>
                                </ul>

                                <button type="button" class="slider-nav"></button>
                                <button type="button" class="slider-nav slider-nav-next"></button>

                            </div>

                        </div>
                        <div class="w-full mt-8">
                            <span class="text-black/70 font-semibold  text-lg">About this gig</span>
                            <p class="text-md font-normal text-black/60 mt-4">Are you looking for a top-notch business website? You're at the right gig! Our professional website development services are ready to bring your vision to life.s</p>
                            <p class="text-md font-normal text-black/60 mt-12">Meet Areen Your web design expert with over 13 years of expertise, served 1000+ clients globally and recognized as a top-tier web designer.</p>
                            <p class="text-md font-normal text-black/60 mt-12">I'm skilled in various projects blogs, e-commerce, agencies, directories, jobs, and real estate web sites. Each project is a tailored solution, driven by standards and professionalism.</p>
                        </div>




                        <div class="w-full mt-8">
                            <span class="text-black/70 font-semibold  text-lg">My Portfolio</span>
                                                        <div class="main-wrapper w-full mt-4">
                                <div class="grid w-full lg:grid-cols-4 md:grid-cols-2 grid-cols-1 xl:gap-10 gap-5 mb-4">
                                    @foreach($popularServices as $service)
                                        <a href="">
                                            <article class="relative isolate flex flex-col justify-end overflow-hidden rounded-md px-8 pb-8 pt-12 mt-4 group">
                                                <img src="{{asset('assets/images/'.$service['image'])}}"
                                                     class="absolute inset-0 object-cover w-full h-full rounded-md"
                                                     alt="">
                                                <div class="absolute inset-0 bg-gradient-to-t from-black to black/80 opacity-0 group-hover:opacity-100"></div>
                                                <h3 class="z-10 mt-3 text-xl font-bold text-white opacity-0 group-hover:opacity-100">
                                                    {{$service['title']}}
                                                </h3>

                                                <div class="z-10 gap-y-1 overflow-hidden text-sm leading-6 text-secondaryColor opacity-0 group-hover:opacity-100">
                                                    Popular
                                                </div>
                                            </article>
                                        </a>
                                    @endforeach
                                </div>
                            </div>
                            <a href="">                            <span class="text-secondaryColor underline font-semibold  text-md mt-4">View All (5)</span>
                            </a>

                        </div>


                        <div class="w-full mt-8">
                            <span class="text-black/70 font-semibold  text-lg">Compare Packages</span>
                              <div class="w-full overflow-x-auto">
                                  <table class="w-full border-[1px] border-primaryColor/20 border-collapse mt-4">
                                      <tr>
                                          <td class="border-[1px] border-primaryColor/20 p-4">
                                              <span class="text-sm font-normal">Package</span>
                                          </td>
                                          <td class=" ">
                                          </td>

                                          <td class="border-[1px] border-primaryColor/20 p-4 flex flex-col ">
                                              <span class="text-md font-normal text-black/60">₹ 440</span>
                                              <span class="text-md font-semibold text-black/60">Basic</span>
                                              <span class="text-sm font-semibold text-black/60 mt-6">SMALLVILLE PACKAGE</span>
                                              <span class="text-sm font-normal text-black/60">100 Dofollow</span>
                                              <span class="text-sm font-normal text-black/60 ">Backlinks</span>
                                          </td>
                                          <td class=" ">
                                          </td>

                                          <td class="border-[1px] border-primaryColor/20 p-4 flex flex-col ">
                                              <span class="text-md font-normal text-black/60">₹ 1339</span>
                                              <span class="text-md font-semibold text-black/60">Standard</span>
                                              <span class="text-sm font-semibold text-black/60 mt-6">SUPERHERO EFFECT</span>
                                              <span class="text-sm font-normal text-black/60">100 Dofollow</span>
                                              <span class="text-sm font-normal text-black/60 ">Backlinks</span>
                                          </td>
                                          <td class=" ">
                                          </td>
                                          <td class="border-[1px] border-primaryColor/20 p-4 flex flex-col ">
                                              <span class="text-md font-normal text-black/60">₹ 1339</span>
                                              <span class="text-md font-semibold text-black/60">Standard</span>
                                              <span class="text-sm font-semibold text-black/60 mt-6">SUPERHERO EFFECT</span>
                                              <span class="text-sm font-normal text-black/60">100 Dofollow</span>
                                              <span class="text-sm font-normal text-black/60 ">Backlinks</span>
                                          </td>

                                      </tr>
                                      <tr>
                                          <td class="border-[1px] border-primaryColor/20 p-4">
                                              <span class="text-sm font-normal">Delivery Time</span>
                                          </td>
                                          <td class=" ">
                                          </td>

                                          <td class="border-[1px] border-primaryColor/20 p-4 flex flex-col ">
                                              <span class="text-md font-normal text-black/60">4 Days</span>

                                          </td>
                                          <td class=" ">
                                          </td>

                                          <td class="border-[1px] border-primaryColor/20 p-4 flex flex-col ">
                                              <span class="text-md font-normal text-black/60">3 Days</span>

                                          </td>
                                          <td class=" ">
                                          </td>
                                          <td class="border-[1px] border-primaryColor/20 p-4 flex flex-col ">
                                              <span class="text-md font-normal text-black/60">2 Days</span>

                                          </td>

                                      </tr>
                                      <tr>
                                          <td class="border-[1px] border-primaryColor/20 p-4">
                                              <span class="text-sm font-normal">Total</span>
                                          </td>
                                          <td class=" ">
                                          </td>

                                          <td class="border-[1px] border-primaryColor/20 p-4 flex flex-col items-center ">
                                              <span class="text-md font-normal text-black/60">₹ 440</span>
                                              <button
                                                  class="mt-4 font-bold text-white bg-primaryColor border-[1px] border-primaryColor hover:text-primaryColor hover:bg-white/90 px-12 py-2 rounded-full transition ease-in duration-2000"
                                                  style="font: 600 15px / 25px 'Inter', sans-serif;">
                                                  Select
                                              </button>

                                          </td>
                                          <td class=" ">
                                          </td>

                                          <td class="border-[1px] border-primaryColor/20 p-4 flex flex-col items-center ">
                                              <span class="text-md font-normal text-black/60">₹ 1339</span>
                                              <button
                                                  class="mt-4 font-bold text-white bg-primaryColor border-[1px] border-primaryColor hover:text-primaryColor hover:bg-white/90 px-12 py-2 rounded-full transition ease-in duration-2000"
                                                  style="font: 600 15px / 25px 'Inter', sans-serif;">
                                                  Select
                                              </button>

                                          </td>
                                          <td class=" ">
                                          </td>
                                          <td class="border-[1px] border-primaryColor/20 p-4 flex flex-col items-center ">
                                              <span class="text-md font-normal text-black/60">₹ 3330</span>
                                              <button
                                                  class="mt-4 font-bold text-white bg-primaryColor border-[1px] border-primaryColor hover:text-primaryColor hover:bg-white/90 px-12 py-2 rounded-full transition ease-in duration-2000"
                                                  style="font: 600 15px / 25px 'Inter', sans-serif;">
                                                  Select
                                              </button>

                                          </td>

                                      </tr>
                                  </table>

                              </div>
                        </div>
                        <div class="w-full mt-8">
                            <span class="text-black/70 font-semibold  text-lg">FAQ</span>

                            <div class=" w-full mt-4 ">
                                <div class="gi-accordion style-1">
                                    <div class="gi-accordion-item border-primaryColor/30 border-[1px] overflow-hidden mb-[10px] group">
                                        <h4 class=" m-[0] py-[15px] pl-[30px] pr-[35px] bg-primaryColor/10 text-primaryColor  text-[16px] leading-[28px] font-semibold relative font-Poppins border-[1px] border-solid border-[#eee] rounded-[5px] tracking-[0.01rem] max-[767px]:text-[15px]">
                                            What is the multi vendor services?
                                        </h4>

                                        <div class=" show py-[15px] text-[14px] px-6  leading-[24px] text-secondaryColor  group-hover:block">Lorem Ipsum is simply dummy text of the printing and
                                            typesetting industry. Lorem
                                            Ipsum has been the industry's standard <code class="text-[#5caf90] text-[14px] font-semibold">dummy text</code> ever since the 1500s,
                                            when an
                                            unknown printer took a galley of type and scrambled it to make a type specimen book.
                                        </div>
                                    </div>

                                </div>
                                <div class="gi-accordion style-1">
                                    <div class="gi-accordion-item border-primaryColor/30 border-[1px] overflow-hidden mb-[10px] group">
                                        <h4 class=" m-[0] py-[15px] pl-[30px] pr-[35px] bg-primaryColor/10 text-primaryColor  text-[16px] leading-[28px] font-semibold relative font-Poppins border-[1px] border-solid border-[#eee] rounded-[5px] tracking-[0.01rem] max-[767px]:text-[15px]">
                                            What is the multi vendor services?
                                        </h4>

                                        <div class=" show py-[15px] text-[14px] px-6  leading-[24px] text-secondaryColor hidden  group-hover:block">Lorem Ipsum is simply dummy text of the printing and
                                            typesetting industry. Lorem
                                            Ipsum has been the industry's standard <code class="text-[#5caf90] text-[14px] font-semibold">dummy text</code> ever since the 1500s,
                                            when an
                                            unknown printer took a galley of type and scrambled it to make a type specimen book.
                                        </div>
                                    </div>

                                </div>
                                <div class="gi-accordion style-1">
                                    <div class="gi-accordion-item border-primaryColor/30 border-[1px] overflow-hidden mb-[10px] group">
                                        <h4 class=" m-[0] py-[15px] pl-[30px] pr-[35px] bg-primaryColor/10 text-primaryColor  text-[16px] leading-[28px] font-semibold relative font-Poppins border-[1px] border-solid border-[#eee] rounded-[5px] tracking-[0.01rem] max-[767px]:text-[15px]">
                                            What is the multi vendor services?
                                        </h4>

                                        <div class=" show py-[15px] text-[14px] px-6  leading-[24px] text-secondaryColor hidden  group-hover:block">Lorem Ipsum is simply dummy text of the printing and
                                            typesetting industry. Lorem
                                            Ipsum has been the industry's standard <code class="text-[#5caf90] text-[14px] font-semibold">dummy text</code> ever since the 1500s,
                                            when an
                                            unknown printer took a galley of type and scrambled it to make a type specimen book.
                                        </div>
                                    </div>

                                </div>
                            </div>

                        </div>
                        <div class="w-full mt-8">
                            <span class="text-black/70 font-semibold  text-lg">Reviews</span>
                            <div class="flex flex-col gap-2 mt-4">
                                <div class="w-full flex flex-col border-b-[1px] border-primaryColor/20 p-4 rounded-md">
                                    <div class="w-full flex gap-4">
                                        <div class="grow">
                                            <img class="h-8 w-8 rounded-full" src="{{asset('assets/images/u1.jpg')}}" alt="">
                                        </div>
                                        <div class="flex flex-col gap-2 ">
                                            <div class="flex gap-2 items-center">
                                                <span class="text-md font-semibold text-black/60">Sellbar</span>
                                                <span class="text-sm font-normal text-black/60">United State</span>
                                                <span>
                                                  <i class="fa fa-star text-xs"></i>
                                                  <i class="fa fa-star text-xs"></i>
                                                  <i class="fa fa-star text-xs"></i>
                                                  <i class="fa fa-star text-xs"></i>
                                                  <i class="fa fa-star text-xs"></i>
                                                    <span class="text-md font-semibold text-black/60">5</span>

                                              </span>
                                            </div>
                                            <div>
                                                <p class="text-md font-semibold text-black/40">Very Good Quality Service. Ordered without communications - all the conditions in the description is in details. For an additional large bounce a ...</p>
                                            </div>
                                            <div>
                                                <p class="text-xs font-semibold text-black/30">3 Weeks Ago</p>
                                            </div>
                                        </div>



                                    </div>
                                    <div class="w-full flex gap-4 pl-16 mt-4">
                                        <div class="grow">
                                            <img class="h-8 w-8 rounded-full" src="{{asset('assets/images/u1.jpg')}}" alt="">
                                        </div>
                                        <div class="flex flex-col gap-2 ">
                                            <div class="flex gap-2 items-center">
                                                <span class="text-md font-semibold text-black/60">Sellbar</span>

                                            </div>
                                            <div>
                                                <p class="text-md font-semibold text-black/40">Very Good Quality Service. Ordered without communications - all the conditions in the description is in details. For an additional large bounce a ...</p>
                                            </div>
                                            <div>
                                                <p class="text-xs font-semibold text-black/30">3 Weeks Ago</p>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                                <div class="w-full border-b-[1px] border-primaryColor/20 p-4 rounded-md">
                                    <div class="w-full flex gap-4">
                                        <div class="grow">
                                            <img class="h-8 w-8 rounded-full" src="{{asset('assets/images/u1.jpg')}}" alt="">
                                        </div>
                                        <div class="flex flex-col gap-2 ">
                                            <div class="flex gap-2 items-center">
                                                <span class="text-md font-semibold text-black/60">Sellbar</span>
                                                <span class="text-sm font-normal text-black/60">United State</span>
                                                <span>
                                                  <i class="fa fa-star text-xs"></i>
                                                  <i class="fa fa-star text-xs"></i>
                                                  <i class="fa fa-star text-xs"></i>
                                                  <i class="fa fa-star text-xs"></i>
                                                  <i class="fa fa-star text-xs"></i>
                                                    <span class="text-md font-semibold text-black/60">5</span>

                                              </span>
                                            </div>
                                            <div>
                                                <p class="text-md font-semibold text-black/40">Very Good Quality Service. Ordered without communications - all the conditions in the description is in details. For an additional large bounce a ...</p>
                                            </div>
                                            <div>
                                                <p class="text-xs font-semibold text-black/30">3 Weeks Ago</p>
                                            </div>
                                        </div>
                                    </div>

                                </div>


                            </div>



                        </div>




                    </div>
                    <div class="w-full">
                      <div class="w-full p-4">
                            <div class="w-full flex flex-col border-[1px] border-primaryColor/30">
                                  <div class="grid grid-cols-3 ">
                                      <div class="w-full border-r-[1px] border-b-[2px] border-primaryColor/30 px-2 py-4 font-semibold text-black flex justify-center items-center">
                                           <span>Basic</span>
                                      </div>
                                      <div class="w-full border-r-[1px]  border-primaryColor/30 px-2 py-4 font-semibold text-black/60 flex justify-center items-center">
                                           <span>Standard</span>
                                      </div>
                                      <div class="w-full border-r-[1px]  border-primaryColor/30 px-2 py-4 font-semibold text-black/60 flex justify-center items-center">
                                           <span>Premium</span>
                                      </div>
                                  </div>
                                  <div class=" flex flex-col gap-2 p-4 border-t-[1px] border-primaryColor/30">
                                       <div class="flex justify-between gap-2">
                                               <span class="font-semibold text-md text-black/60">SMALLVILLE Package</span>
                                               <span class="font-medium text-lg text-black/60">₹ 440</span>
                                       </div>
                                       <div class="flex justify-between gap-2 mt-6">
                                               <span class="font-semibold text-md text-black/40">100 Dofollow Backlinks</span>
                                       </div>
                                       <div class="flex justify-between gap-2">
                                               <span class="font-semibold text-sm text-black/80">
                                                   <i class="fa fa-clock mr-1"></i>
                                                   4-day delivery</span>
                                       </div>
                                       <div class="flex  flex-col gap-2">
                                           <button class="mt-4 w-full font-bold text-white bg-primaryColor border-[1px] border-primaryColor hover:text-primaryColor hover:bg-white/90 px-12 py-2 rounded-sm transition ease-in duration-2000" style="font: 600 15px / 25px 'Inter', sans-serif;">
                                               Continue
                                               <i class="fa fa-arrow-right ml-2"></i>
                                           </button>
                                           <button class=" w-full font-bold text-black/40  px-12 " style="font: 600 15px / 25px 'Inter', sans-serif;">
                                               Compare Packages
                                           </button>
                                       </div>
                                </div>
                            </div>
                      </div>
                      <div class="w-full p-4">
                          <div class="flex  flex-col gap-2 p-4 bg-black/5">
                              <button class="mt-4 w-full font-bold text-primaryColor bg-white border-[1px] border-primaryColor hover:text-white hover:bg-primaryColor px-12 py-2 rounded-sm transition ease-in duration-2000" style="font: 600 15px / 25px 'Inter', sans-serif;">
                                  Contact Me
                                  <i class="fa fa-chevron-down ml-2"></i>
                              </button>
                              <button class=" w-full font-bold text-black/80  px-12 " style="font: 600 15px / 25px 'Inter', sans-serif;">
                                 <i class="fa fa-video mr-2"></i>  Michael offers paid consultations
                              </button>
                          </div>
                      </div>


                  </div>



              </div>


        </div>
    </div>
    <div class="mt-4 w-full flex justify-center px-4">
        <div class="lg:w-[80%] w-full flex flex-col ">
            <div>
              <span class="lg:text-2xl md:text-2xl text-lg text-primaryColor font-medium"
                    style="font-family:'Inter', sans-serif;">More from the  <a href="" class="underline">virtualsuperman</a> </span>
            </div>


            <div class="grid lg:grid-cols-4 md:grid-cols-2 grid-cols-1 gap-2 mt-4">
                <div class="blog-info transition-all duration-[0.3s] ease-in-out w-full mb-[24px] bg-white shadow-lg shadow-secondaryColor/20 rounded-[5px] hover:shadow-secondaryColor/60">
                    <figure class="blog-img w-full h-auto m-[0] relative overflow-hidden rounded-t-lg">
                        <div class=" h-8 w-8 flex justify-center items-center absolute top-2 right-2 rounded-full bg-white text-primaryColor hover:text-white hover:bg-primaryColor  transition ease-in duration-2000 shadow-lg shadow-secondaryColor">
                            <i class="fa fa-heart"></i>
                        </div>
                        <a href="{{route('job-detail')}}">
                            <img src="{{asset('assets/images/job1.jpg')}}" alt="news imag" class="transition-all duration-[0.3s] ease-in-out rounded-t-lg w-full h-full">
                        </a>
                    </figure>

                    <div class="detail px-2 border-[2px] border-t-[0px] border-primaryColor/30 rounded-b-lg" style="  box-shadow: 0px 0px 5px 1px rgba(141,27,27,0.48) inset;">
                        <div class="w-full flex justify-between">
                            <label class="mt-[20px] flex items-center gap-2 inline-block text-[13px] text-[#999]">
                                <img class="h-8 w-8 rounded-full" src="{{asset('assets/images/u1.jpg')}}" alt="">
                                <a href="#" class="text-black font-semibold text-[16px]">Michle</a>
                            </label>

                        </div>



                        <h3 class="mt-[10px] mb-[15px] ">
                            <a href="{{route('job-detail')}}" class="font-Poppins text-primaryColor hover:underline text-[18px] font-medium leading-[22px]">
                                I will do high quality SEO backlink link building off page service for google ranking
                            </a>
                        </h3>
                        <div class="w-full ">
                            <span class="font-semibold text-md"><i class="fa fa-star"></i> 4.9</span> <span class="font-normal text-sm">(478)</span>
                        </div>

                        <div class="more-info mb-4 rounded-b-lg">
                            <span class="font-semibold text-primaryColor text-lg">From ₹15,000</span>
                        </div>
                    </div>
                </div>
                <div class="blog-info transition-all duration-[0.3s] ease-in-out w-full mb-[24px] bg-white shadow-lg shadow-secondaryColor/20 rounded-[5px] hover:shadow-secondaryColor/60">
                    <figure class="blog-img w-full h-auto m-[0] relative overflow-hidden rounded-t-lg">
                        <div class=" h-8 w-8 flex justify-center items-center absolute top-2 right-2 rounded-full bg-white text-primaryColor hover:text-white hover:bg-primaryColor  transition ease-in duration-2000 shadow-lg shadow-secondaryColor">
                            <i class="fa fa-heart"></i>
                        </div>
                        <a href="{{route('job-detail')}}">
                            <img src="{{asset('assets/images/job2.jpg')}}" alt="news imag" class="transition-all duration-[0.3s] ease-in-out rounded-t-lg w-full h-full">
                        </a>
                    </figure>

                    <div class="detail px-2 border-[2px] border-t-[0px] border-primaryColor/30 rounded-b-lg" style="  box-shadow: 0px 0px 5px 1px rgba(141,27,27,0.48) inset;">
                        <div class="w-full flex justify-between">
                            <label class="mt-[20px] flex items-center gap-2 inline-block text-[13px] text-[#999]">
                                <img class="h-8 w-8 rounded-full" src="{{asset('assets/images/u1.jpg')}}" alt="">
                                <a href="#" class="text-black font-semibold text-[16px]">Michle</a>
                            </label>

                        </div>



                        <h3 class="mt-[10px] mb-[15px] ">
                            <a href="{{route('job-detail')}}" class="font-Poppins text-primaryColor hover:underline text-[18px] font-medium leading-[22px]">
                                I will do high quality SEO backlink link building off page service for google ranking
                            </a>
                        </h3>
                        <div class="w-full ">
                            <span class="font-semibold text-md"><i class="fa fa-star"></i> 4.9</span> <span class="font-normal text-sm">(478)</span>
                        </div>

                        <div class="more-info mb-4 rounded-b-lg">
                            <span class="font-semibold text-primaryColor text-lg">From ₹15,000</span>
                        </div>
                    </div>
                </div>
                <div class="blog-info transition-all duration-[0.3s] ease-in-out w-full mb-[24px] bg-white shadow-lg shadow-secondaryColor/20 rounded-[5px] hover:shadow-secondaryColor/60">
                    <figure class="blog-img w-full h-auto m-[0] relative overflow-hidden rounded-t-lg">
                        <div class=" h-8 w-8 flex justify-center items-center absolute top-2 right-2 rounded-full bg-white text-primaryColor hover:text-white hover:bg-primaryColor  transition ease-in duration-2000 shadow-lg shadow-secondaryColor">
                            <i class="fa fa-heart"></i>
                        </div>
                        <a href="{{route('job-detail')}}">
                            <img src="{{asset('assets/images/job1.jpg')}}" alt="news imag" class="transition-all duration-[0.3s] ease-in-out rounded-t-lg w-full h-full">
                        </a>
                    </figure>

                    <div class="detail px-2 border-[2px] border-t-[0px] border-primaryColor/30 rounded-b-lg" style="  box-shadow: 0px 0px 5px 1px rgba(141,27,27,0.48) inset;">
                        <div class="w-full flex justify-between">
                            <label class="mt-[20px] flex items-center gap-2 inline-block text-[13px] text-[#999]">
                                <img class="h-8 w-8 rounded-full" src="{{asset('assets/images/u1.jpg')}}" alt="">
                                <a href="#" class="text-black font-semibold text-[16px]">Michle</a>
                            </label>

                        </div>



                        <h3 class="mt-[10px] mb-[15px] ">
                            <a href="{{route('job-detail')}}" class="font-Poppins text-primaryColor hover:underline text-[18px] font-medium leading-[22px]">
                                I will do high quality SEO backlink link building off page service for google ranking
                            </a>
                        </h3>
                        <div class="w-full ">
                            <span class="font-semibold text-md"><i class="fa fa-star"></i> 4.9</span> <span class="font-normal text-sm">(478)</span>
                        </div>

                        <div class="more-info mb-4 rounded-b-lg">
                            <span class="font-semibold text-primaryColor text-lg">From ₹15,000</span>
                        </div>
                    </div>
                </div>
                <div class="blog-info transition-all duration-[0.3s] ease-in-out w-full mb-[24px] bg-white shadow-lg shadow-secondaryColor/20 rounded-[5px] hover:shadow-secondaryColor/60">
                    <figure class="blog-img w-full h-auto m-[0] relative overflow-hidden rounded-t-lg">
                        <div class=" h-8 w-8 flex justify-center items-center absolute top-2 right-2 rounded-full bg-white text-primaryColor hover:text-white hover:bg-primaryColor  transition ease-in duration-2000 shadow-lg shadow-secondaryColor">
                            <i class="fa fa-heart"></i>
                        </div>
                        <a href="{{route('job-detail')}}">
                            <img src="{{asset('assets/images/job2.jpg')}}" alt="news imag" class="transition-all duration-[0.3s] ease-in-out rounded-t-lg w-full h-full">
                        </a>
                    </figure>

                    <div class="detail px-2 border-[2px] border-t-[0px] border-primaryColor/30 rounded-b-lg" style="  box-shadow: 0px 0px 5px 1px rgba(141,27,27,0.48) inset;">
                        <div class="w-full flex justify-between">
                            <label class="mt-[20px] flex items-center gap-2 inline-block text-[13px] text-[#999]">
                                <img class="h-8 w-8 rounded-full" src="{{asset('assets/images/u1.jpg')}}" alt="">
                                <a href="#" class="text-black font-semibold text-[16px]">Michle</a>
                            </label>

                        </div>



                        <h3 class="mt-[10px] mb-[15px] ">
                            <a href="{{route('job-detail')}}" class="font-Poppins text-primaryColor hover:underline text-[18px] font-medium leading-[22px]">
                                I will do high quality SEO backlink link building off page service for google ranking
                            </a>
                        </h3>
                        <div class="w-full ">
                            <span class="font-semibold text-md"><i class="fa fa-star"></i> 4.9</span> <span class="font-normal text-sm">(478)</span>
                        </div>

                        <div class="more-info mb-4 rounded-b-lg">
                            <span class="font-semibold text-primaryColor text-lg">From ₹15,000</span>
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </div>

@endsection