<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="mDirt is a Minecraft datapack generator with an intuitive GUI. Easily create custom blocks, items, recipes, and more. No coding required.">
    <link rel="icon" href="mDirtIcon.png" type="image/x-icon">
    <title>mDirt - Minecraft Datapack Generator</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --primary-color: #4a90e2;
            --secondary-color: #5cb85c;
            --accent-color: #f39c12;
            --dark-bg: #1a1a1a;
            --dark-surface: #2d2d2d;
            --text-light: #ffffff;
            --text-gray: #b0b0b0;
            --minecraft-green: #55ff55;
            --minecraft-blue: #5555ff;
            --gradient-primary: linear-gradient(135deg, #4a90e2, #357abd);
            --gradient-accent: linear-gradient(135deg, #5cb85c, #449d44);
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: var(--dark-bg);
            color: var(--text-light);
            line-height: 1.6;
            overflow-x: hidden;
        }

        /* Navigation */
        .navbar {
            position: fixed;
            top: 0;
            width: 100%;
            background: rgba(26, 26, 26, 0.95);
            backdrop-filter: blur(10px);
            z-index: 1000;
            padding: 1rem 0;
            transition: all 0.3s ease;
        }

        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-size: 1.8rem;
            font-weight: bold;
            background: var(--gradient-primary);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .nav-links {
            display: flex;
            list-style: none;
            gap: 2rem;
        }

        .nav-links a {
            color: var(--text-light);
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
            position: relative;
            cursor: pointer;
        }

        .nav-links a:hover {
            color: var(--primary-color);
            transform: translateY(-2px);
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -5px;
            left: 50%;
            background: var(--primary-color);
            transition: all 0.3s ease;
            transform: translateX(-50%);
        }

        .nav-links a:hover::after {
            width: 100%;
        }

        .nav-links a.active-link {
            color: var(--primary-color);
            font-weight: 600;
        }

        /* Mobile menu toggle */
        .mobile-toggle {
            display: none;
            flex-direction: column;
            cursor: pointer;
            background: none;
            border: none;
            padding: 5px;
        }

        .mobile-toggle span {
            width: 25px;
            height: 3px;
            background: var(--text-light);
            margin: 3px 0;
            transition: 0.3s;
            border-radius: 2px;
        }

        .mobile-toggle.active span:nth-child(1) {
            transform: rotate(-45deg) translate(-5px, 6px);
        }

        .mobile-toggle.active span:nth-child(2) {
            opacity: 0;
        }

        .mobile-toggle.active span:nth-child(3) {
            transform: rotate(45deg) translate(-5px, -6px);
        }

        /* Main content sections */
        .section {
            min-height: 100vh;
            padding: 5rem 2rem;
            display: none;
        }

        .section.active {
            display: block;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        /* Hero Section */
        .hero {
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            background: radial-gradient(circle at center, rgba(74, 144, 226, 0.1) 0%, transparent 70%);
            position: relative;
            overflow: hidden;
            min-height: 100vh;
            padding-top: 80px; /* to account for navbar height */
            box-sizing: border-box;
        }

        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.03)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
            opacity: 0.5;
        }

        .hero-content {
            max-width: 800px;
            width: 100%;
            margin: 0 auto;
            text-align: center;
        }

        .hero h1 {
            font-size: 4rem;
            margin-bottom: 1rem;
            background: var(--gradient-primary);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: fadeInUp 1s ease;
        }

        .hero .subtitle {
            font-size: 1.5rem;
            color: var(--text-gray);
            margin-bottom: 2rem;
            animation: fadeInUp 1s ease 0.2s both;
        }

        .hero .description {
            font-size: 1.1rem;
            color: var(--text-gray);
            margin-bottom: 3rem;
            animation: fadeInUp 1s ease 0.4s both;
        }

        .cta-buttons {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
            animation: fadeInUp 1s ease 0.6s both;
        }

        .btn {
            padding: 1rem 2rem;
            border: none;
            border-radius: 50px;
            font-size: 1.1rem;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            display: inline-block;
        }

        .btn-primary {
            background: var(--gradient-primary);
            color: white;
            box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3);
        }

        .btn-secondary {
            background: transparent;
            color: var(--primary-color);
            border: 2px solid var(--primary-color);
        }

        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(74, 144, 226, 0.4);
        }

        /* Features Grid */
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin: 4rem 0;
        }

        .feature-card {
            background: var(--dark-surface);
            padding: 2rem;
            border-radius: 15px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(74, 144, 226, 0.1), transparent);
            transition: all 0.5s ease;
        }

        .feature-card:hover::before {
            left: 100%;
        }

        .feature-card:hover {
            transform: translateY(-5px);
            border-color: var(--primary-color);
            box-shadow: 0 10px 30px rgba(74, 144, 226, 0.2);
        }

        .feature-icon {
            font-size: 3rem;
            margin-bottom: 1rem;
            color: var(--primary-color);
        }

        .feature-card h3 {
            font-size: 1.5rem;
            margin-bottom: 1rem;
            color: var(--text-light);
        }

        .feature-card p {
            color: var(--text-gray);
            line-height: 1.6;
        }

        .feature-card ul {
            color: var(--text-gray);
            margin: 1rem 0;
            padding-left: 1.5rem;
        }

        .feature-card ol {
            color: var(--text-gray);
            margin: 1rem 0;
            padding-left: 1.5rem;
        }

        /* Version Support Table */
        .version-table {
            background: var(--dark-surface);
            border-radius: 15px;
            overflow: hidden;
            margin: 2rem 0;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .version-table table {
            width: 100%;
            border-collapse: collapse;
        }

        .version-table th,
        .version-table td {
            padding: 1rem;
            text-align: left;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .version-table th {
            background: var(--gradient-primary);
            color: white;
            font-weight: 600;
        }

        .version-table tr:hover {
            background: rgba(74, 144, 226, 0.1);
        }

        .support-check {
            color: var(--minecraft-green);
            font-weight: bold;
        }

        .support-cross {
            color: #ff5555;
            font-weight: bold;
        }

        /* FAQ Section */
        .faq-item {
            background: var(--dark-surface);
            margin: 1rem 0;
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            overflow: hidden;
        }

        .faq-question {
            padding: 1.5rem;
            cursor: pointer;
            font-weight: 600;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.3s ease;
        }

        .faq-question:hover {
            background: rgba(74, 144, 226, 0.1);
        }

        .faq-answer {
            padding: 0 1.5rem;
            max-height: 0;
            overflow: hidden;
            transition: all 0.3s ease;
            color: var(--text-gray);
        }

        .faq-item.active .faq-answer {
            padding: 1.5rem;
            max-height: 300px;
        }

        .faq-toggle {
            font-size: 1.5rem;
            transition: transform 0.3s ease;
            font-weight: bold;
        }

        .faq-item.active .faq-toggle {
            transform: rotate(45deg);
        }

        /* Downloads section */
        .download-card {
            background: var(--dark-surface);
            padding: 2rem;
            border-radius: 15px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            text-align: center;
            margin: 2rem 0;
        }

        .version-badge {
            background: var(--gradient-accent);
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-weight: 600;
            display: inline-block;
            margin-bottom: 1rem;
        }

        /* Minecraft-style elements */
        .minecraft-text {
            font-family: 'Courier New', monospace;
            background: #000;
            color: var(--minecraft-green);
            padding: 0.5rem;
            border-radius: 5px;
            font-weight: bold;
            display: inline-block;
            margin: 0.2rem;
        }

        .section h2 {
            font-size: 2.5rem;
            margin-bottom: 2rem;
            text-align: center;
            background: var(--gradient-primary);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .animate-on-scroll {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease;
        }

        .animate-on-scroll.visible {
            opacity: 1;
            transform: translateY(0);
        }

        @keyframes float {
            0% {
                transform: translateY(100vh) rotate(0deg);
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            90% {
                opacity: 1;
            }
            100% {
                transform: translateY(-100vh) rotate(360deg);
                opacity: 0;
            }
        }

        .particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: rgba(74, 144, 226, 0.3);
            border-radius: 50%;
            pointer-events: none;
            animation: float linear infinite;
        }

        /* Mobile Responsive */
        @media (max-width: 768px) {
            .mobile-toggle {
                display: flex;
            }

            .nav-links {
                position: fixed;
                top: 80px;
                left: -100%;
                width: 100%;
                height: calc(100vh - 80px);
                background: var(--dark-bg);
                flex-direction: column;
                justify-content: flex-start;
                align-items: center;
                transition: all 0.3s ease;
                padding-top: 2rem;
                backdrop-filter: blur(10px);
            }

            .nav-links.active {
                left: 0;
            }

            .hero h1 {
                font-size: 2.5rem;
            }

            .hero .subtitle {
                font-size: 1.2rem;
            }

            .cta-buttons {
                flex-direction: column;
                align-items: center;
            }

            .features-grid {
                grid-template-columns: 1fr;
            }

            .container {
                padding: 0 1rem;
            }

            .section {
                padding: 3rem 1rem;
            }

            .version-table {
                overflow-x: auto;
            }

            .faq-question {
                padding: 1rem;
            }

            .faq-item.active .faq-answer {
                padding: 1rem;
            }
        }

        /* Improve button accessibility */
        .btn:focus {
            outline: 2px solid var(--primary-color);
            outline-offset: 2px;
        }

        .nav-links a:focus {
            outline: 2px solid var(--primary-color);
            outline-offset: 2px;
        }

        /* Smooth transitions for all interactive elements */
        .faq-question,
        .feature-card,
        .btn,
        .nav-links a {
            will-change: transform;
        }

        .nav-links a:focus {
            outline: none;
        }

        body:not(.user-is-tabbing) a:focus {
            outline: none;
        }

    </style>
</head>
<body>
    <!-- Navigation -->
    <nav class="navbar">
        <div class="nav-container">
            <div class="logo">mDirt</div>
            <ul class="nav-links" id="navLinks">
                <li><a href="#" data-section="home">Home</a></li>
                <li><a href="#" data-section="docs">Docs</a></li>
                <li><a href="#" data-section="downloads">Downloads</a></li>
                <li><a href="#" data-section="faq">FAQ</a></li>
                <li><a href="https://github.com/Faith-and-Code-Technologies/mDirt" target="_blank" rel="noopener noreferrer">GitHub</a></li>
            </ul>
            <button class="mobile-toggle" id="mobileToggle" aria-label="Toggle mobile menu">
                <span></span>
                <span></span>
                <span></span>
            </button>
        </div>
    </nav>

    <!-- Home Section -->
    <section id="home" class="section hero active">
        <div class="hero-content">
            <h1>mDirt</h1>
            <p class="subtitle">Minecraft Datapack Generator</p>
            <p class="description">
                Making Datapacks is really tedious. mDirt simplifies this process by providing an easy-to-use tool for generating datapacks with custom features like blocks, items, recipes, and more.
            </p>
            <div class="cta-buttons">
                <a href="#" data-section="downloads" class="btn btn-primary">Download Now</a>
                <a href="#" data-section="docs" class="btn btn-secondary">View Documentation</a>
            </div>
        </div>
        
        <div class="container" style="margin-top: 5rem;">
            <div class="features-grid">
                <div class="feature-card animate-on-scroll">
                    <div class="feature-icon">🧱</div>
                    <h3>Custom Blocks</h3>
                    <p>Create custom blocks with unique textures and properties. Full compatibility across supported Minecraft versions.</p>
                </div>
                <div class="feature-card animate-on-scroll">
                    <div class="feature-icon">⚔️</div>
                    <h3>Custom Items</h3>
                    <p>Design custom items with special behaviors. 80% feature coverage for enhanced gameplay.</p>
                </div>
                <div class="feature-card animate-on-scroll">
                    <div class="feature-icon">🔧</div>
                    <h3>Custom Recipes</h3>
                    <p>Build crafting recipes for your custom items and blocks. Complete recipe support for all versions.</p>
                </div>
                <div class="feature-card animate-on-scroll">
                    <div class="feature-icon">🎨</div>
                    <h3>Custom Paintings</h3>
                    <p>Add beautiful custom paintings to decorate your Minecraft world.</p>
                </div>
                <div class="feature-card animate-on-scroll">
                    <div class="feature-icon">🏠</div>
                    <h3>Custom Structures</h3>
                    <p>Create brilliant custom structures across your world.</p>
                </div>
                <div class="feature-card animate-on-scroll">
                    <div class="feature-icon">🛡️</div>
                    <h3>Custom Equipment</h3>
                    <p>Create new armor sets with custom textures and models. Horse armor is also supported.</p>
                </div>
                <!--
                <div class="feature-card animate-on-scroll">
                    <div class="feature-icon">🪟</div>
                    <h3>Windows Only</h3>
                    <p>Pre-packaged binary created with PyInstaller. No Python installation required - just download and run!</p>
                </div>
                <div class="feature-card animate-on-scroll">
                    <div class="feature-icon">💡</div>
                    <h3>User-Friendly</h3>
                    <p>Intuitive interface with helpful tooltips. Hover over any field to get guidance on how to use it.</p>
                </div>
                <div class="feature-card animate-on-scroll">
                    <div class="feature-icon">💰</div>
                    <h3>Free Forever</h3>
                    <p>mDirt is, and always will be, completely free for everyone!</p>
                </div>
                -->
            </div>
        </div>
    </section>

    <!-- Docs Section -->
    <section id="docs" class="section">
        <div class="container">
            <h2>Documentation</h2>
            <p style="text-align: center;">Full documentation is available on GitHub:</p>
            <div style="text-align: center; margin: 1rem 0;">
                <a href="https://github.com/Faith-and-Code-Technologies/mDirt/wiki" target="_blank" rel="noopener noreferrer" class="btn btn-secondary">View Wiki</a>
            </div> 
            <div class="feature-card" style="margin-top: 2rem;">
                <h3>📋 Supported Versions & Features</h3>
                <div class="version-table">
                    <table>
                        <thead>
                            <tr>
                                <th>Feature</th>
                                <th>1.21.4</th>
                                <th>1.21.5</th>
                                <th>1.21.6/1.21.7</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><strong>Blocks</strong></td>
                                <td><span class="support-check">✅ 100%</span></td>
                                <td><span class="support-check">✅ 100%</span></td>
                                <td><span class="support-check">✅ 100%</span></td>
                            </tr>
                            <tr>
                                <td><strong>Items</strong></td>
                                <td><span class="support-check">✅ 100%</span></td>
                                <td><span class="support-check">✅ 100%</span></td>
                                <td><span class="support-check">✅ 100%</span></td>
                            </tr>
                            <tr>
                                <td><strong>Recipes</strong></td>
                                <td><span class="support-check">✅ 100%</span></td>
                                <td><span class="support-check">✅ 100%</span></td>
                                <td><span class="support-check">✅ 100%</span></td>
                            </tr>
                            <tr>
                                <td><strong>Paintings</strong></td>
                                <td><span class="support-check">✅ 100%</span></td>
                                <td><span class="support-check">✅ 100%</span></td>
                                <td><span class="support-check">✅ 100%</span></td>
                            </tr>
                            <tr>
                                <td><strong>Structures</strong></td>
                                <td><span class="support-check">✅ 100%</span></td>
                                <td><span class="support-check">✅ 100%</span></td>
                                <td><span class="support-check">✅ 100%</span></td>
                            </tr>
                            <tr>
                                <td><strong>Equipment</strong></td>
                                <td><span class="support-check">✅ 100%</span></td>
                                <td><span class="support-check">✅ 100%</span></td>
                                <td><span class="support-check">✅ 100%</span></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>     
            <div class="feature-card" style="margin-top: 2rem;">
                <h3>🔧 What's Next: Schema-Driven UI</h3>
                <p>We're working on <strong>KoreUI</strong> - a powerful solution that will load JSON Schemas and convert them into PySide6 widgets. This will enable:</p>
                <ul>
                    <li>More complex generators</li>
                    <li>Recursive datapack creation</li>
                    <li>Advanced customization options</li>
                    <li>Schema-driven UI generation</li>
                </ul>
                <p>We're currently creating the necessary JSON Schemas - thousands of lines of JSON by hand. We appreciate your patience!</p>
            </div>
        </div>
    </section>

    <!-- Downloads Section -->
    <section id="downloads" class="section">
        <div class="container">
            <h2>Downloads</h2>
            <div class="download-card">
                <div class="version-badge">Latest: v3.0.1</div>
                <h3>mDirt for Windows</h3>
                <p>Pre-packaged binary with no dependencies required</p>
                <br>
                <a href="https://github.com/Faith-and-Code-Technologies/mDirt/releases" class="btn btn-primary" target="_blank" rel="noopener noreferrer">Download from GitHub Releases</a>
                <p style="margin-top: 1rem; color: var(--text-gray); font-size: 0.9rem;">
                    Windows Only • No Python Installation Required • ~70MB Download
                </p>
            </div>
            
            <div class="feature-card">
                <h3>📦 Installation Instructions</h3>
                <ol>
                    <li>Head over to the <strong>Releases Page</strong> on GitHub</li>
                    <li>Download the latest version of <strong>mDirt</strong></li>
                    <li>Extract the downloaded folder to your desired location</li>
                    <li>Run the executable (<code class="minecraft-text">mDirt.exe</code>)</li>
                    <li>Start generating your custom Minecraft datapacks!</li>
                </ol>
            </div>
            
            <div class="feature-card" style="margin-top: 2rem;">
                <h3>🎮 Using Your Generated Datapacks</h3>
                <p><strong>Installation:</strong></p>
                <ul>
                    <li>Place the generated datapack into your world's <strong>datapacks</strong> folder</li>
                    <li>Place the generated resourcepack into the <strong>resourcepacks</strong> folder</li>
                    <li>Enable the resourcepack in Minecraft settings</li>
                </ul>
                
                <p><strong>Getting Your Custom Items:</strong></p>
                <div style="margin: 1rem 0;">
                    <p>Use these commands in Minecraft:</p>
                    <code class="minecraft-text">/function YOURNAMESPACE:give_blocks</code>
                    <code class="minecraft-text">/function YOURNAMESPACE:give_items</code>
                    <code class="minecraft-text">/function YOURNAMESPACE:give_paintings</code>
                    <code class="minecraft-text">/function YOURNAMESPACE:give_equipment</code>
                </div>
            </div>
        </div>
    </section>

    <!-- FAQ Section -->
    <section id="faq" class="section">
        <div class="container">
            <h2>Frequently Asked Questions</h2>
            
            <div class="faq-item">
                <div class="faq-question">
                    <span>What versions of Minecraft does mDirt support?</span>
                    <span class="faq-toggle">+</span>
                </div>
                <div class="faq-answer">
                    <p>mDirt currently supports Minecraft versions 1.21.4, 1.21.5, and 1.21.6/1.21.7. Full compatibility for version 1.21.6/1.21.7 has been recently added, including support for all features like blocks, items, recipes, paintings, structures, and equipment.</p>
                </div>
            </div>
            
            <div class="faq-item">
                <div class="faq-question">
                    <span>Do I need Python installed to use mDirt?</span>
                    <span class="faq-toggle">+</span>
                </div>
                <div class="faq-answer">
                    <p>No! mDirt comes as a pre-packaged binary created using PyInstaller. You don't need Python or any other dependencies installed. Just download, extract, and run the executable.</p>
                </div>
            </div>
            
            <div class="faq-item">
                <div class="faq-question">
                    <span>Is mDirt available for Mac or Linux?</span>
                    <span class="faq-toggle">+</span>
                </div>
                <div class="faq-answer">
                    <p>Currently, mDirt is only available for Windows. We're focusing on perfecting the Windows version first, but cross-platform support may be considered in future releases.</p>
                </div>
            </div>
            
            <div class="faq-item">
                <div class="faq-question">
                    <span>What features can I create with mDirt?</span>
                    <span class="faq-toggle">+</span>
                </div>
                <div class="faq-answer">
                    <p>mDirt allows you to create custom blocks, items, recipes, paintings, structures, and equipment. We are currently working on a new major update to add more than a dozen new features..</p>
                </div>
            </div>
            
            <div class="faq-item">
                <div class="faq-question">
                    <span>How do I avoid namespace conflicts?</span>
                    <span class="faq-toggle">+</span>
                </div>
                <div class="faq-answer">
                    <p>Make sure the namespace you define in mDirt doesn't clash with any other datapack you're using. Use unique, descriptive names for your namespace to avoid conflicts.</p>
                </div>
            </div>
            
            <div class="faq-item">
                <div class="faq-question">
                    <span>Should I backup my world before using custom datapacks?</span>
                    <span class="faq-toggle">+</span>
                </div>
                <div class="faq-answer">
                    <p>Yes! Always back up your Minecraft world before applying new datapacks, especially when using custom features. It's also recommended to test datapacks in a separate world first.</p>
                </div>
            </div>
            
            <div class="faq-item">
                <div class="faq-question">
                    <span>Who created mDirt?</span>
                    <span class="faq-toggle">+</span>
                </div>
                <div class="faq-answer">
                    <p>mDirt was created by @TheJupiterDev and @JustJoshinDev, with special thanks to Admin for his custom block generation method. We welcome contributions and suggestions from the community!</p>
                </div>
            </div>
            
            <div class="faq-item">
                <div class="faq-question">
                    <span>How can I contribute or report bugs?</span>
                    <span class="faq-toggle">+</span>
                </div>
                <div class="faq-answer">
                    <p>We welcome contributions and bug reports! Please create an issue or open a pull request on our GitHub Repository. Your feedback helps make mDirt better for everyone.</p>
                </div>
            </div>
        </div>
    </section>

    <script>
        // Navigation functionality
        function showSection(sectionName) {
            // Hide all sections
            document.querySelectorAll('.section').forEach(section => {
                section.classList.remove('active');
            });

            // Show target section
            document.getElementById(sectionName).classList.add('active');

            // Update nav link states
            document.querySelectorAll('.nav-links a').forEach(link => {
                if (link.getAttribute('data-section') === sectionName) {
                    link.classList.add('active-link');
                } else {
                    link.classList.remove('active-link');
                }
            });

            // Close mobile menu
            document.getElementById('navLinks').classList.remove('active');

            // Scroll to top
            window.scrollTo(0, 0);
        }

        function toggleMobileMenu() {
            const navLinks = document.getElementById('navLinks');
            navLinks.classList.toggle('active');
        }
        
        // FAQ functionality
        function toggleFaq(element) {
            const faqItem = element.parentElement;
            const isActive = faqItem.classList.contains('active');
            
            // Close all FAQ items
            document.querySelectorAll('.faq-item').forEach(item => {
                item.classList.remove('active');
            });
            
            // Open clicked item if it wasn't active
            if (!isActive) {
                faqItem.classList.add('active');
            }
        }
        
        // Scroll animations
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };
        
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                }
            });
        }, observerOptions);
        
        // Observe all animate-on-scroll elements
        document.addEventListener('DOMContentLoaded', () => {
            const animateElements = document.querySelectorAll('.animate-on-scroll');
            animateElements.forEach(el => observer.observe(el));
        });

        document.querySelectorAll('[data-section]').forEach(link => {
            link.addEventListener('click', (e) => {
                e.preventDefault();
                const section = link.getAttribute('data-section');
                if (section) {
                    showSection(section);
                }
            });
        });

        // Close mobile menu when clicking outside
        document.addEventListener('click', (e) => {
            const navLinks = document.getElementById('navLinks');
            const mobileToggle = document.querySelector('.mobile-toggle');
            
            if (!navLinks.contains(e.target) && !mobileToggle.contains(e.target)) {
                navLinks.classList.remove('active');
            }
        });
        
        // Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });
        
        // Add navbar background on scroll
        window.addEventListener('scroll', () => {
            const navbar = document.querySelector('.navbar');
            if (window.scrollY > 50) {
                navbar.style.background = 'rgba(26, 26, 26, 0.98)';
            } else {
                navbar.style.background = 'rgba(26, 26, 26, 0.95)';
            }
        });
        
        // Typing animation for hero subtitle
        function typeWriter(element, text, speed = 100) {
            let i = 0;
            element.innerHTML = '';
            
            function type() {
                if (i < text.length) {
                    element.innerHTML += text.charAt(i);
                    i++;
                    setTimeout(type, speed);
                }
            }
            type();
        }
        
        // Initialize typing animation when page loads
        window.addEventListener('load', () => {
            const subtitle = document.querySelector('.hero .subtitle');
            if (subtitle) {
                const originalText = subtitle.textContent;
                setTimeout(() => {
                    typeWriter(subtitle, originalText, 80);
                }, 1000);
            }
        });
        
        // Add particle effect to hero background
        function createParticles() {
            const hero = document.querySelector('.hero');
            if (!hero) return;
            
            for (let i = 0; i < 50; i++) {
                const particle = document.createElement('div');
                particle.style.cssText = `
                    position: absolute;
                    width: 4px;
                    height: 4px;
                    background: rgba(74, 144, 226, 0.3);
                    border-radius: 50%;
                    pointer-events: none;
                    animation: float ${Math.random() * 10 + 10}s infinite linear;
                    left: ${Math.random() * 100}%;
                    top: ${Math.random() * 100}%;
                    animation-delay: ${Math.random() * 10}s;
                `;
                hero.appendChild(particle);
            }
        }
        
        // Add floating animation keyframes
        const style = document.createElement('style');
        style.textContent = `
            @keyframes float {
                0% {
                    transform: translateY(100vh) rotate(0deg);
                    opacity: 0;
                }
                10% {
                    opacity: 1;
                }
                90% {
                    opacity: 1;
                }
                100% {
                    transform: translateY(-100vh) rotate(360deg);
                    opacity: 0;
                }
            }
        `;
        document.head.appendChild(style);

        document.querySelectorAll('.faq-question').forEach(question => {
            question.addEventListener('click', () => toggleFaq(question));
        });
        
        // Initialize particles
        setTimeout(createParticles, 2000);
    </script>
    <footer style="text-align: center; padding: 2rem; color: var(--text-gray); font-size: 0.9rem;">
        Made by <a href="https://github.com/Faith-and-Code-Technologies/mDirt" target="_blank" style="color: var(--primary-color); text-decoration: none;">The mDirt Team</a>
    </footer>
</body>
</html>