Decathlon· 2023www.decathlon.fr/landing/application-decathlon-decathlon/_/R-a-appli-decathlon(new tab)
Landing Page — Decathlon App.
Marketing landing page for the Decathlon app: conversion hero, editorial sections and a reviews slider to support acquisition.
htmlcssjavascriptslick.js
Challenges
- 01.Present a clear value proposition (app + benefits) in a few sections
- 02.Keep good readability on a long page (quick scan)
- 03.Adapt mobile content (order, CTA, blocks) without losing information
- 04.Add social proof (reviews) without weighing the page down
Solutions
- 01.Conversion-oriented hero (stores + QR code) + CTA reminder at the bottom of the page
- 02.Alternating sections (media/text) to pace the reading
- 03.Responsive: block reordering and simplification on mobile
- 04.Reviews slider with pagination and navigation
Reviews slider (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});
→ NextOther projects