correction de bug formulaire de contact

This commit is contained in:
KIRITO_KMA 2026-03-16 12:26:36 +01:00
parent c14f0531ff
commit d705c47fbc
8 changed files with 379 additions and 665 deletions

View file

@ -9,41 +9,14 @@
<script src="https://unpkg.com/feather-icons"></script>
</head>
<body>
<!-- Geometric Background -->
<div class="geo-bg"></div>
<div class="grid-pattern"></div>
<!-- Floating Shapes -->
<div class="geo-shapes">
<div class="shape shape-triangle"></div>
<div class="shape shape-square-outline"></div>
<div class="shape shape-triangle-outline"></div>
<div class="shape shape-diamond"></div>
<div class="shape shape-rect"></div>
<div class="shape shape-square"></div>
<div class="shape shape-triangle"></div>
<div class="shape shape-dots">
<span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span>
</div>
<div class="shape shape-square-outline"></div>
<div class="shape shape-triangle-outline"></div>
</div>
<!-- Baground géométrique -->
<div data-include="../components\background.html"></div>
<!-- Header / Menu -->
<div data-include="../components/header.html"></div>
<!-- Page Hero -->
<section class="page-hero">
<div class="hero-content">
<div class="hero-badge">
<span>Ce que nous proposons</span>
</div>
<h1>Nos <span class="highlight">Services</span></h1>
<p>Des solutions complètes et sur mesure pour donner vie à vos projets Role Play les plus ambitieux.</p>
</div>
</section>
<div data-include="../components/services/hero.html"></div>
<!-- Process Timeline -->
<section class="process-section">
@ -105,583 +78,11 @@
</div>
<div class="service-tabs-container">
<!-- Tabs Navigation -->
<div class="service-tabs-nav reveal">
<button class="service-tab-btn active" data-tab="bots">
<i data-feather="code"></i>
<span>Bots Discord</span>
</button>
<button class="service-tab-btn" data-tab="maps">
<i data-feather="map"></i>
<span>Maps Fortnite</span>
<span class="service-stamp service-stamp-new">New</span>
</button>
<button class="service-tab-btn" data-tab="graphisme">
<i data-feather="image"></i>
<span>Graphisme</span>
</button>
<button class="service-tab-btn" data-tab="consulting">
<i data-feather="users"></i>
<span>Consulting</span>
<span class="service-stamp service-stamp-free">Gratuit</span>
</button>
<button class="service-tab-btn" data-tab="pack">
<i data-feather="package"></i>
<span>Pack Complet</span>
<span class="service-stamp service-stamp-popular">Populaire</span>
</button>
</div>
<!-- Tab Contents -->
<!-- BOTS DISCORD -->
<div class="service-tab-content active" id="tab-bots">
<div class="service-tab-grid">
<div class="service-visual">
<div class="service-visual-particles">
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
</div>
<div class="service-visual-icon">
<div class="icon-main">
<i data-feather="code"></i>
</div>
</div>
</div>
<div class="service-tab-details">
<div class="service-tab-header">
<h2>Bots Discord RP</h2>
<p>Des bots entièrement personnalisés pour animer et gérer vos serveurs Role Play. Nous développons des systèmes complets adaptés à votre univers et à vos mécaniques de jeu.</p>
</div>
<div class="service-highlights">
<div class="service-highlight">
<div class="service-highlight-value">2-4</div>
<div class="service-highlight-label">Semaines de dev</div>
</div>
<div class="service-highlight">
<div class="service-highlight-value">1 mois</div>
<div class="service-highlight-label">Support inclus</div>
</div>
<div class="service-highlight">
<div class="service-highlight-value">100%</div>
<div class="service-highlight-label">Personnalisable</div>
</div>
</div>
<div class="service-tab-features">
<div class="service-feature-item">
<div class="service-feature-icon">
<i data-feather="dollar-sign"></i>
</div>
<div class="service-feature-text">
<h4>Économie virtuelle</h4>
<p>Monnaie, banque, transactions</p>
</div>
</div>
<div class="service-feature-item">
<div class="service-feature-icon">
<i data-feather="briefcase"></i>
</div>
<div class="service-feature-text">
<h4>Système de métiers</h4>
<p>Jobs, skills, progression</p>
</div>
</div>
<div class="service-feature-item">
<div class="service-feature-icon">
<i data-feather="shield"></i>
</div>
<div class="service-feature-text">
<h4>Combat & Stats</h4>
<p>PvP, PvE, attributs</p>
</div>
</div>
<div class="service-feature-item">
<div class="service-feature-icon">
<i data-feather="box"></i>
</div>
<div class="service-feature-text">
<h4>Inventaire avancé</h4>
<p>Items, crafting, échanges</p>
</div>
</div>
<div class="service-feature-item">
<div class="service-feature-icon">
<i data-feather="flag"></i>
</div>
<div class="service-feature-text">
<h4>Factions & Guildes</h4>
<p>Clans, territoires, guerres</p>
</div>
</div>
<div class="service-feature-item">
<div class="service-feature-icon">
<i data-feather="settings"></i>
</div>
<div class="service-feature-text">
<h4>Panel Admin</h4>
<p>Interface web de gestion</p>
</div>
</div>
</div>
<div class="service-tab-cta">
<a href="index.html#contact" class="btn btn-primary">
<i data-feather="message-circle"></i>
Demander un devis
</a>
<a href="realisations.html" class="btn btn-secondary">
<i data-feather="eye"></i>
Voir nos réalisations
</a>
</div>
</div>
</div>
</div>
<!-- MAPS FORTNITE -->
<div class="service-tab-content" id="tab-maps">
<div class="service-tab-grid">
<div class="service-visual" style="--accent-primary: #1a5e8b; --accent-secondary: #3a8bb5;">
<span class="service-stamp service-visual-stamp service-stamp-new">✦ New</span>
<div class="service-visual-particles">
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
</div>
<div class="service-visual-icon">
<div class="icon-main" style="background: linear-gradient(135deg, #1a5e8b, #3a8bb5);">
<i data-feather="map"></i>
</div>
</div>
</div>
<div class="service-tab-details">
<div class="service-tab-header">
<h2>Maps Fortnite RP</h2>
<p>Des environnements immersifs créés sur mesure pour vos sessions Role Play. De la ville moderne au village médiéval, nous donnons vie à tous les univers.</p>
</div>
<div class="service-highlights">
<div class="service-highlight">
<div class="service-highlight-value">3-6</div>
<div class="service-highlight-label">Semaines de création</div>
</div>
<div class="service-highlight">
<div class="service-highlight-value">50+</div>
<div class="service-highlight-label">Joueurs supportés</div>
</div>
<div class="service-highlight">
<div class="service-highlight-value">UEFN</div>
<div class="service-highlight-label">Compatible</div>
</div>
</div>
<div class="service-tab-features">
<div class="service-feature-item">
<div class="service-feature-icon" style="background: linear-gradient(135deg, #1a5e8b, #3a8bb5);">
<i data-feather="home"></i>
</div>
<div class="service-feature-text">
<h4>Bâtiments détaillés</h4>
<p>Intérieurs accessibles et déco</p>
</div>
</div>
<div class="service-feature-item">
<div class="service-feature-icon" style="background: linear-gradient(135deg, #1a5e8b, #3a8bb5);">
<i data-feather="sun"></i>
</div>
<div class="service-feature-text">
<h4>Cycle jour/nuit</h4>
<p>Ambiance dynamique</p>
</div>
</div>
<div class="service-feature-item">
<div class="service-feature-icon" style="background: linear-gradient(135deg, #1a5e8b, #3a8bb5);">
<i data-feather="zap"></i>
</div>
<div class="service-feature-text">
<h4>Zones interactives</h4>
<p>Scripts et triggers</p>
</div>
</div>
<div class="service-feature-item">
<div class="service-feature-icon" style="background: linear-gradient(135deg, #1a5e8b, #3a8bb5);">
<i data-feather="cpu"></i>
</div>
<div class="service-feature-text">
<h4>Optimisation</h4>
<p>Performance garantie</p>
</div>
</div>
<div class="service-feature-item">
<div class="service-feature-icon" style="background: linear-gradient(135deg, #1a5e8b, #3a8bb5);">
<i data-feather="map-pin"></i>
</div>
<div class="service-feature-text">
<h4>Points d'intérêt</h4>
<p>Lieux uniques et mémorables</p>
</div>
</div>
<div class="service-feature-item">
<div class="service-feature-icon" style="background: linear-gradient(135deg, #1a5e8b, #3a8bb5);">
<i data-feather="edit-3"></i>
</div>
<div class="service-feature-text">
<h4>Modifications</h4>
<p>Ajustements post-livraison</p>
</div>
</div>
</div>
<div class="service-tab-cta">
<a href="index.html#contact" class="btn btn-primary">
<i data-feather="message-circle"></i>
Demander un devis
</a>
<a href="realisations.html" class="btn btn-secondary">
<i data-feather="eye"></i>
Voir nos maps
</a>
</div>
</div>
</div>
</div>
<!-- GRAPHISME -->
<div class="service-tab-content" id="tab-graphisme">
<div class="service-tab-grid">
<div class="service-visual">
<div class="service-visual-particles">
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
</div>
<div class="service-visual-icon">
<div class="icon-main" style="background: linear-gradient(135deg, #8b5e3a, #b58a5a);">
<i data-feather="image"></i>
</div>
</div>
</div>
<div class="service-tab-details">
<div class="service-tab-header">
<h2>Créations Graphiques</h2>
<p>Une identité visuelle forte et cohérente pour vos projets. Du logo aux bannières, nous créons des visuels qui marquent les esprits et attirent votre communauté.</p>
</div>
<div class="service-highlights">
<div class="service-highlight">
<div class="service-highlight-value">1-2</div>
<div class="service-highlight-label">Semaines</div>
</div>
<div class="service-highlight">
<div class="service-highlight-value">∞</div>
<div class="service-highlight-label">Révisions</div>
</div>
<div class="service-highlight">
<div class="service-highlight-value">HD</div>
<div class="service-highlight-label">Qualité</div>
</div>
</div>
<div class="service-tab-features">
<div class="service-feature-item">
<div class="service-feature-icon" style="background: linear-gradient(135deg, #8b5e3a, #b58a5a);">
<i data-feather="hexagon"></i>
</div>
<div class="service-feature-text">
<h4>Logo & Branding</h4>
<p>Identité visuelle complète</p>
</div>
</div>
<div class="service-feature-item">
<div class="service-feature-icon" style="background: linear-gradient(135deg, #8b5e3a, #b58a5a);">
<i data-feather="layout"></i>
</div>
<div class="service-feature-text">
<h4>Bannières Discord</h4>
<p>Server banner, splash, icône</p>
</div>
</div>
<div class="service-feature-item">
<div class="service-feature-icon" style="background: linear-gradient(135deg, #8b5e3a, #b58a5a);">
<i data-feather="smile"></i>
</div>
<div class="service-feature-text">
<h4>Emojis custom</h4>
<p>Pack emojis personnalisés</p>
</div>
</div>
<div class="service-feature-item">
<div class="service-feature-icon" style="background: linear-gradient(135deg, #8b5e3a, #b58a5a);">
<i data-feather="grid"></i>
</div>
<div class="service-feature-text">
<h4>Icônes & Assets</h4>
<p>Items, skills, badges</p>
</div>
</div>
<div class="service-feature-item">
<div class="service-feature-icon" style="background: linear-gradient(135deg, #8b5e3a, #b58a5a);">
<i data-feather="play-circle"></i>
</div>
<div class="service-feature-text">
<h4>Animations</h4>
<p>GIFs et motion design</p>
</div>
</div>
<div class="service-feature-item">
<div class="service-feature-icon" style="background: linear-gradient(135deg, #8b5e3a, #b58a5a);">
<i data-feather="book-open"></i>
</div>
<div class="service-feature-text">
<h4>Guide de style</h4>
<p>Charte graphique fournie</p>
</div>
</div>
</div>
<div class="service-tab-cta">
<a href="index.html#contact" class="btn btn-primary">
<i data-feather="message-circle"></i>
Demander un devis
</a>
<a href="realisations.html" class="btn btn-secondary">
<i data-feather="eye"></i>
Voir nos créations
</a>
</div>
</div>
</div>
</div>
<!-- CONSULTING -->
<div class="service-tab-content" id="tab-consulting">
<div class="service-tab-grid">
<div class="service-visual">
<span class="service-stamp service-visual-stamp service-stamp-free service-stamp-animated">✓ Gratuit</span>
<div class="service-visual-particles">
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
</div>
<div class="service-visual-icon">
<div class="icon-main" style="background: linear-gradient(135deg, #3a8b5e, #5ab57a);">
<i data-feather="users"></i>
</div>
</div>
</div>
<div class="service-tab-details">
<div class="service-tab-header">
<h2>Consulting & Accompagnement <span class="service-stamp service-stamp-inline service-stamp-free">Gratuit</span></h2>
<p>Bénéficiez de notre expérience pour structurer, lancer et développer votre projet RP. Conseils stratégiques et accompagnement personnalisé.</p>
</div>
<div class="service-highlights">
<div class="service-highlight">
<div class="service-highlight-value">50+</div>
<div class="service-highlight-label">Projets accompagnés</div>
</div>
<div class="service-highlight">
<div class="service-highlight-value">3 ans</div>
<div class="service-highlight-label">D'expérience</div>
</div>
<div class="service-highlight">
<div class="service-highlight-value">24/7</div>
<div class="service-highlight-label">Support Discord</div>
</div>
</div>
<div class="service-tab-features">
<div class="service-feature-item">
<div class="service-feature-icon" style="background: linear-gradient(135deg, #3a8b5e, #5ab57a);">
<i data-feather="search"></i>
</div>
<div class="service-feature-text">
<h4>Audit serveur</h4>
<p>Analyse de l'existant</p>
</div>
</div>
<div class="service-feature-item">
<div class="service-feature-icon" style="background: linear-gradient(135deg, #3a8b5e, #5ab57a);">
<i data-feather="trending-up"></i>
</div>
<div class="service-feature-text">
<h4>Stratégie croissance</h4>
<p>Plan de développement</p>
</div>
</div>
<div class="service-feature-item">
<div class="service-feature-icon" style="background: linear-gradient(135deg, #3a8b5e, #5ab57a);">
<i data-feather="user-check"></i>
</div>
<div class="service-feature-text">
<h4>Formation staff</h4>
<p>Équipe modération</p>
</div>
</div>
<div class="service-feature-item">
<div class="service-feature-icon" style="background: linear-gradient(135deg, #3a8b5e, #5ab57a);">
<i data-feather="heart"></i>
</div>
<div class="service-feature-text">
<h4>Expérience joueur</h4>
<p>Optimisation UX</p>
</div>
</div>
<div class="service-feature-item">
<div class="service-feature-icon" style="background: linear-gradient(135deg, #3a8b5e, #5ab57a);">
<i data-feather="calendar"></i>
</div>
<div class="service-feature-text">
<h4>Planning events</h4>
<p>Calendrier d'animations</p>
</div>
</div>
<div class="service-feature-item">
<div class="service-feature-icon" style="background: linear-gradient(135deg, #3a8b5e, #5ab57a);">
<i data-feather="dollar-sign"></i>
</div>
<div class="service-feature-text">
<h4>Monétisation</h4>
<p>Conseils revenus</p>
</div>
</div>
</div>
<div class="service-tab-cta">
<a href="index.html#contact" class="btn btn-primary">
<i data-feather="message-circle"></i>
Prendre rendez-vous
</a>
</div>
</div>
</div>
</div>
<!-- PACK COMPLET -->
<div class="service-tab-content" id="tab-pack">
<div class="service-tab-grid">
<div class="service-visual">
<span class="service-stamp service-visual-stamp service-stamp-popular service-stamp-animated">★ Populaire</span>
<div class="service-visual-particles">
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
</div>
<div class="service-visual-icon">
<div class="icon-main" style="background: linear-gradient(135deg, #8b3a8b, #b55ab5);">
<i data-feather="package"></i>
</div>
</div>
</div>
<div class="service-tab-details">
<div class="service-tab-header">
<h2>Pack Serveur Complet <span class="service-stamp service-stamp-inline service-stamp-promo">-20%</span></h2>
<p>La solution tout-en-un pour lancer votre projet RP. Bot personnalisé, map Fortnite, identité visuelle et accompagnement : tout est inclus pour un lancement réussi.</p>
</div>
<div class="service-highlights">
<div class="service-highlight">
<div class="service-highlight-value">-20%</div>
<div class="service-highlight-label">VS services séparés</div>
</div>
<div class="service-highlight">
<div class="service-highlight-value">3 mois</div>
<div class="service-highlight-label">Support inclus</div>
</div>
<div class="service-highlight">
<div class="service-highlight-value">Clé en main</div>
<div class="service-highlight-label">Prêt à lancer</div>
</div>
</div>
<div class="service-tab-features">
<div class="service-feature-item">
<div class="service-feature-icon" style="background: linear-gradient(135deg, #8b3a8b, #b55ab5);">
<i data-feather="code"></i>
</div>
<div class="service-feature-text">
<h4>Bot Discord RP</h4>
<p>Système complet personnalisé</p>
</div>
</div>
<div class="service-feature-item">
<div class="service-feature-icon" style="background: linear-gradient(135deg, #8b3a8b, #b55ab5);">
<i data-feather="map"></i>
</div>
<div class="service-feature-text">
<h4>Map Fortnite</h4>
<p>Environnement sur mesure</p>
</div>
</div>
<div class="service-feature-item">
<div class="service-feature-icon" style="background: linear-gradient(135deg, #8b3a8b, #b55ab5);">
<i data-feather="image"></i>
</div>
<div class="service-feature-text">
<h4>Pack graphique</h4>
<p>Logo, bannières, emojis</p>
</div>
</div>
<div class="service-feature-item">
<div class="service-feature-icon" style="background: linear-gradient(135deg, #8b3a8b, #b55ab5);">
<i data-feather="server"></i>
</div>
<div class="service-feature-text">
<h4>Config Discord</h4>
<p>Serveur prêt à l'emploi</p>
</div>
</div>
<div class="service-feature-item">
<div class="service-feature-icon" style="background: linear-gradient(135deg, #8b3a8b, #b55ab5);">
<i data-feather="book"></i>
</div>
<div class="service-feature-text">
<h4>Documentation</h4>
<p>Guides et tutoriels</p>
</div>
</div>
<div class="service-feature-item">
<div class="service-feature-icon" style="background: linear-gradient(135deg, #8b3a8b, #b55ab5);">
<i data-feather="headphones"></i>
</div>
<div class="service-feature-text">
<h4>Support 3 mois</h4>
<p>Accompagnement lancement</p>
</div>
</div>
</div>
<div class="service-tab-cta">
<a href="index.html#contact" class="btn btn-primary">
<i data-feather="message-circle"></i>
Demander un devis pack
</a>
<a href="realisations.html" class="btn btn-secondary">
<i data-feather="eye"></i>
Voir nos packs livrés
</a>
</div>
</div>
</div>
</div>
<!-- Tabs Navigation — rendu dynamique par services-tabs.js -->
<div class="service-tabs-nav reveal" id="service-tabs-nav"></div>
<!-- Tab Contents — rendu dynamique par services-tabs.js -->
<div id="service-tabs-contents"></div>
</div>
</section>
@ -726,7 +127,7 @@
<p class="section-desc">Contactez-nous pour un devis gratuit et personnalisé</p>
</div>
<div style="text-align: center;" class="reveal">
<a href="index.html#contact" class="btn btn-primary">
<a href="../index.html#contact" class="btn btn-primary">
<i data-feather="message-circle"></i>
Nous contacter
</a>
@ -736,6 +137,7 @@
<div data-include="../components/footer.html"></div>
<script src="../assets/js/main.js"></script>
<script src="../assets/js/pages/services-process.js" defer></script>
<script src="../assets/js/pages/services.js" defer></script>
</body>
</html>
</html>