templates/front/pages/sections/investors-timeline.html.twig line 1

Open in your IDE?
  1. <section class="container timeline">
  2.     <h2>
  3.         {% if owner is defined %}
  4.             <span>Commencez à louer</span> en 4 étapes
  5.         {% else %}
  6.             <span>Investir</span> en 4 étapes
  7.         {% endif %}
  8.     </h2>
  9.     <p class="intro" style="max-width: 800px;">Investir ne doit pas être un pari, mais un choix maîtrisé et réfléchi.</p>
  10.     <div class="steps desktop">
  11.         <div class="row step-1">
  12.             <div class="col-0 col-lg-5 order-1">
  14.             </div> <!-- col -->
  15.             <div class="col-3 col-lg-2 order-2 step-icon">
  16.                 <img src="{{ asset('build/images/landlords/step-1.png') }}" alt="step one">
  17.                 <span class="line"></span>
  18.             </div> <!-- col -->
  19.             <div class="col-9 col-lg-5 order-3">
  20.                 <div class="step">
  21.                     {% if owner is defined %}
  22.                         <h3>Obtenir une <span class="font-weight-bold">estimation de rendement</span></h3>
  23.                         <p>A l’aide de vos informations (plans, photos, …), nous vous fournissons une estimation précise de vos futurs rendements locatifs.</p>
  24.                     {% else %}
  25.                         <h3>Définir vos possibilités <span class="font-weight-bold">d’apport et d’emprunt</span></h3>
  26.                         <p>Avec nos équipes et nos banques partenaires, nous trouvons avec vous, la meilleure solution pour votre investissement</p>
  27.                     {% endif %}
  28.                 </div>
  29.             </div> <!-- col -->
  30.         </div> <!-- row step 1 -->
  32.         <div class="row step-2">
  33.             <div class="col-9 col-lg-5 order-2 order-lg-1">
  34.                 <div class="step right text-right">
  35.                     {% if owner is defined %}
  36.                         <h3>Obtenir les <span class="font-weight-bold">devis</span></h3>
  37.                         <p style="max-width: 300px; margin-left: auto;">Nos responsables travaux chiffrent exactement vos travaux et coûts d'ameublement.</p>
  38.                     {% else %}
  39.                         <h3>Définir vos <span class="font-weight-bold">objectifs d’investissement</span></h3>
  40.                         <p style="max-width: 300px; margin-left: auto;">Quelles sont vos attentes ? Quel type de bien ? Quelle localisation ? Quel est le rendement attendu ?</p>
  41.                     {% endif %}
  42.                 </div>
  43.             </div> <!-- col -->
  44.             <div class="col-3 col-lg-2 order-1 order-lg-2 step-icon">
  45.                 <img src="{{ asset('build/images/landlords/step-2.png') }}" alt="step one">
  46.                 <span class="line"></span>
  47.             </div> <!-- col -->
  48.             <div class="col-0 col-lg-5 order-3">
  50.             </div> <!-- col -->
  51.         </div> <!-- row step 2 -->
  53.         <div class="row step-3">
  54.             <div class="col-0 col-lg-5 order-1">
  56.             </div> <!-- col -->
  57.             <div class="col-3 col-lg-2 order-2 step-icon">
  58.                 <img src="{{ asset('build/images/landlords/step-3.png') }}" alt="step one">
  59.                 <span class="line"></span>
  60.             </div> <!-- col -->
  61.             <div class="col-9 col-lg-5 order-3">
  62.                 <div class="step">
  63.                     {% if owner is defined %}
  64.                         <h3>Lancer <span class="font-weight-bold">les travaux</span></h3>
  65.                         <p>Nos conducteurs de travaux suivent l’avancement et la qualité des travaux et vous informent via l’application mobile.</p>
  66.                     {% else %}
  67.                         <h3>Choisir le <span class="font-weight-bold">bien idéal</span></h3>
  68.                         <p>Vous avez accès à l’ensemble de nos biens à la vente, vous n’avez plus qu’à choisir parmi ceux répondant à vos critères.</p>
  69.                     {% endif %}
  70.                 </div>
  71.             </div> <!-- col -->
  72.         </div> <!-- row step 3 -->
  74.         <div class="row step-4">
  75.             <div class="col-9 col-lg-5 order-2 order-lg-1">
  76.                 <div class="step right text-right">
  77.                     <h3>Signer le contrat <span class="font-weight-bold">de gestion locative</span></h3>
  78.                     <p>Tout est terminé ! Nous lançons la mise en location de vos futurs locataires, vous suivez l’avancement et le recrutement des locataires.</p>
  79.                 </div>
  80.             </div> <!-- col -->
  81.             <div class="col-3 col-lg-2 order-1 order-lg-2 step-icon">
  82.                 <img src="{{ asset('build/images/landlords/step-4.png') }}" alt="step one">
  83.                 <span class="line"></span>
  84.             </div> <!-- col -->
  85.             <div class="col-0 col-lg-5 order-3">
  87.             </div> <!-- col -->
  88.         </div> <!-- row step 4 -->
  90.     </div> <!-- desktop -->
  92.     <!--  <div class="d-block d-lg-none steps mobile">
  93.           <div class="row step-1">
  94.             <div class="col-2 step-icon">
  95.               <img src="{{ asset('build/images/landlords/step-1.svg') }}" alt="step one">
  96.             </div>
  97.             <div class="col-5">
  98.               <div class="step">
  99.                 <h3>Get an <span>Estimate</span></h3>
  100.                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ullamcorper justo vitae magna elementum, in congue nibh pharetra.</p>
  101.               </div>
  102.             </div>
  103.           </div>
  104.         </div> mobile -->
  106. </section> <!-- timeline -->