website/pages/services.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 Services — OmégaKube</title>
    <template data-include="/testarea/omegakube/v1bis/components/favicons.html"></template>
    <link rel="stylesheet" href="../assets/css/main.css">
    <script src="https://unpkg.com/feather-icons"></script>
</head>
<body>
    <!-- Baground géométrique -->
    <div data-include="../components\background.html"></div>

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

    <!-- Page Hero -->
    <div data-include="../components/services/hero.html"></div>

    <!-- Process Timeline -->
    <section class="process-section">
        <div class="section-header reveal">
            <p class="section-tag">Notre processus</p>
            <h2 class="section-title">Comment ça marche ?</h2>
            <p class="section-desc">Un accompagnement clair et structuré, de l'idée à la livraison</p>
        </div>

        <div class="process-timeline reveal" id="process-timeline">
            <div class="process-step active" data-step="1">
                <div class="process-step-number">
                    <i data-feather="message-circle" class="process-step-icon"></i>
                </div>
                <div class="process-step-content">
                    <h4 class="process-step-title">Contact</h4>
                    <p class="process-step-desc">Discutons de votre projet et de vos besoins</p>
                </div>
            </div>

            <div class="process-step" data-step="2">
                <div class="process-step-number">
                    <i data-feather="file-text" class="process-step-icon"></i>
                </div>
                <div class="process-step-content">
                    <h4 class="process-step-title">Devis</h4>
                    <p class="process-step-desc">Proposition détaillée et validation ensemble</p>
                </div>
            </div>

            <div class="process-step" data-step="3">
                <div class="process-step-number">
                    <i data-feather="code" class="process-step-icon"></i>
                </div>
                <div class="process-step-content">
                    <h4 class="process-step-title">Création</h4>
                    <p class="process-step-desc">Développement avec suivi régulier</p>
                </div>
            </div>

            <div class="process-step" data-step="4">
                <div class="process-step-number">
                    <i data-feather="check-circle" class="process-step-icon"></i>
                </div>
                <div class="process-step-content">
                    <h4 class="process-step-title">Livraison</h4>
                    <p class="process-step-desc">Tests, ajustements et support inclus</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Service Tabs -->
    <section class="service-tabs-section">
        <div class="section-header reveal">
            <p class="section-tag">Nos expertises</p>
            <h2 class="section-title">Choisissez votre service</h2>
            <p class="section-desc">Cliquez sur un service pour découvrir tous les détails</p>
        </div>

        <div class="service-tabs-container">
            <!-- 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>

    <!-- Why Choose Us -->
    <section style="padding: 6rem 2rem; background: linear-gradient(180deg, transparent 0%, var(--bg-secondary) 50%, transparent 100%);">
        <div class="section-header reveal">
            <p class="section-tag">Nos atouts</p>
            <h2 class="section-title">Pourquoi nous choisir ?</h2>
            <p class="section-desc">Ce qui fait la différence OmégaKube</p>
        </div>

        <div class="why-us-grid reveal">
            <div class="why-us-card">
                <div class="why-us-icon">
                    <i data-feather="star"></i>
                </div>
                <h3>Expertise RP</h3>
                <p>3 ans d'expérience dans l'écosystème Role Play. Nous connaissons vos besoins car nous sommes aussi des joueurs.</p>
            </div>
            <div class="why-us-card">
                <div class="why-us-icon">
                    <i data-feather="refresh-cw"></i>
                </div>
                <h3>Suivi continu</h3>
                <p>Communication régulière pendant le développement. Vous suivez l'avancement et validez chaque étape.</p>
            </div>
            <div class="why-us-card">
                <div class="why-us-icon">
                    <i data-feather="life-buoy"></i>
                </div>
                <h3>Support inclus</h3>
                <p>Maintenance et assistance après livraison. Nous restons disponibles pour les ajustements et questions.</p>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="contact" style="padding-top: 4rem;">
        <div class="section-header reveal">
            <p class="section-tag">Prêt à commencer ?</p>
            <h2 class="section-title">Discutons de votre projet</h2>
            <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">
                <i data-feather="message-circle"></i>
                Nous contacter
            </a>
        </div>
    </section>
    <!-- Footer -->
    <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>