website/index.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>OmégaKube — L'univers du Role Play réinventé</title>
    <template data-include="/testarea/omegakube/v1bis/components/favicons.html"></template>
    <link rel="stylesheet" href="assets/css/main.css">
</head>
<body>

    <!-- baground géométrique -->
    <div data-include="components/background.html"></div>

    <!-- header / menu -->
    <div data-include="components/header.html"></div>

    <!-- Hero Section -->
    <div data-include="components/index/hero.html"></div>

    <!-- About Section -->
    <div data-include="components/index/apropos.html"></div>

    <!-- Services Preview Section -->
    <div data-include="components/index/services.html"></div>

    <!-- Team Section with Carousel -->
    <section class="team" id="equipe">
        <div class="section-header reveal">
            <p class="section-tag">Équipe</p>
            <h2 class="section-title">Les créateurs</h2>
            <p class="section-desc">Cliquez sur un membre pour en savoir plus</p>
        </div>
        <div class="team-carousel-container reveal">
            <div class="team-carousel" id="team-carousel">
                <!-- Rendu dynamique avec "assets/data/team.json" par "assets/js/home.js" -->
            </div>
            <div class="carousel-controls">
                <button class="carousel-btn" id="carousel-prev">
                    <i data-feather="chevron-left"></i>
                </button>
                <div class="carousel-dots" id="carousel-dots"></div>
                <button class="carousel-btn" id="carousel-next">
                    <i data-feather="chevron-right"></i>
                </button>
            </div>
        </div>
    </section>

    <!-- Team Member Modal -->
    <div class="team-modal-overlay" id="team-modal-overlay">
        <div class="team-modal">
            <div class="team-modal-header">
                <button class="team-modal-close" id="team-modal-close">
                    <i data-feather="x"></i>
                </button>
                <div class="team-modal-avatar">
                    <div class="team-modal-avatar-inner" id="modal-avatar">A</div>
                </div>
                <h3 class="team-modal-name" id="modal-name">Alexandre</h3>
                <p class="team-modal-role" id="modal-role">Développeur Principal</p>
            </div>
            <div class="team-modal-content">
                <p class="team-modal-bio" id="modal-bio">Bio du membre...</p>
                <div class="team-modal-stats" id="modal-stats"></div>
                <div class="team-modal-skills" id="modal-skills"></div>
                <div class="team-modal-social" id="modal-social"></div>
            </div>
        </div>
    </div>

    <!-- Portfolio Preview Section -->
    <section class="portfolio" id="realisations">
        <div class="section-header reveal">
            <p class="section-tag">Portfolio</p>
            <h2 class="section-title">Nos réalisations</h2>
            <p class="section-desc">Découvrez quelques-uns de nos projets récents</p>
        </div>
        <div class="portfolio-grid">
            <div class="portfolio-item reveal">
                <div class="portfolio-bg"></div>
                <div class="portfolio-content">
                    <span class="portfolio-tag">Bot Discord</span>
                    <h4>Medieval RP Bot</h4>
                    <p>Système complet pour serveur fantasy</p>
                </div>
            </div>
            <div class="portfolio-item reveal reveal-delay-1">
                <div class="portfolio-bg" style="background: linear-gradient(135deg, #5E2040, #8b3a62);"></div>
                <div class="portfolio-content">
                    <span class="portfolio-tag">Fortnite Map</span>
                    <h4>Cyberpunk City</h4>
                    <p>Environnement urbain futuriste</p>
                </div>
            </div>
            <div class="portfolio-item reveal reveal-delay-2">
                <div class="portfolio-bg" style="background: linear-gradient(135deg, #3a1f5e, #8b3a62);"></div>
                <div class="portfolio-content">
                    <span class="portfolio-tag">Bot Discord</span>
                    <h4>Space Station RP</h4>
                    <p>Bot Sci-Fi avec économie spatiale</p>
                </div>
            </div>
        </div>
        <div style="text-align: center; margin-top: 3rem;" class="reveal">
            <a href="pages/realisations.html" class="btn btn-secondary">
                <i data-feather="arrow-right"></i>
                Voir toutes nos réalisations
            </a>
        </div>
    </section>

    <!-- Contact Section -->
    <div data-include="components/index/contact.html"></div>

    <div data-include="components/footer.html"></div>

    <script src="assets/js/main.js"></script>
    <script src="assets/js/home.js" defer></script>
</body>
</html>