{% extends "Theme/Users/User/layoutbase.html.twig" %}
{% block meta %}
{{ parent() }}
<meta name="keywords" content="{{ site }}, "/>
<meta name="author" content="Noel Kenfack"/>
<meta name="description" content="{{ site }}" />
{% endblock %}
{% block title %}
{{ parent() }} - Détails du service ..
{% endblock %}
{% block userblog_body %}
<style>
{# .content{
background-color: #268dcf;
}
.wrap {
padding-top: 8px;
padding-bottom: 8px;
box-shadow: 0 5px 5px #fff;
}
.breadcrumb {
width: 100%;
margin: auto;
display: flex;
}
.breadcrumb li {
padding-right: 0 20px;
}
.breadcrumb a {
text-decoration: none;
color: aliceblue;
font-weight: 700;
transition: 0.5s;
}
.breadcrumb li + li {
padding-left: 0;
}
.breadcrumb li + li:before {
content: '>';
color: #3b3b3bff;
margin-right: 20px;
}
.breadcrumb li:last-child a,
.breadcrumb a:hover {
color: #e2ebf3;
border-radius: 35px;
background-color: #82ccdd;
padding: 5px 10px;
} #}
{# End Breadcrumb #}
{# card #}
{# :root {
--swiper-pagination-color: #fff;
--swiper-pagination-bullet-inactive-color: #fff;
} #}
{# CSS FAQ #}
.faq-section {
max-width: 800px;
/* margin: 0px auto;*/
padding: 0 0 20px 10px;
font-family: "Segoe UI", sans-serif;
box-shadow: 1px 1px 3px 3px rgba(0, 0, 0, 0.13); /* Ombre au survol */
}
.faq-container {
/*overflow-y: auto;*/
}
/* Barre de défilement */
/*.faq-container::-webkit-scrollbar {
width: 10px; Largeur de la barre de défilement
} */
.faq-title {
/* text-align: center; */
font-size: 2rem;
margin-bottom: 20px;
}
.faq-item {
border-bottom: 1px solid #ddd;
padding: 10px 0;
}
.faq-question {
width: 100%;
background: none;
border: none;
outline: none;
text-align: left;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
}
.faq-question .icon {
transition: transform 0.3s ease;
font-weight: bold;
font-size: 1.2rem;
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease, padding 0.3s ease;
padding: 0 0;
}
.faq-answer p {
margin: 10px 0;
}
.faq-item.active .faq-answer {
max-height: 200px; /* enough for content */
padding: 10px 0;
}
.faq-item.active .faq-question .icon {
transform: rotate(180deg);
content: "–";
}
{# css indice sections #}
.section-head.center.wt-small-separator-outer {
margin-bottom: 50px;
text-align: left;
}
.section-head {
position: relative;
}
.site-text-primary, .wt-small-separator {
color: #ea130e;
}
.wt-small-separator {
font-family: "Heebo", sans-serif;
text-transform: uppercase;
letter-spacing: 1px;
padding-right: 40px;
font-size: 26px;
line-height: 26px;
margin-bottom: 15px;
position: relative;
display: inline-block;
font-weight: 700;
}
.section-head.center .wt-small-separator div.sep-leaf-left {
position: relative;
}
.section-head.center .wt-small-separator div.sep-leaf-left:before, .section-head.center .wt-small-separator div.sep-leaf-left:after {
background-color: #ea130e;
}
.section-head.center .wt-small-separator div.sep-leaf-left:before {
right: -20px;
width: 10px;
}
.section-head.center .wt-small-separator div.sep-leaf-left:before, .section-head.center .wt-small-separator div.sep-leaf-left:after {
position: absolute;
content: '';
height: 22px;
bottom: 0px;
top: 0px;
transform: skew(-20deg);
}
.section-head.center .wt-small-separator div.sep-leaf-left:after {
right: -27px;
width: 4px;
}
.section-head.center.wt-small-separator-outer h2 {
max-width: 630px;
margin: 0px auto;
}
</style>
<!-- CTA Section -->
<section class="cta " style="padding: 1rem 0;">
<div class="container">
<div class="section-head center wt-small-separator-outer mt-3 text-center" style="margin-bottom: 0px;">
<div class="wt-small-separator site-text-primary">
<div class="sep-leaf-left"></div>
<div>À propos</div>
</div>
</div>
<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>
</div>
</section>
<!-- more event -->
{# <section class="section-sm" style="min-height: 800px;"> #}
<section class="section-sm">
<div class="content" style="padding-bottom: 5px;">
<div class="wrap">
<div class="container">
<ol class="breadcrumb">
<li href="#">
<a>Home</a>
</li>
<li href="#">
<a>A propos</a>
</li>
</ol>
</div>
</div>
</div>
</section>
<section style="margin-top: 20px; margin-bottom: 80px;">
<div class="container">
<div class="row">
<div class="col-md-7">
<img src="{{ asset('templateSyscofie/images/homme-d-affaires-souriant.jpg') }}" alt="Image Syscofie Consulting">
<div class="faq active">
<h3 class="faq-title">Mission</h3>
<p class="faq-text">
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>
<button class="faq-toggle">
<i class="bi bi-chevron-down"></i>
<i class="fas fa-times"></i>
</button>
</div>
<div class="faq active">
<h3 class="faq-title">Vision
</h3>
<p class="faq-text">
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>
<button class="faq-toggle">
<i class="bi bi-chevron-down"></i>
<i class="fas fa-times"></i>
</button>
</div>
<div class="faq active">
<h3 class="faq-title">Valeurs
</h3>
<p class="faq-text">
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>
<button class="faq-toggle">
<i class="bi bi-chevron-down"></i>
<i class="fas fa-times"></i>
</button>
</div>
<div class="faq active">
<h3 class="faq-title">Reconnaissance
</h3>
<p class="faq-text">
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>
<button class="faq-toggle">
<i class="bi bi-chevron-down"></i>
<i class="fas fa-times"></i>
</button>
</div>
{#<div style="background: #ffffffff; padding-top: 20px;">
<div class="my-div">
<section class="testing" style="width: 100%;">
<div class="description2 to-expand">
<h2>Mission</h2>
<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>
</div>
</section>
</div>
</div>
<div style="background: #ffffffff; padding-top: 20px;">
<div class="my-div">
<section class="testing" style="width: 100%;">
<div class="description2 to-expand">
<h2>vision</h2>
<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>
</div>
</section>
</div>
</div>
<div style="background: #ffffffff; padding-top: 20px;">
<div class="my-div">
<section class="testing" style="width: 100%;">
<div class="description2 to-expand">
<h2>Nos valeurs</h2>
<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>
</div>
</section>
</div>
</div>
<div style="background: #ffffffff; padding-top: 20px; padding-bottom: 60px;">
<div class="my-div">
<section class="testing" style="width: 100%;">
<div class="description2 to-expand">
<h2>Reconnaissance</h2>
<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>
</div>
</section>
</div>
</div> #}
</div>
<div class="col-md-5">
<div class="faq-section p-3" style="box-shadow: none;">
<h2 class="faq-title">Questions fréquemments posées</h2>
<div class="faq-container">
<div class="faq-item">
<button class="faq-question">
Comment puis-je suivre mes documents comptables ? <span class="icon">+</span>
</button>
<div class="faq-answer">
<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>
</div>
</div>
<div class="faq-item">
<button class="faq-question">
Proposez-vous des conseils fiscaux ? <span class="icon">+</span>
</button>
<div class="faq-answer">
<p>Oui, nous offrons des services de conseil fiscal pour aider nos clients à optimiser leur situation fiscale et à respecter les obligations légales.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question">
Comment se déroule un audit comptable ? <span class="icon">+</span>
</button>
<div class="faq-answer">
<p>Un audit comptable consiste à examiner les états financiers d'une entreprise pour vérifier leur exactitude et leur conformité aux normes comptables.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question">
Quels services propose Syscofie ? <span class="icon">+</span>
</button>
<div class="faq-answer">
<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>
</div>
</div>
<div class="faq-item">
<button class="faq-question">
Où êtes-vous situés ? <span class="icon">+</span>
</button>
<div class="faq-answer">
<p>Notre bureau principal est situé à Yaoundé plus précisément à carrefour kameni, et nous offrons également des services à distance.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question">
Comment puis-je vous contacter ? <span class="icon">+</span>
</button>
<div class="faq-answer">
<p>Vous pouvez nous contacter par téléphone, par email, ou via notre formulaire de contact sur notre site web.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question">
Quels sont vos tarifs ? <span class="icon">+</span>
</button>
<div class="faq-answer">
<p>Nos tarifs varient en fonction des services demandés. Nous offrons des devis personnalisés après une consultation initiale.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question">
Proposez-vous des services de comptabilité à distance ? <span class="icon">+</span>
</button>
<div class="faq-answer">
<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>
</div>
</div>
<div class="faq-item">
<button class="faq-question">
Quels sont vos horaires d'ouverture ? <span class="icon">+</span>
</button>
<div class="faq-answer">
<p>Nous sommes ouverts du lundi à samedi, de 8h à 18h. Des rendez-vous peuvent être pris en dehors de ces heures sur demande.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{# <div class="container">
{% if infoPlatformSection != null %}
{% set liste_param = infoPlatformSection.getFirstItems() %}
<div class="layout--tabs">
<div class="nav-tabs-wrapper">
<ul class="nav nav-tabs" id="tabs-title-region-nav-tabs" role="tablist">
{% for param in liste_param %}
<li class="nav-item">
<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>
</li>
{% endfor %}
</ul>
</div>
<div class="card">
<div class="card-body">
<div class="tab-content">
{% for param in liste_param %}
<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">
<h3>{{ param.article.title }}</h3>
<p>{{ param.article.content }}</p>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
{% endif %}
</div> #}
{# </section> #}
<!-- /more event -->
<script>
const faqItems = document.querySelectorAll(".faq-item");
faqItems.forEach(item => {
const btn = item.querySelector(".faq-question");
btn.addEventListener("click", () => {
// close other items
faqItems.forEach(i => {
if (i !== item) {
i.classList.remove("active");
i.querySelector(".icon").textContent = "+";
}
});
// toggle current item
item.classList.toggle("active");
const icon = item.querySelector(".icon");
icon.textContent = item.classList.contains("active") ? "–" : "+";
});
});
/*script section */
const toggleBtns= document.querySelectorAll('.faq-toggle');
toggleBtns.forEach(toggleBtn => {
toggleBtn.addEventListener('click', ()=>{
toggleBtn.parentNode.classList.toggle('active')
})
});
</script>
{% endblock %}
{% block javascripttemplate %}
/**
* Defines the bootstrap tabs handler.
*
* @param {string} element
* Element.
*/
var tabsActions = function (element) {
this.element = $(element);
this.setup = function () {
if (this.element.length <= 0) {
return;
}
this.init();
// Update after resize window.
var resizeId = null;
$(window).resize(function () {
clearTimeout(resizeId);
resizeId = setTimeout(() => {this.init()}, 50);
}.bind(this));
};
this.init = function () {
// Add class to overflow items.
this.actionOverflowItems();
var tabs_overflow = this.element.find('.overflow-tab');
// Build overflow action tab element.
if (tabs_overflow.length > 0) {
if (!this.element.find('.overflow-tab-action').length) {
var tab_link = $('<a>')
.addClass('nav-link')
.attr('href', '#')
.attr('data-toggle', 'dropdown')
.text('...')
.on('click', function (e) {
e.preventDefault();
$(this).parents('.nav.nav-tabs').children('.nav-item.overflow-tab').toggle();
});
var overflow_tab_action = $('<li>')
.addClass('nav-item')
.addClass('overflow-tab-action')
.append(tab_link);
// Add hide to overflow tabs when click on any tab.
this.element.find('.nav-link').on('click', function (e) {
$(this).parents('.nav.nav-tabs').children('.nav-item.overflow-tab').hide();
});
this.element.append(overflow_tab_action);
}
this.openOverflowDropdown();
}
else {
this.element.find('.overflow-tab-action').remove();
}
};
this.openOverflowDropdown = function () {
var overflow_sum_height = 0;
var overflow_first_top = 41;
this.element.find('.overflow-tab').hide();
// Calc top position of overflow tabs.
this.element.find('.overflow-tab').each(function () {
var overflow_item_height = $(this).height() - 1;
if (overflow_sum_height === 0) {
$(this).css('top', overflow_first_top + 'px');
overflow_sum_height += overflow_first_top + overflow_item_height;
}
else {
$(this).css('top', overflow_sum_height + 'px');
overflow_sum_height += overflow_item_height;
}
});
};
this.actionOverflowItems = function () {
var tabs_limit = this.element.width() - 100;
var count = 0;
// Calc tans width and add class to any tab that is overflow.
for (var i = 0; i < this.element.children().length; i += 1) {
var item = $(this.element.children()[i]);
if (item.hasClass('overflow-tab-action')) {
continue;
}
count += item.width();
if (count > tabs_limit) {
item.addClass('overflow-tab');
}
else if (count < tabs_limit) {
item.removeClass('overflow-tab');
item.show();
}
}
};
};
var tabsAction = new tabsActions('.layout--tabs .nav-tabs-wrapper .nav-tabs');
tabsAction.setup();
{% endblock %}