templates/partials/partialsHome/_quote.html.twig line 1

Open in your IDE?
  1. <section id="request-order" class="py-20 bg-gray-50">
  2.     <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
  3.         <div class="text-center mb-12" data-aos="fade-up">
  4.             <h2 id="form-heading" class="text-4xl font-extrabold text-red mb-4">
  5.                 {{ 'quote.heading'|trans }}
  6.             </h2>
  7.             <p id="form-subtext" class="text-xl text-gray-600">
  8.                 {{ 'quote.subtext'|trans }}
  9.             </p>
  10.         </div>
  12.         <form name="quote-request"
  13.               id="quote-request-form"
  14.               action="{{ path('app_quote_submit', {'_locale': app.request.locale}) }}"
  15.               method="POST"
  16.                 {# Injections des traductions #}
  17.               data-swal-loading-title="{{ 'quote.swal.loading_title'|trans }}"
  18.               data-swal-loading-html="{{ 'quote.swal.loading_html'|trans }}"
  19.               data-swal-success-title="{{ 'quote.swal.success_title'|trans }}"
  20.               data-swal-error-title="{{ 'quote.swal.error_title'|trans }}"
  21.               data-swal-error-default="{{ 'quote.swal.error_default'|trans }}"
  22.               class="bg-white p-8 rounded-2xl shadow-2xl border-t-4 border-red space-y-6">
  25.             <input type="hidden" name="form-name" value="quote-request">
  27.             <div class="grid md:grid-cols-2 gap-6">
  28.                 <div>
  29.                     <label for="name" id="name-label" class="block text-sm font-medium text-gray-700 mb-2">{{ 'quote.form.name'|trans }} *</label>
  30.                     <input type="text" id="name" name="name" required
  31.                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gold focus:border-transparent transition duration-300">
  32.                 </div>
  34.                 <div>
  35.                     <label for="email" id="email-label" class="block text-sm font-medium text-gray-700 mb-2">{{ 'quote.form.email'|trans }} *</label>
  36.                     <input type="email" id="email" name="email" required
  37.                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gold focus:border-transparent transition duration-300">
  38.                 </div>
  39.             </div>
  41.             <div class="grid md:grid-cols-2 gap-6">
  42.                 <div>
  43.                     <label for="phone" id="phone-label" class="block text-sm font-medium text-gray-700 mb-2">{{ 'quote.form.phone'|trans }} *</label>
  44.                     <input type="tel" id="phone" name="phone" required
  45.                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gold focus:border-transparent transition duration-300">
  46.                 </div>
  48.                 <div>
  49.                     <label for="service" id="service-label" class="block text-sm font-medium text-gray-700 mb-2">{{ 'quote.form.service'|trans }} *</label>
  50.                     <select id="service" name="service" required
  51.                             class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gold focus:border-transparent transition duration-300">
  52.                         <option value="" id="service-default">{{ 'quote.form.service_placeholder'|trans }}</option>
  53.                         <option>GROUPAGE</option>
  54.                     </select>
  55.                 </div>
  56.             </div>
  58.             <div class="grid md:grid-cols-2 gap-6">
  59.                 <div>
  60.                     <label for="origin" id="origin-label" class="block text-sm font-medium text-gray-700 mb-2">{{ 'quote.form.origin'|trans }} *</label>
  61.                     <input type="text" id="origin" name="origin" required
  62.                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gold focus:border-transparent transition duration-300">
  63.                 </div>
  65.                 <div>
  66.                     <label for="destination" id="destination-label" class="block text-sm font-medium text-gray-700 mb-2">{{ 'quote.form.destination'|trans }} *</label>
  67.                     <input type="text" id="destination" name="destination" required
  68.                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gold focus:border-transparent transition duration-300">
  69.                 </div>
  70.             </div>
  72.             <div>
  73.                 <label for="details" id="details-label" class="block text-sm font-medium text-gray-700 mb-2">{{ 'quote.form.details'|trans }} *</label>
  74.                 <textarea id="details" name="details" rows="4" required
  75.                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gold focus:border-transparent transition duration-300"></textarea>
  76.             </div>
  78.             <button type="submit" id="quote-request-btn"
  79.                     class="w-full bg-primary-blue text-white py-3 px-4 rounded-lg font-bold hover:bg-primary-blue-dark transition duration-300 transform hover:scale-[1.02]">
  80.                 <i class="fas fa-paper-plane mr-2"></i>
  81.                 <span id="submit-button-text">{{ 'quote.form.submit'|trans }}</span>
  82.             </button>
  84.             <p id="form-note" class="text-center text-sm text-gray-500 mt-4">
  85.                 <i class="fas fa-lock mr-2"></i>
  86.                 {{ 'quote.form.privacy_note'|trans }}
  87.             </p>
  88.         </form>
  89.     </div>
  90. </section>