templates/front/homepage/homepage-4.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="v3-bg">
  14.         <div class="home-search-container container-fluid">
  15.             <div class="intro-ctn box-shadow">
  16.                 <h1>
  17.                     Vivre <span>ensemble</span>
  18.                     <br>pour <span>vivre mieux</span>
  19.                 </h1>
  20.                 <p class="intro">Coliving pour étudiants et jeunes actifs : meublé, décoré et équipé pour une qualité de vie en communauté inégalable</p>
  21.                 <div class="search">
  22.                     <form action="{{ path('front_search_index') }}" class="box-shadow">
  23.                         <select>
  24.                             <option>Recherchez votre logement par ville</option>
  25.                             <option value="lyon">Lyon et grand Lyon</option>
  26.                         </select>
  27.                         <input type="submit" value="OK">
  28.                     </form>
  29.                 </div>
  30.             </div>
  31.             <img class="illustration" src="{{ asset('build/images/pages/home_9_1.jpg') }}" alt="Le futur du coliving">
  32.         </div>
  33.     </div>
  34. {% endblock %}
  36. {% block page_content %}
  38.     <main class="home-bg-second v4">
  40.         <a href="{{ path('front_search_index') }}" class="container reassurances-title">
  41.             <h2>Trouver et réserver <span>votre logement facilement</span></h2>
  42.             <p>Prix à partir de <span class="text-primary">500€/mois</span></p>
  43.         </a>
  45.         <div class="row reassurances">
  46.             <a href="{{ path('front_search_index') }}" class="col-6 col-md-3 reassurance">
  47.                 <img class="icon" src="{{ asset('build/images/icons/icon_hand.svg') }}" alt="">
  48.                 <div class="title">
  49.                     Réservez
  50.                     <strong>votre chambre</strong>
  51.                 </div>
  52.                 <p>
  53.                     En quelques clics, signez votre bail et emménagez&nbsp;!
  54.                 </p>
  55.             </a>
  56.             <a href="{{ path('front_page_comfort') }}" class="col-6 col-md-3 reassurance">
  57.                 <img class="icon" src="{{ asset('build/images/icons/icon_seat.svg') }}" alt="">
  58.                 <div class="title d-none d-sm-block">
  59.                     Des logements
  60.                     <strong>décorés et suréquipés</strong>
  61.                 </div>
  62.                 <div class="title d-block d-sm-none">
  63.                     <strong>Décorés</strong> et <strong>suréquipés</strong>
  64.                 </div>
  65.                 <p>
  66.                     Prêt à vivre ! Il ne manque
  67.                     <br>rien à part vous !
  68.                 </p>
  69.             </a>
  70.             <a href="{{ path('front_page_services') }}" class="col-6 col-md-3 reassurance">
  71.                 <img class="icon" src="{{ asset('build/images/icons/icon_smile.svg') }}" alt="">
  72.                 <div class="title">
  73.                     Un quotidien
  74.                     <strong>sans contrainte</strong>
  75.                 </div>
  76.                 <p>
  77.                     Tout est inclus ! Aucune dépense supplémentaire
  78.                 </p>
  79.             </a>
  80.             <a href="{{ path('front_search_index') }}" class="col-6 col-md-3 reassurance">
  81.                 <img class="icon" src="{{ asset('build/images/icons/icon_position.svg') }}" alt="">
  82.                 <div class="title">
  83.                     Des emplacements
  84.                     <strong>attractifs</strong>
  85.                 </div>
  86.                 <p>
  87.                     Toujours à proximité d’un métro, d’un bus ou d’un tram !
  88.                 </p>
  89.             </a>
  90.         </div>
  92.         <div id="live-better" class="categories-images" data-controller="home-categories-images">
  93.             <div class="d-sm-none">
  94.                 <img class="illustration-mobile-1 d-block" style="width: calc(100% - 30px)" src="{{ asset('build/images/pages/community_1.jpg') }}" alt="">
  95.             </div>
  96.             <div class="categories box-shadow">
  97.                 <h2><span>Economisez</span> et <span>vivez&nbsp;mieux !</span></h2>
  98.                 <p class="intro" style="max-width: 530px;">
  99.                     Profitez des avantages d’un <span class="text-primary">hôtel 5 *</span> avec la convivialité de la vie en communauté ! Entrez dans une nouvelle vie.
  100.                 </p>
  101.                 <ul class="categories-list">
  102.                     <li class="active" data-action="mouseenter->home-categories-images#change" data-image="{{ asset('build/images/pages/home_category_1_2.jpg') }}">
  103.                         <a href="{{ path('front_page_services') }}">
  104.                             <img class="icon" src="{{ asset('build/images/icons/icon_paper.svg') }}" style="width: 28px;" alt="">
  105.                             <span class="content">
  106.                                 <span>Toutes charges incluses</span>
  107.                                 <small>Electricité, eau, chauffage, internet, Netflix, assurances…</small>
  108.                             </span>
  109.                         </a>
  110.                     </li>
  111.                     <li data-action="mouseenter->home-categories-images#change" data-image="{{ asset('build/images/pages/home_category_2.jpg') }}">
  112.                         <a href="{{ path('front_page_services') }}">
  113.                             <img class="icon" src="{{ asset('build/images/icons/icon_vaccum.svg') }}" alt="">
  114.                             <span class="content">
  115.                                 <span>Ménage & Produits bio</span>
  116.                                 <small>Le propre tous les 15 jours, avec réassort de produits bio hygiène & entretien</small>
  117.                             </span>
  118.                         </a>
  119.                     </li>
  120.                     <li data-action="mouseenter->home-categories-images#change" data-image="{{ asset('build/images/pages/home_category_3_2.jpg') }}">
  121.                         <a href="{{ path('front_page_services') }}">
  122.                             <img class="icon" src="{{ asset('build/images/icons/icon_food.svg') }}" alt="">
  123.                             <span class="content">
  124.                                 <span>Nourriture bio</span>
  125.                                 <small>Le plein de première nécessité ! Vous avez à manger !</small>
  126.                             </span>
  127.                         </a>
  128.                     </li>
  129.                     <li data-action="mouseenter->home-categories-images#change" data-image="{{ asset('build/images/pages/home_category_4_2.jpg') }}">
  130.                         <a href="{{ path('front_page_community') }}">
  131.                             <img class="icon" src="{{ asset('build/images/icons/icon_gaming.svg') }}" alt="">
  132.                             <span class="content">
  133.                                 <span>Loisirs</span>
  134.                                 <small>Des loisirs et activités gratuites pour vivre de nouvelles expériences</small>
  135.                             </span>
  136.                         </a>
  137.                     </li>
  138.                     <li data-action="mouseenter->home-categories-images#change" data-image="{{ asset('build/images/pages/home_category_5_2.jpg') }}">
  139.                         <a href="{{ path('front_page_services') }}">
  140.                             <img class="icon" src="{{ asset('build/images/icons/icon_eco.svg') }}" alt="">
  141.                             <span class="content">
  142.                                 <span>Des coliving responsables</span>
  143.                                 <small>Des coliving responsable pour protéger la planète </small>
  144.                             </span>
  145.                         </a>
  146.                     </li>
  147.                     <li data-action="mouseenter->home-categories-images#change" data-image="{{ asset('build/images/pages/home_category_6.jpg') }}">
  148.                         <a href="{{ path('front_page_benefits_citizens') }}">
  149.                             <img class="icon" src="{{ asset('build/images/icons/icon_angel.svg') }}" alt="">
  150.                             <span class="content">
  151.                                 <span>Citoyens</span>
  152.                                 <small>Cours de self defense, brevet de secourisme inclus</small>
  153.                             </span>
  154.                         </a>
  155.                     </li>
  156.                 </ul>
  157.             </div>
  158.             <div class="d-sm-none">
  159.                 <img class="illustration-mobile-2 d-block" style="width: calc(100% - 30px)" src="{{ asset('build/images/pages/home_9_3.jpg') }}" alt="">
  160.             </div>
  161.             <div class="images">
  162.                 <div class="image" style="background-image: url({{ asset('build/images/pages/home_category_1_2.jpg') }})"></div>
  163.             </div>
  164.         </div>
  166.         {% include 'front/homepage/sections/price-compare-2.html.twig' %}
  168.         <section class="container homes d-none d-sm-block">
  169.             <div class="d-flex">
  170.                 <div class="left">
  171.                     <div class="owl-carousel carousel-hp-v4" data-controller="carousel" data-type="hp-v4" data-external-controls="carousel-hp-v4-controls">
  172.                         {% for accommodation in accommodations %}
  173.                             <div class="item">
  174.                                 {% include 'front/search/accommodation-card.html.twig' with {accommodation: accommodation, hideSlider: true, class: 'simple'} %}
  175.                             </div>
  176.                         {% endfor %}
  177.                     </div> <!-- carousel -->
  178.                 </div>
  179.                 <div class="right">
  180.                     <div id="carousel-hp-v4-controls" class="arrow">
  181.                         <button class="nextBtn" aria-label="précédent"><img src="{{ asset('build/images/icons/arrow-left.png') }}" alt="left"></button>
  182.                         <button class="prevBtn" aria-label="suivant"><img src="{{ asset('build/images/icons/arrow-right.png') }}" alt="right"></button>
  183.                     </div>
  184.                     <h2>Votre <span>chez vous</span></h2>
  185.                     <p>Vivez dans votre ville préférée, créez des liens avec notre communauté diversifiée et vivez une véritable liberté avec une commodité infinie et une flexibilité totale.</p>
  186.                     <a href="{{ path('front_search_index') }}" class="cta">Trouvez votre logement</a>
  187.                 </div>
  188.             </div>
  189.         </section>
  191.         <section class="container homes homes-mobile d-sm-none">
  192.             <div class="right">
  193.                 <h2>Votre <span>chez vous</span></h2>
  194.                 <p>Vivez dans votre ville préférée, créez des liens avec notre communauté diversifiée et vivez une véritable liberté avec une commodité infinie et une flexibilité totale.</p>
  195.             </div>
  196.             {% for accommodation in accommodations|slice (0, 3) %}
  197.                 <div class="item">
  198.                     {% include 'front/search/accommodation-card.html.twig' with {accommodation: accommodation, hideSlider: true, class: 'simple'} %}
  199.                 </div>
  200.             {% endfor %}
  201.             <div class="right cta-container">
  202.                 <a href="{{ path('front_search_index') }}" class="cta">Trouvez votre logement</a>
  203.             </div>
  204.         </section>
  206.         {% include 'front/homepage/sections/testimonials.html.twig' %}
  208.         {% include 'front/_shared/faq.html.twig' %}
  210.     </main> <!-- home-bg-second -->
  212. {% endblock %}
  214. {% block stylesheets %}
  215.     {{ parent() }}
  216.     {{ encore_entry_link_tags('page-homepage-4') }}
  217. {% endblock %}