templates/default/devis.html.twig line 1

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