templates/home/home.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Pixelsior | Agence de communication digitale{% endblock %}
  5. {% block metas %}
  6.     <meta name="title" content="Pixelsior | Agence de communication digitale">
  7.     <meta name="description" content="Pixelsior, agence de communication digitale spécialisée dans le webmarketing et le développement web. Faites confiance à une agence forte de 12 années d'expérience.">
  8. {% endblock %}
  10. {% block stylesheets %}
  11.     {{ parent() }}
  12. {% endblock %}
  14. {% block body %}
  16.     <!-- Heroslider Area -->
  17.     <div class="heroslider-area">
  19.         <img class="banner-bg" src="{{ asset('assets/images/webp/banner-bg.webp') }}" alt="Bannière"/> 
  20.         <div class="banner-overlay pixelsior-menu collapse" id="pixelsior-menu-overlay"></div>
  21.         <div class="heroslider-header-container">
  22.             {# <div class="container">
  24.                 <nav class="navbar px-0 py-5 d-flex justify-content-space-between align-items-center">
  25.                     <a class="navbar-brand" href="{{ custom_path('app_home') }}">Pixelsior</a>
  26.                     <a class="navbar-menu-toggler " href="#"><i class="fas fa-bars"></i></a>
  27.                     
  28.                 </nav>
  29.             </div> #}
  30.             <div class="container heroslider-header-container pt-xl-5 pt-3">
  31.                 <nav class="navbar sticky-top  navbar-expand-lg light">
  32.                     <div class="container-fluid">
  33.                         <a class="navbar-brand" href="{{ custom_path('app_home') }}"><img src="{{ asset('assets/images/webp/logo/logo_pixelsior_blanc.webp') }}" alt="logo-pixelsior" width="120" height="auto"></a>
  34.                         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".pixelsior-menu" aria-controls="pixelsior-menu-content pixelsior-menu-overlay" aria-expanded="false" aria-label="Toggle navigation">
  35.                             <i class="fas fa-bars"></i>
  36.                         </button>
  37.                     
  38.                         <div class="collapse navbar-collapse pixelsior-menu" id="pixelsior-menu-content">
  39.                         <ul class="navbar-nav mr-auto">
  40.                             <li class="nav-item">
  41.                                 <a class="nav-link active" href="{{ custom_path('app_home') }}">Accueil</a>
  42.                             </li>
  43.                             <li class="nav-item">
  44.                                 <a class="nav-link" href="{{ custom_path('app_about_us') }}">Qui sommes-nous ?</a>
  45.                             </li>
  46.                             <li class="nav-item">
  47.                                 <a class="nav-link" href="{{ custom_path('app_our_services') }}">Nos services</a>
  48.                             </li>
  49.                             <li class="nav-item">
  50.                                 <a class="nav-link" href="{{ custom_path('app_our_catalogues') }}">Nos catalogues</a>
  51.                             </li>
  52.                             <li class="nav-item">
  53.                                 <a class="nav-link" href="{{ custom_path('app_blog') }}">Blog</a>
  54.                             </li>
  55.                             <li class="nav-item">
  56.                                 <a class="nav-link" href="{{ custom_path('app_contact') }}">Contact</a>
  57.                             </li>
  58.                             <li class="nav-item">
  59.                                 {% if app.user != null %}
  60.                                 <a class="nav-link" href="{{ custom_path('app_auth_logout') }}">Se déconnecter</a>
  61.                                 {% else %}
  62.                                 {# <a class="nav-link" href="{{ custom_path('app_auth_login') }}">Se connecter</a> #}
  63.                                 {% endif %}
  64.                             </li>
  65.                             
  66.                         </ul>
  67.                     </div>
  68.                 </nav>
  69.             </div>
  70.         </div>
  71.         <!-- Heroslider Slider -->
  72.         <div class="heroslider-slider heroslider-animated tm-slider-dots tm-slider-dots-left">
  73.             
  74.             <!-- Heroslider Single -->
  75.             <div class="heroslider-singleslider d-flex align-items-center h-100">
  76.                 <div class="container">
  77.                     <div class="row align-items-center">
  78.                         <div class="col-lg-12 col-md-12 col-12 order-2 order-md-1">
  79.                             <div class="heroslider-content text-white pt-5 pb-0">
  80.                                 <h1>
  81.                                     Vous êtes à <br>
  82.                                     1 Pixel de <span class="text-yellow">votre</span> <br>
  83.                                     <span class="text-yellow">succès.</span>
  84.                                 </h1>
  86.                             </div>
  87.                             
  88.                         </div>
  89.                     </div>
  90.                 </div>
  91.             </div>
  92.             <!--// Heroslider Single -->
  94.         </div>
  95.         <!--// Heroslider Slider -->
  96.         <div class="heroslider-footer-container ">
  97.             <div class="container">
  98.                 <div class="heroslider-footer text-white">
  99.                     <ul>
  100.                         <li>Agence Digitale</li>
  101.                         <li style="font-size: xx-large; font-weight: bold;">360°</li>
  102.                     </ul>
  103.                 </div>
  104.             </div>
  105.         </div>
  106.     </div>
  107.     <!--// Heroslider Area -->
  108.     <div class="tm-section about-us-area tm-padding-section pb-3">
  109.         <div class="container">
  110.             <div class="row">
  111.                 <div class="col-lg-6">
  112.                     <h2><span class="text-yellow">Pixelsior,</span> votre agence de communication digitale en France.</h2>
  113.                 </div>
  114.                 <div class="col-lg-6 position-relative">
  115.                     <p class="mb-5">
  116.                         Une agence de marketing digital experte dans son domaine. Son principal objectif : satisfaire ses clients en leur permettant d’atteindre le succès qu’ils méritent. Au travers d’une technologie unique et des idées créatives, <span class="text-yellow text-bold">Pixelsior</span> offre une large gamme de services en marketing digital, pour un résultat digne de vos exigences.
  117.                     </p>
  118.                     <img class="leaf leaf-3" src="{{ asset('assets/images/webp/leaf-3.webp') }}" alt="Feuille n°3">
  119.                 </div>
  120.             </div>
  121.         </div>
  122.     </div>
  123.     <!-- Main Content -->
  124.     <main class="main-content">
  125.         <!-- Portfolio Area -->
  126.         {% include '/partials/portfolio.html.twig' %}
  127.         <p class="text-center p-3"><a href="{{ custom_path('app_our_services') }}" class="see-more-link text-bold">Voir plus</a></p>
  128.         
  129.         <!-- Portfolio Area -->
  130.         <!-- Team Introduction Area -->
  131.         <div class="tm-section team-introduction-area tm-padding-section pb-5 bg-white">
  132.             <div class="container">
  133.                 <h2 class="text-center">Une équipe experte en<br> communication digitale<span class="text-yellow">.</span></h2>
  134.                  <p class="text-center">
  135.                     Notre équipe professionnelle vous accompagne dans votre projet et vous propose<br> les solutions les plus pertinentes pour votre entreprise.
  136.                 </p>
  137.             </div>
  138.         </div>
  139.         <!-- Team Introduction Area -->
  140.         <!-- Team Area -->
  141.         <div class="tm-section team-area pb-5">
  142.             <div class="">
  143.                 <div class="pixelsior-team-slider-active tm-slider-arrow-2">
  145.                     <!-- Testimonial Single -->
  146.                     <div class="tm-testimonial-slideritem tm-padding-section">
  147.                         <img class="tm-testimonial-slideritem-bg" src="{{ asset('assets/images/webp/illustration/banner-5.webp') }}" alt="Equipe Rédacteurs">
  148.                         <div class="container">
  150.                             <div class="row tm-testimonial">
  151.                                 <div class="col-lg-6 tm-testimonial-author">
  152.                                     <div class="tm-testimonial-authorimage">
  153.                                         <img src="{{ asset('assets/images/webp/illustration/team-1.webp') }}" alt="Equipe n°1">
  154.                                     </div>
  155.                                 </div>
  156.                                 <div class="col-lg-6 tm-testimonial-content">
  157.                                     <div class="tm-section-title">
  158.                                         <h3 class="text-white">Rédacteurs</h3>
  159.                                     </div>
  160.                                     <p>Chargés de la rédaction de contenu (site internet, blog, réseaux sociaux, etc.), ils sont la plume de <strong>Pixelsior</strong>. Capable de rédiger rapidement et qualitativement, nos rédacteurs s’adaptent au client et font preuve de force de proposition. </p>
  161.                                     <a href="{{ custom_path('app_our_services_webmarketing') }}" class="tm-button button-w text-white border-white mt-3">Voir plus</a>
  162.                                 </div>
  163.                             </div>
  164.                         </div>
  165.                     </div>
  166.                     <!--// Testimonial Single -->
  168.                     <!-- Testimonial Single -->
  169.                     <div class="tm-testimonial-slideritem tm-padding-section">
  170.                         <img class="tm-testimonial-slideritem-bg" src="{{ asset('assets/images/webp/illustration/banner-4.webp') }}" alt="Equipe Graphistes">
  171.                         <div class="container">
  172.                             <div class="row tm-testimonial">
  173.                                 
  174.                                 <div class="col-lg-6 tm-testimonial-author">
  175.                                     <div class="tm-testimonial-authorimage">
  176.                                         <img src="{{ asset('assets/images/webp/illustration/team-2.webp') }}" alt="Equipe n°2">
  177.                                     </div>
  178.                                 </div>
  179.                                 <div class="col-lg-6 tm-testimonial-content">
  180.                                     <div class="tm-section-title">
  181.                                         <h3 class="text-white">Graphistes</h3>
  182.                                     </div>
  183.                                     <p>Pro de la communication visuelle, le rôle de nos graphistes consiste à concevoir, réaliser et/ou créer différents éléments graphiques (illustrations, animations, posts, etc.). Le tout, selon les envies et les besoins du client.</p>
  184.                                     <a href="{{ custom_path('app_our_services_graphic_design') }}" class="tm-button button-w text-white border-white mt-3">Voir plus</a>
  185.                                 </div>
  186.                             </div>
  187.                         </div>
  188.                     </div>
  189.                     <!--// Testimonial Single -->
  190.                     <!-- Testimonial Single -->
  191.                     <div class="tm-testimonial-slideritem tm-padding-section">
  192.                         <img class="tm-testimonial-slideritem-bg" src="{{ asset('assets/images/webp/illustration/banner-3.webp') }}" alt="Equipe Développeurs">
  193.                         <div class="container">
  194.                             <div class="row tm-testimonial">
  195.                                 
  196.                                 <div class="col-lg-6 tm-testimonial-author">
  197.                                     <div class="tm-testimonial-authorimage">
  198.                                         <img src="{{ asset('assets/images/webp/illustration/team-3.webp') }}" alt="Equipe n°3">
  199.                                     </div>
  200.                                 </div>
  201.                                 <div class="col-lg-6 tm-testimonial-content">
  202.                                     <div class="tm-section-title">
  203.                                         <h3 class="text-white">Développeurs</h3>
  204.                                     </div>
  205.                                     <p>Chargés de la réalisation technique d’un projet, nos développeurs proposent une solution adaptée avec la conception et le développement des sites internet, applications ou tout autre logiciel. En effectuant plusieurs tests en amont, ils offrent au client la meilleure version en accord parfait à ses attentes</p>
  206.                                     <a href="{{ custom_path('app_our_services_developpement_web') }}" class="tm-button button-w text-white border-white mt-3">Voir plus</a>
  207.                                 </div>
  208.                             </div>
  209.                         </div>
  210.                     </div>
  211.                     <!--// Testimonial Single -->
  213.                     <!-- Testimonial Single -->
  214.                     <div class="tm-testimonial-slideritem tm-padding-section">
  215.                         <img class="tm-testimonial-slideritem-bg" src="{{ asset('assets/images/webp/illustration/banner-2.webp') }}" alt="Equipe SEO">
  216.                         <div class="container">
  217.                             <div class="row tm-testimonial">
  218.                                 <div class="col-lg-6 tm-testimonial-author">
  219.                                     <div class="tm-testimonial-authorimage">
  220.                                         <img src="{{ asset('assets/images/webp/illustration/team-5.webp') }}" alt="Equipe n°4">
  221.                                     </div>
  222.                                 </div>
  223.                                 <div class="col-lg-6 tm-testimonial-content">
  224.                                     <div class="tm-section-title">
  225.                                         <h3 class="text-white">SEO</h3>
  226.                                     </div>
  227.                                     <p>Spécialistes du référencement naturel, nos SEO Manager aident l’entreprise à améliorer leur positionnement sur les moteurs de recherche. Toujours à la recherche de plus de visibilité, leurs missions varient de l’audit technique à la stratégie de mots-clés. </p>
  228.                                     <a href="{{ custom_path('app_our_services_referencement') }}" class="tm-button button-w text-white border-white mt-3">Voir plus</a>
  229.                                 </div>
  230.                             </div>
  231.                         </div>
  232.                     </div>
  233.                     <!--// Testimonial Single -->
  234.                     <!-- Testimonial Single -->
  235.                     <div class="tm-testimonial-slideritem tm-padding-section">
  236.                         <img class="tm-testimonial-slideritem-bg" src="{{ asset('assets/images/webp/illustration/banner-1.webp') }}" alt="Equipe Social media manager">
  237.                         <div class="container">
  238.                             <div class="row tm-testimonial">
  239.                                 <div class="col-lg-6 tm-testimonial-author">
  240.                                     <div class="tm-testimonial-authorimage">
  241.                                         <img src="{{ asset('assets/images/webp/illustration/team-4.webp') }}" alt="Equipe n°1">
  242.                                     </div>
  243.                                 </div>
  244.                                 <div class="col-lg-6 tm-testimonial-content">
  245.                                     <div class="tm-section-title">
  246.                                         <h3 class="text-white">Social media manager</h3>
  247.                                     </div>
  248.                                     <p>Intermédiaires entre la marque et son audience, nos Social Media Managers parle au nom du client et exerce une veille sur sa marque. Leur but : créer de l’engagement, fidéliser l’audience et acquérir de nouveaux prospects. </p>
  249.                                     <a href="{{ custom_path('app_our_services_reseaux_sociaux') }}" class="tm-button button-w text-white border-white mt-3">Voir plus</a>
  250.                                 </div>
  251.                             </div>
  252.                         </div>
  253.                     </div>
  254.                     <!--// Testimonial Single -->
  256.                 </div>
  257.             </div>
  258.         </div>
  259.         <!--// Team Area -->
  260.         <!-- Experience Area -->
  261.         <div class="tm-section experience-area tm-padding-section bg-white pb-3">
  262.             <div class="container">
  263.                 <h2 class="text-center">Nos 12 années d’expérience<span class="text-yellow">.</span></h2>
  264.                  <p class="text-center">
  265.                     <strong>Pixelsior</strong> est fière de compter plusieurs années de collaboration avec des particuliers, des <br> entreprises de toutes tailles, de différents secteurs, pour les aider à atteindre leurs objectifs <br> de communication. 
  266.                 </p>
  267.                 <div class="row pt-3">
  268.                     <div class="col-lg-12">
  269.                         <!-- Slider main container -->
  270.                         <div class="swiper swiper-experience-area">
  271.                             <!-- Additional required wrapper -->
  272.                             <div class="swiper-wrapper">
  273.                                 <!-- Slides -->
  274.                                 <div class="swiper-slide"><img class="swiper-slide-img" src="{{ asset('assets/images/webp/partenaires/af_logo_d2.webp') }}" alt="Aroma Forest"/> </div>
  275.                                 <div class="swiper-slide"><img class="swiper-slide-img" src="{{ asset('assets/images/webp/partenaires/hur_logo_couleur.webp') }}" alt="C Hurrya"/></div>
  276.                                 <div class="swiper-slide"><img class="swiper-slide-img" src="{{ asset('assets/images/webp/partenaires/isabelle_vigier.webp') }}" alt="Isabelle Vigier"/></div>
  277.                                 <div class="swiper-slide"><img class="swiper-slide-img" src="{{ asset('assets/images/webp/partenaires/logo_tobywallet_final_couleur.webp') }}" alt="Toby Wallet"/></div>
  278.                                 <div class="swiper-slide"><img class="swiper-slide-img" src="{{ asset('assets/images/webp/partenaires/logo-desmercieres.webp') }}" alt="Desmercières"/></div>
  279.                                 <div class="swiper-slide"><img class="swiper-slide-img" src="{{ asset('assets/images/webp/partenaires/logo-fontaine-freres-2-1024x327-1.webp') }}" alt="Fontaine Frères"/></div>
  280.                                 <div class="swiper-slide"><img class="swiper-slide-img" src="{{ asset('assets/images/webp/partenaires/Logo-Pixelforce-horizontal.webp') }}" alt="Pixelforce"/></div>
  281.                                 <div class="swiper-slide"><img class="swiper-slide-img" src="{{ asset('assets/images/webp/partenaires/stop_pizza_logo.webp') }}" alt="Stop Pizza"/></div>
  282.                                 <div class="swiper-slide"><img class="swiper-slide-img" src="{{ asset('assets/images/webp/partenaires/vba_logo_couleur.webp') }}" alt="Votre buyer Agent"/></div>
  283.                                 <div class="swiper-slide"><img class="swiper-slide-img" src="{{ asset('assets/images/webp/partenaires/logo-esther-shiatsu.webp') }}" alt="Esther Lazaro, Shiatsu"/></div>
  284.                                 <div class="swiper-slide"><img class="swiper-slide-img" src="{{ asset('assets/images/webp/partenaires/groupe-reynard.webp') }}" alt="Groupe Reynardt"/></div>
  285.                                 <div class="swiper-slide"><img class="swiper-slide-img" src="{{ asset('assets/images/png/partenaires/partenaire-securitas_direct.svg') }}" alt="Securitas"/></div>
  289.                             </div>
  290.                         </div>
  291.                        
  292.                     </div>
  293.                 </div>
  294.             </div>
  295.         </div>
  296.         <!-- Experience Area -->
  297.         
  298.         <!-- Google badge -->
  299.         <div class="tm-section google-badge tm-padding-section bg-white px-3">
  300.             <div class="container">
  301.                 <div class="row pt-3">
  302.                     <div class="col-lg-12">
  303.                         <!-- Slider main container -->
  304.                         <div class="swiper swiper-google-badge">
  305.                             <!-- Additional required wrapper -->
  306.                             <div class="swiper-wrapper">
  307.                                 <!-- Slides -->
  308.                                 <div class="swiper-slide"><img class="swiper-slide-google-badge-img" src="{{ asset('assets/images/webp/google-badge/badge-ads-apps.webp') }}" alt="Googles ads apps"/> </div>
  309.                                 <div class="swiper-slide"><img class="swiper-slide-google-badge-img" src="{{ asset('assets/images/webp/google-badge/badge-ads-display.webp') }}" alt="Googles ads display"/></div>
  310.                                 <div class="swiper-slide"><img class="swiper-slide-google-badge-img" src="{{ asset('assets/images/webp/google-badge/badge-ads-search.webp') }}" alt="Googles ads search"/></div>
  311.                                 <div class="swiper-slide"><img class="swiper-slide-google-badge-img" src="{{ asset('assets/images/webp/google-badge/badge-ads-video.webp') }}" alt="Googles ads video"/></div>
  312.                                 <div class="swiper-slide"><img class="swiper-slide-google-badge-img" src="{{ asset('assets/images/webp/google-badge/badge-shopping-ads.webp') }}" alt="Shopping ads"/></div>
  313.                             </div>
  314.                         </div>
  315.                     </div>
  316.                 </div>
  317.             </div>
  318.         </div>
  319.         <!-- Google badge -->
  320.         
  321.         <!-- Testimonial Area -->
  322.         <div class="tm-section testimonial-area tm-padding-section bg-white">
  323.             <div class="container">
  324.                 <div class="row justify-content-center">
  325.                     <div class="col-xl-7 col-lg-8 col-md-10 col-12">
  326.                         <div class="tm-section-title text-center">
  327.                             <h2>Témoignages<span class="text-yellow">.</span></h2>
  328.                         </div>
  329.                     </div>
  330.                 </div>
  331.                 <div class="testimonial-slider-active tm-slider-arrow-2">
  333.                     <!-- Testimonial Single -->
  334.                     <div class="tm-testimonial-slideritem">
  335.                         <div class="tm-testimonial">
  336.                             <div class="tm-testimonial-content">
  337.                                 
  338.                                 
  339.                                 <p>Bientôt dix ans que je travaille avec Elina . C'est un grand plaisir de te suivre avec PIXELSIOR pour le projet LEVITAORA  . Formidable équipe que tu manages avec bienveillance . Bonne continuation</p>
  340.                                 <h5 class="mt-3">Eric Gildas TARY</h5>
  341.                             </div>
  342.                         </div>
  343.                     </div>
  344.                     <!--// Testimonial Single -->
  346.                         <!-- Testimonial Single -->
  347.                     <div class="tm-testimonial-slideritem">
  348.                         <div class="tm-testimonial">
  349.                             <div class="tm-testimonial-content">
  350.                                 
  351.                                 
  352.                                 <p>Professionnelle à l'écoute, Elina étudie les besoins de ses clients au plus grand soin et a une vision très utile de tout ce qui concerne le web</p>
  353.                                 <h5 class="mt-3">Julien Fonverne - Osthéopathe</h5>
  354.                             </div>
  355.                         </div>
  356.                     </div>
  357.                     <!--// Testimonial Single -->
  358.                         <!-- Testimonial Single -->
  359.                     <div class="tm-testimonial-slideritem">
  360.                         <div class="tm-testimonial">
  361.                             <div class="tm-testimonial-content">
  362.                                 
  363.                                 
  364.                                 <p>Merci beaucoup à toute l'équipe et plus particulièrement à Elina et Jordan avec qui j'ai pu beaucoup échanger pour la création de mon logo, de mon logo animé, de mon flyer et mon site internet ! Vous avez été très à l'écoute de mes attentes et vous avez su les réaliser. Je suis très satisfaite du résultat !! Je vous recommanderai avec grand plaisir !</p>
  365.                                 <h5 class="mt-3">Aimée LECLERC - (Raise You Up STUDIO)</h5>
  366.                             </div>
  367.                         </div>
  368.                     </div>
  369.                     <!--// Testimonial Single -->
  370.                         <!-- Testimonial Single -->
  371.                     <div class="tm-testimonial-slideritem">
  372.                         <div class="tm-testimonial">
  373.                             <div class="tm-testimonial-content">
  374.                                 
  375.                                 
  376.                                 <p>Un grand merci à Elina et à son équipe pour avoir fait de mon projet une réalité👍 Elle est très attentive aux suggestions, toujours prête pour des changements, des améliorations, créative et toujours en contact avec moi. Je souhaite la prospérité à votre entreprise et espère que nous coopérerons à l'avenir✨. Je suis contente de l'expérience. Merci beaucoup!🙂</p>
  377.                                 <h5 class="mt-3">Marina Kleter</h5>
  378.                             </div>
  379.                         </div>
  380.                     </div>
  381.                     <!--// Testimonial Single -->
  383.                 </div>
  384.             </div>
  385.         </div>
  386.         <!--// Testimonial Area -->
  387.         {% include '/partials/contact_us.html.twig' %}
  389.     </main>
  390.     <!--// Main Content -->
  391.    
  392. {% endblock %}
  394. {% block javascripts %}
  395.     {{ parent() }}
  396.     <script type="text/javascript">
  398.         const swiper_experience_area = new Swiper('.swiper.swiper-experience-area', {
  399.             // Optional parameters
  400.             direction: 'horizontal',
  401.             loop: true,
  402.             pagination: false,
  403.             navigation: false,
  404.             scrollbar: false,
  405.             autoplay: {
  406.                 delay: 3000,
  407.             },
  408.             centeredSlides : true,
  409.             slidesPerView: 1,
  410.             spaceBetween: 10,
  411.             // Responsive breakpoints
  412.             breakpoints: {
  413.                 // when window width is >= 320px
  414.                 320: {
  415.                     slidesPerView: 1,
  416.                     spaceBetween: 20
  417.                 },
  418.                 // when window width is >= 480px
  419.                 480: {
  420.                     slidesPerView: 2,
  421.                     spaceBetween: 30
  422.                 },
  423.                 // when window width is >= 640px
  424.                 640: {
  425.                     slidesPerView: 4,
  426.                     spaceBetween: 40
  427.                 }
  428.             }
  429.         });
  431.         const swiper_google_badge = new Swiper('.swiper.swiper-google-badge', {
  432.             // Optional parameters
  433.             direction: 'horizontal',
  434.             loop: true,
  435.             pagination: false,
  436.             navigation: false,
  437.             scrollbar: false,
  438.             autoplay: {
  439.                 delay: 5500,
  440.             },
  441.             centeredSlides : true,
  442.             slidesPerView: 1,
  443.             spaceBetween: 10,
  444.             // Responsive breakpoints
  445.             breakpoints: {
  446.                 // when window width is >= 320px
  447.                 320: {
  448.                     slidesPerView: 1,
  449.                     spaceBetween: 20
  450.                 },
  451.                 // when window width is >= 480px
  452.                 480: {
  453.                     slidesPerView: 2,
  454.                     spaceBetween: 30
  455.                 },
  456.                 // when window width is >= 640px
  457.                 640: {
  458.                     slidesPerView: 4,
  459.                     spaceBetween: 40
  460.                 }
  461.             }
  462.         });
  463.     </script>
  464. {% endblock %}