Bretagne · 6 chambres · Pages d’accueil
Rivage
Une nuit au bord de l’eau
Scroll pour découvrir ↓
01 · Bretagne · 6 chambres
Séjour, spa & table d’hôtes
Hôtel boutique — chambres, séjour, réservation.
- 01
Chambres
Vue mer ou jardin · linge local · petit-déj inclus.
- 02
Spa
Sauna, bain nordique, massins sur réservation.
- 03
Table
Dîner du soir pour les hôtes — poisson du jour & légumes du coin.
01b · Technique
Fiche technique
Stack, mise en ligne et mon rôle sur ce build — pour recruteurs et tech leads.
- Technologies
- Next.js
- TypeScript
- React
- Tailwind CSS
- Librairies & outils
- Framer Motion
- next/image
- Déploiement
Démo locale /play — front Next.js, sans backend métier
- Rôle
Direction UI · intégration · interactions
- Conditions
Direction fictive (NDA) — même niveau de craft que missions réelles
02 · Dans le produit
Un scroll, un écran
Chaque section se cale à l’écran — continue après le dernier pour revenir au récit.
Bretagne · 6 chambres
Séjour, spa & table d’hôtes
Chambres
Vue mer ou jardin · linge local · petit-déj inclus.
Spa
Sauna, bain nordique, massins sur réservation.
Table
Dîner du soir pour les hôtes — poisson du jour & légumes du coin.
“Le bain nordique face à la baie à 7h du matin — on en parle encore.”
Disponibilités
Réserver votre chambre
Week-ends d’octobre encore ouverts · 2 nuits minimum.
RéserverRetour au récit
Tu as quitté les écrans démo — ensuite : tester, puis les notes de craft.
03 · Séjours
Ils ont prolongé d’une nuit
“Le bain nordique face à la baie à 7h du matin — on en parle encore.”
“Accueil impeccable, silence, vrai dépaysement à 3h de Paris.”
04 · Disponibilités
Réserver votre chambre
Week-ends d’octobre encore ouverts · 2 nuits minimum.
- →Hero + sections sous la fold (pas juste une accroche)
- →Hiérarchie visuelle et CTA principal
- →Densité d’info vs lisibilité
05 · Même famille
D’autres directions du même type — pour comparer densités et ambiances.
06 · Ce qu’on regarde
- 01Hero + sections sous la fold (pas juste une accroche)
- 02Hiérarchie visuelle et CTA principal
- 03Densité d’info vs lisibilité
- 04États interactifs (hover, sélection, feedback)