templates/default/devis.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Demande de devis — Otropik{% endblock %}
  5. {% block body %}
  7. {# ===== HERO ===== #}
  8. <section class="position-relative text-white">
  9.   <div class="ratio ratio-21x9">
  10.     <img src="{{ asset('img/summer-holidays.jpg')}}" alt="Inspiration voyage" class="w-100 h-100 object-fit-cover">
  11.   </div>
  12.   <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center text-center bg-dark bg-opacity-50">
  13.     <div class="p-3">
  14.       <h1 class="display-5 fw-bold mb-2">Demandez votre devis sur-mesure</h1>
  15.       <p class="lead mb-0">Dites-nous vos envies, on s’occupe de tout ✈️🌴</p>
  16.     </div>
  17.   </div>
  18. </section>
  20. {# ===== FORMULAIRE ===== #}
  21. <section class="container py-5">
  22.   {# Message succès/erreur éventuel #}
  23.   {% for label, messages in app.flashes %}
  24.     {% for m in messages %}
  25.       <div class="alert alert-{{ label }} rounded-3">{{ m }}</div>
  26.     {% endfor %}
  27.   {% endfor %}
  29.   <form method="post" action="{#{ path('quote.request.send') }#}" class="row g-4" enctype="multipart/form-data">
  30.     <div class="col-12 col-lg-8">
  31.       <div class="card border-0 shadow-sm rounded-4">
  32.         <div class="card-body p-4">
  34.           {# ---- Bloc 1 : Votre voyage ---- #}
  35.           <h2 class="h5 fw-bold mb-3">Votre voyage</h2>
  36.           <div class="row g-3 mb-4">
  37.             <div class="col-md-6">
  38.               <label class="form-label">Type de voyage</label>
  39.               <select name="trip_type" class="form-select rounded-pill" required>
  40.                 <option value="" selected>— Sélectionnez —</option>
  41.                 {% for type in typeSejour %}
  42.                   <option value="{{type.id}}">{{type.name}}</option>
  43.                 {% endfor %}
  44.               </select>
  45.             </div>
  46.             <div class="col-md-6">
  47.               <label class="form-label">Destination souhaitée</label>
  48.               <input type="text" name="destination" class="form-control rounded-pill" placeholder="Ex : Guadeloupe, Sainte-Lucie, Ouest USA…" required>
  49.             </div>
  50.             <div class="col-md-6">
  51.               <label class="form-label">Date de départ</label>
  52.               <input type="date" name="start_date" class="form-control rounded-pill">
  53.             </div>
  54.             <div class="col-md-6">
  55.               <label class="form-label">Durée (jours)</label>
  56.               <input type="number" name="duration_days" class="form-control rounded-pill" min="1" placeholder="Ex : 10">
  57.             </div>
  58.           </div>
  60.           {# ---- Bloc 2 : Voyageurs ---- #}
  61.           <h2 class="h5 fw-bold mb-3">Voyageurs</h2>
  62.           <div class="row g-3 mb-4">
  63.             <div class="col-6 col-md-3">
  64.               <label class="form-label">Adultes</label>
  65.               <input type="number" name="trav_adults" class="form-control rounded-pill" min="1" value="2">
  66.             </div>
  67.             <div class="col-6 col-md-3">
  68.               <label class="form-label">Enfants</label>
  69.               <input type="number" name="trav_children" class="form-control rounded-pill" min="0" value="0">
  70.             </div>
  71.             <div class="col-12 col-md-6">
  72.               <label class="form-label">Âges des enfants (si applicable)</label>
  73.               <input type="text" name="children_ages" class="form-control rounded-pill" placeholder="Ex : 4, 8">
  74.             </div>
  75.           </div>
  77.           {# ---- Bloc 3 : Budget & préférences ---- #}
  78.           <h2 class="h5 fw-bold mb-3">Budget & préférences</h2>
  79.           <div class="row g-3 mb-4">
  80.             <div class="col-md-6">
  81.               <label class="form-label">Budget global (à partir de)</label>
  82.               <div class="input-group">
  83.                 <span class="input-group-text">€</span>
  84.                 <input type="number" name="budget_from" class="form-control rounded-end-pill" min="0" step="100" placeholder="Ex : 2500">
  85.               </div>
  86.               <div class="form-text">Indiquez une estimation pour nous guider.</div>
  87.             </div>
  88.             <div class="col-md-6">
  89.               <label class="form-label">Style d’hébergement</label>
  90.               <select name="board_type" class="form-select rounded-pill">
  91.                 <option value="">— Indifférent —</option>
  92.                 <option>Room Only</option>
  93.                 <option>Petit-déjeuner</option>
  94.                 <option>Demi-pension</option>
  95.                 <option>Pension complète</option>
  96.                 <option>All Inclusive</option>
  97.               </select>
  98.             </div>
  99.             <div class="col-12">
  100.               <label class="form-label">Activités/ambiance souhaitées</label>
  101.               <input type="text" name="interests" class="form-control rounded-pill" placeholder="Plages, randonnée, road trip, croisière, culture, gastronomie…">
  102.             </div>
  103.           </div>
  105.           {# ---- Bloc 4 : Message ---- #}
  106.           <h2 class="h5 fw-bold mb-3">Votre message</h2>
  107.           <div class="mb-4">
  108.             <textarea name="message" rows="6" class="form-control rounded-4" placeholder="Parlez-nous de votre projet, vos envies, vos impératifs de dates…"></textarea>
  109.           </div>
  111.           {# ---- Option : pièce jointe ---- #}
  112.           <div class="mb-4">
  113.             <label class="form-label">Pièce jointe (facultatif)</label>
  114.             <input type="file" name="attachment" class="form-control">
  115.             <div class="form-text">PDF/JPG/PNG — 10 Mo max (itinéraire, inspiration…)</div>
  116.           </div>
  118.         </div>
  119.       </div>
  120.     </div>
  122.     {# ---- Colonne latérale : Contact & consentement ---- #}
  123.     <div class="col-12 col-lg-4">
  124.       <div class="card border-0 shadow-sm rounded-4 sticky-lg-top" style="top:1.25rem;">
  125.         <div class="card-body p-4">
  126.           <h2 class="h5 fw-bold mb-3">Vos coordonnées</h2>
  127.           <div class="mb-3">
  128.             <label class="form-label">Nom & prénom</label>
  129.             <input type="text" name="full_name" class="form-control rounded-pill" required>
  130.           </div>
  131.           <div class="mb-3">
  132.             <label class="form-label">Email</label>
  133.             <input type="email" name="email" class="form-control rounded-pill" required>
  134.           </div>
  135.           <div class="mb-3">
  136.             <label class="form-label">Téléphone</label>
  137.             <input type="tel" name="phone" class="form-control rounded-pill" placeholder="+590 …">
  138.           </div>
  140.           <div class="form-check my-3">
  141.             <input class="form-check-input" type="checkbox" value="1" name="newsletter" id="nl">
  142.             <label class="form-check-label" for="nl">Je souhaite recevoir les inspirations Otropik</label>
  143.           </div>
  145.           <div class="form-check mb-4">
  146.             <input class="form-check-input" type="checkbox" value="1" name="rgpd" id="rgpd" required>
  147.             <label class="form-check-label" for="rgpd">
  148.               J’accepte que mes données soient utilisées pour me recontacter (RGPD).
  149.             </label>
  150.           </div>
  152.           <input type="hidden" name="_token" value="{{ csrf_token('quote_request') }}">
  154.           <button type="submit" class="btn btn-primary w-100 rounded-pill py-2">
  155.             <i class="bi bi-send me-1"></i> Envoyer ma demande
  156.           </button>
  157.           <p class="small text-muted mt-3 mb-0">
  158.             Réponse rapide sous 24–48h ouvrées par un spécialiste Otropik.
  159.           </p>
  160.         </div>
  161.       </div>
  162.     </div>
  163.   </form>
  164. </section>
  166. {% endblock %}