templates/Theme/Produit/Service/Service/aboutstruct.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 %}
  8. {% block title %}
  9.     {{ parent() }} - Détails du service ..
  10. {% endblock %}
  11. {% block userblog_body %}
  12.   <style>
  13.     {# .content{
  14.         background-color: #268dcf;
  15.     }
  16.   .wrap {
  17.         padding-top: 8px;
  18.         padding-bottom: 8px;
  19.         box-shadow: 0 5px 5px #fff;
  20.     }
  21.     .breadcrumb {
  22.         width: 100%;
  23.         margin: auto;
  24.         display: flex;
  25.     }
  26.     .breadcrumb li {
  27.         padding-right: 0 20px;
  28.     }
  29.     .breadcrumb a {
  30.         text-decoration: none;
  31.         color: aliceblue;
  32.         font-weight: 700;
  33.         transition: 0.5s;
  34.     }
  35.     .breadcrumb li + li {
  36.         padding-left: 0;
  37.     }
  38.     .breadcrumb li + li:before {
  39.         content: '>';
  40.         color: #3b3b3bff;
  41.         margin-right: 20px;
  42.     }
  43.     .breadcrumb li:last-child a,
  44.     .breadcrumb a:hover {
  45.         color: #e2ebf3;
  46.         border-radius: 35px;
  47.         background-color: #82ccdd;
  48.         padding: 5px 10px;
  49.     } #}
  50.     {# End Breadcrumb #}
  51.     {# card #}
  52.     {# :root {
  53.   --swiper-pagination-color: #fff;
  54.   --swiper-pagination-bullet-inactive-color: #fff;
  55.   } #}
  56.   {# CSS FAQ #}
  57.   .faq-section {
  58.   max-width: 800px;
  59.  /* margin: 0px auto;*/
  60.   padding: 0 0 20px 10px;
  61.   font-family: "Segoe UI", sans-serif;
  62.   box-shadow: 1px 1px 3px 3px rgba(0, 0, 0, 0.13); /* Ombre au survol */
  63.  
  64. }
  65. .faq-container {
  66.   /*overflow-y: auto;*/
  67. }
  68. /* Barre de défilement */
  69. /*.faq-container::-webkit-scrollbar {
  70.   width: 10px;  Largeur de la barre de défilement 
  71. } */
  72. .faq-title {
  73.   /* text-align: center; */
  74.   font-size: 2rem;
  75.   margin-bottom: 20px;
  76. }
  77. .faq-item {
  78.   border-bottom: 1px solid #ddd;
  79.   padding: 10px 0;
  80. }
  81. .faq-question {
  82.   width: 100%;
  83.   background: none;
  84.   border: none;
  85.   outline: none;
  86.   text-align: left;
  87.   font-size: 1.1rem;
  88.   font-weight: 600;
  89.   cursor: pointer;
  90.   display: flex;
  91.   justify-content: space-between;
  92.   align-items: center;
  93.   padding: 10px 0;
  94. }
  95. .faq-question .icon {
  96.   transition: transform 0.3s ease;
  97.   font-weight: bold;
  98.   font-size: 1.2rem;
  99. }
  100. .faq-answer {
  101.   max-height: 0;
  102.   overflow: hidden;
  103.   transition: max-height 0.4s ease, padding 0.3s ease;
  104.   padding: 0 0;
  105. }
  106. .faq-answer p {
  107.   margin: 10px 0;
  108. }
  109. .faq-item.active .faq-answer {
  110.   max-height: 200px; /* enough for content */
  111.   padding: 10px 0;
  112. }
  113. .faq-item.active .faq-question .icon {
  114.   transform: rotate(180deg);
  115.   content: "–";
  116. }
  117. {# css indice sections  #}
  118.     .section-head.center.wt-small-separator-outer {
  119.         margin-bottom: 50px;
  120.         text-align: left;
  121.     }
  122.     .section-head {
  123.         position: relative;
  124.     }
  125.     .site-text-primary, .wt-small-separator {
  126.         color: #ea130e;
  127.     }
  128.     .wt-small-separator {
  129.         font-family: "Heebo", sans-serif;
  130.         text-transform: uppercase;
  131.         letter-spacing: 1px;
  132.         padding-right: 40px;
  133.         font-size: 26px;
  134.         line-height: 26px;
  135.         margin-bottom: 15px;
  136.         position: relative;
  137.         display: inline-block;
  138.         font-weight: 700;
  139.     }
  140.     .section-head.center .wt-small-separator div.sep-leaf-left {
  141.         position: relative;
  142.     }
  143.     .section-head.center .wt-small-separator div.sep-leaf-left:before, .section-head.center .wt-small-separator div.sep-leaf-left:after {
  144.         background-color: #ea130e;
  145.     }
  146.     .section-head.center .wt-small-separator div.sep-leaf-left:before {
  147.         right: -20px;
  148.         width: 10px;
  149.     }
  150.     .section-head.center .wt-small-separator div.sep-leaf-left:before, .section-head.center .wt-small-separator div.sep-leaf-left:after {
  151.         position: absolute;
  152.         content: '';
  153.         height: 22px;
  154.         bottom: 0px;
  155.         top: 0px;
  156.         transform: skew(-20deg);
  157.     }
  158.     .section-head.center .wt-small-separator div.sep-leaf-left:after {
  159.         right: -27px;
  160.         width: 4px;
  161.     }
  162.     .section-head.center.wt-small-separator-outer h2 {
  163.         max-width: 630px;
  164.         margin: 0px auto;
  165.     }
  166. </style>
  167. <!-- CTA Section -->
  168. <section class="cta " style="padding: 1rem 0;">
  169.     <div class="container">
  170.         <div class="section-head center wt-small-separator-outer mt-3 text-center" style="margin-bottom: 0px;">
  171.             <div class="wt-small-separator site-text-primary">
  172.                 <div class="sep-leaf-left"></div>
  173.                 <div>À propos</div>
  174.             </div>
  175.         </div>
  176.         <div>Cette section présente notre cabinet comptable, mettant en lumière notre mission, nos valeurs et notre engagement envers nos clients. Avec une équipe d'experts passionnés, nous nous consacrons à fournir des services de qualité, adaptés à chaque situation, pour accompagner nos clients vers le succès financier.</div>
  177.     </div>
  178. </section>
  179. <!-- more event -->
  180. {# <section class="section-sm" style="min-height: 800px;"> #}
  181.   <section class="section-sm">
  182.         <div class="content" style="padding-bottom: 5px;">
  183.             <div class="wrap">
  184.                 <div class="container">
  185.                     <ol class="breadcrumb">
  186.                         <li href="#">
  187.                             <a>Home</a>
  188.                         </li>
  189.                         <li href="#">
  190.                             <a>A propos</a>
  191.                         </li>
  192.                     </ol>
  193.                 </div>
  194.             </div>
  195.         </div>
  196.   </section>
  197.   <section style="margin-top: 20px; margin-bottom: 80px;">
  198.     <div class="container">
  199.       <div class="row">
  200.         <div class="col-md-7">
  201.           <img src="{{ asset('templateSyscofie/images/homme-d-affaires-souriant.jpg') }}" alt="Image Syscofie Consulting">
  202.             <div class="faq active">
  203.               <h3 class="faq-title">Mission</h3>
  204.               <p class="faq-text">
  205.                 Notre engagement se concentre sur la fourniture de services de qualité, respectant l’intégrité et la transparence, afin de soutenir les clients dans l'atteinte de leurs objectifs financiers.
  206.               </p>
  207.               <button class="faq-toggle">
  208.                 <i class="bi bi-chevron-down"></i>
  209.                 <i class="fas fa-times"></i>
  210.               </button>
  211.             </div>
  212.             <div class="faq active">
  213.               <h3 class="faq-title">Vision
  214.               </h3>
  215.               <p class="faq-text">
  216.                 Notre aspiration est de devenir un leader dans le secteur, en innovant et en adaptant nos pratiques pour anticiper les besoins des clients et améliorer leur expérience.
  217.               </p>
  218.               <button class="faq-toggle">
  219.                 <i class="bi bi-chevron-down"></i>
  220.                 <i class="fas fa-times"></i>
  221.               </button>
  222.             </div>
  223.             <div class="faq active">
  224.               <h3 class="faq-title">Valeurs
  225.               </h3>
  226.               <p class="faq-text">
  227.                 Nos valeurs sont l'intégrité, la précision, la transparence, le respect des délais et la responsabilité, garantissant des services fiables et un soutien efficace à tous nos clients.
  228.               </p>
  229.               <button class="faq-toggle">
  230.                 <i class="bi bi-chevron-down"></i>
  231.                 <i class="fas fa-times"></i>
  232.               </button>
  233.             </div>
  234.             <div class="faq active">
  235.               <h3 class="faq-title">Reconnaissance
  236.               </h3>
  237.               <p class="faq-text">
  238.                 La reconnaissance en comptabilité valorise les efforts et les contributions, favorisant un environnement de confiance. Elle renforce les relations professionnelles et stimule l'engagement, essentielle pour une collaboration efficace.
  239.               </p>
  240.               <button class="faq-toggle">
  241.                 <i class="bi bi-chevron-down"></i>
  242.                 <i class="fas fa-times"></i>
  243.               </button>
  244.             </div>
  245.           {#<div style="background: #ffffffff; padding-top: 20px;">
  246.                   <div class="my-div">
  247.                       <section class="testing" style="width: 100%;">
  248.                           <div class="description2 to-expand">
  249.                               <h2>Mission</h2>
  250.                               <p>Notre engagement se concentre sur la fourniture de services de qualité, respectant l’intégrité et la transparence, afin de soutenir les clients dans l'atteinte de leurs objectifs financiers.</p>
  251.                           </div>
  252.                       </section>
  253.                   </div>
  254.               </div>
  255.           <div style="background: #ffffffff; padding-top: 20px;">
  256.                   <div class="my-div">
  257.                       <section class="testing" style="width: 100%;">
  258.                           <div class="description2 to-expand">
  259.                               <h2>vision</h2>
  260.                               <p>Notre aspiration est de devenir un leader dans le secteur, en innovant et en adaptant nos pratiques pour anticiper les besoins des clients et améliorer leur expérience.</p>
  261.                           </div>
  262.                       </section>
  263.                   </div>
  264.               </div>
  265.           <div style="background: #ffffffff; padding-top: 20px;">
  266.                   <div class="my-div">
  267.                       <section class="testing" style="width: 100%;">
  268.                           <div class="description2 to-expand">
  269.                               <h2>Nos valeurs</h2>
  270.                               <p>Nos valeurs sont l'intégrité, la précision, la transparence, le respect des délais et la responsabilité, garantissant des services fiables et un soutien efficace à tous nos clients.</p>
  271.                           </div>
  272.                       </section>
  273.                   </div>
  274.               </div>
  275.           <div style="background: #ffffffff; padding-top: 20px; padding-bottom: 60px;">
  276.                   <div class="my-div">
  277.                       <section class="testing" style="width: 100%;">
  278.                           <div class="description2 to-expand">
  279.                               <h2>Reconnaissance</h2>
  280.                               <p>La reconnaissance en comptabilité valorise les efforts et les contributions, favorisant un environnement de confiance. Elle renforce les relations professionnelles et stimule l'engagement, essentielle pour une collaboration efficace.</p>
  281.                           </div>
  282.                       </section>
  283.                   </div>
  284.               </div> #}
  285.         </div>
  286.         <div class="col-md-5">
  287.           <div class="faq-section p-3" style="box-shadow: none;">
  288.             <h2 class="faq-title">Questions fréquemments posées</h2>
  289.             <div class="faq-container">
  290.               <div class="faq-item">
  291.                 <button class="faq-question">
  292.                   Comment puis-je suivre mes documents comptables ? <span class="icon">+</span>
  293.                 </button>
  294.                 <div class="faq-answer">
  295.                   <p>Nous mettons en place un système de gestion documentaire sécurisé qui vous permet d'accéder à vos documents en ligne à tout moment.</p>
  296.                 </div>
  297.               </div>
  298.               <div class="faq-item">
  299.                 <button class="faq-question">
  300.                   Proposez-vous des conseils fiscaux ? <span class="icon">+</span>
  301.                 </button>
  302.                 <div class="faq-answer">
  303.                   <p>Oui, nous offrons des services de conseil fiscal pour aider nos clients à optimiser leur situation fiscale et à respecter les obligations légales.</p>
  304.                 </div>
  305.               </div>
  306.               <div class="faq-item">
  307.                 <button class="faq-question">
  308.                   Comment se déroule un audit comptable ? <span class="icon">+</span>
  309.                 </button>
  310.                 <div class="faq-answer">
  311.                   <p>Un audit comptable consiste à examiner les états financiers d'une entreprise pour vérifier leur exactitude et leur conformité aux normes comptables.</p>
  312.                 </div>
  313.               </div>
  314.               <div class="faq-item">
  315.                 <button class="faq-question">
  316.                   Quels services propose Syscofie ? <span class="icon">+</span>
  317.                 </button>
  318.                 <div class="faq-answer">
  319.                   <p>Nous proposons une gamme complète de services, y compris la comptabilité générale, la gestion de la paie, le conseil fiscal, et l'audit</p>
  320.                 </div>
  321.               </div>
  322.               <div class="faq-item">
  323.                 <button class="faq-question">
  324.                   Où êtes-vous situés ? <span class="icon">+</span>
  325.                 </button>
  326.                 <div class="faq-answer">
  327.                   <p>Notre bureau principal est situé à Yaoundé plus précisément à carrefour kameni, et nous offrons également des services à distance.</p>
  328.                 </div>
  329.               </div>
  330.               <div class="faq-item">
  331.                 <button class="faq-question">
  332.                   Comment puis-je vous contacter ? <span class="icon">+</span>
  333.                 </button>
  334.                 <div class="faq-answer">
  335.                   <p>Vous pouvez nous contacter par téléphone, par email, ou via notre formulaire de contact sur notre site web.</p>
  336.                 </div>
  337.               </div>
  338.               <div class="faq-item">
  339.                 <button class="faq-question">
  340.                   Quels sont vos tarifs ? <span class="icon">+</span>
  341.                 </button>
  342.                 <div class="faq-answer">
  343.                   <p>Nos tarifs varient en fonction des services demandés. Nous offrons des devis personnalisés après une consultation initiale.</p>
  344.                 </div>
  345.               </div>
  346.               <div class="faq-item">
  347.                 <button class="faq-question">
  348.                   Proposez-vous des services de comptabilité à distance ? <span class="icon">+</span>
  349.                 </button>
  350.                 <div class="faq-answer">
  351.                   <p>Oui, nous offrons des services de comptabilité à distance, ce qui permet à nos clients de bénéficier de nos services où qu'ils soient.</p>
  352.                 </div>
  353.               </div>
  354.               <div class="faq-item">
  355.                 <button class="faq-question">
  356.                   Quels sont vos horaires d'ouverture ? <span class="icon">+</span>
  357.                 </button>
  358.                 <div class="faq-answer">
  359.                   <p>Nous sommes ouverts du lundi à samedi, de 8h à 18h. Des rendez-vous peuvent être pris en dehors de ces heures sur demande.</p>
  360.                 </div>
  361.               </div>
  362.             </div>
  363.           </div>
  364.         </div>
  365.       </div>
  366.     </div>
  367.   </section>
  368.   {# <div class="container">
  369.     {% if infoPlatformSection != null %}
  370.     {% set liste_param = infoPlatformSection.getFirstItems() %}
  371.     <div class="layout--tabs">
  372.         <div class="nav-tabs-wrapper">
  373.           <ul class="nav nav-tabs" id="tabs-title-region-nav-tabs" role="tablist">
  374.             {% for param in liste_param %}
  375.             <li class="nav-item">
  376.               <a class="nav-link {% if loop.first %}active{% endif %}" data-toggle="tab" role="tab" href="#block-simple-text-{{ param.id }}" aria-selected="false" aria-controls="block-simple-text-1" id="block-simple-text-1-tab">{{ param.valeur }}</a>
  377.             </li>
  378.             {% endfor %}
  379.           </ul>
  380.         </div>
  381.         <div class="card">
  382.           <div class="card-body">
  383.             <div class="tab-content">
  384.               
  385.               {% for param in liste_param %}
  386.               <div id="block-simple-text-{{ param.id }}" class="tab-pane {% if loop.first %}active{% endif %} block block-layout-builder block-inline-blockqfcc-blocktype-simple-text" role="tabpanel" aria-labelledby="block-simple-text-1-tab">
  387.                 <h3>{{ param.article.title }}</h3>
  388.                 <p>{{ param.article.content }}</p>
  389.               </div>
  390.               {% endfor %}
  391.             </div>
  392.           </div>
  393.         </div>
  394.     </div>
  395.     {% endif %}
  396.    
  397.   </div> #}
  398. {# </section> #}
  399. <!-- /more event -->
  400. <script>
  401.   const faqItems = document.querySelectorAll(".faq-item");
  402. faqItems.forEach(item => {
  403.   const btn = item.querySelector(".faq-question");
  404.   btn.addEventListener("click", () => {
  405.     // close other items
  406.     faqItems.forEach(i => {
  407.       if (i !== item) {
  408.         i.classList.remove("active");
  409.         i.querySelector(".icon").textContent = "+";
  410.       }
  411.     });
  412.     // toggle current item
  413.     item.classList.toggle("active");
  414.     const icon = item.querySelector(".icon");
  415.     icon.textContent = item.classList.contains("active") ? "–" : "+";
  416.   });
  417. });
  418.   
  419.   /*script section */
  420.   const toggleBtns= document.querySelectorAll('.faq-toggle');
  421.       toggleBtns.forEach(toggleBtn => {
  422.       toggleBtn.addEventListener('click', ()=>{
  423.       toggleBtn.parentNode.classList.toggle('active')
  424.     })
  425.   });
  426. </script>
  427. {% endblock %}
  428. {% block javascripttemplate %}
  429. /**
  430.   * Defines the bootstrap tabs handler.
  431.   *
  432.   * @param {string} element
  433.   *  Element.
  434.   */
  435. var tabsActions = function (element) {
  436.   this.element = $(element);
  437.   this.setup = function () {
  438.     if (this.element.length <= 0) {
  439.       return;
  440.     }
  441.     this.init();
  442.     // Update after resize window.
  443.     var resizeId = null;
  444.     $(window).resize(function () {
  445.       clearTimeout(resizeId);
  446.       resizeId = setTimeout(() => {this.init()}, 50);
  447.     }.bind(this));
  448.   };
  449.   
  450.   this.init = function () {
  451.     // Add class to overflow items.
  452.     this.actionOverflowItems();
  453.     var tabs_overflow = this.element.find('.overflow-tab');
  454.     // Build overflow action tab element.
  455.     if (tabs_overflow.length > 0) {
  456.       if (!this.element.find('.overflow-tab-action').length) {
  457.         var tab_link = $('<a>')
  458.           .addClass('nav-link')
  459.           .attr('href', '#')
  460.           .attr('data-toggle', 'dropdown')
  461.           .text('...')
  462.           .on('click', function (e) {
  463.             e.preventDefault();
  464.             $(this).parents('.nav.nav-tabs').children('.nav-item.overflow-tab').toggle();
  465.           });
  466.         var overflow_tab_action = $('<li>')
  467.           .addClass('nav-item')
  468.           .addClass('overflow-tab-action')
  469.           .append(tab_link);
  470.         // Add hide to overflow tabs when click on any tab.
  471.         this.element.find('.nav-link').on('click', function (e) {
  472.           $(this).parents('.nav.nav-tabs').children('.nav-item.overflow-tab').hide();
  473.         });
  474.         this.element.append(overflow_tab_action);
  475.       }
  476.       
  477.       this.openOverflowDropdown();
  478.     }
  479.     else {
  480.       this.element.find('.overflow-tab-action').remove();
  481.     }
  482. };
  483.   this.openOverflowDropdown = function () {
  484.     var overflow_sum_height = 0;
  485.     var overflow_first_top = 41;
  486.     
  487.     this.element.find('.overflow-tab').hide();
  488.     // Calc top position of overflow tabs.
  489.     this.element.find('.overflow-tab').each(function () {
  490.       var overflow_item_height = $(this).height() - 1;
  491.       if (overflow_sum_height === 0) {
  492.         $(this).css('top', overflow_first_top + 'px');
  493.         overflow_sum_height += overflow_first_top + overflow_item_height;
  494.       }
  495.       else {
  496.         $(this).css('top', overflow_sum_height + 'px');
  497.         overflow_sum_height += overflow_item_height;
  498.       }
  499.     });
  500.   };
  501.   this.actionOverflowItems = function () {
  502.     var tabs_limit = this.element.width() - 100;
  503.     var count = 0;
  504.     
  505.     // Calc tans width and add class to any tab that is overflow.
  506.     for (var i = 0; i < this.element.children().length; i += 1) {
  507.       var item = $(this.element.children()[i]);
  508.       if (item.hasClass('overflow-tab-action')) {
  509.         continue;
  510.       }
  511.       
  512.       count += item.width();
  513.       if (count > tabs_limit) {
  514.         item.addClass('overflow-tab');
  515.       }
  516.       else if (count < tabs_limit) {
  517.         item.removeClass('overflow-tab');
  518.         item.show();
  519.       }
  520.     }
  521.   };
  522. };
  523. var tabsAction = new tabsActions('.layout--tabs .nav-tabs-wrapper .nav-tabs');
  524. tabsAction.setup();
  525. {% endblock %}