templates/pages/contact.html.twig line 1

Open in your IDE?
  1. {% extends 'pages/base.html.twig' %}
  3. {% block stylesheets %}
  4.     <!-- CUSTOM CSS -->
  5.     <link href="{{ asset('dev/css/tailwind.min.css')}}" rel="stylesheet" />
  6.     <link href="{{ asset('dev/css/pages/home.css')}}" rel="stylesheet" />
  7.     <link href="{{ asset('dev/css/header2.css')}}" rel="stylesheet" />
  8.     <link href="{{ asset('dev/css/forms.css')}}" rel="stylesheet" />
  9.     <link href="{{ asset('dev/css/pages/contact.css')}}" rel="stylesheet" />
  12.     <!-- REVOLUTION SLIDER CSS -->
  16. {% endblock %}
  17. {% block title %}{{"Faq"|trans }}{% endblock %} 
  18. {% block content %}
  19.     <main >
  21.         <div class="container py-15" style="margin-top: 100px;">
  22.             <h3 class="text-6xl font-bold text-center my-8 mb-12 background-image">Contacter Nous</h3>
  23.             <div class="card-ct row px-0 rounded container " style="position: relative;z-index: 999;top: 47%;width: 77%;background: white;">
  24.                 <form class="p-2 py-4">
  25.                     <div class="mb-2 text-center">
  26.                         <h5 class="text-2xl text-black font-bold mt-2 capitalize"> Informations de contact</h5>
  27.                         <span class="text-sm normal-case text-gray-600">Nous sommes ici pour vous aider ! Contactez-nous par téléphone, email, ou via le formulaire ci-dessous. Nous vous répondrons rapidement.
  33.                         </span>
  34.                     </div>
  35.                     <div class="p-2">
  36.                         <div class="form-floating mb-3">
  37.                             <input type="text"
  38.                                    class="form-control bsm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
  39.                                    id="floatingInput" placeholder="John Doe">
  40.                             <label class="mb-2 text-sm font-medium text-gray-900 dark:text-white" for="floatingInput">Nom Complet</label>
  41.                         </div>
  42.                         <div class="form-floating mb-3">
  43.                             <input type="email"
  44.                                    class="form-control bsm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
  45.                                    id="floatingInput" placeholder="name@example.com">
  46.                             <label class="mb-2 text-sm font-medium text-gray-900 dark:text-white" for="floatingInput">Email address</label>
  47.                         </div>
  49.                         <div class="form-floating mb-3">
  50.                             <input type="text"
  51.                                    class="form-control bsm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
  52.                                    id="floatingInput" placeholder="Écrivez votre sujet">
  53.                             <label class="mb-2 text-sm font-medium text-gray-900 dark:text-white" for="floatingInput">Votre sujet</label>
  54.                         </div>
  57.                         <div class="form-floating">
  58.                             <textarea class="form-control" placeholder="Messager nous" id="floatingTextarea2" style="height: 100px"></textarea>
  59.                             <label class="mb-2 text-sm font-medium text-gray-900 " for="floatingTextarea2">Demandes spéciales/Remarques</label>
  60.                         </div>
  62.                         <div class="field pt-3 d-flex justify-content-center">
  63.                             <a class="btn1 my-2">
  64.                                 <div class=" whitespace-nowrap">Envoyer Message</div>
  65.                             </a>
  66.                         </div>
  67.                     </div>
  68.                 </form>
  69.             </div>
  70.         </div>
  74.         <div class="container py-15 " >
  77.             <div class="row">
  78.                 <div class="col-md-4 col-sm-6 my-4 my-sm-1">
  79.                     <div class="card-ct d-flex flex-column align-items-center pt-5 h-full w-[365px] flex flex-col items-center justify-between border border-solid border-gray-200 rounded-3xl cursor-pointer lg:flex-1">
  80.                         <div class="mb-4 icon-holder w-20 h-20 flex items-center justify-center rounded-full bg-[#F5F0FF]"><img
  81.                                 alt="chat-icon" loading="lazy" width="25" height="25" class="w-10 h-10" style="color:transparent"
  82.                                 src="{{ asset('dev/img/chat-icon.svg') }}"></div>
  83.                         <span class="block mb-1 text-2xl text-black font-bold">Support par chat </span>
  84.                         <span class="block mb-8 text-center text-gray-600 px-9">Nous répondons souvent <br>en quelques
  85.                             minutes</span>
  86.                         <div class="w-full banner-card py-5 flex justify-center items-center bg-gray-100 rounded-b-3xl"><span
  87.                                 class="mr-2  font-bold">Accéder au chat </span>
  88.                             <span style="color: white;">
  89.                                 <i load-hicon="arrow-right"></i>
  90.                             </span>
  91.                         </div>
  92.                     </div>
  93.                 </div>
  94.                 <div class="col-md-4 col-sm-6 my-4 my-sm-1">
  95.                     <div
  96.                         class="card-ct d-flex flex-column align-items-center pt-5 h-full w-[365px] flex flex-col items-center justify-between border border-solid border-gray-200 rounded-3xl cursor-pointer lg:flex-1">
  97.                         <div class="mb-4 icon-holder w-20 h-20 flex items-center justify-center rounded-full bg-[#F5F0FF]"><img
  98.                                 alt="chat-icon" loading="lazy" width="25" height="25" class="w-10 h-10" style="color:transparent"
  99.                                 src="{{ asset('dev/img/email-icon.svg') }}"></div>
  100.                         <span class="block mb-1 text-2xl text-black font-bold">Support par e-mail</span>
  101.                         <span class="block mb-8 text-center text-gray-600 px-9">Préférez-vous envoyer un e-mail ? <br>Nous
  102.                             sommes là pour vous.
  103.                         </span>
  104.                         <div class="w-full banner-card py-5 flex justify-center items-center bg-gray-100 rounded-b-3xl"><span
  105.                                 class="mr-2  font-bold">Envoyer un e-mail </span>
  106.                             <span style="color: white;">
  107.                                 <i load-hicon="arrow-right"></i>
  108.                             </span>
  109.                         </div>
  110.                     </div>
  111.                 </div>
  112.                 <div class="col-md-4 col-sm-6  my-4 my-sm-1">
  113.                     <div
  114.                         class="card-ct d-flex flex-column align-items-center pt-5 h-full w-[365px] flex flex-col items-center justify-between border border-solid border-gray-200 rounded-3xl cursor-pointer lg:flex-1">
  115.                         <div class="mb-4 icon-holder w-20 h-20 flex items-center justify-center rounded-full bg-[#F5F0FF]"><img
  116.                                 alt="chat-icon" loading="lazy" width="25" height="25" class="w-10 h-10" style="color:transparent"
  117.                                 src="{{ asset('dev/img/phone-icon.svg') }}"></div>
  118.                         <span class="block mb-1 text-2xl text-black font-bold">Chat support</span>
  119.                         <span class="block mb-8 text-center text-gray-600 px-9">We often respond <br> within minutes</span>
  120.                         <div class="w-full banner-card py-5 flex justify-center items-center bg-gray-100 rounded-b-3xl"><span
  121.                                 class="mr-2  font-bold">Nous appeler </span>
  122.                             <span style="color: white;">
  123.                                 <i load-hicon="arrow-right"></i>
  124.                             </span>
  126.                         </div>
  127.                     </div>
  128.                 </div>
  129.             </div>
  130.         </div>
  137.     </main>
  138.     <!-- End main -->
  139. {% endblock %}
  140. {% block javascripts %}
  145.     <script src="{{ asset('dev/js/hicon.min.js')}}"></script>
  146.     <script> hicon.replace();</script>
  147.     <script src="{{ asset('dev/js/home.js')}}" type="module"></script>
  148.     <script src="{{ asset('dev/js/feather.min.js')}}">  feather.replace();</script>
  149.     <script src="{{ asset('dev/js/datepicker.min.js')}}"></script>
  152. {% endblock %}