templates/home/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Hello HomeController!{% endblock %}
  5. {% block body %}
  6.  <style>
  7.     body {
  8.       font-family: 'Segoe UI', sans-serif;
  9.     }
  10.     
  11.     .hero {
  12.       /* background: url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c') center/cover no-repeat; */
  13.       /* background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.1)), url(https://images.unsplash.com/photo-1600585154340-be6161a56a0c) center / cover no-repeat;
  14.       min-height: 90vh;
  15.       display: flex;
  16.       align-items: center;
  17.       color: white;
  18.       text-shadow: 1px 1px 4px rgba(0,0,0,0.6); */
  19.       min-height: 80vh;
  20.     display: flex;
  21.     align-items: center;
  22.     }
  23.     .service-card {
  24.       transition: all 0.3s ease;
  25.     }
  26.     .service-card:hover {
  27.       transform: translateY(-8px);
  28.       box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  29.     }
  30.     .cta-section {
  31.       background: #0170ba;
  32.       color: white;
  33.       padding: 60px 0;
  34.       text-align: center;
  35.     }
  36.   </style>
  38.   {# <!-- Hero -->
  39.   <section class="hero">
  40.     <div class="container text-center">
  41.       <h1 class="display-4 fw-bold">Votre Diagnostic Immobilier en Ligne</h1>
  42.       <p class="lead">Rapide, fiable et conforme à la réglementation française</p>
  43.       <a href="#services" class="btn btn-primary btn-lg mt-3">Découvrir nos services</a>
  44.     </div>
  45.   </section> #}
  47.   </section>
  48.   <!-- Section Image à droite / Texte à gauche -->
  49. <section class="py-5 hero">
  50.   <div class="container">
  51.     <div class="row align-items-center">
  52.       <!-- Texte -->
  53.       <div class="col-md-6">
  54.         <h2 class="fw-bold">Direct-Diag – Tous vos diagnostics immobiliers, en un clic.</h2>
  55.         <p class="lead">
  56.           Trouvez un diagnostiqueur certifié, comparez les offres, planifiez vos rendez-vous et suivez vos rapports en ligne. Simple, rapide et conforme.
  57.         </p>
  58.         <a href="#" class="btn btn-primary">Commencer maintenant</a>
  59.       </div>
  60.       <!-- Image -->
  61.       <div class="col-md-6 text-center">
  62.         <img src="{{asset('img/2.png')}}" 
  63.              class="img-fluid rounded" alt="Diagnostic immobilier">
  64.       </div>
  65.     </div>
  66.   </div>
  67. </section>
  68.   <!-- Services -->
  69.   <section id="services" class="py-5">
  70.     <div class="container">
  71.       <div class="text-center mb-5">
  72.         <h2 class="fw-bold">Choisir votre profil</h2>
  73.         <p class="text-muted">Des diagnostics complets pour vos biens immobiliers</p>
  74.       </div>
  75.       <div class="row g-4">
  76.         <div class="col-md-6">
  77.           <div class="card service-card h-100 text-center p-4">
  78.             <div class="mb-3">
  79.               <img src="{{asset('img/particular.png')}}" width="100" alt="Énergie">
  80.             </div>
  81.             <a href="{{ path('app_home_particular') }}" class="btn btn-primary">Particulier</a>
  82.             {# <p class="text-muted">Évaluez la performance énergétique de votre logement avec précision.</p> #}
  83.           </div>
  84.         </div>
  85.         <div class="col-md-6">
  86.           <div class="card service-card h-100 text-center p-4">
  87.             <div class="mb-3">
  88.               <img src="{{asset('img/pro.png')}}" width="100" alt="Amiante">
  89.             </div>
  90.             <a href="{{ path('app_user_new')}}" class="btn btn-primary">Professionnel</a>
  91.             {# <p class="text-muted">Vérifiez la présence d’amiante pour sécuriser vos transactions immobilières.</p> #}
  92.           </div>
  93.         </div>
  94.       </div>
  95.       {# <div class="row g-4">
  96.         <div class="col-md-4">
  97.           <div class="card service-card h-100 text-center p-4">
  98.             <div class="mb-3">
  99.               <img src="https://cdn-icons-png.flaticon.com/512/3065/3065747.png" width="60" alt="Énergie">
  100.             </div>
  101.             <h5>Diagnostic Énergétique (DPE)</h5>
  102.             <p class="text-muted">Évaluez la performance énergétique de votre logement avec précision.</p>
  103.           </div>
  104.         </div>
  105.         <div class="col-md-4">
  106.           <div class="card service-card h-100 text-center p-4">
  107.             <div class="mb-3">
  108.               <img src="https://cdn-icons-png.flaticon.com/512/3198/3198325.png" width="60" alt="Amiante">
  109.             </div>
  110.             <h5>Diagnostic Amiante</h5>
  111.             <p class="text-muted">Vérifiez la présence d’amiante pour sécuriser vos transactions immobilières.</p>
  112.           </div>
  113.         </div>
  114.         <div class="col-md-4">
  115.           <div class="card service-card h-100 text-center p-4">
  116.             <div class="mb-3">
  117.               <img src="https://cdn-icons-png.flaticon.com/512/3135/3135715.png" width="60" alt="Plomb">
  118.             </div>
  119.             <h5>Diagnostic Plomb</h5>
  120.             <p class="text-muted">Détection du plomb dans vos logements pour plus de sécurité.</p>
  121.           </div>
  122.         </div>
  123.       </div> #}
  124.     </div>
  125.   </section>
  127. <section class="section-image-text py-5">
  128.     <div class="container">
  129.       <div class="row align-items-center">
  130.         <!-- Image -->
  131.         <div class="col-md-6">
  132.           <img class="w-100" src="{{asset('img/1.png')}}" alt="Diagnostic Immobilier">
  133.         </div>
  134.         <!-- Texte -->
  135.         <div class="col-md-6">
  136.           <h2>Avec <b>Direct-Diag</b>, les diagnostics immobiliers ne sont plus une contrainte :</h2>
  137.           <p class="mt-3">
  138.             Avec Direct-Diag, bénéficiez d’une expertise reconnue, d’une transparence totale et d’une intervention rapide pour vos diagnostics obligatoires.  
  139.             Nous vous accompagnons de la prise de rendez-vous jusqu’à la remise de vos rapports officiels.
  140.           </p>
  141.           <ul>
  142.             <li>✅ Un réseau national de diagnostiqueurs certifiés, sélectionnés avec rigueur</li>
  143.             <li>✅ Un processus 100 % digital, de la demande de devis au dépôt des rapports réglementaires</li>
  144.             <li>✅ Des solutions adaptées aux particuliers, agences, promoteurs et collectivités</li>
  145.             <li>✅ Un gain de temps et une conformité garantie</li>
  146.           </ul>
  147.           <h6>👉 Direct-Diag, votre partenaire immobilier pour la transparence, la rapidité et la fiabilité.</h6>
  148.           {# <a href="#contact" class="btn btn-outline-primary mt-3">Demander un devis gratuit</a> #}
  149.         </div>
  150.       </div>
  151.     </div>
  154.   <!-- CTA -->
  155.   <section class="cta-section">
  156.     <div class="container">
  157.       <h2 class="fw-bold">Vous êtes un professionel en diagnostique immobilier ?</h2>
  158.       <p class="lead">rejoignez notre réseau de plus de 500 prestataires</p>
  159.       <a href="#" class="btn btn-light btn-lg mt-3">Rejoignez-nous</a>
  160.     </div>
  161.   </section>
  163.   
  164. {% endblock %}