correction de bug formulaire de contact
This commit is contained in:
parent
c14f0531ff
commit
d705c47fbc
8 changed files with 379 additions and 665 deletions
|
|
@ -2649,7 +2649,7 @@ footer {
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
width: 0%;
|
width: 0%;
|
||||||
transition: width 1s ease;
|
transition: width 5s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.process-timeline.animated::after {
|
.process-timeline.animated::after {
|
||||||
|
|
|
||||||
163
assets/data/services.json
Normal file
163
assets/data/services.json
Normal file
|
|
@ -0,0 +1,163 @@
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"id": "bots",
|
||||||
|
"nav": {
|
||||||
|
"label": "Bots Discord",
|
||||||
|
"icon": "code",
|
||||||
|
"stamp": null
|
||||||
|
},
|
||||||
|
"visual": {
|
||||||
|
"accentFrom": "#8b3a62",
|
||||||
|
"accentTo": "#a64d79",
|
||||||
|
"stamp": null
|
||||||
|
},
|
||||||
|
"title": "Bots Discord RP",
|
||||||
|
"description": "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.",
|
||||||
|
"highlights": [
|
||||||
|
{ "value": "2-4", "label": "Semaines de dev" },
|
||||||
|
{ "value": "1 mois","label": "Support inclus" },
|
||||||
|
{ "value": "100%", "label": "Personnalisable" }
|
||||||
|
],
|
||||||
|
"features": [
|
||||||
|
{ "icon": "dollar-sign", "title": "Économie virtuelle", "desc": "Monnaie, banque, transactions" },
|
||||||
|
{ "icon": "briefcase", "title": "Système de métiers", "desc": "Jobs, skills, progression" },
|
||||||
|
{ "icon": "shield", "title": "Combat & Stats", "desc": "PvP, PvE, attributs" },
|
||||||
|
{ "icon": "box", "title": "Inventaire avancé", "desc": "Items, crafting, échanges" },
|
||||||
|
{ "icon": "flag", "title": "Factions & Guildes", "desc": "Clans, territoires, guerres" },
|
||||||
|
{ "icon": "settings", "title": "Panel Admin", "desc": "Interface web de gestion" }
|
||||||
|
],
|
||||||
|
"cta": [
|
||||||
|
{ "label": "Demander un devis", "href": "index.html#contact", "style": "primary", "icon": "message-circle" },
|
||||||
|
{ "label": "Voir nos réalisations","href": "realisations.html", "style": "secondary","icon": "eye" }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "maps",
|
||||||
|
"nav": {
|
||||||
|
"label": "Maps Fortnite",
|
||||||
|
"icon": "map",
|
||||||
|
"stamp": { "type": "new", "text": "New" }
|
||||||
|
},
|
||||||
|
"visual": {
|
||||||
|
"accentFrom": "#1a5e8b",
|
||||||
|
"accentTo": "#3a8bb5",
|
||||||
|
"stamp": { "type": "new", "text": "✦ New" }
|
||||||
|
},
|
||||||
|
"title": "Maps Fortnite RP",
|
||||||
|
"description": "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.",
|
||||||
|
"highlights": [
|
||||||
|
{ "value": "3-6", "label": "Semaines de création" },
|
||||||
|
{ "value": "50+", "label": "Joueurs supportés" },
|
||||||
|
{ "value": "UEFN", "label": "Compatible" }
|
||||||
|
],
|
||||||
|
"features": [
|
||||||
|
{ "icon": "home", "title": "Bâtiments détaillés", "desc": "Intérieurs accessibles et déco" },
|
||||||
|
{ "icon": "sun", "title": "Cycle jour/nuit", "desc": "Ambiance dynamique" },
|
||||||
|
{ "icon": "zap", "title": "Zones interactives", "desc": "Scripts et triggers" },
|
||||||
|
{ "icon": "cpu", "title": "Optimisation", "desc": "Performance garantie" },
|
||||||
|
{ "icon": "map-pin", "title": "Points d'intérêt", "desc": "Lieux uniques et mémorables" },
|
||||||
|
{ "icon": "edit-3", "title": "Modifications", "desc": "Ajustements post-livraison" }
|
||||||
|
],
|
||||||
|
"cta": [
|
||||||
|
{ "label": "Demander un devis", "href": "index.html#contact", "style": "primary", "icon": "message-circle" },
|
||||||
|
{ "label": "Voir nos maps", "href": "realisations.html", "style": "secondary", "icon": "eye" }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "graphisme",
|
||||||
|
"nav": {
|
||||||
|
"label": "Graphisme",
|
||||||
|
"icon": "image",
|
||||||
|
"stamp": null
|
||||||
|
},
|
||||||
|
"visual": {
|
||||||
|
"accentFrom": "#8b5e3a",
|
||||||
|
"accentTo": "#b58a5a",
|
||||||
|
"stamp": null
|
||||||
|
},
|
||||||
|
"title": "Créations Graphiques",
|
||||||
|
"description": "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é.",
|
||||||
|
"highlights": [
|
||||||
|
{ "value": "1-2", "label": "Semaines" },
|
||||||
|
{ "value": "∞", "label": "Révisions" },
|
||||||
|
{ "value": "HD", "label": "Qualité" }
|
||||||
|
],
|
||||||
|
"features": [
|
||||||
|
{ "icon": "hexagon", "title": "Logo & Branding", "desc": "Identité visuelle complète" },
|
||||||
|
{ "icon": "layout", "title": "Bannières Discord", "desc": "Server banner, splash, icône" },
|
||||||
|
{ "icon": "smile", "title": "Emojis custom", "desc": "Pack emojis personnalisés" },
|
||||||
|
{ "icon": "grid", "title": "Icônes & Assets", "desc": "Items, skills, badges" },
|
||||||
|
{ "icon": "play-circle","title": "Animations", "desc": "GIFs et motion design" },
|
||||||
|
{ "icon": "book-open", "title": "Guide de style", "desc": "Charte graphique fournie" }
|
||||||
|
],
|
||||||
|
"cta": [
|
||||||
|
{ "label": "Demander un devis", "href": "index.html#contact", "style": "primary", "icon": "message-circle" },
|
||||||
|
{ "label": "Voir nos créations", "href": "realisations.html", "style": "secondary", "icon": "eye" }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "consulting",
|
||||||
|
"nav": {
|
||||||
|
"label": "Consulting",
|
||||||
|
"icon": "users",
|
||||||
|
"stamp": { "type": "free", "text": "Gratuit" }
|
||||||
|
},
|
||||||
|
"visual": {
|
||||||
|
"accentFrom": "#3a8b5e",
|
||||||
|
"accentTo": "#5ab57a",
|
||||||
|
"stamp": { "type": "free", "text": "✓ Gratuit", "animated": true }
|
||||||
|
},
|
||||||
|
"title": "Consulting & Accompagnement",
|
||||||
|
"titleStamp": { "type": "free", "text": "Gratuit" },
|
||||||
|
"description": "Bénéficiez de notre expérience pour structurer, lancer et développer votre projet RP. Conseils stratégiques et accompagnement personnalisé.",
|
||||||
|
"highlights": [
|
||||||
|
{ "value": "50+", "label": "Projets accompagnés" },
|
||||||
|
{ "value": "3 ans", "label": "D'expérience" },
|
||||||
|
{ "value": "24/7", "label": "Support Discord" }
|
||||||
|
],
|
||||||
|
"features": [
|
||||||
|
{ "icon": "search", "title": "Audit serveur", "desc": "Analyse de l'existant" },
|
||||||
|
{ "icon": "trending-up", "title": "Stratégie croissance","desc": "Plan de développement" },
|
||||||
|
{ "icon": "user-check", "title": "Formation staff", "desc": "Équipe modération" },
|
||||||
|
{ "icon": "heart", "title": "Expérience joueur", "desc": "Optimisation UX" },
|
||||||
|
{ "icon": "calendar", "title": "Planning events", "desc": "Calendrier d'animations" },
|
||||||
|
{ "icon": "dollar-sign", "title": "Monétisation", "desc": "Conseils revenus" }
|
||||||
|
],
|
||||||
|
"cta": [
|
||||||
|
{ "label": "Prendre rendez-vous", "href": "index.html#contact", "style": "primary", "icon": "message-circle" }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "pack",
|
||||||
|
"nav": {
|
||||||
|
"label": "Pack Complet",
|
||||||
|
"icon": "package",
|
||||||
|
"stamp": { "type": "popular", "text": "Populaire" }
|
||||||
|
},
|
||||||
|
"visual": {
|
||||||
|
"accentFrom": "#8b3a8b",
|
||||||
|
"accentTo": "#b55ab5",
|
||||||
|
"stamp": { "type": "popular", "text": "★ Populaire", "animated": true }
|
||||||
|
},
|
||||||
|
"title": "Pack Serveur Complet",
|
||||||
|
"titleStamp": { "type": "promo", "text": "-20%" },
|
||||||
|
"description": "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.",
|
||||||
|
"highlights": [
|
||||||
|
{ "value": "-20%", "label": "VS services séparés" },
|
||||||
|
{ "value": "3 mois", "label": "Support inclus" },
|
||||||
|
{ "value": "Clé en main","label": "Prêt à lancer" }
|
||||||
|
],
|
||||||
|
"features": [
|
||||||
|
{ "icon": "code", "title": "Bot Discord RP", "desc": "Système complet personnalisé" },
|
||||||
|
{ "icon": "map", "title": "Map Fortnite", "desc": "Environnement sur mesure" },
|
||||||
|
{ "icon": "image", "title": "Pack graphique", "desc": "Logo, bannières, emojis" },
|
||||||
|
{ "icon": "server", "title": "Config Discord", "desc": "Serveur prêt à l'emploi" },
|
||||||
|
{ "icon": "book", "title": "Documentation", "desc": "Guides et tutoriels" },
|
||||||
|
{ "icon": "headphones", "title": "Support 3 mois", "desc": "Accompagnement lancement" }
|
||||||
|
],
|
||||||
|
"cta": [
|
||||||
|
{ "label": "Demander un devis pack", "href": "index.html#contact", "style": "primary", "icon": "message-circle" },
|
||||||
|
{ "label": "Voir nos packs livrés", "href": "realisations.html", "style": "secondary", "icon": "eye" }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
32
assets/js/pages/services-process.js
Normal file
32
assets/js/pages/services-process.js
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
// Services page scripts (moved from inline in pages/services.html)
|
||||||
|
// Depends on ../main.js which initializes feather and other globals
|
||||||
|
|
||||||
|
(function() {
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
// Timeline Animation
|
||||||
|
const timeline = document.getElementById('process-timeline');
|
||||||
|
const steps = document.querySelectorAll('.process-step');
|
||||||
|
|
||||||
|
function animateTimeline() {
|
||||||
|
if (!timeline) return;
|
||||||
|
const timelineTop = timeline.getBoundingClientRect().top;
|
||||||
|
|
||||||
|
if (timelineTop < window.innerHeight - 200) {
|
||||||
|
timeline.classList.add('animated');
|
||||||
|
|
||||||
|
// Animate steps sequentially
|
||||||
|
steps.forEach((step, index) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
step.classList.add('active');
|
||||||
|
}, index * 1000);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener('scroll', animateTimeline);
|
||||||
|
window.addEventListener('load', animateTimeline);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
|
})();
|
||||||
|
|
@ -1,57 +1,164 @@
|
||||||
// Services page scripts (moved from inline in pages/services.html)
|
/**
|
||||||
// Depends on ../main.js which initializes feather and other globals
|
* OmégaKube — Services Tabs Renderer
|
||||||
|
* Charge assets/data/services.json et construit dynamiquement
|
||||||
|
* les onglets de navigation et leurs contenus.
|
||||||
|
*
|
||||||
|
* Dépend de main.js et services-process.js (déjà chargés avant ce script).
|
||||||
|
*/
|
||||||
|
|
||||||
(function() {
|
(function () {
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
'use strict';
|
||||||
// Timeline Animation
|
|
||||||
const timeline = document.getElementById('process-timeline');
|
|
||||||
const steps = document.querySelectorAll('.process-step');
|
|
||||||
|
|
||||||
function animateTimeline() {
|
/* ── Helpers ─────────────────────────────────────────────── */
|
||||||
if (!timeline) return;
|
|
||||||
const timelineTop = timeline.getBoundingClientRect().top;
|
|
||||||
|
|
||||||
if (timelineTop < window.innerHeight - 200) {
|
function stampHtml(stamp, extraClass) {
|
||||||
timeline.classList.add('animated');
|
if (!stamp) return '';
|
||||||
|
const animated = stamp.animated ? ' service-stamp-animated' : '';
|
||||||
// Animate steps sequentially
|
const extra = extraClass ? ' ' + extraClass : '';
|
||||||
steps.forEach((step, index) => {
|
return `<span class="service-stamp service-stamp-${stamp.type}${animated}${extra}">${stamp.text}</span>`;
|
||||||
setTimeout(() => {
|
|
||||||
step.classList.add('active');
|
|
||||||
}, index * 400);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
window.addEventListener('scroll', animateTimeline);
|
function particlesHtml() {
|
||||||
window.addEventListener('load', animateTimeline);
|
return `<div class="service-visual-particles">${'<div class="particle"></div>'.repeat(6)}</div>`;
|
||||||
|
|
||||||
// Service Tabs
|
|
||||||
const tabBtns = document.querySelectorAll('.service-tab-btn');
|
|
||||||
const tabContents = document.querySelectorAll('.service-tab-content');
|
|
||||||
|
|
||||||
if (tabBtns.length && tabContents.length) {
|
|
||||||
tabBtns.forEach(btn => {
|
|
||||||
btn.addEventListener('click', () => {
|
|
||||||
const tabId = btn.dataset.tab;
|
|
||||||
|
|
||||||
// Update buttons
|
|
||||||
tabBtns.forEach(b => b.classList.remove('active'));
|
|
||||||
btn.classList.add('active');
|
|
||||||
|
|
||||||
// Update content
|
|
||||||
tabContents.forEach(content => {
|
|
||||||
content.classList.remove('active');
|
|
||||||
if (content.id === 'tab-' + tabId) {
|
|
||||||
content.classList.add('active');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Re-init feather icons for new content (safe if feather is loaded)
|
|
||||||
if (window.feather) window.feather.replace();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
/* ── Rendu ───────────────────────────────────────────────── */
|
||||||
|
|
||||||
|
function renderNavBtn(service, isFirst) {
|
||||||
|
return `
|
||||||
|
<button class="service-tab-btn${isFirst ? ' active' : ''}" data-tab="${service.id}">
|
||||||
|
<i data-feather="${service.nav.icon}"></i>
|
||||||
|
<span>${service.nav.label}</span>
|
||||||
|
${stampHtml(service.nav.stamp)}
|
||||||
|
</button>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderVisual(service) {
|
||||||
|
const { accentFrom, accentTo, stamp } = service.visual;
|
||||||
|
return `
|
||||||
|
<div class="service-visual" style="--accent-primary:${accentFrom};--accent-secondary:${accentTo};">
|
||||||
|
${stampHtml(stamp, 'service-visual-stamp')}
|
||||||
|
${particlesHtml()}
|
||||||
|
<div class="service-visual-icon">
|
||||||
|
<div class="icon-main" style="background:linear-gradient(135deg,${accentFrom},${accentTo});">
|
||||||
|
<i data-feather="${service.nav.icon}"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderHighlights(highlights) {
|
||||||
|
return highlights.map(h => `
|
||||||
|
<div class="service-highlight">
|
||||||
|
<div class="service-highlight-value">${h.value}</div>
|
||||||
|
<div class="service-highlight-label">${h.label}</div>
|
||||||
|
</div>`).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderFeatures(features, accentFrom, accentTo) {
|
||||||
|
return features.map(f => `
|
||||||
|
<div class="service-feature-item">
|
||||||
|
<div class="service-feature-icon" style="background:linear-gradient(135deg,${accentFrom},${accentTo});">
|
||||||
|
<i data-feather="${f.icon}"></i>
|
||||||
|
</div>
|
||||||
|
<div class="service-feature-text">
|
||||||
|
<h4>${f.title}</h4>
|
||||||
|
<p>${f.desc}</p>
|
||||||
|
</div>
|
||||||
|
</div>`).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderCtas(ctas) {
|
||||||
|
return ctas.map(c => `
|
||||||
|
<a href="${c.href}" class="btn btn-${c.style}">
|
||||||
|
<i data-feather="${c.icon}"></i>
|
||||||
|
${c.label}
|
||||||
|
</a>`).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderTabContent(service, isFirst) {
|
||||||
|
const { accentFrom, accentTo } = service.visual;
|
||||||
|
const titleStamp = service.titleStamp
|
||||||
|
? ' ' + stampHtml({ ...service.titleStamp }, 'service-stamp-inline')
|
||||||
|
: '';
|
||||||
|
|
||||||
|
return `
|
||||||
|
<div class="service-tab-content${isFirst ? ' active' : ''}" id="tab-${service.id}">
|
||||||
|
<div class="service-tab-grid">
|
||||||
|
${renderVisual(service)}
|
||||||
|
<div class="service-tab-details">
|
||||||
|
<div class="service-tab-header">
|
||||||
|
<h2>${service.title}${titleStamp}</h2>
|
||||||
|
<p>${service.description}</p>
|
||||||
|
</div>
|
||||||
|
<div class="service-highlights">
|
||||||
|
${renderHighlights(service.highlights)}
|
||||||
|
</div>
|
||||||
|
<div class="service-tab-features">
|
||||||
|
${renderFeatures(service.features, accentFrom, accentTo)}
|
||||||
|
</div>
|
||||||
|
<div class="service-tab-cta">
|
||||||
|
${renderCtas(service.cta)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Logique des onglets ─────────────────────────────────── */
|
||||||
|
|
||||||
|
function initTabs() {
|
||||||
|
const tabBtns = document.querySelectorAll('.service-tab-btn');
|
||||||
|
const tabContents = document.querySelectorAll('.service-tab-content');
|
||||||
|
if (!tabBtns.length || !tabContents.length) return;
|
||||||
|
|
||||||
|
tabBtns.forEach(btn => {
|
||||||
|
btn.addEventListener('click', () => {
|
||||||
|
const tabId = btn.dataset.tab;
|
||||||
|
|
||||||
|
tabBtns.forEach(b => b.classList.remove('active'));
|
||||||
|
btn.classList.add('active');
|
||||||
|
|
||||||
|
tabContents.forEach(content => {
|
||||||
|
content.classList.remove('active');
|
||||||
|
if (content.id === 'tab-' + tabId) content.classList.add('active');
|
||||||
|
});
|
||||||
|
|
||||||
|
if (window.feather) window.feather.replace();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Init ────────────────────────────────────────────────── */
|
||||||
|
|
||||||
|
async function init() {
|
||||||
|
const navContainer = document.getElementById('service-tabs-nav');
|
||||||
|
const contentContainer = document.getElementById('service-tabs-contents');
|
||||||
|
if (!navContainer || !contentContainer) return;
|
||||||
|
|
||||||
|
let services;
|
||||||
|
try {
|
||||||
|
const res = await fetch('../assets/data/services.json');
|
||||||
|
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||||||
|
services = await res.json();
|
||||||
|
} catch (err) {
|
||||||
|
console.error('[services-tabs.js] Impossible de charger services.json :', err);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!Array.isArray(services) || services.length === 0) {
|
||||||
|
console.warn('[services-tabs.js] services.json est vide ou mal formé.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
navContainer.innerHTML = services.map((s, i) => renderNavBtn(s, i === 0)).join('');
|
||||||
|
contentContainer.innerHTML = services.map((s, i) => renderTabContent(s, i === 0)).join('');
|
||||||
|
|
||||||
|
if (window.feather) window.feather.replace();
|
||||||
|
|
||||||
|
initTabs();
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', init);
|
||||||
|
|
||||||
})();
|
})();
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,7 @@ const ALLOWED_ORIGIN = '*'; // ou 'https://omegakube.com
|
||||||
|
|
||||||
/* ── Anti-spam : limite par IP (optionnel, nécessite accès fichier) ── */
|
/* ── Anti-spam : limite par IP (optionnel, nécessite accès fichier) ── */
|
||||||
const RATE_LIMIT_ENABLED = true;
|
const RATE_LIMIT_ENABLED = true;
|
||||||
const RATE_LIMIT_MAX = 30; // max envois
|
const RATE_LIMIT_MAX = 3; // max envois
|
||||||
const RATE_LIMIT_WINDOW = 3600; // par heure (secondes)
|
const RATE_LIMIT_WINDOW = 3600; // par heure (secondes)
|
||||||
const RATE_LIMIT_DIR = __DIR__ . '/.rate_limits/';
|
const RATE_LIMIT_DIR = __DIR__ . '/.rate_limits/';
|
||||||
|
|
||||||
|
|
@ -180,8 +180,8 @@ $emailBodyHtml = '<!DOCTYPE html>
|
||||||
/* Boundary pour email multipart */
|
/* Boundary pour email multipart */
|
||||||
$boundary = '----=_Part_' . md5(uniqid('', true));
|
$boundary = '----=_Part_' . md5(uniqid('', true));
|
||||||
|
|
||||||
$headers = "From: =?UTF-8?B?" . base64_encode($name) . "?= <{$email}>\r\n";
|
$headers = "From: " . RECIPIENT_NAME . " <" . RECIPIENT_EMAIL . ">\r\n";
|
||||||
$headers .= "Reply-To: {$email}\r\n";
|
$headers .= "Reply-To: =?UTF-8?B?" . base64_encode($name) . "?= <{$email}>\r\n";
|
||||||
$headers .= "To: " . RECIPIENT_NAME . " <" . RECIPIENT_EMAIL . ">\r\n";
|
$headers .= "To: " . RECIPIENT_NAME . " <" . RECIPIENT_EMAIL . ">\r\n";
|
||||||
$headers .= "MIME-Version: 1.0\r\n";
|
$headers .= "MIME-Version: 1.0\r\n";
|
||||||
$headers .= "Content-Type: multipart/alternative; boundary=\"{$boundary}\"\r\n";
|
$headers .= "Content-Type: multipart/alternative; boundary=\"{$boundary}\"\r\n";
|
||||||
|
|
|
||||||
10
components/services/hero.html
Normal file
10
components/services/hero.html
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
@ -10,7 +10,7 @@
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<!-- baground géométrique -->
|
<!-- baground géométrique -->
|
||||||
<div data-include="components/background"></div>
|
<div data-include="components/background.html"></div>
|
||||||
|
|
||||||
<!-- header / menu -->
|
<!-- header / menu -->
|
||||||
<div data-include="components/header.html"></div>
|
<div data-include="components/header.html"></div>
|
||||||
|
|
@ -19,7 +19,7 @@
|
||||||
<div data-include="components/index/hero.html"></div>
|
<div data-include="components/index/hero.html"></div>
|
||||||
|
|
||||||
<!-- About Section -->
|
<!-- About Section -->
|
||||||
<div data-include="components/index/apropos"></div>
|
<div data-include="components/index/apropos.html"></div>
|
||||||
|
|
||||||
<!-- Services Preview Section -->
|
<!-- Services Preview Section -->
|
||||||
<div data-include="components/index/services.html"></div>
|
<div data-include="components/index/services.html"></div>
|
||||||
|
|
|
||||||
|
|
@ -9,41 +9,14 @@
|
||||||
<script src="https://unpkg.com/feather-icons"></script>
|
<script src="https://unpkg.com/feather-icons"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<!-- Geometric Background -->
|
<!-- Baground géométrique -->
|
||||||
<div class="geo-bg"></div>
|
<div data-include="../components\background.html"></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>
|
|
||||||
|
|
||||||
|
<!-- Header / Menu -->
|
||||||
<div data-include="../components/header.html"></div>
|
<div data-include="../components/header.html"></div>
|
||||||
|
|
||||||
<!-- Page Hero -->
|
<!-- Page Hero -->
|
||||||
<section class="page-hero">
|
<div data-include="../components/services/hero.html"></div>
|
||||||
<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>
|
|
||||||
|
|
||||||
<!-- Process Timeline -->
|
<!-- Process Timeline -->
|
||||||
<section class="process-section">
|
<section class="process-section">
|
||||||
|
|
@ -105,583 +78,11 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="service-tabs-container">
|
<div class="service-tabs-container">
|
||||||
<!-- Tabs Navigation -->
|
<!-- Tabs Navigation — rendu dynamique par services-tabs.js -->
|
||||||
<div class="service-tabs-nav reveal">
|
<div class="service-tabs-nav reveal" id="service-tabs-nav"></div>
|
||||||
<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>
|
|
||||||
|
|
||||||
|
<!-- Tab Contents — rendu dynamique par services-tabs.js -->
|
||||||
|
<div id="service-tabs-contents"></div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
@ -726,7 +127,7 @@
|
||||||
<p class="section-desc">Contactez-nous pour un devis gratuit et personnalisé</p>
|
<p class="section-desc">Contactez-nous pour un devis gratuit et personnalisé</p>
|
||||||
</div>
|
</div>
|
||||||
<div style="text-align: center;" class="reveal">
|
<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>
|
<i data-feather="message-circle"></i>
|
||||||
Nous contacter
|
Nous contacter
|
||||||
</a>
|
</a>
|
||||||
|
|
@ -736,6 +137,7 @@
|
||||||
<div data-include="../components/footer.html"></div>
|
<div data-include="../components/footer.html"></div>
|
||||||
|
|
||||||
<script src="../assets/js/main.js"></script>
|
<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>
|
<script src="../assets/js/pages/services.js" defer></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue