Site vitrine premium pour serveur FiveM Roleplay
Une template moderne et immersive pour présenter votre serveur FiveM RP. Design dark theme élégant, animations fluides, et architecture modulaire. Chaque section est conçue pour captiver vos visiteurs et convertir vos joueurs.
Stack technique
- Next.js 16 — Framework React avec App Router
- React 19 — Dernière version stable
- TypeScript — Typage strict sur tout le projet
- Tailwind CSS 4 — Styling utilitaire moderne
- Framer Motion — Animations professionnelles
- Lucide Icons — Icônes SVG optimisées
Fonctionnalités incluses
- Hero plein écran avec particules interactives et compteur live
- Grille bento responsive pour les features du serveur
- Système de métiers avec filtres par catégorie, difficulté et modales détaillées
- Statistiques animées déclenchées au scroll
- Galerie photo avec lightbox intégré
- Carrousel de témoignages joueurs avec auto-rotation
- Présentation de l'équipe staff avec rôles et couleurs
- Changelog en timeline avec badges de version et types de changement
- Règlement serveur en accordéon par catégorie
- FAQ avec sections dépliables
- Processus de candidature en 5 étapes visuelles
- Navbar fixe avec effet glassmorphism au scroll
- Footer 4 colonnes avec liens structurés
- Barre de progression de scroll tricolore
Design & Animations
Le design repose sur un dark theme premium avec des effets glassmorphism, des gradients tricolores (bleu, blanc, rouge) et des textures de bruit subtiles. Chaque interaction est animée : hover avec glow, apparitions au scroll, compteurs animés, particules qui réagissent à la souris.
- Dark theme cohérent sur toutes les sections
- Glassmorphism (blur + transparence) sur navbar et cartes
- Système de particules canvas avec physique de répulsion
- Animations staggered sur les listes et grilles
- Transitions spring pour un rendu fluide et naturel
- Effets de glow et d'ombre dynamiques au hover
Installation
1. Télécharger le .zip
Téléchargez le fichier .zip depuis votre espace client et extrayez-le dans le dossier de votre choix.
2. Installer les dépendances
| 1 | npm install |
3. Lancer le serveur de développement
| 1 | npm run dev |
4. Personnaliser le contenu
Modifiez les fichiers dans src/components/ pour adapter les textes, couleurs, métiers, règles et FAQ à votre serveur.
Structure du projet
| 1 | src/ |
| 2 | ├── app/ |
| 3 | │ ├── layout.tsx # Layout principal + métadonnées SEO |
| 4 | │ ├── page.tsx # Page d'accueil (11 sections) |
| 5 | │ └── globals.css # Styles globaux & keyframes |
| 6 | └── components/ |
| 7 | ├── navbar.tsx # Navigation avec glass effect |
| 8 | ├── hero.tsx # Section hero + particules |
| 9 | ├── features.tsx # Grille bento features |
| 10 | ├── jobs.tsx # Métiers avec modales |
| 11 | ├── stats.tsx # Statistiques animées |
| 12 | ├── gallery.tsx # Galerie + lightbox |
| 13 | ├── testimonials.tsx # Témoignages carousel |
| 14 | ├── staff.tsx # Équipe staff |
| 15 | ├── changelog.tsx # Timeline mises à jour |
| 16 | ├── rules.tsx # Règlement accordéon |
| 17 | ├── faq.tsx # FAQ dépliable |
| 18 | ├── application.tsx # Candidature 5 étapes |
| 19 | ├── particles.tsx # Système de particules |
| 20 | ├── live-counter.tsx # Compteur joueurs live |
| 21 | ├── scroll-progress.tsx # Barre de progression |
| 22 | └── footer.tsx # Pied de page |
Le compteur de joueurs live est prêt pour une intégration avec l'API FiveM. Remplacez les données simulées dans live-counter.tsx par un appel à votre endpoint serveur.
Tous les composants utilisent Framer Motion avec whileInView — les animations se déclenchent automatiquement quand l'utilisateur scrolle jusqu'à la section.
Cette template nécessite Node.js 18+ et est optimisée pour Next.js 16. Assurez-vous d'utiliser une version compatible avant l'installation.
Responsive & Performance
- Full responsive : mobile, tablette, desktop
- Menu hamburger sur mobile avec animation
- Grilles adaptatives (1 → 2 → 3-4 colonnes)
- Particules optimisées sur canvas
- Animations lazy-loaded au scroll
- Images optimisables via Next.js Image
Personnalisation facile
Chaque section est un composant React indépendant. Modifiez les couleurs dans globals.css, ajoutez ou supprimez des métiers dans jobs.tsx, changez les règles dans rules.tsx, ou ajustez les stats dans stats.tsx. Le code est propre, commenté et structuré pour une prise en main rapide.