html
    <!-- Main content -->
    <div class="relative z-10 text-center">
        <div class="floating mb-6">
            <svg class="w-32 h-32 mx-auto" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="10" y="20" width="80" height="60" rx="5" fill="#4f46e5" />
                <rect x="20" y="30" width="60" height="40" rx="2" fill="#1e293b" />
                <circle cx="50" cy="80" r="5" fill="#f97316" />
                <rect x="45" y="85" width="10" height="10" fill="#f97316" />
                <circle cx="30" cy="50" r="5" fill="#22c55e" />
                <circle cx="50" cy="50" r="5" fill="#ef4444" />
                <circle cx="70" cy="50" r="5" fill="#3b82f6" />
            </svg>
        </div>
        <h1 class="pixel-font text-4xl md:text-6xl text-white mb-4">QUEST FOR <span class="text-indigo-400">KNOWLEDGE</span></h1>
        <p class="text-indigo-200 text-xl md:text-2xl mb-8">Your adventure through CAPE & CSEC resources begins here!</p>
        <div class="flex flex-wrap justify-center gap-4">
            <button class="btn-pixel pixel-font bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg shadow-lg" onclick="scrollToSection('subjects')">
                START QUEST
            </button>
            <button class="btn-pixel pixel-font bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg shadow-lg" onclick="scrollToSection('about')">
                GAME INFO
            </button>
        </div>
    </div>
    
    <!-- Character -->
    <div class="absolute bottom-0 right-4 md:right-20 w-32 h-32 floating">
        <svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect x="35" y="20" width="30" height="30" fill="#f97316" />
            <rect x="40" y="30" width="5" height="5" fill="#000000" />
            <rect x="55" y="30" width="5" height="5" fill="#000000" />
            <rect x="45" y="40" width="10" height="5" fill="#000000" />
            <rect x="30" y="50" width="40" height="20" fill="#3b82f6" />
            <rect x="25" y="55" width="5" height="25" fill="#f97316" />
            <rect x="70" y="55" width="5" height="25" fill="#f97316" />
            <rect x="35" y="70" width="10" height="20" fill="#22c55e" />
            <rect x="55" y="70" width="10" height="20" fill="#22c55e" />
        </svg>
    </div>
</header>

<!-- Subjects Section -->
<section id="subjects" class="py-16 px-4 bg-indigo-900">
    <div class="max-w-7xl mx-auto">
        <h2 class="pixel-font text-3xl md:text-4xl text-center text-white mb-12">SELECT YOUR SUBJECT</h2>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <!-- CAPE Subjects -->
            <div class="game-card bg-gradient-to-br from-purple-700 to-purple-900 rounded-xl overflow-hidden shadow-xl">
                <div class="p-6">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="pixel-font text-xl text-white">CAPE Mathematics</h3>
                        <span class="bg-yellow-500 text-yellow-900 text-xs font-bold px-2 py-1 rounded">CAPE</span>
                    </div>
                    <div class="space-y-2 mb-6">
                        <div>
                            <div class="flex justify-between text-xs text-purple-200 mb-1">
                                <span>Progress</span>
                                <span>45%</span>
                            </div>
                            <div class="progress-bar">
                                <div class="progress-fill" style="width: 45%"></div>
                            </div>
                        </div>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-purple-200 text-sm">12 resources</span>
                        <button class="btn-pixel bg-indigo-500 hover:bg-indigo-600 text-white text-sm px-4 py-2 rounded" onclick="openSubject('cape-math')">ENTER</button>
                    </div>
                </div>
            </div>
            
            <div class="game-card bg-gradient-to-br from-blue-700 to-blue-900 rounded-xl overflow-hidden shadow-xl">
                <div class="p-6">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="pixel-font text-xl text-white">CAPE Physics</h3>
                        <span class="bg-yellow-500 text-yellow-900 text-xs font-bold px-2 py-1 rounded">CAPE</span>
                    </div>
                    <div class="space-y-2 mb-6">
                        <div>
                            <div class="flex justify-between text-xs text-blue-200 mb-1">
                                <span>Progress</span>
                                <span>30%</span>
                            </div>
                            <div class="progress-bar">
                                <div class="progress-fill" style="width: 30%"></div>
                            </div>
                        </div>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-blue-200 text-sm">15 resources</span>
                        <button class="btn-pixel bg-indigo-500 hover:bg-indigo-600 text-white text-sm px-4 py-2 rounded" onclick="openSubject('cape-physics')">ENTER</button>
                    </div>
                </div>
            </div>
            
            <div class="game-card bg-gradient-to-br from-green-700 to-green-900 rounded-xl overflow-hidden shadow-xl">
                <div class="p-6">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="pixel-font text-xl text-white">CAPE Chemistry</h3>
                        <span class="bg-yellow-500 text-yellow-900 text-xs font-bold px-2 py-1 rounded">CAPE</span>
                    </div>
                    <div class="space-y-2 mb-6">
                        <div>
                            <div class="flex justify-between text-xs text-green-200 mb-1">
                                <span>Progress</span>
                                <span>60%</span>
                            </div>
                            <div class="progress-bar">
                                <div class="progress-fill" style="width: 60%"></div>
                            </div>
                        </div>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-green-200 text-sm">18 resources</span>
                        <button class="btn-pixel bg-indigo-500 hover:bg-indigo-600 text-white text-sm px-4 py-2 rounded" onclick="openSubject('cape-chemistry')">ENTER</button>
                    </div>
                </div>
            </div>
            
            <!-- CSEC Subjects -->
            <div class="game-card bg-gradient-to-br from-red-700 to-red-900 rounded-xl overflow-hidden shadow-xl">
                <div class="p-6">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="pixel-font text-xl text-white">CSEC Mathematics</h3>
                        <span class="bg-emerald-500 text-emerald-900 text-xs font-bold px-2 py-1 rounded">CSEC</span>
                    </div>
                    <div class="space-y-2 mb-6">
                        <div>
                            <div class="flex justify-between text-xs text-red-200 mb-1">
                                <span>Progress</span>
                                <span>75%</span>
                            </div>
                            <div class="progress-bar">
                                <div class="progress-fill" style="width: 75%"></div>
                            </div>
                        </div>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-red-200 text-sm">20 resources</span>
                        <button class="btn-pixel bg-indigo-500 hover:bg-indigo-600 text-white text-sm px-4 py-2 rounded" onclick="openSubject('csec-math')">ENTER</button>
                    </div>
                </div>
            </div>
            
            <div class="game-card bg-gradient-to-br from-amber-700 to-amber-900 rounded-xl overflow-hidden shadow-xl">
                <div class="p-6">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="pixel-font text-xl text-white">CSEC English</h3>
                        <span class="bg-emerald-500 text-emerald-900 text-xs font-bold px-2 py-1 rounded">CSEC</span>
                    </div>
                    <div class="space-y-2 mb-6">
                        <div>
                            <div class="flex justify-between text-xs text-amber-200 mb-1">
                                <span>Progress</span>
                                <span>50%</span>
                            </div>
                            <div class="progress-bar">
                                <div class="progress-fill" style="width: 50%"></div>
                            </div>
                        </div>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-amber-200 text-sm">16 resources</span>
                        <button class="btn-pixel bg-indigo-500 hover:bg-indigo-600 text-white text-sm px-4 py-2 rounded" onclick="openSubject('csec-english')">ENTER</button>
                    </div>
                </div>
            </div>
            
            <div class="game-card bg-gradient-to-br from-teal-700 to-teal-900 rounded-xl overflow-hidden shadow-xl">
                <div class="p-6">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="pixel-font text-xl text-white">CSEC Biology</h3>
                        <span class="bg-emerald-500 text-emerald-900 text-xs font-bold px-2 py-1 rounded">CSEC</span>
                    </div>
                    <div class="space-y-2 mb-6">
                        <div>
                            <div class="flex justify-between text-xs text-teal-200 mb-1">
                                <span>Progress</span>
                                <span>40%</span>
                            </div>
                            <div class="progress-bar">
                                <div class="progress-fill" style="width: 40%"></div>
                            </div>
                        </div>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-teal-200 text-sm">14 resources</span>
                        <button class="btn-pixel bg-indigo-500 hover:bg-indigo-600 text-white text-sm px-4 py-2 rounded" onclick="openSubject('csec-biology')">ENTER</button>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="mt-12 text-center">
            <button class="btn-pixel pixel-font bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 text-white px-8 py-4 rounded-lg shadow-lg" onclick="showAllSubjects()">
                DISCOVER MORE SUBJECTS
            </button>
        </div>
    </div>
</section>

<!-- Features Section -->
<section class="py-16 px-4 bg-gradient-to-b from-indigo-900 to-purple-900">
    <div class="max-w-7xl mx-auto">
        <h2 class="pixel-font text-3xl md:text-4xl text-center text-white mb-12">POWER-UPS & FEATURES</h2>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <div class="game-card bg-gradient-to-br from-indigo-600 to-indigo-800 rounded-xl p-6 shadow-xl">
                <div class="w-16 h-16 mb-4 mx-auto">
                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" fill="#FCD34D"/>
                    </svg>
                </div>
                <h3 class="pixel-font text-xl text-center text-white mb-2">Past Papers</h3>
                <p class="text-indigo-200 text-center">Access a treasure trove of past exam papers with detailed solutions.</p>
            </div>
            
            <div class="game-card bg-gradient-to-br from-purple-600 to-purple-800 rounded-xl p-6 shadow-xl">
                <div class="w-16 h-16 mb-4 mx-auto">
                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM13 17H11V15H13V17ZM13 13H11V7H13V13Z" fill="#A78BFA"/>
                    </svg>
                </div>
                <h3 class="pixel-font text-xl text-center text-white mb-2">Interactive Quizzes</h3>
                <p class="text-purple-200 text-center">Test your knowledge with fun, game-like quizzes for each topic.</p>
            </div>
            
            <div class="game-card bg-gradient-to-br from-blue-600 to-blue-800 rounded-xl p-6 shadow-xl">
                <div class="w-16 h-16 mb-4 mx-auto">
                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M21 5C19.89 4.65 18.67 4.5 17.5 4.5C15.55 4.5 13.45 4.9 12 6C10.55 4.9 8.45 4.5 6.5 4.5C4.55 4.5 2.45 4.9 1 6V20.65C1 20.9 1.25 21.15 1.5 21.15C1.6 21.15 1.65 21.1 1.75 21.1C3.1 20.45 5.05 20 6.5 20C8.45 20 10.55 20.4 12 21.5C13.35 20.65 15.8 20 17.5 20C19.15 20 20.85 20.3 22.25 21.05C22.35 21.1 22.4 21.1 22.5 21.1C22.75 21.1 23 20.85 23 20.6V6C22.4 5.55 21.75 5.25 21 5ZM21 18.5C19.9 18.15 18.7 18 17.5 18C15.8 18 13.35 18.65 12 19.5V8C13.35 7.15 15.8 6.5 17.5 6.5C18.7 6.5 19.9 6.65 21 7V18.5Z" fill="#60A5FA"/>
                    </svg>
                </div>
                <h3 class="pixel-font text-xl text-center text-white mb-2">Study Notes</h3>
                <p class="text-blue-200 text-center">Comprehensive notes organized by topic for easy learning.</p>
            </div>
            
            <div class="game-card bg-gradient-to-br from-green-600 to-green-800 rounded-xl p-6 shadow-xl">
                <div class="w-16 h-16 mb-4 mx-auto">
                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M18 16.08C17.24 16.08 16.56 16.38 16.04 16.85L8.91 12.7C8.96 12.47 9 12.24 9 12C9 11.76 8.96 11.53 8.91 11.3L15.96 7.19C16.5 7.69 17.21 8 18 8C19.66 8 21 6.66 21 5C21 3.34 19.66 2 18 2C16.34 2 15 3.34 15 5C15 5.24 15.04 5.47 15.09 5.7L8.04 9.81C7.5 9.31 6.79 9 6 9C4.34 9 3 10.34 3 12C3 13.66 4.34 15 6 15C6.79 15 7.5 14.69 8.04 14.19L15.16 18.35C15.11 18.56 15.08 18.78 15.08 19C15.08 20.61 16.39 21.92 18 21.92C19.61 21.92 20.92 20.61 20.92 19C20.92 17.39 19.61 16.08 18 16.08Z" fill="#4ADE80"/>
                    </svg>
                </div>
                <h3 class="pixel-font text-xl text-center text-white mb-2">Study Groups</h3>
                <p class="text-green-200 text-center">Join virtual study groups with other students on your quest.</p>
            </div>
            
            <div class="game-card bg-gradient-to-br from-red-600 to-red-800 rounded-xl p-6 shadow-xl">
                <div class="w-16 h-16 mb-4 mx-auto">
                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M21 3H3C1.9 3 1 3.9 1 5V19C1 20.1 1.9 21 3 21H21C22.1 21 23 20.1 23 19V5C23 3.9 22.1 3 21 3ZM21 19H3V5H21V19ZM9 8H11V17H9V8ZM5 8H7V17H5V8ZM13 8H15V17H13V8ZM17 8H19V17H17V8Z" fill="#F87171"/>
                    </svg>
                </div>
                <h3 class="pixel-font text-xl text-center text-white mb-2">Video Tutorials</h3>
                <p class="text-red-200 text-center">Watch expert teachers explain complex topics in simple ways.</p>
            </div>
            
            <div class="game-card bg-gradient-to-br from-amber-600 to-amber-800 rounded-xl p-6 shadow-xl">
                <div class="w-16 h-16 mb-4 mx-auto">
                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM19 19H5V5H19V19ZM7 10H9V17H7V10ZM11 7H13V17H11V7ZM15 13H17V17H15V13Z" fill="#FBBF24"/>
                    </svg>
                </div>
                <h3 class="pixel-font text-xl text-center text-white mb-2">Progress Tracking</h3>
                <p class="text-amber-200 text-center">Monitor your learning journey with detailed statistics and achievements.</p>
            </div>
        </div>
    </div>
</section>

<!-- About Section -->
<section id="about" class="py-16 px-4 bg-gradient-to-b from-purple-900 to-indigo-900">
    <div class="max-w-7xl mx-auto">
        <h2 class="pixel-font text-3xl md:text-4xl text-center text-white mb-12">ABOUT YOUR QUEST</h2>
        
        <div class="bg-gradient-to-br from-indigo-800 to-purple-800 rounded-xl p-8 shadow-xl">
            <div class="flex flex-col md:flex-row gap-8 items-center">
                <div class="w-full md:w-1/3">
                    <div class="pixel-border p-4 bg-indigo-700 rounded-xl">
                        <svg class="w-full h-auto" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect x="40" y="40" width="120" height="120" fill="#4f46e5" />
                            <rect x="50" y="50" width="100" height="100" fill="#312e81" />
                            <rect x="60" y="60" width="80" height="80" fill="#4f46e5" />
                            <rect x="70" y="70" width="60" height="60" fill="#312e81" />
                            <rect x="80" y="80" width="40" height="40" fill="#4f46e5" />
                            <rect x="90" y="90" width="20" height="20" fill="#f97316" />
                            <rect x="95" y="95" width="10" height="10" fill="#fef3c7" />
                        </svg>
                    </div>
                </div>
                <div class="w-full md:w-2/3">
                    <h3 class="pixel-font text-2xl text-white mb-4">Your Learning Adventure</h3>
                    <p class="text-indigo-200 mb-4">Welcome to "Quest for Knowledge" - where studying for CAPE and CSEC exams becomes an exciting adventure! Our platform transforms traditional learning into a game-like experience.</p>
                    <p class="text-indigo-200 mb-4">As you progress through subjects, you'll earn experience points, unlock achievements, and level up your knowledge. Track your progress, compete with friends, and make studying fun!</p>
                    <div class="flex flex-wrap gap-4 mt-6">
                        <button class="btn-pixel bg-indigo-500 hover:bg-indigo-600 text-white px-6 py-3 rounded-lg shadow-lg" onclick="startTutorial()">
                            START TUTORIAL
                        </button>
                        <button class="btn-pixel bg-purple-500 hover:bg-purple-600 text-white px-6 py-3 rounded-lg shadow-lg" onclick="scrollToSection('subjects')">
                            BEGIN JOURNEY
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Leaderboard Section -->
<section class="py-16 px-4 bg-gradient-to-b from-indigo-900 to-blue-900">
    <div class="max-w-7xl mx-auto">
        <h2 class="pixel-font text-3xl md:text-4xl text-center text-white mb-12">TOP ADVENTURERS</h2>
        
        <div class="bg-gradient-to-br from-blue-800 to-indigo-800 rounded-xl p-6 shadow-xl">
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr class="border-b-2 border-blue-700">
                            <th class="pixel-font text-blue-300 py-4 px-2 text-left">RANK</th>
                            <th class="pixel-font text-blue-300 py-4 px-2 text-left">PLAYER</th>
                            <th class="pixel-font text-blue-300 py-4 px-2 text-left">LEVEL</th>
                            <th class="pixel-font text-blue-300 py-4 px-2 text-left">XP</th>
                            <th class="pixel-font text-blue-300 py-4 px-2 text-left">BADGES</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="border-b border-blue-700 bg-gradient-to-r from-yellow-500/20 to-transparent">
                            <td class="py-4 px-2 text-yellow-400 font-bold">1</td>
                            <td class="py-4 px-2">
                                <div class="flex items-center">
                                    <div class="w-8 h-8 rounded-full bg-yellow-500 flex items-center justify-center mr-3">
                                        <span class="font-bold">M</span>
                                    </div>
                                    <span class="text-white">MathWizard99</span>
                                </div>
                            </td>
                            <td class="py-4 px-2 text-white">42</td>
                            <td class="py-4 px-2 text-white">8,750</td>
                            <td class="py-4 px-2">
                                <div class="flex space-x-1">
                                    <span class="text-yellow-500">★</span>
                                    <span class="text-yellow-500">★</span>
                                    <span class="text-yellow-500">★</span>
                                    <span class="text-yellow-500">★</span>
                                    <span class="text-yellow-500">★</span>
                                </div>
                            </td>
                        </tr>
                        <tr class="border-b border-blue-700 bg-gradient-to-r from-gray-400/20 to-transparent">
                            <td class="py-4 px-2 text-gray-400 font-bold">2</td>
                            <td class="py-4 px-2">
                                <div class="flex items-center">
                                    <div class="w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center mr-3">
                                        <span class="font-bold">P</span>
                                    </div>
                                    <span class="text-white">PhysicsNinja</span>
                                </div>
                            </td>
                            <td class="py-4 px-2 text-white">39</td>
                            <td class="py-4 px-2 text-white">7,890</td>
                            <td class="py-4 px-2">
                                <div class="flex space-x-1">
                                    <span class="text-yellow-500">★</span>
                                    <span class="text-yellow-500">★</span>
                                    <span class="text-yellow-500">★</span>
                                    <span class="text-yellow-500">★</span>
                                    <span class="text-gray-500">★</span>
                                </div>
                            </td>
                        </tr>
                        <tr class="border-b border-blue-700 bg-gradient-to-r from-amber-700/20 to-transparent">
                            <td class="py-4 px-2 text-amber-700 font-bold">3</td>
                            <td class="py-4 px-2">
                                <div class="flex items-center">
                                    <div class="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center mr-3">
                                        <span class="font-bold">C</span>
                                    </div>
                                    <span class="text-white">ChemistryQueen</span>
                                </div>
                            </td>
                            <td class="py-4 px-2 text-white">36</td>
                            <td class="py-4 px-2 text-white">7,250</td>
                            <td class="py-4 px-2">
                                <div class="flex space-x-1">
                                    <span class="text-yellow-500">★</span>
                                    <span class="text-yellow-500">★</span>
                                    <span class="text-yellow-500">★</span>
                                    <span class="text-gray-500">★</span>
                                    <span class="text-gray-500">★</span>
                                </div>
                            </td>
                        </tr>
                        <tr class="border-b border-blue-700">
                            <td class="py-4 px-2 text-white font-bold">4</td>
                            <td class="py-4 px-2">
                                <div class="flex items-center">
                                    <div class="w-8 h-8 rounded-full bg-red-500 flex items-center justify-center mr-3">
                                        <span class="font-bold">B</span>
                                    </div>
                                    <span class="text-white">BiologyPro</span>
                                </div>
                            </td>
                            <td class="py-4 px-2 text-white">31</td>
                            <td class="py-4 px-2 text-white">6,400</td>
                            <td class="py-4 px-2">
                                <div class="flex space-x-1">
                                    <span class="text-yellow-500">★</span>
                                    <span class="text-yellow-500">★</span>
                                    <span class="text-gray-500">★</span>
                                    <span class="text-gray-500">★</span>
                                    <span class="text-gray-500">★</span>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="py-4 px-2 text-white font-bold">5</td>
                            <td class="py-4 px-2">
                                <div class="flex items-center">
                                    <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center mr-3">
                                        <span class="font-bold">E</span>
                                    </div>
                                    <span class="text-white">EnglishAce</span>
                                </div>
                            </td>
                            <td class="py-4 px-2 text-white">28</td>
                            <td class="py-4 px-2 text-white">5,980</td>
                            <td class="py-4 px-2">
                                <div class="flex space-x-1">
                                    <span class="text-yellow-500">★</span>
                                    <span class="text-yellow-500">★</span>
                                    <span class="text-gray-500">★</span>
                                    <span class="text-gray-500">★</span>
                                    <span class="text-gray-500">★</span>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <div class="mt-8 text-center">
                <button class="btn-pixel bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg shadow-lg" onclick="joinLeaderboard()">
                    JOIN THE LEADERBOARD
                </button>
            </div>
        </div>
    </div>
</section>

<!-- Footer -->
<footer class="py-12 px-4 bg-blue-900">
    <div class="max-w-7xl mx-auto">
        <div class="flex flex-col md:flex-row justify-between items-center">
            <div class="mb-8 md:mb-0">
                <h2 class="pixel-font text-2xl text-white mb-4">QUEST FOR KNOWLEDGE</h2>
                <p class="text-blue-300">Your adventure through CAPE & CSEC resources</p>
            </div>
            
            <div class="flex flex-wrap gap-8">
                <div>
                    <h3 class="pixel-font text-lg text-white mb-4">NAVIGATION</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-blue-300 hover:text-white transition">Home</a></li>
                        <li><a href="#subjects" class="text-blue-300 hover:text-white transition">Subjects</a></li>
                        <li><a href="#about" class="text-blue-300 hover:text-white transition">About</a></li>
                        <li><a href="#" class="text-blue-300 hover:text-white transition">Contact</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="pixel-font text-lg text-white mb-4">RESOURCES</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-blue-300 hover:text-white transition">CAPE Resources</a></li>
                        <li><a href="#" class="text-blue-300 hover:text-white transition">CSEC Resources</a></li>
                        <li><a href="#" class="text-blue-300 hover:text-white transition">Study Tips</a></li>
                        <li><a href="#" class="text-blue-300 hover:text-white transition">FAQ</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="pixel-font text-lg text-white mb-4">CONNECT</h3>
                    <div class="flex space-x-4">
                        <a href="#" class="text-blue-300 hover:text-white transition">
                            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path d="M22 12C22 6.48 17.52 2 12 2C6.48 2 2 6.48 2 12C2 16.84 5.44 20.87 10 21.8V15H8V12H10V9.5C10 7.57 11.57 6 13.5 6H16V9H14C13.45 9 13 9.45 13 10V12H16V15H13V21.95C18.05 21.45 22 17.19 22 12Z"></path>
                            </svg>
                        </a>
                        <a href="#" class="text-blue-300 hover:text-white transition">
                            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path d="M22.46 6C21.69 6.35 20.86 6.58 20 6.69C20.88 6.16 21.56 5.32 21.88 4.31C21.05 4.81 20.13 5.16 19.16 5.36C18.37 4.5 17.26 4 16 4C13.65 4 11.73 5.92 11.73 8.29C11.73 8.63 11.77 8.96 11.84 9.27C8.28 9.09 5.11 7.38 3 4.79C2.63 5.42 2.42 6.16 2.42 6.94C2.42 8.43 3.17 9.75 4.33 10.5C3.62 10.5 2.96 10.3 2.38 10V10.03C2.38 12.11 3.86 13.85 5.82 14.24C5.19 14.41 4.53 14.44 3.89 14.31C4.16 15.14 4.69 15.86 5.41 16.38C6.13 16.89 6.99 17.18 7.89 17.18C6.37 18.38 4.49 19.03 2.56 19.02C2.22 19.02 1.88 19 1.54 18.96C3.44 20.15 5.7 20.84 8 20.84C16 20.84 20.33 14.25 20.33 8.58C20.33 8.39 20.33 8.2 20.32 8.01C21.16 7.41 21.88 6.66 22.46 5.8V6Z"></path>
                            </svg>
                        </a>
                        <a href="#" class="text-blue-300 hover:text-white transition">
                            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path d="M7.8 2H16.2C19.4 2 22 4.6 22 7.8V16.2C22 19.4 19.4 22 16.2 22H7.8C4.6 22 2 19.4 2 16.2V7.8C2 4.6 4.6 2 7.8 2ZM7.6 4C5.61 4 4 5.61 4 7.6V16.4C4 18.39 5.61 20 7.6 20H16.4C18.39 20 20 18.39 20 16.4V7.6C20 5.61 18.39 4 16.4 4H7.6ZM17.25 5.5C17.94 5.5 18.5 6.06 18.5 6.75C18.5 7.44 17.94 8 17.25 8C16.56 8 16 7.44 16 6.75C16 6.06 16.56 5.5 17.25 5.5ZM12 7C14.76 7 17 9.24 17 12C17 14.76 14.76 17 12 17C9.24 17 7 14.76 7 12C7 9.24 9.24 7 12 7ZM12 9C10.34 9 9 10.34 9 12C9 13.66 10.34 15 12 15C13.66 15 15 13.66 15 12C15 10.34 13.66 9 12 9Z"></path>
                            </svg>
                        </a>
                        <a href="#" class="text-blue-300 hover:text-white transition">
                            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path d="M19.615 3.184C16.011 2.938 7.984 2.939 4.385 3.184C0.488 3.45 0.029 5.804 0 12C0.029 18.185 0.484 20.549 4.385 20.816C7.985 21.061 16.011 21.062 19.615 20.816C23.512 20.55 23.971 18.196 24 12C23.971 5.815 23.516 3.451 19.615 3.184ZM9 16V8L17 11.993L9 16Z"></path>
                            </svg>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="mt-12 pt-8 border-t border-blue-800 text-center">
            <p class="text-blue-400">&copy; 2023 Quest for Knowledge. All rights reserved.</p>
        </div>
    </div>
</footer>

<!-- Modal -->
<div id="modal" class="fixed inset-0 z-50 hidden flex items-center justify-center p-4">
    <div class="absolute inset-0 bg-black bg-opacity-75"></div>
    <div class="relative bg-gradient-to-br from-indigo-800 to-purple-900 rounded-xl p-8 max-w-md w-full shadow-2xl">
        <button class="absolute top-4 right-4 text-white hover:text-indigo-200" onclick="closeModal()">
            <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>
        <div id="modalContent" class="text-center">
            <!-- Content will be dynamically inserted here -->
        </div>
    </div>
</div>

<script>
    // Generate stars for the background
    document.addEventListener('DOMContentLoaded', function() {
        const starsContainer = document.getElementById('stars-container');
        const starCount = 50;
        
        for (let i = 0; i < starCount; i++) {
            const star = document.createElement('div');
            star.classList.add('star');
            
            // Random position
            const left = Math.random() * 100;
            const top = Math.random() * 100;
            
            // Random size
            const size = Math.random() * 3 + 1;
            
            // Random delay for animation
            const delay = Math.random() * 2;
            
            star.style.left = `${left}%`;
            star.style.top = `${top}%`;
            star.style.width = `${size}px`;
            star.style.height = `${size}px`;
            star.style.backgroundColor = 'white';
            star.style.borderRadius = '50%';
            star.style.animationDelay = `${delay}s`;
            
            starsContainer.appendChild(star);
        }
    });

    // Smooth scrolling for navigation
    function scrollToSection(sectionId) {
        const section = document.getElementById(sectionId);
        if (section) {
            window.scrollTo({
                top: section.offsetTop,
                behavior: 'smooth'
            });
        }
    }

    // Modal functions
    function openModal(content) {
        const modal = document.getElementById('modal');
        const modalContent = document.getElementById('modalContent');
        modalContent.innerHTML = content;
        modal.classList.remove('hidden');
    }

    function closeModal() {
        const modal = document.getElementById('modal');
        modal.classList.add('hidden');
    }

    // Subject functions
    function openSubject(subjectId) {
        let subjectName = '';
        let subjectType = '';
        
        switch(subjectId) {
            case 'cape-math':
                subjectName = 'CAPE Mathematics';
                subjectType = 'CAPE';
                break;
            case 'cape-physics':
                subjectName = 'CAPE Physics';
                subjectType = 'CAPE';
                break;
            case 'cape-chemistry':
                subjectName = 'CAPE Chemistry';
                subjectType = 'CAPE';
                break;
            case 'csec-math':
                subjectName = 'CSEC Mathematics';
                subjectType = 'CSEC';
                break;
            case 'csec-english':
                subjectName = 'CSEC English';
                subjectType = 'CSEC';
                break;
            case 'csec-biology':
                subjectName = 'CSEC Biology';
                subjectType = 'CSEC';
                break;
            default:
                subjectName = 'Subject';
                subjectType = 'CAPE/CSEC';
        }
        
        const content = `
            <div class="text-center">
                <div class="w-16 h-16 mx-auto mb-4">
                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M21 5C19.89 4.65 18.67 4.5 17.5 4.5C15.55 4.5 13.45 4.9 12 6C10.55 4.9 8.45 4.5 6.5 4.5C4.55 4.5 2.45 4.9 1 6V20.65C1 20.9 1.25 21.15 1.5 21.15C1.6 21.15 1.65 21.1 1.75 21.1C3.1 20.45 5.05 20 6.5 20C8.45 20 10.55 20.4 12 21.5C13.35 20.65 15.8 20 17.5 20C19.15 20 20.85 20.3 22.25 21.05C22.35 21.1 22.4 21.1 22.5 21.1C22.75 21.1 23 20.85 23 20.6V6C22.4 5.55 21.75 5.25 21 5ZM21 18.5C19.9 18.15 18.7 18 17.5 18C15.8 18 13.35 18.65 12 19.5V8C13.35 7.15 15.8 6.5 17.5 6.5C18.7 6.5 19.9 6.65 21 7V18.5Z" fill="#60A5FA"/>
                    </svg>
                </div>
                <h3 class="pixel-font text-2xl text-white mb-4">${subjectName}</h3>
                <p class="text-indigo-200 mb-6">You've selected ${subjectName}. Choose a resource type to begin your learning quest!</p>
                
                <div class="grid grid-cols-2 gap-4 mb-6">
                    <button class="btn-pixel bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-4 rounded" onclick="closeModal()">Past Papers</button>
                    <button class="btn-pixel bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded" onclick="closeModal()">Study Notes</button>
                    <button class="btn-pixel bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded" onclick="closeModal()">Practice Quizzes</button>
                    <button class="btn-pixel bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded" onclick="closeModal()">Video Tutorials</button>
                </div>
                
                <div class="text-sm text-indigo-300">
                    <p>Subject Type: ${subjectType}</p>
                    <p>Resources Available: 15+</p>
                </div>
            </div>
        `;
        
        openModal(content);
    }

    function showAllSubjects() {
        const content = `
            <div class="text-center">
                <h3 class="pixel-font text-2xl text-white mb-4">All Subjects</h3>
                <p class="text-indigo-200 mb-6">Discover more subjects to add to your learning quest!</p>
                
                <div class="grid grid-cols-1 gap-3 mb-6 text-left max-h-60 overflow-y-auto">
                    <div class="flex items-center justify-between bg-indigo-800 p-3 rounded">
                        <span class="text-white">CAPE Pure Mathematics</span>
                        <button class="btn-pixel bg-indigo-600 hover:bg-indigo-700 text-white text-xs py-1 px-2 rounded" onclick="closeModal()">Add</button>
                    </div>
                    <div class="flex items-center justify-between bg-indigo-800 p-3 rounded">
                        <span class="text-white">CAPE Applied Mathematics</span>
                        <button class="btn-pixel bg-indigo-600 hover:bg-indigo-700 text-white text-xs py-1 px-2 rounded" onclick="closeModal()">Add</button>
                    </div>
                    <div class="flex items-center justify-between bg-indigo-800 p-3 rounded">
                        <span class="text-white">CAPE Computer Science</span>
                        <button class="btn-pixel bg-indigo-600 hover:bg-indigo-700 text-white text-xs py-1 px-2 rounded" onclick="closeModal()">Add</button>
                    </div>
                    <div class="flex items-center justify-between bg-indigo-800 p-3 rounded">
                        <span class="text-white">CAPE Biology</span>
                        <button class="btn-pixel bg-indigo-600 hover:bg-indigo-700 text-white text-xs py-1 px-2 rounded" onclick="closeModal()">Add</button>
                    </div>
                    <div class="flex items-center justify-between bg-indigo-800 p-3 rounded">
                        <span class="text-white">CSEC Information Technology</span>
                        <button class="btn-pixel bg-indigo-600 hover:bg-indigo-700 text-white text-xs py-1 px-2 rounded" onclick="closeModal()">Add</button>
                    </div>
                    <div class="flex items-center justify-between bg-indigo-800 p-3 rounded">
                        <span class="text-white">CSEC Physics</span>
                        <button class="btn-pixel bg-indigo-600 hover:bg-indigo-700 text-white text-xs py-1 px-2 rounded" onclick="closeModal()">Add</button>
                    </div>
                    <div class="flex items-center justify-between bg-indigo-800 p-3 rounded">
                        <span class="text-white">CSEC Chemistry</span>
                        <button class="btn-pixel bg-indigo-600 hover:bg-indigo-700 text-white text-xs py-1 px-2 rounded" onclick="closeModal()">Add</button>
                    </div>
                    <div class="flex items-center justify-between bg-indigo-800 p-3 rounded">
                        <span class="text-white">CSEC Spanish</span>
                        <button class="btn-pixel bg-indigo-600 hover:bg-indigo-700 text-white text-xs py-1 px-2 rounded" onclick="closeModal()">Add</button>
                    </div>
                </div>
                
                <button class="btn-pixel bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded" onclick="closeModal()">
                    Close
                </button>
            </div>
        `;
        
        openModal(content);
    }

    function startTutorial() {
        const content = `
            <div class="text-center">
                <div class="w-16 h-16 mx-auto mb-4">
                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM13 17H11V15H13V17ZM13 13H11V7H13V13Z" fill="#A78BFA"/>
                    </svg>
                </div>
                <h3 class="pixel-font text-2xl text-white mb-4">Tutorial Quest</h3>
                <p class="text-indigo-200 mb-6">Welcome to your learning adventure! Here's how to get started:</p>
                
                <div class="text-left space-y-4 mb-6">
                    <div class="flex items-start">
                        <span class="text-yellow-500 mr-2">1.</span>
                        <p class="text-indigo-200">Choose a subject from the Subjects section</p>
                    </div>
                    <div class="flex items-start">
                        <span class="text-yellow-500 mr-2">2.</span>
                        <p class="text-indigo-200">Select the type of resource you want to study</p>
                    </div>
                    <div class="flex items-start">
                        <span class="text-yellow-500 mr-2">3.</span>
                        <p class="text-indigo-200">Complete quizzes and activities to earn XP</p>
                    </div>
                    <div class="flex items-start">
                        <span class="text-yellow-500 mr-2">4.</span>
                        <p class="text-indigo-200">Track your progress and compete on the leaderboard</p>
                    </div>
                </div>
                
                <button class="btn-pixel bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded" onclick="closeModal()">
                    Got it!
                </button>
            </div>
        `;
        
        openModal(content);
    }

    function joinLeaderboard() {
        const content = `
            <div class="text-center">
                <div class="w-16 h-16 mx-auto mb-4">
                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M19 5H5V19H19V5ZM21 5V19C21 20.1 20.1 21 19 21H5C3.9 21 3 20.1 3 19V5C3 3.9 3.9 3 5 3H19C20.1 3 21 3.9 21 5ZM12 12C10.9 12 10 11.1 10 10C10 8.9 10.9 8 12 8C13.1 8 14 8.9 14 10C14 11.1 13.1 12 12 12ZM16 17H8V16C8 14.67 10.67 14 12 14C13.33 14 16 14.67 16 16V17Z" fill="#60A5FA"/>
                    </svg>
                </div>
                <h3 class="pixel-font text-2xl text-white mb-4">Join the Leaderboard</h3>
                <p class="text-indigo-200 mb-6">Create your player profile to compete with other students!</p>
                
                <div class="space-y-4 mb-6">
                    <div>
                        <input type="text" placeholder="Choose a username" class="w-full bg-indigo-700 border border-indigo-500 text-white px-4 py-2 rounded focus:outline-none focus:ring-2 focus:ring-indigo-400">
                    </div>
                    <div>
                        <select class="w-full bg-indigo-700 border border-indigo-500 text-white px-4 py-2 rounded focus:outline-none focus:ring-2 focus:ring-indigo-400">
                            <option value="" disabled selected>Select your school</option>
                            <option value="school1">Queen's Royal College</option>
                            <option value="school2">St. Joseph's Convent</option>
                            <option value="school3">Presentation College</option>
                            <option value="school4">Bishop Anstey High School</option>
                            <option value="school5">Naparima College</option>
                        </select>
                    </div>
                </div>
                
                <button class="btn-pixel bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded" onclick="closeModal()">
                    Create Profile
                </button>
            </div>
        `;
        
        openModal(content);
    }
</script>