{% extends 'base.html.twig' %}

{% block title %}
    HomePerformance, vos installations de panneau photovoltaïque.
{% endblock %}

{% block body %}
    <section class="home-hero-section1 wf-section">
        <div class="main-container">
            <div class="home-hero-container">
                <div class="home-heading-container">
                    <h1 class="title-1 white-font">
                        Laissez le soleil payer votre facture d'électricité
                    </h1>
                </div>
                <div class="home-hero-paragraph-container">
                    <p class="size-17 white-color align-justify">
                        D'ici 2050, le photovoltaïque devrait être la source de 44% de l'électricité du pays. Selon le gouvernement, la majorité du courant - 37% dans les prévisions - proviendrait des petites installations sur les toits et façades des maisons. Aujourd'hui, ce chiffre ne s'élève qu'à 2%.
                        <br/>
                        <span class="size-10 italic">
                            Source 2021 de l'Office Fédéral
                        </span>
                    </p>
                </div>
                <div class="home-hero-button-container">
                    <a href="{{ path('realisation') }}" class="rounded-white-button w-button">
                        Découvrir
                    </a>
                </div>
            </div>
        </div>
        <figure class="section-bottom-divider-copy"></figure>
    </section>
    <section class="reasons-section wf-section">
        <div class="main-container">
            <div class="reasons-container">
                <div class="reasoning-heading-container">
                    <h2 class="h3-m">
                        Les avantages de l'autoconsommation
                    </h2>
                </div>
                <div class="section-sub-text-container">
                    <p class="align-center">
                        Nous vous aidons à investir dans votre autonomie d’énergie en toute sérénité.
                    </p>
                </div>
                <div class="reasons-blocks-container">
                    <div class="reason-block">
                        <div class="reason-icon-container">
                            <div class="reason-icon">
                                <img src="/images/themes/6148a14842c98d641afbc34d_globe.png" loading="lazy" alt="globe-icon
                                ">
                            </div>
                        </div>
                        <div class="reason-text-container">
                            <div class="reason-heading">
                                <h3 class="h5-m">
                                    Economies
                                </h3>
                            </div>
                            <div class="reason-paragraph">
                                <p class="para-17">
                                    Jusqu'à 80% d'économies sur votre facture d'électricité
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="reason-block">
                        <div class="reason-icon-container">
                            <div class="reason-icon">
                                <img src="/images/themes/sunny.png" loading="lazy" alt="hand wrist watch icon
                                ">
                            </div>
                        </div>
                        <div class="reason-text-container">
                            <div class="reason-heading">
                                <h3 class="h5-m">
                                    Gagnez en autonomie
                                </h3>
                            </div>
                            <div class="reason-paragraph">
                                <p class="para-17">
                                    Produisez votre propre énergie au lieu de l'acheter
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="reason-block">
                        <div class="reason-icon-container">
                            <div class="reason-icon">
                                <img src="/images/themes/recycle.png" loading="lazy" alt="key icon
                                ">
                            </div>
                        </div>
                        <div class="reason-text-container">
                            <div class="reason-heading">
                                <h3 class="h5-m">
                                    Ecologie
                                </h3>
                            </div>
                            <div class="reason-paragraph">
                                <p class="para-17">
                                    Consommez de l'énergie verte, locale et renouvable
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="our-technology-section wf-section">
        <div class="main-container">
            <div class="our-technology-container">
                <div class="our-technology-flex">
                    <div class="our-technology-left-flex">
                        <div class="our-technology-heading-container" style="max-width:initial;">
                            <h2 class="h3-m">
                                Comment fonctionne une installation photovoltaïque ?
                            </h2>
                        </div>
                        <div class="section-sub-text-left-align">
                            <p class="para-17 align-justify">
                                L'installation photovoltaïque, sous la forme de capteurs solaires placés sur le toit, sur le garage ou dans le jardin, capte l'énergie solaire et la transforme en énergie électrique. Les cellules photovoltaïques sont composées principalement de silicium qui est un semi-conducteur.
                                <br/><br/>
                                Dans les installations classiques, le courant était reversé dans le réseau et c'est ce dernier qui alimentait le logement.<br/><br/>HomePerformance s'engage pour l'autoconsommation du courant en intégrant un système de charge.
                                <br/><br/>
                            </p>
                        </div>
                    </div>
                    <div class="our-technology-right-flex">
                        <div class="our-technology-video-container">
                            <!-- <a href="/images/themes/" class="video-light-box w-inline-block w-lightbox" aria-label="open lightbox" aria-haspopup="dialog"> -->
                                <div class="our-technology-bg-video w-background-video w-background-video-atom">
                                    <iframe width="100%" height="315" src="https://www.youtube.com/embed/alyLWA-H2Ao" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                                </div>
                            <!-- </a> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="how-ai-works-section wf-section">
        <div class="section-top-divider a-i-works"></div>
        <div class="main-container">
            <div class="how-ai-works-container">
                <div class="how-ai-works-heading-container" style="max-width:initial;">
                    <h2 class="h3-m white-align-center">
                        Vos travaux en 3 étapes
                    </h2>
                </div>
                <div class="section-sub-text-container">
                    <p class="paragraph-white">
                    </p>
                </div>
                <div class="ai-workflow-container">
                    <div class="ai-work-block">
                        <div class="ai-horizontal-divider-left"></div>
                        <div class="ai-icon-container">
                            <img src="/images/themes/devis.png" loading="lazy" alt="storage-icon">
                        </div>
                        <div class="ai-block-heading">
                            <h3 class="h5-m white-font">
                                Demande d'étude
                            </h3>
                        </div>
                        <div class="ai-block-paragraph">
                            <p class="h6-white">
                                Faites une demande d'étude gratuite sur notre site.
                            </p>
                        </div>
                    </div>
                    <div class="ai-work-block with-margin-up---down">
                        <div class="ai-icon-container">
                            <img src="/images/themes/expert.png" loading="lazy" alt="cloud icon">
                        </div>
                        <div class="ai-block-heading">
                            <h3 class="h5-m white-font">
                                Expertise
                            </h3>
                        </div>
                        <div class="ai-block-paragraph">
                            <p class="h6-white">
                                Notre expert se rend sur place pour établir un diagnostic adapté.
                            </p>
                        </div>
                        <div class="ai-horizontal-divider-right"></div>
                    </div>
                    <div class="ai-work-block">
                        <div class="ai-icon-container">
                            <img src="/images/themes/614a0447eb4a2545f1131641_bulb.svg" loading="lazy" alt="bulb icon">
                        </div>
                        <div class="ai-block-heading">
                            <h3 class="h5-m white-font">
                                Installation
                            </h3>
                        </div>
                        <div class="ai-block-paragraph">
                            <p class="h6-white">
                                Notre équipe d'installation se rend chez vous pour réaliser les travaux.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-12 with-margin-top-30">
                    <a href="{{ path('devis') }}">
                        <div class="button_theme">
                            Demandez une étude
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </section>
    <section class="machine-learning-section wf-section">
        <div class="main-container">
            <div class="machine-learning-container">
                <figure class="machine-learning-image-container" style="background-image:url('{{ asset('/images/realisations/2022/img8.JPG') }}')"></figure>
                <div class="machine-learning-text-container unl-padding">
                    <div class="machine-learning-heading-container">
                        <h2 class="h3-m align-left">
                            Renouvable et gratuit
                        </h2>
                    </div>
                    
                    <div class="align-justify" style="font-family: candara, Hind, sans-serif;font-size: 17px;line-height: 30px;color: #848991;">
                        Simple et rapide à installer, le panneau photovoltaïque résiste aux conditions climatiques extrêmes et à l’usure. Nos panneaux photovoltaïques sont garantis 30 ans et leur durée peut s'étendre jusqu’à 50 ans. Suivant des progrès techniques constants, il ouvre la voie de l’autoconsommation énergétique.<br/><br/>
                        <li>L’installation de panneaux photovoltaïques est une solution rentable à long terme :</li>
                        <li>L’exploitation de la ressource énergétique, le soleil, est gratuite et disponible partout.</li>
                        <li>Le panneau nécessite très peu de maintenance et l’électricité qu’il produit peut- être revendue sur le réseau public.</li>
                        <li>Produire son électricité permet l’augmentation du pouvoir d’achat et de valoriser sa maison.</li><br/>
                    </div>
                </div>
            </div>
            <div class="textLargeHm">
                Les cantons, en faveur de l’autoconsommation, mettent à disposition des particuliers, des subventions financières permettant l’installation des panneaux photovoltaïques à moindre coût.
                En plus de contribuer à la réduction des émissions de CO2 et de préserver les ressources naturelles, le panneau lui-même est recyclable.
                L’installation de panneaux photovoltaïques, c’est l’indépendance énergétique des propriétaires qui souhaitent augmenter leur pourvoir d’achat et valoriser leur maison, tout en préservant la planète.
            </div>
        </div>
    </section>
    <section class="news-section wf-section">
        <div class="main-container">
            <div class="news-container">
                <div class="news-heading-container">
                    <h2 class="h3-m">
                        Le saviez-vous ?
                    </h2>
                </div>
                <div class="with-margin-top-20 align-justify">
                    La Confédération s’est engagée à atteindre la neutralité carbone d’ici à 2050. <br/><br/>L’énergie solaire constitue l’un des principaux piliers de cette stratégie. Les énergies renouvelables doivent répondre à la demande croissante d’électricité, alors que les centrales nucléaires sont progressivement mises hors service. 
                    Les technologies sont disponibles. Le photovoltaïque, notamment, remplit toutes les conditions et présente le potentiel nécessaire en Suisse. C'est une réussite éclatante: depuis 2007, l'ensemble des panneaux photovoltaïques produisent davantage d'électricité que les centrales nucléaires. Et la puissance installée a été multipliée  plus de 60 fois depuis lors. <br/><br/>Réutilisable à l'infini, respectueuse de l'environnement, l'énergie solaire est une composante essentielle du bouquet énergétique de demain, en Suisse comme dans le reste du monde. 
                    Comparé à certains pays précurseurs comme l'Allemagne ou l'Italie, La Suisse produit encore peu d'électricité de cette manière: 4,5% seulement sur l'ensemble de la consommation d'électricité helvétique (en 2020). Mais différentes études montrent que le potentiel est considérable: ainsi, d'ici 2035, il est possible et nécessaire d'augmenter la production annuelle de 2,6 à 25 térawattheures (TWh).
                    <br/><br/>SwissSolar & WWF
                </div>
            </div>
        </div>
    </section>
    <section class="innovation-section wf-section">
        <div class="main-container">
            <div class="innovation-container">
                <div class="get-in-touch-heading-container">
                    <h2 class="h3-m white-align-center">
                        Plus de 6 000m2 de panneaux installés, c'est votre tour ?
                    </h2>
                </div>
                <div class="innocation-hero-button-container">
                    <a href="{{ path('devis') }}" class="button_theme">
                        Demander une étude
                    </a>
                </div>
            </div>
        </div>
        <figure class="section-bottom-divider"></figure>
    </section>

    <section class="get-answers-section wf-section">
        <div class="main-container">
            <div class="get-answer-container">
                <div class="get-answer-heading-container">
                    <h2 class="h3-m">
                        Une question ?
                    </h2>
                </div>
                <div class="get-answers-sub-text-container">
                    <p class="align-center">
                        Notre équipe commerciale est à votre disposition pour toute question.
                    </p>
                </div>
                <div class="answers-blocks-container">
                    <div class="answer-block">
                        <div class="answer-block-icon-container">
                            <img src="/images/themes/6148a366fb314137f93b1872_comment-blue.svg" loading="lazy" alt="comment icon
                            ">
                        </div>
                        <div class="answer-block-text-container">
                            <div class="answer-block-heading-container">
                                <h3 class="h5-m">
                                    Echange
                                </h3>
                            </div>
                            <div class="answer-block-paragraph-container">
                                <p class="para-17">
                                    Nous prennons le temps d'échanger avec vous.
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="answer-block">
                        <div class="answer-block-icon-container">
                            <img src="/images/themes/6148a365d3a0000fce55945f_thumbs-up-blue.svg" loading="lazy" alt="thimbs up icon
                            ">
                        </div>
                        <div class="answer-block-text-container">
                            <div class="answer-block-heading-container">
                                <h3 class="h5-m">
                                    S.A.V
                                </h3>
                            </div>
                            <div class="answer-block-paragraph-container">
                                <p class="para-17">
                                    Nous vous accompagnons tout au long de votre projet.
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="answer-block">
                        <div class="answer-block-icon-container">
                            <img src="/images/themes/6148a14a3aeb8d972d278143_mic-blue.svg" loading="lazy" alt="mic icon
                            ">
                        </div>
                        <div class="answer-block-text-container">
                            <div class="answer-block-heading-container">
                                <h3 class="h5-m">
                                    Réponse rapide
                                </h3>
                            </div>
                            <div class="answer-block-paragraph-container">
                                <p class="para-17">
                                    Nous répondons en moins de 72h à vos demandes.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="wf-section with-margin-bottom-40">
        <div class="main-container">
            <div class="get-answer-container">
                <div class="get-answer-heading-container">
                    <h2 class="h3-m">
                        Parternaire
                    </h2>
                </div>
                <div class="get-answers-sub-text-container">
                    <p class="align-center">
                        Dans un esprit collaboratif et soucieux de vous offrir des solutions adaptées à vos besoins. HomePerformance réalise des partenariats avec des entreprises qui partagent ses valeurs.
                    </p>
                </div>
                <div class="partner-blocks-container">
                    <a href="https://www.milenia.ch/fr/" target="_new">
                        <img src="/images/logos-partners/logo-milenia.png" loading="lazy" widht="100%" height="auto" style="max-width:300px;" alt="comment icon">
                    </a>
                    <div class="answer-block-text-container">
                        <div class="answer-block-paragraph-container">
                            <p class="para-17">
                            Milenia est une plateforme de financement établie en Suisse qui couvre tout le territoire, toutes les langues et tous les besoins liés au financement de vos projets personnels.
                            </p>
                            <br/>
                            <a href="https://www.milenia.ch/fr/" target="_new">
                                Visiter le site
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}

{% block javascriptFooter %}
    <script>
    $(document).ready(function(){
        if(width > 1024){
            redim('.dim1', 120);
        }
        function initCycle(mywidth) {
          if(mywidth <= 768){
               $('.crslHome').cycle('destroy');
               var newWidthMark = $('.crsl').parent().width();
               var newWidthMark = parseFloat(newWidthMark) / 2;
               $('.crsl').css({'width':newWidthMark});
               $('.crslHome').cycle({
                    fx: 'carousel',
                    carouselVisible: 2,
                    timeout:3000,
                    slides:'> .crsl',
                    fluid:true,
                    swipe:true,
                    allowwrap:false
               });
          }else{
               $('.crslHome').cycle({
                    fx: 'carousel',
                    carouselVisible: 4,
                    timeout:3000,
                    slides:'> .crsl',
                    fluid:true,
                    allowwrap:true
               });
          }
     }
     initCycle(width);
    });
</script>
{% endblock %}