templates/front/homepage/homepage-7.html.twig line 1

Open in your IDE?
  1. {% extends 'front/page.html.twig' %}
  2. {% trans_default_domain 'front' %}
  3. {% import "front/_shared/macros.html.twig" as macro %}
  5. {% block body_class %}{{ parent() }} {% endblock %}
  7. {%  block meta_title %}{{ page.metaTitle }}{% endblock %}
  8. {%  block meta_description %}{{ page.metaDescription }}{% endblock %}
  10. {% block header_class %}home-head v3 dark-header{% endblock %}
  12. {% block header_content %}
  13.     <div class="masterhead">
  14.         <div class="content">
  15.             <h1>
  16.                 Vivre <span>ensemble</span>
  17.                 <br>pour <span>vivre mieux</span>
  18.             </h1>
  19.             <p class="intro">Coliving pour étudiants et jeunes actifs : meublé, décoré et équipé pour une qualité de vie en communauté inégalable</p>
  20.         </div>
  21.         <form class="search" action="{{ path('front_search_index') }}">
  22.             <select>
  23.                 <option>Où vivrez-vous ?</option>
  24.                 <option value="lyon">Lyon et grand Lyon</option>
  25.             </select>
  26.             <input type="submit" class="cta-search" value="">
  27.         </form>
  28.     </div>
  29. {% endblock %}
  31. {% block page_content %}
  33.     <section class="container accommodations-list">
  34.         <div>
  35.             <div class="left">
  36.                 <div class="owl-carousel carousel-hp-v6" data-controller="carousel" data-type="hp-v6" data-external-controls="carousel-hp-v6-controls">
  37.                     {% for accommodation in accommodations %}
  38.                         <div class="item">
  39.                             {% include 'front/search/accommodation-card.html.twig' with {accommodation: accommodation, hideSlider: true, altText: true, class: 'simple', thumbFilterName: 'accommodation_square_thumb'} %}
  40.                         </div>
  41.                     {% endfor %}
  42.                 </div> <!-- carousel -->
  43.             </div>
  44.             <div id="carousel-hp-v6-controls" class="arrow">
  45.                 <button class="prevBtn btn-prev" aria-label="précédent"><img src="{{ asset('build/images/icons/icon_arrow_left.svg') }}" alt="left"></button>
  46.                 <button class="nextBtn btn-next" aria-label="suivant"><img src="{{ asset('build/images/icons/icon_arrow_right.svg') }}" alt="right"></button>
  47.             </div>
  48.         </div>
  49.     </section>
  51.     <div class="title-container mt-3">
  52.         <h2 class="font-weight-bold text-center">Le coliving, <span class="font-italic text-primary">réimaginé</span></h2>
  53.     </div>
  55.     <main class="home-bg-second v4">
  56.         <div class="container home-reassurance-image right">
  57.             <div class="image-container">
  58.                 <img src="{{ asset('build/images/home/home_7_1.jpg') }}" alt="left">
  59.             </div>
  60.             <div class="row reassurances">
  61.                 <a href="{{ path('front_search_index') }}" class="col-6 col-md-12 reassurance">
  62.                     <img class="icon" src="{{ asset('build/images/icons/icon_hand.svg') }}" alt="">
  63.                     <div class="title">
  64.                         Réservez
  65.                         <strong>votre chambre</strong>
  66.                     </div>
  67.                     <p>
  68.                         En quelques clics, signez votre bail et emménagez&nbsp;!
  69.                     </p>
  70.                 </a>
  71.                 <a href="{{ path('front_page_comfort') }}" class="col-6 col-md-12 reassurance">
  72.                     <img class="icon" src="{{ asset('build/images/icons/icon_seat.svg') }}" alt="">
  73.                     <div class="title d-none d-sm-block">
  74.                         Des logements
  75.                         <strong>décorés et suréquipés</strong>
  76.                     </div>
  77.                     <div class="title d-block d-sm-none">
  78.                         <strong>Décorés</strong> et <strong>suréquipés</strong>
  79.                     </div>
  80.                     <p>
  81.                         Prêt à vivre ! Il ne manque
  82.                         <br>rien à part vous !
  83.                     </p>
  84.                 </a>
  85.             </div>
  86.         </div>
  88.         <section class="faq small mt-3 mb-3" style="padding-top: 0;">
  89.             <div class="faq-ctn box-shadow">
  90.                 <div class="container d-flex justify-content-between">
  91.                     <h2><strong>{{ totalAccommodations }}</strong>&nbsp;colivings disponibles à Lyon !</h2>
  92.                     <a href="{{ path('front_search_index') }}" class="faq-link" style="width: auto;">Découvrez nos autres biens</a>
  93.                 </div>
  94.             </div>
  95.         </section>  <!-- faq -->
  97.         <div class="container home-reassurance-image left">
  98.             <div class="image-container">
  99.                 <img src="{{ asset('build/images/home/home_7_2.jpg') }}" alt="left">
  100.             </div>
  101.             <div class="row reassurances">
  102.                 <a href="{{ path('front_page_services') }}" class="col-6 col-md-12 reassurance">
  103.                     <img class="icon" src="{{ asset('build/images/icons/icon_smile.svg') }}" alt="">
  104.                     <div class="title">
  105.                         Un quotidien
  106.                         <strong>sans contrainte</strong>
  107.                     </div>
  108.                     <p>
  109.                         Tout est inclus ! Aucune dépense supplémentaire
  110.                     </p>
  111.                 </a>
  112.                 <a href="{{ path('front_search_index') }}" class="col-6 col-md-12 reassurance">
  113.                     <img class="icon" src="{{ asset('build/images/icons/icon_position.svg') }}" alt="">
  114.                     <div class="title">
  115.                         Des emplacements
  116.                         <strong>attractifs</strong>
  117.                     </div>
  118.                     <p>
  119.                         Toujours à proximité d’un métro, d’un bus ou d’un tram !
  120.                     </p>
  121.                 </a>
  122.             </div>
  123.         </div>
  125.         <div class="container live-better-container" style="margin-top: 3em;">
  127.             <div class="title-container with-bg mb-3">
  128.                 <h2 class="font-weight-bold text-center">Pourquoi <span class="font-italic text-primary">choisir Citizens</span> ?</h2>
  129.             </div>
  130.             <div id="live-better" class="categories-images" data-controller="home-categories-images">
  131.                 <div class="d-sm-none">
  132.                     <img class="illustration-mobile-1 d-block" style="width: calc(100% - 30px)" src="{{ asset('build/images/pages/community_1.jpg') }}" alt="">
  133.                 </div>
  134.                 <div class="categories box-shadow">
  135.                     <ul class="categories-list">
  136.                         <li class="active" data-action="mouseenter->home-categories-images#change" data-image="{{ asset('build/images/pages/home_category_1_alt.jpg') }}">
  137.                             <a href="{{ path('front_page_services') }}">
  138.                                 <img class="icon" src="{{ asset('build/images/icons/icon_paper.svg') }}" style="width: 28px;" alt="">
  139.                                 <span class="content">
  140.                                     <span>Toutes charges incluses</span>
  141.                                     <small>Electricité, eau, chauffage, Netflix, Internet, assurances…</small>
  142.                                 </span>
  143.                             </a>
  144.                         </li>
  145.                         <li data-action="mouseenter->home-categories-images#change" data-image="{{ asset('build/images/pages/home_category_2.jpg') }}">
  146.                             <a href="{{ path('front_page_services') }}">
  147.                                 <img class="icon" src="{{ asset('build/images/icons/icon_vaccum.svg') }}" alt="">
  148.                                 <span class="content">
  149.                                     <span>Ménage & Produits bio</span>
  150.                                     <small>Le propre tous les 15 jours, avec réassort de produits d’hygiène et d’entretien bio.</small>
  151.                                 </span>
  152.                             </a>
  153.                         </li>
  154.                         <li data-action="mouseenter->home-categories-images#change" data-image="{{ asset('build/images/pages/home_category_3.jpg') }}">
  155.                             <a href="{{ path('front_page_services') }}">
  156.                                 <img class="icon" src="{{ asset('build/images/icons/icon_food.svg') }}" alt="">
  157.                                 <span class="content">
  158.                                     <span>Nourriture bio</span>
  159.                                     <small>Un pack d’alimentation bio vous est offert tous les 15 jours.</small>
  160.                                 </span>
  161.                             </a>
  162.                         </li>
  163.                         <li data-action="mouseenter->home-categories-images#change" data-image="{{ asset('build/images/pages/home_category_4.jpg') }}">
  164.                             <a href="{{ path('front_page_community') }}">
  165.                                 <img class="icon" src="{{ asset('build/images/icons/icon_gaming.svg') }}" alt="">
  166.                                 <span class="content">
  167.                                     <span>Loisirs</span>
  168.                                     <small>Vivez de nouvelles expériences avec des loisirs et activités gratuites.</small>
  169.                                 </span>
  170.                             </a>
  171.                         </li>
  172.                         <li data-action="mouseenter->home-categories-images#change" data-image="{{ asset('build/images/pages/home_category_5.jpg') }}">
  173.                             <a href="{{ path('front_page_services') }}">
  174.                                 <img class="icon" src="{{ asset('build/images/icons/icon_eco.svg') }}" alt="">
  175.                                 <span class="content">
  176.                                     <span>Eco responsable</span>
  177.                                     <small>Des coliving responsables et écologiques.</small>
  178.                                 </span>
  179.                             </a>
  180.                         </li>
  181.                         <li data-action="mouseenter->home-categories-images#change" data-image="{{ asset('build/images/pages/home_category_6.jpg') }}">
  182.                             <a href="{{ path('front_page_benefits_citizens') }}">
  183.                                 <img class="icon" src="{{ asset('build/images/icons/icon_angel.svg') }}" alt="">
  184.                                 <span class="content">
  185.                                     <span>Citoyens</span>
  186.                                     <small>Cours de self defense, brevet de secourisme inclus</small>
  187.                                 </span>
  188.                             </a>
  189.                         </li>
  190.                     </ul>
  191.                 </div>
  192.                 <div class="d-sm-none">
  193.                     <img class="illustration-mobile-2 d-block" style="width: calc(100% - 30px)" src="{{ asset('build/images/pages/home_9_3.jpg') }}" alt="">
  194.                 </div>
  195.                 <div class="images">
  196.                     <div class="image" style="background-image: url({{ asset('build/images/pages/home_category_1_alt.jpg') }})"></div>
  197.                 </div>
  198.             </div>
  199.         </div>
  201.         {% include "front/_shared/faq-3.html.twig" %}
  203.     </main> <!-- home-bg-second -->
  205. {% endblock %}
  207. {% block stylesheets %}
  208.     {{ parent() }}
  209.     {{ encore_entry_link_tags('page-homepage-6') }}
  210. {% endblock %}