templates/home/1/refait.html.twig line 1

Open in your IDE?
  1. <link rel="stylesheet" href="{{asset('css/app/svsHome.css')}}">
  3. <style>
  4. .homebtn {
  5.     position: absolute;
  6.     bottom: 0;
  7.     left: 0;
  8.     padding: 7px 16px;
  9.     font-size: 16px;
  10.     background-color: #2d4275;
  11.     border: solid 3px #ff9d1c;
  12.     border-radius: 5px;
  13.     color: white;
  14.     font-weight: 500;
  15.     letter-spacing: 0.5px;
  16. }
  17. </style>
  19. <div class="newsvs">
  20.     <!-- Swiper -->
  21.     <div class="swiper swiperImg">
  22.         <div class="swiperImgLinear">
  23.             <div class="linearContent">
  24.             <!-- SVS principale ici -->
  25.                 <div class="forsvstyped">
  26.                     <h1 class="typednewsvs"></h1>
  27.                 </div>
  29.                 <div class="forsvsText">
  30.                     <p class="typedtextsvs"></p>
  31.                 </div>
  33.                 <!--div class="forbuttons">
  34.                     <! readMovie 
  35.                     <div class="readMovie">
  36.                         <a class="play-btn"></a>
  37.                         <span>{{'Regarder la vidéo'|trans}} ! </span>
  38.                     </div>
  39.                 </div-->
  40.             </div> 
  41.         </div>
  42.         <div class="swiper-wrapper">
  43.             <div class="swiper-slide">
  44.                 <img src="{{asset('img/gardiennage/3.webp')}}" alt="" width="auto" height="auto" class="swiper-lazy" />
  45.                 <div class="swiper-lazy-preloader"></div>
  46.             </div>
  47.             <div class="swiper-slide">
  48.                 <img src="{{asset('img/evenementiel/22.webp')}}" alt="" width="auto" height="auto" class="swiper-lazy" />
  49.                 <div class="swiper-lazy-preloader"></div>
  50.             </div>
  51.             <div class="swiper-slide">
  52.                 <img src="{{asset('img/evenementiel/4.webp')}}" alt="" width="auto" height="auto" class="swiper-lazy" />
  53.                 <div class="swiper-lazy-preloader"></div>
  54.             </div>
  55.             <div class="swiper-slide">
  56.                 <img src="{{asset('img/transportdefond/1.webp')}}" alt="" width="auto" height="auto" class="swiper-lazy" />
  57.                 <div class="swiper-lazy-preloader"></div>
  58.             </div>
  59.             <div class="swiper-slide">
  60.                 <img src="{{asset('img/transportdefond/2.webp')}}" alt="" width="auto" height="auto" class="swiper-lazy" />
  61.                 <div class="swiper-lazy-preloader"></div>
  62.             </div>
  63.             <div class="swiper-slide">
  64.                 <img src="{{asset('img/produitssensible/3.webp')}}" alt="" width="auto" height="auto" class="swiper-lazy" />
  65.                 <div class="swiper-lazy-preloader"></div>
  66.             </div>
  67.             <div class="swiper-slide">
  68.                 <img src="{{asset('img/produitssensible/1.webp')}}" alt="" width="auto" height="auto" class="swiper-lazy" />
  69.                 <div class="swiper-lazy-preloader"></div>
  70.             </div>
  71.             <div class="swiper-slide">
  72.                 <img src="{{asset('img/formation/5.webp')}}" alt="" width="auto" height="auto" class="swiper-lazy" />
  73.                 <div class="swiper-lazy-preloader"></div>
  74.             </div>
  75.             <div class="swiper-slide">
  76.                 <img src="{{asset('img/formation/2.webp')}}" alt="" width="auto" height="auto" class="swiper-lazy" />
  77.                 <div class="swiper-lazy-preloader"></div>
  78.             </div>
  79.             <div class="swiper-slide">
  80.                 <img src="{{asset('img/gardiennage/1.webp')}}" alt="" width="auto" height="auto" class="swiper-lazy" />
  81.                 <div class="swiper-lazy-preloader"></div>
  82.             </div>
  83.         </div>
  84.         <!--div class="swiper-button-next"></div>
  85.         <div class="swiper-button-prev"></div-->
  86.         <div class="swiper-pagination"></div>
  87.         <div class="autoplay-progress">
  88.             <svg viewBox="0 0 48 48">
  89.                 <circle cx="24" cy="24" r="20"></circle>
  90.             </svg>
  91.             <span></span>
  92.         </div>
  93.     </div>
  95.     <!-- Content Référence -->
  96.     <div class="partner" style="z-index:2">
  97.         <div class="partner__div">
  98.             <div class="ref">{{'Nos références'|trans}} <img class="torch-icon" src="{{asset('torch.png')}}"></div> 
  99.         </div>
  100.         <!-- Swiper Reference -->
  101.         <div class="swiper mySwiperX">
  102.             <div class="swiper-wrapper">
  103.                 <div class="swiper-slide"><img src="{{asset('img/logo/v38.webp')}}" style="transform:scale(0.8)!important"   alt="logo partenaire"></div>
  104.                 <div class="swiper-slide"><img src="{{asset('img/logo/v40.webp')}}" style="transform:scale(0.6)!important"   alt="logo partenaire"></div>
  105.                 <div class="swiper-slide"><img src="{{asset('img/logo/v41.webp')}}" style="transform:scale(0.67)!important"   alt="logo partenaire"></div>
  106.                 <div class="swiper-slide"><img src="{{asset('img/logo/v42.webp')}}" style="transform:scale(0.8)!important"   alt="logo partenaire"></div>
  107.                 <div class="swiper-slide"><img src="{{asset('img/logo/49.png')}}" style="transform:scale(0.45)!important"   alt="logo partenaire"></div>
  108.                 <div class="swiper-slide"><img src="{{asset('img/logo/v48.webp')}}" style="transform:scale(0.9)!important"   alt="logo partenaire"></div>
  109.                 <div class="swiper-slide"><img src="{{asset('img/logo/v43.webp')}}" style="transform:scale(0.93)!important"   alt="logo partenaire"></div>
  110.                 <div class="swiper-slide"><img src="{{asset('img/logo/v44.webp')}}" style="transform:scale(0.93)!important"   alt="logo partenaire"></div>
  111.                 <div class="swiper-slide"><img src="{{asset('img/logo/v45.png')}}" style="transform:scale(0.85)!important"   alt="logo partenaire"></div>
  112.                 <div class="swiper-slide"><img src="{{asset('img/logo/v21.webp')}}" style="transform:scale(0.65)!important"   alt="logo partenaire"></div>
  113.                 <div class="swiper-slide"><img src="{{asset('img/logo/v22.webp')}}" style="transform:scale(0.80)!important"   alt="logo partenaire"></div>
  114.                 <div class="swiper-slide"><img src="{{asset('img/logo/v23.webp')}}" style="transform:scale(1)!important"   alt="logo partenaire"></div>
  115.                 <div class="swiper-slide"><img src="{{asset('img/logo/49.png')}}" style="transform:scale(0.45)!important"   alt="logo partenaire"></div>
  116.                 <div class="swiper-slide"><img src="{{asset('img/logo/v25.webp')}}" style="transform:scale(0.85)!important"   alt="logo partenaire"></div>
  117.                 <div class="swiper-slide"><img src="{{asset('img/logo/v26.webp')}}" style="transform:scale(0.8)!important"   alt="logo partenaire"></div>
  118.                 <div class="swiper-slide"><img src="{{asset('img/logo/v28.webp')}}" style="transform:scale(0.8)!important"   alt="logo partenaire"></div>
  119.                 <div class="swiper-slide"><img src="{{asset('img/logo/v31.webp')}}" style="transform:scale(0.85)!important"   alt="logo partenaire"></div>
  120.                 <div class="swiper-slide"><img src="{{asset('img/logo/v32.webp')}}" style="transform: scale(1.15)!important; filter: brightness(0.5);"   alt="logo partenaire"></div>
  121.                 <div class="swiper-slide"><img src="{{asset('img/logo/v33.webp')}}" style="transform:scale(1)!important"   alt="logo partenaire"></div>
  122.                 <div class="swiper-slide"><img src="{{asset('img/logo/v34.webp')}}" style="transform:scale(0.85)!important"   alt="logo partenaire"></div>
  123.                 <div class="swiper-slide"><img src="{{asset('img/logo/v29.webp')}}" style="transform:scale(0.35)!important"   alt="logo partenaire"></div>
  124.                 <div class="swiper-slide"><img src="{{asset('img/logo/v30.webp')}}" style="transform:scale(0.85)!important"   alt="logo partenaire"></div>
  125.                 <div class="swiper-slide"><img src="{{asset('img/logo/v5.webp')}}" style="transform:scale(1)"   alt="logo partenaire"></div>
  126.                 <div class="swiper-slide"><img src="{{asset('img/logo/v2.webp')}}" style="transform:scale(1)"   alt="logo partenaire"></div>
  127.                 <div class="swiper-slide"><img src="{{asset('img/logo/v3.webp')}}" style="transform:scale(1)"   alt="logo partenaire"></div>
  128.                 <div class="swiper-slide"><img src="{{asset('img/logo/v11.webp')}}" style="transform:scale(1)"  alt="logo partenaire"></div>
  129.                 <div class="swiper-slide"><img src="{{asset('img/logo/v10.webp')}}" style="transform:scale(1)"  alt="logo partenaire"></div>
  130.                 <div class="swiper-slide"><img src="{{asset('img/logo/v37.png')}}" style="transform:scale(0.9)!important"   alt="logo partenaire"></div>
  131.                 <div class="swiper-slide"><img src="{{asset('img/logo/v6.webp')}}" style="transform:scale(1.2)!important"   alt="logo partenaire"></div>
  132.                 <div class="swiper-slide"><img src="{{asset('img/logo/v8.webp')}}" style="transform:scale(1)"   alt="logo partenaire"></div>
  133.                 <div class="swiper-slide"><img src="{{asset('img/logo/v17.webp')}}" style="transform:scale(1.2)"   alt="logo partenaire"></div>
  134.                 <div class="swiper-slide"><img src="{{asset('img/logo/v13.webp')}}" style="transform:scale(1.2)"   alt="logo partenaire"></div>
  135.                 <div class="swiper-slide"><img src="{{asset('img/logo/v14.webp')}}" style="transform:scale(1.75)!important"   alt="logo partenaire"></div>
  136.                 <div class="swiper-slide"><img src="{{asset('img/logo/v18.webp')}}" style="transform:scale(1.1)!important"   alt="logo partenaire"></div>
  137.                 <div class="swiper-slide"><img src="{{asset('img/logo/v19.webp')}}" style="transform:scale(1.1)!important"   alt="logo partenaire"></div>
  138.                 <div class="swiper-slide"><img src="{{asset('img/logo/v20.webp')}}" style="transform:scale(1)!important"   alt="logo partenaire"></div>
  139.                 <div class="swiper-slide"><img src="{{asset('img/logo/v24.webp')}}" style="transform:scale(0.57)!important"   alt="logo partenaire"></div>
  140.                 <div class="swiper-slide"><img src="{{asset('img/logo/v27.webp')}}" style="transform:scale(0.78)!important"   alt="logo partenaire"></div>
  141.             </div>
  142.         </div>
  143.     </div>
  145. </div> <!-- Fermeture de la balise  -->
  147. <script>
  148.   {% include "home/1/newSVS.js" %}
  150.   var typednewsvs = new Typed('.typednewsvs', {
  151.     strings: [
  152.       '{{"Société Vigilance et Services"|trans}}<br><span class="elitePlus">+</span> {{"DE"|trans}} <span>{{"30 ANS D\"ÉXPERIENCE"|trans}}</span>', 
  153.       '{{"Société Vigilance et Services"|trans}}<br><span class="elitePlus">+</span> {{"DE"|trans}} <span>{{"300 RÉFÉRENCES"|trans}}</span>', 
  154.       '{{"Société Vigilance et Services"|trans}}<br><span class="elitePlus">+</span> {{"DE"|trans}} <span>{{"1800 EMPLOYÉS"|trans}}</span>', 
  155.       '{{"Société Vigilance et Services"|trans}}<br><span class="elitePlus">+</span> {{"DE"|trans}} <span>{{"1000 AGENTS FORMÉS"|trans}}</span>', 
  156.       '{{"Société Vigilance et Services"|trans}}<br><span class="elitePlus">+</span> {{"DE"|trans}} <span>{{"120 ENCADREUR"|trans}}S</span>',
  157.       '{{"Société Vigilance et Services"|trans}}<br><span class="elitePlus">+</span> {{"DE"|trans}} <span>{{"38 WILAYAS COUVERTES"|trans}}</span>', 
  158.       '{{"Société Vigilance et Services"|trans}}<br><span class="elitePlus">+</span> {{"DE"|trans}} <span>{{"500 ÉVÈNEMENTS ASSURÉS"|trans}}</span>', 
  159.       '{{"Société Vigilance et Services"|trans}}<br><span class="elitePlus">+</span> {{"DE"|trans}} <span>{{"4500 OPÉRATIONS AUDITÉES"|trans}}</span>', 
  160.       '{{"Société Vigilance et Services"|trans}}<br><span class="elitePlus">+</span> {{"DE"|trans}} <span>{{"2200 CONVOYAGES EFFECTUÉS"|trans}}</span>', 
  161.     ],
  162.     typeSpeed: 10,
  163.     startDelay: 1000,
  164.     backDelay: 2800,
  165.     loop: true, // Définissez loop sur true pour activer la boucle infinie.
  166.     cursorChar: '<i class="fas fa-circle"></i>',
  167.   });
  168.   
  169. var typedtextsvs = new Typed('.typedtextsvs', {
  170.     strings: [
  171.       '{{"SVS, l\'une des  pionnières dans le domaine de la sécurité, elle se distingue par son innovation et son engagement envers l\'excellence. Notre approche personnalisée protège les personnes, les biens et les valeurs, grâce à"|trans}} <span class="vigilence">{{"trois décennies d\'expérience en sécurité sans faille."|trans}}</span>',
  172.     ],
  173.     typeSpeed: 0,
  174.     startDelay: 2200,
  175.     loop: false, // Définissez loop sur true pour activer la boucle infinie.
  176.     cursorChar: '<i class="fas fa-circle"></i>',
  177.     onComplete: function() {
  178.           // Callback appelé lorsque la frappe est terminée
  179.           var cursor = document.querySelector('.forsvsText .typed-cursor');
  180.           if (cursor) {
  181.             cursor.setAttribute('style', 'visibility:hidden'); // Ajouter la classe pour la transition
  182.           }
  183.     }
  184. });
  186. </script>