templates/frontView/demo.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Demander une démonstration{% endblock %}
  5. {% block body %}
  6. <header>{{ include('@FrontView/menus.html.twig') }}</header>
  7. <main class="front-office-page front-office-generic-page demo-page py-4">
  8.     <div class="container"><div class="row py-1 g-4">
  9.         <aside class="col-md-2">{{ include('@FrontView/menusgeneral.html.twig', { hidePartners: true }) }}</aside>
  10.         <div class="col-md-10">
  11.             <section class="demo-hero rounded-4 p-4 p-md-5 mb-4">
  12.                 <span class="demo-eyebrow">RAPETO DIGITAL</span>
  13.                 <h1 class="fw-bold text-white mt-2 mb-2">Demander une démonstration</h1>
  14.                 <p class="text-white-50 mb-0">Découvrez notre solution avec une démonstration adaptée à votre activité.</p>
  15.             </section>
  16.             {% for message in app.flashes('success') %}<div class="alert alert-success alert-dismissible fade show rounded-3" role="alert">{{ message }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>{% endfor %}
  17.             {% for message in app.flashes('error') %}<div class="alert alert-danger alert-dismissible fade show rounded-3" role="alert">{{ message }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>{% endfor %}
  18.             <div class="row g-4">
  19.                 <div class="col-lg-7"><div class="demo-card h-100">
  20.                     <div class="mb-4"><p class="text-muted mb-0">Les champs marqués d’un astérisque sont obligatoires.</p></div>
  21.                     <form method="post" action="{{ path('app_demo') }}">
  22.                         <input type="hidden" name="_token" value="{{ csrf_token('demo_form') }}">
  23.                         {% if selected_product %}<input type="hidden" name="product_id" value="{{ selected_product.id }}">{% endif %}
  24.                         <div class="row g-3">
  25.                             <div class="col-md-6"><label for="demo_name" class="form-label">Nom complet *</label><input type="text" id="demo_name" name="name" class="form-control" placeholder="Votre nom" required></div>
  26.                             <div class="col-md-6"><label for="demo_email" class="form-label">Adresse e-mail *</label><input type="email" id="demo_email" name="email" class="form-control" placeholder="vous@exemple.com" required></div>
  27.                             <div class="col-md-6"><label for="demo_phone" class="form-label">Téléphone</label><input type="tel" id="demo_phone" name="phone" class="form-control" placeholder="Votre numéro"></div>
  28.                             <div class="col-md-6"><label for="requester_type" class="form-label">Type de demandeur *</label><select id="requester_type" name="requester_type" class="form-select" required><option value="">Choisir un type</option><option>Particulier</option><option>Entreprise</option></select></div>
  29.                             <div class="col-md-6"><label for="location" class="form-label">Lieu *</label><input type="text" id="location" name="location" class="form-control" placeholder="Votre ville ou région" required></div>
  30.                             <div class="col-md-6"><label for="role" class="form-label">Rôle / Fonction *</label><select id="role" name="role" class="form-select" required><option value="">Choisir une fonction</option><option>Gérant</option><option>Caissier / Caissière</option><option>Comptable</option><option>Autre</option></select></div>
  31.                             <div class="col-md-6"><label for="product_name" class="form-label">Nom du produit *</label><input type="text" id="product_name" name="product_name" class="form-control" value="{{ selected_product ? selected_product.title : '' }}" placeholder="Produit à découvrir"{% if selected_product %} readonly{% endif %} required></div>
  32.                             <div class="col-md-6"><label for="product_type" class="form-label">Type du produit *</label><input type="text" id="product_type" name="product_type" class="form-control" value="{{ selected_product ? selected_product.statetypeLabels|join(' / ') : '' }}" placeholder="Type de produit"{% if selected_product %} readonly{% endif %} required></div>
  33.                             <div class="col-12 pt-2"><button type="submit" class="btn btn-primary px-4 demo-submit-btn"><span class="demo-submit-label">Envoyer ma demande <i class="fas fa-arrow-right ms-2"></i></span><span class="demo-submit-loading" aria-hidden="true"><span class="demo-spinner"></span> Envoi en cours…</span></button></div>
  34.                         </div>
  35.                     </form>
  36.                 </div></div>
  37.                 <div class="col-lg-5"><div class="demo-card h-100">
  38.                     <h2 class="h4 fw-bold text-primary mb-4">Pourquoi nous contacter ?</h2>
  39.                     <div class="demo-benefit"><span><i class="fas fa-lightbulb"></i></span><div><strong>Un conseil adapté</strong><p>Nous vous orientons vers la solution correspondant à votre activité.</p></div></div>
  40.                     <div class="demo-benefit"><span><i class="fas fa-laptop-code"></i></span><div><strong>Une solution sur mesure</strong><p>Site vitrine, plateforme dynamique ou logiciel métier.</p></div></div>
  41.                     <div class="demo-benefit"><span><i class="fas fa-desktop"></i></span><div><strong>Une démonstration personnalisée</strong><p>Découvrez les fonctionnalités adaptées à votre projet.</p></div></div>
  42.                     <hr class="my-4"><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>
  43.                 </div></div>
  44.             </div>
  45.         </div>
  46.     </div></div>
  47. </main>
  48. {{ include('@FrontView/footer.html.twig') }}
  49. <style>
  50.     .demo-page { background:#f7f9fc; } .demo-hero { background:linear-gradient(135deg,#003b7e 0%,#1769aa 100%); } .demo-eyebrow { color:#ffd34e;font-size:.7rem;font-weight:700;letter-spacing:.14rem; } .demo-card { background:#fff;border-radius:1rem;padding:1.5rem;box-shadow:0 12px 35px rgba(0,59,126,.08); } .demo-card .form-label { color:#16324f;font-weight:600; } .demo-card .form-control,.demo-card .form-select { border:1px solid #dbe3ee;border-radius:.7rem; } .demo-card .form-control:focus,.demo-card .form-select:focus { border-color:#1769aa;box-shadow:0 0 0 .2rem rgba(23,105,170,.12); } .demo-benefit { display:flex;gap:1rem;margin-bottom:1.5rem; } .demo-benefit>span { flex:0 0 42px;height:42px;display:flex;align-items:center;justify-content:center;background:#eaf3fb;border-radius:.7rem;color:#1769aa; } .demo-benefit strong { color:#16324f; } .demo-benefit p { color:#718096;margin:.25rem 0 0;font-size:.85rem; }
  51.     .demo-submit-loading { display:none; }
  52.     .demo-submit-btn.is-loading { cursor:wait; opacity:.85; }
  53.     .demo-submit-btn.is-loading .demo-submit-label { display:none; }
  54.     .demo-submit-btn.is-loading .demo-submit-loading { display:inline-flex;align-items:center;gap:.5rem; }
  55.     .demo-spinner { width:1rem;height:1rem;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:demo-spin .7s linear infinite; }
  56.     @keyframes demo-spin { to { transform:rotate(360deg); } }
  57. </style>
  58. <script>
  59.     document.addEventListener('DOMContentLoaded', function () {
  60.         const form = document.querySelector('.demo-page form');
  61.         const button = document.querySelector('.demo-submit-btn');
  62.         if (!form || !button) return;
  63.         form.addEventListener('submit', function () {
  64.             if (!form.checkValidity()) return;
  65.             button.disabled = true;
  66.             button.classList.add('is-loading');
  67.             button.setAttribute('aria-busy', 'true');
  68.         });
  69.     });
  70. </script>
  71. {% endblock %}