Déclinaisons › Landing Page

Landing Page — swellr.fr

Sections et composants de la landing page Swellr. Architecture, hiérarchie visuelle et spécifications de chaque bloc de page.

01 — Aperçu miniature de la landing

Vue complète de la page swellr.fr dans un cadre navigateur — toutes les sections de haut en bas.

swellr.fr
Fonctionnalités À propos Équipe Contact
Télécharger
Disponible sur iOS & Android
Surf smarter,
live better
L'application dédiée aux surfeurs pour optimiser chaque session — prévisions, spots, communauté.
Télécharger l'app
En savoir plus
Vieux-Boucau
28°
Couvert · Jour 28°
Tout ce dont tu as besoin
🗺
Trouve ton spot
Carte interactive, affluence en temps réel, spots favoris.
🌊
Prévisions surf
Météo, houle, vent, marée — données fiables pour planifier.
👥
Surfe en communauté
Sessions, amis, événements — surfe ensemble.
Une interface épurée,
sans pub, juste pour le surf
Design minimaliste focalisé sur l'essentiel — les données qui comptent pour ta session.
🌊
L'équipe Swellr
AM
Anthony Mini
Dev & Chef de projet
MD
Maxime Durand
Marketing
AL
Antoine Lefebvre
Marketing digital
CK
Chloé Karakaya
UX/UI Design
LA
Lina Atitallah
Direction artistique
Fonctionnalités Équipe Contact CGU
© 2025 Swellr. MBA My Digital Start-up.
Architecture de la page — Hiérarchie narrative en 5 sections : accroche → fonctionnalités → expérience → équipe → footer.
Header

Fond blanc, position sticky
Logo teal · nav gris · CTA pill

Hero

Gradient #ebfafe → #fff
H1 48px ExtraBold · badge pill teal

Features

Grid 3 colonnes · shadow card
Icon 40px bg teal 10% · radius 12px

App Experience

Fond linear-gradient(135deg, #08272e, #0a3a42)
Texte blanc · mockup iPhone

Équipe

5 avatars 80px · grid 5 colonnes
Initiales colorées · LinkedIn

Footer

Fond #073742 · logo blanc
Liens semi-transparents

02 — Composants landing déconstructés

Chaque bloc de la landing reproduit à taille réelle pour spécification et implémentation.

Section Hero

Hero — Badge + H1 + Sous-titre + CTAs + Mockup iPhone flottant
Disponible sur iOS & Android
Surf smarter,
live better
L'application dédiée aux surfeurs pour optimiser chaque session — prévisions météo, repérage des spots, communauté surf.
🌊 Télécharger l'app
En savoir plus
Vieux-Boucau, Landes
28°
☁ Couvert
🌊
1.5m
Houle
🌬
35km/h
Vent
☀
UV 7
Index
Badge

Inter 12px · bg teal 10% · pill full

H1

Manrope ExtraBold 56px · tracking −1.5px · 2 lignes

Sous-titre

Inter Regular 17px · gris 700 · max-width 400px

Fond Hero

linear-gradient(180deg, #ebfafe → #fff)

Feature Cards — Grille 3 colonnes

Cartes fonctionnalités — Icône + Titre + Description
🗺
Trouve ton spot
Carte interactive avec affluence en temps réel, notation communautaire et spots favoris à portée de main.
🌊
Prévisions surf
Météo complète, hauteur de houle, vitesse du vent et horaires des marées pour planifier la session parfaite.
👥
Surfe en communauté
Sessions partagées, suivi des amis, événements locaux — rejoins la communauté Swellr.
Icône

48×48px · bg teal 10% · radius 12px · emoji 22px

Titre

Manrope Bold 17px · dark · tracking −0.3px

Carte

Fond blanc · border grey 150 · shadow-card

Section App Experience — Fond sombre

Section "une interface épurée" — gradient dark teal
🌊 App Experience
Une interface épurée,
sans pub, juste pour le surf
Design minimaliste focalisé sur les données qui comptent pour ta session. Pas de distractions, juste le surf.
✓
Sans publicité — expérience pure
✓
Données temps réel actualisées en continu
✓
Disponible hors ligne — cache intelligent
✓
Notifications alertes conditions idéales
🌊
Swellr App
Fond

linear-gradient(135deg, #08272e, #0a3a42)

H2

Manrope ExtraBold 36px · blanc · tracking −1px

Check items

Cercle teal 25% · check teal · Inter 13px blanc 75%

Section Équipe — 5 membres

Avatars circulaires 80px — initiales colorées + nom + rôle + LinkedIn
AM
Anthony Mini
Dev & Chef de projet
🔗 LinkedIn
MD
Maxime Durand
Marketing
🔗 LinkedIn
AL
Antoine Lefebvre
Marketing digital
🔗 LinkedIn
CK
Chloé Karakaya
UX/UI Design
🔗 LinkedIn
LA
Lina Atitallah
Direction artistique
🔗 LinkedIn
Correspondance couleur → membre
AM — #028490 Teal primaire
MD — #2D69C9 Bleu
AL — #3D5A80 Navy
CK — #4FA3B1 Teal Light
LA — #F05906 Session orange

Footer

Footer — Fond #073742 · Logo blanc · Liens · Mentions légales
Swellr
L'application mobile dédiée aux surfeurs. Conçue pour optimiser chaque session.
Produit
Fonctionnalités Prévisions surf Spots & Carte Communauté
Projet
Équipe À propos Contact
Légal
CGU Confidentialité Cookies
© 2025 Swellr — My Digital Start-up · MBA 2024-2026
Mentions légales Plan du site

03 — Tokens spécifiques landing

Valeurs de design tokens utilisées exclusivement sur le contexte web — breakpoints, espacements, containers et dimensions.

Containers & Layout
container-max-width
1200px
container-padding-x
48px / 24px
header-height
72px
header-height-mobile
60px
section-padding-y
96px
section-padding-y-mobile
56px
Typographie Web
h1-size
56px / 800
h1-size-mobile
36px / 800
h2-size
40px / 800
h3-size
28px / 700
body-size
17-18px / 400
nav-size
15px / 500
cta-size
15-16px / 700
Breakpoints
xs
Mobile
< 480px
sm
Small
480–767px
md
Tablet
768–1023px
lg
Desktop
1024–1279px
xl
Wide
≥ 1280px
Composants spécifiques Web
btn-height-lg
52px
btn-padding-x-lg
28px
feature-card-radius
16px
feature-icon-size
48×48px
team-avatar-size
80×80px
hero-iphone-width
240–280px
footer-bg
#073742
Comportement responsive : Sur mobile (<768px), la grille features passe en 1 colonne, la grille équipe en 2-3 colonnes et le hero adopte un layout colonne unique avec le mockup iPhone en dessous du texte. Le H1 descend de 56px à 36px.

Couleurs spécifiques landing

Token Valeur Usage Aperçu
--bg-hero #ebfafe → #ffffff Fond section hero (gradient)
--bg-dark #08272e → #0a3a42 Section App Experience (gradient)
--footer-bg #073742 Fond footer
--hero-teal-accent rgba(2,132,144,0.10) Badge hero · icône feature card
--shadow-hero-btn 0 8px 24px rgba(2,132,144,0.30) Ombre bouton CTA primaire hero
--nav-height 72px Hauteur header navigation sticky 72px