Site Web de Coaching Sportif - Mathys Parizot

Site web moderne et professionnel pour présenter les services de coaching sportif de Mathys Parizot.

Technologies utilisées

• Next.js 15 - Framework React avec App Router
• TypeScript - Pour la sécurité des types
• Tailwind CSS - Framework CSS utility-first
• Framer Motion - Animations fluides et modernes
• React Hook Form - Gestion des formulaires

Fonctionnalités

• 🏠 Page d'accueil dynamique avec Hero et sections
• 💪 Page Services détaillant les 3 offres de coaching
• 👤 Page À propos présentant Mathys et sa philosophie
• ⭐ Page Témoignages avec retours clients
• 📧 Page Contact avec formulaire fonctionnel
• 🖼️ Galerie photos/vidéos avec lightbox
• 📱 Design 100% responsive (mobile-first)
• ⚡ Performance optimisée avec Next.js
• 🔍 SEO optimisé avec métadonnées et sitemap

Installation

1. Installer les dépendances :

npm install

2. Lancer le serveur de développement :

npm run dev

3. Ouvrir http://localhost:3000 dans votre navigateur

Scripts disponibles

• npm run dev - Lance le serveur de développement
• npm run build - Compile l'application pour la production
• npm start - Lance l'application compilée
• npm run lint - Vérifie le code avec ESLint

Structure du projet

mathys-app/
├── app/                    # Pages et routes (App Router)
│   ├── layout.tsx         # Layout principal
│   ├── page.tsx           # Page d'accueil
│   ├── services/          # Page Services
│   ├── about/             # Page À propos
│   ├── testimonials/      # Page Témoignages
│   ├── contact/           # Page Contact
│   └── gallery/           # Galerie
├── components/            # Composants React réutilisables
│   ├── layout/           # Header, Footer
│   ├── home/             # Composants page d'accueil
│   ├── services/         # Composants services
│   ├── testimonials/     # Composants témoignages
│   ├── gallery/          # Composants galerie
│   ├── contact/          # Formulaire contact
│   └── ui/               # Composants UI (Button, Card, Input)
├── data/                 # Données (services, témoignages, galerie)
├── lib/                  # Types TypeScript
└── public/               # Fichiers statiques (images, vidéos)

Personnalisation

Modifier les couleurs

Éditez tailwind.config.ts pour changer les couleurs du thème :

colors: {
  primary: {
    DEFAULT: "#FF6B35",  // Orange énergique
    // ...
  },
  // ...
}

Ajouter du contenu

1. Services : Éditez data/services.ts
2. Témoignages : Éditez data/testimonials.ts
3. Galerie : Éditez data/gallery.ts

Ajouter des images

Placez vos images dans le dossier public/images/ et référencez-les dans les fichiers de données.

Déploiement

Vercel (Recommandé)

1. Pushez votre code sur GitHub
2. Importez le projet sur Vercel
3. Déployez automatiquement

Autre hébergeur

npm run build
npm start

SEO

Le site inclut :

• Métadonnées optimisées pour chaque page
• Sitemap généré automatiquement
• Fichier robots.txt
• Balises Open Graph
• Structure HTML sémantique

À faire

• Ajouter de vraies images et vidéos
• Configurer un service d'envoi d'emails (pour le formulaire)
• Ajouter Google Analytics
• Créer un blog (optionnel)
• Intégrer un système de réservation (optionnel)
• Ajouter des animations supplémentaires

Support

Pour toute question ou assistance, contactez : contact@mathysparizot.com

Licence

© 2025 Mathys Parizot. Tous droits réservés.