Decathlon · Voir en ligne
Landing Page — Decathlon App
Création d’une landing page marketing pour promouvoir l’app Decathlon : structure claire, sections éditoriales, et preuve sociale (avis) via slider.
HTMLCSSJavaScriptSlick.js
- Année
- 2023
- Stack
- HTML · CSS · JavaScript · Slick.js
- Type
- Réalisation
- Rôle
- Dev front + UX
Aperçu
Conception & réalisation
Problèmes rencontrés, décisions UX et livrables.
Problèmes identifiés
4 points- 1.Présenter une proposition de valeur claire (app + bénéfices) en quelques sections
- 2.Maintenir une bonne lisibilité sur une page longue (scan rapide)
- 3.Adapter le contenu mobile (ordre, CTA, blocs) sans perdre d’information
- 4.Ajouter une preuve sociale (avis) sans alourdir la page
Actions réalisées
4 livrables- 1.Hero orienté conversion (stores + QR code) + rappel CTA en bas de page
- 2.Sections alternées (media/texte) pour rythmer la lecture
- 3.Responsive : réorganisation des blocs et simplification sur mobile
- 4.Slider d’avis avec pagination et navigation
Code
javascriptSlider d’avis (Slick) + navigation
1$(document).ready(function () {2 $('.slider--object').slick({3 dots: true,4 dotsClass: 'slick-pastilles slick-pastilles-circles',5 arrows: false,6 infinite: false,7 slidesToShow: 3,8 slidesToScroll: 3,9 responsive: [10 { breakpoint: 1280, settings: { slidesToShow: 2, slidesToScroll: 2 } },11 { breakpoint: 768, settings: { slidesToShow: 1, slidesToScroll: 1 } }12 ]13 });14});1516$('.slider--prev').prop('disabled', true);17$('.slider--prev').click(() => $('.slider--object').slick('slickPrev'));18$('.slider--next').click(() => $('.slider--object').slick('slickNext'));1920$('.slider--object').on('afterChange', function (event, slick, currentSlide) {21 $('.slider--prev').prop('disabled', currentSlide === 0);22 $('.slider--next').prop('disabled', currentSlide === slick.slideCount - slick.options.slidesToShow);23});
Suite du parcours
Accéder aux autres projets ou me contacter.