templates/home/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}{{ settings[0].siteName }} : bienvenue !{% endblock %}
  5. {% block stylesheets %}
  6. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css">
  7. <!--[if (lt IE 9)]><script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/min/tiny-slider.helper.ie8.js"></script><![endif]-->
  8. {{ parent() }}
  9. {% endblock %}
  11. {% block body %}
  13.     {% for home in homepages %}
  14.         {# Hero + recherche #}
  15.         <div class="container-fluid" style="background-image: url('{{ asset("assets/img/home/" ~ home.heroImage ) }}'); height: 100vh; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
  16.             <div class="container">
  17.                 <div class="row d-flex justify-content-center">
  18.                     <div class="col-lg-10 col-sm-12 text-center py-5">
  19.                         <h5 class="text-uppercase text-white capitalisfont mt-4">{{ home.title }}</h5>
  21.                         <div class="row bg-white mt-4">
  22.                             {{ form_start(form) }}
  23.                             <div class="row">
  24.                                 <div class="col-lg-2 col-sm-12 small text-muted pt-2">
  25.                                     {{ form_row(form.bienType) }}
  26.                                 </div>
  27.                                 <div class="col-lg-3 col-sm-12 small text-muted pt-2">
  28.                                     {{ form_row(form.ville) }}
  29.                                 </div>
  30.                                 <div class="col-lg-2 col-sm-12 small text-muted pt-2">
  31.                                     {{ form_row(form.maxPrice) }}
  32.                                 </div>
  33.                                 <div class="col-lg-2 col-sm-12 small text-muted pt-2">
  34.                                     {{ form_row(form.minSurface) }}
  35.                                 </div>
  36.                                 <div class="col-lg-2 col-sm-12 small text-muted pt-2">
  37.                                     {{ form_row(form.nbPieces) }}
  38.                                 </div>
  39.                                 <div class="col-lg-1 col-sm-12 color-bg d-flex align-items-center justify-content-center">
  40.                                     <button class="btn" type="submit">
  41.                                         <svg style="fill: #fff;" width="45" height="45" id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 283.46 283.46">
  42.                                             <path d="M179.33,24.31c29.29,4.31,51.88,18.92,67.26,44.33,10.63,17.57,15.14,36.86,12.41,57.12-5.46,40.6-28.12,67.39-67.32,79.3-19.08,5.8-38.34,4.53-56.95-2.71-6.32-2.46-12.18-6.11-18.25-9.22-.6-.31-1.18-.65-1.96-1.08-1.05,5.25-4.33,8.85-7.85,12.37-15.53,15.49-31.05,30.98-46.46,46.58-4.18,4.23-8.56,7.91-14.58,9.06h-5.07c-5.23-1.18-10.05-3.28-13.02-7.94-1.77-2.79-2.73-6.09-4.05-9.17,0-1.69,0-3.39,0-5.08,1.18-6.11,4.95-10.51,9.22-14.75,15.72-15.6,31.34-31.31,46.95-47.02,3.3-3.33,6.8-6.23,11.66-7.21-2.08-3.67-4.21-7.12-6.06-10.71-8.91-17.35-12.04-35.74-9.29-55.04,3.82-26.8,17-47.99,39.08-63.46,13.61-9.54,28.89-14.76,45.51-15.93,.6-.04,1.19-.23,1.79-.35,3.23,0,6.46,0,9.69,0,2.43,.3,4.87,.55,7.29,.9Zm56.88,91.63c-.04-38.19-30.9-69.07-68.95-69.01-38.08,.06-69.03,31.07-68.95,69.09,.08,38.08,31.12,69.14,69.02,69.08,38.06-.07,68.91-31.05,68.87-69.15Z"/>
  43.                                         </svg>
  44.                                     </button>
  45.                                 </div>
  46.                             </div>
  47.                             {{ form_end(form) }}
  48.                         </div>
  50.                     </div>
  52.                 </div>
  53.             </div>
  54.         </div>
  56.         {# Coup de coeur #}
  57.         <div class="container-fluid my-5 shadow">
  58.             <div class="row position-relative px-0">
  59.                 <img class="px-0" src="{{ asset('assets/img/home/' ~ home.imageCoeur ) }}" alt="Image coup de Coeur" style="max-height: 100vh; object-fit: cover;">
  60.                 <div class="col-lg-4 col-sm-12 color-bg p-4 mt-5 home-responsive-coeur">
  61.                     <a class="button-white" href="{{ home.buttonUrlcoeur }}">
  62.                         <svg class="me-2" width="25" height="25" viewBox="0 0 16 16">
  63.                             <path fill="currentColor" fill-rule="evenodd"
  64.                                 d="M8 1.314C12.438-3.248 23.534 4.735 8 15C-7.534 4.736 3.562-3.248 8 1.314z" /></svg>
  65.                         {{ home.buttonTextcoeur }}
  66.                     </a>
  67.                     <p class="small text-white mt-4">
  68.                         {{ home.textcoeur|replace({'<div>': '', '</div>': '', '<p>': '', '</p>': ''})|raw }}
  69.                     </p>
  70.                 </div>
  71.             </div>
  72.         </div>
  74.         {# Tous nos biens #}
  75.         <div class="container-fluid">
  76.             <div class="row">
  77.                 <div class="col position-relative px-0">
  78.                     <div class="my-slider tousnosbiens-bg">
  79.                         <!-- Images administrables -->
  80.                         {% if home.imageBien1 != null %}
  81.                             <div>
  82.                                 <img src="{{ asset('assets/img/home/' ~ home.imageBien1) }}" alt="maison1" class="d-block mx-auto w-100">
  83.                             </div>
  84.                         {% else %}
  85.                             <img src="{{ asset('assets/img/maison.jpg') }}" alt="Arenes.immo" class="img-fluid">
  86.                         {% endif %}
  87.                         {% if home.imageBien2 != null %}
  88.                             <div>
  89.                                 <img src="{{ asset('assets/img/home/' ~ home.imageBien2) }}" alt="maison2" class="d-block mx-auto w-100">
  90.                             </div>
  91.                         {% endif %}
  92.                         {% if home.imageBien3 != null %}
  93.                             <div>
  94.                                 <img src="{{ asset('assets/img/home/' ~ home.imageBien3) }}" alt="maison3" class="d-block mx-auto w-100">
  95.                             </div>
  96.                         {% endif %}
  97.                     </div>
  99.                     <div class="row">
  100.                         <div class="tousnosbiens col-lg-4 col-sm-12 color-bg p-4 mt-4">
  101.                             <div class="text-end">
  102.                                 <a class="button-white" href="{{ home.buttonUrlbiens }}">
  103.                                     <svg class="me-3 fw-bold" width="27" height="27" viewBox="0 0 24 24">
  104.                                         <path fill="currentColor"
  105.                                             d="M20 20a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-9H1l10.327-9.388a1 1 0 0 1 1.346 0L23 11h-3v9z" />
  106.                                     </svg>
  107.                                     {{ home.buttonTextbiens }}
  108.                                 </a>
  109.                                 <p class="small text-white mt-5">
  110.                                     {{ home.textbiens|replace({'<div>': '', '</div>': '', '<p>': '', '</p>': ''})|raw }}
  111.                                 </p>
  112.                             </div>
  113.                         </div>
  114.                     </div>
  116.                     <div class="d-flex justify-content-center container-fleches">
  117.                         <div class="previous-arrow mx-5">
  118.                             <svg style="fill: #fff; font-weight: bold;" width="45" height="45" viewBox="0 0 20 20">
  119.                                 <path d="m4 10l9 9l1.4-1.5L7 10l7.4-7.5L13 1z" /></svg>
  120.                         </div>
  121.                         <div class="next-arrow mx-5">
  122.                             <svg style="fill: #fff; font-weight: bold;" width="45" height="45" viewBox="0 0 20 20">
  123.                                 <path d="M7 1L5.6 2.5L13 10l-7.4 7.5L7 19l9-9z" /></svg>
  124.                         </div>
  125.                     </div>
  126.                 </div>
  127.             </div>
  128.         </div>
  130.         {# Avis #}
  131.         <div class="container-fluid avis-bg">
  132.             <div class="row">
  133.                 <div class="col-lg-5 col-sm-12 avis-text">
  134.                     <h3>{{ home.titleAvis }}</h3>
  135.                     <p>
  136.                         {{ home.textAvis|replace({'<div>': '', '</div>': '', '<p>': '', '</p>': ''})|raw }}
  137.                     </p>
  138.                 </div>
  139.                 <div class="col-lg-2"></div>
  140.                 <div class="col-lg-3 col-sm-12 position-relative text-center mt-5">
  141.                     <div class="d-flex justify-content-center mt-5">
  142.                         <div class="avis-contact position-absolute">
  143.                             <svg class="mb-1 me-2" width="22" height="22" viewBox="0 0 24 24"><path fill="currentColor" d="m5.825 22l1.625-7.025L2 10.25l7.2-.625L12 3l2.8 6.625l7.2.625l-5.45 4.725L18.175 22L12 18.275Z"/></svg>
  144.                             Avis clients
  145.                         </div>
  146.                     </div>
  147.                     <div class="row">
  148.                         <div class="col slider-avis-bg">
  149.                             <div class="my-slider2">
  150.                                 {% if avis is defined and avis != null %}
  151.                                     {% for a in avis %}
  152.                                         <div class="px-5">
  153.                                             <p class="px-2">
  154.                                                 {{ a.content|replace({'<div>': '', '</div>': '', '<p>': '', '</p>': '',})|slice(0,300)|raw }}
  155.                                             </p>
  156.                                             <span class="fw-bold">{{ a.nom|raw }}
  157.                                                 {% if a.email != null %}
  158.                                                     | {{ a.email }}
  159.                                                 {% endif %}
  160.                                                 {% if a.note != null %}
  161.                                                     | Note : {{ a.note }}/5</span>
  162.                                                 {% endif %}
  163.                                         </div>
  164.                                     {% endfor %}
  165.                                 {% else %}
  166.                                     <div class="px-5">
  167.                                         <p class="px-2 pt-3 fw-bold">
  168.                                             Il n'y a aucun avis.
  169.                                         </p>
  170.                                     </div>
  171.                                 {% endif %}
  172.                             </div>
  173.                             <div class="d-flex justify-content-between position-absolute w-100"
  174.                                 style="margin-top: -100px; position: relative; z-index: 10;">
  175.                                 <div class="previous-arrow2 ms-1">
  176.                                     <svg style="fill: #fff;" width="40" height="40" viewBox="0 0 20 20">
  177.                                         <path d="m4 10l9 9l1.4-1.5L7 10l7.4-7.5L13 1z" /></svg>
  178.                                 </div>
  179.                                 <div class="next-arrow2 me-4">
  180.                                     <svg style="fill: #fff;" width="40" height="40" viewBox="0 0 20 20">
  181.                                         <path d="M7 1L5.6 2.5L13 10l-7.4 7.5L7 19l9-9z" /></svg>
  182.                                 </div>
  183.                             </div>
  184.                         </div>
  185.                     </div>
  186.                 </div>
  187.             </div>
  189.             <div class="row pt-5 pb-3 d-flex justify-content-center">
  190.                 <div class="col-lg-3 col-sm-12 text-center">
  191.                     <hr style="width: 35%; margin-left: auto; margin-right: auto; border: 1px solid white; opacity: 100% !important;">
  192.                     <h1 class="text-white pt-2">{{ home.titleBottom }}</h1>
  193.                 </div>
  194.             </div>
  196.         </div>
  198.         {# Nous trouver #}
  199.         <div class="container-fluid trouver-bg">
  200.             <div class="row">
  201.                 <div class="col trouver-adresse">
  202.                     <a href="{{ home.buttonUrltrouver }}" class="button-trouver">
  203.                         <svg class="me-2" width="27" height="27" viewBox="0 0 384 512">
  204.                             <path fill="currentColor"
  205.                                 d="M384 192c0 87.4-117 243-168.3 307.2c-12.3 15.3-35.1 15.3-47.4 0C117 435 0 279.4 0 192C0 86 86 0 192 0s192 86 192 192z" />
  206.                         </svg>
  207.                         {{ home.buttonTexttrouver }}
  208.                     </a>
  209.                     <h4 class="text-uppercase mt-5 capitalisfont trouver-adresse-title">{{ settings[0].siteName }}</h4>
  210.                     <p class="lead">
  211.                         {{ settings[0].siteAdresse }}<br>
  212.                         {{ settings[0].siteCp}} {{ settings[0].siteVille}}
  213.                     </p>
  214.                 </div>
  215.                 {# <div class="col-lg-6 col-sm-12">
  216.                     <img src="{{ asset('assets/img/map-trouver.jpg') }}" alt="Map" class="img-fluid" style="max-height: 350px; width: 100%; object-fit: cover;">
  217.                 </div> #}
  218.             </div>
  219.         </div>
  220.     {% endfor %}
  222. {% endblock %}
  224. {% block javascripts %}
  225. <script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
  227. <script type="module">
  228.     var slider = tns({
  229.             container: '.my-slider',
  230.             items: 1,
  231.             slideBy: 'page',
  232.             loop: true,
  233.             //autoplay: true,
  234.             //speed: 2000,
  235.             arrowKeys: true,
  236.             nav: false,
  237.             prevButton: '.previous-arrow',
  238.             nextButton: '.next-arrow',
  239.             });
  240.     </script>
  242. <script type="module">
  243.     var slider2 = tns({
  244.             container: '.my-slider2',
  245.             items: 1,
  246.             slideBy: 'page',
  247.             loop: true,
  248.             //autoplay: true,
  249.             //speed: 2000,
  250.             arrowKeys: true,
  251.             nav: false,
  252.             prevButton: '.previous-arrow2',
  253.             nextButton: '.next-arrow2',
  254.             });
  255.     </script>
  257. {{ parent() }}
  258. {% endblock %}