<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>My Portfolio</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/scrollreveal"></script>
    <script>
        tailwind.config = {
        darkMode: 'class'
        }
    </script>
    <script src="assets/css/portofolio.js"></script>
    <script src="assets/css/samppage.js"></script>
</head>
<!-- Di bagian body -->
<body class="bg-gray-100 dark:bg-gray-900 transition-colors duration-300 overflow-x-hidden">
    <html class="scroll-smooth"></html>
    <div class="page-container main-content">
    <header class="fixed w-full top-0 z-50 bg-white/80 dark:bg-gray-800/80 backdrop-blur-md shadow-md py-4 px-6 flex justify-between items-center">
        <!-- Existing header content -->
        <a href="#" class="text-gray-900 dark:text-white font-bold text-xl">My Portfolio</a>

        <div class="flex items-center space-x-2">
            <button id="theme-toggle" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white focus:outline-none">
                <svg id="theme-icon" class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
                </svg>
            </button>
            <button id="mobile-nav-toggle" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white focus:outline-none">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                </svg>
            </button>
        </div>

        <!-- Mobile Menu -->
        <div class="mobile-menu bg-white dark:bg-gray-800 p-4 fixed top-0 right-0 w-64 h-full shadow-lg transform transition-transform duration-300 translate-x-full">
            <!-- Your existing mobile menu content -->
            <button class="close-mobile-menu text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white focus:outline-none mb-4">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
            <a href="#home" class="block py-2 px-4 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg shadow-sm transition duration-300">Home</a>
            <a href="#about" class="block py-2 px-4 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg shadow-sm transition duration-300">About</a>
            <a href="#skills" class="block py-2 px-4 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg shadow-sm transition duration-300">Skills</a>
            <a href="#projects" class="block py-2 px-4 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg shadow-sm transition duration-300">Projects</a>
            <a href="#contact" class="block py-2 px-4 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg shadow-sm transition duration-300">Contact</a>
            <button onclick="showSampPage()" class="block w-full text-left py-2 px-4 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg shadow-sm transition duration-300">SA:MP Download</button>
        </div>
    </header>


    <main class="w-full max-w-full pt-20 px-4">
        <!-- Home Section -->
        <section id="home" class="mb-16 text-center">
            <h1 class="text-4xl font-bold mb-4 text-gray-900 dark:text-white">Hello, I'm Nicholas</h1>
            <p class="typing-demo text-gray-700 dark:text-gray-400 max-w-2xl mx-auto">
                <!-- typing animasi-->
            </p>
            <!-- Tombol Discord -->
            <a href="https://discord.gg/ECkyhdaY9H" target="_blank" class="inline-flex items-center mt-4 bg-[#5865F2] hover:bg-[#4752C4] text-white font-bold py-2 px-4 rounded-lg shadow-md hover:shadow-xl transform transition-all duration-300 hover:scale-105">
                <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path d="M20.222 0c1.406 0 2.54 1.137 2.607 2.475V24l-2.677-2.273-1.47-1.338-1.604-1.398.67 2.205H3.71c-1.402 0-2.54-1.065-2.54-2.476V2.48C1.17 1.142 2.31 0 3.715 0h16.54zm-6.118 5.683h-.03l-.202.2c2.073.6 3.076 1.537 3.076 1.537-1.336-.668-2.54-1.002-3.744-1.137-.87-.135-1.74-.064-2.475 0h-.2c-.47 0-1.47.2-2.81.735-.467.203-.735.336-.735.336s1.002-1.002 3.21-1.537l-.135-.135s-1.672-.064-3.477 1.27c0 0-1.805 3.144-1.805 7.02 0 0 1 1.74 3.743 1.806 0 0 .4-.533.805-1.002-1.54-.468-2.14-1.404-2.14-1.404s.134.066.335.2h.06c.03 0 .044.015.06.03v.006c.016.016.03.03.06.03.33.136.66.272.93.4.466.202 1.065.403 1.8.536.93.135 1.996.2 3.21 0 .6-.135 1.2-.267 1.8-.535.39-.2.87-.4 1.397-.737 0 0-.6.936-2.205 1.404.33.466.795 1 .795 1 2.744-.06 3.81-1.8 3.87-1.726 0-3.87-1.815-7.02-1.815-7.02-1.635-1.214-3.165-1.26-3.435-1.26l.056-.02z"></path>
                </svg>
                Join My Discord Server
            </a>
        </section>

        <!-- About Section -->
        <section id="about" class="mb-16">
            <h2 class="text-2xl font-bold mb-8 text-center text-gray-900 dark:text-white">About Me</h2>
            <p class="text-gray-700 dark:text-gray-400 max-w-3xl mx-auto">I am a full-stack developer specializing in backend, frontend, and software development. With expertise in JavaScript, C++, and C#, I build efficient and scalable applications. I am passionate about solving complex problems and crafting seamless user experiences.</p>
            <p class="text-gray-700 dark:text-gray-400 max-w-3xl mx-auto mt-4">My skills include developing REST APIs, database design, and optimizing performance for high-traffic applications. I work with modern frameworks like React, Node.js, and .NET to create innovative software solutions.</p>
        </section>

        <section id="skills" class="mb-16">
            <h2 class="text-2xl font-bold mb-8 text-center text-gray-900 dark:text-white">My Skills</h2>
            <div class="grid grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-4 mx-auto px-0">
                <div class="skill-card flex flex-col items-center p-2 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-xl">
                <img src="https://img.icons8.com/color/48/000000/c-plus-plus-logo.png" alt="C++" class="w-10 h-10 mb-2">
                <span class="text-xs text-gray-700 dark:text-gray-300">C++</span>
                </div>
                <div class="skill-card flex flex-col items-center p-2 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-xl">
                <img src="https://img.icons8.com/color/48/000000/c-sharp-logo.png" alt="C#" class="w-10 h-10 mb-2">
                <span class="text-xs text-gray-700 dark:text-gray-300">C#</span>
                </div>
                <div class="skill-card flex flex-col items-center p-2 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-xl">
                <img src="https://img.icons8.com/color/48/000000/nodejs.png" alt="Node.js" class="w-10 h-10 mb-2">
                <span class="text-xs text-gray-700 dark:text-gray-300">Node.js</span>
                </div>
                <div class="skill-card flex flex-col items-center p-2 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-xl">
                <img src="https://img.icons8.com/color/48/000000/python.png" alt="Python" class="w-10 h-10 mb-2">
                <span class="text-xs text-gray-700 dark:text-gray-300">Python</span>
                </div>
                <div class="skill-card flex flex-col items-center p-2 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-xl">
                <img src="https://img.icons8.com/color/48/000000/scratch.png" alt="Scratch" class="w-10 h-10 mb-2">
                <span class="text-xs text-gray-700 dark:text-gray-300">Scratch</span>
                </div>
                <div class="skill-card flex flex-col items-center p-2 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-xl">
                <img src="assets/img/mit.png" alt="MIT App Inventor" class="w-10 h-10 mb-2">
                <span class="text-xs text-gray-700 dark:text-gray-300">MIT App Inventor</span>
                </div>
                <div class="skill-card flex flex-col items-center p-2 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-xl">
                <img src="assets/img/dsa.png" alt="Data Structure" class="w-10 h-10 mb-2">
                <span class="text-xs text-gray-700 dark:text-gray-300">Data Structure</span>
                </div>
                <div class="skill-card flex flex-col items-center p-2 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-xl">
                <img src="assets/img/mongodb.png" alt="MongoDB" class="w-10 h-10 mb-2">
                <span class="text-xs text-gray-700 dark:text-gray-300">MongoDB</span>
                </div>
                <div class="skill-card flex flex-col items-center p-2 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-xl">
                <img src="https://img.icons8.com/officel/40/php-logo.png" alt="PHP" class="w-10 h-10 mb-2">
                <span class="text-xs text-gray-700 dark:text-gray-300">PHP</span>
                </div>
                <div class="skill-card flex flex-col items-center p-2 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-xl">
                <img src="https://img.icons8.com/color/48/css3.png" alt="CSS" class="w-10 h-10 mb-2">
                <span class="text-xs text-gray-700 dark:text-gray-300">CSS</span>
                </div>
                <div class="skill-card flex flex-col items-center p-2 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-xl">
                <img src="https://img.icons8.com/color/48/html-5.png" alt="HTML" class="w-10 h-10 mb-2">
                <span class="text-xs text-gray-700 dark:text-gray-300">HTML</span>
                </div>
                <div class="skill-card flex flex-col items-center p-2 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-xl">
                <img src="https://img.icons8.com/color/48/mysql-logo.png" alt="MySQL" class="w-10 h-10 mb-2">
                <span class="text-xs text-gray-700 dark:text-gray-300">MySQL</span>
                </div>
                <div class="skill-card flex flex-col items-center p-2 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-xl">
                <img src="assets/img/git.png" alt="C" class="w-10 h-10 mb-2">
                <span class="text-xs text-gray-700 dark:text-gray-300">Git</span>
                </div>
                <div class="skill-card flex flex-col items-center p-2 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-xl">
                <img src="assets/img/typescript.png" alt="ImGui" class="w-10 h-10 mb-2">
                <span class="text-xs text-gray-700 dark:text-gray-300">TypeScript</span>
                </div>
            </div>
        </section>

        <!-- Modal Structure -->
        <div id="image-modal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black bg-opacity-75">
            <div class="relative max-w-3xl w-full p-4">
                <img id="modal-image" src="" alt="Full Size Image" class="w-full h-auto rounded-lg shadow-lg">
                <button id="close-modal" class="absolute top-4 right-4 text-white text-2xl hover:text-gray-300">&times;</button>
            </div>
        </div>

        <section id="projects" class="w-full max-w-full mb-8">
            <h2 class="text-2xl font-bold mb-4 text-gray-900 dark:text-white text-center">Projects</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mx-auto px-0">
                <div class="project-card p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-xl transform transition-all duration-300">
                    <img src="assets/img/samp2.jpg" alt="Project 1" class="w-full h-40 object-cover mb-4 rounded-lg cursor-pointer">
                    <h3 class="text-lg font-medium text-gray-900 dark:text-white">SA:MP Client Universal</h3>
                    <p class="text-gray-700 dark:text-gray-400">SA:MP Client that has cheat menu and support android 10+ with 3 touch sync.</p>
                    <p class="text-gray-600 dark:text-gray-300 mt-2">Tools & Technologies: <strong>C++, ImGui</strong></p> 
                    <button onclick="showSampPage()" class="text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">Download Client</a>
                </div>
                <div class="project-card p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-xl transform transition-all duration-300">
                    <img src="assets/img/ucp.png" alt="Project 1" class="w-full h-40 object-cover mb-4 rounded-lg cursor-pointer">
                    <h3 class="text-lg font-medium text-gray-900 dark:text-white">SA:MP User Control Panel Website</h3>
                    <p class="text-gray-700 dark:text-gray-400">This website can view your SA:MP character stats. (using MySQL database)</p>
                    <p class="text-gray-600 dark:text-gray-300 mt-2">Tools & Technologies: <strong>PHP, HTML, CSS, JAVASCRIPT</strong></p>
                    <a href="https://domicarp.my.id" class="text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">View Website</a>
                </div>
                <div class="project-card p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-xl transform transition-all duration-300">
                    <img src="assets/img/sampwebsite.png" alt="Project 1" class="w-full h-40 object-cover mb-4 rounded-lg cursor-pointer">
                    <h3 class="text-lg font-medium text-gray-900 dark:text-white">SA:MP Website</h3>
                    <p class="text-gray-700 dark:text-gray-400">This is a simple website that display your IP and Port Server with server description.</p>
                    <p class="text-gray-600 dark:text-gray-300 mt-2">Tools & Technologies: <strong>HTML, CSS</strong></p> 
                    <button onclick="showSampPage()" class="text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">Download Website</a>
                </div>
                <div class="project-card p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-xl transform transition-all duration-300">
                    <img src="assets/img/mbot.png" alt="Project 1" class="w-full h-40 object-cover mb-4 rounded-lg cursor-pointer">
                    <h3 class="text-lg font-medium text-gray-900 dark:text-white">Growtopia Multibotting</h3>
                    <p class="text-gray-700 dark:text-gray-400">A bot is a program or script designed to automate repetitive actions like farming, trading, or other in-game activities, allowing users to perform tasks without direct manual input.</p>
                    <p class="text-gray-600 dark:text-gray-300 mt-2">Tools & Technologies: <strong>C++, ImGui</strong></p>
                </div>
                <div class="project-card p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-xl transform transition-all duration-300">
                    <img src="assets/img/proxy.png" alt="Project 1" class="w-full h-40 object-cover mb-4 rounded-lg cursor-pointer">
                    <h3 class="text-lg font-medium text-gray-900 dark:text-white">Growtopia Proxy</h3>
                    <p class="text-gray-700 dark:text-gray-400">Proxy is a server that acts as an intermediary between a player's game client and the official Growtopia game servers. It forwards requests from the player's client to the game servers and subsequently returns the server responses to the client.</p>
                    <p class="text-gray-600 dark:text-gray-300 mt-2">Tools & Technologies: <strong>C++, C</strong></p> 
                </div>
                <div class="project-card p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-xl transform transition-all duration-300">
                    <img src="assets/img/portfolio.PNG" alt="Project 1" class="w-full h-40 object-cover mb-4 rounded-lg cursor-pointer">
                    <h3 class="text-lg font-medium text-gray-900 dark:text-white">Portofolio Website</h3>
                    <p class="text-gray-700 dark:text-gray-400">A portfolio website is a personal or professional website designed to showcase your work, skills, and projects. It serves as an online resume or portfolio, allowing visitors (potential employers, clients, or collaborators) to see what you have built and what technologies you use.</p>
                    <p class="text-gray-600 dark:text-gray-300 mt-2">Tools & Technologies: <strong>HTML, CSS, JAVASCRIPT</strong></p> 
                </div>
            </div>
        </section>

        
        <section id="contact" class="mb-8 text-center">
            <h2 class="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Contact</h2>
            <a href="mailto:nichdevs@gmail.com" class="inline-block bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg shadow-md hover:shadow-xl transform transition-all duration-300 hover:scale-110">
                Send Email
            </a>
        </section>
    </main>

    <footer class="bg-white dark:bg-gray-800 py-4 px-6 flex justify-between items-center">
        <p class="text-gray-600 dark:text-gray-400">&copy; 2025 Nicholas Developer. All rights reserved.</p>
        <div class="flex space-x-4">
        <a href="https://github.com/NicholasDevelopers" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white hover:animate-pulse">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 2C6.477 2 2 6.477 2 12c0 4.419 2.865 8.166 6.839 9.489.5.09.682-.217.682-.482 0-.239-.009-.871-.014-1.71-2.782.603-3.369-1.342-3.369-1.342-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.071 1.531 1.032 1.531 1.032.892 1.532 2.341 1.089 2.91.833.092-.647.35-1.089.636-1.339-2.22-.251-4.555-1.111-4.555-4.943 0-1.091.39-1.984 1.029-2.688-.103-.253-.446-1.27.098-2.65 0 0 .84-.269 2.75 1.025A9.607 9.607 0 0112 6.82c.85.004 1.705.115 2.504.337 1.909-1.294 2.747-1.025 2.747-1.025.546 1.38.202 2.397.1 2.65.64.704 1.028 1.597 1.028 2.688 0 3.839-2.337 4.687-4.565 4.935.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .267.18.578.688.48C19.137 20.163 22 16.418 22 12c0-5.523-4.477-10-10-10z"></path>
            </svg>
        </a>
        <a href="https://discord.gg/ECkyhdaY9H" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white hover:animate-pulse">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M20.222 0c1.406 0 2.54 1.137 2.607 2.475V24l-2.677-2.273-1.47-1.338-1.604-1.398.67 2.205H3.71c-1.402 0-2.54-1.065-2.54-2.476V2.48C1.17 1.142 2.31 0 3.715 0h16.54zm-6.118 5.683h-.03l-.202.2c2.073.6 3.076 1.537 3.076 1.537-1.336-.668-2.54-1.002-3.744-1.137-.87-.135-1.74-.064-2.475 0h-.2c-.47 0-1.47.2-2.81.735-.467.203-.735.336-.735.336s1.002-1.002 3.21-1.537l-.135-.135s-1.672-.064-3.477 1.27c0 0-1.805 3.144-1.805 7.02 0 0 1 1.74 3.743 1.806 0 0 .4-.533.805-1.002-1.54-.468-2.14-1.404-2.14-1.404s.134.066.335.2h.06c.03 0 .044.015.06.03v.006c.016.016.03.03.06.03.33.136.66.272.93.4.466.202 1.065.403 1.8.536.93.135 1.996.2 3.21 0 .6-.135 1.2-.267 1.8-.535.39-.2.87-.4 1.397-.737 0 0-.6.936-2.205 1.404.33.466.795 1 .795 1 2.744-.06 3.81-1.8 3.87-1.726 0-3.87-1.815-7.02-1.815-7.02-1.635-1.214-3.165-1.26-3.435-1.26l.056-.02z"></path>
            </svg>
        </a>
        </div>
    </footer>
    </div>

      <!-- SA:MP Download Page Container -->
    <div class="page-container samp-page">
        <div class="container mx-auto px-4 py-8">
            <!-- Back Button -->
            <button onclick="showMainPage()" class="mb-8 flex items-center text-blue-500 hover:text-blue-700 transition-colors duration-300">
                <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                </svg>
                Back to Main Page
            </button>

            <h1 class="text-4xl font-bold text-center text-gray-900 dark:text-white mb-12">SA:MP Downloads</h1>

            <!-- Download Cards -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
                <!-- Client Download Card -->
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition-all duration-300 hover:-translate-y-2">
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">SA:MP Universal Client</h3>
                        <p class="text-gray-700 dark:text-gray-400 mb-4">
                            The official SA:MP client [3 Touch Sync] for Android. Join servers and play with others.
                        </p>
                        <a href="https://www.mediafire.com/file/s7rohjxxw8fjtmb/CLIENT+V3+[2024]+++DATA.zip/file" target="_blank" 
                           class="inline-block w-full text-center bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition-colors duration-300">
                            Download Client [V3]
                        </a>
                        <a href="https://www.mediafire.com/file/9cwzcidueitvsh3/CLIENT_V2_%255BUPDATED_CHEAT_MENU%255D.apk/file" target="_blank" 
                           class="inline-block w-full text-center bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition-colors duration-300">
                            Download Client [V2]
                        </a>
                        <a href="https://www.mediafire.com/file/5ze7s1o408sktmg/SAMP+CLIENT+SUPPORT+3+TOUCH.zip/file" target="_blank" 
                            class="inline-block w-full text-center bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition-colors duration-300">
                            Download Client [V1]
                        </a>
                    </div>
                </div>

                <!-- Server Download Card -->
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition-all duration-300 hover:-translate-y-2">
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">SA:MP Website</h3>
                        <p class="text-gray-700 dark:text-gray-400 mb-4">
                            Get your own SA:MP Website for free.
                        </p>
                        <a href="https://github.com/NicholasDevelopers/samp-website" target="_blank"
                           class="inline-block w-full text-center bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition-colors duration-300">
                            Download Website
                        </a>
                    </div>
                </div>

                <!-- Tools Download Card -->
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition-all duration-300 hover:-translate-y-2">
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">SA:MP Tools</h3>
                        <p class="text-gray-700 dark:text-gray-400 mb-4">
                            Additional tools and plugins to enhance your SA:MP experience.
                        </p>
                        <a href="https://www.sa-mp.com/download.php" target="_blank"
                           class="inline-block w-full text-center bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition-colors duration-300">
                            Download SA:MP
                        </a>
                    </div>
                </div>
            </div>

            <!-- FAQ Section -->
            <div class="mt-16 space-y-4">
                <h3 class="text-2xl font-bold mb-8 text-center text-gray-900 dark:text-white">Frequently Asked Questions</h3>
                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
                    <h4 class="text-lg font-semibold text-gray-900 dark:text-white">What is SA:MP?</h4>
                    <p class="text-gray-700 dark:text-gray-400">
                        SA:MP (San Andreas Multiplayer) is a multiplayer modification for Grand Theft Auto: San Andreas.
                    </p>
                </div>
                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
                    <h4 class="text-lg font-semibold text-gray-900 dark:text-white">Is SA:MP free?</h4>
                    <p class="text-gray-700 dark:text-gray-400">
                        Yes, SA:MP is completely free to download and play.
                    </p>
                </div>
                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
                    <h4 class="text-lg font-semibold text-gray-900 dark:text-white">Can I host my own server?</h4>
                    <p class="text-gray-700 dark:text-gray-400">
                        Yes, you can download the server files and host your own SA:MP server.
                    </p>
                </div>
            </div>
        </div>
    </div>

    <script src="assets/js/portofolio.js"></script>
    <script src="assets/js/server.js"></script>
</body>
</html>