@extends('base')

@section('title','Service')

@section('content')

<br><br><br><br>
        <!-- Page Banner Start -->
        <section class="page-banner bgs-cover text-white pt-65 pb-75" style="background-image: url(assets/images/kempro/banner_services.jpg);">
            <div class="container">
                <div class="banner-inner">
                    <h2 class="page-title wow fadeInUp delay-0-2s">Services</h2>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb wow fadeInUp delay-0-4s">
                            <li class="breadcrumb-item"><a href="{{route('accueil.index')}}">Accueil</a></li>
                            <li class="breadcrumb-item active">Services</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </section>
        <!-- Page Banner End -->


        <!-- Services Area start -->
        <section class="services-area-two pt-120 pb-100">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-xl-7 col-lg-8">
                        <div class="section-title text-center mb-55 wow fadeInUp delay-0-2s">
                            <span class="sub-title mb-10">Derniers Services</span>
                            <h2>Nous Fournissons un Service Incroyable Pour l'Impression et le Design</h2>
                        </div>
                    </div>
                </div>
                <div class="row justify-content-center">
                    <div class="col-lg-6">
                        <div class="service-item-two wow fadeInUp delay-0-2s">
                            <div class="icon">
                               <i class="flaticon-print"></i>
                            </div>
                            <div class="content">
                                <h3><a href="service-details.html">Services d'Impression Numérique</a></h3>
                                <p>Sed ut perspiciatis unde omnis iste natus error voluptatem accusantium doloremque</p>
                                <a href="service-details.html" class="read-more">En savoir plus <i class="far fa-long-arrow-right"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="service-item-two wow fadeInUp delay-0-4s">
                            <div class="icon">
                               <i class="flaticon-3d-printer"></i>
                            </div>
                            <div class="content">
                                <h3><a href="service-details.html">Services d'Impression 3D</a></h3>
                                <p>Sed ut perspiciatis unde omnis iste natus error voluptatem accusantium doloremque</p>
                                <a href="service-details.html" class="read-more">En savoir plus <i class="far fa-long-arrow-right"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="service-item-two wow fadeInUp delay-0-2s">
                            <div class="icon">
                               <i class="flaticon-print-1"></i>
                            </div>
                            <div class="content">
                                <h3><a href="service-details.html">Services d'Impression Offset</a></h3>
                                <p>Sed ut perspiciatis unde omnis iste natus error voluptatem accusantium doloremque</p>
                                <a href="service-details.html" class="read-more">En savoir plus <i class="far fa-long-arrow-right"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="service-item-two wow fadeInUp delay-0-4s">
                            <div class="icon">
                               <i class="flaticon-focus"></i>
                            </div>
                            <div class="content">
                                <h3><a href="service-details.html">Conception & Impression</a></h3>
                                <p>Sed ut perspiciatis unde omnis iste natus error voluptatem accusantium doloremque</p>
                                <a href="service-details.html" class="read-more">En savoir plus <i class="far fa-long-arrow-right"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="service-item-two wow fadeInUp delay-0-2s">
                            <div class="icon">
                               <i class="flaticon-curve"></i>
                            </div>
                            <div class="content">
                                <h3><a href="service-details.html">Services d'Impression Couleur</a></h3>
                                <p>Sed ut perspiciatis unde omnis iste natus error voluptatem accusantium doloremque</p>
                                <a href="service-details.html" class="read-more">En savoir plus <i class="far fa-long-arrow-right"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="service-item-two wow fadeInUp delay-0-4s">
                            <div class="icon">
                               <i class="flaticon-merchandising"></i>
                            </div>
                            <div class="content">
                                <h3><a href="service-details.html">Services d'Impression 3D</a></h3>
                                <p>Sed ut perspiciatis unde omnis iste natus error voluptatem accusantium doloremque</p>
                                <a href="service-details.html" class="read-more">En savoir plus <i class="far fa-long-arrow-right"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Services Area end -->


        <!-- FAQ Area start -->
        <div class="faq-counter-area bgc-lighter mt-220 pb-130 rel z-1">
            <div class="container container-1350 mb-100">
                <div class="faq-counter text-white bgc-black">
                    <div class="row">
                        <div class="col-xl-3 col-md-6">
                            <div class="counter-item style-two wow fadeInUp delay-0-2s">
                                <div class="icon">
                                    <i class="far fa-plus"></i>
                                </div>
                                <p>Utilisateur actif sur le produit que nous avons créé</p>
                                <span class="count-text k-plus" data-speed="3000" data-stop="58">0</span>
                            </div>
                        </div>
                        <div class="col-xl-3 col-md-6">
                            <div class="counter-item style-two wow fadeInUp delay-0-4s">
                                <div class="icon">
                                    <i class="far fa-plus"></i>
                                </div>
                                <p>Nous avons réalisé de nombreux projets d'impression</p>
                                <span class="count-text plus" data-speed="3000" data-stop="3654">0</span>
                            </div>
                        </div>
                        <div class="col-xl-3 col-md-6">
                            <div class="counter-item style-two wow fadeInUp delay-0-6s">
                                <div class="icon">
                                    <i class="far fa-plus"></i>
                                </div>
                                <p>Projets que nous avons réalisés en chemin</p>
                                <span class="count-text plus" data-speed="3000" data-stop="8630">0</span>
                            </div>
                        </div>
                        <div class="col-xl-3 col-md-6">
                            <div class="counter-item style-two wow fadeInUp delay-0-8s">
                                <div class="icon">
                                    <i class="far fa-plus"></i>
                                </div>
                                <p>Nous avons de nombreuses années d'expérience</p>
                                <span class="count-text plus" data-speed="3000" data-stop="24">0</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {{-- <div class="container">
                <div class="row large-gap align-items-center">
                    <div class="col-lg-6">
                        <div class="faq-content rmb-65 wow fadeInUp delay-0-2s">
                            <div class="section-title mb-35">
                                <span class="sub-title mb-15">Avez-vous des questions ?</span>
                                <h2>Questions fréquemment posées</h2>
                            </div>
                            <div class="accordion" id="faq-accordion">
                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseOne">
                                            Quels services obtenez-vous ?
                                        </button>
                                    </h2>
                                    <div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#faq-accordion">
                                        <div class="accordion-body">
                                            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam aperiam eaquey quae abillo inventore</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseTwo">
                                            Pourquoi venir chez notre Printco ?
                                        </button>
                                    </h2>
                                    <div id="collapseTwo" class="accordion-collapse collapse show" data-bs-parent="#faq-accordion">
                                        <div class="accordion-body">
                                            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam aperiam eaquey quae abillo inventore</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThree">
                                            Combien coûtent nos services ?
                                        </button>
                                    </h2>
                                    <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#faq-accordion">
                                        <div class="accordion-body">
                                            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam aperiam eaquey quae abillo inventore</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseFour">
                                            Apprenez à connaître les membres de notre équipe ?
                                        </button>
                                    </h2>
                                    <div id="collapseFour" class="accordion-collapse collapse" data-bs-parent="#faq-accordion">
                                        <div class="accordion-body">
                                            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam aperiam eaquey quae abillo inventore</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="faq-image wow fadeInUp delay-0-4s">
                            <img src="assets/images/faq/faq-image.png" alt="FAQ">
                        </div>
                    </div>
                </div>
            </div> --}}
        </div>
        <!-- FAQ Area end -->


        <!-- Pricing Plan start -->
        <section class="pricing-plan-area pt-120 pb-100">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-xl-7 col-lg-8">
                        <div class="section-title text-center mb-55 wow fadeInUp delay-0-2s">
                            <span class="sub-title mb-10">Forfait de tarification</span>
                            <h2>Forfait de tarification d'impression intelligente</h2>
                        </div>
                    </div>
                </div>
                <div class="row justify-content-center">
                    <div class="col-xl-4 col-md-6">
                        <div class="pricing-plan-item wow fadeInUp delay-0-2s">
                            <h4 class="title">Plan régulier</h4>
                            <div class="image">
                                <img src="assets/images/pricing/pricing-plan-1.png" alt="Tarification">
                            </div>
                            <ul>
                                <li>Conception & Impression <i class="fas fa-check"></i></li>
                                <li>Impression 3D <i class="fas fa-check"></i></li>
                                <li>Impression offset <i class="fas fa-check"></i></li>
                                <li class="unavailable">Impression couleur <i class="fas fa-check"></i></li>
                                <li class="unavailable">Logo & T-Shirt <i class="fas fa-check"></i></li>
                            </ul>
                            <span class="price">258.53</span>
                            <a href="contact.html" class="theme-btn style-three">Choisir le forfait <i class="far fa-long-arrow-right"></i></a>
                        </div>
                    </div>
                    <div class="col-xl-4 col-md-6">
                        <div class="pricing-plan-item wow fadeInUp delay-0-4s">
                            <h4 class="title">Plan standard</h4>
                            <div class="image">
                                <img src="assets/images/pricing/pricing-plan-2.png" alt="Tarification">
                            </div>
                            <ul>
                                <li>Conception & Impression <i class="fas fa-check"></i></li>
                                <li>Impression 3D <i class="fas fa-check"></i></li>
                                <li>Impression offset <i class="fas fa-check"></i></li>
                                <li>Impression couleur <i class="fas fa-check"></i></li>
                                <li class="unavailable">Logo & T-Shirt <i class="fas fa-check"></i></li>
                            </ul>
                            <span class="price">583.53</span>
                            <a href="contact.html" class="theme-btn style-three">Choisir le forfait <i class="far fa-long-arrow-right"></i></a>
                        </div>
                    </div>
                    <div class="col-xl-4 col-md-6">
                        <div class="pricing-plan-item wow fadeInUp delay-0-6s">
                            <h4 class="title">Plan argent</h4>
                            <div class="image">
                                <img src="assets/images/pricing/pricing-plan-3.png" alt="Tarification">
                            </div>
                            <ul>
                                <li>Conception & Impression <i class="fas fa-check"></i></li>
                                <li>Impression 3D <i class="fas fa-check"></i></li>
                                <li>Impression offset <i class="fas fa-check"></i></li>
                                <li>Impression couleur <i class="fas fa-check"></i></li>
                                <li>Logo & T-Shirt <i class="fas fa-check"></i></li>
                            </ul>
                            <span class="price">858.53</span>
                            <a href="contact.html" class="theme-btn style-three">Choisir le forfait <i class="far fa-long-arrow-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        </section>
        <!-- Pricing Plan end -->


        <!-- CTA Area start -->
        <section class="cta-area bgc-gradient">
            <div class="row">
                <div class="col-xl-4">
                    <div class="cta-left-image rel z-1 wow fadeInLeft delay-0-4s">
                        <img src="assets/images/cta/cta-left.png" alt="CTA Left">
                        <div class="circle-shapes white-shape no-animation">
                            <div class="shape-inner">
                                <span class="dot-one"></span>
                                <span class="dot-two"></span>
                                <span class="dot-three"></span>
                                <span class="dot-four"></span>
                                <span class="dot-five"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 align-self-center">
                    <div class="cta-content text-white py-55 wow fadeInUp delay-0-2s">
                        <div class="section-title mb-35">
                            <span class="sub-title mb-10">Contactez-nous</span>
                            <h2>Besoin d'une impression pour votre entreprise ?</h2>
                        </div>
                        <a href="projects.html" class="theme-btn">Commencez vos projets <i class="far fa-long-arrow-right"></i></a>
                    </div>
                </div>
                <div class="col-xl-4">
                    <div class="cta-right-image rel z-1 wow fadeInRight delay-0-2s">
                        <img src="assets/images/cta/cta-right.png" alt="CTA Right">
                        <div class="circle-shapes white-shape no-animation">
                            <div class="shape-inner">
                                <span class="dot-one"></span>
                                <span class="dot-two"></span>
                                <span class="dot-three"></span>
                                <span class="dot-four"></span>
                                <span class="dot-five"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- CTA Area end -->

        @endsection