templates/front/pages/services.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 %}dark-header{% endblock %}
  12. {% block header_content %}{% endblock %}
  14. {% block page_content %}
  16.     <div id="page-content" class="container">
  17.         <div class="page-header">
  18.             <h1>Les services <span>Citizens</span></h1>
  19.             <p class="intro">Vous pouvez être serein, nous nous occupons de tout ! Vous ne vous occupez de rien, vous n’avez qu’à piloter vos services dans le canapé via notre application Citizens.</p>
  20.         </div>
  22.         <div class="block-image-text type-3">
  23.             <img src="{{ asset('build/images/benefits/bg-circle.png') }}" class="bg-circle" alt="">
  24.             <div class="illustration bg-shape shape-3">
  25.                 <img src="{{ asset('build/images/benefits/benefit_service_1.jpg') }}" alt="">
  26.             </div>
  27.             <div class="content">
  28.                 <h2 class="title">Profitez de <span>bonnes surprises</span> !</h2>
  29.                 <p style="max-width: 500px;">Tout est inclus dans votre loyer et votre contrat de services, vous n’avez pas de coût additionnel !</p>
  30.             </div>
  31.         </div>
  33.         <!--div class="block-image-text type-4">
  34.             <div class="illustration bg-shape shape-4">
  35.                 <img src="{{ asset('build/images/benefits/benefit_service_2.jpg') }}" alt="">
  36.             </div>
  37.             <div class="content-container">
  38.                 <div class="content">
  39.                     <h2 class="title">Services <span>sur mesure</span></h2>
  40.                     <ul class="check-list">
  41.                         <li>Conciergerie pour répondre à tout besoin « vie quotidienne », administratif, santé, loisirs…</li>
  42.                         <li>Service d’aide à l’emménagement (picking à l'aéroport ou à la gare)</li>
  43.                         <li>Prêt de matériel (imprimante, vélo électrique, appareil à raclette, TV, meubles, luminaires …)</li>
  44.                     </ul>
  45.                 </div>
  47.                 <div class="content content-2">
  48.                     <h3 class="title">Vous voulez <span>changer de Coliving ?</span></h3>
  49.                     <p>Possibilité de changer de Coliving à tout moment <strong class="primary">pour 99 euros sans repayer de caution</strong> via notre site internet</p>
  50.                 </div>
  51.             </div>
  52.         </div-->
  54.         <div class="membership">
  56.             {% set prices = [
  57.                 {label: 'Nourriture de première nécessité', price1: '110€', price2: '105€', price3: 'Inclus'},
  58.                 {label: 'Produits d’entretien bio', price1: '30€', price2: '15€', price3: 'Inclus'},
  59.                 {label: 'Maintenance en 48h', price1: 'N/A', price2: 'N/A', price3: 'Inclus'},
  60.                 {label: 'Ménage', price1: '60€', price2: '30€', price3: 'Inclus'},
  61.                 {label: 'Activités', price1: '50€', price2: '30€', price3: 'Inclus'},
  62.                 {label: 'Loisirs', price1: 'N/A', price2: 'N/A', price3: 'Inclus'},
  63.                 {label: 'Netflix', price1: '8,99€', price2: '13,49€', price3: 'Inclus'},
  64.                 {label: 'Internet', price1: '40€', price2: '20€', price3: 'Inclus'},
  65.                 {label: 'Assurance', price1: '25€', price2: '25€', price3: 'Inclus'},
  66.                 {label: 'Chaudière', price1: '100€', price2: '50€', price3: 'Inclus'},
  67.                 {label: 'Gaz', price1: '20€', price2: '20€', price3: 'Inclus'},
  68.                 {label: 'Eau', price1: '15€', price2: '15€', price3: 'Inclus'},
  69.                 {label: 'Electricité', price1: '50€', price2: '30€', price3: 'Inclus'},
  70.             ] %}
  72.             <section class="better-way mb-4">
  73.                 <h2>Une meilleure <span class="text-primary font-weight-bold font-italic">qualité de vie</span></h2>
  74.                 <p>Nos formules tout compris vous permettent de gérer vos dépenses avec plus de tranquilité.</p>
  75.                 <div class="row plans">
  76.                     <div class="col-3 first">
  77.                         <div class="title-case"></div>
  78.                         {% for price in prices %}
  79.                             <div class="case">
  80.                                 {{ price.label }}
  81.                             </div>
  82.                         {% endfor %}
  83.                     </div> <!-- first column -->
  84.                     <div class="col-3 second">
  85.                         <div class="title-case">
  86.                             <h3>Vivre seul</h3>
  87.                         </div>
  88.                         {% for price in prices %}
  89.                             <div class="case">
  90.                                 {{ price.price1 }}
  91.                             </div>
  92.                         {% endfor %}
  93.                     </div>
  94.                     <div class="col-3 third">
  95.                         <div class="title-case">
  96.                             <h3>Autres colocations</h3>
  97.                         </div>
  98.                         {% for price in prices %}
  99.                             <div class="case">
  100.                                 {{ price.price2 }}
  101.                             </div>
  102.                         {% endfor %}
  103.                     </div>
  104.                     <div class="col-3 featured">
  105.                         <div class="title-case" style="color: #FFF; padding: 0 5px">
  106.                             <img style="max-width: 100%;" src="{{ asset('build/images/logo_white.svg') }}" alt="Citizens">
  107.                         </div>
  108.                         {% for price in prices %}
  109.                             <div class="case">
  110.                                 {{ price.price3 }}
  111.                             </div>
  112.                         {% endfor %}
  113.                     </div>
  114.                 </div>
  115.             </section>
  117.             <div style="margin-top: -1em;">
  118.                 <small>* montant à titre indicatif</small>
  119.             </div>
  120.         </div>
  122.         <br>
  123.         <br>
  125.         <div class="block-image-text type-services-1">
  126.             <img src="{{ asset('build/images/benefits/bg-circle.png') }}" class="bg-circle-2" alt="">
  127.             <div class="illustration bg-shape shape-6">
  128.                 <img src="{{ asset('build/images/benefits/benefit_service_5.jpg') }}" alt="">
  129.             </div>
  130.             <div class="content">
  131.                 <h2 class="title">Le grand <span>frère</span></h2>
  132.                 <p>Tout locataire signe une charte du bien vivre ensemble pour permettre à tout le monde d’être bien chez soi.</p>
  133.                 <p>Le grand frère est là pour vous aider au quotidien en cas de manquement au respect de cette charte.</p>
  134.             </div>
  135.         </div>
  137.         <div class="block-image-text type-services-2">
  138.             <div class="illustration">
  139.                 <img src="{{ asset('build/images/benefits/benefit_service_6.png') }}" alt="">
  140.             </div>
  141.             <div class="content">
  142.                 <h2 class="title">Une appli <span>pour tout piloter</span></h2>
  143.                 <p>Vous pilotez tout via notre application : maintenance, signature de bail, dédite, inscription à des loisirs, état des lieux, conciergerie, changement de coliving.</p>
  144.             </div>
  145.         </div>
  147.         <div class="block-image-text type-services-3">
  148.             <div class="content">
  149.                 <h2 class="title">Changer <span>de coliving</span></h2>
  150.                 <p>Vous avez envie de changement, un coliving vous plaît plus ?</p>
  151.                 <p>Aucun problème, vous changez de coliving pour 99 euros sans frais supplémentaire (hors montant de caution différent).</p>
  152.             </div>
  153.         </div>
  155.         <div class="block-image-text type-5">
  156.             <div class="illustration bg-shape shape-5">
  157.                 <img src="{{ asset('build/images/benefits/benefit_service_3.jpg') }}" alt="">
  158.             </div>
  159.             <div class="content">
  160.                 <img class="lines" src="{{ asset('build/images/benefits/bg-lines-2.png') }}" alt="">
  161.                 <h2 class="title"><span>Ménage</span></h2>
  162.                 <p>
  163.                     Les zones de vie commune sont nettoyées avec soin tous les 15 jours vous permettant de profiter d’espaces propres et entretenus.
  164.                     <br>Vous pouvez également bénéficier en option du ménage dans votre espace personnel.
  165.                 </p>
  166.             </div>
  167.         </div>
  169.         <div class="block-image-text type-6">
  170.             <div class="illustration bg-shape shape-6">
  171.                 <img src="{{ asset('build/images/benefits/benefit_service_4.jpg') }}" alt="">
  172.             </div>
  173.             <div class="content">
  174.                 <h2 class="title"><span>Maintenance </span></h2>
  175.                 <p>
  176.                     Un problème de support technique ou de maintenance ?
  177.                     <br>Connectez-vous sur l’application « Citizens » où nos équipes se tiennent à disposition pour vous assister et intervenir sous 24h.
  178.                 </p>
  179.             </div>
  180.         </div>
  182.         <div class="other-benefits">
  183.             {% include 'front/pages/benefits/_shared/other-benefit-title.html.twig' %}
  184.             {% include 'front/pages/benefits/_shared/other-benefit-quality.html.twig' %}
  185.             {% include 'front/pages/benefits/_shared/other-benefit-pleasure.html.twig' %}
  186.             {% include 'front/pages/benefits/_shared/other-benefit-citizens.html.twig' %}
  187.         </div>
  189.         {% include 'front/pages/benefits/_shared/more-details-push.html.twig' %}
  191.         {% include "front/_shared/faq.html.twig" %}
  192.     </div>
  194. {% endblock %}
  196. {% block stylesheets %}
  197.     {{ parent() }}
  198.     {{ encore_entry_link_tags('page-services') }}
  199. {% endblock %}