@extends('layouts.layout')

@section('content')

    <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 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 class="w-full">
                    <div class="w-full p-4 flex flex-col">
                        <div class=" flex flex-col gap-2  border-[1px] border-primaryColor/30">
                            <div class="flex flex-col bg-black/5 gap-2 p-4">
                                <div class=" flex gap-2">
                                    <img style="height: 70px; width: 170px; border-radius: 5px" src="{{asset('assets/images/job2.jpg')}}" alt="">
                                    <span class="font-semibold text-md text-black/80">
                                            I will boost your rankings with tier1 dofollow SEO backlinks
                                        </span>

                                </div>
                                <div class="flex gap-4 mt-3">

                                    <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>
                        </div>
                        <div class=" flex flex-col gap-2  border-[1px] border-primaryColor/30">
                            <div class="flex flex-col gap-2 p-4">
                                <div class="flex flex-col mt-3">
                                    <span class="font-medium text-lg text-black/60">Enter Promo Code</span>
                                    <input class="w-full rounded-md border-[1px] border-primaryColor/30 p-2 focus:outline-none  focus:border-primaryColor/50" type="text" placeholder="Promo Code Goes Here">
                                    <div class="w-full flex justify-end">

                                    </div>
                                </div>

                            </div>
                        </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