templates/home/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Page d'Accueil - RénovAtHome Un Artisant Près De Chez Soi{% endblock %}
  5. {% block stylesheets %}
  6. {{ parent() }}
  7. <meta name="description" content="Rénov'at home, artisans expert en rénovation de l'habitat à Craon en Mayenne. Présent dans tout le Pays de la Loire. Couverture - Toiture - Isolation - Ravalement de façade - Sur mesure. Devis gratuit !">
  8. <link rel="stylesheet" href="{{ asset('assets/styles/home.css')}}">
  9. <link rel="stylesheet" href="{{ asset('assets/styles/realisation.css')}}">
  10. <link rel="stylesheet" href="{{ asset('assets/styles/carousel.css')}}">
  11. {% endblock %}
  15. {% block main %}
  16. <main>
  17.     <section id="hero">
  18.         <div class="texture"></div>
  20.         <video loop muted autoplay preload="auto">
  21.             <source src="{{ asset('assets/videos/hero-video-presention.mp4')}}" type="video/mp4">Your browser does not support the
  22.             video tag.
  23.         </video>
  25.         <div class="caption">
  26.             <span class="text-uppercase">rénov'at home</span>
  27.             <h1 class="">Un <span class="orange">artisan</span> près de <span class="green">chez vous</span></h1>
  28.             <div class="deco-sous-titre"></div>
  29.             <p class="hero-text">
  30.                 Couverture, Isolation, Ravalement de façade ou réalisation Sur-Mesure,
  31.                 Rénov’ At Home vous accompagnera dans chacun de vos projets de rénovation avec comme seul objectif :
  32.                 votre satisfaction !
  33.             </p>
  34.             <div class="btn-cta">
  35.                 <a class="btn-devis" href="{{ path('quote') }}"><span >DEMANDER UN DEVIS GRATUIT</span></a>
  36.                 <a class="btn-more white" href="{{ path('achievements') }}"><span>voir nos réalisations</span></a>
  37.             </div>
  38.         </div>
  39.     </section>
  40.     <section class="about">
  41.         <div class="container">
  42.             <div class="about-desc">
  43.                 <div class="titre">
  44.                     <div class="deco-sous-titre"></div>
  45.                     <span class="sous-titre">Notre identité</span>
  46.                 </div>
  47.                 <h3 class="titre-real">Qui sommes-nous ?</h3>
  48.                 <p>
  49.                     L’entreprise <strong class="bold">SARL RENOV AT HOME</strong> située à <strong class="bold">CRAON (53), 
  50.                     2 chemin de la Croix Raudière</strong>, vous ouvre ses portes.
  51.                 </p>
  52.                 <p>
  53.                     Fondée en 2014, <strong class="bold">RENOV AT HOME</strong> est une entreprise spécialisée <strong
  54.                             class="bold">dans la rénovation de l’habitat.</strong> Nous nous déplaçons sur toute la
  55.                         Mayenne (53) ainsi que dans le Maine-et-Loire (49).<br>
  56.                         L’entreprise est constituée de 7 compagnons dirigés par M. LETORT Alexis et M. VETTIER Guillaume.
  58.                 </p>
  60.                 <a class="show-real" href="{{ path('about_us')}}">EN DÉCOUVRIR PLUS <i class="fa-solid fa-arrow-right"></i></a>
  61.             </div>
  62.             <img class="mascotte" src="{{ asset('assets/images/mascotte.png')}}" alt="mascotte de rénovathome">
  63.             <div class="bloc-prime">
  64.                 <img src="{{ asset('assets/images/logo_maprimerenov.png') | imagine_filter('miniature')}}" alt="MaPrimeRénov" class="logo-prime">
  65.                 <div class="prime-desc">
  66.                     <p>
  67.                         MaPrimeRénov' est une aide financé par l’état à la rénovation énergétique proposée par
  68.                         FranceRénov',
  69.                         calculée en fonction de vos revenus et du gain écologique des travaux.
  70.                     </p>
  71.                     <a class="btn-prime" href="{{ path('prime')}}">mon dossier d’aide en 1 minute</a>
  72.                 </div>
  73.             </div>
  74.         </div>
  75.     </section>
  76.     <section id="expertises">
  77.         <div class="sous-titre-banniere">
  78.             <div class="deco-sous-titre"></div>
  79.             <span class="text-uppercase">découvrez</span>
  80.             <div class="deco-sous-titre"></div>
  81.         </div>
  82.         <h3 class="titre-section">Nos domaines d’expertises</h3>
  83.         <div class="container">
  84.             <div class="bg-house">
  85.                 <img class="house" src="{{ asset('assets/images/illustration_maison_30.png')}}" alt="maison">
  86.             </div>
  87.             
  88.             <div id="toiture" class="more-expertise">         
  89.                 <div class="bg-expertise">
  90.                     <i class="fa-solid fa-plus"></i>   
  91.                 </div>
  92.                 <img class="img-expertise" src="{{ asset('assets/images/toiture.jpg') | imagine_filter('expertise')}}" alt="toiture">
  93.                 
  94.                 <span class="text-expertise">Traitement des <br>toitures</span>
  95.             </div>
  96.             <div id="facade" class="more-expertise">
  97.                 <div class="bg-expertise">
  98.                     <i class="fa-solid fa-plus"></i>   
  99.                 </div>
  100.                 <img class="img-expertise" src="{{ asset('assets/images/facade-maison.jpg') | imagine_filter('expertise')}}" alt="facade">
  101.                 
  102.                 <span class="text-expertise">Traitement des <br>façades</span>
  103.             </div>
  104.             <div id="isolation-des-combles" class="more-expertise">
  105.                 <div class="bg-expertise">
  106.                     <i class="fa-solid fa-plus"></i>   
  107.                 </div>
  108.                 <img class="img-expertise" src="{{ asset('assets/images/isolation.jpg') | imagine_filter('expertise')}}" alt="Isolation">
  109.                 
  110.                 <span class="text-expertise">Isolation des <br>combles</span>
  111.             </div>
  112.             <div id="isolation-thermique" class="more-expertise">
  113.                 <div class="bg-expertise">
  114.                     <i class="fa-solid fa-plus"></i>   
  115.                 </div>
  116.                 <img class="img-expertise" src="{{ asset('assets/images/isolation_thermique_ext.png')}}" alt="Isolation">
  117.                 
  118.                 <span class="text-expertise">Isolation thermique<br>exterieur</span>
  119.             </div>
  120.             <div id="interieur" class="more-expertise">
  121.                 <div class="bg-expertise">
  122.                     <i class="fa-solid fa-plus"></i>   
  123.                 </div>
  124.                 <img class="img-expertise" src="https://renovathome.fr/media/cache/expertise/assets/images/interieur.jpg" alt="Interieur de maison">
  125.                 
  126.                 <span class="text-expertise">Goutières et<br>sous face</span>
  127.             </div>
  128.             <div class="all-expertises">
  129.                 <div id="toiture-desc" class="expertise">
  130.                     <div class="title-expertise">
  131.                         <img src="{{ asset('assets/images/icon_roof.svg')}}" alt="toiture" class="logo-expertise">
  132.                         <span class="name-expertise">Traitement des toitures</span>
  133.                     </div>
  134.                     <div class="desc-expertise">
  135.                         <ul>
  136.                             <li>Démousage</li>
  137.                             <li>Brossage manuel</li>
  138.                             <li>Pulvérisation mécanique</li>
  139.                             <li>Hydrofuge</li>
  140.                             <li>Fenêtre de toit (velux)</li>
  141.                         </ul>
  142.                         <a href="{{ path('traitement_des_toitures') }}" class="link-expertise">En voir plus<i class="fa-solid fa-arrow-right"></i></a>
  143.                     </div>
  144.                 </div>
  145.                 <div id="isolation-des-combles-desc" class="expertise">
  146.                     <div class="title-expertise">
  147.                         <img src="{{ asset('assets/images/icon_heat.svg')}}" alt="Isolation" class="logo-expertise">
  148.                         <span class="name-expertise">isolation des combles</span>
  149.                     </div>
  150.                     <div class="desc-expertise">
  151.                         <ul>
  152.                             <li>Isolation des combles perdus par insufflation</li>
  153.                             <li>Isolation des rampants de toiture</li>
  154.                             <li>Isolation plancher bas </li>
  155.                         </ul>
  156.                         <a href="{{ path('isolation_des_combles') }}" class="link-expertise">En voir plus<i class="fa-solid fa-arrow-right"></i></a>
  157.                     </div>
  158.                 </div>
  159.                 <div id="isolation-thermique-desc" class="expertise">
  160.                     <div class="title-expertise">
  161.                         <img src="{{ asset('assets/images/icon_heat.svg')}}" alt="Isolation" class="logo-expertise">
  162.                         <span class="name-expertise">isolation thermique exterieure</span>
  163.                     </div>
  164.                     <div class="desc-expertise">
  165.                         <ul>
  166.                             <li>Finition enduit RPE</li>
  167.                             <li>Finition bardage bois</li>
  168.                         </ul>
  169.                         <a href="{{ path('isolation_thermique_exterieur') }}" class="link-expertise">En voir plus<i class="fa-solid fa-arrow-right"></i></a>
  170.                     </div>
  171.                 </div>
  172.                 <div id="facade-desc" class="expertise">
  173.                     <div class="title-expertise">
  174.                         <img src="{{ asset('assets/images/icon_painting.svg')}}" alt="Peinture" class="logo-expertise">
  175.                         <span class="name-expertise">Traitement des façade</span>
  176.                     </div>
  177.                     <div class="desc-expertise">
  178.                         <ul>
  179.                             <li>Nettoyage </li>
  180.                             <li>Traitement anticryptogamique</li>
  181.                             <li>Ravalement</li>
  182.                         </ul>
  183.                         <a href="{{ path('traitement_des_facades') }}" class="link-expertise">En voir plus<i class="fa-solid fa-arrow-right"></i></a>
  184.                     </div>
  185.                 </div>
  186.                 <div id="interieur-desc" class="expertise">
  187.                     <div class="title-expertise">
  188.                         <img src="{{ asset('assets/images/icon_interior.svg')}}" alt="toiture" class="logo-expertise">
  189.                         <span class="name-expertise">Goutières et sous face</span>
  190.                     </div>
  191.                     <div class="desc-expertise">
  192.                         <ul>
  193.                             <li>Remplacement gouttières</li>
  194.                             <li>Habillage ou remplacement sous face</li>
  195.                         </ul>
  196.                         <a href="{{ path('interieur') }}" class="link-expertise">En voir plus<i class="fa-solid fa-arrow-right"></i></a>
  197.                     </div>
  198.                 </div>
  199.             </div>
  200.         </div>
  201.     </section>
  202.     <section class="lasts-realisations">
  203.         <div class="sous-titre-banniere">
  204.             <div class="deco-sous-titre"></div>
  205.             <span class="text-uppercase">explorer</span>
  206.             <div class="deco-sous-titre"></div>
  207.         </div>
  208.         <h3 class="titre-section">Nos dernières réalisations</h3>
  209.         <a class="show-real container left" href="{{ path('about_us')}}">En savoir plus <i class="fa-solid fa-arrow-right"></i></a>
  210.         <div class="all-real container">
  211.             {% for realisation in lastsReal |sort((a, b) => a.id <= b.id) %} 
  212.             <div class="card-real {{ realisation.categorie|lower|replace({' ': '-'}) }}">
  213.                 <a class="titre-evenement" href="{{ path('realisation', { 'slug' : realisation.slug })}}">
  214.                     <div class="layer">
  215.                         <img src="{{ asset('uploads/realisations/'~realisation.cover) | imagine_filter('miniature')}}" alt="{{ realisation.nom }}">
  216.                         <div class="overlay">
  217.                             <div class="text"><span>EN DÉCOUVRIR PLUS <i class="fa-solid fa-arrow-right"></i></span></div>
  218.                         </div>
  219.                     </div>
  220.                     <span class="card-real-category">{{ realisation.categorie }}</span>
  221.                     <h3 class="card-real-title">{{ realisation.nom }}</h3>
  222.                 </a>
  223.             </div>
  224.             {% endfor %}
  225.         </div>
  226.         <div class="more mb-0">
  227.             <a class="btn-more" href="{{ path('achievements') }}"><span>voir nos dernières réalisations</span></a>
  228.         </div>
  229.     </section>
  230.     <section class="events">
  231.         <div class="container">
  232.             <div class="events-desc">
  233.                 <div class="titre">
  234.                     <div class="deco-sous-titre"></div>
  235.                     <span class="sous-titre">nous rencontrer</span>
  236.                 </div>
  237.                 <h3 class="titre-real">Évènements à venir</h3>
  238.                 <p>Retrouvez ici les différents événements auxquels Rénov'At Home aura le plaisir de vous rencontrer pour discuter de vos prochaines rénovations !
  239.                 </p>
  241.                 <a class="show-real" href="{{ path('events')}}">Tout les évènements <i
  242.                         class="fa-solid fa-arrow-right"></i></a>
  243.             </div>
  244.             <div class="events-carousel">
  245.                 <div class="slide-container">
  246.                     {% for event in lastsEvent %}
  247.                     <div class="custom-slider fade">
  248.                         <img class="slide-img" src="{{ asset('uploads/evenements/'~event.photo) | imagine_filter('logo') }}" alt="{{ event.nom }}">
  249.                         <div class="infos-event">
  250.                             <div class="border-info-event">                            <span class="nom-event">{{ event.nom }}</span>
  251.                             <span class="lieu-event"><i class="fa-solid fa-location-dot"></i>{{event.lieu}}</span>
  252.                             <span class="date-event">
  253.                                 {{event.dateDebut | date("MMMM") == event.dateFin | date("MMMM") ? 
  254.                                     event.dateDebut | date("d") : 
  255.                                     event.dateDebut | localizeddate('none', 'none', 'fr', null, 'd MMMM') }} 
  256.                                 - {{ event.dateFin | localizeddate('none', 'none', 'fr', null, 'd MMMM Y') }}
  257.                             </span>
  258.                         </div>
  260.                         </div>
  261.                     </div>
  262.                     {% endfor %}
  263.                 </div>
  264.             </div>
  265.         </div>
  266.     </section>
  267. </main>
  268. {% endblock %}
  270. {% block contact %}{% endblock %}
  272. {% block footer %}{% endblock %}
  274. {% block script %}
  275. {{ parent() }}
  276. <script src='{{ asset('assets/js/index.min.js')}}'></script>
  277. <script>
  278.     const navigation = document.querySelector('nav');
  280.     window.addEventListener('scroll', () => {
  281.     
  282.         if(window.scrollY > 45){
  283.             navigation.classList.add('anim-nav');
  284.         } else {
  285.             navigation.classList.remove('anim-nav');
  286.         }
  287.     
  288.     })
  289. </script>
  290. <script>
  291.     $('.more-expertise').hover(
  292.         function(){
  293.             $('#'+$(this).attr('id')+'-desc').addClass('desc-actif');
  294.         },
  296.         function(){
  297.             $('#'+$(this).attr('id')+'-desc').removeClass('desc-actif');
  298.         }
  299.     );
  300.     $('.expertise').hover(
  301.         function(){
  302.             var id = $(this).attr('id');
  303.             id = id.replace("-desc", "");
  304.             $('#'+ id ).addClass('more-actif');
  305.             $(this).addClass('desc-actif');
  306.         },
  308.         function(){
  309.             var id = $(this).attr('id');
  310.             id = id.replace("-desc", "");
  311.             $('#'+id).removeClass('more-actif');
  312.             $(this).removeClass('desc-actif');
  313.         }
  314.     );
  315. </script>
  316. <script>
  317.     var nbrItem = 1;
  319.     if ($(window).width() >= 450  && $(window).width()<= 1440) {
  320.         nbrItem = 2;
  321.     }
  322.     else if($(window).width() > 1440){
  323.         nbrItem = 3
  324.     }
  326.     console.log(nbrItem);
  328.     new ElderCarousel('.slide-container', {
  329.         items: nbrItem,
  330.         step: 1,
  331.         infinite: true,
  332.         play: false,
  333.         playInterval: 10000,
  334.         speed: 500,
  335.         navs: true,
  337.     });
  338. </script>
  339. {% endblock %}