templates/Theme/Produit/Service/Service/contacts.html.twig line 1

Open in your IDE?
  1. {% extends "Theme/Users/User/layoutbase.html.twig" %}
  2. {% block meta %}
  3.     {{ parent() }}
  4.     <meta name="keywords" content="{{ site }}, "/>
  5.     <meta name="author" content="Noel Kenfack"/>
  6.     <meta name="description" content="{{ site }}" />
  7. {% endblock %}
  9. {% block title %}
  10.     {{ parent() }} - Contacts
  11. {% endblock %}
  13. {% block userblog_body %}
  14.   <style>
  15.     .content{
  16.         background-color: #268dcf;
  17.     }
  18.   .wrap {
  19.         padding-top: 8px;
  20.         padding-bottom: 8px;
  21.         box-shadow: 0 5px 5px #fff;
  22.     }
  23.     .breadcrumb {
  24.         width: 100%;
  25.         margin: auto;
  26.         display: flex;
  27.     }
  28.     .breadcrumb li {
  29.         padding: 0 20px;
  30.     }
  31.     .breadcrumb a {
  32.         text-decoration: none;
  33.         color: aliceblue;
  34.         font-weight: 700;
  35.         transition: 0.5s;
  36.     }
  37.     .breadcrumb li + li {
  38.         padding-left: 0;
  39.     }
  40.     .breadcrumb li + li:before {
  41.         content: '>';
  42.         color: #3b3b3bff;
  43.         margin-right: 20px;
  44.     }
  45.     .breadcrumb li:last-child a,
  46.     .breadcrumb a:hover {
  47.         color: #e2ebf3;
  48.         border-radius: 35px;
  49.         background-color: #82ccdd;
  50.         padding: 5px 10px;
  51.     }
  52.     {# End Breadcrumb #}
  53.     {# card #}
  54.     :root {
  55.   --swiper-pagination-color: #fff;
  56.   --swiper-pagination-bullet-inactive-color: #fff;
  57.   }
  59.   /*--------------------------------------------------------------
  60. # Contact Section
  61. --------------------------------------------------------------*/
  62. .contact .info-container {
  63.   background-color: var(--color-primary);
  64.   height: 100%;
  65.   padding: 20px;
  66.   border-radius: 10px 0 0 10px;
  67.   box-shadow: 0px 2px 25px rgba(0, 0, 0, 0.1);
  68. }
  70. .contact .info-item {
  71.   width: 100%;
  72.   background-color: #268ecfd4;
  73.   margin-bottom: 20px;
  74.   padding: 20px;
  75.   border-radius: 10px;
  76.   color: #fff;
  77. }
  79. .contact .info-item:last-child {
  80.   margin-bottom: 0;
  81. }
  83. .contact .info-item i {
  84.   font-size: 20px;
  85.   color: #fff;
  86.   float: left;
  87.   width: 44px;
  88.   height: 44px;
  89.   background-color: rgba(255, 255, 255, 0.2);
  90.   display: flex;
  91.   justify-content: center;
  92.   align-items: center;
  93.   border-radius: 50px;
  94.   transition: all 0.3s ease-in-out;
  95.   margin-right: 15px;
  96. }
  98. .contact .info-item h4 {
  99.   padding: 0;
  100.   font-size: 20px;
  101.   font-weight: 600;
  102.   margin-bottom: 5px;
  103. }
  105. .contact .info-item p {
  106.   padding: 0;
  107.   margin-bottom: 0;
  108.   font-size: 14px;
  109. }
  111. .contact .info-item:hover i {
  112.   background: #ffffff70;
  113.   color: var(--color-primary);
  114. }
  116. .contact .php-email-form {
  117.   width: 100%;
  118.   height: 100%;
  119.   background: #fff;
  120.   box-shadow: 0px 2px 25px rgba(0, 0, 0, 0.1);
  121.   padding: 30px;
  122.   border-radius: 0 10px 10px 0;
  123. }
  125. .contact .php-email-form .form-group {
  126.   padding-bottom: 8px;
  127. }
  129. .contact .php-email-form .error-message {
  130.   display: none;
  131.   color: #fff;
  132.   background: #df1529;
  133.   text-align: left;
  134.   padding: 15px;
  135.   font-weight: 600;
  136. }
  138. .contact .php-email-form .error-message br+br {
  139.   margin-top: 25px;
  140. }
  142. .contact .php-email-form .sent-message {
  143.   display: none;
  144.   color: #fff;
  145.   background: #059652;
  146.   text-align: center;
  147.   padding: 15px;
  148.   font-weight: 600;
  149. }
  151. .contact .php-email-form .loading {
  152.   display: none;
  153.   background: #fff;
  154.   text-align: center;
  155.   padding: 15px;
  156. }
  158. .contact .php-email-form .loading:before {
  159.   content: "";
  160.   display: inline-block;
  161.   border-radius: 50%;
  162.   width: 24px;
  163.   height: 24px;
  164.   margin: 0 10px -6px 0;
  165.   border: 3px solid #059652;
  166.   border-top-color: #fff;
  167.   -webkit-animation: animate-loading 1s linear infinite;
  168.   animation: animate-loading 1s linear infinite;
  169. }
  171. .contact .php-email-form input,
  172. .contact .php-email-form textarea {
  173.   border-radius: 0;
  174.   box-shadow: none;
  175.   font-size: 14px;
  176. }
  178. .contact .php-email-form input[type=text],
  179. .contact .php-email-form input[type=email],
  180. .contact .php-email-form textarea {
  181.   padding: 12px 15px;
  182. }
  184. .contact .php-email-form input[type=text]:focus,
  185. .contact .php-email-form input[type=email]:focus,
  186. .contact .php-email-form textarea:focus {
  187.   border-color: var(--color-primary);
  188. }
  190. .contact .php-email-form textarea {
  191.   padding: 10px 12px;
  192. }
  194. .contact .php-email-form button[type=submit] {
  195.   background: var(--color-primary);
  196.   border: 0;
  197.   padding: 14px 45px;
  198.   color: #fff;
  199.   transition: 0.4s;
  200.   border-radius: 50px;
  201. }
  203. .contact .php-email-form button[type=submit] {
  204.   background: #268ecfd4;
  205. }
  207. .contact .php-email-form button[type=submit]:hover {
  208.   background: rgba(0, 131, 116, 0.8);
  209. }
  211. @-webkit-keyframes animate-loading {
  212.   0% {
  213.     transform: rotate(0deg);
  214.   }
  216.   100% {
  217.     transform: rotate(360deg);
  218.   }
  219. }
  221. @keyframes animate-loading {
  222.   0% {
  223.     transform: rotate(0deg);
  224.   }
  226.   100% {
  227.     transform: rotate(360deg);
  228.   }
  229. }
  231. {# css indice sections  #}
  232.     .section-head.center.wt-small-separator-outer {
  233.         margin-bottom: 50px;
  234.         text-align: left;
  235.     }
  236.     .section-head {
  237.         position: relative;
  238.     }
  239.     .site-text-primary, .wt-small-separator {
  240.         color: #ea130e;
  241.     }
  242.     .wt-small-separator {
  243.         font-family: "Heebo", sans-serif;
  244.         text-transform: uppercase;
  245.         letter-spacing: 1px;
  246.         padding-right: 40px;
  247.         font-size: 26px;
  248.         line-height: 26px;
  249.         margin-bottom: 15px;
  250.         position: relative;
  251.         display: inline-block;
  252.         font-weight: 700;
  253.     }
  254.     .section-head.center .wt-small-separator div.sep-leaf-left {
  255.         position: relative;
  256.     }
  257.     .section-head.center .wt-small-separator div.sep-leaf-left:before, .section-head.center .wt-small-separator div.sep-leaf-left:after {
  258.         background-color: #ea130e;
  259.     }
  260.     .section-head.center .wt-small-separator div.sep-leaf-left:before {
  261.         right: -20px;
  262.         width: 10px;
  263.     }
  264.     .section-head.center .wt-small-separator div.sep-leaf-left:before, .section-head.center .wt-small-separator div.sep-leaf-left:after {
  265.         position: absolute;
  266.         content: '';
  267.         height: 22px;
  268.         bottom: 0px;
  269.         top: 0px;
  270.         transform: skew(-20deg);
  271.     }
  272.     .section-head.center .wt-small-separator div.sep-leaf-left:after {
  273.         right: -27px;
  274.         width: 4px;
  275.     }
  276.     .section-head.center.wt-small-separator-outer h2 {
  277.         max-width: 630px;
  278.         margin: 0px auto;
  279.     }
  280. </style>
  282. <!-- CTA Section -->
  283. <section class="cta " style="padding: 1rem 0;">
  284.     <div class="container">
  285.         <div class="section-head center wt-small-separator-outer mt-3 text-center" style="margin-bottom: 0px;">
  286.             <div class="wt-small-separator site-text-primary">
  287.                 <div class="sep-leaf-left"></div>
  288.                 <div>Contactez notre service client</div>
  289.             </div>
  290.         </div>
  291.         <div>Avez-vous d'autres questions? Ne vous inquiétez pas, toutes vos questions sont les bienvenues. Remplissez simplement le formulaire ci-dessous et nous vous répondrons dans les plus brefs délais.</div>
  292.     </div>
  293. </section>
  295. <section class="section-sm">
  296.         <div class="content" style="padding-bottom: 5px;">
  297.             <div class="wrap">
  298.                 <div class="container">
  299.                     <ol class="breadcrumb">
  300.                         <li href="#">
  301.                             <a>Home</a>
  302.                         </li>
  303.                         <li href="#">
  304.                             <a>Contact</a>
  305.                         </li>
  306.                     </ol>
  307.                 </div>
  308.             </div>
  309.         </div>
  310.   </section>
  313. <!-- contact -->
  314. <section id="contact" class="contact" style="padding-top: 15px; padding-bottom: 30px;">
  315.   <div class="container">
  316.     <div class="row">
  317.       <div class="col-lg-12">
  318.         <h2 class="section-title">Remplissez le formulaire de contact</h2>
  319.       </div>
  320.     </div>
  322.     <div class="row gx-lg-0" style="padding-top: 15px;">
  323.       <div class="col-md-12">
  324.         {% for infos in app.session.flashbag.get('information') %}
  325.         {% if loop.first %}
  326.                 <div class="alert alert-info alert-dismissible fade show" role="alert">
  327.                     {{ infos }}
  328.                 </div>
  329.         {% endif %}
  330.         {% endfor %}            
  331.       </div>
  333.       <div class="col-lg-4">
  335.         <div class="info-container d-flex flex-column align-items-center justify-content-center">
  336.           <div class="info-item d-flex">
  337.             <i class="bi bi-geo-alt flex-shrink-0"></i>
  338.             <div>
  339.               <h4>Localisation:</h4>
  340.               <!--<p>Yaounde (Carrefour Kameni) | Douala (Akwa)</p>-->
  341.               <ul>
  342.                 <li>Yaounde (Car. Kameni)</li>
  343.                 <li>Douala (Akwa)</li>
  344.                 <li>Bafoussam</li>
  345.               </ul>
  346.             </div>
  347.           </div><!-- End Info Item -->
  349.           <div class="info-item d-flex">
  350.             <i class="bi bi-envelope flex-shrink-0"></i>
  351.             <div>
  352.               <h4>Email:</h4>
  353.               <p>syscofie@gamil.com</p>
  354.             </div>
  355.           </div><!-- End Info Item -->
  357.           <div class="info-item d-flex">
  358.             <i class="bi bi-phone flex-shrink-0"></i>
  359.             <div>
  360.               <h4>Nos Contacts:</h4>
  361.               <p>+237 656 56 00 14 / 671 48 65 50</p>
  362.             </div>
  363.           </div><!-- End Info Item -->
  365.           <div class="info-item d-flex">
  366.             <i class="bi bi-clock flex-shrink-0"></i>
  367.             <div>
  368.               <h4>Heures de services:</h4>
  369.               <p>7 Jours / 7 - 24 Heures / 24</p>
  370.             </div>
  371.           </div><!-- End Info Item -->
  372.         </div>
  374.       </div>
  376.       <div class="col-lg-8">
  377.           {{ form_start(formprojet, {'attr': {'class': 'php-email-form','action': path('produit_service_contacts') }}) }}
  378.           <div class="row">
  379.             <div class="col-md-6 form-group">
  380.               <span style="color:red;">{{ form_errors(formprojet) }}</span>
  381.               <span style="color:red;">{{ form_errors(formprojet.nom) }}</span>
  382.               {{ form_label(formprojet.nom,'Entrez votre nom', {'attr': {'class': 'small-title-text'}}) }}
  383.               {{ form_widget(formprojet.nom, {'attr': {'class': 'form-control'}}) }}
  385.             </div>
  386.             <div class="col-md-6 form-group mt-3 mt-md-0">
  387.               <span style="color:red;">{{ form_errors(formprojet) }}</span>
  388.               <span style="color:red;">{{ form_errors(formprojet.email) }}</span>
  389.               {{ form_label(formprojet.email,'Entrez votre email', {'attr': {'class': 'small-title-text'}}) }}
  390.               {{ form_widget(formprojet.email, {'attr': {'class': 'form-control'}}) }}
  391.             </div>
  392.           </div>
  393.           <div class="form-group mt-3">
  394.             <span style="color:red;">{{ form_errors(formprojet) }}</span>
  395.             <span style="color:red;">{{ form_errors(formprojet.sujet) }}</span>
  396.             {{ form_label(formprojet.sujet,'quel est l\'objet de votre demande', {'attr': {'class': 'small-title-text'}}) }}
  397.             {{ form_widget(formprojet.sujet, {'attr': {'class': 'form-control'}}) }}
  398.           </div>
  399.           <div class="form-group mt-3">
  400.             <span style="color:red;">{{ form_errors(formprojet.contenu) }}</span>
  401.             {{ form_label(formprojet.contenu,'Contenu de votre message', {'attr': {'class': 'small-title-text'}}) }}
  402.             {{ form_widget(formprojet.contenu, {'attr': {'class': 'form-control'}}) }}
  403.           </div>
  404.           <div class="form-group mt-3">
  405.             <span style="color:red;">{{ form_errors(formprojet.file) }}</span>
  406.             {{ form_label(formprojet.file,'Joindre les fichiers (optionel)', {'attr': {'class': 'small-title-text'}}) }}
  407.             {{ form_widget(formprojet.file, {'attr': {'class': 'form-control'}}) }}
  408.           </div>
  409.           <div class="my-3">
  410.             <div class="loading">Loading</div>
  411.             <div class="error-message"></div>
  412.             <div class="sent-message">Your message has been sent. Thank you!</div>
  413.           </div>
  414.           <div class="text-center"><button type="submit">Enregistrer</button></div>
  415.           {{ form_end(formprojet) }}
  416.       </div><!-- End Contact Form -->
  418.     </div>
  419.   </div>
  420. </section>
  421. <!-- /contact -->
  423. <!-- gmap -->
  424. <div class="section pt-0 pb-5">
  425.   <!-- Google Map -->
  426.   <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d254777.9977962855!2d11.37036633318602!3d3.8302937854779944!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x108bcf7a309a7977%3A0x7f54bad35e693c51!2zWWFvdW5kw6k!5e0!3m2!1sfr!2scm!4v1648463318096!5m2!1sfr!2scm" height="450" style="width: 100%;" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
  427. </div>
  428. <!-- /gmap -->
  430. {% endblock %}
  432. {% block javascripttemplate %}
  433. $('.menu_item_contact').addClass('active');
  434. {% endblock %}