templates/front/contact/index.html.twig line 1

  1. {% extends "front/base.html.twig" %}
  3. {% block title %} - Contact us{% endblock %}
  5. {% block mainBarnner %}
  7. {% endblock %}
  9. {% block mainContent %}
  11.     <!-- =======================
  12. Page Banner START -->
  13.     <section class="pt-5 pb-0" style="background-image:url({{ asset('assets/images/element/map.svg') }}); background-position: center left; background-size: cover;">
  14.         <div class="container">
  15.             <div class="row">
  16.                 <div class="col-lg-8 col-xl-6 text-center mx-auto">
  17.                     <!-- Title -->
  18.                     <h6 class="text-primary">{% trans %}CONTACTUS_KEY{% endtrans %}</h6>
  19.                     <h1 class="mb-4">{% trans %}CONTACTPAGE_HELP_KEY{% endtrans %}</h1>
  20.                 </div>
  21.             </div>
  23.             <!-- Contact info box -->
  24.             <div class="row g-4 g-md-5 mt-0 mt-lg-3">
  25.                 <!-- Box item -->
  26.                 <div class="col-lg-4 mt-lg-0">
  27.                     <div class="card card-body bg-primary shadow py-5 text-center h-100">
  28.                         <!-- Title -->
  29.                         <h5 class="text-white mb-3">{% trans %}CONTACTPAGE_WHATSAPP_KEY{% endtrans %}</h5>
  30.                         <ul class="list-inline mb-0">
  31.                             <!-- Address -->
  32.                             <li class="list-item mb-3">
  33.                                 <a href="#" class="text-white"> <i class="fas fa-fw fa-map-marker-alt me-2 mt-1"></i>Douala-Akwa / Carrefour Equinox TV, face Beneficial Assurance</a>
  34.                             </li>
  35.                             <!-- Phone number -->
  36.                             <li class="list-item mb-3">
  37.                                 <a href="#" class="text-white"> <i class="fas fa-fw fa-phone-alt me-2"></i>(+237) 698809093 </a>
  38.                             </li>
  39.                             <!-- Email id -->
  40.                             <li class="list-item mb-0">
  41.                                 <a href="#" class="text-white"> <i class="far fa-fw fa-envelope me-2"></i>kulmapeckcontact@gmail.com </a>
  42.                             </li>
  43.                         </ul>
  44.                     </div>
  45.                 </div>
  47.                 <!-- Box item -->
  48.                 <div class="col-lg-4 mt-lg-0">
  49.                     <div class="card card-body shadow py-5 text-center h-100">
  50.                         <!-- Title -->
  51.                         <h5 class="mb-3">{% trans %}CONTACTPAGE_MTN_KEY{% endtrans %}</h5>
  52.                         <ul class="list-inline mb-0">
  53.                             <!-- Address -->
  54.                             <li class="list-item mb-3 h6 fw-light">
  55.                                 <a href="#"> <i class="fas fa-fw fa-map-marker-alt me-2 mt-1"></i>Douala-Akwa / Carrefour Equinox TV, face Beneficial Assurance</a>
  56.                             </li>
  57.                             <!-- Phone number -->
  58.                             <li class="list-item mb-3 h6 fw-light">
  59.                                 <a href="#"> <i class="fas fa-fw fa-phone-alt me-2"></i>+237 678507398 </a>
  60.                             </li>
  61.                             <!-- Email id -->
  62.                             <li class="list-item mb-0 h6 fw-light">
  63.                                 <a href="#"> <i class="far fa-fw fa-envelope me-2"></i>kulmapeckcontact@gmail.com </a>
  64.                             </li>
  65.                         </ul>
  66.                     </div>
  67.                 </div>
  69.                 <!-- Box item -->
  70.                 <div class="col-lg-4 mt-lg-0">
  71.                     <div class="card card-body shadow py-5 text-center h-100">
  72.                         <!-- Title -->
  73.                         <h5 class="mb-3">{% trans %}CONTACTPAGE_ORANGE_KEY{% endtrans %}</h5>
  74.                         <ul class="list-inline mb-0">
  75.                             <!-- Address -->
  76.                             <li class="list-item mb-3 h6 fw-light">
  77.                                 <a href="#"> <i class="fas fa-fw fa-map-marker-alt me-2 mt-1"></i>Douala-Akwa / Carrefour Equinox TV, face Beneficial Assurance </a>
  78.                             </li>
  79.                             <!-- Phone number -->
  80.                             <li class="list-item mb-3 h6 fw-light">
  81.                                 <a href="#"> <i class="fas fa-fw fa-phone-alt me-2"></i>+237 698809093 </a>
  82.                             </li>
  83.                             <!-- Email id -->
  84.                             <li class="list-item mb-0 h6 fw-light">
  85.                                 <a href="#"> <i class="far fa-fw fa-envelope me-2"></i>kulmapeckcontact@gmail.com </a>
  86.                             </li>
  87.                         </ul>
  88.                     </div>
  89.                 </div>
  90.             </div>
  91.         </div>
  92.     </section>
  93.     <!-- =======================
  94.     Page Banner END -->
  96.     <!-- =======================
  97.     Image and contact form START -->
  98.     <section >
  99.         <div class="container">
  100.             <div class="row g-4 g-lg-0 align-items-center">
  101.                 {% for msg in app.flashes('messageSend') %}
  102.                     <div class="col-12">
  103.                         <div class="alert alert-success text-center">
  104.                             {{ msg }}
  105.                         </div>
  106.                     </div>
  107.                 {% endfor %}
  109.                 <div class="col-md-6 align-items-center text-center">
  110.                     <!-- Image -->
  111.                     <img src="{{ asset('assets/images/element/contact.svg') }}" class="h-400px" alt="">
  113.                     <!-- Social media button -->
  114.                     {% if socialsSettings is defined and socialsSettings is not same as null %}
  115.                         <div class="d-sm-flex align-items-center justify-content-center mt-2 mt-sm-4">
  116.                             <h5 class="mb-0">{% trans %}CONTACTPAGE_FOLLOWUS_KEY{% endtrans %}:</h5>
  117.                             <ul class="list-inline mb-0 ms-sm-2">
  118.                                 {% for item in socialsSettings %}
  119.                                     {% if item.icon|lower is same as 'fa-facebook-f' %}
  120.                                         <li class="list-inline-item"> <a target="_blank" class="btn btn-white btn-sm shadow px-2 text-facebook" href="{{ item.link }}"><i class="fab fa-fw fa-facebook-f"></i></a> </li>
  121.                                     {% elseif item.icon|lower is same as 'fa-instagram' %}
  122.                                         <li class="list-inline-item"> <a target="_blank" class="btn btn-white btn-sm shadow px-2 text-instagram" href="{{ item.link }}"><i class="fab fa-fw fa-instagram"></i></a> </li>
  123.                                     {% elseif item.icon|lower is same as 'fa-fw fa-twitter' %}
  124.                                         <li class="list-inline-item"> <a target="_blank" class="btn btn-white btn-sm shadow px-2 text-twitter" href="{{ item.link }}"><i class="fab fa-fw fa-twitter"></i></a> </li>
  125.                                     {% elseif item.icon|lower is same as 'fa-linkedin-in' %}
  126.                                         <li class="list-inline-item"> <a target="_blank" class="btn btn-white btn-sm shadow px-2 text-linkedin" href="{{ item.link }}"><i class="fab fa-fw fa-linkedin-in"></i></a> </li>
  127.                                     {% elseif item.icon|lower is same as 'fa-youtube' %}
  128.                                         <li class="list-inline-item"> <a target="_blank" class="btn btn-white btn-sm shadow px-2 text-danger" href="{{ item.link }}"><i class="fab fa-fw fa-youtube"></i></a> </li>
  129.                                     {% endif %}
  130.                                 {% endfor %}    
  131.                             </ul>
  132.                         </div>
  133.                     {% endif %}
  134.                 </div>
  136.                 <!-- Contact form START -->
  137.                 <div class="col-md-6">
  138.                     <!-- Title -->
  139.                     <h2 class="mt-4 mt-md-0">{% trans %}CONTACTPAGE_LETSTALK_KEY{% endtrans %}</h2>
  140.                     <p>{% trans %}CONTACTPAGE_LETSTALKDESCRIPTION_KEY{% endtrans %}</p>
  142.                     {{ form_start(contactForm) }}
  143.                     <!-- Name -->
  144.                     <div class="mb-4 bg-light-input">
  145.                         {{ form_label(contactForm.name) }}
  146.                         {{ form_widget(contactForm.name) }}
  147.                     </div>
  148.                     <!-- Email -->
  149.                     <div class="mb-4 bg-light-input">
  150.                         {{ form_label(contactForm.email) }}
  151.                         {{ form_widget(contactForm.email) }}
  152.                     </div>
  153.                     <!-- Message -->
  154.                     <div class="mb-4 bg-light-input">
  155.                         {{ form_label(contactForm.message) }}
  156.                         {{ form_widget(contactForm.message) }}
  157.                     </div>
  158.                     <!-- Button -->
  159.                     <div class="d-grid">
  160.                         <button class="btn btn-lg btn-primary mb-0" type="submit">{% trans %}CONTACTPAGE_SENDMESSAGEBTN_KEY{% endtrans %}</button>
  161.                     </div>
  162.                     {{ form_end(contactForm) }}
  163.                 </div>
  164.                 <!-- Contact form END -->
  165.             </div>
  166.         </div>
  167.     </section>
  168.     <!-- =======================
  169.     Image and contact form END -->
  171. {% endblock %}