Booki

Pour accompagner le lancement de Booki, j’ai intégré la page d’accueil du site à partir des maquettes Figma fournies. L’objectif était double : restituer fidèlement l’interface conçue par le designer et garantir une base de code propre, pérenne et facile à faire évoluer. J’ai structuré l’HTML de manière sémantique (header, nav, main, sections, articles) afin d’améliorer à la fois l’accessibilité et le SEO technique. La mise en page s’appuie sur Flexbox et CSS Grid pour respecter précisément les alignements, les rythmes typographiques et les espacements définis dans la maquette, quel que soit le format d’écran.

Côté CSS, j’ai adopté une convention de nommage claire (BEM) et organisé les styles pour favoriser la réutilisation des composants (cartes d’hébergement, filtres, blocs activités, header, pied de page). Les états de survol et de focus ont été travaillés pour offrir un feedback immédiat et accessible au clavier. Les images ont été optimisées au format et aux dimensions attendues, avec une attention portée au ratio et au recadrage pour préserver la qualité visuelle. Le résultat est une interface nette, cohérente et responsive, qui conserve l’intention créative du design tout en restant légère et performante.

Pour Booki, les bénéfices sont concrets : une page d’accueil fiable et lisible, qui inspire confiance, met en valeur l’offre (hébergements, activités) et facilite la navigation dès la première visite. Le code sémantique et la structure CSS modulaire accélèrent les itérations futures (ajout de pages, de filtres ou de composants), tout en limitant les régressions. L’entreprise dispose ainsi d’une fondation solide pour déployer rapidement de nouvelles fonctionnalités, améliorer le référencement et convertir plus efficacement ses visiteurs en prospects.