# Initial D Arcade Stage - Site de Classement

Un site web moderne et responsive reproduisant l'interface du site officiel Initial D Arcade Stage, créé avec React et TypeScript.

## 🏁 Fonctionnalités

- **Page d'accueil** : Présentation du jeu avec design inspiré de l'univers Initial D
- **Page de classement** : Tableau des meilleurs temps avec filtres et onglets
- **Design responsive** : Interface adaptée à tous les écrans
- **Animations fluides** : Utilisation de Framer Motion pour les transitions
- **Thème sombre** : Interface moderne avec couleurs d'Initial D
- **Navigation intuitive** : Menu de navigation avec indicateurs visuels

## 🚗 Technologies Utilisées

- **React 18** : Framework JavaScript pour l'interface utilisateur
- **TypeScript** : Typage statique pour une meilleure maintenabilité
- **Material-UI (MUI)** : Composants UI modernes et personnalisables
- **Framer Motion** : Animations et transitions fluides
- **React Router** : Navigation entre les pages
- **Emotion** : Styling CSS-in-JS

## 🎨 Design

Le site reprend l'esthétique du site officiel Initial D avec :
- Couleurs principales : Orange (#ff6b35) et noir (#0a0a0a)
- Police Orbitron pour les titres
- Effets de lueur et animations
- Interface sombre et moderne
- Icônes Material Design

## 📱 Pages

### Page d'Accueil
- Hero section avec titre animé
- Section des caractéristiques du jeu
- Call-to-action vers le classement
- Design responsive avec animations

### Page de Classement
- Tableau des meilleurs temps
- Filtres par circuit
- Onglets pour différents types de classement
- Statistiques en temps réel
- Avatars et badges pour les joueurs

## 🚀 Installation et Démarrage

1. **Cloner le projet**
   ```bash
   git clone [url-du-repo]
   cd initiald-ranking
   ```

2. **Installer les dépendances**
   ```bash
   npm install
   ```

3. **Démarrer le serveur de développement**
   ```bash
   npm start
   ```

4. **Ouvrir dans le navigateur**
   ```
   http://localhost:3000
   ```

## 📦 Scripts Disponibles

- `npm start` : Démarre le serveur de développement
- `npm run build` : Construit l'application pour la production
- `npm test` : Lance les tests
- `npm run eject` : Éjecte la configuration (irréversible)

## 🏗️ Structure du Projet

```
src/
├── components/          # Composants réutilisables
│   └── Header.tsx      # En-tête avec navigation
├── pages/              # Pages de l'application
│   ├── Home.tsx        # Page d'accueil
│   └── Ranking.tsx     # Page de classement
├── types/              # Définitions TypeScript
│   └── index.ts        # Interfaces et types
├── assets/             # Ressources statiques
├── App.tsx             # Composant principal
├── index.tsx           # Point d'entrée
└── index.css           # Styles globaux
```

## 🎯 Fonctionnalités Principales

### Navigation
- Menu de navigation responsive
- Indicateurs visuels pour la page active
- Logo animé avec icône de voiture

### Classement
- Données simulées de joueurs Initial D
- Filtrage par circuit
- Onglets pour différents vues
- Statistiques en temps réel

### Design
- Thème sombre cohérent
- Animations fluides
- Effets de survol
- Typographie optimisée

## 🎨 Personnalisation

### Couleurs
Les couleurs principales peuvent être modifiées dans :
- `src/App.tsx` : Thème Material-UI
- `src/App.css` : Variables CSS personnalisées

### Données
Les données de classement sont simulées dans :
- `src/pages/Ranking.tsx` : Tableau `rankingData`

### Styles
Les styles peuvent être personnalisés dans :
- `src/App.css` : Styles globaux
- `src/index.css` : Reset CSS et styles de base

## 📱 Responsive Design

Le site est entièrement responsive avec :
- Breakpoints Material-UI
- Grille CSS adaptative
- Typographie responsive
- Navigation mobile optimisée

## 🔧 Configuration

### Variables d'Environnement
Créer un fichier `.env` pour les variables d'environnement :
```
REACT_APP_API_URL=your-api-url
REACT_APP_VERSION=1.0.0
```

### Build de Production
```bash
npm run build
```

## 🚀 Déploiement

Le projet peut être déployé sur :
- **Netlify** : Drag & drop du dossier `build`
- **Vercel** : Connexion GitHub automatique
- **GitHub Pages** : Utilisation de `gh-pages`
- **Firebase Hosting** : Configuration Firebase

## 📄 Licence

Ce projet est créé à des fins éducatives et de démonstration. Initial D est une propriété de SEGA.

## 🤝 Contribution

Les contributions sont les bienvenues ! N'hésitez pas à :
1. Fork le projet
2. Créer une branche feature
3. Commiter vos changements
4. Pousser vers la branche
5. Ouvrir une Pull Request

## 📞 Support

Pour toute question ou problème :
- Ouvrir une issue sur GitHub
- Contacter l'équipe de développement

---

**Initial D Arcade Stage** - Reproduit avec ❤️ en React