<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="FShop - Une boutique pour services FiveM. Bases RP, mappings et plus encore.">
    <title>FShop - FiveM Shop</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
    <!-- Navbar -->
    <nav class="navbar">
        <div class="logo">
            <h1>FShop</h1>
        </div>
        <ul class="nav-links">
            <li><a href="index.html" class="active">Accueil</a></li>
            <li><a href="services.html">Services</a></li>
            <li><a href="tuto.html">Tutoriels</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
        <div class="mobile-menu-button">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="hero" id="accueil">
        <div class="hero-content">
            <h1>Élevez votre serveur FiveM</h1>
            <p class="hero-subtitle">Des solutions premium pour une expérience de jeu exceptionnelle</p>
            <div class="hero-buttons">
                <a href="services.html" class="btn">Découvrir nos services</a>
                <a href="tuto.html" class="btn">Consulter les tutoriels</a>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section class="features" id="features">
        <div class="container">
            <div class="section-header">
                <h2>Pourquoi Choisir FShop ?</h2>
                <p>L'excellence au service de votre serveur FiveM</p>
            </div>
            <div class="features-grid">
                <div class="feature-card">
                    <div class="feature-icon">🛡️</div>
                    <h3>Sécurité Maximale</h3>
                    <p>Protection anti-leak et système de verrouillage IP intégrés</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">⚡</div>
                    <h3>Performance Optimisée</h3>
                    <p>Scripts optimisés pour une expérience fluide</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🔄</div>
                    <h3>Mises à jour régulières</h3>
                    <p>Améliorations continues et nouvelles fonctionnalités</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🎮</div>
                    <h3>Compatibilité Totale</h3>
                    <p>Compatible avec les frameworks ESX et QBCore</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section class="contact" id="contact">
        <div class="contact-content">
            <h2>Prêt à commencer ?</h2>
            <p>Rejoignez notre communauté Discord pour plus d'informations et un support personnalisé</p>
            <div class="contact-buttons">
                <a href="https://discord.gg/fshop" class="btn btn-light">
                    <svg class="discord-icon" viewBox="0 0 24 24" width="24" height="24">
                        <path fill="currentColor" d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .077-.025c.524-.733.997-1.5 1.405-2.31a.075.075 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .092.037a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z"/>
                    </svg>
                    Rejoindre Discord
                </a>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <div class="footer-content">
            <div class="footer-brand">
                <h3>FShop</h3>
                <p>Solutions premium pour serveurs FiveM</p>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2025 FShop | Tous droits réservés.</p>
        </div>
    </footer>

    <script src="scripts.js"></script>
</body>
</html>