website/pages/realisations.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 (dynamique depuis projects.json) -->
    <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;" id="featured-bento-grid">
            <!-- Rendu dynamique depuis ../assets/data/projects.json par realisations.js -->
        </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>