templates/home/index.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3. {% block title %} {% trans %}Votre partenaire informatique {% endtrans %}{% endblock %}
  5. {% block content %}
  6. <head>
  7.     <title> Entreprise Informatique B&B Computer Solutions Limal </title>
  8.     <meta name="description" content="Découvrez B&B Computer Solutions, votre partenaire en services informatiques. Nous proposons des solutions innovantes et sur-mesure pour répondre à tous vos besoins IT.">
  9.     <link rel="canonical" href="https://www.bbcs.be/fr/" />
  10. </head>
  11. <!-- START CONTENT -->
  13.     <!-- ************ -->
  14.     <!-- Start Slider -->
  15.     <!-- ************ -->
  16.     <div id="bootstrap-touch-slider" class="carousel bs-slider fade  control-round indicators-line" data-ride="carousel" data-pause="hover" data-interval="7000" >
  17.         <!-- Indicators -->
  18.             <ol class="carousel-indicators">
  19.                 <li data-target="#bootstrap-touch-slider" data-slide-to="0" class="active"></li>
  20.                 <li data-target="#bootstrap-touch-slider" data-slide-to="1"></li>
  21.                 <li data-target="#bootstrap-touch-slider" data-slide-to="2"></li>
  22.                 {#<li data-target="#bootstrap-touch-slider" data-slide-to="3"></li>#}
  23.             </ol>
  24.         <div class="carousel-inner" role="listbox">
  25.             <!-- First Slide -->
  26.             <div class="item active">
  27.                 <div id="homeHands" class="first-section custom-padding slider-one" style="background-image:url('{{ asset('build/slider-005.JPG') }}');">
  28.                     <div class="container">
  29.                         <div class="row">
  30.                             <div class="col-md-12 col-sm-12 text-center">
  31.                                 <div class="big-tagline">
  32.                                     <h2 data-animation="animated zoomInRight">{% trans %}<strong>Smart</strong> IT, <strong>Human</strong> Support {% endtrans %}</h2>
  33.                                     <p class="lead" data-animation="animated fadeInLeft">{% trans %} B&B Computer Solutions {% endtrans %}</p>
  34.                                     <a data-scroll href="{{ path('app_contact') }}" class="btn btn-light btn-radius btn-brd effect-1 slide-btn" data-animation="animated fadeInLeft"> {% trans %}Contactez-nous {% endtrans %}</a>
  35.                                 </div>
  36.                             </div>
  37.                         </div><!-- end row -->            
  38.                     </div><!-- end container -->
  39.                 </div><!-- end section -->
  40.             </div>
  41.             <!-- Second Slide -->
  42.             <div class="item">
  43.               <div id="home" class="first-section custom-padding" style="background-image:url('{{ asset('build/slider-01.png') }}');">
  44.                     <div class="container">
  45.                         <div class="row">
  46.                             <div class="col-md-12 col-sm-12 text-center">
  47.                                 <div class="big-tagline">
  48.                                     <h2 data-animation="animated zoomInRight">{% trans %}<strong>Promotion</strong> 2026 {% endtrans %}</h2>
  49.                                     <p class="lead" data-animation="animated fadeInLeft">{% trans %}Jusqu'à 3 mois offerts. {% endtrans %}</p>
  50.                                     <a data-scroll href="{{ path('app_contact') }}" class="btn btn-light btn-radius btn-brd effect-1 slide-btn" data-animation="animated fadeInLeft"> {% trans %}Contactez-nous {% endtrans %}</a>
  51.                                 </div>
  52.                             </div>
  53.                         </div><!-- end row -->            
  54.                     </div><!-- end container -->
  55.                 </div><!-- end section -->
  56.             </div>        
  57.             <!-- Third Slide -->    
  58.             <div class="item">
  59.               <div id="home" class="first-section custom-padding" style="background-image:url('{{ asset('build/slider-02.png') }}');">
  60.                     <div class="container">
  61.                         <div class="row">
  62.                             <div class="col-md-12 col-sm-12 text-center">
  63.                                 <div class="big-tagline">
  64.                                     <h2 data-animation="animated zoomInRight"> {% trans %}<strong>Fin</strong> du support de <strong>Windows 10</strong>{% endtrans %}</h2>
  65.                                     <p class="lead" data-animation="animated fadeInLeft">{% trans %}Êtes-vous déjà totalement en Windows 11 ?{% endtrans %}</p>
  66.                                     <a data-scroll href="{{ path('app_contact') }}" class="btn btn-light btn-radius btn-brd effect-1 slide-btn" data-animation="animated fadeInLeft"> {% trans %}Contactez-nous {% endtrans %}</a>
  67.                                 </div>
  68.                             </div>
  69.                         </div><!-- end row -->            
  70.                     </div><!-- end container -->
  71.                 </div><!-- end section -->
  72.             </div>
  73.             
  74.             <!-- Fourth Slide -->
  75.             {#<div class="item">
  76.                 <div id="home" class="first-section custom-padding" style="background-image:url('{{ asset('build/slider-03.png') }}');">
  77.                     <div class="container">
  78.                         <div class="row">
  79.                             <div class="col-md-12 col-sm-12 text-center">
  80.                                 <div class="big-tagline">
  81.                                     <h2 data-animation="animated zoomInRight"> {% trans %}<strong>Peppol</strong> 2026 {% endtrans %}</h2>
  82.                                     <p class="lead" data-animation="animated fadeInLeft">{% trans %}La facturation électronique arrive à grand pas ... Nous pouvons vous conseiller ! {% endtrans %}</p>
  83.                                     <a data-scroll href="{{ path('app_contact') }}" class="btn btn-light btn-radius btn-brd effect-1 slide-btn" data-animation="animated fadeInLeft"> {% trans %}Contactez-nous {% endtrans %}</a>
  84.                                 </div>
  85.                             </div>
  86.                         </div><!-- end row -->            
  87.                     </div><!-- end container -->
  88.                 </div><!-- end section -->
  89.             </div>#}
  90.             <!-- Left Control -->
  91.             <a class="left carousel-control" href="#bootstrap-touch-slider" role="button" data-slide="prev">
  92.                 <span class="fa fa-angle-left" aria-hidden="true"></span>
  93.                 <span class="sr-only">{% trans %}Précédent {% endtrans %}</span>
  94.             </a>
  96.             <!-- Right Control -->
  97.             <a class="right carousel-control" href="#bootstrap-touch-slider" role="button" data-slide="next">
  98.                 <span class="fa fa-angle-right" aria-hidden="true"></span>
  99.                 <span class="sr-only">{% trans %}Suivant {% endtrans %}</span>
  100.             </a>
  101.         </div>
  102.     </div>
  104.     <!-- **************** -->
  105.     <!--    END Slider    -->
  106.     <!-- **************** -->
  110.     <div id="overviews" class="section wb">
  111.         <div class="container">
  112.         
  113.             <div class="row mb-5">
  114.                 <div class="col-md-6">
  115.                     <div class="message-box">
  116.                         <h1>{% trans %}Nos valeurs {% endtrans %}</h1>
  117.                         <h2>{% trans %}Proximité et Confiance {% endtrans %}</h2>
  118.                         <p class="lead">{% trans %}Smart IT, human support! {% endtrans %}</p>
  119.                         <p> 
  120.                         {% trans %}
  121.                             Nous mettons en place des solutions IT efficaces et modernes, alliées à un accompagnement humain, proche et à l’écoute. Parce que la technologie est plus efficace quand elle reste avant tout humaine.
  122.                         {% endtrans %}
  123.                         </p>
  124.                         <a href="{{ path('app_about') }}" data-scroll class="btn btn-light btn-radius btn-brd grd1 effect-1">{% trans %}Détails {% endtrans %}</a>
  125.                     </div><!-- end messagebox -->
  126.                 </div><!-- end col -->
  129.                 
  130.                 <div class="col-md-6">
  131.                     <div class="post-media wow fadeIn">
  132.                         <img src="{{ asset('build/partnership.png') }}" alt="Partnership entre entreprise" class="img-responsive img-rounded">
  133.                     </div><!-- end media -->
  134.                 </div><!-- end col -->
  135.             </div><!-- end row -->
  136.         </div>
  138.             <hr class="invis"> 
  145.     <div id="about-items" class="section wb bottom-row top-row">
  146.         <div class="container">
  147.             <div class="message-box">
  148.                 <h1>{% trans %}Nos services informatiques {% endtrans %}</h1>
  149.                 <h2>{% trans %}Voici un aperçu des services que nous proposons {% endtrans %}</h2>
  150.                 <p class="lead">{% trans %}Gestion et maintenance de votre infrastructure | Définition et intégration de solutions informatiques globales{% endtrans %}</p>
  151.             
  152.             <div class="service-container service-container-gap top-row">
  153.                 <div class="service-box wow fadeIn" data-wow-duration="1s" data-wow-delay="0.4s">
  154.                     <a href="{{ path('app_audit') }}">
  155.                         <div class="texte-cote texte-gauche">
  156.                             <div class="texte-centre">
  157.                                 <i class="fa-solid fa-magnifying-glass global-radius services-icone"></i>
  158.                                 <h2 class="service-box-text">{% trans %}Audit {% endtrans %}</h2>
  159.                             </div>
  160.                             <p class="lead lead-texte-cote">{% trans %}<strong>Vérifiez l'état actuel de votre infrastructure</strong> {% endtrans %}</p>
  161.                         </div>
  162.                     </a>
  163.                 </div>
  164.                 <div class="service-box wow fadeIn" data-wow-duration="1s" data-wow-delay="0.4s">
  165.                     <a href="{{ path('app_backup') }}">
  166.                         <div class="texte-cote texte-droite">
  167.                             <div class="texte-centre">
  168.                                 <i class="fa-solid fa-download global-radius services-icone"></i>
  169.                                 <h2 class="service-box-text">{% trans %}Backup {% endtrans %}</h2>
  170.                             </div>
  171.                             <p class="lead lead-texte-cote">{% trans %}<strong>Sécurisez la totalité de vos données</strong> {% endtrans %}</p>
  172.                         </div>
  173.                     </a>
  174.                 </div>
  177.             </div>
  179.             <div class="service-container">
  180.                 <div class="service-box wow fadeIn" data-wow-duration="1s" data-wow-delay="0.6s">
  181.                     <a href="{{ path('app_management') }}">
  182.                         <div class="texte-cote texte-gauche">
  183.                             <div class="texte-centre">
  184.                                 <i class="fa-solid fa-network-wired global-radius services-icone"></i>
  185.                                 <h2 class="service-box-text">{% trans %}IT Management {% endtrans %}</h2>
  186.                             </div>
  187.                             <p class="lead lead-texte-cote cote-large">{% trans %}<strong>Optez pour un support de qualité</strong> {% endtrans %}</p>
  188.                         </div>
  189.                     </a>
  190.                 </div>
  192.             
  193.                 <div class="img-services wow fadeIn">
  194.                     <img src="{{ asset('build/img-services.png') }}" alt="Partnership entre entreprise" class="img-responsive img-rounded img-bbcs">
  195.                 </div><!-- end media -->
  197.                 <div class="service-box wow fadeIn" data-wow-duration="1s" data-wow-delay="0.6s">
  198.                     <a href="{{ path('app_maintenance') }}">
  199.                     <div class="texte-cote texte-droite">
  200.                         <div class="texte-centre">
  201.                             <i class="fa-solid fa-screwdriver-wrench global-radius services-icone"></i>
  202.                             <h2 class="service-box-text">{% trans %}Maintenance {% endtrans %}</h2>
  203.                         </div>
  204.                         <p class="lead lead-texte-cote">{% trans %}<strong>Assurez la durabilité de vos systèmes</strong> {% endtrans %}</p>
  205.                     </div>
  206.                     </a>
  207.                 </div>
  208.             </div>
  210.             <div class="service-container service-container-gap">
  211.                 <div class="service-box wow fadeIn" data-wow-duration="1s" data-wow-delay="0.8s">
  212.                     <a href="{{ path('app_venteLeasing') }}">
  213.                     <div class="texte-cote texte-gauche">
  214.                         <div class="texte-centre">
  215.                             <i class="fa-solid fa-cart-shopping global-radius services-icone"></i>
  216.                             <h2 class="service-box-text">{% trans %}Vente et Leasing {% endtrans %}</h2>
  217.                         </div>
  218.                         <p class="lead lead-texte-cote cote-large">{% trans %}<strong>Tirez parti de technologies modernes</strong> {% endtrans %}</p>
  219.                     </div>
  220.                     </a>
  221.                 </div>
  222.                 <div class="service-box wow fadeIn" data-wow-duration="1s" data-wow-delay="0.8s">
  223.                     <a href="{{ path('app_microsoft') }}">
  224.                     <div class="texte-cote texte-droite">
  225.                         <div class="texte-centre">
  226.                             <i class="fa-brands fa-windows global-radius services-icone"></i>
  227.                             <h2 class="service-box-text">{% trans %}Microsoft 365 {% endtrans %}</h2>
  228.                         </div>
  229.                         <p class="lead lead-texte-cote cote-large">{% trans %} <strong>Adoptez une solution 100% cloud</strong> {% endtrans %}</p>
  230.                     </div>
  231.                     </a>
  232.                 </div>
  233.             </div>
  238.             {#
  239.             <div class="icon-wrapper wow fadeIn" data-wow-duration="1s" data-wow-delay="0.2s">
  240.                 <i class="fa-solid fa-people-roof global-radius effect-1 alignleft"></i>
  241.                 <i class="fa-solid fa-download global-radius effect-1 alignleft"></i>
  242.                 <i class="fa-solid fa-network-wired global-radius effect-1 alignleft"></i>
  243.                 <i class="fa-solid fa-screwdriver-wrench global-radius effect-1 alignleft"></i>
  244.                 <i class="fa-solid fa-cart-shopping global-radius effect-1 alignleft"></i>
  245.                 <i class="fa-brands fa-windows global-radius effect-1 alignleft"></i>
  246.             </div><!-- end icon-wrapper -->
  247.             #}
  249.         </div>
  253.         
  254.         {#
  255.         <div class="post-media wow fadeIn">
  256.             <div class="icon-wrapper wow fadeIn" data-wow-duration="1s" data-wow-delay="0.2s">
  257.                 <i class="fa-solid fa-people-roof global-radius effect-1 alignleft"></i>
  258.                 <h2>{% trans %}Audit {% endtrans %}</h2>
  259.             </div><!-- end icon-wrapper -->
  260.             <img src="{{ asset('build/partnership.png') }}" alt="Partnership entre entreprise" class="img-responsive img-rounded img-services">
  261.         </div><!-- end media -->#}
  262.     </div>
  268. {#
  269.             <!--Les Solutions-->
  270.             <div id="about-items" class="section wb bottom-row">
  271.             <div class="container">
  272.                 <div class="message-box">
  273.                     <h1>{% trans %}Nos services informatiques {% endtrans %}</h1>
  274.                     <h2>{% trans %}Voici un aperçu des services que nous proposons {% endtrans %}</h2>
  275.                     <p class="lead">{% trans %}Gestion et maintenance de votre infrastructure | Définition et intégration de solutions informatiques globales{% endtrans %}</p>
  276.                 </div>
  278.                 <div class="row mt-5"> 
  279.                         <div class="col-md-4 col-sm-6 col-xs-12">
  280.                             <div class="icon-wrapper wow fadeIn" data-wow-duration="1s" data-wow-delay="0.2s">
  281.                                 <i class="fa-solid fa-people-roof global-radius effect-1 alignleft"></i>
  282.                                 <h2>{% trans %}Audit {% endtrans %}</h2>
  283.                                 <p>{% trans %}Contrôlez l’état de santé de vos infrastructures informatiques pour déterminer leur cohérence, leur performance et leur fiabilité. {% endtrans %}<small class="readmore"><a href="{{ path('app_contact') }}">{% trans %}Demande d'infos {% endtrans %}</a></small></p>
  284.                             </div><!-- end icon-wrapper -->
  285.                         </div><!-- end col -->
  287.                         <div class="col-md-4 col-sm-6 col-xs-12">
  288.                             <div class="icon-wrapper wow fadeIn" data-wow-duration="1s" data-wow-delay="0.6s">
  289.                                 <i class="fa-solid fa-download global-radius effect-1 alignleft"></i>
  290.                                 <h2>{% trans %}Backup {% endtrans %}</h2>
  291.                                 <p>{% trans %}Vos données informatiques sont un bien précieux qu’il ne faut absolument pas perdre. Ne prenez pas de risques grâce à nos solutions de backup. {% endtrans %}<small class="readmore"><a href="{{ path('app_contact') }}">{% trans %}Demande d'infos {% endtrans %}</a></small></p>
  292.                             </div><!-- end icon-wrapper -->
  293.                         </div><!-- end col -->
  295.                         <div class="col-md-4 col-sm-6 col-xs-12">
  296.                             <div class="icon-wrapper wow fadeIn" data-wow-duration="1s" data-wow-delay="0.4s">
  297.                                 <i class="fa-solid fa-network-wired global-radius effect-1 alignleft"></i>
  298.                                 <h2>{% trans %}IT Management {% endtrans %}</h2>
  299.                                 <p>{% trans %}De la mise en place jusqu’au suivi de toutes les solutions informatiques nécessaires à votre activité, B&B s’occupe de tout dans le plus grand professionnalisme. {% endtrans %}<small class="readmore"><a href="{{ path('app_contact') }}">{% trans %}Demande d'infos {% endtrans %}</a></small></p>
  300.                             </div><!-- end icon-wrapper -->
  301.                         </div><!-- end col -->
  302.                     </div><!-- end row -->
  304.                     <hr class="hr3"> 
  306.                     <div class="row"> 
  307.                         <div class="col-md-4 col-sm-6 col-xs-12">
  308.                             <div class="icon-wrapper wow fadeIn" data-wow-duration="1s" data-wow-delay="0.2s">
  309.                                 <i class="fa-solid fa-screwdriver-wrench global-radius effect-1 alignleft"></i>
  310.                                 <h2>{% trans %}Maintenance {% endtrans %}</h2>
  311.                                 <p>
  312.                                     {% trans %}La maintenance est bien souvent ignorée mais c’est une partie cruciale dans toute bonne infrastructure informatique. Il faut donc entretenir votre parc informatique et le garder à jour afin d’éviter tout ralentissement qui pourrait nuire à votre activité. {% endtrans %}<small class="readmore"><a href="{{ path('app_contact') }}">{% trans %}Demande d'infos {% endtrans %}</a></small> 
  313.                                 </p>
  314.                             </div><!-- end icon-wrapper -->
  315.                         </div><!-- end col -->
  317.                         <div class="col-md-4 col-sm-6 col-xs-12">
  318.                             <div class="icon-wrapper wow fadeIn" data-wow-duration="1s" data-wow-delay="0.4s">
  319.                                 <i class="fa-solid fa-cart-shopping global-radius effect-1 alignleft"></i>
  320.                                 <h2>{% trans %}Vente et Leasing {% endtrans %}</h2>
  321.                                 <p>
  322.                                     {% trans %}Profitez de matériel informatique de pointe tout en éliminant les risques d’obsolescence. Différentes formules de leasing sont à votre disposition pour satisfaire vos besoins et votre budget. {% endtrans %}<small class="readmore"><a href="{{ path('app_contact') }}">{% trans %}Demande d'infos {% endtrans %}</a></small> 
  323.                                 </p>
  324.                             </div><!-- end icon-wrapper -->
  325.                         </div><!-- end col -->
  327.                         <div class="col-md-4 col-sm-6 col-xs-12">
  328.                             <div class="icon-wrapper wow fadeIn" data-wow-duration="1s" data-wow-delay="0.6s">
  329.                                 <i class="fa-brands fa-windows global-radius effect-1 alignleft"></i>
  330.                                 <h2>{% trans %}Microsoft 365 {% endtrans %}</h2>
  331.                                 <p>{% trans %}Nous mettons à votre disposition et intégrons la suite Office 365 pour vous. Cela veut dire que nous adaptons et configurons la suite en fonction de vos attentes, de votre entreprise et donc de vos besoins. {% endtrans %}<small class="readmore"><a href="{{ path('app_contact') }}">{% trans %}Demande d'infos {% endtrans %}</a></small> </p>
  332.                             </div><!-- end icon-wrapper -->
  333.                         </div><!-- end col -->
  334.                     </div><!-- end row -->
  338.                 </div><!-- end container -->
  339.             </div><!-- end section -->
  340. #}
  344. {#
  345.             <!--solutions sur mesures, supports 24/7, ...-->
  346.             <div class="row mt-5"> 
  347.                 <div class="col-md-4 col-sm-6 col-xs-12">
  348.                     <div class="icon-wrapper wow fadeIn" data-wow-duration="1s" data-wow-delay="0.4s">
  349.                         <i class="fa-solid fa-magnifying-glass global-radius effect-1 alignleft"></i>
  350.                         <h3>{% trans %}Solutions sur mesure {% endtrans %}</h3>
  351.                         <p>{% trans %}Votre satisfaction est notre priorité. En tant que professionnels de l'informatique, nous proposons des solutions 100% personnalisées adaptées à vos besoins, vos attentes et vos éventuelles contraintes. {% endtrans %}</p>
  352.                     </div><!-- end icon-wrapper -->
  353.                 </div><!-- end col -->
  355.                 <div class="col-md-4 col-sm-6 col-xs-12">
  356.                     <div class="icon-wrapper wow fadeIn" data-wow-duration="1s" data-wow-delay="0.6s">
  357.                         <i class="fa-solid fa-screwdriver-wrench global-radius effect-1 alignleft"></i>
  358.                         <h3>{% trans %}Support 24/7 {% endtrans %}</h3>
  359.                         <p>{% trans %}Nous sommes disponibles 24h/24 et 7j/7 pour répondre à toutes vos demandes. Nous surveillons constamment vos systèmes pour prévenir tout problème qui pourrait ralentir votre productivité. {% endtrans %}</p>
  360.                     </div><!-- end icon-wrapper -->
  361.                 </div><!-- end col -->
  363.                 <div class="col-md-4 col-sm-6 col-xs-12">
  364.                     <div class="icon-wrapper wow fadeIn" data-wow-duration="1s" data-wow-delay="0.2s">
  365.                         <i class="fa-solid fa-people-roof global-radius effect-1 alignleft"></i>
  366.                         <h3>{% trans %}Entreprise Familliale {% endtrans %}</h3>
  367.                         <p>{% trans %}Le caractère familial de B&B Computer Solutions en fait une entreprise basée sur des valeurs durables et sur un respect mutuel au sein de l’entreprise. {% endtrans %}</p>
  368.                     </div><!-- end icon-wrapper -->
  369.                 </div><!-- end col -->
  370.             </div><!-- end row -->
  372.             <hr class="hr3"> 
  374.             <div class="row"> 
  375.                 <div class="col-md-4 col-sm-6 col-xs-12">
  376.                     <div class="icon-wrapper wow fadeIn" data-wow-duration="1s" data-wow-delay="0.2s">
  377.                         <i class="fa-solid fa-shuffle global-radius effect-1 alignleft"></i>
  378.                         <h3>{% trans %}Flexibilité {% endtrans %}</h3>
  379.                         <p>{% trans %}Grâce à la taille relativement petite de notre structure, nous pouvons nous permettre une plus grande flexibilité quant à l’application des solutions que nous proposons. {% endtrans %}</p>
  380.                     </div><!-- end icon-wrapper -->
  381.                 </div><!-- end col -->
  383.                 <div class="col-md-4 col-sm-6 col-xs-12">
  384.                     <div class="icon-wrapper wow fadeIn" data-wow-duration="1s" data-wow-delay="0.4s">
  385.                         <i class="fa-regular fa-handshake global-radius effect-1 alignleft"></i>
  386.                         <h3>{% trans %}Relation de confiance {% endtrans %}</h3>
  387.                         <p>{% trans %}Etablir une relation de confiance avec vous est primordial afin de vous fournir des solutions de qualité et de pouvoir faire prospérer vos activités.{% endtrans %}</p>
  388.                     </div><!-- end icon-wrapper -->
  389.                 </div><!-- end col -->
  391.                 <div class="col-md-4 col-sm-6 col-xs-12">
  392.                     <div class="icon-wrapper wow fadeIn" data-wow-duration="1s" data-wow-delay="0.6s">
  393.                         <i class="fa-solid fa-arrows-to-circle global-radius effect-1 alignleft"></i>
  394.                         <h3>{% trans %}Point de contact unique {% endtrans %}</h3>
  395.                         <p>{% trans %}La résolution de tous vos problèmes et la réponse à toutes vos questions passe par un seul endroit. Ne perdez plus votre temps à résoudre vos problèmes IT et recentrez-vous pleinement sur votre activité. {% endtrans %}</p>
  396.                     </div><!-- end icon-wrapper -->
  397.                 </div><!-- end col -->
  398.             </div><!-- end row -->
  399.         #}
  400.         
  401.         
  402.         </div><!-- end container -->
  403.     
  404.     
  405.     
  406.     </div><!-- end section -->
  411.     <div class="section cl">
  412.         <div class="container">
  413.             <div class="row text-left stat-wrap ombre">
  414.                 <div class="col-md-4 col-sm-4 col-xs-12">
  415.                     <span data-scroll class="global-radius icon_wrap effect-1 alignleft"><i class="fa-regular fa-face-smile-beam"></i></span>
  416.                     <div class="aligner">
  417.                         <p class="plus_stat">+</p>
  418.                         <p class="stat_count" data-stat="100">0</p>
  419.                     </div>
  420.                     <h3>{% trans %}Clients satisfaits {% endtrans %}</h3>
  421.                 </div><!-- end col -->
  423.                 <div class="col-md-4 col-sm-4 col-xs-12">
  424.                     <span data-scroll class="global-radius icon_wrap effect-1 alignleft"><i class="fa-solid fa-business-time"></i></span>
  425.                     <p class="stat_count" data-stat="25">0</p>
  426.                     <h3>{% trans %}Années d'expérience {% endtrans %}</h3>
  427.                 </div><!-- end col -->
  429.                 <div class="col-md-4 col-sm-4 col-xs-12">
  430.                     <span data-scroll class="global-radius icon_wrap effect-1 alignleft"><i class="fa-solid fa-handshake"></i></span>
  431.                     <div class="aligner">
  432.                         <p class="plus_stat">+</p>
  433.                         <p class="stat_count" data-stat="30">0</p>
  434.                     </div>
  435.                     <h3> {% trans %}Partenaires {% endtrans %}</h3>
  436.                 </div><!-- end col -->
  437.             </div><!-- end row -->
  438.         </div><!-- end container -->
  439.     </div><!-- end section -->
  445. <!-- **************************** -->
  446. <!-- Temoignages ancienne version -->
  447. <!-- **************************** -->
  449.   {#  <div id="testimonials" class="parallax section db parallax-off" style="background-image:url('{{ asset('build/paralax-04.jpg') }}');">
  450.         <div class="container">
  451.             <div class="section-title text-center">
  452.                 <h3>{% trans %}Témoignages {% endtrans %}</h3>
  453.             </div><!-- end title -->
  455.             <div class="row">
  456.                 <div class="col-md-12 col-sm-12">
  457.                     <div class="testi-carousel owl-carousel owl-theme">
  458.                         <div class="testimonial clearfix">
  459.                             <div class="desc">
  460.                                 <h3><i class="fa fa-quote-left"></i> {% trans %}Un soutien éclairé et des conseils pertinents! {% endtrans %}</h3>
  461.                                 <p class="lead">{% trans %}En tant qu’ONG, travaillant toujours en flux tendu et sous pression, nous avons besoin d’un partenaire disponible et réactif, qui mettra tout en œuvre rapidement pour trouver des solutions aux problèmes du quotidien, en particulier avec un parc diversifié et pas nécessairement dernier cri. {% endtrans %}</p>
  462.                             </div>
  463.                             <div class="testi-meta">
  464.                                 <img src="{{ asset('build/enar.png') }}" alt="" class="img-responsive alignleft">
  465.                                 <h4>Michael Privot <small> {% trans %}Directeur de l'ENAR {% endtrans %}</small></h4>
  466.                             </div>
  467.                             <!-- end testi-meta -->
  468.                         </div>
  469.                         <!-- end testimonial -->
  471.                         <div class="testimonial clearfix">
  472.                             <div class="desc">
  473.                                 <h3><i class="fa fa-quote-left"></i> {% trans %}Reliable and responsive partner! {% endtrans %}</h3>
  474.                                 <p class="lead"> {% trans %}Eurochild has used the services of B&B Computer Solutions to support its IT needs for over 5 years. The BBCS team have proved to be a reliable and responsive partner, helping us navigate the latest IT developments to meet the needs of our growing Secretariat. {% endtrans %}</p>
  475.                             </div>
  476.                             <div class="testi-meta">
  477.                                 <img src="{{ asset('build/euro_child.png') }}" alt="" class="img-responsive alignleft">
  478.                                 <h4>Jana Hainsworth <small> {% trans %}Secretary General {% endtrans %}</small></h4>
  479.                             </div>
  480.                             <!-- end testi-meta -->
  481.                         </div>
  482.                         <!-- end testimonial -->
  484.                         <div class="testimonial clearfix">
  485.                             <div class="desc">
  486.                                 <h3><i class="fa fa-quote-left"></i> {% trans %}Conseils et prix attractifs! {% endtrans %}</h3>
  487.                                 <p class="lead">{% trans %}Depuis une quinzaine d’années déjà, le LEF (Lobby européen des femmes) a confié la maintenance de son parc informatique à la société B&B Computer Solutions. 
  488.                                 Grâce à leur professionnalisme, leur calme, leur bonne humeur et malgré notre stress lorsqu’une panne survient, ils sont toujours arrivés à trouver une solution dans les meilleurs délais. {% endtrans %}
  489.                                 </p>
  490.                             </div>
  491.                             <div class="testi-meta">
  492.                                 <img src="{{ asset('build/lobby.png') }}" alt="" class="img-responsive alignleft">
  493.                                 <h4>Mary Ann Struthers <small> {% trans %}Finance/Human Resources and Information Officer {% endtrans %} </small></h4>
  494.                             </div>
  495.                             <!-- end testi-meta -->
  496.                         </div>
  497.                         <!-- end testimonial -->
  499.                         <div class="testimonial clearfix">
  500.                             <div class="desc">
  501.                                 <h3><i class="fa fa-quote-left"></i> {% trans %}Keeping our organization on track! {% endtrans %}</h3>
  502.                                 <p class="lead">{% trans %}For the past 4 years, B&B Computer Solutions is our Brussels’ IT support company. Their knowledge and attention to detail have aided in keeping our organization on track and through major restructure and at the same time respecting our respective contractors in Warsaw and London offices. I feel confident in recommending B&B Computer Solutions. {% endtrans %}</p>
  503.                             </div>
  504.                             <div class="testi-meta">
  505.                                 <img src="{{ asset('build/clienthearth.png') }}" alt="" class="img-responsive alignleft">
  506.                                 <h4>Katerina Iordanopoulou <small> {% trans %}ClientEarth Administrator {% endtrans %}</small></h4>
  507.                             </div>
  508.                             <!-- end testi-meta -->
  509.                         </div>
  510.                         <!-- end testimonial -->
  512.                         <div class="testimonial clearfix">
  513.                             <div class="desc">
  514.                                 <h3><i class="fa fa-quote-left"></i> {% trans %}SAV super efficace! {% endtrans %}</h3>
  515.                                 <p class="lead">{% trans %}Nous sommes ravis des services de B&B Computer Solutions. Nous avons toujours de très bons conseils de leur part que ce soit pour notre réseau, les softwares, notre hardware et même notre télécom. Le démarrage s’est fait sans aucun souci, le SAV est super efficace et ils sont même déjà proactifs sur certains points. Bref, nous les recommandons fortement. {% endtrans %}</p>
  516.                             </div>
  517.                             <div class="testi-meta">
  518.                                 <img src="{{ asset('build/mecelcar.png') }}" alt="" class="img-responsive alignleft">
  519.                                 <h4>Delfosse Matthieu <small> {% trans %}Mecelcar Finance & HR Manager {% endtrans %}</small></h4>
  520.                             </div>
  521.                             <!-- end testi-meta -->
  522.                         </div><!-- end testimonial -->
  523.                     </div><!-- end carousel -->
  524.                 </div><!-- end col -->
  525.             </div><!-- end row -->
  526.         </div><!-- end container -->
  527.     </div><!-- end section -->
  528. #}
  531. <!-- **************************** -->
  532. <!-- Temoignages nouvelle version -->
  533. <!-- **************************** -->
  535.     <div id="testimonials" class="parallax section parallax-off temoignages">
  536.         <div class="container">
  538.             <div class="message-box">
  539.                     <h1>{% trans %}Témoignages clients {% endtrans %}</h1>
  540.             </div>
  542.             <div class="row">
  543.                 <div class="col-md-12 col-sm-12">
  544.                     <div class="testi-carousel owl-carousel owl-theme">
  545.                         <div class="testimonial clearfix">
  546.                             <div class="desc">
  547.                                 <h3><i class="fa fa-quote-left"></i> {% trans %}Un soutien éclairé et des conseils pertinents! {% endtrans %}</h3>
  548.                                 <p class="lead">{% trans %}En tant qu’ONG, travaillant toujours en flux tendu et sous pression, nous avons besoin d’un partenaire disponible et réactif, qui mettra tout en œuvre rapidement pour trouver des solutions aux problèmes du quotidien, en particulier avec un parc diversifié et pas nécessairement dernier cri. {% endtrans %}</p>
  549.                             </div>
  550.                             <div class="testi-meta">
  551.                                 <img src="{{ asset('build/enar.png') }}" alt="" class="img-responsive alignleft">
  552.                                 <h4>Michael Privot <small> {% trans %}Directeur de l'ENAR {% endtrans %}</small></h4>
  553.                             </div>
  554.                             <!-- end testi-meta -->
  555.                         </div>
  556.                         <!-- end testimonial -->
  559.                         <div class="testimonial clearfix">
  560.                             <div class="desc">
  561.                                 <h3><i class="fa fa-quote-left"></i> {% trans %}Reliable and responsive partner! {% endtrans %}</h3>
  562.                                 <p class="lead"> {% trans %}Eurochild has used the services of B&B Computer Solutions to support its IT needs for over 5 years. The BBCS team have proved to be a reliable and responsive partner, helping us navigate the latest IT developments to meet the needs of our growing Secretariat. {% endtrans %}</p>
  563.                             </div>
  564.                             <div class="testi-meta">
  565.                                 <img src="{{ asset('build/euro_child.png') }}" alt="" class="img-responsive alignleft">
  566.                                 <h4>Jana Hainsworth <small> {% trans %}Secretary General {% endtrans %}</small></h4>
  567.                             </div>
  568.                             <!-- end testi-meta -->
  569.                         </div>
  570.                         <!-- end testimonial -->
  572.                         <div class="testimonial clearfix">
  573.                             <div class="desc">
  574.                                 <h3><i class="fa fa-quote-left"></i> {% trans %}Conseils et prix attractifs! {% endtrans %}</h3>
  575.                                 <p class="lead">{% trans %}Depuis une quinzaine d’années déjà, le LEF (Lobby européen des femmes) a confié la maintenance de son parc informatique à la société B&B Computer Solutions. 
  576.                                 Grâce à leur professionnalisme, leur calme, leur bonne humeur et malgré notre stress lorsqu’une panne survient, ils sont toujours arrivés à trouver une solution dans les meilleurs délais. {% endtrans %}
  577.                                 </p>
  578.                             </div>
  579.                             <div class="testi-meta">
  580.                                 <img src="{{ asset('build/lobby.png') }}" alt="" class="img-responsive alignleft">
  581.                                 <h4>Mary Ann Struthers <small> {% trans %}Finance/Human Resources and Information Officer {% endtrans %} </small></h4>
  582.                             </div>
  583.                             <!-- end testi-meta -->
  584.                         </div>
  585.                         <!-- end testimonial -->
  587.                         <div class="testimonial clearfix">
  588.                             <div class="desc">
  589.                                 <h3><i class="fa fa-quote-left"></i> {% trans %}Keeping our organization on track! {% endtrans %}</h3>
  590.                                 <p class="lead">{% trans %}For the past 4 years, B&B Computer Solutions is our Brussels’ IT support company. Their knowledge and attention to detail have aided in keeping our organization on track and through major restructure and at the same time respecting our respective contractors in Warsaw and London offices. I feel confident in recommending B&B Computer Solutions. {% endtrans %}</p>
  591.                             </div>
  592.                             <div class="testi-meta">
  593.                                 <img src="{{ asset('build/clienthearth.png') }}" alt="" class="img-responsive alignleft">
  594.                                 <h4>Katerina Iordanopoulou <small> {% trans %}ClientEarth Administrator {% endtrans %}</small></h4>
  595.                             </div>
  596.                             <!-- end testi-meta -->
  597.                         </div>
  598.                         <!-- end testimonial -->
  600.                         <div class="testimonial clearfix">
  601.                             <div class="desc">
  602.                                 <h3><i class="fa fa-quote-left"></i> {% trans %}SAV super efficace! {% endtrans %}</h3>
  603.                                 <p class="lead">{% trans %}Nous sommes ravis des services de B&B Computer Solutions. Nous avons toujours de très bons conseils de leur part que ce soit pour notre réseau, les softwares, notre hardware et même notre télécom. Le démarrage s’est fait sans aucun souci, le SAV est super efficace et ils sont même déjà proactifs sur certains points. Bref, nous les recommandons fortement. {% endtrans %}</p>
  604.                             </div>
  605.                             <div class="testi-meta">
  606.                                 <img src="{{ asset('build/mecelcar.png') }}" alt="" class="img-responsive alignleft">
  607.                                 <h4>Delfosse Matthieu <small> {% trans %}Mecelcar Finance & HR Manager {% endtrans %}</small></h4>
  608.                             </div>
  609.                             <!-- end testi-meta -->
  610.                         </div><!-- end testimonial -->
  611.                     </div><!-- end carousel -->
  612.                 </div><!-- end col -->
  613.             </div><!-- end row -->
  614.             <div class="my-owl-nav">
  615.             <span class="my-prev-button">
  616.                 <i class="fa fa-angle-left" aria-hidden="true"></i> 
  617.             </span>
  618.             <span class="my-next-button">
  619.                 <i class="fa fa-angle-right" aria-hidden="true"></i> 
  620.             </span>
  621. </div>
  622.         </div><!-- end container -->
  623.     </div><!-- end section -->
  628. <!-- ***************************************** -->
  629. <!--    Statistique BBCS défilé de nombres     -->
  630. <!-- ***************************************** -->
  633. <script>
  634. document.addEventListener("DOMContentLoaded", () => {
  635.     let statsAll = document.querySelectorAll(".stat_count");
  637.     let observer = new IntersectionObserver((entries, observer) => {
  638.         entries.forEach(entry => {
  639.             if (entry.isIntersecting === true) {
  640.                 let stat = entry.target;
  641.                 let countAffiche = +stat.getAttribute('data-stat');
  642.                 let count = 0;
  644.                 const updateStat = () => {
  645.                     let temps = countAffiche - count;
  646.                     let countUp = temps / 30;
  648.                     count += countUp;
  649.                     if (count < countAffiche) {
  650.                         stat.textContent = Math.ceil(count);
  651.                         requestAnimationFrame(updateStat);
  652.                     } else {
  653.                         stat.textContent = countAffiche;
  654.                     }
  655.                 };
  657.                 updateStat();
  658.                 observer.unobserve(entry.target);
  659.             }
  660.         });
  661.     });
  663.     statsAll.forEach(stat => observer.observe(stat));
  664. });
  666. </script>
  668. <script>
  669. var selector = $('.owl-carousel');
  671. $('.my-next-button').click(function() {
  672.   selector.trigger('next.owl.carousel');
  673. });
  675. $('.my-prev-button').click(function() {
  676.   selector.trigger('prev.owl.carousel');
  677. });
  680.   $(".owl-carousel").owlCarousel({
  681.     items: 2,
  682.     margin: 30,
  683.     loop: true,
  684.     nav: false,
  685.     dots: false,
  686.     autoplay: true,
  687.     autoplayTimeout: 10000,
  688.     autoplayHoverPause: true,
  689.     responsive:{
  690.         0:{
  691.             items:1
  692.         },
  693.         1000:{
  694.             items:2
  695.         }
  696.     }
  697.   });
  698. </script>
  699. {% endblock %}