templates/home/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}AFI SARL{% endblock %}
  6. {% block body %}
  8.     <link rel="stylesheet" href="{{ asset('assets/style/fonts.css') }}">
  9.     <link rel="stylesheet" href="{{ asset('assets/style/style.css') }}">
  11.     <div style="background: #f3f3f3; padding-top: 7px">
  13.         <div class="container-fluid page-header py-5">
  14.             <div class="container py-5">
  15.                 <h1 class="display-3 text-white mb-3 animated slideInDown text-center">ALLIANCE FORCE INTERNATIONALE</h1>
  16.                 <span class=" section-banner text-center d-none d-xl-block"  style="background: #fff; font-weight: bold;font-size: 16pt">AFI IMPORT EXPORT Sarl | Together we are strong   </span>
  17.                 <p class="mb-5 text-white text-center">{{ "Nous sommes une agence de fret maritime, implanté en chine pour divers destination"|trans }}</p>
  18.             </div>
  19.         </div>
  22.         <div class="releted_product_slider carousel_slider owl-carousel " data-margin="20" data-responsive='{"0":{"items": "2"}, "481":{"items": "3"}, "768":{"items": "4"}, "1199":{"items": "6"}}'>
  23.             {{ include('partials/carroussel.html.twig',{'homeSlider': productFeatured}) }}
  24.         </div>
  26.         <div class="container-xxl py-5">
  27.             <div class="container py-5">
  28.                 <div class="row g-5">
  29.                     <div class="col-lg-6 wow fadeInUp text-left" style="margin-top: -30px">
  30.                         <div class="font-weight-bold" style="font-size: 17pt"><span style="font-size: 14pt"><i class="fa fa-cart-arrow-down" aria-hidden="true"></i> </span> #1 {{ "Endroit pour expédier tous vos envois"|trans }}</div>
  32.                         <p class="mb-5 text-justify">
  33.                             {{ "Entreprises, particuliers ou associations comptez sur les plus de 18 ans d’expérience et d’expertise de AFI IMPORT EXPORT SARL pour vos opérations de fret maritime de la chine vers l'Afrique centrale. L’Afrique est un continent en croissance, un continent plein de promesses et qui offre déjà des nombreuses et diverses possibilités d’affaires."|trans }}
  35.                         </p>
  36.                         <p>
  37.                             {{ "Nous faisons le conteneur de groupage et le conteneur full, nous prenons de petit et grand colis, machine, engins, véhicule, quincaillerie, meubles, électroménager"|trans }} ...
  38.                         </p>
  40.                         <div class=" align-items-center text-center mt-3 mt-lg-5">
  41.                             <div class="ps-4">
  42.                                 <h6>{{ "Pour vous servir"|trans }}</h6>
  43.                                 <h5 class="text-primary m-0">CHINE - AFRIQUE</h5>
  44.                             </div>
  45.                         </div>
  46.                     </div>
  47.                     <div class="col-lg-6 pl-4" style="margin-top: -30px">
  48.                         <div>
  49.                             <div class="mt-3 pl-5">
  50.                                 {% for mymarket in mymarkets|shuffle|slice(0,8) %}
  51.                                     <a href="{{ path('mymarket_show',{'id':mymarket.id}) }}" title="{{ mymarket.name|trans({'%mymarket.name%': mymarket.name}, 'workend') }}">
  52.                                         <div class="category-item category-banner-ta mt-2">
  53.                                             <div class="img-thumbnail" style="background: #f6f6f6">
  54.                                                 <div class="txt font-weight-bold" style="max-width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis"><span class="img image-avatar"><img style="border-radius: 10px" height="40" width="45" src="{{ asset('/assets/uploads/mymarket/'~mymarket.image)}}"></span>&nbsp;{{  mymarket.name|trans({'%mymarket.name%': mymarket.name}, 'workend') }}</div>
  55.                                             </div>
  56.                                             <i class="sc-hd-prefix2-icon sc-hd-prefix2-icon-arrow-right"></i>
  57.                                         </div>
  58.                                     </a>
  59.                                 {% endfor %}
  60.                             </div>
  61.                         </div>
  62.                     </div>
  63.                 </div>
  64.             </div>
  65.         </div>
  66.         
  67.         <div>
  68.             <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1915372465340794"
  69.      crossorigin="anonymous"></script>
  70. <!-- bloc 001 -->
  71. <ins class="adsbygoogle"
  72.      style="display:block"
  73.      data-ad-client="ca-pub-1915372465340794"
  74.      data-ad-slot="9777397649"
  75.      data-ad-format="auto"
  76.      data-full-width-responsive="true"></ins>
  77. <script>
  78.      (adsbygoogle = window.adsbygoogle || []).push({});
  79. </script>
  80.         </div>
  82.         <div class="row">
  83.             <div class="col-lg-6 text-center">
  84.                 <div class=" align-items-center">
  85.                     <div class="ps-4">
  86.                         <h3 style="color: #0D47A1" class=" m-0">&nbsp;+86 15267374779</h3>
  87.                     </div>
  88.                 </div>
  89.                 <h5 style="color: #0D47A1" class=" mb-2" data-toggle="counter-up">CHINA YIWU</h5>
  90.                 <h6 style="color: #0D47A1" class=" mb-0"></h6>
  91.                 <h6 style="color: #0D47A1" class=" mb-0">+86 15355334599</h6>
  92.             </div>
  93.             <div class="col-lg-6 text-center">
  94.                 <div class="">
  95.                     <div class="ps-4">
  96.                         <h3 class="text-primary m-0">+86 13544492960</h3>
  97.                     </div>
  98.                 </div>
  99.                 <h5 class="text-primary mb-2" data-toggle="counter-up">CHINA GUANGZHOU</h5>
  100.                 <h6 class="text-primary mb-0"></h6>
  101.                 <h6 class="text-primary mb-0">+86 13798247453</h6>
  102.             </div>
  103.         </div>
  105.         <div class="d-none d-xl-block pl-5 pr-5" style="margin-top: 70px; background: transparent">
  106.             <div class="row  justify-content-center">
  107.                 {% for market in mymarkets|shuffle|slice(0,4) %}
  108.                     {% if market|length > 0 %}
  109.                         <div class="col-3">
  110.                             <div class="row justify-content-center" style=" border-radius: 10px">
  111.                                 <div class="col-12 font-weight-bold font-monospace  p-2" >
  112.                                     &nbsp; &nbsp;<img width="40px" height="40px" style="border-radius: 50%" src="/assets/uploads/mymarket/{{ market.image }}"> {{ market.name|upper|trans }}
  113.                                 </div>
  114.                                 {% for category in market.categories|toArray|shuffle|slice(0,1) %}
  115.                                     {% for product in category.products|toArray|shuffle|slice(0,2) %}
  116.                                         <div class=" col-6" >
  117.                                             {{ include('partials/product_item_tag_or_categorie_market.html.twig',{'product': product}) }}
  118.                                         </div>
  119.                                     {% else %}
  120.                                         <div class=" col-6 ">
  121.                                             {{ include('partials/default.html.twig') }}
  122.                                         </div>
  123.                                     {% endfor %}
  124.                                 {% else %}
  125.                                     <div class="col-6">
  126.                                         {{ include('partials/default.html.twig') }}
  127.                                     </div>
  128.                                 {% endfor %}
  129.                             </div>
  130.                         </div>
  131.                     {% endif %}
  132.                 {% endfor %}
  133.             </div>
  134.         </div>
  136.         <div class="container-xxl py-5" style="margin-top: -80px">
  137.             <div class="container py-5">
  138.                 <div class="text-center wow fadeInUp" data-wow-delay="0.1s">
  139.                     <h3 class="mb-5">{{ 'COMMANDE'|trans }}</h3>
  140.                 </div>
  141.                 <div>{{ "Passer vos commandes via notre agence, des machines, engins, des camions, tracteurs et bien d'autres articles selon vos bésoins, nous sommes au coeur de la chine pour vous servir et rendre facile vos achats"|trans }} </div>
  142.                 <div class="row g-4">
  143.                     <div class="col-md-6 col-lg-4 wow fadeInUp" data-wow-delay="0.3s">
  144.                         <div class="service-item p-4">
  145.                             <div class="overflow-hidden mb-4">
  146.                                 <img class="img-fluid" src="/images/engins/1.png" alt="">
  147.                             </div>
  148.                         </div>
  149.                     </div>
  150.                     <div class="col-md-6 col-lg-4 wow fadeInUp" data-wow-delay="0.5s">
  151.                         <div class="service-item p-4">
  152.                             <div class="overflow-hidden mb-4">
  153.                                 <img class="img-fluid" src="/images/engins/3.png" alt="">
  154.                             </div>
  155.                         </div>
  156.                     </div>
  157.                     <div class="col-md-6 col-lg-4 wow fadeInUp" data-wow-delay="0.7s">
  158.                         <div class="service-item p-4">
  159.                             <div class="overflow-hidden mb-4">
  160.                                 <img class="img-fluid" src="/images/engins/2.png" alt="">
  161.                             </div>
  162.                         </div>
  163.                     </div>
  164.                     <div class="col-md-6 col-lg-4 wow fadeInUp" data-wow-delay="0.3s">
  165.                         <div class="service-item p-4">
  166.                             <div class="overflow-hidden mb-4">
  167.                                 <img class="img-fluid " src="/images/engins/4.png" alt="">
  168.                             </div>
  169.                         </div>
  170.                     </div>
  171.                     <div class="col-md-6 col-lg-4 wow fadeInUp" data-wow-delay="0.5s">
  172.                         <div class="service-item p-4">
  173.                             <div class="overflow-hidden mb-4">
  174.                                 <img class="img-fluid " src="/images/engins/6.png" alt="">
  175.                             </div>
  176.                         </div>
  177.                     </div>
  178.                     <div class="col-md-6 col-lg-4 wow fadeInUp" data-wow-delay="0.7s">
  179.                         <div class="service-item p-4">
  180.                             <div class="overflow-hidden mb-4">
  181.                                 <img class="img-fluid" src="/images/engins/5.png" alt="">
  182.                             </div>
  183.                         </div>
  184.                     </div>
  185.                 </div>
  186.             </div>
  187.         </div>
  189.         <div class="container product_index">
  190.             <h2>{{ 'Articles Commandés Recement'|trans }} <b>{{ 'Products'|trans }}</b></h2>
  191.             <div class="row justify-content-center" style="margin-top: -40px">
  192.                 {% for product in productNewArrival|shuffle|slice(0,8) %}
  193.                     {% if product.etat == true %}
  194.                         <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12 col-12">
  195.                             {{ include('partials/product_no_quick_view.html.twig',{'product':product}) }}
  196.                         </div>
  197.                     {% endif %}
  198.                 {% endfor %}
  199.             </div>
  200.         </div>
  202.         <div class="container py-5" style="margin-top: 50px">
  203.             <div class="row g-5">
  204.                 <div class="col-lg-6 p-4">
  205.                     <img src="{{ asset('images/afrique/afrique.png') }}" style="margin-top: -60px" class="img-fluid"/>
  206.                 </div>
  207.                 <div class="col-lg-6 wow fadeInUp text-left" data-wow-delay="0.1s">
  208.                     <h5 style="margin-top: -20px" class="mb-5">{{ "PAYS D'AFRIQUE CENTRALE"|trans }} </h5>
  209.                     <p style="margin-top: -30px" class="mb-5">{{ "Nous sommes présent dans plus de quatres pays d'afrique et dans différentes villes"|trans }}</p>
  210.                     <table  style="margin-top: -40px" class=" table-bordered table-responsive">
  211.                         <tr class="font-weight-bold  bg-primary">
  212.                             <th>PAYS</th>
  213.                             <th>VILLE</th>
  214.                             <th>CONTACTS #1</th>
  215.                             <th>CONTACTS #2</th>
  216.                         </tr>
  218.                         <tr>
  219.                             <th class="p-1">CONGO <br> KINSHASA</th>
  220.                             <td class="p-2">
  221.                                 <p>Kinshasa</p>
  222.                                 <p>Lubumbashi</p>
  223.                                 <p>Kolwezi</p>
  224.                             </td>
  225.                             <td class="p-2">
  226.                                 <p>+243 840474818</p>
  227.                                 <p>+243 970581676</p>
  228.                                 <p>+243 993602323</p>
  229.                             </td>
  230.                             <td class="p-2">
  231.                                 <p>+243 821560092</p>
  232.                                 <p>+243 995838861</p>
  233.                                 <p>+243 992370010</p>
  234.                             </td>
  235.                         </tr>
  237.                         <tr>
  238.                             <th class="p-1">CAMEROUNE</th>
  239.                             <td class="p-2"></td>
  240.                             <td class="p-2">+237 667851138</td>
  241.                             <td class="p-2">+237 678334362</td>
  242.                         </tr>
  243.                         <tr>
  244.                             <th class="p-1">ANGOLA</th>
  245.                             <td class="p-2"></td>
  246.                             <td class="p-2">+244 939121996</td>
  247.                             <td class="p-2">+244 998538616</td>
  248.                         </tr>
  249.                     </table>
  250.                 </div>
  252.             </div>
  253.         </div>
  256.         <div class="d-none d-xl-block product_index" style="margin-top: -25px">
  257.             <h2>{{ 'Categories of '|trans }} <b>{{ 'Products'|trans }}</b></h2>
  258.             <div class="row  justify-content-center" style="margin-top: -50px">
  259.                 {% for market in mymarkets|shuffle|slice(0,3) %}
  260.                     {% for category in market.categories|toArray|shuffle|slice(0,1) %}
  261.                         {% if category|length > 0 %}
  262.                             <div class="col-3" style="border: 6px solid #f3f3f3">
  263.                                 <div class="row justify-content-center" style="background: transparent; border-radius: 10px">
  264.                                     <div class="col-12 font-weight-bold font-monospace  p-2" >
  265.                                         &nbsp; &nbsp;<img width="40px" height="40px" style="border-radius: 50%" src="/assets/uploads/categories/{{ category.image }}"> {{ category.name|upper|trans }}
  266.                                     </div>
  267.                                     {% for product in category.products|toArray|shuffle|slice(0,6) %}
  268.                                         <div class=" col-4" >
  269.                                             {{ include('partials/product_item_tag_or_categorie_market.html.twig',{'product': product}) }}
  270.                                         </div>
  271.                                     {% else %}
  272.                                         <div class=" col-4 ">
  273.                                             {{ include('partials/default.html.twig') }}
  274.                                         </div>
  275.                                     {% endfor %}
  276.                                 </div>
  277.                             </div>
  278.                         {% endif %}
  279.                     {% endfor %}
  280.                 {% endfor %}
  281.             </div>
  282.         </div>
  284.         <section class="container-xxl py-5 text-center" id="services">
  285.             <h3 class="oh-desktop"><span class="d-inline-block animated slideInDown">{{ 'Nos services'|trans }}</span></h3>
  286.             <div class="container py-5" style="margin-top: 50px">
  287.                 <div class="row g-5">
  288.                     <div class="col-lg-6 p-4">
  289.                         <img src="{{ asset('images/expedition.png') }}" style="margin-top: -60px" />
  290.                     </div>
  291.                     <div class="col-lg-6 wow fadeInUp text-left" data-wow-delay="0.1s">
  292.                         <h5 class="mb-5">{{ "EXPEDITION DE COLIS"|trans }}</h5>
  293.                         <p class="mb-5">{{ "Nous vous rassurons une expédition rapide et sécuriser des vos colis de la chine vers la RDC, le Cameroune et l'angola ... à un prix abordable et dans un delai précis après la reception des vos colis ..."|trans }}</p>
  294.                         <div class="d-flex align-items-center">
  295.                             <i class="fa fa-headphones fa-2x flex-shrink-0 bg-primary p-3 text-white"></i>
  296.                             <div class="ps-4">
  297.                                 <h6>{{ "Appelez pour toute question"|trans }} !</h6>
  298.                                 <h3 class="text-primary m-0">&nbsp;
  299.                                     +8613544492960
  300.                                 </h3>
  301.                             </div>
  302.                         </div>
  303.                     </div>
  305.                 </div>
  306.             </div>
  307.         </section>
  309.         <div class="container-xxl py-5" style="margin-top: -120px">
  310.             <div class="container py-5" style="margin-top: 50px">
  311.                 <div class="row g-5">
  312.                     <div class="col-lg-6 wow fadeInUp text-right" data-wow-delay="0.1s">
  313.                         <h5 class="mb-5"> {{ 'ASSISTANCE ACHAT'|trans }}</h5>
  314.                         <p class="mb-5 text-justify">
  315.                             {{ "Les Chinois savent comment faire affaire. Ils gèrent des tonnes de magasins. Malheureusement, seulement un petit pourcentage d'entres eux proposent une autre langue que le chinois. Mais cela ne vous empêchera pas d'obtenir ces articles chez vous de toute façon.Notre équipe locale peut acheter n'importe quoi. Il suffit juste de nous montrer ce dont vous avez besoin et nous nous en occuperons. Ce service comprend la commande et le paiement."|trans }}</p>
  316.                         <div class=" align-items-center" style="margin-top: -50px">
  317.                             <i class="fa fa-pulse fa-2x flex-shrink-0 bg-primary p-3 text-white"></i>
  318.                             <div class="ps-4 text-right">
  319.                                 <h6>&nbsp; &nbsp;&nbsp; {{ "Besoin d'assistance"|trans }}</h6>
  320.                             </div>
  321.                         </div>
  322.                     </div>
  323.                     <div class="col-lg-6 p-4">
  324.                         <img src="{{ asset('images/services/servicesachat.png') }}" style="margin-top: -60px" class="img-fluid"/>
  325.                     </div>
  326.                 </div>
  327.             </div>
  328.         </div>
  330.         <section class="container-xxl py-5 mb-6"  id="services" style="margin-top: -120px; margin-bottom: 70px">
  331.             <div class="container py-5" style="margin-top: 50px">
  332.                 <div class="row g-5">
  333.                     <div class="col-lg-6 p-6">
  334.                         <img src="{{ asset('images/sendmoney/sendmoney.png') }}" width="240"  />
  335.                     </div>
  336.                     <div class="col-lg-6 wow fadeInUp text-left" data-wow-delay="0.1s">
  337.                         <h5 class="mb-5">{{ "TRANSFERT D'argent"|trans }}</h5>
  338.                         <p class="mb-5">{{ "Envoyez de l'argent vers la chine, un transfert rapide, simple et sécuriser, quelques soit le montant avec un taux d'intérêt compétitif"|trans }}</p>
  339.                         <div class="d-flex align-items-center">
  340.                             <i class="fa fa-money fa-2x flex-shrink-0 bg-primary p-3 text-white"></i>
  341.                         </div>
  342.                     </div>
  344.                 </div>
  345.             </div>
  346.         </section>
  349.         <section   class="section section-xl bg-default" id="clients" style="background: transparent; margin-top: -100px">
  350.             <div class="row">
  351.                 <div class="col-12 text-center">
  352.                     <div class="section-title text-center">
  353.                         <h3>{{ 'Notre entrepot à GUANGZHOU'|trans }}</h3>
  354.                     </div>
  355.                     <div class="releted_product_slider carousel_slider owl-carousel owl-theme" data-margin="20" data-responsive='{"0":{"items": "1"}, "481":{"items": "2"}, "768":{"items": "3"}, "1199":{"items": "4"}}'>
  356.                         <article>
  357.                             <a href="{{ asset('images/depot/depot2.jpg') }}" data-lightgallery="item">
  358.                                 <div class="thumbnail-creative-figure">
  359.                                     <img src="{{ asset('images/depot/depot2.jpg') }}"  alt=""/>
  360.                                 </div>
  361.                                 <div class="thumbnail-creative-caption">
  362.                                     <span class="icon thumbnail-creative-icon linearicons-magnifier"></span>
  363.                                 </div>
  364.                             </a>
  365.                         </article>
  366.                         <article >
  367.                             <a href="{{ asset('images/depot/depot3.jpg') }}" data-lightgallery="item">
  368.                                 <div class="thumbnail-creative-figure">
  369.                                     <img src="{{ asset('images/depot/depot3.jpg') }}" alt=""/>
  370.                                 </div>
  371.                                 <div class="thumbnail-creative-caption">
  372.                                     <span class="icon thumbnail-creative-icon linearicons-magnifier"></span>
  373.                                 </div>
  374.                             </a>
  375.                         </article>
  376.                         <article >
  377.                             <a href="{{ asset('images/depot/depot4.jpg') }}" data-lightgallery="item">
  378.                                 <div class="thumbnail-creative-figure">
  379.                                     <img src="{{ asset('images/depot/depot4.jpg') }}" alt=""/>
  380.                                 </div>
  381.                                 <div class="thumbnail-creative-caption">
  382.                                     <span class="icon thumbnail-creative-icon linearicons-magnifier"></span>
  383.                                 </div>
  384.                             </a>
  385.                         </article>
  386.                         <article >
  387.                             <a href="{{ asset('images/depot/depot5.jpg') }}" data-lightgallery="item">
  388.                                 <div class="thumbnail-creative-figure">
  389.                                     <img src="{{ asset('images/depot/depot5.jpg') }}" alt=""/>
  390.                                 </div>
  391.                                 <div class="thumbnail-creative-caption">
  392.                                     <span class="icon thumbnail-creative-icon linearicons-magnifier"></span>
  393.                                 </div>
  394.                             </a>
  395.                         </article>
  396.                     </div>
  398.                 </div>
  399.             </div>
  400.         </section>
  402.         <section id="team" class="team section-bg mt-3">
  403.             <div class="container" data-aos="fade-up">
  405.                 <div class="section-title text-center">
  406.                     <h4>{{ "NOTRE EQUIPE"|trans }}</h4>
  407.                 </div>
  409.                 <div class="row">
  411.                     <div class="col-lg-6">
  412.                         <div class="member d-flex align-items-start" data-aos="zoom-in" data-aos-delay="100">
  413.                             <div class="pic"><img src="/images/team/marcel.jpg" class="img-fluid" alt=""></div>
  414.                             <div class="member-info">
  415.                                 <h4>Marcel Montalbetti</h4>
  416.                                 <span> {{ "Directeur Général"|trans }}</span>
  417.                                 <div class="social">
  418.                                     <a target="_blank" href="https://twitter.com/AFI_SARL_AGENCY"><i class="ion-social-twitter"></i></a>
  419.                                     <a target="_blank" href="https://web.facebook.com/pages/Alliance-force-international/1378432102472928?_rdc=1&_rdr"><i class="ion-social-facebook"></i></a>
  420.                                     <a target="_blank" href="https://www.instagram.com/afi_import_export/"><i class="ion-social-instagram"></i></a>
  421.                                     <a target="_blank" href="https://api.whatsapp.com/send?phone=8613544492960"> <i class="ion-social-whatsapp"></i> </a>
  422.                                 </div>
  423.                             </div>
  424.                         </div>
  425.                     </div>
  427.                     <div class="col-lg-6 mt-4 mt-lg-0">
  428.                         <div class="member d-flex align-items-start" data-aos="zoom-in" data-aos-delay="200">
  429.                             <div class="pic"><img src="/images/team/team.png" class="img-fluid" alt=""></div>
  430.                             <div class="member-info">
  431.                                 <h4>CHRISTIAN MONTALBETTI</h4>
  432.                                 <span>{{ "Manager Général"|trans }}</span>
  433.                                 <div class="social">
  434.                                     <a target="_blank" href="https://twitter.com/AFI_SARL_AGENCY"><i class="ion-social-twitter"></i></a>
  435.                                     <a target="_blank" href="https://web.facebook.com/pages/Alliance-force-international/1378432102472928?_rdc=1&_rdr"><i class="ion-social-facebook"></i></a>
  436.                                     <a target="_blank" href="https://www.instagram.com/afi_import_export/"><i class="ion-social-instagram"></i></a>
  437.                                     <a target="_blank" href="https://api.whatsapp.com/send?phone=243822896991"> <i class="ion-social-whatsapp"></i> </a>
  438.                                 </div>
  439.                             </div>
  440.                         </div>
  441.                     </div>
  443.                     <div class="col-lg-6 mt-4">
  444.                         <div class="member d-flex align-items-start" data-aos="zoom-in" data-aos-delay="300">
  445.                             <div class="pic"><img src="/images/team/team.png" class="img-fluid" alt=""></div>
  446.                             <div class="member-info">
  447.                                 <h4>STEVE UMBA</h4>
  448.                                 <span>{{ "Directeur Yiwu"|trans }}</span>
  450.                                 <div class="social">
  451.                                     <a target="_blank" href="https://twitter.com/AFI_SARL_AGENCY"><i class="ion-social-twitter"></i></a>
  452.                                     <a target="_blank" href="https://web.facebook.com/pages/Alliance-force-international/1378432102472928?_rdc=1&_rdr"><i class="ion-social-facebook"></i></a>
  453.                                     <a target="_blank" href="https://www.instagram.com/afi_import_export/"><i class="ion-social-instagram"></i></a>
  454.                                     <a target="_blank" href="https://api.whatsapp.com/send?phone=8615267374779"> <i class="ion-social-whatsapp"></i> </a>
  455.                                 </div>
  456.                             </div>
  457.                         </div>
  458.                     </div>
  460.                     <div class="col-lg-6 mt-4">
  461.                         <div class="member d-flex align-items-start" data-aos="zoom-in" data-aos-delay="400">
  462.                             <div class="pic"><img src="/images/team/team.png" class="img-fluid" alt=""></div>
  463.                             <div class="member-info">
  464.                                 <h4>BAVON KALENGA</h4>
  465.                                 <span>{{ "Directeur Lubumbashi"|trans }}</span>
  466.                                 <div class="social">
  467.                                     <a target="_blank" href="https://twitter.com/AFI_SARL_AGENCY"><i class="ion-social-twitter"></i></a>
  468.                                     <a target="_blank" href="https://web.facebook.com/pages/Alliance-force-international/1378432102472928?_rdc=1&_rdr"><i class="ion-social-facebook"></i></a>
  469.                                     <a target="_blank" href="https://www.instagram.com/afi_import_export/"><i class="ion-social-instagram"></i></a>
  470.                                     <a  target="_blank" href="https://api.whatsapp.com/send?phone=243995838169"> <i class="ion-social-whatsapp"></i> </a>
  471.                                 </div>
  472.                             </div>
  473.                         </div>
  474.                     </div>
  476.                 </div>
  478.             </div>
  479.         </section>
  482.         <div class="container product_index" style="margin-top: 10px">
  484.             <h2>{{ 'AFI SARL'|trans }} <b>{{ 'Import Export'|trans }}</b></h2>
  486.             <div class="row">
  487.                 <div class="col-lg-6">
  488.                     <div class="card" style="background:#fff; ">
  489.                         <div class="card-body">
  490.                             <div class="message-flash">
  491.                                 <div id="alert-msg" class="col-md-12" role="alert"></div>
  492.                             </div>
  493.                             <div id="div_field_form_id">
  494.                                 {{ render(path('contact_form')) }}
  495.                             </div>
  496.                         </div>
  497.                     </div>
  498.                 </div>
  499.                 <div class="col-lg-6">
  500.                     <div class="row">
  501.                         <div class="col-xl-12 col-lg-12 col-md-12">
  502.                             <div class="contact_wrap bg-white contact_style3">
  503.                                 <div class="contact_icon">
  504.                                     <i class="linearicons-map-marker"></i>
  505.                                 </div>
  506.                                 <div class="contact_text">
  507.                                     <span>{{ 'CHINA - GUANGZHOU' }}</span>
  508.                                     <p>XIAO BEI LU N°63, HUAYU BUILDING ROOM 13K, YUE XIU DISTRICT</p>
  509.                                 </div>
  510.                             </div>
  511.                         </div>
  512.                         <div class="col-xl-12 col-lg-12 col-md-12">
  513.                             <div class="contact_wrap contact_style3 bg-white">
  514.                                 <div class="contact_icon">
  515.                                     <i class="linearicons-map-marker"></i>
  516.                                 </div>
  517.                                 <div class="contact_text">
  518.                                     <span>{{ 'CHINA - YIWU' }}</span>
  519.                                     <p>YONGSHENG XIAOQU, BLOCK 96, 3<sup>ème</sup>NIVEAU</p>
  520.                                 </div>
  521.                             </div>
  522.                         </div>
  523.                         <div class="col-xl-12 col-lg-12 col-md-12">
  524.                             <div class="contact_wrap contact_style3 bg-white">
  525.                                 <div class="contact_icon">
  526.                                     <i class="linearicons-map-marker"></i>
  527.                                 </div>
  528.                                 <div class="contact_text">
  529.                                     <span>{{ 'RD CONGO - LUBUMBASHI' }}</span>
  530.                                     <p>1138, AV KASAI COIN TABORA COMMUNE LUBUMBASHI</p>
  531.                                 </div>
  532.                             </div>
  533.                         </div>
  534.                         <div class="col-xl-12 col-lg-12 col-md-12">
  535.                             <div class="contact_wrap contact_style3 bg-white">
  536.                                 <div class="contact_icon">
  537.                                     <i class="linearicons-map-marker"></i>
  538.                                 </div>
  539.                                 <div class="contact_text">
  540.                                     <span>{{ 'RD CONGO - KINSHASA' }}</span>
  541.                                     <p>254, KINSHASA NGOMBE</p>
  542.                                 </div>
  543.                             </div>
  544.                         </div>
  545.                     </div>
  546.                 </div>
  547.             </div>
  548.         </div>
  549.         <br>
  550.         <br>
  551.         <br>
  552.         {{ include('partials/modalQuickView.html.twig') }}
  553.     </div>
  555. {% endblock %}
  557. {% block javascripts %}
  558.     <script type="text/javascript">
  560.         var input = document.querySelector("#contact_phone"),
  561.             output = document.querySelector("#error-msg");
  563.         var iti = window.intlTelInput(input, {
  564.             nationalMode: true,
  565.             preferredCountries: [ "cd", "cn" ],
  566.             separateDialCode: true,
  567.             autoHideDialCode: true,
  568.             utilsScript: "assets/js/utils.js?1613236686837"
  569.         });
  571.         var handleChange = function() {
  572.             var text = (iti.isValidNumber()) ? "International: " + iti.getNumber() : "Please enter a number below";
  573.             var textNode = document.createTextNode(text);
  574.             output.innerHTML = "";
  575.             input.value = iti.getNumber();
  576.         };
  578.         // listen to "keyup", but also "change" to update when the user selects a country
  579.         input.addEventListener('change', handleChange);
  580.         input.addEventListener('keyup', handleChange);
  583.         $(document).ready(function(){
  584.             $('.js-categories-multiple').select2({
  585.                 width: 'resolve',
  586.                 theme: 'classic',
  587.                 placeholder: 'Select option'
  588.             });
  589.         })
  590.     </script>
  591. {% endblock %}