templates/main/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}GeoPV site officiel{% endblock %}
  5. {% block body %}
  7.     <!-- CAROUSSEL -->
  8.     <div id="myCarousel" class="carousel slide carousel-fade slide-in-fwd-center" data-bs-ride="carousel">
  9.             <div class="carousel-inner">
  10.                 <div class="carousel-item active">
  11.                     <img src="{{ asset('assets/img/caroussel_01.jpg') }}" class="d-block w-100" alt="...">
  12.                     <div class="container">
  13.                         <div class="carousel-caption text-center gradient-buttons slide-in-fwd-center-2">
  14.                             <h1 class="mb-2" style="font-weight:bold;color: white;">Investisseurs ou constructeurs?</h1>
  15.                             <h2 class="mb-2" style="font-weight:bold;color: white;">Pour implanter des panneaux photovoltaïques sur des hectares!</h2>
  16.                             <p><a class="btn btn-carou btn-danger" href="#prix">S'inscrire maintenant!</a></p>
  17.                         </div>
  18.                     </div>
  19.                 </div>
  20.                 <div class="carousel-item">
  21.                     <img src="{{ asset('assets/img/caroussel_02.jpg') }}" class="d-block w-100" alt="...">
  22.                     <div class="container">
  23.                         <div class="carousel-caption text-center gradient-buttons slide-in-fwd-center-2">
  24.                             <h1 class="mb-2" style="font-weight:bold;">Utilisez Geopv pour vos recherches</h1>
  25.                             <h2 class="mb-2" style="font-weight:bold;">Produisez pour votre consommation ou revendez!</h2>
  26.                             <p><a class="btn btn-carou btn-danger" href="#fonctionnement">En savoir +</a></p>
  27.                         </div>
  28.                     </div>
  29.                 </div>
  30.                 <div class="carousel-item">
  31.                     <img src="{{ asset('assets/img/caroussel_04.jpg') }}" class="d-block w-100" alt="...">
  32.                     <div class="container">
  33.                         <div class="carousel-caption text-center gradient-buttons slide-in-fwd-center-2">
  34.                             <h1 class="mb-2" style="font-weight:bold;color: white;">Recherche de cadastres par critères</h1>
  35.                             <h2 class="mb-2" style="font-weight:bold;color: white;">Base de données d'informations sur les cadastres qui peuvent vous intéresser</h2>
  36.                             <p><a class="btn btn-carou btn-danger" href="#fonctionnement">Voir</a></p>
  37.                         </div>
  38.                     </div>
  39.                 </div>
  40.                 <div class="carousel-item">
  41.                     <img src="{{ asset('assets/img/caroussel_03.jpg') }}" class="d-block w-100" alt="...">
  42.                     <div class="container">
  43.                         <div class="carousel-caption text-center gradient-buttons slide-in-fwd-center-2">
  44.                             <h1 class="mb-2" style="font-weight:bold;">Pas de demi-mesures! Abonnez-vous vite!</h1>
  45.                             <h2 class="mb-2" style="font-weight:bold;">Investissez-vous dans le devenir énergétique de grand ampleur!</h2>
  46.                             <p><a class="btn btn-carou btn-danger" href="#prix">Voir</a></p>
  47.                         </div>
  48.                     </div>
  49.                 </div>
  50.             </div>
  51.             <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
  52.                 <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  53.                 <span class="visually-hidden">Précédemment</span>
  54.             </button>
  55.             <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
  56.                 <span class="carousel-control-next-icon" aria-hidden="true"></span>
  57.                 <span class="visually-hidden">Suivant</span>
  58.             </button>
  59.         </div>
  60.     <!-- FIN CAROUSSEL -->
  63.     <!-- SECTION 1 : PRESENTATION APP -->
  64.     <section id="presentation" class="py-3">
  65.         <div class="container py-2 slide-in-fwd-center-3">
  66.             <h1 class="titre-presentation text-center my-3">Présentation du service</h1>
  67.         </div>
  69.         <div class="bloc-presentation mx-auto my-0">
  70.             
  71.             <div class="presentation align-items-center my-0">
  72.                 <!--<div class="col-lg-7"><img class="image-card rounded mb-4 mb-lg-0" src="https://dummyimage.com/900x400/dee2e6/6c757d.jpg" alt="..." /></div>-->
  73.                 <div class="col-lg-5 gradient-buttons slide-in-fwd-left">
  74.                     <h1 class="titre-para-presentation font-weight-light my-4">Application cartographique GeoPV</h1>
  75.                     <p class="paragraphe">Comment procéder pour obtenir l'accès à l'application GeoPV via le site web : commencer par la création d'un compte, c'est rapide et vous n'aurez plus qu'à prendre le temps de lire la description de nos différentes offres d'accès à l'application cartographique GeoPV.</br> Ne perdez pas de temps!</p>
  76.                     <a class="btn btn-danger w-100 my-4" href="#connexionModal">Création d'un compte</a>
  77.                 </div>
  78.                 <img src="{{ asset('assets/img/presentation.svg') }}" class="img-presentation slide-in-fwd-right" alt="">
  79.             </div>
  80.             
  81.             <div class="card text-white bg-secondary mb-5 py-1 text-center slide-in-fwd-center">
  82.                 <div class="card-body"><p class="text-white m-0">Simplement suivre les étapes décritent ci-dessous afin de profiter des différents accès à l'application en prenant soin de choisir l'offre qui vous correspond!</p></div>
  83.             </div>
  84.             
  85.             <div class="row gx-4 gx-lg-5">
  86.                 <div class="col-md-4 mb-5 slide-in-fwd-left">
  87.                     <div class="card h-100">
  88.                         <div class="card-body">
  89.                             <h2 class="card-title">Étape 1</h2>
  90.                             <p class="paragraphe card-text">Création d'un compte GeoPV de suite pour accéder à nos 3 offres dont une formule de paiement à la recherche ainsi qu'un abonnement.</p>
  91.                         </div>
  92.                         <div class="card-footer gradient-buttons"><a class="btn btn-danger btn-sm" href="#prix">Voir les offres</a></div>
  93.                     </div>
  94.                 </div>
  95.                 <div class="col-md-4 mb-5 slide-in-fwd-center">
  96.                     <div class="card h-100">
  97.                         <div class="card-body">
  98.                             <h2 class="card-title">Étape 2</h2>
  99.                             <p class="paragraphe card-text">Compléter correctement votre profil via l'interface et démarrer une recherche de votre choix sur le formulaire de l'outil cartographique.</p>
  100.                         </div>
  101.                         <div class="card-footer gradient-buttons"><a class="btn btn-danger btn-sm" href="#prix">Voir les offres</a></div>
  102.                     </div>
  103.                 </div>
  104.                 <div class="col-md-4 mb-5 slide-in-fwd-right">
  105.                     <div class="card h-100">
  106.                         <div class="card-body">
  107.                             <h2 class="card-title">Étape 3</h2>
  108.                             <p class="paragraphe card-text">Visualisation de données issues des couches d'informations disponibles pour les cadastres, les zones urbaines, et les éléments de l'ensemble du réseau électique.</p>
  109.                         </div>
  110.                         <div class="card-footer gradient-buttons"><a class="btn btn-danger btn-sm" href="#prix">Voir les offres</a></div>
  111.                     </div>
  112.                 </div>
  113.             </div>
  114.         </div>
  116.     </section>
  117.     <!-- FIN SECTION 1 : PRESENTATION APP -->
  119.     <hr class="grad">
  120.         <div class="bg-service slide-in-fwd-center">
  121.             <q>Un savoir-faire pour répondre à vos besoins au mieux possible</q>          
  122.         </div>
  123.     <hr class="grad">
  125.     <!-- SECTION 2 : ATOUTS APP -->
  126.     <section id="atouts" class="py-3">
  127.         <div class="container py-2 slide-in-fwd-center">
  128.             <h1 class="titre-atouts text-center my-3">Les atouts</h1>
  129.         </div>
  130.         <div class="bloc-atouts mx-auto my-3">
  131.             <img src="{{ asset('assets/img/atouts.svg') }}" class="img-atouts mb-5 slide-in-fwd-left" alt="">
  132.             <p class="paragraphe desc-atouts slide-in-fwd-right">Bénéficiez d'un accès à une multitude d'informations provenant d'une expérience de long termes dans la récolte de données concrètes concernant toute la métropole.</p>        
  133.         </div>        
  134.     </section>
  135.     <!-- FIN SECTION 2 : ATOUTS APP -->
  137.     <hr class="grad">
  138.         <div class="bg-service slide-in-fwd-center-2">
  139.             <q>Rapidité d'interaction, facilité d'utilisation</q>            
  140.         </div>
  141.     <hr class="grad">
  143.     <!-- SECTION 3 : FONCTIONNEMENT APP -->
  144.     <section id="fonctionnement" class="py-3">
  145.         <div class="container py-2 slide-in-fwd-center">
  146.             <h1 class="titre-fonctionnement text-center my-3">Fonctionnement</h1>
  147.         </div>
  148.         <div class="bloc-fonctionnement mx-auto my-3">
  149.             <p class="paragraphe desc-fonctionnement slide-in-fwd-left">Possibilité d'extraire les informations obtenues par la recherche effectuée sur les couches de données au format adéquat.</p>        
  150.             <img src="{{ asset('assets/img/fonctionnement.svg') }}" class="img-fonctionnement slide-in-fwd-right" alt="">
  151.         </div> 
  152.     </section>
  153.     <!-- FIN SECTION 3 : FONCTIONNEMENT APP -->
  155.     <hr class="grad">
  156.         <div class="bg-service slide-in-fwd-center">
  157.             <q>Recherche précise, visualisation des données de l'API et extraction!</q>            
  158.         </div>
  159.     <hr class="grad">
  161.     <!-- SECTION 4 : NOS OFFRES APP -->
  162.     <section id="prix" class="py-3">
  163.         <div class="container pt-2 slide-in-fwd-center slide-in-fwd-visible">
  164.             <h1 class="titre-prix text-center my-3">Nos prix par abonnements</h1>            
  165.         </div>
  166.         <div class="mx-auto text-center py-2">
  167.             <img src="{{ asset('assets/img/prix.svg') }}" class="svg-prix slide-in-fwd-center" alt="">
  168.         </div>
  169.         <div class="bloc-prix mx-auto my-0">
  170.             <p class="paragraphe mx-auto desc-prix slide-in-fwd-center">Ne perdez plus de temps! Vous avez besoin de plus d'informations sur un cadastre, essayez la formule 1 mois sans hésitations!</p>
  171.         </div>
  172.         <div class="bloc-prix mx-auto my-0">
  173.             <p class="paragraphe mx-auto desc-prix slide-in-fwd-center">Déjà adepte de notre système? Veuillez passer en status d'abonné sans tarder!</p>          
  174.         </div>        
  175.     
  176.         <div class="container mx-auto my-5 row row-cols-1 row-cols-md-3 mb-3 text-center slide-in-fwd-center">
  177.             <div class="col">
  178.                 <div class="card mb-4 rounded-3 shadow-sm">
  179.                 <div class="card-header py-3">
  180.                     <h4 class="my-0 fw-normal">Formule TEST</h4>
  181.                 </div>
  182.                 <div class="card-body gradient-buttons">
  183.                     <h1 class="card-title pricing-card-title">19 €<small class="text-muted fw-light"> par mois</small></h1>
  184.                     <ul class="list-unstyled mt-3 mb-4">
  185.                     <li>1 mois d'accès</li>
  186.                     <li>Accès limité à 1 mois</li>
  187.                     <li>Plus de 500 communes</li>
  188.                     <li>Email de support</li>
  189.                     </ul>
  190.                     <button type="button" class="w-100 btn btn-lg btn-outline-danger slide-in-fwd-center-2">Essayez!</button>
  191.                 </div>
  192.                 </div>
  193.             </div>
  194.             <div class="col">
  195.                 <div class="card mb-4 rounded-3 shadow-sm">
  196.                 <div class="card-header py-3">
  197.                     <h4 class="my-0 fw-normal">Formule PRO</h4>
  198.                 </div>
  199.                 <div class="card-body gradient-buttons">
  200.                     <h1 class="card-title pricing-card-title">95 €<small class="text-muted fw-light"> les 6 mois</small></h1>
  201.                     <ul class="list-unstyled mt-3 mb-4">
  202.                     <li>6 mois complets d'utilisation</li>
  203.                     <li>Soit 1 mois gratuit!</li>
  204.                     <li>Accès limité à 6 mois</li>
  205.                     <li>Plus de 500 communes</li>
  206.                     <li>Email de support</li>
  207.                     </ul>
  208.                     <button type="button" class="w-100 btn btn-lg btn-danger slide-in-fwd-center-2">Commencez!</button>
  209.                 </div>
  210.                 </div>
  211.             </div>
  212.             <div class="col">
  213.                 <div class="card mb-4 rounded-3 shadow-sm border-danger">
  214.                 <div class="card-header py-3 text-white bg-danger border-danger">
  215.                     <h4 class="my-0 fw-normal">Formule VIP</h4>
  216.                 </div>
  217.                 <div class="card-body gradient-buttons">
  218.                     <h1 class="card-title pricing-card-title">179 €<small class="text-muted fw-light"> par an</small></h1>
  219.                     <ul class="list-unstyled mt-3 mb-4">
  220.                     <li>1 année d'accès</li>                    
  221.                     <li>Soit 2 mois gratuits!</li>
  222.                     <li>Accès limités à 1 année</li>
  223.                     <li>Plus de 500 communes</li>
  224.                     <li>Email de support</li>
  225.                     </ul>
  226.                     <button type="button" class="w-100 btn btn-lg btn-danger slide-in-fwd-center-2">De suite!</button>
  227.                 </div>
  228.                 </div>
  229.             </div>
  230.         </div>
  232.         <h2 class="text-center mb-4 slide-in-fwd-center">Comparaison des offres</h2>
  234.         <div class="container mx-auto my-5 table-responsive">
  235.             <table class="table text-center table-striped slide-in-fwd-center">
  236.                 <thead>
  237.                 <tr>
  238.                     <th style="width: 34%;"></th>
  239.                     <th style="width: 22%;">TEST</th>
  240.                     <th style="width: 22%;">PRO</th>
  241.                     <th style="width: 22%;">VIP</th>           
  242.                 </tr>
  243.                 </thead>
  244.                 <tbody>
  245.                 <tr>
  246.                     <th scope="row" class="text-start">Compte securisé</th>
  247.                     <td><i class="fas fa-check"></i></td>
  248.                     <td><i class="fas fa-check"></i></td>
  249.                     <td><i class="fas fa-check"></i></td>
  250.                 </tr>                
  251.                 <tr>
  252.                     <th scope="row" class="text-start">Ticket support</th>
  253.                     <td><i class="fas fa-check"></i></td>
  254.                     <td><i class="fas fa-check"></i></td>
  255.                     <td><i class="fas fa-check"></i></td>
  256.                 </tr>
  257.                 <tr>
  258.                     <th scope="row" class="text-start">Paiement STRIPE securisé</th>
  259.                     <td><i class="fas fa-check"></i></td>
  260.                     <td><i class="fas fa-check"></i></td>
  261.                     <td><i class="fas fa-check"></i></td>
  262.                 </tr>
  263.                 <tr>
  264.                     <th scope="row" class="text-start">Recherche par commune</th>
  265.                     <td><i class="fas fa-check"></i></td>
  266.                     <td><i class="fas fa-check"></i></td>
  267.                     <td><i class="fas fa-check"></i></td>
  268.                 </tr>
  269.                 <tr>
  270.                     <th scope="row" class="text-start">1 mois d'accès</th>
  271.                     <td><i class="fas fa-check"></i></td>
  272.                     <td></td>
  273.                     <td></td>
  274.                 </tr>
  275.                 <tr>
  276.                     <th scope="row" class="text-start">6 mois d'accès</th>
  277.                     <td></td>
  278.                     <td><i class="fas fa-check"></i></td>
  279.                     <td></td>
  280.                 </tr>
  281.                 <tr>
  282.                     <th scope="row" class="text-start">12 mois d'accès</th>
  283.                     <td></td>
  284.                     <td></td>
  285.                     <td><i class="fas fa-check"></i></td>
  286.                 </tr>
  287.                 </tbody>
  288.             </table>
  289.         </div>
  291.     </section>
  292.     <!-- FIN SECTION 4 : NOS OFFRES APP -->
  294.     <hr class="grad">
  295.         <div class="bg-service slide-in-fwd-center">
  296.             <q>Investisseurs ou constructeurs, l'application GeoPV vous tient!</q>           
  297.         </div>
  298.     <hr class="grad">
  300.     <!-- SECTION 5 : À PROPOS APP -->
  301.     <section id="apropos" class="py-3">
  302.         <div class="container py-2 slide-in-fwd-center">
  303.             <h1 class="titre-apropos text-center my-3">À propos</h1>
  304.         </div>
  305.         <div class="bloc-apropos mx-auto mt-3">
  306.             <p class="paragraphe desc-apropos my-5 slide-in-fwd-left">
  307.             À la base fondée par des professionnels expérimentés dans leur domaine, Renergies est une société spécialisé dans le secteur du photovoltaïque basée sur la région Lyonnaise. Nous intervenons sur la France entière. <br><br>
  308.             À travers l'application GeoPV, nous souhaitons faciliter l'accès aux recherches effectuées par les investisseurs et constructeurs du domaine du solaire sur l'ensemble du territoire de l'hexagone.<br><br>
  309.             Notre mission a pour objectif de réduire le temps de recherche pour certains types de données précises, tout en ayant la possibilité d'en sauvegarder les resultats.</p>        
  310.             <img src="{{asset('assets/img/apropos.svg')}}" class="img-apropos slide-in-fwd-right" alt="">
  311.         </div> 
  313.         <!-- A PROPOS -->
  314.         <div class="container-fluid mx-auto my-5">
  315.             <div class="row w-100 h-100 mx-auto justify-content-center align-items-start">  <!--style="min-height: 100vh;"-->
  316.                 <div class="col-12 col-sm-8 col-md-6 col-lg-5 col-xl-4">
  318.                     <form class="mx-auto bg-light rounded p-4 p-sm-5 my-4 mx-3 gradient-buttons slide-in-fwd-left" action="" method="POST" enctype="multipart/form-data">
  319.                         <div class="d-flex align-items-center justify-content-between mb-3">
  320.                             <a href="index.html" class="">
  321.                                 <h2 class="text-primary slide-in-fwd-center">À PROPOS</h2>
  322.                             </a>
  323.                             <h3>Si vous avez une question</h3>
  324.                         </div>
  325.                         <div class="form-floating mb-3">
  326.                             <input type="text" class="form-control" id="floatingText4" placeholder="Dupont">
  327.                             <label for="floatingText4">Nom</label>
  328.                         </div>
  329.                         <div class="form-floating mb-3">
  330.                             <input type="text" class="form-control" id="floatingText5" placeholder="Jacques">
  331.                             <label for="floatingText5">Prénom</label>
  332.                         </div>
  333.                         <div class="form-floating mb-3">
  334.                             <input type="text" class="form-control" id="floatingText6" placeholder="AlphaBâti69">
  335.                             <label for="floatingText6">Société</label>
  336.                         </div>
  337.                         <div class="form-floating mb-3">
  338.                             <input type="email" class="form-control" id="floatingInput7" placeholder="nom@exemple.fr">
  339.                             <label for="floatingInput7">Adresse mail</label>
  340.                         </div>
  341.                         <div class="form-floating mb-3">
  342.                             <textarea class="form-control" id="floatingTextarea" placeholder="Laisser un message ici.." style="height:75px;"></textarea>
  343.                             <label for="floatingTextarea">Message</label>
  344.                         </div>
  345.                         <button type="submit" class="btn btn-primary py-3 w-100 mb-4">Envoyer</button>                    
  346.                     </form>
  348.                 </div>
  349.                 <div class="col-12 col-sm-8 col-md-6 col-lg-5 col-xl-4">
  350.                     <div class="mx-auto bg-light rounded p-4 p-sm-5 my-4 mx-3 slide-in-fwd-right">
  351.                         <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d89077.17183972045!2d4.765090345653721!3d45.75792930291083!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47f4ea516ae88797%3A0x408ab2ae4bb21f0!2sLyon!5e0!3m2!1sfr!2sfr!4v1651826526913!5m2!1sfr!2sfr" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" style="width:25%"></iframe>                       
  352.                     </div>
  353.                 </div>
  354.             </div>
  355.         </div>
  356.         <!-- FIN A PROPOS -->  
  357.     </section>
  358.     <!-- FIN SECTION 5 : À PROPOS APP -->
  359. {% endblock %}