@extends('layouts.app')

@section('title', 'Services - Kdot Web Tech')

@section('header-class', 'header-transparent has-border-bottom has-sticky-bg')

@section('content')

<!-- breadcrumb area start -->
<section class="rs-breadcrumb-area rs-breadcrumb-one p-relative">
    <div class="breadcrumb-bg-thumb" data-background="{{ asset('assets/images/bg/breadcrumb-bg-thumb-01.png') }}"></div>
    <div class="breadcrumb-btn">
        <div class="rs-rotate-btn">
            <a class="rs-circle-btn" href="#contact">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
                    <path d="M26.29,20.29,18,28.59V0H16V28.59L7.71,20.29,6.29,21.71l10,10a1,1,0,0,0,1.41,0l10-10Z"></path>
                </svg>
            </a>
            <div class="gsap-rotate rs-text-circle-wrapper">
                <div class="rs-text-circle is-text-white" data-rotate-degree="12.545">Leading Digital Agency 2001.</div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-xxl-8 col-xl-8 col-lg-9">
                <div class="breadcrumb-wrapper">
                    <div class="breadcrumb-title-wrapper">
                        <h1 class="breadcrumb-title">Let's work <br>
                            <span class="breadcrumb-text-wrap">
                                <span class="breadcrumb-more-btn">
                                    <a class="rs-btn has-icon hover-white" href="{{ route('home') }}">Back to home
                                        <span class="icon-box">
                                            <i class="fa-light fa-arrow-right-long icon-first"></i>
                                            <i class="fa-light fa-arrow-right-long icon-second"></i>
                                        </span>
                                    </a>
                                </span>
                                together
                            </span>
                        </h1>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- breadcrumb area end -->

<!-- text slider area start -->
<div class="rs-text-slide-area rs-text-slide-one">
    <div class="text-slide-wrapper">
        <div class="gsap-marquee right speed-20 move-to-1000">
            <div class="text-slide-inner">
                <div class="text-slide-item">
                    <h5 class="text-slide-title">Software Programming</h5>
                    <div class="text-slide-thumb">
                        <img src="{{ asset('assets/images/shape/multi-line-shape.png') }}" alt="image">
                    </div>
                </div>
                <div class="text-slide-item">
                    <h5 class="text-slide-title">UI/UX Design</h5>
                    <div class="text-slide-thumb">
                        <img src="{{ asset('assets/images/shape/multi-line-shape.png') }}" alt="image">
                    </div>
                </div>
                <div class="text-slide-item">
                    <h5 class="text-slide-title">Development Agency</h5>
                    <div class="text-slide-thumb">
                        <img src="{{ asset('assets/images/shape/multi-line-shape.png') }}" alt="image">
                    </div>
                </div>
                <div class="text-slide-item">
                    <h5 class="text-slide-title">Web Development</h5>
                    <div class="text-slide-thumb">
                        <img src="{{ asset('assets/images/shape/multi-line-shape.png') }}" alt="image">
                    </div>
                </div>
                <div class="text-slide-item">
                    <h5 class="text-slide-title">Innovative Ideas</h5>
                    <div class="text-slide-thumb">
                        <img src="{{ asset('assets/images/shape/multi-line-shape.png') }}" alt="image">
                    </div>
                </div>
                <div class="text-slide-item">
                    <h5 class="text-slide-title">Programming</h5>
                    <div class="text-slide-thumb">
                        <img src="{{ asset('assets/images/shape/multi-line-shape.png') }}" alt="image">
                    </div>
                </div>
                <div class="text-slide-item">
                    <h5 class="text-slide-title">App Development</h5>
                    <div class="text-slide-thumb">
                        <img src="{{ asset('assets/images/shape/multi-line-shape.png') }}" alt="image">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- text slider area end -->

<!-- services area start -->
<section class="rs-services-area section-space rs-services-one">
    <div class="container">
        <div class="row g-5">
            @forelse($services as $service)
            <div class="col-xl-4 col-lg-4 col-md-6">
                <div class="services-item has-bg-white wow fadeIn" data-wow-delay=".1s" data-wow-duration="1s">
                    <div class="services-icon">
                        <img src="{{ asset('assets/images/icon/icon-0' . ($loop->index + 1) . '.png') }}" alt="image">
                    </div>
                    <div class="services-content">
                        <h4 class="services-title underline"><a href="#">{{ $service->title }}</a></h4>
                        <div class="services-list">
                            <div class="rs-list-item is-list-block">
                                <ul>
                                    <li>
                                        <svg aria-hidden="true" class="e-font-icon-svg e-far-check-square" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M400 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zm0 400H48V80h352v352zm-35.864-241.724L191.547 361.48c-4.705 4.667-12.303 4.637-16.97-.068l-90.781-91.516c-4.667-4.705-4.637-12.303.069-16.971l22.719-22.536c4.705-4.667 12.303-4.637 16.97.069l59.792 60.277 141.352-140.216c4.705-4.667 12.303-4.637 16.97.068l22.536 22.718c4.667 4.706 4.637 12.304-.068 16.971z"></path>
                                        </svg>
                                        Premium Solutions
                                    </li>
                                    <li>
                                        <svg aria-hidden="true" class="e-font-icon-svg e-far-check-square" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M400 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zm0 400H48V80h352v352zm-35.864-241.724L191.547 361.48c-4.705 4.667-12.303 4.637-16.97-.068l-90.781-91.516c-4.667-4.705-4.637-12.303.069-16.971l22.719-22.536c4.705-4.667 12.303-4.637 16.97.069l59.792 60.277 141.352-140.216c4.705-4.667 12.303-4.637 16.97.068l22.536 22.718c4.667 4.706 4.637 12.304-.068 16.971z"></path>
                                        </svg>
                                        Expert Support
                                    </li>
                                    <li>
                                        <svg aria-hidden="true" class="e-font-icon-svg e-far-check-square" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M400 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zm0 400H48V80h352v352zm-35.864-241.724L191.547 361.48c-4.705 4.667-12.303 4.637-16.97-.068l-90.781-91.516c-4.667-4.705-4.637-12.303.069-16.971l22.719-22.536c4.705-4.667 12.303-4.637 16.97.069l59.792 60.277 141.352-140.216c4.705-4.667 12.303-4.637 16.97.068l22.536 22.718c4.667 4.706 4.637 12.304-.068 16.971z"></path>
                                        </svg>
                                        24/7 Availability
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @empty
            <p>No services available at this time.</p>
            @endforelse
        </div>
    </div>
</section>
<!-- services area end -->

<!-- video area start -->
<div class="rs-video-area rs-video-one has-theme-primary">
    <div class="video-bg-thumb" data-background="{{ asset('assets/images/bg/video-bg-thumb-02.png') }}">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-7 col-lg-8 col-md-10">
                    <div class="video-content">
                        <div class="video-play-btn">
                            <a href="{{ asset('assets/videos/showreel.mp4') }}" class="rs-play-btn popup-video is-large"><i class="fa-duotone fa-play"></i></a>
                        </div>
                        <div class="video-cta-wrapper">
                            <div class="video-cta-thumb">
                                <img src="{{ asset('assets/images/user/client-group.png') }}" alt="image">
                            </div>
                            <p class="video-cta-description">Trusted By 20,000+ Worldwide Brand & Customers</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- video area end -->

<!-- counter area start -->
<div class="rs-counter-area rs-counter-four has-bg-primary">
    <div class="container">
        <div class="row g-5">
            <div class="col-xl-12">
                <div class="counter-wrapper">
                    <div class="counter-item">
                        <div class="counter-number-wrapper">
                            <span class="counter-number odometer" data-count="50">00</span>
                            <span class="suffix">+</span>
                        </div>
                        <span class="counter-title">Projects<br>Completed</span>
                    </div>
                    <div class="counter-item">
                        <div class="counter-number-wrapper">
                            <span class="counter-number odometer" data-count="30">00</span>
                            <span class="suffix">+</span>
                        </div>
                        <span class="counter-title">Happy<br>Clients</span>
                    </div>
                    <div class="counter-item">
                        <div class="counter-number-wrapper">
                            <span class="counter-number odometer" data-count="25">00</span>
                            <span class="suffix">+</span>
                        </div>
                        <span class="counter-title">Expert<br>Team Members</span>
                    </div>
                    <div class="counter-item">
                        <div class="counter-number-wrapper">
                            <span class="counter-number odometer" data-count="10">00</span>
                            <span class="suffix">+</span>
                        </div>
                        <span class="counter-title">Years<br>Experience</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- counter area end -->

<!-- testimonial area start -->
<section class="rs-testimonial-area section-space-top rs-testimonial-one rs-swiper">
    <div class="container">
        <div class="row align-items-xxl-center g-5">
            <div class="col-xxl-6 col-xl-5 col-lg-6">
                <div class="testimonial-thumb rs-image scroll_reveal reveal-active" data-dir="reveal_left">
                    <img decoding="async" src="{{ asset('assets/images/testimonial/testimonial-thumb-01.png') }}" alt="image">
                </div>
            </div>
            <div class="col-xxl-6 col-xl-7 col-lg-6">
                <div class="testimonial-content-wrapper">
                    <div class="testimonial-sec-wrapper">
                        <div class="section-title-wrapper">
                            <h2 class="section-title rs-split-text-enable split-in-left is-large fw-6">What our clients and partners reviews</h2>
                        </div>
                    </div>
                    <div class="testimonial-slider-wrapper">
                        <div class="swiper" data-clone-slides="false" data-loop="true" data-speed="1500" data-autoplay="true" data-dots-dynamic="false" data-hover-pause="true" data-effect="false" data-delay="2000" data-item="1" data-item-xl="1" data-item-lg="1" data-item-md="1" data-item-sm="1" data-item-xs="1" data-item-mobile="1" data-margin="30" data-margin-xl="30">
                            <div class="swiper-wrapper">
                                @forelse($testimonials as $testimonial)
                                <div class="swiper-slide">
                                    <div class="testimonial-item">
                                        <div class="testimonial-icon">
                                            <svg xmlns="http://www.w3.org/2000/svg" fill="#000000" viewBox="0 -5 34 34">
                                                <path d="m31.2 0h-7.2l-4.8 9.6v14.4h14.4v-14.4h-7.2zm-19.2 0h-7.2l-4.8 9.6v14.4h14.4v-14.4h-7.2z"></path>
                                            </svg>
                                        </div>
                                        <div class="testimonial-content">
                                            <p class="testimonial-description">{{ $testimonial->description }}</p>
                                            <div class="testimonial-avater-wrapper">
                                                <div class="testimonial-avater-thumb">
                                                    <img src="{{ asset('assets/images/user/user-thumb-0' . ($loop->index + 1) . '.png') }}" alt="image">
                                                </div>
                                                <div class="testimonial-avater-info">
                                                    <h5 class="testimonial-avater-title">{{ $testimonial->client_name }}</h5>
                                                    <span class="testimonial-avater-designation">{{ $testimonial->client_title }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @empty
                                @endforelse
                            </div>
                            <!-- if we need navigation -->
                            <div class="testimonial-navigation rs-swiper-btn-wrapper">
                                <div class="rs-swiper-btn swiper-button-prev has-radius-small"><i class="fa-solid fa-arrow-left"></i></div>
                                <div class="rs-swiper-btn swiper-button-next has-radius-small"><i class="fa-solid fa-arrow-right"></i></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- testimonial area end -->

<!-- cta area start -->
<section class="rs-cta-area section-space rs-cta-one">
    <div class="container">
        <div class="row">
            <div class="col-xl-12">
                <div class="cta-wrapper">
                    <h2 class="section-title rs-split-text-enable split-in-left is-large fw-6">Let's talk about a project, collaboration or an idea you may have</h2>
                    <div class="cta-btn">
                        <div class="rs-rotate-btn">
                            <a class="rs-circle-btn" href="#contact">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
                                    <path d="M31,0H15V2H28.59L.29,30.29l1.41,1.41L30,3.41V16h2V1A1,1,0,0,0,31,0Z"></path>
                                </svg>
                            </a>
                            <div class=" gsap-rotate rs-text-circle-wrapper">
                                <div class="rs-text-circle" data-rotate-degree="12.545">Leading Digital Agency 2001. </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- cta area end -->

<!-- contact area start -->
<section class="rs-contact-area rs-contact-one" id="contact">
    <div class="contact-bg-thumb" data-background="{{ asset('assets/images/bg/contact-bg-thumb-01.png') }}">
        <div class="contact-video-play-btn">
            <a href="{{ asset('assets/videos/showreel.mp4') }}" class="rs-play-btn popup-video is-large"><i class="fa-duotone fa-play"></i></a>
        </div>
    </div>
    <div class="container">
        <div class="row g-5">
            <div class="col-xl-6 col-lg-6 order-1 order-lg-0">
                <div class="contact-form">
                    <h3 class="contact-form-title">Contact form</h3>
                    <form id="contact-form" method="POST" action="{{ route('home') }}">
                        @csrf
                        <div class="row g-5">
                            <div class="col-md-12">
                                <div class="contact-input">
                                    <input id="name" name="name" type="text" placeholder="Full Name" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="contact-input">
                                    <input id="email" name="email" type="email" placeholder="Email Address" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="contact-input">
                                    <input id="phone" name="phone" type="tel" placeholder="Phone">
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="contact-input">
                                    <textarea id="message" name="message" placeholder="Write Your Message" required></textarea>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="contact-btn">
                                    <button type="submit" class="rs-btn hover-white">Submit Now</button>
                                </div>
                            </div>
                        </div>
                    </form>
                    <div id="form-messages"></div>
                </div>
            </div>
            <div class="col-xl-6 col-lg-6 order-0 order-lg-1">
                <div class="contact-social">
                    <a href="#"> Dribbble </a>
                    <a href="#"> Behance </a>
                    <a href="#"> Linkedin </a>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- contact area end -->

@endsection