index.html
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Geo Realms Craft - Serveur Minecraft Moddé</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    <style>
        :root {
            --primary-color: #760202;
            --secondary-color: #2c2c2c;
            --accent-color: #9d0b28;
        }

        body {
            font-family: 'Roboto', sans-serif;
            background: #f8f9fa;
            color: #333;
            line-height: 1.6;
        }

        .hero {
            background: linear-gradient(45deg, rgba(0,0,0,0.9), rgba(0,0,0,0.7)), url('background/0.jpg');
            background-size: cover;
            background-position: center;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
            position: relative;
            overflow: hidden;
            padding: 20px;
        }

        .hero::after {
            content: '';
            position: absolute;
            bottom: -50px;
            left: -5%;
            width: 110%;
            height: 100px;
            background: var(--primary-color);
            transform: rotate(-3deg);
            z-index: 1;
        }

        .nav-wrapper {
            background: var(--secondary-color);
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        .section {
            padding: 80px 20px;
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .section.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .highlight-card {
            border-radius: 15px;
            padding: 30px;
            margin: 20px 0;
            background: white;
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
            border-left: 5px solid var(--accent-color);
        }

        .rule-category {
            padding: 25px;
            margin: 30px 0;
            background: white;
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.06);
            transition: all 0.3s ease;
        }

        .rule-category:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.12);
        }

        .news-timeline {
            position: relative;
            padding-left: 30px;
            border-left: 3px solid var(--accent-color);
            margin-left: 15px;
        }

        .news-item {
            position: relative;
            padding: 25px;
            margin-bottom: 40px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 3px 6px rgba(0,0,0,0.05);
        }

        .news-item::before {
            content: '';
            position: absolute;
            left: -38px;
            top: 25px;
            width: 20px;
            height: 20px;
            background: var(--accent-color);
            border-radius: 50%;
            border: 3px solid white;
        }

        .cta-button {
            display: inline-flex;
            align-items: center;
            padding: 16px 45px;
            background: var(--primary-color);
            color: white;
            border-radius: 50px;
            text-decoration: none;
            transition: all 0.3s ease;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            gap: 10px;
        }

        .cta-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(118, 2, 2, 0.3);
        }

        .icon {
            width: 24px;
            height: 24px;
            fill: currentColor;
        }

        footer {
            background: var(--secondary-color);
            color: white;
            padding: 60px 0;
            text-align: center;
            margin-top: 80px;
        }
    </style>
</head>
<body>
<!-- En-tête héroïque -->
<header class="hero">
    <div class="container">
        <h1 class="animate__animated animate__fadeInDown">Geo Realms Craft</h1>
        <p class="animate__animated animate__fadeInUp delay-1">Une expérience Minecraft révolutionnée par 345 mods</p>
        <a href="#presentation" class="cta-button animate__animated animate__zoomIn delay-2">
            <svg class="icon" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
            Commencer l'aventure
        </a>
    </div>
</header>

<!-- Navigation -->
<nav class="nav-wrapper">
    <div class="container">
        <ul class="right hide-on-med-and-down">
            <li><a href="#presentation" class="waves-effect">Présentation</a></li>
            <li><a href="#regles" class="waves-effect">Règles</a></li>
            <li><a href="#news" class="waves-effect">Nouveautés</a></li>
            <li><a href="#join" class="waves-effect">Rejoindre</a></li>
        </ul>
    </div>
</nav>

<!-- Section Présentation -->
<section id="presentation" class="section container">
    <div class="row">
        <div class="col s12">
            <div class="highlight-card">
                <h2 class="center-align">Un Monde Où Minecraft Rencontre la Réalité</h2>
                <p class="flow-text">Geo Realms Craft réinvente l'expérience Minecraft en donnant encore plus de liberté !</p>

                <div class="row">
                    <div class="col s12 m6">
                        <div class="rule-category">
                            <h4>🌍 Génération de Monde Épique</h4>
                            <ul class="browser-default">
                                <li>Immensité des biomes et de la verticalité de certains massifs </li>
                                <li>Répartition réaliste des ressources minérales</li>
                                <li>Structure entierrement retravaillé </li>
                            </ul>
                        </div>
                    </div>

                    <div class="col s12 m6">
                        <div class="rule-category">
                            <h4>🔧 principaux mods</h4>
                            <ul class="browser-default">
                                <li>Graphisme, audio, animation retravaillé</li>
                                <li>Système de colonies évolutif avec Minecolonies</li>
                                <li>Machineries avec Create 6.0</li>
                                <li>Vehicules comme des trains, avions, voitures, bateaux</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col s12">

                            <h4>🌈 Fonctionnalités Clés</h4>
                            <div class="row">
                                <div class="col s12 m4">
                                    <h5>Nourriture Stratégique</h5>
                                    <p>Systeme de nutrition nécessitant une alimentation variée et équilibrée </p>
                                </div>
                                <div class="col s12 m4">
                                    <h5>Combat Tactique</h5>
                                    <p>Refonte complète du système de combat avec styles d'attaques et équipements spécialisés</p>
                                </div>
                                <div class="col s12 m4">
                                    <h5>Économie Dynamique</h5>
                                    <p>Marché basé sur les joueurs avec monnaie non duplicable</p>
                                </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Section Règles -->
<section id="regles" class="section container">
    <h2 class="center-align">Règles du Serveur</h2>

    <div class="rule-category">
        <h4>📜 Conduite Générale</h4>
        <ul class="browser-default">
            <li>Respectez tous les joueurs et le staff.</li>
            <li>Aucun langage offensant ou inapproprié.</li>
            <li>Le grief et le vol sont strictement interdits.</li>
            <li>Respectez la diversité des joueurs en évitant les commentaires discriminatoires.</li>
            <li>Évitez les discussions politiques ou religieuses pour maintenir un environnement convivial.</li>
            <li>Signalez tout comportement inapproprié ou harcèlement au staff pour une intervention rapide.</li>
            <li>Les disputes entre joueurs doivent être résolues de manière calme et respectueuse.</li>
        </ul>
    </div>

    <div class="rule-category">
        <h4>⚔ Gameplay Équilibré</h4>
        <ul class="browser-default">
            <li>Ne pas tricher ou utiliser de mods qui donnent un avantage injuste.</li>
            <li>Les constructions offensantes ou inappropriées seront supprimées.</li>
            <li>Ne pas perturber les événements organisés par le serveur pour assurer une expérience de jeu fluide pour tous.</li>
            <li>Évitez de monopoliser les ressources rares pour permettre à tous les joueurs de progresser équitablement.</li>
            <li>Respectez les zones de construction des autres joueurs et ne les modifiez pas sans autorisation.</li>
            <li>Évitez d'utiliser des bugs du jeu à votre avantage pour maintenir l'équité entre les joueurs.</li>
        </ul>
    </div>

    <div class="rule-category">
        <h4>💰 Intégrité Économique</h4>
        <ul class="browser-default">
            <li>Les transactions doivent être équitables et consenties par les deux parties.</li>
            <li>La manipulation de l'économie du serveur est interdite.</li>
            <li>Ne pas escroquer d'autres joueurs lors de transactions en établissant des prix équitables.</li>
            <li>Signalez toute activité suspecte liée à l'économie pour maintenir l'intégrité du système financier du serveur.</li>
            <li>Évitez de monopoliser les commerces pour permettre à tous les joueurs de participer à l'économie du serveur.</li>
            <li>Ne pas échanger des objets obtenus de manière frauduleuse pour préserver l'équilibre économique du serveur.</li>
        </ul>
    </div>

    <!-- ... Autres catégories de règles ... -->
</section>

<!-- Section Nouveautés -->
<section id="news" class="section container">
    <h2 class="center-align">Évolutions Récentes</h2>
    <div class="news-timeline">
        <div class="news-item">
            <h5>Version 1.0.2 🔄</h5>
            <p>• Optimisation majeure des performances serveur<br>
                • Refonte audio complete du jeu<br>
                • Test en conditions réel sur le serveur<br>
                • Rajout de mods d'ambiances </p>
        </div>
        <div class="news-item">
            <h5>Version 1.0.1 🔄</h5>
            <p>• Optimisation majeure des performances serveur<br>
                • Correction des bugs de génération de chunks<br>
                • Mises a jour vers create 6.0 et trie dans les mods</p>
        </div>
        <div class="news-item">
            <h5>Version 1.0.0 🎉</h5>
            <p>• Premiere release<br>
                • Premier test serveur<br>
            </p>
        </div>
    </div>
</section>

<!-- Section Rejoindre -->
<section id="join" class="section container center-align">
    <div class="highlight-card">
        <h2>Prêt à Nous Rejoindre ?</h2>
        <p class="flow-text">Postule des maintenant pour nous rejoindre ! </code></p>
        <div class="row">
            <div class="col s12 m6">
                <a href="postule.html" class="cta-button">
                    <svg class="icon" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
                    Je postule!
                </a>
            </div>
            <div class="col s12 m6">
                <a href="#" class="cta-button">
                    <svg class="icon" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
                    Guide d'Installation
                </a>
            </div>
        </div>
    </div>
</section>

<!-- Pied de page -->
<footer>
    <div class="container">
        <p>© 2025 Geo Realms Craft - Tous droits réservés</p>
        <p>Contact : <a href="https://discord.gg/uP7cDES" class="white-text">Discord Ebony</a></p>
    </div>
</footer>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                }
            });
        }, { threshold: 0.15 });

        document.querySelectorAll('.section').forEach(section => {
            observer.observe(section);
        });

        $('a[href^="#"]').on('click', function(e) {
            e.preventDefault();
            const target = $(this.getAttribute('href'));
            if (target.length) {
                $('html, body').animate({
                    scrollTop: target.offset().top - 70
                }, 800);
            }
        });

        M.AutoInit();
    });
</script>
</body>
</html>