templates/pages/index.html.twig line 1

Open in your IDE?
  1. {% extends "base.html.twig" %}
  3. {% block title %} Gerbe {% endblock %}
  5. {% block body %}
  6.     <main role="main" class="accueil">
  8.         <!-- Home -->
  9.         <section class="home">  
  10.             <div class="container">
  11.                 <div class="row home__container">
  12.                     <div class="col-8 home__container__gauche">
  13.                         <div class="home__container__gauche__txt">
  14.                             <h1>Expert par <span class="green">passion</span><br>depuis 1972.</h1>
  15.                             <p>
  16.                             Fort de notre expérience, nous intervenons dans l’entretien (taille, tonte,…), l’élagage, l’abattage et la création d’espaces verts (allées, terrasse, etc).
  17.                             <br>
  18.                             Sans oublier notre pépinière de 10 000 m² située à Malay-le-Petit dans l’Yonne.
  19.                             </p>
  20.                             <a href="{{ path('contact') }}" class="btn btn-vertC">Nous contacter</a>
  21.                         </div>
  22.                         <div class="home__container__gauche__fleche">
  23.                             <a href="#paysage"><img src="{{ asset('images/icons/icon-fleche-bas.svg') }}" alt="Icône flèche vers le bas entouré."></a>
  24.                         </div>
  25.                     </div>
  26.                     <div class="col-4 home__container__img">
  27.                         <img src="{{ asset('images/arbre-taille-gerbe-Yonne.jpg') }}" alt="Arbre taillé dans un parc.">
  28.                     </div>
  29.                 </div>
  30.             </div>
  31.         </section>
  32.         
  33.         <!-- Paysage -->
  34.         <section class="paysage" id="paysage">
  35.             <div class="container">
  36.                 <div class="row justify-space-between align-center">
  37.                     <div class="paysage__gauche">
  38.                         <div class="paysage__gauche__titre titre-vert-bordure">
  39.                             <img src="{{ asset('images/icons/icon-fleur-rose.svg') }}" alt="Icône représentant une fleur.">
  40.                             <h2 >Créer des espaces extérieurs qui vous ressemblent</h2>
  41.                         </div>
  42.                         <p>Plus de 8 français sur 10 ont un jardin ou aimeraient en avoir un, selon une étude de l’IFOP parue en 2020. Chacun aura sa manière d’apprécier son espace vert : qu’il soit agrémenté de massifs fleuris ou plutôt d’arbres fruitiers, équipé d’une petite mare artificielle ou d’une grande piscine. Le jardin s’adapte aux envies de son propriétaire pour enjoliver son cadre de vie, et faire de cet espace un plaisir quotidien pour vos cinq sens.</p>
  43.                         <a href="{{ path('paysage') }}" class="btn btn-vertC">En savoir plus</a>
  44.                     </div>
  45.                     <div class="paysage__carousel swiper swiper-carousel">
  46.                         <div class="paysage__carousel__buttons swiper-navigation">
  47.                             <div class="swiper-navigation swiper-button-next"></div>
  48.                             <div class="swiper-navigation swiper-button-prev"></div>
  49.                         </div>
  50.                         <div class="paysage__carousel swiper-wrapper">
  51.                             <div class="swiper-slide">
  52.                                 <div class="item-slide">
  53.                                     <img src="{{ asset('images/amenagement-espaces-exterieurs-gerbe-Yonne.jpg') }}" alt="Jardin avec arbustes et arches végétales.">
  54.                                 </div>
  55.                             </div>
  56.                             <div class="swiper-slide">
  57.                                 <div class="item-slide">
  58.                                     <img src="{{ asset('images/amenagement-espaces-exterieurs-gerbe-Yonne.jpg') }}" alt="Jardin avec arbustes et arches végétales.">
  59.                                 </div>
  60.                             </div>
  61.                         </div> 
  62.                     </div>
  63.                 </div>
  64.                 <div class="row">
  65.                     <img src="{{ asset('images/icons/icon-fleur-rose.svg') }}" class="paysage__rose" alt="Icône représentant une fleur.">
  66.                 </div>
  67.             </div>
  68.         </section>
  70.         <!--Pepiniere-->
  71.         <section class="pepiniere">
  72.             <div class="container">
  73.                 <div class="titre">
  74.                     <img src="{{ asset('images/icons/icon-terrace.svg') }}" alt="Icône représentant une terrace.">
  75.                     <h2 class="white">Végétaux, arbres, arbustes, fruitiers, …<br>Plantés à la mode de chez nous !</h2>
  76.                 </div>
  77.                 <div class="row justify-space-around">
  78.                     <div class="pepiniere__gauche">
  79.                         <img src="{{ asset('images/pepiniere-arbuste-gerbe-Yonne.jpg') }}" alt="Pépinière d'arbustes.">
  80.                         <p>Gerbe paysagiste, c’est aussi une pépinière de  10 000 m², situé au 74 Rte de Genève à Malay-le-Petit ! Accessible en entrée libre, vous y trouverez tout ce dont vous avez besoin pour faire de votre espace vert un petit coin relaxant et gourmand !</p>
  81.                     </div>
  82.                     <div class="pepiniere__droite">
  83.                         <img src="{{ asset('images/pepiniere-arbuste-serre-gerbe-Yonne.jpg') }}" alt="Serre pépinière.">
  84.                         <p>Nous vous proposons une large sélection de végétaux de qualité : ornement, fruitier, rampante, grimpante, vivace… Mais aussi différentes fournitures utiles pour vos plantations : substrats, paillages, engrais…</p>
  85.                         <a href="{{ path('pepiniere') }}" class="btn btn-vertC">En savoir plus</a>
  86.                     </div>
  87.                     <img src="{{ asset('images/icons/icon-plante.svg') }}"class="pepiniere__icone" alt="Icône représentant une plante en terre.">
  88.                 </div>
  89.             </div>
  90.         </section>
  92.         <!--Professionnels-->
  93.         <section class="professionnels">
  94.             <div class="container">
  95.                 <div class="row justify-space-between align-center">
  96.                     <div class="professionnels__gauche">
  97.                         <div class="titre">
  98.                             <img src="{{ asset('images/icons/icon-arbre.svg') }}" alt="Icône représentant trois arbres.">
  99.                             <h2>Nos services<br>pour les professionnels</h2>
  100.                         </div>
  101.                         <div class="professionnels__gauche__txt">
  102.                             <p>
  103.                                 Depuis 1972, la société Gerbe est au service des entreprises et collectivités pour concevoir, aménager et entretenir le patrimoine vert et végétaliser les espaces de vie et de travail en tenant compte des paramètres écologiques, économiques et esthétiques.
  104.                             </p>
  105.                             <p>
  106.                                 Jardinier depuis plus de 40 ans, nous nous chargeons de l'entretien de vos espaces verts (taille, tonte, élagage, abattage, broyages) et créons et aménageons vos parcs et jardins (terrassement, plantation, engazonnement, maçonnerie paysagère, irrigation).      
  107.                             </p>
  108.                         </div>
  109.                         <a href="{{ path('contact') }}" class="btn btn-vertF">Nous contacter</a>
  110.                     </div>
  111.                     <div class="professionnels__droite">
  112.                         <img src="{{ asset('images/amenagement-exterieur-salle-gerbe-Yonne.jpg') }}" alt="Aménagement de l'exterieur d'une salle.">
  113.                     </div>                   
  114.                 </div>
  115.             </div>
  116.         </section>
  118.         <!--Realisations-->
  119.         <section class="realisations">
  120.             <div class="container">
  121.                 <div class="titre">
  122.                     <img  src="{{ asset('images/icons/icon-planter.svg') }}" alt="Icône représentant l'action de planter.">
  123.                     <h2 class="white">Découvrez<br>nos dernières réalisations</h2>
  124.                 </div>
  125.                 <div class="realisation__carousel swiper">
  126.                     <div class="swiper-wrapper">
  127.                         {% for realisation in realisations %}
  128.                             <div class="swiper-slide">
  129.                                 <div class="item-slide">
  130.                                     <img class="carousel-image" src="{{ vich_uploader_asset(realisation, 'pictureFile') | imagine_filter('realisationSize') }}" alt="{{ realisation.description}}">
  131.                                     <div class="realisation__carousel__description">
  132.                                         <h3 class="montserrat white">{{realisation.name}}</h3>
  133.                                         <div class="localisation">
  134.                                             <img src="{{ asset('images/icons/location-vert.svg') }}" alt="Icône représentant un point sur une carte.">
  135.                                             <span>{{ realisation.position}}</span>
  136.                                         </div>
  137.                                     </div>
  138.                                 </div>
  139.                             </div>
  140.                         {% endfor %}
  141.                     </div>
  142.                 </div>
  143.             </div>
  144.         </section>
  145.     </main>
  146. {% endblock %}
  147. {% block javascripts %}
  149.     <script>
  150.     var swiper = new Swiper(".swiper-carousel", {
  151.         autoWidth: true,
  152.         navigation: {
  153.             nextEl: ".swiper-navigation .swiper-button-next",
  154.             prevEl: ".swiper-navigation .swiper-button-prev",
  155.         },
  156.     });
  157.     //Carousel realisation
  158.     var swiper = new Swiper(".realisation__carousel", {
  159.         slidesPerView: 5,
  160.         spaceBetween: 20,
  161.         autoWidth: true,
  162.         loop: true,
  163.         grabCursor: true,
  164.         autoplay:{
  165.             delay:1000,
  166.         },
  167.         breakpoints:{
  168.             
  169.             1400: {
  170.                 slidesPerView: 5,
  171.             },
  172.             1000: {
  173.                 slidesPerView: 4,
  174.             },
  175.             800: {
  176.                 slidesPerView: 3,
  177.             },
  178.             600: {
  179.                 slidesPerView: 2,
  180.             },
  181.             0: {
  182.                 slidesPerView: 1,
  183.             },
  184.         },
  185.     });
  186.     </script>
  187. {% endblock %}