Landing Page — Decathlon App.
Landing page marketing pour l'app Decathlon : hero conversion, sections éditoriales et slider d'avis pour soutenir l'acquisition.
htmlcssjavascriptslick.js
Challenges
- 01.Présenter une proposition de valeur claire (app + bénéfices) en quelques sections
- 02.Maintenir une bonne lisibilité sur une page longue (scan rapide)
- 03.Adapter le contenu mobile (ordre, CTA, blocs) sans perdre d’information
- 04.Ajouter une preuve sociale (avis) sans alourdir la page
Solutions
- 01.Hero orienté conversion (stores + QR code) + rappel CTA en bas de page
- 02.Sections alternées (media/texte) pour rythmer la lecture
- 03.Responsive : réorganisation des blocs et simplification sur mobile
- 04.Slider d’avis avec pagination et navigation
Slider d’avis (Slick) + navigationjavascript
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});
→ SuiteAutres projets