templates/Theme/Produit/Service/Service/departement.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() }} - Détails du service ..
  11. {% endblock %}
  13. {% block userblog_body %}
  14. <style>
  15.     /* Table List */
  16.     ul {
  17.         list-style-type: none;
  18.         padding: 0;
  19.     }
  20.     .list-check li {
  21.         display: flex;
  22.         align-items: center;
  23.         margin: 15px 0;
  24.         padding: 10px;
  25.         border-radius: 5px;
  26.         background-color: #fff; 
  27.         box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
  28.         transition: transform 0.2s; /* Effet de transition */
  29.     }
  30.     li:hover {
  31.         transform: scale(1.02); /* Agrandissement au survol */
  32.     }
  33.     .icon {
  34.         font-size: 28px; 
  35.         color: blue;
  36.         margin-right: 15px;
  37.     }
  38.     .text {
  39.         font-size: 18px;
  40.     }
  41.     .hero__v6 {
  42.         display: flex; /* Utiliser Flexbox pour la mise en page */
  43.         align-items: center; /* Aligne les éléments au centre */
  44.     }
  45.     .img-departement {
  46.         width: auto;  /* Largeur automatique pour garder le ratio */
  47.         height: 100%; /* Prend la hauteur du conteneur */
  48.         object-fit: cover; /* Remplit l'espace de manière appropriée */
  49.     }
  51.     .stat-item i {
  52.       font-size: 100px; /* Ajuste la taille selon tes besoins */
  53.       color: #fff; /* Change la couleur si nécessaire */
  54.     }
  56.   /*  btn */
  57.   .btn-3 {
  58.   color: #fff;
  59.   border: 1px solid #fff;
  60.   background-color: transparent;
  61.   font-weight: 500;
  62.   border-radius: 30px;
  63.   padding: 0px 15px 5px 15px;
  64. }
  65. .btn-3::after {
  66.   content: "➤";
  67.   margin-left: 10px;
  68.   font-size: 22px;
  69.   position: relative;
  70.   top: 3px;
  71. }
  72. .btn-3:hover {
  73.   background-color: #77cd0dff;
  74.   transform: translateY(-2px);
  75.   color: white;
  76. }
  81. /* btn-call */
  83. .btn-call {
  84.     background: #38a3fd;
  85.     border: 2px solid #38a3fd;
  86.     border-radius: 50%;
  87.     box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3);
  88.     cursor: pointer;
  89.     height: 60px;
  90.     width: 60px;
  91.     text-align: center;
  92.     position: fixed;
  93.     right: 50px;
  94.     bottom: 50px;
  95.     z-index: 999;
  96.     transition: .3s;
  97.     -webkit-animation: hoverWave linear 1s infinite;
  98.     animation: hoverWave linear 1s infinite;
  99.     display: flex;
  100.     justify-content: center;
  101.     align-items: center;
  102.         text-decoration: none;
  103. }
  105. .btn-call__ico {
  106.     display: flex;
  107.     justify-content: center;
  108.     align-items: center;
  109.     animation: 1200ms ease 0s normal none 1 running shake;
  110.     animation-iteration-count: infinite;
  111.     -webkit-animation: 1200ms ease 0s normal none 1 running shake;
  112.     -webkit-animation-iteration-count: infinite;
  113.     color: white;
  114.     font-size: 30px;
  115.     padding-top: 5px;
  116.     transition: .3s all;
  117. }
  119. .btn-call:hover {
  120.     background-color: #fff;
  121. }
  123. .btn-call:hover .btn-call__ico {
  124.     color: #38a3fd;
  125. }
  127. @-webkit-keyframes hoverWave {
  128.     0% {
  129.         box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3), 0 0 0 0 rgba(56, 163, 253, 0.2), 0 0 0 0 rgba(56, 163, 253, 0.2)
  130.     }
  132.     40% {
  133.         box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3), 0 0 0 15px rgba(56, 163, 253, 0.2), 0 0 0 0 rgba(56, 163, 253, 0.2)
  134.     }
  136.     80% {
  137.         box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3), 0 0 0 30px rgba(56, 163, 253, 0), 0 0 0 26.7px rgba(56, 163, 253, 0.067)
  138.     }
  140.     100% {
  141.         box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3), 0 0 0 30px rgba(56, 163, 253, 0), 0 0 0 40px rgba(56, 163, 253, 0.0)
  142.     }
  143. }
  145. @keyframes hoverWave {
  146.     0% {
  147.         box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3), 0 0 0 0 rgba(56, 163, 253, 0.2), 0 0 0 0 rgba(56, 163, 253, 0.2)
  148.     }
  150.     40% {
  151.         box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3), 0 0 0 15px rgba(56, 163, 253, 0.2), 0 0 0 0 rgba(56, 163, 253, 0.2)
  152.     }
  154.     80% {
  155.         box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3), 0 0 0 30px rgba(56, 163, 253, 0), 0 0 0 26.7px rgba(56, 163, 253, 0.067)
  156.     }
  158.     100% {
  159.         box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3), 0 0 0 30px rgba(56, 163, 253, 0), 0 0 0 40px rgba(56, 163, 253, 0.0)
  160.     }
  161. }
  163. /* animations icon */
  165. @keyframes shake {
  166.     0% {
  167.         transform: rotateZ(0deg);
  168.         -ms-transform: rotateZ(0deg);
  169.         -webkit-transform: rotateZ(0deg);
  170.     }
  172.     10% {
  173.         transform: rotateZ(-30deg);
  174.         -ms-transform: rotateZ(-30deg);
  175.         -webkit-transform: rotateZ(-30deg);
  176.     }
  178.     20% {
  179.         transform: rotateZ(15deg);
  180.         -ms-transform: rotateZ(15deg);
  181.         -webkit-transform: rotateZ(15deg);
  182.     }
  184.     30% {
  185.         transform: rotateZ(-10deg);
  186.         -ms-transform: rotateZ(-10deg);
  187.         -webkit-transform: rotateZ(-10deg);
  188.     }
  190.     40% {
  191.         transform: rotateZ(7.5deg);
  192.         -ms-transform: rotateZ(7.5deg);
  193.         -webkit-transform: rotateZ(7.5deg);
  194.     }
  196.     50% {
  197.         transform: rotateZ(-6deg);
  198.         -ms-transform: rotateZ(-6deg);
  199.         -webkit-transform: rotateZ(-6deg);
  200.     }
  202.     60% {
  203.         transform: rotateZ(5deg);
  204.         -ms-transform: rotateZ(5deg);
  205.         -webkit-transform: rotateZ(5deg);
  206.     }
  208.     70% {
  209.         transform: rotateZ(-4.28571deg);
  210.         -ms-transform: rotateZ(-4.28571deg);
  211.         -webkit-transform: rotateZ(-4.28571deg);
  212.     }
  214.     80% {
  215.         transform: rotateZ(3.75deg);
  216.         -ms-transform: rotateZ(3.75deg);
  217.         -webkit-transform: rotateZ(3.75deg);
  218.     }
  220.     90% {
  221.         transform: rotateZ(-3.33333deg);
  222.         -ms-transform: rotateZ(-3.33333deg);
  223.         -webkit-transform: rotateZ(-3.33333deg);
  224.     }
  226.     100% {
  227.         transform: rotateZ(0deg);
  228.         -ms-transform: rotateZ(0deg);
  229.         -webkit-transform: rotateZ(0deg);
  230.     }
  231. }
  233. @-webkit-keyframes shake {
  234.     0% {
  235.         transform: rotateZ(0deg);
  236.         -ms-transform: rotateZ(0deg);
  237.         -webkit-transform: rotateZ(0deg);
  238.     }
  240.     10% {
  241.         transform: rotateZ(-30deg);
  242.         -ms-transform: rotateZ(-30deg);
  243.         -webkit-transform: rotateZ(-30deg);
  244.     }
  246.     20% {
  247.         transform: rotateZ(15deg);
  248.         -ms-transform: rotateZ(15deg);
  249.         -webkit-transform: rotateZ(15deg);
  250.     }
  252.     30% {
  253.         transform: rotateZ(-10deg);
  254.         -ms-transform: rotateZ(-10deg);
  255.         -webkit-transform: rotateZ(-10deg);
  256.     }
  258.     40% {
  259.         transform: rotateZ(7.5deg);
  260.         -ms-transform: rotateZ(7.5deg);
  261.         -webkit-transform: rotateZ(7.5deg);
  262.     }
  264.     50% {
  265.         transform: rotateZ(-6deg);
  266.         -ms-transform: rotateZ(-6deg);
  267.         -webkit-transform: rotateZ(-6deg);
  268.     }
  270.     60% {
  271.         transform: rotateZ(5deg);
  272.         -ms-transform: rotateZ(5deg);
  273.         -webkit-transform: rotateZ(5deg);
  274.     }
  276.     70% {
  277.         transform: rotateZ(-4.28571deg);
  278.         -ms-transform: rotateZ(-4.28571deg);
  279.         -webkit-transform: rotateZ(-4.28571deg);
  280.     }
  282.     80% {
  283.         transform: rotateZ(3.75deg);
  284.         -ms-transform: rotateZ(3.75deg);
  285.         -webkit-transform: rotateZ(3.75deg);
  286.     }
  288.     90% {
  289.         transform: rotateZ(-3.33333deg);
  290.         -ms-transform: rotateZ(-3.33333deg);
  291.         -webkit-transform: rotateZ(-3.33333deg);
  292.     }
  294.     100% {
  295.         transform: rotateZ(0deg);
  296.         -ms-transform: rotateZ(0deg);
  297.         -webkit-transform: rotateZ(0deg);
  298.     }
  299. }
  301. /* Services css */
  302. /* reset default */
  303. *,
  304. *::before,
  305. *::after {
  306.   margin: 0;
  307.   padding: 0;
  308.   box-sizing: border-box;
  309. }
  311. :root {
  312.   --white: #efe;
  313.   --blackish: #23252f;
  314.   --black-light: #3d3b36;
  315.   --black-dark: #1c1c1c;
  316.   --beige-sand-light: #f9eedc;
  317.   --beige-sand-dark: #d6bb9a;
  318.   --pink-light: #fcdcdd;
  319.   --neon-green: #64ed85;
  320.   --transparent: rgba(255, 255, 255, 0);
  321.   --transition-duration: 0.5s;
  322.   --blue: #0ffbf9;
  323.   --red: #cc0f39;
  324.   --twitter: #1c96e9;
  325.   --font-size-p: clamp(1rem, 1.2vw, 1.3rem);
  326.   --font-size-h2: clamp(1.5rem, (2vw + 1rem), 2rem);
  327. }
  329. /* *********************** */
  331. {# .flex-center {
  332.   display: flex;
  333.   justify-content: center;
  334.   align-items: center;
  335.   flex-wrap: wrap;
  336. } #}
  338. .carte {
  339.   /*width: clamp(230px, 45%, 920px);*/
  340.   /* border: solid rgba(0, 0, 0, 0.2); */
  341.   max-height: 1000px;
  342.   margin: 1rem 0.8rem;
  343.   flex-grow: 0.5;
  344.   /*padding: 1rem;
  345.   border-radius: 5px;
  346.   box-shadow: 0 5px 9px rgba(0, 0, 0, 0.2);*/
  347.   transition: 0.3s;
  348. }
  350. .carte:hover {
  351.   /*box-shadow: 0 5px 9px rgba(0, 0, 0, 0.4);*/
  352.   transition: 0.3s;
  353.   /* overflow: hidden; */
  354. }
  356. .img {
  357.   overflow: hidden;
  358.   /* border: solid red; */
  359.   display: block;
  360.   margin-bottom: 0.6rem;
  361.   border-radius: 4px 4px 4px 4px;
  362.   position: relative;
  363. }
  365. .img::before {
  366.   content: "";
  367.   position: absolute;
  368.   width: 100%;
  369.   height: 100%;
  370.   background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.3));
  371.   left: 0;
  372.   top: 0;
  373.   z-index: 2;
  374. }
  375. .carte:hover .img::before {
  376.   /* backdrop-filter: blur(1px); */
  377.   background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.1));
  378. }
  380. img {
  381.    /*display: inline-block;*/
  382.   /*display: block;*/
  383.    width: 100%; /* Ajuste la largeur selon tes besoins */
  384.       height: 250px; /* Ajuste la hauteur selon tes besoins */
  385.       object-fit: cover;
  386.   transition: transform 0.3s;
  387.   transform: scale(1);
  388.   filter: saturate(70%);
  389. }
  391. .carte:hover img {
  392.   transform: scale(1.1);
  393.   /* overflow: hidden; */
  394.   transition: transform 0.3s;
  395.   filter: saturate(100%);
  396. }
  398. .text-box {
  399.   overflow: hidden;
  400. }
  402. .description {
  403.   font-size: var(--font-size-p);
  404.   color: var(--black-light);
  405. }
  407. .titre {
  408.   font-size: 20px;
  409.   font-weight: bold;
  410.   color: #268dcf;
  411.   margin-bottom: 1.2rem;
  412.   position: relative;
  413. }
  415. .titre::before {
  416.   content: "";
  417.   position: absolute;
  418.   width: 30%;
  419.   height: 2px;
  420.   /* width: 100%;
  421.   height: 100%; */
  422.   /* background: red; */
  423.   border-bottom: 2.2px solid var(--beige-sand-dark);
  424.   transition: var(--transition-duration);
  425.   top: 100%;
  426.   left: -100%;
  427. }
  429. .carte:hover .titre::before {
  430.   transition: var(--transition-duration);
  431.   animation: move-to-right 1s forwards;
  432. }
  434. @keyframes move-to-right {
  435.   0% {
  436.     left: -50%;
  437.   }
  438.   40% {
  439.     left: 50%;
  440.   }
  441.   70% {
  442.     left: -20%;
  443.   }
  444.   100% {
  445.     left: 0;
  446.   }
  447. }
  449. a {
  450.   text-decoration: none;
  451.   /* color: var(--black-dark); */
  452.   font-weight: bold;
  453.   color: #007bffff;
  454. }
  456. {# css indice sections  #}
  457.     .section-head.center.wt-small-separator-outer {
  458.         margin-bottom: 50px;
  459.         text-align: center;
  460.     }
  461.     .section-head {
  462.         position: relative;
  463.     }
  464.     .site-text-primary, .wt-small-separator {
  465.         color: #ea130e;
  466.     }
  467.     .wt-small-separator {
  468.         font-family: "Heebo", sans-serif;
  469.         text-transform: uppercase;
  470.         letter-spacing: 1px;
  471.         padding-right: 40px;
  472.         font-size: 26px;
  473.         line-height: 26px;
  474.         margin-bottom: 15px;
  475.         position: relative;
  476.         display: inline-block;
  477.         font-weight: 700;
  478.     }
  479.     .section-head.center .wt-small-separator div.sep-leaf-left {
  480.         position: relative;
  481.     }
  482.     .section-head.center .wt-small-separator div.sep-leaf-left:before, .section-head.center .wt-small-separator div.sep-leaf-left:after {
  483.         background-color: #ea130e;
  484.     }
  485.     .section-head.center .wt-small-separator div.sep-leaf-left:before {
  486.         right: -20px;
  487.         width: 10px;
  488.     }
  489.     .section-head.center .wt-small-separator div.sep-leaf-left:before, .section-head.center .wt-small-separator div.sep-leaf-left:after {
  490.         position: absolute;
  491.         content: '';
  492.         height: 22px;
  493.         bottom: 0px;
  494.         top: 0px;
  495.         transform: skew(-20deg);
  496.     }
  497.     .section-head.center .wt-small-separator div.sep-leaf-left:after {
  498.         right: -27px;
  499.         width: 4px;
  500.     }
  501.     .section-head.center.wt-small-separator-outer h2 {
  502.         max-width: 630px;
  503.         margin: 0px auto;
  504.     }
  506. </style>
  508. <main>
  509.   <!-- ======= Hero =======-->
  510.   <div class="content" style="">
  511.       <div class="wrap">
  512.         <div class="container">
  513.           <ol class="breadcrumb">
  514.             <li href="#">
  515.               <a>Home</a>
  516.             </li>
  517.             <li href="#">
  518.               <a>Départements</a>
  519.             </li>
  520.             <li href="#">
  521.               <a>Département</a>
  522.             </li>
  523.           </ol>
  524.         </div>
  525.       </div>
  526.     </div>
  527.   <section class="hero__v6 section" id="home" style="margin-top: -60px;">
  528.     <div class="container">
  529.       <div class="row">
  530.         <div class="col-lg-6 mb-4 mb-lg-0">
  531.           <div class="row">
  532.             <div class="col-lg-11">
  533.               <span class="hero-subtitle text-uppercase" data-aos-delay="0">Solutions Syscofie Innovantes</span>
  534.               <h1 class="hero-title mb-3">{{ depart.name }}</h1>
  535.               <p class="hero-description">{{ depart.description }}</p>
  536.               <h1 class="hero-title mb-1">Objectifs</h1>
  537.               <ul class="list-check">
  538.                 {% for object in depart.objectifs|slice(0,4) %}
  539.                   <li><i class="bi bi-check-circle icon"></i><span class="text">{{ object["nombase"] }}</span></li>
  540.                 {% else %}
  541.                   <li><i class="bi bi-check-circle icon"></i><span class="text">Assurer une réactivité dans les services proposés</span></li>
  542.                   <li><i class="bi bi-check-circle icon"></i><span class="text">Garantir la conformité avec les obligations fiscales</span></li>
  543.                   <li><i class="bi bi-check-circle icon"></i><span class="text">Faciliter une meilleure prise de décision pour les clients</span></li>
  544.                 {% endfor %}
  546.               </ul>
  547.             </div>
  548.           </div>
  549.         </div>
  550.         <div class="col-lg-6">
  551.           <div class="hero-img" style="height: 100%;">
  552.             <img class="img-departement img-fluid rounded-4" src="{{ vich_uploader_asset(depart) }}" alt="Hero Image" style="height: 570px; width:100%;">
  553.           </div>
  554.         </div>
  555.       </div>
  556.     </div>
  557.   </section>
  558.     <!-- End Hero-->
  559.     
  560.   <!-- ======= How it works =======-->
  561.   <section class="section howitworks__v1" id="how-it-works">
  562.     <div class="container">
  563.       {# 
  564.         <div class="row">
  565.           <div class="col-md-6 text-center mx-auto"><span class="subtitle text-uppercase mb-3" data-aos="fade-up" data-aos-delay="0">Equipes</span>
  566.             <h2 data-aos="fade-up" data-aos-delay="100">Membres de Collaborations</h2>
  567.             <p data-aos="fade-up" data-aos-delay="200">Nous vous accompagnons à chaque étape, offrant conseils et soutien pour atteindre vos objectifs.</p>
  568.           </div>
  569.         </div> 
  570.       #}
  572.       <div class="section-head center wt-small-separator-outer">
  573.         <div class="wt-small-separator site-text-primary">
  574.           <div class="sep-leaf-left"></div>
  575.           <div>Equipes</div>
  576.         </div>
  577.         <h1 class="wt-title">Notre Equipe de Collaborations</h1>
  578.         {# <h2 class="mb-3" data-aos="fade-up" data-aos-delay="100">Notre Equipe de Collaborations</h2> #}
  579.         <p>Nous vous accompagnons à chaque étape, offrant conseils et soutien pour atteindre vos objectifs.</p>
  580.       </div>
  582.     </div>
  583.     
  584.   </section>
  585.     <!-- End How it works-->
  586.     
  587.     <!-- ======= Stats =======-->
  588.   <section class="stats__v3 section" style="background-color: #268dcf; margin-top: -40px;">
  589.     <div class="container">
  590.       <div class="row">
  591.         <div class="col-lg-12">
  592.           <div class="d-flex flex-wrap content rounded-4">
  593.             <div class="rounded-borders">
  594.               <div class="rounded-border-1"></div>
  595.               <div class="rounded-border-2"></div>
  596.               <div class="rounded-border-3"></div>
  597.             </div>
  598.             <div class="col-lg-4 col-md-12 col-sm-12 mb-4 mb-md-0 text-center">
  599.               <div class="stat-item">
  600.                 <span class="fw-bold"><i class="bi bi-person-fill"></i></span>
  601.                 <p class="mb-0">Responsable du Département</p>
  602.               </div>
  603.             </div>
  604.             <div class="col-lg-4 col-md-12 col-sm-12 mb-4 mb-md-0 text-center">
  605.               <div class="stat-item">
  606.                 <span class="fw-bold"><i class="bi bi-person-fill"></i></span>
  607.                 <p class="mb-0">Assistant comptable</p>
  608.               </div>
  609.             </div>
  610.             <div class="col-lg-4 col-md-12 col-sm-12 mb-4 mb-md-0 text-center" >
  611.               <div class="stat-item">
  612.                 <span class="fw-bold"><i class="bi bi-person-fill"></i></span>
  613.                 <p class="mb-0">Contrôleur Qualité Comptable</p>
  614.               </div>
  615.             </div>
  616.           </div>
  617.         </div>
  618.       </div>
  619.       <div class="text-center bd-highlight mb-3">
  620.             <button type="button" class="framed-buttons btn-3 text-center">Je souhaite échanger avec un expert</button>
  621.         </div>
  622.     </div>
  623.   </section>
  624.     <!-- End Stats-->
  625.     
  626.     <!-- ======= Start Services =======-->
  627.   <section class="section services__v3" id="services" style="margin-bottom: 40px;">
  628.     <div class="container">
  629.       {# <div class="row mt-5">
  630.         <div class="col-md-8 mx-auto text-center">
  631.           <span class="subtitle text-uppercase mb-3" data-aos="fade-up" data-aos-delay="0">Nos Services</span>
  632.           <h2 class="mb-3" data-aos="fade-up" data-aos-delay="100">Découvrez nos services comptables sur mesure, adaptés à vos besoins financiers et à votre croissance.</h2>
  633.         </div>
  634.       </div> #}
  635.       <div class="section-head center wt-small-separator-outer mt-5">
  636.         <div class="wt-small-separator site-text-primary">
  637.           <div class="sep-leaf-left"></div>
  638.           <div>Nos Services</div>
  639.         </div>
  640.         <h1 class="wt-title">Découvrez nos services comptables sur mesure, adaptés à vos besoins financiers et à votre croissance.</h1>
  641.         {# <h2 class="mb-3" data-aos="fade-up" data-aos-delay="100">Découvrez nos services comptables sur mesure, adaptés à vos besoins financiers et à votre croissance.</h2> #}
  642.         {# <p data-aos="fade-up" data-aos-delay="200">Nous vous accompagnons à chaque étape, offrant conseils et soutien pour atteindre vos objectifs.</p> #}
  643.       </div>
  644.       <div class="row" style="margin-top: -40px;">
  645.         {% for scat in depart.getSousService()|slice(0,3) %}
  646.         <div class="col-lg-4 col-md-6 col-sm-12">
  647.           <div class="carte">
  648.             <a href="{{ path('produit_service_service', {'id': scat.id}) }}">
  649.               <div class="img">
  650.                 <img src="{{ asset('templateSyscofie/images/rapport-fin.jpg') }}" alt="Nataliya Vaitkevich">
  651.               </div>
  652.               <div class="text-box ">
  653.                 <h2 class="titre">{{ scat.name }}</h2>
  654.                   En savoir plus
  655.               </div>
  656.             </a>
  657.           </div>
  658.         </div>
  659.         {% else %}
  660.         <div class="col-lg-4 col-md-6 col-sm-12">
  661.           <div class="carte">
  662.             <a href="">
  663.               <div class="img">
  664.                 <img src="{{ asset('templateSyscofie/images/scene-bureau-ordinateur-portable.jpg') }}" alt="Nataliya Vaitkevich">
  665.               </div>
  666.               <div class="text-box ">
  667.                 <h1 class="titre">Préparation des déclarations fiscales et sociales</h1>
  668.                   En savoir plus
  669.               </div>
  670.             </a>
  671.           </div>
  672.         </div>
  673.         <div class="col-lg-4 col-md-6 col-sm-12">
  674.           <div class="carte">
  675.             <a href="">
  676.               <div class="img">
  677.                 <img src="{{ asset('templateSyscofie/images/hero-img-2-min.jpg') }}" alt="Nataliya Vaitkevich">
  678.               </div>
  679.               <div class="text-box ">
  680.                 <h1 class="titre">Collecte et classement des pièces comptables</h1>
  681.                   En savoir plus
  682.               </div>
  683.             </a>
  684.           </div>
  685.         </div>
  686.         <div class="col-lg-4 col-md-6 col-sm-12">
  687.           <div class="carte">
  688.             <a href="">
  689.               <div class="img">
  690.                 <img src="{{ asset('templateSyscofie/images/tablette.jpg') }}" alt="Nataliya Vaitkevich">
  691.               </div>
  692.               <div class="text-box ">
  693.                 <h1 class="titre">Suivi des comptes tiers</h1>
  694.                 En savoir plus
  695.               </div>
  696.             </a>
  697.           </div>
  698.         </div>
  699.         <div class="col-lg-4 col-md-6 col-sm-12">
  700.           <div class="carte">
  701.             <a href="">
  702.               <div class="img">
  703.                 <img src="{{ asset('templateSyscofie/images/hero-bg-1-min.jpg') }}" alt="Nataliya Vaitkevich">
  704.               </div>
  705.               <div class="text-box ">
  706.                 <h1 class="titre">Revision periodique des comptes et ajustements</h1>
  707.                   En savoir plus
  708.               </div>
  709.             </a>
  710.           </div>
  711.         </div>
  712.         <div class="col-lg-4 col-md-6 col-sm-12">
  713.           <div class="carte">
  714.             <a href="">
  715.               <div class="img">
  716.                 <img src="{{ asset('templateSyscofie/images/presentation.jpg') }}" alt="Nataliya Vaitkevich">
  717.               </div>
  718.               <div class="text-box ">
  719.                 <h1 class="titre">Communication régulière avec les clients pour les alertes et reporting</h1>
  720.                 {# <p class="description">
  721.                   Delicate petals unfurl, carrying secrets on the gentle
  722.                   breeze. Discover the ephemeral beauty of the fleeting
  723.                   moment.
  724.                 </p> #}
  725.                 En savoir plus
  726.               </div>
  727.             </a>
  728.           </div>
  729.         </div>
  730.         {% endfor %}
  731.       </div>
  732.     </div>
  733.   </section>
  734. </main>
  735. <a href="tel: 8 888 888 88 88" rel="nofollow" class="btn-call">
  736.     <div class="btn-call__ico">
  737.         <i class="bi bi-telephone-fill"></i>
  738.     </div>
  739. </a>
  743. <div class="text-center" style="margin-top: 10px; margin-bottom: 60px;">
  744.     {# {% if nombrepage > 0 %}
  746.         {% if page > 1 and page <= nombrepage %}
  747.             {% set pagepre = page - 1 %}
  748.         {% else %}
  749.             {% set pagepre = nombrepage %}
  750.         {% endif %}
  752.         {% if page < nombrepage %}
  753.             {% set pagesuiv = page + 1 %}
  754.         {% else %}
  755.             {% set pagesuiv =  1 %}
  756.         {% endif %}
  758.         {% if nombrepage < 5 %}
  759.             {% set debut = 1 %}
  760.             {% set fin = nombrepage %}
  761.         {% else %}
  762.             {% if page > 2 and page < (nombrepage - 2) %}
  763.                 {% set debut = page - 2 %}
  764.                 {% if page + 2 >= nombrepage %}
  765.                     {% set fin = nombrepage %}
  766.                 {% else %}
  767.                     {% set fin = page + 2 %}
  768.                 {% endif %}
  769.             {% else %}
  770.                 {% if page <= 2 %}
  771.                     {% if page == 1 %}
  772.                         {% set debut = 1 %}
  773.                         {% set fin = page + 3 %}
  774.                     {% else %}
  775.                         {% set debut = 1 %}
  776.                         {% set fin = page + 2 %}
  777.                     {% endif %}
  778.                 {% else %}
  779.                     {% set debut = page - 2 %}
  780.                     {% if page + 2 >= nombrepage %}
  781.                         {% set fin = nombrepage %}
  782.                     {% else %}
  783.                         {% set fin = page + 2 %}
  784.                     {% endif %}
  785.                 {% endif %}
  786.             {% endif %}
  788.         {% endif %} #}
  790.         {# <div class="btn-group mb-4 text-center" role="group" aria-label="Basic example">
  791.             <a href="#" title="Première page" class="btn btn-outline-primary mx-2">
  792.                 <span><i class="bi bi-chevron-double-left"></i></span>
  793.             </a>
  794.             <a href="#" title="Page précedente" class="btn btn-outline-primary mx-2">
  795.                 <span><i class="bi bi-chevron-left"></i></span>
  796.             </a> #}
  797.             {# {% for p in debut..fin %}
  798.                 <a href="#" value="{{ p }}" class="btn btn-outline-primary mx-2 {% if p == page %}active{% endif %}">{{ p }}</a>
  799.             </li> #}
  800.         {# {% endfor %} #}
  801.         {# <a href="#" title="Page suivante" class="btn btn-outline-primary mx-2">
  802.             <span><i class="bi bi-chevron-right"></i></span>
  803.         </a>
  804.         <a href="#" title="Dernière page" class="btn btn-outline-primary mx-2">
  805.             <span><i class="bi bi-chevron-double-right"></i></spam>
  806.         </a>
  807.     </div>
  808.     <div class="clearfix"></div> #}
  809. {# {% else %} #}
  810.     <div class="btn-group text-center" role="group" aria-label="Basic example">
  811.         <a href="#" title="Première page" class="btn btn-outline-primary mx-2">
  812.             <span><i class="bi bi-chevron-double-left"></i></span>
  813.         </a>
  814.         <a href="#" title="Page précedente" class="btn btn-outline-primary mx-2">
  815.             <span><i class="bi bi-chevron-left"></i></span>
  816.         </a>
  818.         <a href="#" class="btn btn-outline-primary mx-2 active" style="margin: 0px 0px;">1</a>
  820.         <a href="#" title="Page suivante" class="btn btn-outline-primary mx-2">
  821.             <span><i class="bi bi-chevron-right"></i></span>
  822.         </a>
  823.         <a href="#" title="Dernière page" class="btn btn-outline-primary mx-2">
  824.             <span><i class="bi bi-chevron-double-right"></i></spam>
  825.         </a>
  826.     </div>
  828.     <script>
  829.     var swiperFade = new Swiper(".swiperFade", {
  830.     loop: true,
  831.     effect: 'fade',
  832.     navigation: {
  833.       nextEl: ".swiper-button-next",
  834.       prevEl: ".swiper-button-prev"
  835.     },
  836.     pagination: {
  837.       el: ".swiper-pagination",
  838.     },
  839.     });
  841.     var swiperVertical = new Swiper(".swiperVertical", {
  842.       loop: true,
  843.       effect: 'fade',
  844.       direction: "vertical",
  845.       pagination: {
  846.         el: ".swiper-pagination",
  847.         clickable: true,
  848.       }
  849.     });
  851.     var swiperEffect = new Swiper(".swiperEffect", {
  852.       loop: true,
  853.       effect: "cards",
  854.       grabCursor: true,
  855.       navigation: {
  856.         nextEl: ".swiper-button-next",
  857.         prevEl: ".swiper-button-prev"
  858.       },
  859.       pagination: {
  860.         el: ".swiper-pagination",
  861.       },
  862.     });
  863. </script>
  864. </div>
  865. {% endblock %}
  867. {% block javascripttemplate %}
  869. {% endblock %}