templates/front/home/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block title %}{% endblock %}
  4. {% block content %}
  5. <div id="carousel" class="carousel slide overlay_video" data-ride="carousel">
  6.   <div class="carousel-inner">
  7.     <div class="carousel-item active">
  8.         {# <div class="carousel_image" style="background-image: url({{ asset('assets/media/accueil/hero.jpeg') | imagine_filter('stream_header') }});"></div> #}
  10.         <div class="carousel_content d-flex align-items-center justify-content-center">
  11.             <div class="text-white text-center px-3 my-3 py-3 ">
  12.                 <div class="carousel_title mb-2 mb-lg-3">CHOISISSEZ LE MEILLEUR DE LA TRANSACTION</div>
  13.                 <div class="carousel_baseline mb-3 mb-lg-4 mb-xl-5">POUR VOTRE BIEN IMMOBILIER</div>
  14.                 <div class="mt-4 mt-xl-5 d-none d-sm-block">
  15.                     <a class="btn btn-primary btn-lg shadow mx-4 px-5" href="{{ path( 'acheter' ) }}">TROUVER</a>
  16.                     <a class="btn btn-info btn-lg shadow mx-4 px-5" href="{{ path( 'estimation' ) }}">ESTIMER</a>
  17.                 </div>
  18.             </div>
  19.         </div>
  20.     </div>
  21.   </div>
  22.   {# Vidéo uniquement sur tablette paysage / desktop #}
  23.    <video autoplay muted loop class="background-video d-none d-lg-block">
  24.     <source src="{{ asset('assets/media/accueil/video_home_2026_bg_1920x710.mp4') }}" type="video/mp4">
  25.   </video>
  26.   {# Vidéo uniquement sur sur tablette portrait / mobile#}
  27. {#   <video autoplay muted loop class="background-video d-lg-none">
  28.     <source src="{{ asset('assets/media/accueil/video_home_2026_bg_700x700.mp4') }}" type="video/mp4">
  29.   </video>  #}
  30.   {# Image uniquement sur mobile #}
  31.   <img class="background-video d-block d-lg-none w-100" src="{{ asset('assets/media/accueil/hero_mobile.jpg') | imagine_filter('runtime',  {'thumbnail': {'size': [992],  'mode': 'outbound'  }}) }}" alt=""/>
  33.   {# https://github.com/tattali/MobileDetectBundle
  34.     {% if is_mobile() %}
  35.         <video autoplay muted loop class="mobile background-video d-lg-none">
  36.             <source src="{{ asset('assets/media/accueil/video_home_bg_991x991.mp4') }}" type="video/mp4">
  37.         </video>
  38.     {% elseif is_tablet() %}
  39.         <video class="video" autoplay muted loop class="tablet background-video d-lg-none">
  40.             <source src="/videos/tablet-video.mp4" type="video/mp4">
  41.         </video>
  42.         <video  autoplay muted loop class="tablet background-video d-lg-none">
  43.             <source src="{{ asset('assets/media/accueil/video_home_bg_1920x710.mp4') }}" type="video/mp4">
  44.         </video>
  46.     {% else %}
  47.         <video  autoplay muted loop class="desktop background-video d-lg-none">
  48.             <source src="{{ asset('assets/media/accueil/video_home_bg_1920x710.mp4') }}" type="video/mp4">
  49.         </video>
  50.     {% endif %}
  51.     #}
  53. </div>
  55. <section class="container-fluid py-5">
  56.     <div class="container">    
  57.             <h2 class="section_title">Nos dernières nouveautés</h2>
  58.             <hr class="separateur-rouge" />
  59.             <div class="row pt-4 align-items-stretch justify-content-center estates_container">
  60.                 {% for estate in estates %}
  61.                     {% include 'front/_common/_estate.html.twig'  with {'col': 'col-md-6 col-lg-4' , 'with_agent' : true, 'with_modal' : false, 'with_share': true} %}
  62.                 {% endfor %}
  63.             </div>
  64.             <div class="text-center mt-3 text-uppercase"><a class="btn btn-primary" href="{{ path( 'acheter' ) }}"> voir plus d'annonces</a></div>
  65.     </div>
  66. </section>
  68. <section class="container-fluid ">
  69.     <div class="row">
  70.         <div class="col-md-6 mx-3 mx-md-0 bloc_txt_image text-white" >
  71.             <div class="bg_image" style="background-image: url({{ asset('assets/media/accueil/Vous-recherchez.jpg') }});"></div>
  72.             <div class="overlay"></div>
  73.             <div class="content" >
  74.                 <div class="mx-3 my-5 m-xl-5 p-xl-5 d-flex align-items-center text-center">
  75.                     <div class="w-100">
  76.                         <h2 class="mb-4">VOUS RECHERCHEZ ?</h2>
  77.                         <p class="mb-5">
  78.                             Nos conseillers rencontrent tous les jours des propriétaires vendeurs. Ils sont en mesure de vous proposer les biens confiés à la vente mais aussi les biens en cours de préparation. Présentez-leur vos critères afin d'être les premiers informés !
  79.                         </p>
  80.                         <a class="btn btn-outline-light" href="{{ path( 'acheter' ) }}">En savoir +</a>
  81.                     </div>
  82.                 </div>
  83.             </div>
  84.         </div>
  85.         <div class="col-md-6 mx-3 mx-md-0 mt-3 mt-md-0 bloc_txt_image text-white" >
  86.             <div class="bg_image" style="background-image: url({{ asset('assets/media/accueil/Vous-achetez-1024x683.jpeg') }});"></div>
  87.             <div class="overlay"></div>
  88.             <div class="content" >
  89.                 <div class="mx-3 my-5 m-xl-5 p-xl-5 d-flex align-items-center text-center">
  90.                     <div class="w-100">
  91.                         <h2 class="mb-4">VOUS VENDEZ ?</h2>
  92.                         <p class="mb-5">
  93.                             Contactez-nous pour faire découvrir votre maison à toute la communauté Sublimons et maximisez vos chances de vendre rapidement. Nous vous proposons une rencontre à votre domicile ou dans nos bureaux afin de vous présenter les solutions adaptées à vos besoins !
  94.                         </p>
  95.                         <a class="btn btn-outline-light" href="{{ path( 'vendre' ) }}">En savoir +</a>
  96.                     </div>
  97.                 </div>
  98.             </div>
  99.         </div>
  100.     </div>
  101. </section>
  104. <section id="reviews" class="container py-5 ">
  105.         <h2 class="section_title">La satisfaction client, notre priorité !</h2>
  106.         <hr class="separateur-rouge" />
  107.         {{ render(controller('App\\Controller\\Front\\HomeController::osKpis')) }}
  108.         {{ render(controller('App\\Controller\\Front\\HomeController::testimonies')) }}
  109. </section>
  111. <section id="equipe" class="container-fluid p-0">
  112.     <img class="w-100" src="{{ asset('assets/media/accueil/equipe_4.jpg') }}" />
  113. </section>
  115. <section class="container container-lg my-5">
  116.     <h2 class="section_title">Nos dernières réussites</h2>
  117.     <hr class="separateur-rouge" />     
  118.     {{ render(controller('App\\Controller\\Front\\HomeController::lastEstates'))  }}
  119. </section>
  121. <hr class="separateur-rouge d-none" />
  122. <section class="container-fluid mb-5 px-0">
  123.     {{ render(controller('App\\Controller\\Front\\HomeController::partenaires'))  }}
  124. </section>
  125. {% endblock %}
  127. {% block stylesheets %}
  128.     {{ parent() }}
  129.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" />    
  130.     <link href="{{ asset('assets/vendor/OwlCarousel2-2.3.4/dist/assets/owl.carousel.min.css') }}" rel="stylesheet" >
  131.     <link href="{{ asset('assets/vendor/OwlCarousel2-2.3.4/dist/assets/owl.theme.default.min.css') }}" rel="stylesheet" >
  132. {% endblock %}
  134. {% block javascripts %}
  135.     {{ parent() }}
  136.     <script src="{{ asset('bundles/fosjsrouting/js/router.min.js') }}"></script>
  137.     <script src="{{ path('fos_js_routing_js', { callback: 'fos.Router.setData' }) }}"></script>
  138.     <script src="{{ asset('assets/vendor/OwlCarousel2-2.3.4/dist/owl.carousel.min.js') }}"></script>
  139.     <script>
  140.     jQuery(document).ready(function(){ 
  142.         $('.estates_container .estate_carousel').each(function(){
  143.             initEstateCarousel($(this));
  144.         });
  146.         $("#testimonies").owlCarousel({
  147.             loop:true,
  148.             autoplay:true,
  149.             autoplayTimeout:owl_speed,
  150.             autoplayHoverPause:true,
  151.             smartSpeed:500,
  152.             margin:30,
  153.             nav:false,
  154.             responsive:{
  155.                 0:{items:1},
  156.                 767:{items:2},
  157.                 992:{items:3}
  158.             }
  159.         });
  160.     });
  161.     </script>
  162. {% endblock %}