@extends('layouts.master_pages', ['title' => 'Services'])
@section('intro_services')
<!-- Intro Section -->
<div class="view jarallax" data-jarallax data-speed="0.2" style="background-image: url('{{ asset('img/site/ampoule-idees-creativite.png') }}'); background-repeat: no-repeat; background-size: cover; background-position: center center;">
	<div class="mask">
		<div class="container h-100 d-flex justify-content-center align-items-center">
			<div class="row pt-5 mt-3">
				<div class="col-md-12 mb-3">
					<div class="intro-info-content text-center">
						<!-- Carte avec fond transparent -->
						<div class="card rgba-black-light">
							<div class="card-body">
								<h1 class="text-white">Libérez-vous des Contraintes</h1>
                                <h3 class="text-white"><span class="pure-font">PURE</span> s'occupe de tout, pour vous.</h3>
							</div>
						</div>
						<!-- Fin de la carte -->
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
@endsection
@section('content_services')
<br>
<br>
<section>
    <div class="container h-100 d-flex justify-content">
        <!-- Section: Services -->
        <section class="my-5 wow fadeIn" data-wow-delay="0.3s">
            <!-- Section heading -->
            <h2 class="h1-responsive font-weight-bold text-center my-5">Nos services</h2>
            <!-- Section description -->
            <p class="text-center w-responsive mx-auto mb-5 grey-text">Chez <span class="pure-color pure-font">PURE</span>, nous offrons une gamme complète de services de nettoyage et des prestations associées pour répondre aux besoins spécifiques de chaque client. Découvrez nos offres diversifiées et adaptées à tous les environnements professionnels.</p>

            <div class="container">
                <div class="row row-cols-1 row-cols-md-3 g-4 mb-4">
                    <!-- Première carte -->
                    <div class="col p-2 d-flex align-items-center">
                        <div class="card">
                            <!-- Image de la carte avec masque -->
                            <div class="view overlay">
                                <img src="{{ asset('/img/site/desinfection.png') }}" class="card-img-top" alt="Image de désinfection">
                                <div class="mask flex-center rgba-black-strong">
                                    <div class="text-white text-center">
                                        <h2>Désinfection</h2>
                                        <button class="btn btn-md btn-outline-light" data-toggle="modal" data-target="#modalMoreInfo1">En savoir plus</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Modal pour les informations supplémentaires de la première carte -->
                    <div class="modal fade" id="modalMoreInfo1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1"
                    aria-hidden="true">
                    <div class="modal-dialog modal-notify modal-info modal-dialog-centered" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel1">Désinfection</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">×</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <b>Pourquoi</b> : "Sécurité et Santé Avant Tout"
                                Dans un monde où la propreté est synonyme de sécurité, nous offrons une désinfection approfondie pour protéger votre équipe et vos clients.
                                <br>
                                <b>Comment</b> : "Des Standards Élevés, Des Produits Fiables"
                                Notre approche utilise des produits de désinfection avancés et éprouvés pour une efficacité maximale.
                                <br>
                                <b>Quoi</b> : "Environnements Purifiés, Confiance Renforcée"
                                Un service de désinfection complet pour un espace de travail sain et sécurisé.
                                <ul>
                                    <h4><b>Workflow</b></h4>
                                    <li>Commande en ligne rapide et facile</li>
                                    <li>Planification adaptée à vos disponibilités</li>
                                    <li>Bon d'intervention avec photos avant/après</li>
                                    <li>Envoi de la facturation avec transparence</li>
                                </ul>

                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-md btn-outline-dark" data-dismiss="modal">Fermer</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Deuxième carte -->
                <div class="col p-2 d-flex align-items-center">
                    <div class="card">
                        <!-- Image de la carte avec masque -->
                        <div class="view overlay">
                            <img src="{{ asset('/img/site/laveurs-vitre-gratte-ciel.png') }}" class="card-img-top" alt="Image de laveurs de vitres">
                            <div class="mask flex-center rgba-black-strong">
                                <div class="text-white text-center">
                                    <h2>Laveurs de vitres</h2>
                                    <button class="btn btn-md btn btn-light" data-toggle="modal" data-target="#modalMoreInfo2">En savoir plus</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Modal pour les informations supplémentaires de la deuxième carte -->
                <div class="modal fade" id="modalMoreInfo2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel2"
                aria-hidden="true">
                <div class="modal-dialog modal-notify modal-info modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel2">Les laveurs de vitres</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <b>Pourquoi</b> : "Une Clarté qui Inspire Confiance"
                            Nous croyons que des vitres propres et lumineuses reflètent l'image professionnelle et le sérieux de votre entreprise.
                            <br>
                            <b>Comment</b> : "Avec Précision et Écologie"
                            Nos professionnels utilisent des techniques et produits respectueux de l'environnement pour un résultat impeccable sans compromis sur la sécurité.
                            <br>
                            <b>Quoi</b> : "Des Vitres Impeccables, Vue Dégageée"
                            Notre service garantit des vitres brillantes, favorisant un environnement de travail lumineux et accueillant.
                            <ul>
                                <h4><b>Workflow</b></h4>
                                <li>Commande en ligne rapide et facile</li>
                                <li>Planification adaptée à vos disponibilités</li>
                                <li>Bon d'intervention avec photos avant/après</li>
                                <li>Envoi de la facturation avec transparence</li>
                            </ul>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-md btn-outline-dark" data-dismiss="modal">Fermer</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Troisième carte -->
            <div class="col p-2 d-flex align-items-center">
                <div class="card">
                    <!-- Image de la carte avec masque -->
                    <div class="view overlay">
                        <img src="{{{ asset('/img/site/locaux.png') }}}" class="card-img-top" alt="Image de décapage">
                        <div class="mask flex-center rgba-black-strong">
                            <div class="text-white text-center">
                                <h2>Entretien des locaux</h2>
                                <button class="btn btn-md btn-outline-light" data-toggle="modal" data-target="#modalMoreInfo3">En savoir plus</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Modal pour les informations supplémentaires de la troisième carte -->
            <div class="modal fade" id="modalMoreInfo3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel3"
            aria-hidden="true">
            <div class="modal-dialog modal-notify modal-info modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel3">Entretien des locaux</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <b>Pourquoi</b> : "Des Espaces qui Rayonnent Votre Marque"
                        Un entretien méticuleux est essentiel pour refléter l'excellence et le professionnalisme de votre entreprise.
                        <br>
                        <b>Comment</b> : "Adaptabilité et Attention aux Détails"
                        Nous adaptons nos services à vos besoins spécifiques, garantissant un entretien impeccable de tous vos locaux.
                        <br>
                        <b>Quoi</b> : "Locaux Impeccables, Ambiance Productive"
                        Un service d'entretien complet pour des locaux toujours accueillants et professionnels.
                        <ul>
                            <h4><b>Workflow</b></h4>
                            <li>Commande en ligne rapide et facile</li>
                            <li>Planification adaptée à vos disponibilités</li>
                            <li>Bon d'intervention avec photos avant/après</li>
                            <li>Envoi de la facturation avec transparence</li>
                        </ul>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-md btn-outline-dark" data-dismiss="modal">Fermer</button>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!--DEUXIEME ROW -->

    <div class="row row-cols-1 row-cols-md-3 g-4 mb-4">
        <!-- Première carte -->
        <div class="col p-2 d-flex align-items-center">
            <div class="card">
                <!-- Image de la carte avec masque -->
                <div class="view overlay">
                    <img src="{{{ asset('/img/site/demenagement.png') }}}" class="card-img-top" alt="Image de désinfection">
                    <div class="mask flex-center rgba-black-strong">
                        <div class="text-white text-center">
                            <h2>FACTOTUM</h2>
                            <button class="btn btn-md btn-outline-light" data-toggle="modal" data-target="#modalMoreInfo4">En savoir plus</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal pour les informations supplémentaires de la première carte -->
        <div class="modal fade" id="modalMoreInfo4" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel4"
        aria-hidden="true">
        <div class="modal-dialog modal-notify modal-info modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel5">FACTOTUM</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                   <b>Pourquoi</b> : 
                   Notre service Factotum reflète cet engagement, en assurant la sécurité et le confort de votre équipe et de vos clients.
                   <br>
                   <b>Comment</b> :
                   Nos factotums sont des experts polyvalents, formés pour gérer une multitude de tâches, des réparations mineures à la gestion quotidienne de votre espace de travail.
                   <br>
                   <b>Quoi</b> :
                   Une solution complète pour un environnement de travail harmonieux et fonctionnel. De la maintenance régulière au nettoyage professionnel, nous couvrons tous vos besoins.
                   <ul>
                    <h4><b>Workflow</b></h4>
                    <li>Commande en ligne rapide et facile</li>
                    <li>Planification adaptée à vos disponibilités</li>
                    <li>Bon d'intervention avec photos avant/après</li>
                    <li>Envoi de la facturation avec transparence</li>
                </ul>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-md btn-outline-dark" data-dismiss="modal">Fermer</button>
            </div>
        </div>
    </div>
</div>

<!-- Deuxième carte -->
<div class="col p-2 d-flex align-items-center">
    <div class="card">
        <!-- Image de la carte avec masque -->
        <div class="view overlay">
            <img src="{{ asset('/img/site/dechets.png') }}" class="card-img-top" alt="Image de laveurs de vitres">
            <div class="mask flex-center rgba-black-strong">
                <div class="text-white text-center">
                    <h2>Gestion des déchets</h2>
                    <button class="btn btn-md btn-outline-light" data-toggle="modal" data-target="#modalMoreInfo5">En savoir plus</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal pour les informations supplémentaires de la deuxième carte -->
<div class="modal fade" id="modalMoreInfo5" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel5"
aria-hidden="true">
<div class="modal-dialog modal-notify modal-info modal-dialog-centered" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel5">Gestion des déchets</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">×</span>
            </button>
        </div>
        <div class="modal-body">
            <b>Pourquoi</b> : "Une Planète Propre, un Avenir Durable"
            Nous sommes engagés dans une gestion des déchets qui respecte l'environnement et soutient votre responsabilité sociale d'entreprise.
            <br>
            <b>Comment</b> : "Tri Rigoureux et Solutions Écologiques"
            Notre processus comprend le tri, le recyclage et l'élimination responsable, conformément aux normes environnementales.
            <br>
            <b>Quoi</b> : "Déchets Gérés, Conscience Tranquille"
            Nous prenons en charge vos déchets, vous offrant une solution complète et responsable.
            <ul>
                <h4><b>Workflow</b></h4>
                <li>Commande en ligne rapide et facile</li>
                <li>Planification adaptée à vos disponibilités</li>
                <li>Bon d'intervention avec photos avant/après</li>
                <li>Envoi de la facturation avec transparence</li>
            </ul>

        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-md btn-outline-dark" data-dismiss="modal">Fermer</button>
        </div>
    </div>
</div>
</div>

<!-- Troisième carte -->
<div class="col p-2 d-flex align-items-center">
    <div class="card">
        <!-- Image de la carte avec masque -->
        <div class="view overlay">
            <img src="{{ asset('/img/site/decapage.png') }}" class="card-img-top" alt="Image de décapage">
            <div class="mask flex-center rgba-black-strong">
                <div class="text-white text-center">
                    <h2>Remise en état des sols</h2>
                    <button class="btn btn-md btn btn-light" data-toggle="modal" data-target="#modalMoreInfo6">En savoir plus</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal pour les informations supplémentaires de la troisième carte -->
<div class="modal fade" id="modalMoreInfo6" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel6"
aria-hidden="true">
<div class="modal-dialog modal-notify modal-info modal-dialog-centered" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel6">Remise en état des sols</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">×</span>
            </button>
        </div>
        <div class="modal-body">
            <b>Pourquoi</b> : "Fondations d'Excellence"
            Un sol bien entretenu est le fondement d'un espace professionnel accueillant et raffiné.
            <br>
            <b>Comment</b> : "Techniques Avancées et Produits Sécurisés"
            Nos experts utilisent des méthodes éprouvées et des produits sécuritaires pour redonner éclat et durabilité à vos sols.
            <br>
            <b>Quoi</b> : "Sols Rénovés, Image Renforcée"
            Nous transformons vos sols pour refléter le professionnalisme et l'attention aux détails de votre entreprise.
            <ul>
                <h4><b>Workflow</b></h4>
                <li>Commande en ligne rapide et facile</li>
                <li>Planification adaptée à vos disponibilités</li>
                <li>Bon d'intervention avec photos avant/après</li>
                <li>Envoi de la facturation avec transparence</li>
            </ul>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-md btn-outline-dark" data-dismiss="modal">Fermer</button>
        </div>
    </div>
</div>
</div>
</div>
</div>
</div>

@endsection