Transformed Academy

Type : Site web vitrine
Client : Salon de beauté & académie de formation professionnelle (Royaume-Uni)
URL en production : https://transformed-academy.netlify.app/
Langue du site : Anglais (marché britannique — Hereford, UK)

1. Présentation du projet

Transformed Academy & Salon est un site web vitrine conçu pour un salon de beauté anglais qui cumule deux activités complémentaires : la prestation de soins esthétiques en salon et la formation professionnelle des futurs praticiens du secteur.

Le site sert de vitrine digitale premium pour l'établissement. Il présente l'offre de services (coiffure, épilation, soins du corps, soins du visage, onglerie), les programmes de formation (extensions de cils, microblading, soins du visage avancés, nail art), l'équipe, l'univers de la marque et les actualités du salon. Il oriente les visiteurs vers la prise de rendez-vous en ligne via une plateforme externe de réservation.

Le projet a été initié à partir d'un cahier des charges détaillé (PRD, wireframes, spécifications techniques) et développé avec une approche mobile-first, en visant une image de marque élégante, moderne et haut de gamme — en phase avec l'univers de la beauté professionnelle.

2. Objectifs de la solution

3. Public cible

Clients du salon

Personnes recherchant des soins de beauté de qualité (coiffure, épilation, soins du visage et du corps, onglerie). Elles privilégient une expérience premium, la confiance en l'équipe et la simplicité de prise de rendez-vous.

Stagiaires et futurs professionnels

Praticiens ou personnes en reconversion souhaitant acquérir des compétences certifiantes dans des domaines spécialisés (extensions de cils, microblading, soins avancés, nail art). Ce public recherche des informations détaillées sur les programmes, les tarifs, la durée et les débouchés.

Visiteurs locaux (Hereford, UK)

Résidents et visiteurs de la région à la recherche d'un salon de beauté ou d'une académie de formation reconnue.

4. Fonctionnalités

4.1. Page d'accueil (/)

• Hero plein écran avec visuel immersif, titre accrocheur et deux CTA principaux : réserver un soin / rejoindre une formation.
• Section de bienvenue présentant la philosophie du salon.
• Services phares : aperçu des 3 catégories principales (coiffure, épilation, soins du corps) avec liens vers la page Services.
• Formations professionnelles : présentation visuelle des programmes avec galerie d'images.
• Témoignages clients : carousel d'avis.
• Portrait de la fondatrice (Emma Richardson) avec lien vers l'équipe.
• Dernières actualités : aperçu des 3 derniers articles du blog.
• Fil Instagram : carousel des publications du compte @aestheticstraininghereford.
• Section CTA finale invitant à réserver ou explorer les formations.

4.2. Page Services (/services)

• Catalogue complet des 5 familles de services avec descriptions, visuels et grille tarifaire indicative (en livres sterling).
• Navigation par ancres depuis le menu déroulant (Hair, Waxing, Body, Facial, Nail).
• Section FAQ en accordéon (Radix UI) pour répondre aux questions fréquentes.
• Bouton de réservation vers la page Booking.

4.3. Page Formations (/trainings)

• Présentation détaillée de 4 programmes : Lash Extensions, Microblading, Advanced Facial, Nail Art Masterclass.
• Pour chaque formation : niveau, durée, prix, objectifs pédagogiques.
• Tableau comparatif des programmes.
• Témoignages d'anciens stagiaires.
• CTA vers la réservation / inscription.

4.4. Page The Salon (/salon)

• Présentation de l'établissement et de son histoire.
• Statistiques clés (expérience, clients, produits premium).
• Présentation de l'équipe (4 membres avec biographies).
• Galerie photo en grille masonry.
• Intégration du fil Instagram.

4.5. Blog (/blog et /blog/[slug])

• Liste des articles avec filtrage par catégories (Beauty Tips, Training, Skincare, Hair, Beauty Business).
• Pages de détail pour chaque article (contenu statique).
• Mise en avant des tendances beauté, conseils skincare et contenus formation.

4.6. Page Réservation (/booking)

• Page intermédiaire (« tampon ») avant redirection vers la plateforme de réservation.
• Informations sur la politique d'annulation (24 h), la durée des rendez-vous et les moyens de paiement.
• Témoignages clients.
• Redirection vers Fresha pour finaliser la réservation en ligne.

4.7. Page Contact (/contact)

• Coordonnées complètes : adresse (Hereford, UK), téléphone, e-mail, horaires d'ouverture.
• Formulaire de contact (nom, e-mail, sujet, message).
• Emplacement carte (placeholder).

4.8. Navigation et éléments transverses

• Header fixe avec effet au scroll (transparent → fond blanc), menu responsive et sous-menu Services.
• Bouton « Book Now » redirigeant vers salon.transformed-academy.com.
• Footer : liens rapides, coordonnées, réseaux sociaux (Instagram, Facebook, Twitter), formulaire newsletter.
• Animations au scroll (RevealOnScroll, Framer Motion) pour une expérience fluide et premium.
• Font Switcher : bascule entre Montserrat et HK Grotesk (outil de prototypage typographique).

4.9. Fonctionnalités prévues / partiellement implémentées

5. Éléments techniques

5.1. Stack technologique

5.2. Architecture du projet

transformed-academy-by-v0-version1-main/
├── app/                    # Pages Next.js (App Router)
│   ├── page.tsx            # Accueil
│   ├── services/
│   ├── trainings/
│   ├── salon/
│   ├── blog/               # Liste + [slug] dynamique
│   ├── booking/
│   ├── contact/
│   └── layout.tsx          # Layout racine (fonts, header, footer)
├── components/
│   ├── layout/             # Header, Footer
│   ├── home/               # Sections page d'accueil
│   ├── ui/                 # Composants shadcn/ui + composants custom
│   └── premium-layout.tsx  # Animations, parallax, transitions
├── hooks/                  # Hooks React (toast, mobile)
├── lib/                    # Utilitaires (cn, etc.)
├── public/                 # Assets statiques (images, fonts)
├── docs/                   # Documentation projet (PRD, wireframes, specs)
├── scripts/                # Script de build Netlify
├── netlify.toml            # Configuration déploiement
└── tailwind.config.ts      # Design tokens (rose, gold, charcoal)

5.3. Design system

• Palette : rose (#ff0080 et déclinaisons), or, charcoal — cohérente avec l'univers beauté premium.
• Typographie : combinaison serif (titres — Playfair, Cormorant) et sans-serif (corps — Montserrat, HK Grotesk).
• Composants réutilisables : boutons (btn-primary, btn-secondary), cartes modernes, sections avec RevealOnScroll, accordéons FAQ.
• Responsive : approche mobile-first, menu hamburger sur tablette/mobile, grilles adaptatives.

5.4. Performance et SEO

• Images via next/image (mode unoptimized pour compatibilité Netlify).
• Métadonnées SEO dans layout.tsx (title, description, keywords).
• Chargement prioritaire des images hero (priority).
• Build optimisé avec workers parallèles (experimental Next.js).

5.5. Déploiement

• Hébergement : Netlify
• Plugin : @netlify/plugin-nextjs pour le rendu Next.js
• Node.js : version 18.18.0 (.nvmrc)
• Script de build : scripts/netlify-build.sh (install + build)
• HTTPS : certificat SSL automatique via Netlify

5.6. Intégrations externes

5.7. Outils de développement

• Générateur initial : v0.dev (Vercel) — accélération du prototypage UI
• Inspirations UX/UI : références dans code-frontend-ux-ui-inspirations/
• Documentation : PRD, wireframes, plan de tests et plan de déploiement dans /docs

6. Parcours utilisateur type

1. Le visiteur arrive sur la page d'accueil et découvre l'offre via le hero et les sections.
2. Il approfondit via Services ou Trainings selon son profil.
3. Il clique sur Book Now ou Book a Beauty Treatment.
4. Il est redirigé vers la plateforme de réservation externe pour finaliser son rendez-vous.
5. Alternativement, il peut contacter le salon via le formulaire ou consulter le blog pour s'informer.

7. Points forts du projet

• Double proposition de valeur clairement structurée (salon + académie) sur un seul site.
• Design premium avec animations soignées, typographie raffinée et palette cohérente.
• Architecture moderne Next.js App Router, composants modulaires et design system Tailwind.
• Expérience responsive complète (desktop, tablette, mobile).
• Documentation projet complète (PRD, specs, wireframes) démontrant une approche structurée.
• Déploiement production opérationnel sur Netlify.

8. Évolutions possibles

• Connexion du formulaire de contact et de la newsletter à un backend (API Routes Next.js, service e-mail).
• Intégration réelle de l'API Instagram ou widget tiers.
• Intégration API Fresha pour une réservation embarquée.
• CMS headless (Strapi, Sanity) pour la gestion autonome du contenu blog et des tarifs.
• Espace stagiaire avec authentification et suivi de formation.
• Optimisation SEO locale (Google Business, schema.org LocalBusiness).
• Remplacement des placeholders par les visuels définitifs du client.