{% extends 'base.html.twig' %}{% block title %}Page d'Accueil - RénovAtHome Un Artisant Près De Chez Soi{% endblock %}{% block stylesheets %}{{ parent() }}<meta name="description" content="Renov'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 !"><link rel="stylesheet" href="{{ asset('assets/styles/home.css')}}"><link rel="stylesheet" href="{{ asset('assets/styles/realisation.css')}}"><link rel="stylesheet" href="{{ asset('assets/styles/carousel.css')}}">{% endblock %}{% block promo %}{% endblock %}{% block main %}<main> <section id="hero"> <div class="texture"></div> <video loop muted autoplay preload="auto"> <source src="{{ asset('assets/videos/hero-video-presention.mp4')}}" type="video/mp4">Your browser does not support the video tag. </video> <div class="caption"> <span class="text-uppercase">renov'at home</span> <h1 class="">Un <span class="orange">artisan</span> près de <span class="green">chez vous</span></h1> <div class="deco-sous-titre"></div> <p class="hero-text"> Couverture, Isolation, Ravalement de façade ou réalisation Sur-Mesure, Renov’ At Home vous accompagnera dans chacun de vos projets de rénovation avec comme seul objectif : votre satisfaction ! </p> <div class="btn-cta"> <a class="btn-devis" href="{{ path('quote') }}"><span >DEMANDER UN DEVIS GRATUIT</span></a> <a class="btn-more white" href="{{ path('achievements') }}"><span>voir nos réalisations</span></a> </div> </div> </section> <section class="about"> <div class="container"> <div class="about-desc"> <div class="titre"> <div class="deco-sous-titre"></div> <span class="sous-titre">Notre identité</span> </div> <h3 class="titre-real">Qui sommes-nous ?</h3> <p>Créée en 2014, l’entreprise Rénov’ At Home est spécialisé dans la rénovation de l’habitat. L’entreprise est aujourd’hui implantée dans une pépinière d’artisans dans la ville de Craon.<br> Notre objectif : vous accompagner tout au long de votre projet de rénovation : du devis à la réalisation de votre chantier.<br> Pour chaque chantier, nous étudions votre problématique et choisissions ensemble la solution adaptée à vos besoins. </p> <a class="show-real" href="{{ path('about_us')}}">EN DÉCOUVRIR PLUS <i class="fa-solid fa-arrow-right"></i></a> </div> <img class="mascotte" src="{{ asset('assets/images/mascotte.png') | imagine_filter('middle')}}" alt="mascotte de renovathome"> <div class="bloc-prime"> <img src="{{ asset('assets/images/logo_maprimerenov.png') | imagine_filter('miniature')}}" alt="MaPrimeRénov" class="logo-prime"> <div class="prime-desc"> <p> MaPrimeRénov' est une aide financé par l’état à la rénovation énergétique proposée par FranceRénov' , calculée en fonction de vos revenus et du gain écologique des travaux. </p> <a class="btn-prime" href="{{ path('prime')}}">mon dossier d’aide en 1 minute</a> </div> </div> </div> </section> <section id="expertises"> <div class="sous-titre-banniere"> <div class="deco-sous-titre"></div> <span class="text-uppercase">découvrez</span> <div class="deco-sous-titre"></div> </div> <h3 class="titre-section">Nos domaines d’expertises</h3> <div class="container"> <div class="bg-house"> <img class="house" src="{{ asset('assets/images/illustration_maison_30.png')}}" alt="maison"> </div> <div id="toiture" class="more-expertise"> <div class="bg-expertise"> <i class="fa-solid fa-plus"></i> </div> <img class="img-expertise" src="{{ asset('assets/images/toiture.jpg') | imagine_filter('expertise')}}" alt="toiture"> <span class="text-expertise">Traitement des <br>toitures</span> </div> <div id="facade" class="more-expertise"> <div class="bg-expertise"> <i class="fa-solid fa-plus"></i> </div> <img class="img-expertise" src="{{ asset('assets/images/facade-maison.jpg') | imagine_filter('expertise')}}" alt="facade"> <span class="text-expertise">Traitement des <br>façades</span> </div> <div id="isolation-des-combles" class="more-expertise"> <div class="bg-expertise"> <i class="fa-solid fa-plus"></i> </div> <img class="img-expertise" src="{{ asset('assets/images/isolation.jpg') | imagine_filter('expertise')}}" alt="Isolation"> <span class="text-expertise">Isolation des <br>combles</span> </div> <div id="isolation-thermique" class="more-expertise"> <div class="bg-expertise"> <i class="fa-solid fa-plus"></i> </div> <img class="img-expertise" src="{{ asset('assets/images/isolation_thermique_ext.png')}}" alt="Isolation"> <span class="text-expertise">Isolation thermique<br>exterieur</span> </div> <div id="interieur" class="more-expertise"> <div class="bg-expertise"> <i class="fa-solid fa-plus"></i> </div> <img class="img-expertise" src="{{ asset('assets/images/interieur.jpg') | imagine_filter('expertise')}}" alt="Interieur de maison"> <span class="text-expertise">Intérieur</span> </div> <div class="all-expertises"> <div id="toiture-desc" class="expertise"> <div class="title-expertise"> <img src="{{ asset('assets/images/icon_roof.svg')}}" alt="toiture" class="logo-expertise"> <span class="name-expertise">Traitement des toitures</span> </div> <div class="desc-expertise"> <ul> <li>Démousage</li> <li>Brossage manuel</li> <li>Pulvérisation mécanique</li> <li>Hydrofuge</li> <li>Remplacement gouttières</li> <li>Habillage ou remplacement sous face</li> <li>Fenêtre de toit (velux)</li> </ul> <a href="{{ path('traitement_des_toitures') }}" class="link-expertise">En voir plus<i class="fa-solid fa-arrow-right"></i></a> </div> </div> <div id="isolation-des-combles-desc" class="expertise"> <div class="title-expertise"> <img src="{{ asset('assets/images/icon_heat.svg')}}" alt="Isolation" class="logo-expertise"> <span class="name-expertise">isolation des combles</span> </div> <div class="desc-expertise"> <ul> <li>Isolation des combles perdus par insufflation</li> <li>Isolation des rampants de toiture</li> <li>Isolation plancher bas </li> <li>Isolation thermique extérieur</li> </ul> <a href="{{ path('isolation_des_combles') }}" class="link-expertise">En voir plus<i class="fa-solid fa-arrow-right"></i></a> </div> </div> <div id="isolation-thermique-desc" class="expertise"> <div class="title-expertise"> <img src="{{ asset('assets/images/icon_heat.svg')}}" alt="Isolation" class="logo-expertise"> <span class="name-expertise">isolation thermique exterieure</span> </div> <div class="desc-expertise"> <ul> <li>Finition bardage bois</li> <li>Finition enduit RPE</li> </ul> <a href="{{ path('isolation_thermique_exterieur') }}" class="link-expertise">En voir plus<i class="fa-solid fa-arrow-right"></i></a> </div> </div> <div id="facade-desc" class="expertise"> <div class="title-expertise"> <img src="{{ asset('assets/images/icon_painting.svg')}}" alt="Peinture" class="logo-expertise"> <span class="name-expertise">Traitement des façade</span> </div> <div class="desc-expertise"> <ul> <li>Nettoyage </li> <li>Traitement anticryptogamique</li> <li>Ravalement</li> </ul> <a href="{{ path('traitement_des_facades') }}" class="link-expertise">En voir plus<i class="fa-solid fa-arrow-right"></i></a> </div> </div> <div id="interieur-desc" class="expertise"> <div class="title-expertise"> <img src="{{ asset('assets/images/icon_interior.svg')}}" alt="toiture" class="logo-expertise"> <span class="name-expertise">Intérieur</span> </div> <div class="desc-expertise"> <ul> <li>Peinture</li> <li>Revêtement décoratif</li> <li>Sol , parquets , moquettes, pvc</li> </ul> <a href="{{ path('interieur') }}" class="link-expertise">En voir plus<i class="fa-solid fa-arrow-right"></i></a> </div> </div> </div> </div> </section> <section class="lasts-realisations"> <div class="sous-titre-banniere"> <div class="deco-sous-titre"></div> <span class="text-uppercase">explorer</span> <div class="deco-sous-titre"></div> </div> <h3 class="titre-section">Nos dernières réalisations</h3> <a class="show-real container left" href="{{ path('about_us')}}">En savoir plus <i class="fa-solid fa-arrow-right"></i></a> <div class="all-real container"> {% for realisation in lastsReal |sort((a, b) => a.id <= b.id) %} <div class="card-real {{ realisation.categorie.nom|lower|replace({' ': '-'}) }}"> <a class="titre-evenement" href="{{ path('realisation', { 'slug' : realisation.slug })}}"> <div class="layer"> <img src="{{ asset('uploads/realisations/'~realisation.cover) | imagine_filter('miniature')}}" alt="{{ realisation.nom }}"> <div class="overlay"> <div class="text"><span>EN DÉCOUVRIR PLUS <i class="fa-solid fa-arrow-right"></i></span></div> </div> </div> <span class="card-real-category">{{ realisation.categorie.nom }}</span> <h3 class="card-real-title">{{ realisation.nom }}</h3> </a> </div> {% endfor %} </div> <div class="more mb-0"> <a class="btn-more" href="{{ path('achievements') }}"><span>voir nos dernières réalisations</span></a> </div> </section> <section class="events"> <div class="container"> <div class="events-desc"> <div class="titre"> <div class="deco-sous-titre"></div> <span class="sous-titre">nous rencontrer</span> </div> <h3 class="titre-real">Évènements à venir</h3> <p>Retrouvez ici les différents événements auxquels Renov'At Home aura le plaisir de vous rencontrer pour discuter de vos prochaines rénovations ! </p> <a class="show-real" href="{{ path('events')}}">Tout les évènements <i class="fa-solid fa-arrow-right"></i></a> </div> <div class="events-carousel"> <div class="slide-container"> {% for event in lastsEvent %} <div class="custom-slider fade"> <img class="slide-img" src="{{ asset('uploads/evenements/'~event.photo) | imagine_filter('logo') }}" alt="{{ event.nom }}"> <div class="infos-event"> <div class="border-info-event"> <span class="nom-event">{{ event.nom }}</span> <span class="lieu-event"><i class="fa-solid fa-location-dot"></i>{{event.lieu}}</span> <span class="date-event"> {{event.dateDebut | date("MMMM") == event.dateFin | date("MMMM") ? event.dateDebut | date("d") : event.dateDebut | localizeddate('none', 'none', 'fr', null, 'd MMMM') }} - {{ event.dateFin | localizeddate('none', 'none', 'fr', null, 'd MMMM Y') }} </span> </div> </div> </div> {% endfor %} </div> </div> </div> </section></main>{% endblock %}{% block contact %}{% endblock %}{% block footer %}{% endblock %}{% block script %}{{ parent() }}<script src='{{ asset('assets/js/index.min.js')}}'></script><script> const navigation = document.querySelector('nav'); window.addEventListener('scroll', () => { if(window.scrollY > 45){ navigation.classList.add('anim-nav'); } else { navigation.classList.remove('anim-nav'); } })</script><script> $('.more-expertise').hover( function(){ $('#'+$(this).attr('id')+'-desc').addClass('desc-actif'); }, function(){ $('#'+$(this).attr('id')+'-desc').removeClass('desc-actif'); } ); $('.expertise').hover( function(){ var id = $(this).attr('id'); id = id.replace("-desc", ""); $('#'+ id ).addClass('more-actif'); $(this).addClass('desc-actif'); }, function(){ var id = $(this).attr('id'); id = id.replace("-desc", ""); $('#'+id).removeClass('more-actif'); $(this).removeClass('desc-actif'); } );</script><script> var nbrItem = 1; if ($(window).width() >= 450 && $(window).width()<= 1440) { nbrItem = 2; } else if($(window).width() > 1440){ nbrItem = 3 } console.log(nbrItem); new ElderCarousel('.slide-container', { items: nbrItem, step: 1, infinite: true, play: false, playInterval: 10000, speed: 500, navs: true, });</script>{% endblock %}