templates/pages/helpcenter.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/header1.css')}}" rel="stylesheet" />
  8.     <link href="{{ asset('dev/css/pages/help-center.css')}}" rel="stylesheet" />
  10.     <!-- REVOLUTION LAYERS STYLES -->
  12. {% endblock %}
  13. {% block title %}{{"Help center"|trans }}{% endblock %} 
  14. {% block content %}
  15.     <main >
  16.         <section id="hero" class="background-image">
  17.             <div class="opacity-mask" >
  18.                 <div class="intro_title m-auto bg-hero-sc" >
  19.                     <h3 class="animated fadeInDown">Help center</h3>
  20.                     <p class="animated fadeInDown">Lorem ipsum dolor sit amet  iste quod mollitia Illum, labore quis!</p>
  21.                 </div>
  22.             </div>
  24.         </section>
  26.         <div class="container py-15 my-12">
  27.             <h2 class="mb-16 text-center text-xl leading-10 font-bold lg:leading-[50px] lg:text-2xl">Contactez notre service
  28.                 clientèle 24h/24 et 7j/7<br>équipe de support</h2>
  29.             <div class="row">
  30.                 <div class="col-md-4 col-sm-6 my-4 my-sm-1">
  31.                     <div
  32.                         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">
  33.                         <div class="mb-4 icon-holder w-20 h-20 flex items-center justify-center rounded-full bg-[#F5F0FF]"><img
  34.                                 alt="chat-icon" loading="lazy" width="25" height="25" class="w-10 h-10" style="color:transparent"
  35.                                 src="{{ asset('dev/img/chat-icon.svg') }}"></div>
  36.                         <span class="block mb-1 xl:text-2xl text-xl text-black font-bold">Whatsapp </span>
  37.                         <span class="block mb-8 text-center text-gray-600 xl:px-9 px-6">Parlez nous de votre besoin 
  38.                             <br>par Whatsapp
  39.                         </span>
  40.                         <div class="w-full banner-card py-5 flex justify-center items-center bg-gray-100 rounded-b-3xl"><span
  41.                                 class="mr-2 text-black font-bold">Accéder au chat </span><img alt="arrow-right" loading="lazy"
  42.                                 width="24" height="24" style="color:transparent" src="{{ asset('dev/img/arrow-right.svg') }}">
  43.                         </div>
  44.                     </div>
  45.                 </div>
  46.                 <div class="col-md-4 col-sm-6 my-4 my-sm-1">
  47.                     <div
  48.                         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">
  49.                         <div class="mb-4 icon-holder w-20 h-20 flex items-center justify-center rounded-full bg-[#F5F0FF]"><img
  50.                                 alt="chat-icon" loading="lazy" width="25" height="25" class="w-10 h-10" style="color:transparent"
  51.                                 src="{{ asset('dev/img/email-icon.svg') }}"></div>
  52.                         <span class="block mb-1 xl:text-2xl text-xl text-black font-bold">Support par e-mail</span>
  53.                         <span class="block mb-8 text-center text-gray-600 xl:px-9 px-6">Préférez-vous envoyer un e-mail ? <br>Nous
  54.                                 sommes là pour vous.
  55.                         </span>
  56.                         <div class="w-full banner-card py-5 flex justify-center items-center bg-gray-100 rounded-b-3xl"><span
  57.                                 class="mr-2 text-black font-bold">Envoyer un e-mail </span><img alt="arrow-right" loading="lazy"
  58.                                 width="24" height="24" style="color:transparent" src="{{ asset('dev/img/arrow-right.svg') }}">
  59.                         </div>
  60.                     </div>
  61.                 </div>
  62.                 <div class="col-md-4 col-sm-6  my-4 my-sm-1">
  63.                     <div
  64.                         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">
  65.                         <div class="mb-4 icon-holder w-20 h-20 flex items-center justify-center rounded-full bg-[#F5F0FF]"><img
  66.                                 alt="chat-icon" loading="lazy" width="25" height="25" class="w-10 h-10" style="color:transparent"
  67.                                 src="{{ asset('dev/img/phone-icon.svg') }}"></div>
  68.                         <span class="block mb-1 xl:text-2xl text-xl text-black font-bold">Appelez nous</span>
  69.                         <span class="block mb-8 text-center text-gray-600 xl:px-9 px-6">Passez un couo de fil <br> +212 666-123456</span>
  70.                         <div class="w-full banner-card py-5 flex justify-center items-center bg-gray-100 rounded-b-3xl"><span
  71.                                 class="mr-2 text-black font-bold">Appeler nous</span><img alt="arrow-right" loading="lazy"
  72.                                 width="24" height="24" style="color:transparent" src="{{ asset('dev/img/arrow-right.svg') }}">
  73.                         </div>
  74.                     </div>
  75.                 </div>
  76.             </div>
  77.         </div>
  79.         <section class=" py-15 mb-12">
  80.             <div class="container">
  81.                 <div class="row is-vcentered is-flex-tablet-p">
  82.                     <div class="col-md-5 col-sm-12 d-flex flex-column justify-content-center">
  83.                         <h4 class="title  text-2xl lg:text-5xl  font-bold mb-2 mb-sm-4">
  84.                             Things weren't going so well before I knew Listkit. My classes were
  85.                             often empty and I was about to resign.
  86.                         </h4>
  87.                         <p class="text-sm sm:text-xl">
  88.                             Brian's urban training facility was about to close its doors. But
  89.                             fortunately, he was able to transition to online classes.
  90.                         </p>
  91.                         <div class="py-4">
  92.                             <a class="btn1 my-2">
  93.                                 <div class=" whitespace-nowrap">En Savoir Plus</div>
  94.                             </a>
  95.                         </div>
  96.                     </div>
  97.                     <div class="col-md-6 col-sm-12 is-offset-1">
  98.                         <img src="{{ asset('dev/images/square-13.jpg') }}" alt="" style="height: 58vh;object-fit: cover;">
  99.                     </div>
  100.                 </div>
  101.             </div>
  102.         </section>
  106.         <section class="gray-background py-15">
  107.             <div class="container">
  108.                 <div class="row is-vcentered is-flex-tablet-p">
  109.                     <div class="col-md-5 col-sm-12  is-offset-1">
  110.                         <img src="{{ asset('dev/images/3.jpg') }}" style="height: 58vh;object-fit: cover;" alt="">
  111.                     </div>
  112.                     <div class="col-md-5 col-sm-12  ps-3  ps-sm-5">
  113.                         <h4 class="title title text-2xl lg:text-5xl  font-bold mb-2 mb-sm-4  mt-2 mt-sm-1">
  114.                             Things weren't going so well before I knew Listkit. My classes were
  115.                             often empty and I was about to resign.
  116.                         </h4>
  117.                         <p class="text-sm sm:text-xl">
  118.                             Brian's urban training facility was about to close its doors. But
  119.                             fortunately, he was able to transition to online classes.
  120.                         </p>
  121.                         <div class="py-4">
  122.                             <a class="btn1 my-2">
  123.                                 <div class=" whitespace-nowrap">En Savoir Plus</div>
  124.                             </a>
  125.                         </div>
  126.                     </div>
  127.                 </div>
  128.             </div>
  129.         </section>
  131.         <div class="container py-15">
  132.             <div class="section-title text-center py-6">
  133.                 <div class="title-divider"></div>
  134.                 <h1 class="text-5xl font-extrabold">Frequent questions</h1>
  135.             </div>
  137.             <div class="row py-8">    
  138.                 <div class="col-md-6 col-12 d-flex align-items-center">
  139.                     <div>
  140.                         <h2 class="mb-3  text-3xl leading-10 font-semibold lg:leading-[50px] lg:text-[38px] lg:mb-5">Talk to real people</h2>
  141.                         <p class="pe-4 pb-4 text-base" style="color: gray; ">Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat odit fugit expedita ipsa fugiat animi quis assumenda
  142.                             fuga nihil cupiditate corporis nostrum, delectus veritatis natus ut iste illum sequi ipsum.</p>
  143.                         <div class="d-flex  link-plus">
  144.                             <a href="#" class="text-sm font-bold pe-2">See how you can start offering services</a>
  145.                             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>                                </div>
  146.                     </div>
  147.                 </div>
  149.                 <div class="col-md-6 col-12" id="accordionPanelsStayOpenExample">
  150.                     <div class="accordion-item">
  151.                         <div class="accordion-header mb-2  text-xl " id="panelsStayOpen-headingOne">
  152.                             <button class="d-flex justify-content-between align-items-center w-100" type="button"
  153.                                     data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="true"
  154.                                     aria-controls="panelsStayOpen-collapseTwo">
  155.                                 <div class="accordion-title">Quels types de coaching proposez-vous ?</div>
  156.                                 <i  load-hicon="chevron-right"></i>
  157.                             </button>
  158.                         </div>
  159.                         <div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse "
  160.                              aria-labelledby="panelsStayOpen-headingOne">
  161.                             <div class="accordion-body">
  162.                                 Nous proposons une variété de coaching dans des domaines tels que la santé, la forme physique, le
  163.                                 bien-être, la carrière, les relations, la nutrition, et bien plus encore. Consultez notre liste de
  164.                                 coachs pour voir toutes les options disponibles.
  165.                             </div>
  166.                         </div>
  167.                     </div>
  169.                     <div class="accordion-item">
  170.                         <div class="accordion-header mb-2  text-xl " id="panelsStayOpen-headingTwo">
  171.                             <button class="d-flex justify-content-between align-items-center w-100" type="button"
  172.                                     data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTree" aria-expanded="true"
  173.                                     aria-controls="panelsStayOpen-collapseTree">
  174.                                 <div class="accordion-title">Comment puis-je trouver le coach qui me convient ?</div>
  175.                                 <i  load-hicon="chevron-right"></i>
  176.                             </button>
  177.                         </div>
  178.                         <div id="panelsStayOpen-collapseTree" class="accordion-collapse collapse "
  179.                              aria-labelledby="panelsStayOpen-headingTwo">
  180.                             <div class="accordion-body">
  181.                                 Utilisez notre fonction de recherche avancée pour filtrer les coachs en fonction de vos besoins
  182.                                 spécifiques, tels que la
  183.                                 localisation, le domaine d'expertise, les disponibilités.
  184.                             </div>
  185.                         </div>
  186.                     </div>
  187.                     <div class="accordion-item">
  188.                         <div class="accordion-header mb-2  text-xl " id="panelsStayOpen-headingTree">
  189.                             <button class="d-flex justify-content-between align-items-center w-100" type="button"
  190.                                     data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseFour" aria-expanded="true"
  191.                                     aria-controls="panelsStayOpen-collapseFour">
  192.                                 <div class="accordion-title">Comment puis-je réserver une séance de coaching ?</div>
  193.                                 <i  load-hicon="chevron-right"></i>
  194.                             </button>
  195.                         </div>
  196.                         <div id="panelsStayOpen-collapseFour" class="accordion-collapse collapse "
  197.                              aria-labelledby="panelsStayOpen-headingTree">
  198.                             <div class="accordion-body">
  199.                                 Pour réserver une séance de coaching, il vous suffit de vous inscrire sur notre site, de rechercher le
  200.                                 coach de
  201.                                 votre choix, de sélectionner une date et une heure disponibles, puis de procéder au paiement en ligne.
  202.                             </div>
  203.                         </div>
  204.                     </div>
  205.                     <div class="accordion-item">
  206.                         <div class="accordion-header mb-2  text-xl " id="panelsStayOpen-headingFour">
  207.                             <button class="d-flex justify-content-between align-items-center w-100" type="button"
  208.                                     data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseFive" aria-expanded="true"
  209.                                     aria-controls="panelsStayOpen-collapseFive">
  210.                                 <div class="accordion-title">Puis-je annuler ou reporter une séance de coaching ?</div>
  211.                                 <i  load-hicon="chevron-right"></i>
  212.                             </button>
  213.                         </div>
  214.                         <div id="panelsStayOpen-collapseFive" class="accordion-collapse collapse "
  215.                              aria-labelledby="panelsStayOpen-headingFour">
  216.                             <div class="accordion-body">
  218.                             </div>
  219.                         </div>
  220.                     </div>
  221.                 </div>
  227.             </div>
  229.         </div>
  231.         <section class="container">
  232.             <div class="my-6">
  233.                 <div class="background-cta"  style="background-image: url('{{ asset('dev/images//mehdi-faiz-SW77Zlv8QPY-unsplash.jpg') }}');background-size:cover;background-repeat: no-repeat;">
  234.                     <div class="columns w-50">
  235.                         <div class="column is-4">
  236.                             <h4 class="text-3xl font-bold text-white has-space">
  237.                                 Start earning real money by helping others
  238.                             </h4>
  239.                             <p class="text-inverted">
  240.                                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maximus
  241.                                 dolor, inquit, brevis est. Comprehensum, quod cognitum non habet?
  242.                             </p>
  244.                             <div class="py-4">
  245.                                 <a class="btn1 my-2">
  246.                                     <div class=" whitespace-nowrap">En Savoir Plus</div>
  247.                                 </a>
  248.                             </div>
  249.                         </div>
  250.                     </div>
  251.                 </div>
  252.             </div>
  253.         </section>
  258.     </main>
  259.     <!-- End main -->
  260. {% endblock %}
  261. {% block javascripts %}
  263.     <script src="{{ asset('dev/js/help-center.js')}}" type="module"></script>
  264.     <script src="{{ asset('dev/js/home.js')}}" type="module"></script>
  267.     <script src="{{ asset('dev/js/hicon.min.js')}}"></script>
  268.     <script> hicon.replace();</script>
  269.     <script src="{{ asset('dev/js/feather.min.js')}}">  feather.replace();</script>
  271.     <script src="{{ asset('dev/js/datepicker.min.js')}}"></script>
  272. {% endblock %}