@extends('layouts.layout')

@section('content')
    <div class="mt-24 w-full lg:h-[70vh] md:h-[60vh] h-[55vh] bg-primaryColor flex justify-center "
         style="background-image: url({{asset('assets/images/bannerImage.png')}})">
        <div class="lg:w-[80%] w-full h-full  grid lg:grid-cols-2 md:grid-cols-2 grid-cols-1 gap-2">
            <div class="w-full h-full  p-8 flex flex-col gap-3  justify-center">
                <div class="flex">
                    <p class="lg:text-[43px] md:text-[38px] sm:text-[40px] text-[30px] text-white animate-fadeInUp">
                        Thrive in the <span class="text-secondaryColor underline">World of Freelance</span> Excellence
                        Marketplace!</p>
                </div>
                <div class="w-full flex">
                    <p class="lg:text-lg md:text-md text-sm text-white" style="font-family: 'Inter', Sans-serif;">
                        Flourish in a thriving freelance ecosystem dedicated to excellence and limitless opportunities.</p>
                </div>
                <div class="w-full flex animate-fadeInRight mt-4">
                    <form action="" class="w-full flex relative">
                        <input type="text" placeholder="Search....."
                               class="flex-1 w-full px-4 py-4 border-[1px] border-secondaryColor border-r-[0px] rounded-full focus:outline-none focus:border-[1px] focus:border-primaryColor text-otherTextColor">
                        <button
                            class="absolute top-[50%] translate-y-[-50%]  right-1 w-max rounded-full py-3 px-4 border-[1px] border-primaryColor font-bold bg-primaryColor text-white hover:bg-white hover:text-primaryColor transition ease-in duration-2000">
                            <i class="fa fa-search"></i>
                        </button>
                    </form>
                </div>


            </div>
            <div class="w-full lg:flex md:flex hidden relative">
                <img class="h-[37vh] w-auto rounded-lg absolute right-8 top-8" src="{{asset('assets/images/banner.jpg')}}"
                     alt="">
                <img class="h-[32vh] w-auto rounded-lg absolute left-8 bottom-8"
                     src="{{asset('assets/images/Architecture.jpg')}}" alt="">
            </div>
        </div>
    </div>



    <div id="Category-list" class="w-full px-4  hidden justify-center bg-[white] z-40 border-b-[2px] border-primaryColor fixed top-28 ">
    <x-category-list/>
    </div>



    <div class="w-full flex justify-center py-4">
        <div class="lg:w-[80%] w-full flex flex-col p-8">
            <div class=" section-title flex justify-between items-center mb-5">
                <div>
              <span class="lg:text-4xl md:text-3xl sm:text-2xl text-2xl text-primaryColor font-medium"
                    style="font-family:'Inter', sans-serif;">Categories</span>
                </div>
                <button
                    class="font-bold text-white bg-primaryColor border-[1px] border-primaryColor hover:text-primaryColor hover:bg-white/90 px-4 py-2 rounded-full transition ease-in duration-2000"
                    style="font: 600 15px / 25px 'Inter', sans-serif;">
                    View All
                </button>
            </div>
            <div class="section-content">
                <div class="categories-section-wrapper w-full">
                    <div class="container-x mx-auto">
                        <div class="w-full categories-iems">
                            <div class="grid xl:grid-cols-8 sm:grid-cols-4 grid-cols-2 gap-10 py-10">
                                                                @foreach($categories as $category)
                                    <div class="item w-full group cursor-pointer">
                                        <div class="w-full flex justify-center">
                                            <div
                                                class="w-[110px] h-[110px] rounded-full bg-white group-hover:bg-primaryColor shadow-lg shdow-primaryColor/30 border-[1px] border-primaryColor/30 transition ease-in duration-2000 mb-2.5 flex justify-center items-center">
                                        <span
                                            class="text-primaryColor group-hover:text-white transition ease-in duration-2000 ">
                                             <i class="{{$category['icon']}} text-3xl"></i>
                                        </span>
                                            </div>
                                        </div>
                                        <div class="w-full flex justify-center">
                                            <p class="text-base text-primaryColor whitespace-wrap text-center ">
                                                {{$category['title']}}
                                            </p>
                                        </div>
                                    </div>

                                @endforeach


                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="w-full flex justify-center py-4">
        <div class="lg:w-[80%] w-full flex flex-col p-8">
            <div class="flex flex-wrap mx-[-12px]">
                <div
                    class="xl:w-5/12 lg:w-6/12 w-full flex-[0_0_auto] px-[12px] max-w-full !ml-auto xl:order-last lg:order-last">
                    <div class="block-style-one md:mb-[60px] sm:mb-[60px] xsm:mb-[60px]  wow fadeInRight"
                         style="visibility: visible; animation-name: fadeInRight;">
                        <div class="title-style-one">
                            <h2 class="main-title font-bold text-primaryColor lg:text-6xl md:text-5xl sm:text-3xl text-4xl">We working with <span
                                    class=" inline-block relative z-[1] before:content-[''] before:absolute before:w-[98%] before:h-3 before:z-[-1] before:left-1 before:bottom-2.5 before:bg-[rgba(255,139,37,0.4)]">knowledge,</span><br>
                                skills all of heart &amp; soul.</h2>
                        </div> <!-- /.title-style-one -->
                        <p class=" text-[24px] 2xl:text-[22px] lg:text-[19px] md:text-[19px] sm:text-[13px]  leading-8  mt-4">
                            Auis nostrud exercitation ullamco labors nis slit alquip Duis aute irure dolor in reprehen erio
                            isu voluptate velit sed.</p>

                    </div> <!-- /.block-style-one -->
                </div>
                <div
                    class="xl:w-6/12 lg:w-5/12  md:w-8/12  sm:w-10/12 w-full flex-[0_0_auto] px-[12px] max-w-full xl:order-first lg:order-first wow fadeInLeft"
                    style="visibility: visible; animation-name: fadeInLeft;">
                    <div class="img-meta-two inline-block relative  pb-[50px] ">
                        <img src="{{asset('assets/images/banner.jpg')}}" alt="" class="lazy-img rounded-[30px]" style="">
                        <img src="images/shape/shape_15.svg" alt=""
                             class="lazy-img shapes shape-one absolute z-[-1] top-[-14%] animate-[jumpThree_3.5s_infinite_linear] left-[42%]"
                             style="">

                        <div
                            class="card-one wow fadeInUp absolute w-[285px] shadow-[0px_30px_60px_rgba(14,36,58,0.06)] right-[-20%] p-[25px_15px_25px_45px] rounded-[10px] bottom-0 bg-white lg:w-[240px] lg:p-[20px_10px_20px_30px] md:w-[240px] md:p-[20px_10px_20px_30px] sm:w-[240px] sm:p-[20px_10px_20px_30px] xsm:w-[240px] xsm:p-[20px_10px_20px_30px] xsm:right-0"
                            data-wow-delay="0.25s"
                            style="visibility: visible; animation-delay: 0.25s; animation-name: fadeInUp;">
                            <div
                                class="icon flex items-center justify-center rounded-[50%] absolute w-[60px] h-[60px] shadow-[0px_10px_20px_rgba(255,96,55,0.320437)] z-[1] top-[-30px] left-[-30px] bg-primaryColor">
                                <i class="fa fa-headphones text-white text-3xl"></i>
                            </div>
                            <h5 class="font-medium !m-0 text-[22px] lg:text-[20px] md:text-[20px] sm:text-[20px] xsm:text-[20px] text-secondaryColor">
                                Expert talkign with cusomter.</h5>
                        </div> <!-- /.card-one -->
                    </div> <!-- /.img-meta-two -->
                </div>
            </div>
        </div> <!-- /.container -->
    </div>
    <div class="w-full flex justify-center py-4">
        <div class="lg:w-[80%] w-full flex flex-col p-8">

            <div class=" section-title flex justify-between items-center mb-5">
                <div>
              <span class="lg:text-4xl md:text-3xl sm:text-2xl text-2xl text-primaryColor font-medium"
                    style="font-family:'Inter', sans-serif;">Popular Services</span>
                </div>
                <button
                    class="font-bold text-white bg-primaryColor border-[1px] border-primaryColor hover:text-primaryColor hover:bg-white/90 px-4 py-2 rounded-full transition ease-in duration-2000"
                    style="font: 600 15px / 25px 'Inter', sans-serif;">
                    View All
                </button>
            </div>

            

            <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-[60px]">
                    @foreach($popularServices as $service)
                        <article class="relative isolate flex flex-col justify-end overflow-hidden rounded-2xl px-8 pb-8 pt-40 mt-4">
                            <img src="{{asset('assets/images/'.$service['image'])}}"
                                 class="absolute inset-0 object-cover w-full h-full rounded-2xl"
                                 alt="">
                            <div class="absolute inset-0 bg-gradient-to-t from-black to black/80"></div>
                            <h3 class="z-10 mt-3 text-3xl font-bold text-white">
                                {{$service['title']}}
                            </h3>
                            <div class="z-10 gap-y-1 overflow-hidden text-sm leading-6 text-secondaryColor">
                                Popular
                            </div>
                        </article>





                    @endforeach
                </div>
            </div>




        </div>
    </div>
    <div class="w-full flex justify-center bg-cover bg-center relative"
         style="background-image: url({{asset('assets/images/banner1.jpeg')}}); background-repeat: no-repeat">

        <div class="lg:w-[80%] w-full flex flex-col p-8">
            <div class="container">
                <div class="flex justify-between text-center lg:text-start">
                    <div class="">
                        <h2 class="lg:text-4xl md:text-3xl sm:text-2xl text-2xl text-white font-semibold">
                            A whole world of freelance
                        </h2>
                        <h2 class="lg:text-4xl md:text-3xl sm:text-2xl text-2xl text-white font-semibold">
                            talent at your fingertips
                        </h2>
                    </div>

                </div>
                <div class="key-feature-grid mt-10 grid grid-cols-1 gap-7 md:grid-cols-3 xl:grid-cols-4">

                                        @foreach($list as $item)
                        <div class="flex flex-col justify-between rounded-lg bg-white p-5 shadow-lg shadow-primaryColor/20">
                            <div>
                                <i class="{{$item['icon']}} text-xl lg:text-2xl font-semibold text-primaryColor"></i>

                                <h3 class="h4 text-xl lg:text-2xl font-semibold text-otherColor mt-2">{{$item['title']}}</h3>
                                <p class="text-secondaryColor mt-4">{{$item['description']}}</p>
                            </div>
                            </span>
                        </div>
                    @endforeach


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

    </div>
    <div class="w-full flex justify-center py-4">
        <div class="lg:w-[80%] w-full flex flex-col p-8">

            <div class=" section-title flex justify-center items-center mb-5">
                <div>
              <span class="lg:text-4xl md:text-3xl sm:text-2xl text-2xl text-primaryColor font-medium"
                    style="font-family:'Inter', sans-serif;">What they're saying about Brass and Wood</span>
                </div>

            </div>

            <div class="flex justify-center relative mt-16">
                <div class="relative lg:w-1/3 md:w-1/2 w-full">
                    <div class="swiffy-slider slider-nav-autoplay">
                        <ul class="slider-container">
                            <li>
                                <div class="tiny-slide tns-item" id="tns1-item0" aria-hidden="true" tabindex="-1">
                                    <div class="text-center">
                                        <p class="text-xl text-secondaryColor italic"> " Hously made the processes so easy.
                                            Hously instantly increased the amount of interest and ultimately saved us over
                                            $10,000. " </p>

                                        <div class="text-center mt-5">

                                            <img src="{{asset('assets/images/u1.jpg')}}"
                                                 class="size-14 rounded-full shadow-md dark:shadow-gray-700 mx-auto" alt="">
                                            <h6 class="mt-2 font-semibold text-primaryColor">Christa Smith</h6>
                                            <span class="text-slate-400 text-sm text-primaryColor/50">Manager</span>
                                        </div>
                                    </div>
                                </div>

                            </li>
                            <li>
                                <div class="tiny-slide tns-item" id="tns1-item0" aria-hidden="true" tabindex="-1">
                                    <div class="text-center">
                                        <p class="text-xl text-secondaryColor italic"> " Hously made the processes so easy.
                                            Hously instantly increased the amount of interest and ultimately saved us over
                                            $10,000. " </p>

                                        <div class="text-center mt-5">

                                            <img src="{{asset('assets/images/u1.jpg')}}"
                                                 class="size-14 rounded-full shadow-md dark:shadow-gray-700 mx-auto" alt="">
                                            <h6 class="mt-2 font-semibold text-primaryColor">Christa Smith</h6>
                                            <span class="text-slate-400 text-sm text-primaryColor/50">Manager</span>
                                        </div>
                                    </div>
                                </div>

                            </li>
                            <li>
                                <div class="tiny-slide tns-item" id="tns1-item0" aria-hidden="true" tabindex="-1">
                                    <div class="text-center">
                                        <p class="text-xl text-secondaryColor italic"> " Hously made the processes so easy.
                                            Hously instantly increased the amount of interest and ultimately saved us over
                                            $10,000. " </p>

                                        <div class="text-center mt-5">

                                            <img src="{{asset('assets/images/u1.jpg')}}"
                                                 class="size-14 rounded-full shadow-md dark:shadow-gray-700 mx-auto" alt="">
                                            <h6 class="mt-2 font-semibold text-primaryColor">Christa Smith</h6>
                                            <span class="text-slate-400 text-sm text-primaryColor/50">Manager</span>
                                        </div>
                                    </div>
                                </div>

                            </li>
                            <li>
                                <div class="tiny-slide tns-item" id="tns1-item0" aria-hidden="true" tabindex="-1">
                                    <div class="text-center">
                                        <p class="text-xl text-secondaryColor italic"> " Hously made the processes so easy.
                                            Hously instantly increased the amount of interest and ultimately saved us over
                                            $10,000. " </p>

                                        <div class="text-center mt-5">

                                            <img src="{{asset('assets/images/u1.jpg')}}"
                                                 class="size-14 rounded-full shadow-md dark:shadow-gray-700 mx-auto" alt="">
                                            <h6 class="mt-2 font-semibold text-primaryColor">Christa Smith</h6>
                                            <span class="text-slate-400 text-sm text-primaryColor/50">Manager</span>
                                        </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><!--end grid-->
        </div><!--end grid-->


    </div>
    <div class="w-full flex justify-center py-4">
        <div class="lg:w-[80%] w-full flex flex-col p-8">
            <div class=" section-title flex justify-between items-center mb-5">
                <div><h1 class="sm:text-3xl text-xl font-600 text-qblacktext"></h1></div>
            </div>
            <div class="grid lg:grid-cols-6 sm:grid-cols-4 grid-cols-2">
                <div class="item">
                    <div class="w-full h-[130px] bg-white border border-primaryColor/50 flex justify-center items-center">
                        <img
                            src="/assets/images/brand-1.png" alt="logo"></div>
                </div>
                <div class="item">
                    <div class="w-full h-[130px] bg-white border border-primaryColor/50 flex justify-center items-center">
                        <img
                            src="/assets/images/brand-2.png" alt="logo"></div>
                </div>
                <div class="item">
                    <div class="w-full h-[130px] bg-white border border-primaryColor/50 flex justify-center items-center">
                        <img
                            src="/assets/images/brand-3.png" alt="logo"></div>
                </div>
                <div class="item">
                    <div class="w-full h-[130px] bg-white border border-primaryColor/50 flex justify-center items-center">
                        <img
                            src="/assets/images/brand-4.png" alt="logo"></div>
                </div>
                <div class="item">
                    <div class="w-full h-[130px] bg-white border border-primaryColor/50 flex justify-center items-center">
                        <img
                            src="/assets/images/brand-5.png" alt="logo"></div>
                </div>
                <div class="item">
                    <div class="w-full h-[130px] bg-white border border-primaryColor/50 flex justify-center items-center">
                        <img
                            src="/assets/images/brand-6.png" alt="logo"></div>
                </div>
                <div class="item">
                    <div class="w-full h-[130px] bg-white border border-primaryColor/50 flex justify-center items-center">
                        <img
                            src="/assets/images/brand-7.png" alt="logo"></div>
                </div>
                <div class="item">
                    <div class="w-full h-[130px] bg-white border border-primaryColor/50 flex justify-center items-center">
                        <img
                            src="/assets/images/brand-8.png" alt="logo"></div>
                </div>
                <div class="item">
                    <div class="w-full h-[130px] bg-white border border-primaryColor/50 flex justify-center items-center">
                        <img
                            src="/assets/images/brand-9.png" alt="logo"></div>
                </div>
                <div class="item">
                    <div class="w-full h-[130px] bg-white border border-primaryColor/50 flex justify-center items-center">
                        <img
                            src="/assets/images/brand-10.png" alt="logo"></div>
                </div>
                <div class="item">
                    <div class="w-full h-[130px] bg-white border border-primaryColor/50 flex justify-center items-center">
                        <img
                            src="/assets/images/brand-11.png" alt="logo"></div>
                </div>
                <div class="item">
                    <div class="w-full h-[130px] bg-white border border-primaryColor/50 flex justify-center items-center">
                        <img
                            src="/assets/images/brand-12.png" alt="logo"></div>
                </div>
            </div>
        </div>
    </div>
@endsection