templates/frontView/contact.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Demander un devis{% endblock %}
  5. {% block body %}
  6. <header>
  7.     {{ include('@FrontView/menus.html.twig') }}
  8. </header>
  10. <main class="front-office-page front-office-generic-page demo-page py-4">
  11.     <div class="container">
  12.         <div class="row py-1 g-4">
  13.             <aside class="col-md-2">
  14.                 {{ include('@FrontView/menusgeneral.html.twig', { hidePartners: true }) }}
  15.             </aside>
  17.             <div class="col-md-10">
  18.                 {% for message in app.flashes('success') %}
  19.                     <div class="alert alert-success alert-dismissible fade show rounded-3" role="alert">
  20.                         <i class="fas fa-check-circle me-2"></i>{{ message }}
  21.                         <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  22.                     </div>
  23.                 {% endfor %}
  24.                 {% for message in app.flashes('error') %}
  25.                     <div class="alert alert-danger alert-dismissible fade show rounded-3" role="alert">
  26.                         <i class="fas fa-exclamation-circle me-2"></i>{{ message }}
  27.                         <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  28.                     </div>
  29.                 {% endfor %}
  31.                 <section class="demo-hero rounded-4 p-4 p-md-5 mb-4">
  32.                     <div class="row align-items-center g-4">
  33.                         <div class="col-lg-8">
  34.                             <span class="demo-eyebrow">RAPETO DIGITAL</span>
  35.                             <h1 class="fw-bold text-white mt-2 mb-3">Demander un devis</h1>
  36.                             <p class="text-white-50 mb-0">Décrivez votre projet et recevez une proposition adaptée à vos besoins.</p>
  37.                         </div>
  38.                         <div class="col-lg-4 text-center">
  39.                             <div class="contact-icon-wrap"><i class="fas fa-comments"></i></div>
  40.                         </div>
  41.                     </div>
  42.                 </section>
  44.                 <div class="row g-4">
  45.                     <div class="col-lg-7">
  46.                         <div class="demo-card h-100">
  47.                             <div class="mb-4">
  48.                                 <p class="text-muted mb-0">Les champs marqués d’un astérisque sont obligatoires.</p>
  49.                             </div>
  51.                             <form method="post" action="{{ path('app_contact') }}">
  52.                                 <input type="hidden" name="_token" value="{{ csrf_token('contact_form') }}">
  53.                                 {% if quote_product %}<input type="hidden" name="product_id" value="{{ quote_product.id }}">{% endif %}
  54.                                 <div class="row g-3">
  55.                                     <div class="col-md-6">
  56.                                         <label for="contact_name" class="form-label">Nom complet *</label>
  57.                                         <input type="text" id="contact_name" name="name" class="form-control" placeholder="Votre nom" required>
  58.                                     </div>
  59.                                     <div class="col-md-6">
  60.                                         <label for="contact_email" class="form-label">Adresse e-mail *</label>
  61.                                         <input type="email" id="contact_email" name="email" class="form-control" placeholder="vous@exemple.com" required>
  62.                                     </div>
  63.                                     <div class="col-md-6">
  64.                                         <label for="contact_phone" class="form-label">Téléphone</label>
  65.                                         <input type="tel" id="contact_phone" name="phone" class="form-control" placeholder="Votre numéro">
  66.                                     </div>
  67.                                     <div class="col-md-6">
  68.                                         <label for="requester_type" class="form-label">Type de demandeur *</label>
  69.                                         <select id="requester_type" name="requester_type" class="form-select" required>
  70.                                             <option value="">Choisir un type</option>
  71.                                             <option>Particulier</option>
  72.                                             <option>Entreprise</option>
  73.                                         </select>
  74.                                     </div>
  75.                                     <div class="col-md-6">
  76.                                         <label for="location" class="form-label">Lieu *</label>
  77.                                         <input type="text" id="location" name="location" class="form-control" placeholder="Votre ville ou région" required>
  78.                                     </div>
  79.                                     <div class="col-md-6">
  80.                                         <label for="role" class="form-label">Rôle / Fonction *</label>
  81.                                         <select id="role" name="role" class="form-select" required>
  82.                                             <option value="">Choisir une fonction</option>
  83.                                             <option>Gérant</option>
  84.                                             <option>Caissier / Caissière</option>
  85.                                             <option>Comptable</option>
  86.                                             <option>Autre</option>
  87.                                         </select>
  88.                                     </div>
  89.                                     <div class="col-md-6">
  90.                                         <label for="product_name" class="form-label">Nom du produit *</label>
  91.                                         <input type="text" id="product_name" name="product_name" class="form-control" value="{{ quote_product ? quote_product.title : '' }}" placeholder="Produit demandé" readonly required>
  92.                                     </div>
  93.                                     <div class="col-md-6">
  94.                                         <label for="product_type" class="form-label">Type du produit *</label>
  95.                                         <input type="text" id="product_type" name="product_type" class="form-control" value="{{ quote_product ? quote_product.statetypeLabels|join(' / ') : '' }}" placeholder="Type de produit" readonly required>
  96.                                     </div>
  97.                                     <div class="col-12 pt-2">
  98.                                         <button type="submit" class="btn btn-primary px-4 contact-submit-btn">
  99.                                             <span class="contact-submit-label">Envoyer ma demande <i class="fas fa-arrow-right ms-2"></i></span>
  100.                                             <span class="contact-submit-loading" aria-hidden="true">
  101.                                                 <span class="contact-spinner"></span> Envoi en cours…
  102.                                             </span>
  103.                                         </button>
  104.                                     </div>
  105.                                 </div>
  106.                             </form>
  107.                         </div>
  108.                     </div>
  110.                     <div class="col-lg-5">
  111.                         <div class="demo-card h-100">
  112.                             <h2 class="h4 fw-bold text-primary mb-4">Pourquoi nous contacter ?</h2>
  113.                             <div class="contact-benefit">
  114.                                 <span><i class="fas fa-lightbulb"></i></span>
  115.                                 <div><strong>Un conseil adapté</strong><p>Nous vous orientons vers la solution correspondant à votre activité.</p></div>
  116.                             </div>
  117.                             <div class="contact-benefit">
  118.                                 <span><i class="fas fa-laptop-code"></i></span>
  119.                                 <div><strong>Une solution sur mesure</strong><p>Site vitrine, plateforme dynamique ou logiciel métier.</p></div>
  120.                             </div>
  121.                             <div class="contact-benefit">
  122.                                 <span><i class="fas fa-file-invoice-dollar"></i></span>
  123.                                 <div><strong>Un devis clair</strong><p>Votre besoin est étudié avant toute proposition.</p></div>
  124.                             </div>
  125.                             <hr class="my-4">
  126.                             <p class="text-muted mb-0"><i class="fas fa-clock text-primary me-2"></i>Nous revenons vers vous après réception de votre demande.</p>
  127.                         </div>
  128.                     </div>
  129.                 </div>
  130.             </div>
  131.         </div>
  132.     </div>
  133. </main>
  135. {{ include('@FrontView/footer.html.twig') }}
  137. <style>
  138.     .demo-page { background: #f7f9fc; }
  139.     .demo-hero { background: linear-gradient(135deg, #003b7e 0%, #1769aa 100%); overflow: hidden; padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
  140.     .demo-hero h1 { font-size: 2rem; }
  141.     .demo-hero p { font-size: 1rem; }
  142.     .demo-eyebrow { color: #ffd34e; font-size: .7rem; font-weight: 700; letter-spacing: .14rem; }
  143.     .contact-icon-wrap { display: inline-flex; align-items: center; justify-content: center; width: 90px; height: 90px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; color: #ffd34e; font-size: 2.4rem; }
  144.     .demo-card { background: #fff; border-radius: 1rem; padding: 1.5rem; box-shadow: 0 12px 35px rgba(0, 59, 126, .08); }
  145.     .demo-card h2 { font-size: 1.35rem; }
  146.     .demo-card .form-label { color: #16324f; font-weight: 600; }
  147.     .demo-card .form-control, .demo-card .form-select { border: 1px solid #dbe3ee; border-radius: .7rem; }
  148.     .demo-card .form-control:focus, .demo-card .form-select:focus { border-color: #1769aa; box-shadow: 0 0 0 .2rem rgba(23, 105, 170, .12); }
  149.     .contact-benefit { display: flex; gap: 1rem; margin-bottom: 1.5rem; }
  150.     .contact-benefit > span { flex: 0 0 42px; height: 42px; display: flex; align-items: center; justify-content: center; background: #eaf3fb; border-radius: .7rem; color: #1769aa; }
  151.     .contact-benefit strong { color: #16324f; }
  152.     .contact-benefit p { color: #718096; margin: .25rem 0 0; font-size: .85rem; }
  153.     .contact-submit-loading { display: none; }
  154.     .contact-submit-btn.is-loading { cursor: wait; opacity: .85; }
  155.     .contact-submit-btn.is-loading .contact-submit-label { display: none; }
  156.     .contact-submit-btn.is-loading .contact-submit-loading { display: inline-flex; align-items: center; gap: .5rem; }
  157.     .contact-spinner { width: 1rem; height: 1rem; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%; animation: contact-spin .7s linear infinite; }
  158.     @keyframes contact-spin { to { transform: rotate(360deg); } }
  159. </style>
  160. <script>
  161.     document.addEventListener('DOMContentLoaded', function () {
  162.         const form = document.querySelector('.demo-page form');
  163.         const button = document.querySelector('.contact-submit-btn');
  165.         if (!form || !button) {
  166.             return;
  167.         }
  169.         form.addEventListener('submit', function () {
  170.             if (!form.checkValidity()) {
  171.                 return;
  172.             }
  174.             button.disabled = true;
  175.             button.classList.add('is-loading');
  176.             button.setAttribute('aria-busy', 'true');
  177.         });
  178.     });
  179. </script>
  180. {% endblock %}