templates/front/static/vendre.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %} - Vendre avec Sublimons{% endblock %}
  4. {% block meta_description %}Réalisons ensemble votre projet et offrez vous le meilleur de la transaction. Nos conseillers utilisent les dernières technologies afin de valoriser votre bien immobilier. Un accompagnement technique et humain pour une transaction assurée !{% endblock %}
  6. {% block content %}
  7. <div id="carousel" class="carousel slide" data-ride="carousel">
  8.   <div class="carousel-inner">
  9.     <div class="carousel-item active">
  10.         <div class="carousel_image  d-none d-lg-block" style="background-image: url({{ asset('assets/media/vendre/header.jpg') | imagine_filter('stream_header') }});"></div>
  11.         <div class="carousel_image d-lg-none" style="background-image: url({{ asset('assets/media/vendre/header_square.jpg') | imagine_filter('stream_header_square') }});"></div>
  12.         <div class="carousel_content d-flex align-items-center justify-content-center">
  13.             <div class="text-white text-center px-3 my-3 py-3 ">
  14.                 <div class="carousel_title mb-2 mb-lg-3">RÉALISONS <span class="d-none d-sm-inline">ENSEMBLE</span> <span class="d-block d-sm-inline">VOTRE PROJET</span></div>
  15.                 <div class="d-none d-sm-block carousel_baseline mb-3 mb-lg-4 mb-xl-5">OFFREZ-VOUS LE MEILLEUR DE LA TRANSACTION !</div>
  17.                 <div class="mt-4 mt-xl-5 d-none d-sm-block"><a class="btn_popin_contact btn btn-primary btn-lg scroll" href="javascript:void(0)">En savoir +</a></div>
  18.             </div>
  19.         </div>
  20.     </div>
  21.   </div>
  22. </div>
  24. <section id="outils" class="container py-5 presentation text-center">
  25.     <h2 class="section_title">Des outils et des services<span class="d-none d-sm-inline"> d'exception pour réussir sa transaction<span></h2>
  27.     <hr class="separateur-rouge" />
  28.     <div class="row pt-4">
  29.         <div class="col-lg-4 text-lg-right pt-3 px-5 mx-sm-5 mx-lg-0">
  30.             <div class="mb-3 px-md-5 px-lg-0 mx-md-5 mx-lg-0">
  31.                 <i class="icon-stat"></i>
  32.                 <h4>Transaction rapide</h4>
  33.                 <p>Nos propriétaires vendeurs mettent en moyenne 54 jours pour signer une promesse de vente</p>
  34.             </div>
  35.             <div class="mb-3 px-md-5 px-lg-0 mx-md-5 mx-lg-0">
  36.                 <i class="icon-home"></i>
  37.                 <h4>Mise en valeur offerte</h4>
  38.                 <p>Notre photographe mettra votre bien immobilier sur son « 31 » pour qu’il séduise au premier coup d’oeil.</p>
  39.             </div>
  40.             <div class="mb-3 px-md-5 px-lg-0 mx-md-5 mx-lg-0">
  41.                 <i class="icon-estimation"></i>
  42.                 <h4>Estimation précise</h4>
  43.                 <p>Nos conseillers vous aideront à comprendre votre prix de vente et à mieux le placer sur le marché.</p>
  44.             </div>
  45.         </div>
  46.         <div class="col-lg-4 text-center">
  47.             <img class="img-fluid" src="{{ asset('assets/media/vendre/Telephone-3.jpg')  }}" />
  48.         </div>
  49.         <div class="col-lg-4 text-lg-left pt-3 px-5 px-5 mx-sm-5 mx-lg-0">
  50.             <div class="mb-3 px-md-5 px-lg-0 mx-md-5 mx-lg-0">
  51.                 <i class="icon-hands"></i>
  52.                 <h4>Conseiller de proximité</h4>
  53.                 <p>Votre conseiller vit et travaille sur votre commune. Il connait le marché immobilier parfaitement</p>
  54.             </div>
  55.             <div class="mb-3 px-md-5 px-lg-0 mx-md-5 mx-lg-0">
  56.                 <i class="icon-graph"></i>
  57.                 <h4>Multidiffusion</h4>
  58.                 <p>Les meilleurs portails de diffusion ont été sélectionnés pour vous afin d’être vus par tous les acquéreurs</p>
  59.             </div>
  60.             <div class="mb-3 px-md-5 px-lg-0 mx-md-5 mx-lg-0">
  61.                 <i class="icon-suivi"></i>
  62.                 <h4>Suivi permanent</h4>
  63.                 <p>Nous vous offrons un suivi et un accompagnement de qualité pour vous tenir informés régulièrement.</p>
  64.             </div>        
  65.         </div>
  66.     </div>
  67. </section>
  69. <section class="container py-5">
  70.     <div class="txt-compteur text-center count">{{ nombre_aquereurs }}</div>   
  71.     <h2 class="section_title">acquéreurs recherchent un bien immobilier sur notre site</h2>
  72.     <hr class="separateur-rouge" />
  73.     <div class="owl-carousel small pt-4 comments" id="aquereurs">
  74.         {% for purchaser in purchasers %}
  75.                 <div class="card m-1">
  76.                     <div class="card-header d-flex bg-white">
  77.                         {# <img class="mr-3" width="36px" height="36px" src="{{ asset('assets/media/vendre/Loupe-3.png') }}"> #}
  78.                         <i class="icon-search"></i>
  79.                         <div><b>{{ purchaser.nom }}</b><div class="text-secondary">{{ purchaser.type }} - {{ purchaser.ville }} - {{ purchaser.surface }}</div></div>
  80.                     </div>
  81.                     <div class="card-body">
  82.                         {# <cite class="card-text text-secondary">{{ purchaser.commentaire|striptags|raw|nl2br  }}</cite> #}
  83.                         <cite class="card-text text-secondary">{{ purchaser.commentaire|striptags('<br>')|raw }}</cite>
  84.                     </div>
  85.                 </div>
  86.         {% endfor %}
  87.     </div>
  88. </section>
  90. <section class="container-fluid pt-5">
  91.     <div class="row">
  92.         <div class="col-md-6 mx-3 mx-md-0 bloc_txt_image text-white" >
  93.             <div class="bg_image" style="background-image: url({{ asset('assets/media/vendre/Rendez-vous-1024x702.png') }});"></div>
  94.             <div class="overlay"></div>
  95.             <div class="content" >
  96.                 <div class="mx-3 my-5 m-xl-5 p-xl-5 d-flex align-items-center text-center">
  97.                     <div class="w-100">
  98.                         <h2 class="mb-4">UN RENDEZ-VOUS ?</h2>
  99.                         <p class="mb-5">Contactez directement le conseiller de votre secteur. Disponible rapidement, il vous conseillera sur la stratégie à mettre en place pour votre transaction et vous accompagnera pour réaliser votre projet dans les meilleures conditions.</p>
  100.                         <a class="btn btn-outline-light" href="{{ path( 'agents' ) }}">Contacter un conseiller </a>
  101.                     </div>
  102.                 </div>
  103.             </div>
  104.         </div>
  105.         <div class="col-md-6 mx-3 mx-md-0 mt-3 mt-md-0 bloc_txt_image text-white" >
  106.             <div class="bg_image" style="background-image: url({{ asset('assets/media/vendre/Vous-recherchez.jpg') }});"></div>
  107.             <div class="overlay"></div>
  108.             <div class="content" >
  109.                 <div class="mx-3 my-5 my-xl-5 p-xl-5 d-flex align-items-center text-center">
  110.                     <div class="w-100">
  111.                         <h2 class="mb-4">UNE ESTIMATION RAPIDE ?</h2>
  112.                         <p class="mb-5">Vous souhaitez vous faire une idée du prix de vente de votre bien immobilier ? Remplissez notre formulaire en ligne et découvrez immédiatement sa valeur théorique. L’avis de notre conseiller vous permettra d’affiner cette estimation.</p>
  113.                         <a class="btn btn-outline-light" href="{{ path( 'estimation' ) }}">Estimer en ligne</a>
  114.                     </div>
  115.                 </div>
  116.             </div>
  117.         </div>
  118.     </div>
  119. </section>
  121. <section class="container container-lg py-5">
  122.     <h2 class="section_title">Nos dernières réussites</h2>
  123.     <hr class="separateur-rouge" />        
  124.     {{ render(controller('App\\Controller\\Front\\HomeController::lastEstates'))  }}
  125. </section>
  127. {% endblock %}
  129. {% block stylesheets %}
  130.     {{ parent() }}
  131.     <link href="{{ asset('assets/vendor/OwlCarousel2-2.3.4/dist/assets/owl.carousel.min.css') }}" rel="stylesheet" >
  132.     <link href="{{ asset('assets/vendor/OwlCarousel2-2.3.4/dist/assets/owl.theme.default.min.css') }}" rel="stylesheet" >
  133. {% 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>
  141.     jQuery(document).ready(function(){ 
  142.         //Animation du nomn d'aquéreurs
  143.         $('.count').each(function () {
  144.             $(this).prop('Counter',0).animate({
  145.                 Counter: $(this).text()
  146.             }, {
  147.                 duration: 3000,
  148.                 easing: 'swing',
  149.                 step: function (now) {
  150.                     $(this).text(Math.ceil(now));
  151.                 }
  152.             });
  153.         });
  156.         $("#aquereurs").owlCarousel({
  157.             loop:true,
  158.             autoplay:true,
  159.             autoplayTimeout:owl_speed,
  160.             autoplayHoverPause:true,
  161.             smartSpeed:500,
  162.             margin:30,
  163.             nav:false,
  164.             responsive:{
  165.                 0:{items:1},
  166.                 767:{items:2},
  167.                 991:{items:3}
  168.             }
  169.         });
  170.     });
  172.     </script>
  173. {% endblock %}