335 lines
15 KiB
HTML
335 lines
15 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="fr" data-theme="dark">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Nos Réalisations — OmégaKube</title>
|
||
|
|
<template data-include="/testarea/omegakube/v1bis/components/favicons.html"></template>
|
||
|
|
<link rel="stylesheet" href="../assets/css/main.css">
|
||
|
|
<style>
|
||
|
|
.filter-tabs {
|
||
|
|
display: flex;
|
||
|
|
gap: 1rem;
|
||
|
|
justify-content: center;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
margin-bottom: 2rem;
|
||
|
|
}
|
||
|
|
.filter-tab {
|
||
|
|
padding: 0.75rem 1.5rem;
|
||
|
|
background: var(--glass-bg);
|
||
|
|
border: 1px solid var(--glass-border);
|
||
|
|
border-radius: 4px;
|
||
|
|
color: var(--text-secondary);
|
||
|
|
font-family: 'OmegaSmall', sans-serif;
|
||
|
|
font-size: 0.95rem;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
.filter-tab:hover,
|
||
|
|
.filter-tab.active {
|
||
|
|
background: var(--accent-primary);
|
||
|
|
border-color: var(--accent-primary);
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</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>
|
||
|
|
|
||
|
|
<div data-include="../components/header.html"></div>
|
||
|
|
|
||
|
|
<!-- Page Hero -->
|
||
|
|
<section class="page-hero">
|
||
|
|
<div class="hero-content">
|
||
|
|
<div class="hero-badge">
|
||
|
|
<span>Notre portfolio</span>
|
||
|
|
</div>
|
||
|
|
<h1>Nos <span class="highlight">Réalisations</span></h1>
|
||
|
|
<p>Découvrez les projets que nous avons concrétisés pour nos clients et partenaires.</p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Projets Phares - Bento Grid -->
|
||
|
|
<section style="padding-top: 2rem;">
|
||
|
|
<div class="section-header reveal">
|
||
|
|
<p class="section-tag">En vedette</p>
|
||
|
|
<h2 class="section-title">Projets phares</h2>
|
||
|
|
<p class="section-desc">Nos réalisations les plus marquantes</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="bento-grid" style="padding: 0 2rem;">
|
||
|
|
|
||
|
|
<!-- Projet Phare 1 - Medieval RP Bot -->
|
||
|
|
<div class="bento-project reveal">
|
||
|
|
<div class="bento-image" style="background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));">
|
||
|
|
<div class="bento-image-content">
|
||
|
|
<span class="portfolio-tag">Bot Discord</span>
|
||
|
|
<h3>Medieval RP Bot</h3>
|
||
|
|
<p>Un système RP médiéval complet pour serveur fantasy</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="bento-stats">
|
||
|
|
<div class="bento-stat">
|
||
|
|
<div class="bento-stat-icon">
|
||
|
|
<i data-feather="users"></i>
|
||
|
|
</div>
|
||
|
|
<div class="bento-stat-value">5000+</div>
|
||
|
|
<div class="bento-stat-label">Joueurs actifs</div>
|
||
|
|
</div>
|
||
|
|
<div class="bento-stat">
|
||
|
|
<div class="bento-stat-icon">
|
||
|
|
<i data-feather="clock"></i>
|
||
|
|
</div>
|
||
|
|
<div class="bento-stat-value">3 mois</div>
|
||
|
|
<div class="bento-stat-label">Développement</div>
|
||
|
|
</div>
|
||
|
|
<div class="bento-stat">
|
||
|
|
<div class="bento-stat-icon">
|
||
|
|
<i data-feather="terminal"></i>
|
||
|
|
</div>
|
||
|
|
<div class="bento-stat-value">150+</div>
|
||
|
|
<div class="bento-stat-label">Commandes</div>
|
||
|
|
</div>
|
||
|
|
<div class="bento-stat">
|
||
|
|
<div class="bento-stat-icon">
|
||
|
|
<i data-feather="database"></i>
|
||
|
|
</div>
|
||
|
|
<div class="bento-stat-value">99.9%</div>
|
||
|
|
<div class="bento-stat-label">Uptime</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="bento-info">
|
||
|
|
<h4>Description</h4>
|
||
|
|
<p>Développé pour l'un des plus grands serveurs Discord francophones, ce bot gère l'intégralité de l'expérience RP : économie, métiers, combat tour par tour, gestion de royaumes et alliances, quêtes automatisées et bien plus encore.</p>
|
||
|
|
<div class="bento-features">
|
||
|
|
<span class="bento-feature">Économie</span>
|
||
|
|
<span class="bento-feature">Combat</span>
|
||
|
|
<span class="bento-feature">Métiers</span>
|
||
|
|
<span class="bento-feature">Royaumes</span>
|
||
|
|
<span class="bento-feature">Quêtes</span>
|
||
|
|
<span class="bento-feature">Events</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="bento-divider"></div>
|
||
|
|
|
||
|
|
<!-- Projet Phare 2 - Cyberpunk City (Reverse) -->
|
||
|
|
<div class="bento-project reverse reveal">
|
||
|
|
<div class="bento-image" style="background: linear-gradient(135deg, #5E2040, #1a3a5e);">
|
||
|
|
<div class="bento-image-content">
|
||
|
|
<span class="portfolio-tag">Fortnite Map</span>
|
||
|
|
<h3>Cyberpunk City</h3>
|
||
|
|
<p>Une ville futuriste immersive pour le RP urbain</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="bento-stats">
|
||
|
|
<div class="bento-stat">
|
||
|
|
<div class="bento-stat-icon">
|
||
|
|
<i data-feather="play"></i>
|
||
|
|
</div>
|
||
|
|
<div class="bento-stat-value">50K+</div>
|
||
|
|
<div class="bento-stat-label">Parties jouées</div>
|
||
|
|
</div>
|
||
|
|
<div class="bento-stat">
|
||
|
|
<div class="bento-stat-icon">
|
||
|
|
<i data-feather="home"></i>
|
||
|
|
</div>
|
||
|
|
<div class="bento-stat-value">100+</div>
|
||
|
|
<div class="bento-stat-label">Bâtiments</div>
|
||
|
|
</div>
|
||
|
|
<div class="bento-stat">
|
||
|
|
<div class="bento-stat-icon">
|
||
|
|
<i data-feather="map-pin"></i>
|
||
|
|
</div>
|
||
|
|
<div class="bento-stat-value">5</div>
|
||
|
|
<div class="bento-stat-label">Quartiers</div>
|
||
|
|
</div>
|
||
|
|
<div class="bento-stat">
|
||
|
|
<div class="bento-stat-icon">
|
||
|
|
<i data-feather="users"></i>
|
||
|
|
</div>
|
||
|
|
<div class="bento-stat-value">50</div>
|
||
|
|
<div class="bento-stat-label">Joueurs max</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="bento-info">
|
||
|
|
<h4>Description</h4>
|
||
|
|
<p>Néons, gratte-ciels, quartiers distincts et ambiance blade runner. Cette map a été optimisée pour accueillir jusqu'à 50 joueurs simultanément avec un système jour/nuit dynamique et des zones interactives scriptées.</p>
|
||
|
|
<div class="bento-features">
|
||
|
|
<span class="bento-feature">Néons</span>
|
||
|
|
<span class="bento-feature">Jour/Nuit</span>
|
||
|
|
<span class="bento-feature">Scripts</span>
|
||
|
|
<span class="bento-feature">Optimisé</span>
|
||
|
|
<span class="bento-feature">Immersif</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="bento-divider"></div>
|
||
|
|
|
||
|
|
<!-- Projet Phare 3 - Nova RP -->
|
||
|
|
<div class="bento-project reveal">
|
||
|
|
<div class="bento-image" style="background: linear-gradient(135deg, #2d1b5e, #5E2040);">
|
||
|
|
<div class="bento-image-content">
|
||
|
|
<span class="portfolio-tag">Pack Complet</span>
|
||
|
|
<h3>Nova RP - Lancement</h3>
|
||
|
|
<p>Accompagnement complet pour un lancement réussi</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="bento-stats">
|
||
|
|
<div class="bento-stat">
|
||
|
|
<div class="bento-stat-icon">
|
||
|
|
<i data-feather="users"></i>
|
||
|
|
</div>
|
||
|
|
<div class="bento-stat-value">8000+</div>
|
||
|
|
<div class="bento-stat-label">Membres</div>
|
||
|
|
</div>
|
||
|
|
<div class="bento-stat">
|
||
|
|
<div class="bento-stat-icon">
|
||
|
|
<i data-feather="trending-up"></i>
|
||
|
|
</div>
|
||
|
|
<div class="bento-stat-value">0→8K</div>
|
||
|
|
<div class="bento-stat-label">En 3 mois</div>
|
||
|
|
</div>
|
||
|
|
<div class="bento-stat">
|
||
|
|
<div class="bento-stat-icon">
|
||
|
|
<i data-feather="package"></i>
|
||
|
|
</div>
|
||
|
|
<div class="bento-stat-value">4</div>
|
||
|
|
<div class="bento-stat-label">Services inclus</div>
|
||
|
|
</div>
|
||
|
|
<div class="bento-stat">
|
||
|
|
<div class="bento-stat-icon">
|
||
|
|
<i data-feather="award"></i>
|
||
|
|
</div>
|
||
|
|
<div class="bento-stat-value">Top 10</div>
|
||
|
|
<div class="bento-stat-label">Serveur FR</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="bento-info">
|
||
|
|
<h4>Description</h4>
|
||
|
|
<p>Un accompagnement clé en main : bot Discord personnalisé, identité visuelle complète, map Fortnite exclusive et stratégie de lancement. En 3 mois, le serveur est passé de 0 à 8000 membres actifs.</p>
|
||
|
|
<div class="bento-features">
|
||
|
|
<span class="bento-feature">Bot RP</span>
|
||
|
|
<span class="bento-feature">Map Fortnite</span>
|
||
|
|
<span class="bento-feature">Branding</span>
|
||
|
|
<span class="bento-feature">Stratégie</span>
|
||
|
|
<span class="bento-feature">Support</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Tous nos projets (injected via JS) -->
|
||
|
|
<section style="padding-top: 6rem;">
|
||
|
|
<div class="section-header reveal">
|
||
|
|
<p class="section-tag">Portfolio</p>
|
||
|
|
<h2 class="section-title">Tous nos projets</h2>
|
||
|
|
<p class="section-desc">Cliquez sur un projet pour voir les détails</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Filter Tabs -->
|
||
|
|
<div style="max-width: 1200px; margin: 0 auto 2rem; text-align: center; padding: 0 2rem;">
|
||
|
|
<div class="filter-tabs reveal">
|
||
|
|
<button class="filter-tab active" data-filter="all">Tous</button>
|
||
|
|
<button class="filter-tab" data-filter="bot">Bots Discord</button>
|
||
|
|
<button class="filter-tab" data-filter="map">Maps Fortnite</button>
|
||
|
|
<button class="filter-tab" data-filter="graphisme">Graphisme</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Portfolio Grid with Pagination -->
|
||
|
|
<div class="portfolio-grid" style="max-width: 1200px; margin: 0 auto;" id="portfolio-grid">
|
||
|
|
<!-- Les projets seront injectés ici par JavaScript -->
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Pagination -->
|
||
|
|
<div class="pagination" id="pagination" style="max-width: 1200px; margin: 4rem auto 0;">
|
||
|
|
<!-- Généré par JavaScript -->
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Project Modal (structure only — content populated by JS) -->
|
||
|
|
<div class="project-modal-overlay" id="project-modal-overlay">
|
||
|
|
<div class="project-modal">
|
||
|
|
<button class="project-modal-close" id="project-modal-close">
|
||
|
|
<i data-feather="x"></i>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<div class="project-gallery" id="project-gallery">
|
||
|
|
<div class="project-gallery-slides" id="gallery-slides"></div>
|
||
|
|
<button class="gallery-nav prev" id="gallery-prev"><i data-feather="chevron-left"></i></button>
|
||
|
|
<button class="gallery-nav next" id="gallery-next"><i data-feather="chevron-right"></i></button>
|
||
|
|
<div class="gallery-dots" id="gallery-dots"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="project-modal-content">
|
||
|
|
<div class="project-modal-header">
|
||
|
|
<div>
|
||
|
|
<span class="portfolio-tag" id="modal-category">Bot Discord</span>
|
||
|
|
<h2 id="modal-title">Nom du projet</h2>
|
||
|
|
</div>
|
||
|
|
<div class="project-modal-meta" id="modal-meta"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p class="project-modal-desc" id="modal-desc"></p>
|
||
|
|
|
||
|
|
<div class="project-modal-tabs">
|
||
|
|
<button class="project-modal-tab active" data-tab="features">Fonctionnalités</button>
|
||
|
|
<button class="project-modal-tab" data-tab="tech">Technologies</button>
|
||
|
|
<button class="project-modal-tab" data-tab="stats">Statistiques</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="project-modal-tab-content active" id="tab-features"><div class="project-features-grid" id="modal-features"></div></div>
|
||
|
|
<div class="project-modal-tab-content" id="tab-tech"><div class="project-tech-grid" id="modal-tech"></div></div>
|
||
|
|
<div class="project-modal-tab-content" id="tab-stats"><div class="project-stats-grid" id="modal-stats"></div></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- CTA Section -->
|
||
|
|
<section class="contact" style="padding-top: 4rem;">
|
||
|
|
<div class="section-header reveal">
|
||
|
|
<p class="section-tag">Votre projet</p>
|
||
|
|
<h2 class="section-title">Prêt à créer ensemble ?</h2>
|
||
|
|
<p class="section-desc">Votre projet pourrait être le prochain dans notre portfolio</p>
|
||
|
|
</div>
|
||
|
|
<div style="text-align: center;" class="reveal">
|
||
|
|
<a href="index.html#contact" class="btn btn-primary">
|
||
|
|
<i data-feather="message-circle"></i>
|
||
|
|
Démarrer un projet
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<div data-include="../components/footer.html"></div>
|
||
|
|
|
||
|
|
<script src="../assets/js/main.js"></script>
|
||
|
|
<script src="../assets/js/pages/realisations.js" defer></script>
|
||
|
|
</body>
|
||
|
|
</html>
|