{% extends "base.html.twig" %}

{% block body %}

        <!-- page-title -->
        <section class="page-title centred">
            <div class="bg-layer" style="background-image: url({{asset('assets/assets/images/background/page-title.jpg')}});"></div>
            <div class="auto-container">
                <div class="content-box">
                    <h1>A propos de nous</h1>
                    <ul class="bread-crumb clearfix">
                        <li><a href="{{path('home')}}">Accueil</a></li>
                        <li>A propos de nous</li>
                    </ul>
                </div>
            </div>
        </section>
        <!-- page-title end -->


        <!-- about-style-two -->
        <section class="about-style-two pt_150 pb_150">
            <div class="pattern-layer-2" style="background-image: url({{asset('assets/assets/images/shape/shape-12.png')}});"></div>
            <div class="auto-container">
                <div class="row clearfix">
                    <div class="col-lg-6 col-md-12 col-sm-12 image-column">
                        <div class="image_block_one">
                            <div class="image-box mr_50 pl_110 pt_80">
                                <figure class="image"><img src="{{asset('assets/assets/images/resource/about-1.jpg')}}" alt=""></figure>
                                <div class="video-inner" style="background-image: url({{asset('assets/assets/images/resource/about-2.jpg')}});">
                                    {# <a href="https://www.youtube.com/watch?v=nfP5N9Yc72A&amp;t=28s" class="lightbox-image video-btn" data-caption=""><i class="icon-12"></i></a> #}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-12 col-sm-12 content-column">
                        <div class="content_block_five">
                            <div class="content-box">
                                <div class="sec-title mb_30">
                                    <span class="sub-title">À propos de l'entreprise</span>
                                    <h2>Nous sommes la référence en matière de voyages et d'aventures.</h2>
                                </div>
                                <div class="text-box mb_50">
                                    <p>Nous proposons des expériences de voyage sur mesure, alliant authenticité, sécurité et découverte.</p>
                                    <p>Notre équipe dédiée met tout en œuvre pour créer des séjours inoubliables et répondre à vos besoins.</p>
                                </div>
                                <div class="inner-box mb_55">
                                    <div class="count-outer count-box">
                                        <span class="count-text" data-speed="1500" data-stop="200">0</span><span>+</span>
                                        <h6>Voyages organisés</h6>
                                    </div>
                                    <div class="count-outer count-box">
                                        <span class="count-text" data-speed="1500" data-stop="40">0</span><span>+</span>
                                        <h6>Destinations Proposées</h6>
                                    </div>
                                    <div class="count-outer count-box">
                                        <span class="count-text" data-speed="1500" data-stop="15">0</span><span></span>
                                        <h6>Partenaires <br /></h6>
                                    </div>
                                </div>
                                <div class="btn-box">
                                    <a href="{{ path('contact') }}" class="theme-btn btn-three">Nous Contacter</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- about-style-two end -->


        <!-- feature-section -->
        <section class="feature-section centred pt_150 pb_120 bg-color-1">
            <div class="pattern-layer" style="background-image: url({{asset('assets/assets/images/shape/shape-6.png')}});"></div>
            <div class="auto-container">
                <div class="row clearfix">
                    <div class="col-lg-3 col-md-6 col-sm-12 feature-block">
                        <div class="feature-block-one wow fadeInUp animated" data-wow-delay="00ms" data-wow-duration="1500ms">
                            <div class="inner-box">
                                <div class="icon-box"><i class="icon-18"></i></div>
                                <h3><a href="#">Réservation facile et rapide</a></h3>
                                <p>Réservez en quelques clics, rapidement et en toute sécurité.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 col-sm-12 feature-block">
                        <div class="feature-block-one wow fadeInUp animated" data-wow-delay="200ms" data-wow-duration="1500ms">
                            <div class="inner-box">
                                <div class="icon-box"><i class="icon-19"></i></div>
                                <h3><a href="#">Guides experts</a></h3>
                                <p>Des guides locaux expérimentés pour vous accompagner partout.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 col-sm-12 feature-block">
                        <div class="feature-block-one wow fadeInUp animated" data-wow-delay="400ms" data-wow-duration="1500ms">
                            <div class="inner-box">
                                <div class="icon-box"><i class="icon-20"></i></div>
                                <h3><a href="#">Personnalisation étendue</a></h3>
                                <p>Itinéraires modulables selon vos envies et votre budget.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 col-sm-12 feature-block">
                        <div class="feature-block-one wow fadeInUp animated" data-wow-delay="600ms" data-wow-duration="1500ms">
                            <div class="inner-box">
                                <div class="icon-box"><i class="icon-21"></i></div>
                                <h3><a href="#">Service client 24/7</a></h3>
                                <p>Assistance disponible à tout moment pour un voyage serein.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- feature-section end -->


        <!-- chooseus-section -->
        <section class="chooseus-section pt_150 pb_150">
            <div class="auto-container">
                <div class="row clearfix">
                    <div class="col-lg-6 col-md-12 col-sm-12 content-column">
                        <div class="content_block_one">
                            <div class="content-box mr_30">
                                <div class="sec-title mb_60">
                                    <span class="sub-title">Pourquoi nous choisir ?</span>
                                    <h2>Découvrez notre guide de voyage</h2>
                                    <p>Faites confiance à notre expertise pour préparer des voyages sur mesure, sûrs et mémorables.</p>
                                </div>
                                <ul class="list-style-one clearfix pb_30"><li><a href="#" class="gradient-color"><i class="icon-11 gradient-color"></i> Guides professionnels</a></li>
                                    <li><a href="#" class="gradient-color"><i class="icon-11 gradient-color"></i> Fiabilité</a></li>
                                    <li><a href="#" class="gradient-color"><i class="icon-11 gradient-color"></i> Flexibilité</a></li>
                                    <li><a href="#" class="gradient-color"><i class="icon-11 gradient-color"></i> Disponibilité</a></li>
                                </ul>
                                <div class="btn-box">
                                     <a href="{{ path('contact') }}" class="theme-btn btn-three">Nous Contacter</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="offer-box">
                <div class="bg-layer" style="background-image: url({{asset('assets/assets/images/background/chooseus-bg.jpg')}});"></div>
                <div class="content_block_two">
                    <div class="content-box">
                        <span class="sub-title">À découvrir</span>
                        <p>Places limitées ! Réservez vite</p>
                        <h2 class="gradient-color">15 <span>% DE RÉDUCTION</span></h2>
                        <h3>Nouvelles expériences en Thaïlande</h3>
                        {# <div class="timer mb_60">
                            <div class="cs-countdown clearfix" data-countdown="12/28/2027 05:06:59"></div>
                        </div> #}
                        <div class="btn-box"><a href="index.html" class="theme-btn btn-one">Réservez maintenant</a></div>
                    </div>
                </div>
            </div>
        </section>
        <!-- chooseus-section end -->


        <!-- funfact-section -->
        {# <section class="funfact-section centred pt_160 pb_150">
            <div class="bg-layer parallax-bg" data-parallax='{"y": 100}' style="background-image: url({{asset('assets/assets/images/background/funfact-bg.jpg')}});"></div>
            <div class="auto-container">
                <div class="inner-container">
                    <div class="funfact-block-one">
                        <div class="inner-box">
                            <div class="arrow-shape" style="background-image: url({{asset('assets/assets/images/shape/shape-2.png')}});"></div>
                            <div class="icon-box"><i class="icon-7"></i></div>
                            <div class="count-outer count-box">
                                <span class="count-text" data-speed="1500" data-stop="500">0</span>
                            </div>
                            <h3>Réservation de vols</h3>
                        </div>
                    </div>
                    <div class="funfact-block-one">
                        <div class="inner-box">
                            <div class="arrow-shape" style="background-image: url({{asset('assets/assets/images/shape/shape-3.png')}});"></div>
                            <div class="icon-box"><i class="icon-8"></i></div>
                            <div class="count-outer count-box">
                                <span class="count-text" data-speed="1500" data-stop="250">0</span>
                            </div>
                            <h3>Réservation de croisières</h3>
                        </div>
                    </div>
                    <div class="funfact-block-one">
                        <div class="inner-box">
                            <div class="arrow-shape" style="background-image: url({{asset('assets/assets/images/shape/shape-2.png')}});"></div>
                            <div class="icon-box"><i class="icon-9"></i></div>
                            <div class="count-outer count-box">
                                <span class="count-text" data-speed="1500" data-stop="750">0</span>
                            </div>
                            <h3>Circuits exceptionnels</h3>
                        </div>
                    </div>
                    <div class="funfact-block-one">
                        <div class="inner-box">
                            <div class="icon-box"><i class="icon-10"></i></div>
                            <div class="count-outer count-box">
                                <span class="count-text" data-speed="1500" data-stop="150">0</span>
                            </div>
                            <h3>Réservation d'hôtels</h3>
                        </div>
                    </div>
                </div>
            </div>
        </section> #}
        <!-- funfact-section end -->


        <!-- team-style-two -->
        <section class="team-style-two pt_150 pb_120 centred">
            <div class="auto-container">
                <div class="sec-title mb_60">
                    <span class="sub-title"></span>
                    <h2>Notre équipe à votre disposition</h2>
                    <p>Des personnes passionnées et expérimentées dédiées à la réussite de vos voyages.</p>
                </div>
                <div class="row clearfix justify-content-center">
                    {% for equipe in equipes %}
                    <div class="col-lg-3 col-md-6 col-sm-12 team-block">
                        <div class="team-block-two wow fadeInUp animated" data-wow-delay="00ms" data-wow-duration="1500ms">
                            <div class="inner-box">
                                <div class="image-box">
                                    <figure class="image"><img src="{{ asset('uploads/equipes/' ~ equipe.photo) }}" alt=""></figure>
                                    <div class="share-icon"><i class="icon-23"></i></div>
                                    {# 
                                    <ul class="social-links clearfix">
                                        <li><a href="{{ equipe.facebook }}"><i class="fab fa-facebook-f"></i></a></li>
                                        <li><a href="{{ equipe.twiter }}"><i class="fab fa-twitter"></i></a></li>
                                        <li><a href="{{ equipe.linkedin }}"><i class="fab fa-linkedin-in"></i></a></li>
                                    </ul> 
                                    #}
                                </div>
                                <div class="lower-content">
                                    <h3><a href="team-details.html">{{ equipe.nom }}</a></h3>
                                    <span class="designation gradient-color">{{equipe.role}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </section>
        <!-- team-style-two end -->


        <!-- explore-section -->
        {# <section class="explore-section centred">
            <div class="outer-container clearfix">
                <div class="single-column">
                    <div class="offer-box-one">
                        <figure class="image-layer"><img src="{{asset('assets/assets/images/resource/explore-1.png')}}" alt=""></figure>
                        <span class="sub-title">Envi Évasions</span>
                        <h2><span>Faites votre réservation</span></h2>
                        <h3></h3>
                    </div>
                </div>
                <div class="single-column">
                    <div class="offer-box-two">
                        <div class="bg-layer" style="background-image: url({{asset('assets/assets/images/resource/explore-1.jpg')}});"></div>
                        <figure class="image-layer"><img src="{{asset('assets/assets/images/resource/explore-2.png')}}" alt=""></figure>
                        <div class="sec-title mb_30 light">
                            <span class="sub-title">bonnes vacances</span>
                            <h2>Laissez votre curiosité <br />faire la réservation</h2>
                        </div>
                    </div>
                </div>
                <div class="single-column">
                    <div class="offer-box-three">
                        <figure class="image-layer"><img src="{{asset('assets/assets/images/resource/explore-3.png')}}" alt=""></figure>
                        <div class="sec-title mb_30 light">
                            <span class="sub-title">Bonnes vacances</span>
                            <h2>Laissez votre curiosité <br />faire la réservation</h2>
                        </div>
                    </div>
                </div>
            </div>
        </section> #}
        <!-- explore-section end -->


        <!-- testimonial-section -->
         <!--
        <section class="testimonial-section pt_150 pb_120">
            <div class="thumb-inner">
                <figure class="thumb thumb-1"><img src="{{asset('assets/assets/images/resource/thumb-1.png')}}" alt=""></figure>
                <figure class="thumb thumb-2"><img src="{{asset('assets/assets/images/resource/thumb-2.png')}}" alt=""></figure>
                <figure class="thumb thumb-3"><img src="{{asset('assets/assets/images/resource/thumb-3.png')}}" alt=""></figure>
                <figure class="thumb thumb-4"><img src="{{asset('assets/assets/images/resource/thumb-4.png')}}" alt=""></figure>
                <figure class="thumb thumb-5"><img src="{{asset('assets/assets/images/resource/thumb-5.png')}}" alt=""></figure>
                <figure class="thumb thumb-6"><img src="{{asset('assets/assets/images/resource/thumb-6.png')}}" alt=""></figure>
            </div>
            <div class="auto-container">
                <div class="sec-title centred mb_60">
                    <span class="sub-title">Témoignages</span>
                    <h2>Ce que disent nos clients satisfaits</h2>
                    <p>Des retours positifs qui reflètent notre engagement et notre qualité de service.</p>
                </div>
                <div class="testimonial-carousel swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="testimonial-block-one">
                                <div class="inner-box">
                                    <div class="shape-1"></div>
                                    <div class="shape-2"></div>
                                    <div class="icon-box gradient-color"><i class="icon-22"></i></div>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus. Sed dignissim, metus nec fringilla accumsan.</p>
                                    <div class="author-box">
                                        <figure class="thumb-box"><img src="{{asset('assets/assets/images/resource/testimonial-1.png')}}" alt=""></figure>
                                        <h3>Jenny Wilson</h3>
                                        <span class="designation gradient-color">Web Designer</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="testimonial-block-one">
                                <div class="inner-box">
                                    <div class="shape-1"></div>
                                    <div class="shape-2"></div>
                                    <div class="icon-box gradient-color"><i class="icon-22"></i></div>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus. Sed dignissim, metus nec fringilla accumsan.</p>
                                    <div class="author-box">
                                        <figure class="thumb-box"><img src="{{asset('assets/assets/images/resource/testimonial-2.png')}}" alt=""></figure>
                                        <h3>Alex Hels</h3>
                                        <span class="designation gradient-color">Web Designer</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="testimonial-block-one">
                                <div class="inner-box">
                                    <div class="shape-1"></div>
                                    <div class="shape-2"></div>
                                    <div class="icon-box gradient-color"><i class="icon-22"></i></div>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus. Sed dignissim, metus nec fringilla accumsan.</p>
                                    <div class="author-box">
                                        <figure class="thumb-box"><img src="{{asset('assets/assets/images/resource/testimonial-1.png')}}" alt=""></figure>
                                        <h3>Tomas Adison</h3>
                                        <span class="designation gradient-color">Web Designer</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="testimonial__pagination"></div>
                </div>
            </div>
        </section>
    -->
        <!-- testimonial-section end -->


      
{% endblock %}