templates/entreprise/nos_services.html.twig line 1

{% extends 'base.html.twig' %}
{% block title  %}
{{ parent() }} | Nos services
{% endblock title  %}

{% block stylesheets  %}
{{ parent() }}
<style>
    .element-services{
        margin: 20px;
    }

     .slider-container {
            width: 100%;
            /*max-width: 900px;*/
            position: relative;
            overflow: hidden;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        }

        .slider {
            display: flex;
            transition: transform 0.3s ease-out;
            cursor: grab;
            padding: 20px 0;
        }

        .slider.grabbing {
            cursor: grabbing;
            transition: none;
        }

        .slide {
            flex: 0 0 calc(33.333% - 20px);
            margin: 0 10px;
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            user-select: none;
        }

        .slide img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            display: block;
        }

        .slide-content {
            padding: 20px;
        }

        .slide-content h3 {
            margin-bottom: 10px;
            color: #333;
        }

        .slide-content p {
            color: #666;
            line-height: 1.5;
        }

        /* Navigation dots */
        .dots {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 20px;
            padding-bottom: 20px;
        }

        .dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #ccc;
            cursor: pointer;
            transition: background 0.3s;
        }

        .dot.active {
            background: #333;
        }

        /* Navigation arrows */
        .nav-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 40px;
            height: 40px;
            background: white;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
            z-index: 10;
            opacity: 0.8;
            transition: opacity 0.3s;
            font-size: 20px;
        }

        .nav-arrow:hover {
            opacity: 1;
        }

        .nav-arrow.prev {
            left: 10px;
        }

        .nav-arrow.next {
            right: 10px;
        }

        @media (max-width: 768px) {
            .slide {
                flex: 0 0 calc(50% - 20px);
            }
            
            .nav-arrow {
                width: 35px;
                height: 35px;
                font-size: 18px;
            }
        }

        @media (max-width: 480px) {
            .slide {
                flex: 0 0 calc(100% - 20px);
            }
        }
</style>

{% endblock stylesheets  %}

{% block body  %}
    <br/><br/><br/>
    <h3 class="text-center">Nos services</h3>
    <hr/>
    <h4 class="text-center">Des experts pour tous vos besoins !</h4>
    <p class="text-center">
        Une large gamme de services professionnels à domicile pour simplifier votre quotidien
    </p>
    
     <br/>

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="slider-container">
                <div class="nav-arrow prev">←</div>
                <div class="nav-arrow next">→</div>
                
                <div class="slider" id="slider">

                    
                </div>
                
                <div class="dots" id="dots"></div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
        <br/>
            <h3 class="text-center">les raisons de nous choisir</h3>
            <p class="text-center">HelpPlace votre partenaire de confiance pour tous vos besoins à domicile.</p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">
            <div class="assie-card">
                <div class="assie-card-body">
                    <h3 class="text-center"><i class="bi bi-cash"></i></h3>
                    <p class="text-center"><strong>Inscription gratuite</strong></p>
                    <p class="text-center">
                        Créez votre compte gratuitement, sans engagement et accédez à tous nos services.
                        <br/><br/>
                    </p>
                </div>
            </div>
        </div>
        
         <div class="col-md-3">
            <div class="assie-card">
                <div class="assie-card-body">
                    <h3 class="text-center"><i class="bi bi-clock"></i></h3>
                    <p class="text-center"><strong>Service simple, rapide et sécurisé</strong></p>
                    <p class="text-center">
                        Trouvez un prestataire en 2 minutes et réservez directement en ligne en toute sécurité.
                    </p>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="assie-card">
                <div class="assie-card-body">
                    <h3 class="text-center"><i class="bi bi-shield-lock"></i></h3>
                    <p class="text-center"><strong>Prestataire vérifié et fiable</strong></p>
                    <p class="text-center">
                        Tous nos professionnels sont soigneusement sélectionnés et vérifiés avec document à l'appui.
                        <br/><br/>
                    </p>
                </div>
            </div>
        </div>


        <div class="col-md-3">
            <div class="assie-card">
                <div class="assie-card-body">
                    <h3 class="text-center"><i class="bi bi-journal-bookmark"></i></h3>
                    <p class="text-center"><strong>Qualité garantie</strong></p>
                    <p class="text-center">
                        Satisfaction client garantie avec notre système d'évaluation et de notation.
                        <br/><br/>
                    </p>
                </div>
            </div>
        </div>


    </div>
    <hr/>
    <br/>
    <div class="row">
        <div class="col-md-12">
           <h3 class="text-center"> Comment ça marche ?</h3>
           <p class="text-center">
            Trouvez votre prestataire en 2 minutes
            Simplement, rapidement et en toute sécurité
            </p>

        </div>
    </div>

    <div class="row">
        <div class="col-md-3">
            <div class="assie-card">
                <div class="assie-card-body">
                    <h3 class="text-center"><i class="bi bi-1-circle-fill"></i></h3>
                    <h3 class="text-center"><i class="bi bi-search"></i></h3>
                    <p class="text-center"><strong>Recherche</strong></p>
                    <p class="text-center">
                        Décrivez votre besoin et votre localisation en quelques clics.
                         <br/> <br/>
                    </p>
                </div>
            </div>
        </div>
        
        <div class="col-md-3">
            <div class="assie-card">
                <div class="assie-card-body">
                    <h3 class="text-center"><i class="bi bi-2-circle-fill"></i></h3>
                    <h3 class="text-center"><i class="bi bi-person-check"></i></h3>
                    <p class="text-center"><strong>Choisissez</strong></p>
                    <p class="text-center">
                        Comparez les profils, avis et tarifs des prestataires disponibles.
                    </p>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="assie-card">
                <div class="assie-card-body">
                    <h3 class="text-center"><i class="bi bi-3-circle-fill"></i></h3>
                    <h3 class="text-center"><i class="bi bi-calendar-check"></i></h3>
                    <p class="text-center"><strong>Reservez</strong></p>
                    <p class="text-center">
                        Planifiez votre intervention au moment qui vous convient.
                         <br/> <br/>
                    </p>
                </div>
            </div>
        </div>

         <div class="col-md-3">
            <div class="assie-card">
                <div class="assie-card-body">
                    <h3 class="text-center"><i class="bi bi-4-circle-fill"></i></h3>
                    <h3 class="text-center"><i class="bi bi-star"></i></h3>
                    <p class="text-center"><strong>Evaluez</strong></p>
                    <p class="text-center">
                        Partagez votre expérience et aidez la communauté.
                        <br/> <br/>
                    </p>
                </div>
            </div>
            <br/> <br/>
        </div>
        <br/> <br/>

    </div>
    </div>
    <span hidden id="slidesData">{{ slidesData }}</span>
{% endblock body  %}

{% block javascripts  %}
{{ parent() }}

  <script type="text/javascript">
       class SwipeSlider {
            constructor() {
                
                this.slider = document.getElementById('slider');
                this.dotsContainer = document.getElementById('dots');
                this.prevBtn = document.querySelector('.prev');
                this.nextBtn = document.querySelector('.next');
                this.listeCategorie = document.getElementById('slidesData');

                this.slidesData = JSON.parse(this.listeCategorie.innerText);
                
                this.currentIndex = 0;
                this.startX = 0;
                this.currentX = 0;
                this.isDragging = false;
                this.visibleSlides = this.getVisibleSlidesCount();
                
                this.init();
            }
            
            getVisibleSlidesCount() {
                if (window.innerWidth <= 480) return 1;
                if (window.innerWidth <= 768) return 2;
                return 3;
            }
            
            init() {
                this.createSlides();
                this.createDots();
                this.updateSliderPosition();
                this.setupEventListeners();
                window.addEventListener('resize', () => this.handleResize());
            }
            
            createSlides() {
                this.slider.innerHTML = this.slidesData.map(slide => `
                    <div class="slide">
                        <img src="${slide.img}" alt="${slide.title}">
                        <div class="slide-content">
                            <h3>${slide.title}</h3>
                        </div>
                    </div>
                `).join('');
            }
            
            createDots() {
                const maxIndex = Math.max(0, this.slidesData.length - this.visibleSlides);
                const dots = [];
                for (let i = 0; i <= maxIndex; i++) {
                    dots.push(`<div class="dot${i === this.currentIndex ? ' active' : ''}" data-index="${i}"></div>`);
                }
                this.dotsContainer.innerHTML = dots.join('');
                
                document.querySelectorAll('.dot').forEach(dot => {
                    dot.addEventListener('click', (e) => {
                        const index = parseInt(e.target.dataset.index);
                        this.goToSlide(index);
                    });
                });
            }
            
            setupEventListeners() {
                // Mouse events
                this.slider.addEventListener('mousedown', (e) => this.startDrag(e));
                window.addEventListener('mousemove', (e) => this.drag(e));
                window.addEventListener('mouseup', () => this.endDrag());
                
                // Touch events
                this.slider.addEventListener('touchstart', (e) => this.startDrag(e));
                window.addEventListener('touchmove', (e) => this.drag(e), { passive: false });
                window.addEventListener('touchend', () => this.endDrag());
                
                // Navigation buttons
                this.prevBtn.addEventListener('click', () => this.prev());
                this.nextBtn.addEventListener('click', () => this.next());
                
                // Prevent context menu on slider
                this.slider.addEventListener('contextmenu', (e) => e.preventDefault());
            }
            
            startDrag(e) {
                e.preventDefault();
                this.isDragging = true;
                this.startX = e.type === 'mousedown' ? e.pageX : e.touches[0].pageX;
                this.currentX = this.startX;
                this.slider.classList.add('grabbing');
            }
            
            drag(e) {
                if (!this.isDragging) return;
                e.preventDefault();
                
                const currentX = e.type === 'mousemove' ? e.pageX : e.touches[0].pageX;
                const diff = currentX - this.startX;
                
                // Limiter le dépassement
                const maxDrag = 50; // pixels
                const boundedDiff = Math.max(-maxDrag, Math.min(maxDrag, diff));
                
                this.slider.style.transform = `translateX(calc(-${this.currentIndex * (100 / this.visibleSlides)}% + ${boundedDiff}px))`;
            }
            
            endDrag() {
                if (!this.isDragging) return;
                
                this.slider.classList.remove('grabbing');
                
                const diff = this.currentX - this.startX;
                
                if (Math.abs(diff) > 50) {
                    if (diff > 0 && this.currentIndex > 0) {
                        this.prev();
                    } else if (diff < 0 && this.currentIndex < this.slidesData.length - this.visibleSlides) {
                        this.next();
                    } else {
                        this.updateSliderPosition();
                    }
                } else {
                    this.updateSliderPosition();
                }
                
                this.isDragging = false;
            }
            
            updateSliderPosition() {
                const percentage = -(this.currentIndex * (100 / this.visibleSlides));
                this.slider.style.transform = `translateX(${percentage}%)`;
                
                // Update dots
                document.querySelectorAll('.dot').forEach((dot, index) => {
                    dot.classList.toggle('active', index === this.currentIndex);
                });
            }
            
            goToSlide(index) {
                this.currentIndex = Math.max(0, Math.min(index, this.slidesData.length - this.visibleSlides));
                this.updateSliderPosition();
            }
            
            prev() {
                this.goToSlide(this.currentIndex - 1);
            }
            
            next() {
                this.goToSlide(this.currentIndex + 1);
            }
            
            handleResize() {
                const newVisibleSlides = this.getVisibleSlidesCount();
                if (newVisibleSlides !== this.visibleSlides) {
                    this.visibleSlides = newVisibleSlides;
                    this.currentIndex = Math.min(this.currentIndex, this.slidesData.length - this.visibleSlides);
                    this.createDots();
                    this.updateSliderPosition();
                }
            }
        }
        
        // Initialiser le slider
        document.addEventListener('DOMContentLoaded', () => {
            new SwipeSlider();
        });
    </script>
{% endblock javascripts  %}