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