templates/vitrine/contact.html.twig line 1

  1. {% extends 'vitrine/base.html.twig' %}
  3. {# {% block title %}{{ title }} {% endblock %} #}
  5. {% block stylesheets %}
  7. {% endblock %}
  10. {% block body %}
  12.     <!--bread-crumb-->
  13.     <div class="iq-breadcrumb" style="">
  14.         <div class="container-fluid">
  15.         <div class="row align-items-center">
  16.                 <div class="col-sm-12">
  17.                     <nav aria-label="breadcrumb" class="text-center">
  18.                         <h2 class="title">{{"Contactez-nous"|trans }}</h2>
  19.                         <ol class="breadcrumb justify-content-center">
  20.                             <li class="breadcrumb-item"><a href="{{path('web_vitrine')}}">Accueil</a></li> 
  21.                             <li class="breadcrumb-item active">{{"Contactez-nous"|trans }}</li>
  22.                         </ol>
  23.                     </nav>
  24.                 </div>
  25.             </div> 
  26.         </div>
  27.     </div>      
  28.     <!--bread-crumb-->
  31.     <div class="section-padding">
  32.       <div class="container">
  33.         <div class="row">
  34.           <div class="col-lg-8">
  35.             <div class="title-box">
  36.               <h2>{{""|trans }}</h2>
  37.               <p class="mb-0">{{"Pour tous vos besoins remplissez le formulaire ci-dessous."|trans }}.</p>
  38.             </div>
  39.             <form id="formContact" class="mb-5 mb-lg-0">
  40.               <div class="row">
  41.                 <div class="col-md-12 mb-4 mb-lg-5">
  42.                   <input type="text" class="form-control font-size-14" name="fullName" id="fullName" placeholder="{{'Nom complet'|trans }}" required>
  43.                 </div>
  44.                 <div class="col-md-6 mb-4 mb-lg-5">
  45.                   <input type="tel" class="form-control font-size-14" name="phone" id="phone" maxlength="140" minlength="10" placeholder="{{'Téléphone'|trans }}" required>
  46.                 </div>
  47.                 <div class="col-md-6 mb-4 mb-lg-5">
  48.                   <input type="email" class="form-control font-size-14" name="email" id="email" placeholder="{{'Email'|trans }}" required>
  49.                 </div>
  50.                 <div class="col-md-12 mb-4 mb-lg-5">
  51.                   <input type="text" class="form-control font-size-14" name="object" id="object" placeholder="{{'Objet de votre message'|trans }}" required>
  52.                 </div>
  53.                 <div class="col-md-12 mb-4 mb-lg-5">
  54.                   <textarea class="form-control font-size-14" cols="40" rows="10" name="message" id="message" placeholder="{{'Votre Message'|trans }}"></textarea>
  55.                 </div>
  56.                 <div class="col-md-12">
  57.                   <div class="iq-button">
  58.                     <button type="submit" class="btn">{{"Envoyer"|trans }}</button>
  59.                   </div>
  60.                 </div>
  61.               </div>
  62.             </form>
  63.           </div>
  64.           <div class="col-lg-1 d-none d-lg-block"></div>
  65.           <div class="col-lg-3">
  66.             <div class="border-bottom pb-4 mb-4">
  67.               <h5>{{"Localisation"|trans }}</h5>
  68.               <span></span>
  69.             </div>
  70.             <div class="border-bottom pb-4 mb-4">
  71.               <h5>Get In Touch</h5>
  72.               <a class="text-primary">support@filmafrik.com</a>
  73.               <p class="mb-0">+229 00 00 00</p>
  74.             </div>
  75.             <div>
  76.               <h5>Suivez-nous sur </h5>
  77.               <ul class="p-0 m-0 mt-4 list-unstyled widget_social_media">
  78.                 <li class="">
  79.                   <a href="https://www.facebook.com/" class="position-relative">
  80.                     <i class="fab fa-facebook"></i>
  81.                   </a>
  82.                 </li>
  83.                 <li class="">
  84.                   <a href="https://twitter.com/" class="position-relative">
  85.                     <i class="fab fa-twitter"></i>
  86.                   </a>
  87.                 </li>
  88.                 <li class="">
  89.                   <a href="https://github.com/" class="position-relative">
  90.                     <i class="fab fa-github"></i>
  91.                   </a>
  92.                 </li>
  93.                 <li class="">
  94.                   <a href="https://www.instagram.com/" class="position-relative">
  95.                     <i class="fab fa-instagram"></i>
  96.                   </a>
  97.                 </li>
  98.               </ul>
  99.             </div>
  100.           </div>
  101.         </div>
  102.       </div>
  103.     </div>
  105.     <div class="map">
  106.       <div class="container-fluid p-0">
  107.         <iframe loading="lazy" class="w-100" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3902543.2003194243!2d-118.04220880485131!3d36.56083290513502!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80be29b9f4abb783%3A0x4757dc6be1305318!2sInyo%20National%20Forest!5e0!3m2!1sen!2sin!4v1576668158879!5m2!1sen!2sin" height="600" allowfullscreen=""></iframe>
  108.       </div>
  109.     </div>
  111.     <div class="section-padding">
  112.       <div class="container">
  113.         <div class="row justify-content-center">
  114.           <div class="col-lg-12">
  115.             <div class="title-box">
  116.               <h3 class="fw-500">{{"Pour des questions commerciales ou techniques contactez-nous par mail ou téléphone sur l\'adresse du service conrespondant"|trans }}</h3>
  117.             </div>
  118.           </div>
  119.           <div class="col-lg-2 d-none d-lg-block"></div>
  120.         </div>
  121.         <div class="row justify-content-center">
  122.           <div class="col-lg-4 col-md-6">
  123.             <div class="contact-box d-flex gap-3 rounded mb-3 mb-lg-0">
  124.               <img src="{{ asset('vitrine/images/pages/box-pattern.webp') }}" class="img-fluid position-absolute top-0 end-0" alt="pattern">
  125.               <div class="icon-wrapper rounded-circle text-white">
  126.                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
  127.                   <path d="M8 0.5C3.85833 0.5 0.5 3.85833 0.5 8V13.8333C0.5 14.75 1.25 15.5 2.16667 15.5H5.5V8.83333H2.16667V8C2.16667 4.775 4.775 2.16667 8 2.16667C11.225 2.16667 13.8333 4.775 13.8333 8V8.83333H10.5V15.5H13.8333C14.75 15.5 15.5 14.75 15.5 13.8333V8C15.5 3.85833 12.1417 0.5 8 0.5ZM3.83333 10.5V13.8333H2.16667V10.5H3.83333ZM13.8333 13.8333H12.1667V10.5H13.8333V13.8333Z" fill="currentColor"></path>
  128.                 </svg>
  129.               </div>
  130.               <div style="z-index: 1;">
  131.                 <h6 class="font-size-18 fw-500 mb-4">{{"Pour réclammation"|trans }}</h6>
  132.                 <p class="mb-1 font-size-14">{{"Téléphone"|trans}} : <span class="text-primary">+299 00 00 00</span>
  133.                 </p>
  134.                 <p class="mb-0">Mail: <a href="mailto:info@medyapim.com" class="text-white fw-500">support@filmafrik.com</a>
  135.                 </p>
  136.               </div>
  137.             </div>
  138.           </div>
  139.           <div class="col-lg-4 col-md-6">
  140.             <div class="contact-box d-flex gap-3 rounded">
  141.               <img src="{{ asset('vitrine/images/pages/box-pattern.webp') }}" class="img-fluid position-absolute top-0 end-0" alt="pattern">
  142.               <div class="icon-wrapper rounded-circle text-white">
  143.                 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
  144.                   <path d="M16.8416 8.50829L9.48329 1.14996C9.17496 0.841626 8.74996 0.666626 8.30829 0.666626H2.33329C1.41663 0.666626 0.666626 1.41663 0.666626 2.33329V8.30829C0.666626 8.74996 0.841626 9.17496 1.15829 9.48329L8.51663 16.8416C9.16663 17.4916 10.225 17.4916 10.875 16.8416L16.85 10.8666C17.5 10.2166 17.5 9.16663 16.8416 8.50829ZM9.69163 15.6666L2.33329 8.30829V2.33329H8.30829L15.6666 9.69163L9.69163 15.6666Z" fill="white"></path>
  145.                   <path d="M4.41663 5.66663C5.10698 5.66663 5.66663 5.10698 5.66663 4.41663C5.66663 3.72627 5.10698 3.16663 4.41663 3.16663C3.72627 3.16663 3.16663 3.72627 3.16663 4.41663C3.16663 5.10698 3.72627 5.66663 4.41663 5.66663Z" fill="currentColor"></path>
  146.                 </svg>
  147.               </div>
  148.               <div style="z-index: 1;">
  149.                 <h6 class="font-size-18 fw-500 mb-4">{{"Diffusion de film/Série"|trans }}</h6>
  150.                 <p class="mb-1 font-size-14">{{"Téléphone"|trans}} : <span class="text-primary">(144) 1234 1234</span>
  151.                 </p>
  152.                 <p class="mb-0">Mail: <a href="mailto:info@medyapim.com" class="text-white fw-500">user@filmafrik.com</a>
  153.                 </p>
  154.               </div>
  155.             </div>
  156.           </div>
  157.         </div>
  158.       </div>
  159.     </div>
  161. {% endblock %}
  163. {% block javascripts %} 
  164.       <script>
  165.         var uriSend = "{{ path('web_contact_send') }}";
  166.       </script>
  167.        <script src="{{ asset('app/js/contact.js') }}"></script>
  169. {% endblock %}