Hugging Face's logo

Spaces:
web3district
/
web3portal
Running

App Files Community
web3portal / index.html
web3district's picture
web3district
Revert: Remove quest profile page - back to clean quests page
2374cfe verified
Raw
History Blame Contribute Delete
138 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Web3 District | Discover the Decentralized Future</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
 <script type="module" src="https://google/model-viewer/dist/model-viewer.min.js"></script>
 <script>
 // Register model-viewer custom element
 document.createElement('model-viewer');
// Fallback for model-viewer
 window.addEventListener('load', () => {
 const modelViewer = document.querySelector('model-viewer');
 if (modelViewer) {
 // Show fallback if model fails to load
 modelViewer.addEventListener('progress', (event) => {
 const fallback = modelViewer.querySelector('.model-fallback');
 if (fallback) {
 fallback.style.display = 'flex';
 }
 });
modelViewer.addEventListener('load', () => {
 const fallback = modelViewer.querySelector('.model-fallback');
 if (fallback) {
 fallback.style.display = 'none';
 }
 });
 }
 });
 </script>
 <script>
 tailwind.config = {
 darkMode: 'class',
 theme: {
 extend: {
 colors: {
 bg: '#000000',
 card: '#111111',
 muted: '#1a1a1a',
 text: '#ffffff',
 accent: 'rgb(228, 24, 95)',
 accent2: '#ff2a6d',
 secondary: '#00f0ff',
 tertiary: '#8a8a8a'
 },
 fontFamily: {
 sans: ['Inter', 'sans-serif']
 }
 }
 }
 }
 </script>
 <style>
 :root {
 --bg: #000000;
 --card: #111111;
 --muted: #1a1a1a;
 --text: #ffffff;
 --accent: rgb(228, 24, 95);
 --accent-2: #ff2a6d;
 --secondary: #00f0ff;
 --tertiary: #8a8a8a;
 }
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
body {
 background-color: var(--bg);
 color: var(--text);
 font-family: 'Inter', sans-serif;
 overflow-x: hidden;
 }
.card-glass {
 background: linear-gradient(145deg, rgba(228, 24, 95, 0.15), rgba(138, 43, 226, 0.1), rgba(0, 240, 255, 0.1));
 backdrop-filter: blur(12px);
 border: 1px solid rgba(255, 255, 255, 0.1);
 transition: all 0.3s ease;
 }
.card-glass:hover {
 border: 1px solid rgba(228, 24, 95, 0.5);
 }
.hover-gradient:hover {
 background: linear-gradient(45deg, var(--accent), var(--secondary));
 }
.marquee-container {
 overflow: hidden;
 position: relative;
 }
.marquee {
 display: flex;
 animation: marquee 30s linear infinite;
 }
@keyframes marquee {
 0% { transform: translateX(0); }
 100% { transform: translateX(-100%); }
 }
.cube-grid {
 position: relative;
 width: 100%;
 height: 100%;
 transform-style: preserve-3d;
 transform: rotateX(-15deg) rotateY(15deg);
 transition: transform 1s ease;
 }
.cube-face {
 position: absolute;
 width: 100%;
 height: 100%;
 background: linear-gradient(145deg, rgba(228, 24, 95, 0.2), rgba(0, 240, 255, 0.1));
 border: 1px solid rgba(228, 24, 95, 0.3);
 display: flex;
 justify-content: center;
 align-items: center;
 color: white;
 font-weight: bold;
 }
.front { transform: rotateY(0deg) translateZ(80px); }
 .back { transform: rotateY(180deg) translateZ(80px); }
 .top { transform: rotateX(90deg) translateZ(80px); }
 .bottom { transform: rotateX(-90deg) translateZ(80px); }
 .left { transform: rotateY(-90deg) translateZ(80px); }
 .right { transform: rotateY(90deg) translateZ(80px); }
.hero-slide {
 transition: transform 0.3s ease;
 }
.card-hover {
 transition: transform 0.3s ease;
 }
.card-hover:hover {
 transform: translateY(-6px);
 }
.dot-active {
 transform: scale(1.3);
 }
.filter-chip {
 transition: all 0.3s ease;
 }
.filter-chip.selected {
 background-color: var(--accent);
 box-shadow: 0 4px 6px rgba(139, 92, 246, 0.25);
 }
@media (max-width: 1023px) {
 .hero-container {
 flex-direction: column-reverse;
 }
 }
.mobile-menu {
 display: none;
 background: rgba(0, 0, 0, 0.95);
 backdrop-filter: blur(20px);
 border: 1px solid rgba(255, 255, 255, 0.1);
 border-radius: 12px;
 margin-top: 8px;
 padding: 16px;
 }
.mobile-menu.open {
 display: block;
 }
/* Search Button Styles */
 .search-btn {
 transition: all 0.2s ease-in-out;
 }
.search-btn:active {
 transform: scale(0.95);
 background-color: rgba(124, 76, 228, 0.3);
 }
.search-btn:hover {
 background-color: rgba(255, 255, 255, 0.1);
 }
/* Smooth scrolling for the entire page */
 html {
 scroll-behavior: smooth;
 }
/* Offset for fixed navigation */
 section[id] {
 scroll-margin-top: 120px;
 }
/* Ensure section titles are visible */
 div[id] {
 scroll-margin-top: 120px;
 }
 </style>
</head>
<body class="bg-bg text-text">
 <!-- Navigation Section -->
 <nav class="sticky top-0 z-50 py-2 px-4 sm:px-6 lg:px-8">
 <div class="max-w-7xl mx-auto">
 <div class="card-glass rounded-2xl p-2 relative">
 <div class="flex items-center justify-between">
 <!-- Logo -->
 <div class="flex items-center">
 </div>
<!-- Desktop Menu -->
 <div class="hidden lg:flex space-x-4">
 <a href="#home" class="font-medium hover:text-accent transition-colors px-2 py-1 rounded-lg hover:bg-white/5">Home</a>
 <a href="#events" class="font-medium hover:text-accent transition-colors px-2 py-1 rounded-lg hover:bg-white/5">Events</a>
 <a href="#quests" class="font-medium hover:text-accent transition-colors px-2 py-1 rounded-lg hover:bg-white/5">Quests</a>
 <a href="#growth" class="font-medium hover:text-accent transition-colors px-2 py-1 rounded-lg hover:bg-white/5">Growth</a>
 <a href="#tools" class="font-medium hover:text-accent transition-colors px-2 py-1 rounded-lg hover:bg-white/5">Tools</a>
 <a href="#academy" class="font-medium hover:text-accent transition-colors px-2 py-1 rounded-lg hover:bg-white/5">Academy 2025</a>
 <a href="#web3vc" class="font-medium hover:text-accent transition-colors px-2 py-1 rounded-lg hover:bg-white/5">Web3VC</a>
 <a href="#news" class="font-medium hover:text-accent transition-colors px-2 py-1 rounded-lg hover:bg-white/5">News</a>
 </div>
<!-- Action Buttons -->
 <div class="flex items-center space-x-2">
 <button id="theme-toggle" class="p-1 rounded-full bg-white text-bg hover:bg-gray-200 transition-colors focus:outline focus:outline-2 focus:outline-accent">
 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="dark:hidden">
 <circle cx="12" cy="12" r="5"></circle>
 <line x1="12" y1="1" x2="12" y2="3"></line>
 <line x1="12" y1="21" x2="12" y2="23"></line>
 <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
 <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
 <line x1="1" y1="12" x2="3" y2="12"></line>
 <line x1="21" y1="12" x2="23" y2="12"></line>
 <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
 <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
 </svg>
 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="hidden dark:block">
 <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
 </svg>
 </button>
 <button id="search-btn" class="p-1 rounded-full hover:bg-muted transition-colors focus:outline focus:outline-2 focus:outline-accent search-btn" title="Search Web3 District" onclick="document.getElementById('search').scrollIntoView({behavior: 'smooth'}); setTimeout(() => document.getElementById('main-search-input').focus(), 1000);">
 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round">
 <circle cx="11" cy="11" r="8"></circle>
 <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
 </svg>
 </button>
 <button class="hidden md:flex items-center py-1 px-3 bg-white/10 backdrop-blur-sm rounded-xl font-medium transition-colors hover:bg-white/20 focus:outline focus:outline-2 focus:outline-accent border border-white/10 text-sm">
 BloxID
 </button>
<!-- Mobile Menu Button -->
 <button id="mobile-menu-btn" class="lg:hidden p-1 rounded-lg hover:bg-muted transition-colors focus:outline focus:outline-2 focus:outline-accent" onclick="document.getElementById('mobile-menu').classList.toggle('open');">
 <svg id="menu-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 <line x1="3" y1="12" x2="21" y2="12"></line>
 <line x1="3" y1="6" x2="21" y2="6"></line>
 <line x1="3" y1="18" x2="21" y2="18"></line>
 </svg>
 </button>
 </div>
 </div>
<!-- Mobile Menu -->
 <div id="mobile-menu" class="mobile-menu lg:hidden">
 <div class="flex flex-col py-4 space-y-2 px-4">
 <!-- Close Button -->
 <button onclick="document.getElementById('mobile-menu').classList.remove('open');" class="self-end p-2 rounded-lg hover:bg-white/10 transition-colors mb-2">
 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 <line x1="18" y1="6" x2="6" y2="18"></line>
 <line x1="6" y1="6" x2="18" y2="18"></line>
 </svg>
 </button>
 <a href="#home" class="py-2 px-3 rounded-lg hover:bg-white/10 text-sm transition-colors">Home</a>
 <a href="#events" class="py-2 px-3 rounded-lg hover:bg-white/10 text-sm transition-colors">Events</a>
 <a href="#quests" class="py-2 px-3 rounded-lg hover:bg-white/10 text-sm transition-colors">Quests</a>
 <a href="#growth" class="py-2 px-3 rounded-lg hover:bg-white/10 text-sm transition-colors">Growth</a>
 <a href="#tools" class="py-2 px-3 rounded-lg hover:bg-white/10 text-sm transition-colors">Tools</a>
 <a href="#academy" class="py-2 px-3 rounded-lg hover:bg-white/10 text-sm transition-colors">Academy 2025</a>
 <a href="#web3vc" class="py-2 px-3 rounded-lg hover:bg-white/10 text-sm transition-colors">Web3VC</a>
 <a href="#news" class="py-2 px-3 rounded-lg hover:bg-white/10 text-sm transition-colors">News</a>
 </div>
 </div>
 </div>
 </div>
 </nav>
<main>
 <!-- Hero Section - Moved to top -->
 <section id="home" class="pt-2 pb-4 px-4 sm:px-6 lg:px-8">
 <div class="max-w-7xl mx-auto">
 <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
 <!-- Box 1: Discover the Future of Web3 -->
 <div class="card-glass rounded-2xl overflow-hidden p-0 lg:col-span-2 relative hover:border-accent/50 transition-colors" style="min-height: 400px; background: linear-gradient(135deg, rgba(124, 76, 228, 0.15) 0%, rgba(0, 255, 255, 0.15) 100%);">
 <!-- Spline Viewer - Hidden for now -->
 <script type="module" src="https://unpkg.com/@splinetool/viewer@1.10.45/build/spline-viewer.js"></script>
 <spline-viewer url="https://prod.spline.design/dGMlSdJBpezKF0OY/scene.splinecode" style="width: 100%; height: 100%; min-height: 300px; display: none;"></spline-viewer>
<!-- Mini Bento Box - 1/8th size -->
 <div class="absolute top-4 left-4 w-24 h-24 lg:w-32 lg:h-32 z-10">
 <div class="card-glass rounded-xl overflow-hidden h-full bg-white/10 border border-white/20 backdrop-blur-sm relative">
 <img src="SMALLBENTOWEB3.png" alt="WEB3 DISTRICT" class="absolute inset-0 w-full h-full object-cover scale-110">
 </div>
 </div>
<!-- Overlay Content -->
 <div class="absolute bottom-0 left-0 w-full h-full flex flex-col justify-end items-start p-4 md:p-8 text-left pointer-events-none">
 <div class="slide-content">
 <h2 class="text-xl md:text-3xl font-bold mb-2">Discover the Future of <span class="bg-gradient-to-r from-accent2 to-accent bg-clip-text text-transparent">Web3</span></h2>
 <p class="text-xs md:text-sm text-gray-300 mb-4 max-w-md">
 Explore immersive experiences, exclusive NFT drops, and groundbreaking ventures in the decentralized ecosystem.
 </p>
 <div class="flex flex-col sm:flex-row gap-2 pointer-events-auto">
 <button class="px-3 py-1.5 bg-accent rounded-full font-medium hover:bg-[#7c4ce4] transition-colors hover-gradient flex items-center justify-center text-xs">
 Get Started
 <svg class="ml-1" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 <circle cx="12" cy="12" r="10"></circle>
 <polyline points="12 8 8 12 12 16"></polyline>
 <line x1="16" y1="12" x2="8" y2="12"></line>
 </svg>
 </button>
 <button class="px-3 py-1.5 bg-white/10 backdrop-blur-sm rounded-full font-medium hover:bg-white/20 transition-colors flex items-center justify-center text-xs border border-white/10">
 Explore More
 <svg class="ml-1" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 <circle cx="11" cy="11" r="8"></circle>
 <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
 </svg>
 </button>
 </div>
 </div>
 <div class="slide-content hidden">
 <h2 class="text-xl md:text-3xl font-bold mb-2">Explore <span class="bg-gradient-to-r from-accent2 to-accent bg-clip-text text-transparent">NFT Marketplaces</span></h2>
 <p class="text-xs md:text-sm text-gray-300 mb-4 max-w-md">
 Discover unique digital art and collectibles from artists around the world.
 </p>
 <div class="flex flex-col sm:flex-row gap-2 pointer-events-auto">
 <button class="px-3 py-1.5 bg-gradient-to-r from-accent to-accent2 rounded-full font-medium hover:opacity-90 transition-opacity flex items-center justify-center text-xs">
 Browse Collections
 <svg class="ml-1" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 <circle cx="12" cy="12" r="10"></circle>
 <polyline points="12 8 8 12 12 16"></polyline>
 <line x1="16" y1="12" x2="8" y2="12"></line>
 </svg>
 </button>
 <button class="px-3 py-1.5 bg-white/10 backdrop-blur-sm rounded-full font-medium hover:bg-white/20 transition-colors flex items-center justify-center text-xs border border-white/10">
 Create NFT
 <svg class="ml-1" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 <circle cx="11" cy="11" r="8"></circle>
 <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
 </svg>
 </button>
 </div>
 </div>
<!-- Placeholder for Second Slide Image -->
 <div class="slide-content hidden">
 <div class="h-full flex flex-col items-center justify-center text-center p-8">
 <div class="w-16 h-16 lg:w-20 lg:h-20 mb-4 bg-white/10 rounded-2xl flex items-center justify-center backdrop-blur-sm border border-white/20">
 <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-white/60">
 <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
 <circle cx="8.5" cy="8.5" r="1.5"></circle>
 <polyline points="21,15 16,10 5,21"></polyline>
 </svg>
 </div>
 <h2 class="text-xl md:text-2xl font-bold mb-2 text-white">Image Placeholder</h2>
 <p class="text-sm md:text-base text-gray-300 mb-6 max-w-md">
 This space is reserved for the second carousel image. Add your content here!
 </p>
 <div class="flex flex-col sm:flex-row gap-2 pointer-events-auto">
 <button class="px-4 py-2 bg-gradient-to-r from-accent to-accent2 rounded-full font-medium hover:opacity-90 transition-opacity flex items-center justify-center text-sm">
 Upload Image
 <svg class="ml-2" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
 <polyline points="7,10 12,15 17,10"></polyline>
 <line x1="12" y1="15" x2="12" y2="3"></line>
 </svg>
 </button>
 <button class="px-4 py-2 bg-white/10 backdrop-blur-sm rounded-full font-medium hover:bg-white/20 transition-colors flex items-center justify-center text-sm border border-white/10">
 Preview
 <svg class="ml-2" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 <circle cx="11" cy="11" r="8"></circle>
 <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
 </svg>
 </button>
 </div>
 </div>
 </div>
 <div class="slide-content hidden">
 <h2 class="text-xl md:text-3xl font-bold mb-2">Join <span class="bg-gradient-to-r from-accent2 to-accent bg-clip-text text-transparent">Metaverse Events</span></h2>
 <p class="text-xs md:text-sm text-gray-300 mb-4 max-w-md">
 Participate in virtual worlds and connect with others in immersive environments.
 </p>
 <div class="flex flex-col sm:flex-row gap-2 pointer-events-auto">
 <button class="px-3 py-1.5 bg-gradient-to-r from-accent to-accent2 rounded-full font-medium hover:opacity-90 transition-opacity flex items-center justify-center text-xs">
 Enter Metaverse
 <svg class="ml-1" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 <circle cx="12" cy="12" r="10"></circle>
 <polyline points="12 8 8 12 12 16"></polyline>
 <line x1="16" y1="12" x2="8" y2="12"></line>
 </svg>
 </button>
 <button class="px-3 py-1.5 bg-white/10 backdrop-blur-sm rounded-full font-medium hover:bg-white/20 transition-colors flex items-center justify-center text-xs border border-white/10">
 View Events
 <svg class="ml-1" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 <circle cx="11" cy="11" r="8"></circle>
 <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
 </svg>
 </button>
 </div>
 </div>
 <div class="slide-content hidden">
 <h2 class="text-xl md:text-3xl font-bold mb-2">Earn with <span class="bg-gradient-to-r from-accent2 to-accent bg-clip-text text-transparent">DeFi Protocols</span></h2>
 <p class="text-xs md:text-sm text-gray-300 mb-4 max-w-md">
 Maximize your crypto assets with yield farming and staking opportunities.
 </p>
 <div class="flex flex-col sm:flex-row gap-2 pointer-events-auto">
 <button class="px-3 py-1.5 bg-gradient-to-r from-accent to-accent2 rounded-full font-medium hover:opacity-90 transition-opacity flex items-center justify-center text-xs">
 Start Earning
 <svg class="ml-1" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 <circle cx="12" cy="12" r="10"></circle>
 <polyline points="12 8 8 12 12 16"></polyline>
 <line x1="16" y1="12" x2="8" y2="12"></line>
 </svg>
 </button>
 <button class="px-3 py-1.5 bg-white/10 backdrop-blur-sm rounded-full font-medium hover:bg-white/20 transition-colors flex items-center justify-center text-xs border border-white/10">
 Learn More
 <svg class="ml-1" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 <circle cx="11" cy="11" r="8"></circle>
 <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
 </svg>
 </button>
 </div>
 </div>
 </div>
 <!-- Glass Dots -->
 <div class="absolute top-1/2 right-4 transform -translate-y-1/2 flex flex-col space-y-3 z-50">
 <button class="dot w-2 h-2 rounded-full bg-white backdrop-blur-sm border border-white/20 cursor-pointer hover:bg-white/80 transition-colors" onclick="showSlide(0)"></button>
 <button class="dot w-2 h-2 rounded-full bg-white/30 backdrop-blur-sm border border-white/20 cursor-pointer hover:bg-white/80 transition-colors" onclick="showSlide(1)"></button>
 <button class="dot w-2 h-2 rounded-full bg-white/30 backdrop-blur-sm border border-white/20 cursor-pointer hover:bg-white/80 transition-colors" onclick="showSlide(2)"></button>
 <button class="dot w-2 h-2 rounded-full bg-white/30 backdrop-blur-sm border border-white/20 cursor-pointer hover:bg-white/80 transition-colors" onclick="showSlide(3)"></button>
 </div>
 </div>
<!-- Box 2: Highlight 1 -->
 <div class="card-glass rounded-2xl overflow-hidden relative hover:border-accent/50 transition-colors">
 <div class="hero-slide relative h-full">
 <div class="h-full bg-gradient-to-br from-purple-900/20 to-cyan-900/20 p-4 flex flex-col justify-end">
 <div>
 <div class="inline-block px-1.5 py-0.5 bg-muted rounded-full text-xs font-medium">
 Trending
 </div>
 <h3 class="text-lg font-bold mt-1">NFT Art Gallery Opening</h3>
 <p class="text-gray-400 text-xs mt-1">Exclusive digital art showcase</p>
 <button class="mt-2 inline-flex items-center text-accent font-medium text-xs">
 Discover Artists
 <svg class="ml-1" xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
 <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
 </svg>
 </button>
 </div>
 </div>
 </div>
 </div>
<!-- Box 3: Highlight 2 -->
 <div class="card-glass rounded-2xl overflow-hidden relative hover:border-accent/50 transition-colors">
 <div class="hero-slide relative h-full">
 <div class="h-full bg-gradient-to-br from-violet-900/20 to-blue-900/20 p-4 flex flex-col justify-end">
 <div>
 <div class="inline-block px-1.5 py-0.5 bg-muted rounded-full text-xs font-medium text-accent2">
 New
 </div>
 <h3 class="text-lg font-bold mt-1">Crypto Metaverse Event</h3>
 <p class="text-gray-400 text-xs mt-1">Virtual world experience launches</p>
 <button class="mt-2 inline-flex items-center text-accent font-medium text-xs">
 Join Metaverse
 <svg class="ml-1" xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
 <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
 </svg>
 </button>
 </div>
 </div>
 </div>
 </div>
<!-- Box 4: Highlight 3 -->
 <div class="card-glass rounded-2xl overflow-hidden relative hover:border-accent/50 transition-colors">
 <div class="hero-slide relative h-full">
 <div class="h-full bg-gradient-to-br from-amber-900/20 to-yellow-900/20 p-4 flex flex-col justify-end">
 <div>
 <div class="inline-block px-1.5 py-0.5 bg-muted rounded-full text-xs font-medium text-amber-400">
 Hot
 </div>
 <h3 class="text-lg font-bold mt-1">DeFi Yield Farming</h3>
 <p class="text-gray-400 text-xs mt-1">High returns farming opportunities</p>
 <button class="mt-2 inline-flex items-center text-accent font-medium text-xs">
 Start Earning
 <svg class="ml-1" xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
 <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
 </svg>
 </button>
 </div>
 </div>
 </div>
 </div>
<!-- Box 5: Highlight 4 -->
 <div class="card-glass rounded-2xl overflow-hidden relative hover:border-accent/50 transition-colors">
 <div class="hero-slide relative h-full">
 <div class="h-full bg-gradient-to-br from-emerald-900/20 to-teal-900/20 p-4 flex flex-col justify-end">
 <div>
 <div class="inline-block px-1.5 py-0.5 bg-muted rounded-full text-xs font-medium text-emerald-400">
 Trending
 </div>
 <h3 class="text-lg font-bold mt-1">DAO Governance</h3>
 <p class="text-gray-400 text-xs mt-1">Participate in decision making</p>
 <button class="mt-2 inline-flex items-center text-accent font-medium text-xs">
 Vote Now
 <svg class="ml-1" xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
 <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
 </svg>
 </button>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Logo Marquee Sections -->
 <section class="pt-0 pb-10 px-4 sm:px-6 lg:px-8">
 <div class="max-w-7xl mx-auto">
 <h3 class="text-center text-xl font-bold mb-10">Trusted by Industry Leaders</h3>
 <!-- Partners Logo Rail -->
 <div class="mb-16">
 <div class="marquee-container py-6 overflow-hidden">
 <div class="marquee flex">
 <div class="flex space-x-12 px-12">
 <div class="flex items-center justify-center">
 <div class="grayscale hover:grayscale-0 transition-all duration-300 opacity-60 hover:opacity-100 text-xl font-bold">
 CryptoAlpha
 </div>
 </div>
 <div class="flex items-center justify-center">
 <div class="grayscale hover:grayscale-0 transition-all duration-300 opacity-60 hover:opacity-100 text-xl font-bold">
 LedgerTech
 </div>
 </div>
 <div class="flex items-center justify-center">
 <div class="grayscale hover:grayscale-0 transition-all duration-300 opacity-60 hover:opacity-100 text-xl font-bold">
 Ether.io
 </div>
 </div>
 <div class="flex items-center justify-center">
 <div class="grayscale hover:grayscale-0 transition-all duration-300 opacity-60 hover:opacity-100 text-xl font-bold">
 ChainSecure
 </div>
 </div>
 <div class="flex items-center justify-center">
 <div class="grayscale hover:grayscale-0 transition-all duration-300 opacity-60 hover:opacity-100 text-xl font-bold">
 MetaVault
 </div>
 </div>
 <div class="flex items-center justify-center">
 <div class="grayscale hover:grayscale-0 transition-all duration-300 opacity-60 hover:opacity-100 text-xl font-bold">
 PixelPunks
 </div>
 </div>
 </div>
 <div class="flex space-x-12 px-12">
 <div class="flex items-center justify-center">
 <div class="grayscale hover:grayscale-0 transition-all duration-300 opacity-60 hover:opacity-100 text-xl font-bold">
 CryptoAlpha
 </div>
 </div>
 <div class="flex items-center justify-center">
 <div class="grayscale hover:grayscale-0 transition-all duration-300 opacity-60 hover:opacity-100 text-xl font-bold">
 LedgerTech
 </div>
 </div>
 <div class="flex items-center justify-center">
 <div class="grayscale hover:grayscale-0 transition-all duration-300 opacity-60 hover:opacity-100 text-xl font-bold">
 Ether.io
 </div>
 </div>
 <div class="flex items-center justify-center">
 <div class="grayscale hover:grayscale-0 transition-all duration-300 opacity-60 hover:opacity-100 text-xl font-bold">
 ChainSecure
 </div>
 </div>
 <div class="flex items-center justify-center">
 <div class="grayscale hover:grayscale-0 transition-all duration-300 opacity-60 hover:opacity-100 text-xl font-bold">
 MetaVault
 </div>
 </div>
 <div class="flex items-center justify-center">
 <div class="grayscale hover:grayscale-0 transition-all duration-300 opacity-60 hover:opacity-100 text-xl font-bold">
 PixelPunks
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<h3 class="text-center text-xl font-bold mb-10">Featured in Top Media</h3>
 <!-- Media Partners Logo Rail -->
 <div>
 <div class="marquee-container py-6 overflow-hidden">
 <div class="marquee flex">
 <div class="flex space-x-12 px-12">
 <div class="flex items-center justify-center">
 <div class="grayscale hover:grayscale-0 transition-all duration-300 opacity-60 hover:opacity-100 text-xl font-bold">
 BlockTimes
 </div>
 </div>
 <div class="flex items-center justify-center">
 <div class="grayscale hover:grayscale-0 transition-all duration-300 opacity-60 hover:opacity-100 text-xl font-bold">
 CryptoReport
 </div>
 </div>
 <div class="flex items-center justify-center">
 <div class="grayscale hover:grayscale-0 transition-all duration-300 opacity-60 hover:opacity-100 text-xl font-bold">
 CoinInsider
 </div>
 </div>
 <div class="flex items-center justify-center">
 <div class="grayscale hover:grayscale-0 transition-all duration-300 opacity-60 hover:opacity-100 text-xl font-bold">
 Decentralize Daily
 </div>
 </div>
 </div>
 <div class="flex space-x-12 px-12">
 <div class="flex items-center justify-center">
 <div class="grayscale hover:grayscale-0 transition-all duration-300 opacity-60 hover:opacity-100 text-xl font-bold">
 BlockTimes
 </div>
 </div>
 <div class="flex items-center justify-center">
 <div class="grayscale hover:grayscale-0 transition-all duration-300 opacity-60 hover:opacity-100 text-xl font-bold">
 CryptoReport
 </div>
 </div>
 <div class="flex items-center justify-center">
 <div class="grayscale hover:grayscale-0 transition-all duration-300 opacity-60 hover:opacity-100 text-xl font-bold">
 CoinInsider
 </div>
 </div>
 <div class="flex items-center justify-center">
 <div class="grayscale hover:grayscale-0 transition-all duration-300 opacity-60 hover:opacity-100 text-xl font-bold">
 Decentralize Daily
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Search & Filters -->
 <section id="search" class="pt-6 px-4 sm:px-6 lg:px-8">
 <div class="max-w-7xl mx-auto">
 <div class="mb-8">
 <div class="card-glass rounded-2xl p-6">
 <div class="flex flex-col md:flex-row items-center gap-4">
 <div class="flex-1 w-full">
 <div class="relative">
 <input
type="text"
id="main-search-input"
 placeholder="Search upcoming events, quests, and places..."
class="w-full py-4 px-5 bg-muted rounded-xl focus:outline-none focus:ring-2 focus:ring-accent"
 >
 <button class="absolute right-4 top-1/2 -translate-y-1/2 p-2 rounded-full bg-muted focus:outline-none focus:ring-2 focus:ring-accent">
 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 <circle cx="11" cy="11" r="8"></circle>
 <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
 </svg>
 </button>
 </div>
 </div>
 <button class="py-4 px-6 bg-gradient-to-r from-accent to-accent2 rounded-xl font-medium flex items-center whitespace-nowrap hover:opacity-90 transition-opacity">
 Search
 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" class="ml-2">
 <path d="M5 12h14M12 5l7 7-7 7"></path>
 </svg>
 </button>
 </div>
<div class="mt-5 flex flex-wrap gap-3">
 <button class="filter-chip px-4 py-2 bg-muted rounded-xl font-medium focus:outline-none focus:ring-2 focus:ring-accent" data-type="events">Events</button>
 <button class="filter-chip px-4 py-2 bg-muted rounded-xl font-medium focus:outline-none focus:ring-2 focus:ring-accent" data-type="quests">Quests</button>
 <button class="filter-chip px-4 py-2 bg-muted rounded-xl font-medium focus:outline-none focus:ring-2 focus:ring-accent" data-type="agency">Growth</button>
 <button class="filter-chip px-4 py-2 bg-muted rounded-xl font-medium focus:outline-none focus:ring-2 focus:ring-accent" data-type="tools">Tools</button>
 <button class="filter-chip px-4 py-2 bg-muted rounded-xl font-medium focus:outline-none focus:ring-2 focus:ring-accent" data-type="academy">Academy 2025</button>
 <button class="filter-chip px-4 py-2 bg-muted rounded-xl font-medium focus:outline-none focus:ring-2 focus:ring-accent" data-type="web3vc">Web3VC</button>
 <button class="filter-chip px-4 py-2 bg-muted rounded-xl font-medium focus:outline-none focus:ring-2 focus:ring-accent" data-type="news">News</button>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Featured Sections -->
 <section class="py-12 px-4 sm:px-6 lg:px-8">
 <div class="max-w-7xl mx-auto">
 <!-- Featured Growth Products Marketplace -->
 <div id="growth" class="mb-16">
 <div class="flex items-center justify-between mb-8">
 <h2 class="text-2xl font-bold">Featured Growth Products Marketplace</h2>
 <a href="#" class="flex items-center text-accent hover:text-accent-2 transition-colors">
 View All
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="ml-1">
 <path d="M5 12h14M12 5l7 7-7 7"></path>
 </svg>
 </a>
 </div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
 <!-- Shop Card 1 -->
 <div class="card-glass rounded-2xl overflow-hidden card-hover hover:border-accent/50 transition-colors">
 <div class="bg-gradient-to-br from-purple-600/30 to-cyan-600/30 h-48 flex items-center justify-center">
 <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="opacity-50">
 <circle cx="9" cy="21" r="1"></circle>
 <circle cx="20" cy="21" r="1"></circle>
 <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
 </svg>
 </div>
 <div class="p-6">
 <div class="flex items-center justify-between mb-2">
 <h3 class="font-bold text-lg">NFT Marketplace</h3>
 <div class="px-2 py-1 bg-muted rounded-full text-xs flex items-center">
 <div class="w-2 h-2 rounded-full bg-accent mr-1"></div>
 Open
 </div>
 </div>
 <p class="text-gray-400 text-sm mb-4">
 Premium digital collectibles and artwork marketplace
 </p>
 <button class="text-xs font-medium px-3 py-1 bg-muted rounded-lg flex items-center transition-colors hover:bg-[#22232e]">
 Visit Shop
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="ml-1">
 <path d="M5 12h14M12 5l7 7-7 7"></path>
 </svg>
 </button>
 </div>
 </div>
<!-- Shop Card 2 -->
 <div class="card-glass rounded-2xl overflow-hidden card-hover">
 <div class="bg-gradient-to-br from-indigo-600/30 to-emerald-600/30 h-48 flex items-center justify-center">
 <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="opacity-50">
 <circle cx="9" cy="21" r="1"></circle>
 <circle cx="20" cy="21" r="1"></circle>
 <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
 </svg>
 </div>
 <div class="p-6">
 <div class="flex items-center justify-between mb-2">
 <h3 class="font-bold text-lg">Crypto Gear</h3>
 <div class="px-2 py-1 bg-muted rounded-full text-xs flex items-center">
 <div class="w-2 h-2 rounded-full bg-accent mr-1"></div>
 Open
 </div>
 </div>
 <p class="text-gray-400 text-sm mb-4">
 Hardware wallets and security solutions for crypto
 </p>
 <button class="text-xs font-medium px-3 py-1 bg-muted rounded-lg flex items-center transition-colors hover:bg-[#22232e]">
 Visit Shop
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="ml-1">
 <path d="M5 12h14M12 5l7 7-7 7"></path>
 </svg>
 </button>
 </div>
 </div>
<!-- Shop Card 3 -->
 <div class="card-glass rounded-2xl overflow-hidden card-hover">
 <div class="bg-gradient-to-br from-violet-600/30 to-blue-600/30 h-48 flex items-center justify-center">
 <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="opacity-50">
 <circle cx="9" cy="21" r="1"></circle>
 <circle cx="20" cy="21" r="1"></circle>
 <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
 </svg>
 </div>
 <div class="p-6">
 <div class="flex items-center justify-between mb-2">
 <h3 class="font-bold text-lg">DeFi Tools</h3>
 <div class="px-2 py-1 bg-muted rounded-full text-xs flex items-center">
 <div class="w-2 h-2 rounded-full bg-accent2 mr-1"></div>
 VIP Only
 </div>
 </div>
 <p class="text-gray-400 text-sm mb-4">
 Advanced yield farming and analytics platforms
 </p>
 <button class="text-xs font-medium px-3 py-1 bg-muted rounded-lg flex items-center transition-colors hover:bg-[#22232e]">
 Visit Shop
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="ml-1">
 <path d="M5 12h14M12 5l7 7-7 7"></path>
 </svg>
 </button>
 </div>
 </div>
<!-- Shop Card 4 -->
 <div class="card-glass rounded-2xl overflow-hidden card-hover">
 <div class="bg-gradient-to-br from-pink-600/30 to-yellow-600/30 h-48 flex items-center justify-center">
 <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="opacity-50">
 <circle cx="9" cy="21" r="1"></circle>
 <circle cx="20" cy="21" r="1"></circle>
 <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
 </svg>
 </div>
 <div class="p-6">
 <div class="flex items-center justify-between mb-2">
 <h3 class="font-bold text-lg">Web3 Merch</h3>
 <div class="px-2 py-1 bg-muted rounded-full text-xs flex items-center">
 <div class="w-2 h-2 rounded-full bg-accent mr-1"></div>
 Open
 </div>
 </div>
 <p class="text-gray-400 text-sm mb-4">
 Fashion and merchandise for the decentralized world
 </p>
 <button class="text-xs font-medium px-3 py-1 bg-muted rounded-lg flex items-center transition-colors hover:bg-[#22232e]">
 Visit Shop
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="ml-1">
 <path d="M5 12h14M12 5l7 7-7 7"></path>
 </svg>
 </button>
 </div>
 </div>
 </div>
 </div>
<!-- Featured Events -->
 <div id="events" class="mb-16">
 <div class="flex items-center justify-between mb-8">
 <h2 class="text-2xl font-bold">Featured Events</h2>
 <a href="#" class="flex items-center text-accent hover:text-accent-2 transition-colors">
 View All
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="ml-1">
 <path d="M5 12h14M12 5l7 7-7 7"></path>
 </svg>
 </a>
 </div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
 <!-- Event Card 1 -->
 <div class="card-glass rounded-2xl p-6 card-hover">
 <div class="flex flex-col sm:flex-row gap-6">
 <div class="bg-gradient-to-br from-purple-600/20 to-cyan-600/20 min-w-[100px] h-32 rounded-xl flex items-center justify-center">
 <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="opacity-50">
 <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
 <line x1="16" y1="2" x2="16" y2="6"></line>
 <line x1="8" y1="2" x2="8" y2="6"></line>
 <line x1="3" y1="10" x2="21" y2="10"></line>
 </svg>
 </div>
 <div class="flex-1">
 <div class="flex items-center justify-between mb-2">
 <h3 class="font-bold text-lg flex items-center">
 Web3 Summit 2023
 <span class="ml-2 px-2 py-1 bg-yellow-400/10 text-yellow-400 rounded-full text-xs">Upcoming</span>
 </h3>
 </div>
 <p class="text-gray-400 text-sm mb-4">
 Annual conference bringing together industry leaders and innovators in decentralized technologies
 </p>
 <div class="flex flex-wrap gap-2 mb-4">
 <div class="px-2 py-1 bg-muted rounded-full text-xs">3 days</div>
 <div class="px-2 py-1 bg-muted rounded-full text-xs">Virtual & In-person</div>
 <div class="px-2 py-1 bg-muted rounded-full text-xs">100+ Speakers</div>
 </div>
 <div class="flex items-center justify-between">
 <button class="px-4 py-2 bg-accent rounded-xl font-medium hover:bg-[#7c4ce4] transition-colors">Register Now</button>
 <div class="flex items-center">
 <div class="flex -space-x-2">
 <div class="w-7 h-7 rounded-full bg-accent/30 border border-accent flex items-center justify-center text-xs">15d</div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Event Card 2 -->
 <div class="card-glass rounded-2xl p-6 card-hover">
 <div class="flex flex-col sm:flex-row gap-6">
 <div class="bg-gradient-to-br from-green-600/20 to-cyan-600/20 min-w-[100px] h-32 rounded-xl flex items-center justify-center">
 <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="opacity-50">
 <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
 <line x1="16" y1="2" x2="16" y2="6"></line>
 <line x1="8" y1="2" x2="8" y2="6"></line>
 <line x1="3" y1="10" x2="21" y2="10"></line>
 </svg>
 </div>
 <div class="flex-1">
 <div class="flex items-center justify-between mb-2">
 <h3 class="font-bold text-lg flex items-center">
 NFT Art Exhibition
 <span class="ml-2 px-2 py-1 bg-emerald-400/10 text-emerald-400 rounded-full text-xs">Ongoing</span>
 </h3>
 </div>
 <p class="text-gray-400 text-sm mb-4">
 Digital art showcase featuring works from emerging and established NFT artists
 </p>
 <div class="flex flex-wrap gap-2 mb-4">
 <div class="px-2 py-1 bg-muted rounded-full text-xs">10 days</div>
 <div class="px-2 py-1 bg-muted rounded-full text-xs">Virtual Gallery</div>
 <div class="px-2 py-1 bg-muted rounded-full text-xs">50+ Artists</div>
 </div>
 <div class="flex items-center justify-between">
 <button class="px-4 py-2 bg-muted rounded-xl font-medium hover:bg-[#22232e] transition-colors">View Event</button>
 <div class="flex items-center">
 <div class="flex -space-x-2">
 <div class="w-7 h-7 rounded-full bg-accent2/30 border border-accent2 flex items-center justify-center text-xs">5d</div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Featured Quests -->
 <div id="quests" class="mb-16">
 <div class="flex items-center justify-between mb-8">
 <h2 class="text-2xl font-bold">Featured Quests</h2>
 <a href="#quests-page" class="flex items-center text-accent hover:text-accent-2 transition-colors">
 View All
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="ml-1">
 <path d="M5 12h14M12 5l7 7-7 7"></path>
 </svg>
 </a>
 </div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
 <!-- Quest Card 1 -->
 <div class="card-glass rounded-2xl p-6 card-hover">
 <div class="flex flex-col sm:flex-row gap-6">
 <div class="bg-gradient-to-br from-accent/20 to-accent2/20 min-w-[100px] h-32 rounded-xl flex items-center justify-center">
 <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="opacity-50">
 <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
 </svg>
 </div>
 <div class="flex-1">
 <div class="flex items-center justify-between mb-2">
 <h3 class="font-bold text-lg flex items-center">
 NFT Mastermind Challenge
 <span class="ml-2 px-2 py-1 bg-yellow-400/10 text-yellow-400 rounded-full text-xs">Active</span>
 </h3>
 </div>
 <p class="text-gray-400 text-sm mb-4">
 Complete a series of tasks to unlock exclusive NFT rewards and build your digital collection
 </p>
 <div class="flex flex-wrap gap-2 mb-4">
 <div class="px-2 py-1 bg-muted rounded-full text-xs">8 tasks</div>
 <div class="px-2 py-1 bg-muted rounded-full text-xs">180+ players</div>
 <div class="px-2 py-1 bg-muted rounded-full text-xs">Rewards: $500+</div>
 </div>
 <div class="flex items-center justify-between">
 <button class="px-4 py-2 bg-accent rounded-xl font-medium hover:bg-[#7c4ce4] transition-colors">Start Quest</button>
 <div class="flex items-center">
 <div class="flex -space-x-2">
 <div class="w-7 h-7 rounded-full bg-accent/30 border border-accent flex items-center justify-center text-xs">5d</div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Quest Card 2 -->
 <div class="card-glass rounded-2xl p-6 card-hover">
 <div class="flex flex-col sm:flex-row gap-6">
 <div class="bg-gradient-to-br from-green-600/20 to-cyan-600/20 min-w-[100px] h-32 rounded-xl flex items-center justify-center">
 <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="opacity-50">
 <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
 </svg>
 </div>
 <div class="flex-1">
 <div class="flex items-center justify-between mb-2">
 <h3 class="font-bold text-lg flex items-center">
 Crypto Puzzle Maze
 <span class="ml-2 px-2 py-1 bg-emerald-400/10 text-emerald-400 rounded-full text-xs">Beginner</span>
 </h3>
 </div>
 <p class="text-gray-400 text-sm mb-4">
 Solve cryptographic riddles to navigate through the digital maze and earn crypto prizes
 </p>
 <div class="flex flex-wrap gap-2 mb-4">
 <div class="px-2 py-1 bg-muted rounded-full text-xs">12 puzzles</div>
 <div class="px-2 py-1 bg-muted rounded-full text-xs">320+ players</div>
 <div class="px-2 py-1 bg-muted rounded-full text-xs">Rewards: 0.2 ETH</div>
 </div>
 <div class="flex items-center justify-between">
 <button class="px-4 py-2 bg-muted rounded-xl font-medium hover:bg-[#22232e] transition-colors">View Details</button>
 <div class="flex items-center">
 <div class="flex -space-x-2">
 <div class="w-7 h-7 rounded-full bg-accent2/30 border border-accent2 flex items-center justify-center text-xs">13h</div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Featured Tools -->
 <div id="tools" class="mb-16">
 <div class="flex items-center justify-between mb-8">
 <h2 class="text-2xl font-bold">Featured Tools</h2>
 <a href="#" class="flex items-center text-accent hover:text-accent-2 transition-colors">
 View All
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="ml-1">
 <path d="M5 12h14M12 5l7 7-7 7"></path>
 </svg>
 </a>
 </div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
 <!-- Tool Card 1 -->
 <div class="card-glass rounded-2xl overflow-hidden card-hover">
 <div class="bg-gradient-to-br from-purple-600/30 to-cyan-600/30 h-48 flex items-center justify-center">
 <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="opacity-50">
 <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
 <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
 </svg>
 </div>
 <div class="p-6">
 <div class="flex items-center justify-between mb-2">
 <h3 class="font-bold text-lg">NFT Analyzer</h3>
 <div class="px-2 py-1 bg-muted rounded-full text-xs flex items-center">
 <div class="w-2 h-2 rounded-full bg-accent mr-1"></div>
 Popular
 </div>
 </div>
 <p class="text-gray-400 text-sm mb-4">
 Advanced analytics for NFT collections and market trends
 </p>
 <button class="text-xs font-medium px-3 py-1 bg-muted rounded-lg flex items-center transition-colors hover:bg-[#22232e]">
 Use Tool
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="ml-1">
 <path d="M5 12h14M12 5l7 7-7 7"></path>
 </svg>
 </button>
 </div>
 </div>
<!-- Tool Card 2 -->
 <div class="card-glass rounded-2xl overflow-hidden card-hover">
 <div class="bg-gradient-to-br from-indigo-600/30 to-emerald-600/30 h-48 flex items-center justify-center">
 <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="opacity-50">
 <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
 <circle cx="9" cy="7" r="4"></circle>
 <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
 <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
 </svg>
 </div>
 <div class="p-6">
 <div class="flex items-center justify-between mb-2">
 <h3 class="font-bold text-lg">DAO Manager</h3>
 <div class="px-2 py-1 bg-muted rounded-full text-xs flex items-center">
 <div class="w-2 h-2 rounded-full bg-accent mr-1"></div>
 New
 </div>
 </div>
 <p class="text-gray-400 text-sm mb-4">
 Governance platform for decentralized autonomous organizations
 </p>
 <button class="text-xs font-medium px-3 py-1 bg-muted rounded-lg flex items-center transition-colors hover:bg-[#22232e]">
 Use Tool
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="ml-1">
 <path d="M5 12h14M12 5l7 7-7 7"></path>
 </svg>
 </button>
 </div>
 </div>
<!-- Tool Card 3 -->
 <div class="card-glass rounded-2xl overflow-hidden card-hover">
 <div class="bg-gradient-to-br from-violet-600/30 to-blue-600/30 h-48 flex items-center justify-center">
 <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="opacity-50">
 <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
 </svg>
 </div>
 <div class="p-6">
 <div class="flex items-center justify-between mb-2">
 <h3 class="font-bold text-lg">Yield Optimizer</h3>
 <div class="px-2 py-1 bg-muted rounded-full text-xs flex items-center">
 <div class="w-2 h-2 rounded-full bg-accent2 mr-1"></div>
 Pro
 </div>
 </div>
 <p class="text-gray-400 text-sm mb-4">
 Maximize your DeFi returns with automated yield farming strategies
 </p>
 <button class="text-xs font-medium px-3 py-1 bg-muted rounded-lg flex items-center transition-colors hover:bg-[#22232e]">
 Use Tool
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="ml-1">
 <path d="M5 12h14M12 5l7 7-7 7"></path>
 </svg>
 </button>
 </div>
 </div>
<!-- Tool Card 4 -->
 <div class="card-glass rounded-2xl overflow-hidden card-hover">
 <div class="bg-gradient-to-br from-pink-600/30 to-yellow-600/30 h-48 flex items-center justify-center">
 <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="opacity-50">
 <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
 </svg>
 </div>
 <div class="p-6">
 <div class="flex items-center justify-between mb-2">
 <h3 class="font-bold text-lg">Wallet Security</h3>
 <div class="px-2 py-1 bg-muted rounded-full text-xs flex items-center">
 <div class="w-2 h-2 rounded-full bg-accent mr-1"></div>
 Trusted
 </div>
 </div>
 <p class="text-gray-400 text-sm mb-4">
 Audit and secure your crypto wallets with advanced protection tools
 </p>
 <button class="text-xs font-medium px-3 py-1 bg-muted rounded-lg flex items-center transition-colors hover:bg-[#22232e]">
 Use Tool
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="ml-1">
 <path d="M5 12h14M12 5l7 7-7 7"></path>
 </svg>
 </button>
 </div>
 </div>
 </div>
 </div>
<!-- Featured Academy 2025 -->
 <div id="academy" class="mb-16">
 <div class="flex items-center justify-between mb-8">
 <h2 class="text-2xl font-bold">Featured Academy 2025</h2>
 <a href="#" class="flex items-center text-accent hover:text-accent-2 transition-colors">
 View All
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="ml-1">
 <path d="M5 12h14M12 5l7 7-7 7"></path>
 </svg>
 </a>
 </div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
 <!-- Academy Card 1 -->
 <div class="card-glass rounded-2xl p-6 card-hover">
 <div class="flex flex-col sm:flex-row gap-6">
 <div class="bg-gradient-to-br from-blue-600/20 to-purple-600/20 min-w-[100px] h-32 rounded-xl flex items-center justify-center">
 <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="opacity-50">
 <path d="M22 10v6M2 10l10-5 10 5-10 5z"></path>
 <path d="M6 12v5c3 3 9 3 12 0v-5"></path>
 </svg>
 </div>
 <div class="flex-1">
 <div class="flex items-center justify-between mb-2">
 <h3 class="font-bold text-lg flex items-center">
 Web3 Development Masterclass
 <span class="ml-2 px-2 py-1 bg-blue-400/10 text-blue-400 rounded-full text-xs">Premium</span>
 </h3>
 </div>
 <p class="text-gray-400 text-sm mb-4">
 Comprehensive course covering smart contracts, DeFi protocols, and blockchain development fundamentals
 </p>
 <div class="flex flex-wrap gap-2 mb-4">
 <div class="px-2 py-1 bg-muted rounded-full text-xs">12 weeks</div>
 <div class="px-2 py-1 bg-muted rounded-full text-xs">Live Sessions</div>
 <div class="px-2 py-1 bg-muted rounded-full text-xs">Certificate</div>
 </div>
 <div class="flex items-center justify-between">
 <button class="px-4 py-2 bg-accent rounded-xl font-medium hover:bg-[#7c4ce4] transition-colors">Enroll Now</button>
 <div class="flex items-center">
 <div class="flex -space-x-2">
 <div class="w-7 h-7 rounded-full bg-accent/30 border border-accent flex items-center justify-center text-xs">$299</div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Academy Card 2 -->
 <div class="card-glass rounded-2xl p-6 card-hover">
 <div class="flex flex-col sm:flex-row gap-6">
 <div class="bg-gradient-to-br from-green-600/20 to-teal-600/20 min-w-[100px] h-32 rounded-xl flex items-center justify-center">
 <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="opacity-50">
 <path d="M22 10v6M2 10l10-5 10 5-10 5z"></path>
 <path d="M6 12v5c3 3 9 3 12 0v-5"></path>
 </svg>
 </div>
 <div class="flex-1">
 <div class="flex items-center justify-between mb-2">
 <h3 class="font-bold text-lg flex items-center">
 NFT Artist Workshop
 <span class="ml-2 px-2 py-1 bg-green-400/10 text-green-400 rounded-full text-xs">Beginner</span>
 </h3>
 </div>
 <p class="text-gray-400 text-sm mb-4">
 Learn to create, mint, and market your digital artwork in the NFT ecosystem
 </p>
 <div class="flex flex-wrap gap-2 mb-4">
 <div class="px-2 py-1 bg-muted rounded-full text-xs">8 weeks</div>
 <div class="px-2 py-1 bg-muted rounded-full text-xs">Project-Based</div>
 <div class="px-2 py-1 bg-muted rounded-full text-xs">Portfolio</div>
 </div>
 <div class="flex items-center justify-between">
 <button class="px-4 py-2 bg-muted rounded-xl font-medium hover:bg-[#22232e] transition-colors">Learn More</button>
 <div class="flex items-center">
 <div class="flex -space-x-2">
 <div class="w-7 h-7 rounded-full bg-accent2/30 border border-accent2 flex items-center justify-center text-xs">$149</div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Featured Web3VC -->
 <div id="web3vc" class="mb-16">
 <div class="flex items-center justify-between mb-8">
 <h2 class="text-2xl font-bold">Featured Web3VC</h2>
 <a href="#" class="flex items-center text-accent hover:text-accent-2 transition-colors">
 View All
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="ml-1">
 <path d="M5 12h14M12 5l7 7-7 7"></path>
 </svg>
 </a>
 </div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
 <!-- Web3VC Card 1 -->
 <div class="card-glass rounded-2xl overflow-hidden card-hover">
 <div class="bg-gradient-to-br from-purple-600/30 to-cyan-600/30 h-48 flex items-center justify-center">
 <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="opacity-50">
 <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path>
 </svg>
 </div>
 <div class="p-6">
 <div class="flex items-center justify-between mb-2">
 <h3 class="font-bold text-lg">DeFi Protocol Fund</h3>
 <div class="px-2 py-1 bg-muted rounded-full text-xs flex items-center">
 <div class="w-2 h-2 rounded-full bg-accent mr-1"></div>
 Active
 </div>
 </div>
 <p class="text-gray-400 text-sm mb-4">
 $50M fund focused on innovative DeFi protocols and yield optimization platforms
 </p>
 <div class="flex items-center justify-between">
 <button class="text-xs font-medium px-3 py-1 bg-muted rounded-lg flex items-center transition-colors hover:bg-[#22232e]">
 Apply Now
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="ml-1">
 <path d="M5 12h14M12 5l7 7-7 7"></path>
 </svg>
 </button>
 <span class="text-xs text-gray-500">$50M AUM</span>
 </div>
 </div>
 </div>
<!-- Web3VC Card 2 -->
 <div class="card-glass rounded-2xl overflow-hidden card-hover">
 <div class="bg-gradient-to-br from-indigo-600/30 to-emerald-600/30 h-48 flex items-center justify-center">
 <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="opacity-50">
 <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path>
 </svg>
 </div>
 <div class="p-6">
 <div class="flex items-center justify-between mb-2">
 <h3 class="font-bold text-lg">NFT Ventures</h3>
 <div class="px-2 py-1 bg-muted rounded-full text-xs flex items-center">
 <div class="w-2 h-2 rounded-full bg-accent mr-1"></div>
 Open
 </div>
 </div>
 <p class="text-gray-400 text-sm mb-4">
 $25M fund investing in NFT marketplaces, gaming, and digital art platforms
 </p>
 <div class="flex items-center justify-between">
 <button class="text-xs font-medium px-3 py-1 bg-muted rounded-lg flex items-center transition-colors hover:bg-[#22232e]">
 Learn More
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="ml-1">
 <path d="M5 12h14M12 5l7 7-7 7"></path>
 </svg>
 </button>
 <span class="text-xs text-gray-500">$25M AUM</span>
 </div>
 </div>
 </div>
<!-- Web3VC Card 3 -->
 <div class="card-glass rounded-2xl overflow-hidden card-hover">
 <div class="bg-gradient-to-br from-violet-600/30 to-blue-600/30 h-48 flex items-center justify-center">
 <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="opacity-50">
 <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path>
 </svg>
 </div>
 <div class="p-6">
 <div class="flex items-center justify-between mb-2">
 <h3 class="font-bold text-lg">Infrastructure Fund</h3>
 <div class="px-2 py-1 bg-muted rounded-full text-xs flex items-center">
 <div class="w-2 h-2 rounded-full bg-accent2 mr-1"></div>
 Limited
 </div>
 </div>
 <p class="text-gray-400 text-sm mb-4">
 $100M fund for blockchain infrastructure, scaling solutions, and developer tools
 </p>
 <div class="flex items-center justify-between">
 <button class="text-xs font-medium px-3 py-1 bg-muted rounded-lg flex items-center transition-colors hover:bg-[#22232e]">
 Contact
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="ml-1">
 <path d="M5 12h14M12 5l7 7-7 7"></path>
 </svg>
 </button>
 <span class="text-xs text-gray-500">$100M AUM</span>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Featured News -->
 <div id="news" class="mb-16">
 <div class="flex items-center justify-between mb-8">
 <h2 class="text-2xl font-bold">Featured News</h2>
 <a href="#" class="flex items-center text-accent hover:text-accent-2 transition-colors">
 View All
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="ml-1">
 <path d="M5 12h14M12 5l7 7-7 7"></path>
 </svg>
 </a>
 </div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
 <!-- News Card 1 -->
 <div class="card-glass rounded-2xl p-6 card-hover">
 <div class="flex flex-col sm:flex-row gap-6">
 <div class="bg-gradient-to-br from-purple-600/20 to-cyan-600/20 min-w-[100px] h-32 rounded-xl flex items-center justify-center">
 <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="opacity-50">
 <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
 <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
 </svg>
 </div>
 <div class="flex-1">
 <div class="flex items-center justify-between mb-2">
 <h3 class="font-bold text-lg">Ethereum 2.0 Launch Date Announced</h3>
 </div>
 <p class="text-gray-400 text-sm mb-4">
 The highly anticipated upgrade to Ethereum's network is scheduled for Q1 2024, promising faster transactions and reduced fees.
 </p>
 <div class="flex flex-wrap gap-2 mb-4">
 <div class="px-2 py-1 bg-muted rounded-full text-xs">Ethereum</div>
 <div class="px-2 py-1 bg-muted rounded-full text-xs">Upgrade</div>
 <div class="px-2 py-1 bg-muted rounded-full text-xs">Scalability</div>
 </div>
 <div class="flex items-center justify-between">
 <button class="px-4 py-2 bg-muted rounded-xl font-medium hover:bg-[#22232e] transition-colors">Read Article</button>
 <div class="text-gray-500 text-sm">2 hours ago</div>
 </div>
 </div>
 </div>
 </div>
<!-- News Card 2 -->
 <div class="card-glass rounded-2xl p-6 card-hover">
 <div class="flex flex-col sm:flex-row gap-6">
 <div class="bg-gradient-to-br from-green-600/20 to-cyan-600/20 min-w-[100px] h-32 rounded-xl flex items-center justify-center">
 <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="opacity-50">
 <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
 <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
 </svg>
 </div>
 <div class="flex-1">
 <div class="flex items-center justify-between mb-2">
 <h3 class="font-bold text-lg">Major NFT Marketplace Announces Sustainability Initiative</h3>
 </div>
 <p class="text-gray-400 text-sm mb-4">
 Leading platform commits to carbon neutrality by 2025 through renewable energy and carbon offset programs.
 </p>
 <div class="flex flex-wrap gap-2 mb-4">
 <div class="px-2 py-1 bg-muted rounded-full text-xs">NFT</div>
 <div class="px-2 py-1 bg-muted rounded-full text-xs">Sustainability</div>
 <div class="px-2 py-1 bg-muted rounded-full text-xs">Environment</div>
 </div>
 <div class="flex items-center justify-between">
 <button class="px-4 py-2 bg-muted rounded-xl font-medium hover:bg-[#22232e] transition-colors">Read Article</button>
 <div class="text-gray-500 text-sm">1 day ago</div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
 </main>
<!-- QUESTS PAGE (Hidden by default) -->
 <div id="quests-page" class="hidden">
 <!-- Hero Section for Quests -->
 <section class="pt-2 pb-4 px-4 sm:px-6 lg:px-8">
 <div class="max-w-7xl mx-auto">
 <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
 <!-- Main Quest Hero Box -->
 <div class="card-glass rounded-2xl overflow-hidden p-0 lg:col-span-2 relative hover:border-accent/50 transition-colors" style="min-height: 400px; background: linear-gradient(135deg, rgba(124, 76, 228, 0.15) 0%, rgba(0, 255, 255, 0.15) 100%);">
<!-- Mini Bento Box with Q placeholder -->
 <div class="absolute top-4 left-4 w-24 h-24 lg:w-32 lg:h-32 z-10">
 <div class="card-glass rounded-xl overflow-hidden h-full bg-white/10 border border-white/20 backdrop-blur-sm relative">
 <div class="h-full flex items-center justify-center">
 <span class="text-4xl lg:text-5xl font-bold text-white">Q</span>
 </div>
 </div>
 </div>
<!-- Quest Hero Content -->
 <div class="absolute bottom-0 left-0 w-full h-full flex flex-col justify-end items-start p-4 md:p-8 text-left pointer-events-none">
 <div>
 <h2 class="text-xl md:text-3xl font-bold mb-2">Discover <span class="bg-gradient-to-r from-accent2 to-accent bg-clip-text text-transparent">Amazing Quests</span></h2>
 <p class="text-xs md:text-sm text-gray-300 mb-4 max-w-md">
 Complete challenges, earn rewards, and unlock exclusive experiences in the Web3 ecosystem.
 </p>
 <div class="flex flex-col sm:flex-row gap-2 pointer-events-auto">
 <button class="px-3 py-1.5 bg-accent rounded-full font-medium hover:bg-[#7c4ce4] transition-colors hover-gradient flex items-center justify-center text-xs">
 Start Questing
 <svg class="ml-1" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 <circle cx="12" cy="12" r="10"></circle>
 <polyline points="12 8 8 12 12 16"></polyline>
 <line x1="16" y1="12" x2="8" y2="12"></line>
 </svg>
 </button>
 <button class="px-3 py-1.5 bg-white/10 backdrop-blur-sm rounded-full font-medium hover:bg-white/20 transition-colors flex items-center justify-center text-xs border border-white/10">
 View Leaderboard
 <svg class="ml-1" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 <circle cx="11" cy="11" r="8"></circle>
 <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
 </svg>
 </button>
 </div>
 </div>
 </div>
 </div>
<!-- Quest Highlight Box 1 -->
 <div class="card-glass rounded-2xl overflow-hidden relative hover:border-accent/50 transition-colors">
 <div class="hero-slide relative h-full">
 <div class="h-full bg-gradient-to-br from-purple-900/20 to-cyan-900/20 p-4 flex flex-col justify-end">
 <div>
 <div class="inline-block px-1.5 py-0.5 bg-muted rounded-full text-xs font-medium">
 Trending
 </div>
 <h3 class="text-lg font-bold mt-1">NFT Collection Quest</h3>
 <p class="text-gray-400 text-xs mt-1">Collect rare digital artifacts</p>
 <button class="mt-2 inline-flex items-center text-accent font-medium text-xs">
 Join Quest
 <svg class="ml-1" xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
 <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
 </svg>
 </button>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Additional Quest Highlight Boxes -->
 <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mt-4">
 <!-- Quest Highlight Box 2 -->
 <div class="card-glass rounded-2xl overflow-hidden relative hover:border-accent/50 transition-colors">
 <div class="hero-slide relative h-full">
 <div class="h-full bg-gradient-to-br from-violet-900/20 to-blue-900/20 p-4 flex flex-col justify-end">
 <div>
 <div class="inline-block px-1.5 py-0.5 bg-muted rounded-full text-xs font-medium text-accent2">
 New
 </div>
 <h3 class="text-lg font-bold mt-1">DeFi Yield Quest</h3>
 <p class="text-gray-400 text-xs mt-1">Earn rewards through farming</p>
 <button class="mt-2 inline-flex items-center text-accent font-medium text-xs">
 Start Farming
 <svg class="ml-1" xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
 <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
 </svg>
 </button>
 </div>
 </div>
 </div>
 </div>
<!-- Quest Highlight Box 3 -->
 <div class="card-glass rounded-2xl overflow-hidden relative hover:border-accent/50 transition-colors">
 <div class="hero-slide relative h-full">
 <div class="h-full bg-gradient-to-br from-amber-900/20 to-yellow-900/20 p-4 flex flex-col justify-end">
 <div>
 <div class="inline-block px-1.5 py-0.5 bg-muted rounded-full text-xs font-medium text-amber-400">
 Hot
 </div>
 <h3 class="text-lg font-bold mt-1">DAO Governance Quest</h3>
 <p class="text-gray-400 text-xs mt-1">Participate in decisions</p>
 <button class="mt-2 inline-flex items-center text-accent font-medium text-xs">
 Vote Now
 <svg class="ml-1" xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
 <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
 </svg>
 </button>
 </div>
 </div>
 </div>
 </div>
<!-- Quest Highlight Box 4 -->
 <div class="card-glass rounded-2xl overflow-hidden relative hover:border-accent/50 transition-colors">
 <div class="hero-slide relative h-full">
 <div class="h-full bg-gradient-to-br from-emerald-900/20 to-teal-900/20 p-4 flex flex-col justify-end">
 <div>
 <div class="inline-block px-1.5 py-0.5 bg-muted rounded-full text-xs font-medium text-emerald-400">
 Trending
 </div>
 <h3 class="text-lg font-bold mt-1">Metaverse Quest</h3>
 <p class="text-gray-400 text-xs mt-1">Explore virtual worlds</p>
 <button class="mt-2 inline-flex items-center text-accent font-medium text-xs">
 Enter World
 <svg class="ml-1" xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
 <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
 </svg>
 </button>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Featured Quests Section (Double the amount) -->
 <section class="py-12 px-4 sm:px-6 lg:px-8">
 <div class="max-w-7xl mx-auto">
 <div class="flex items-center justify-between mb-8">
 <h2 class="text-2xl font-bold">Featured Quests</h2>
 <a href="#" class="flex items-center text-accent hover:text-accent-2 transition-colors">
 View All
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="ml-1">
 <path d="M5 12h14M12 5l7 7-7 7"></path>
 </svg>
 </a>
 </div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
 <!-- Quest Card 1 -->
 <div class="card-glass rounded-2xl overflow-hidden card-hover hover:border-accent/50 transition-colors">
 <div class="bg-gradient-to-br from-purple-600/30 to-cyan-600/30 h-48 flex items-center justify-center">
 <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="opacity-50">
 <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
 </svg>
 </div>
 <div class="p-6">
 <div class="flex items-center justify-between mb-2">
 <h3 class="font-bold text-lg">NFT Collector Quest</h3>
 <div class="px-2 py-1 bg-muted rounded-full text-xs flex items-center">
 <div class="w-2 h-2 rounded-full bg-accent mr-1"></div>
 Active
 </div>
 </div>
 <p class="text-gray-400 text-sm mb-4">
 Collect 10 unique NFTs to unlock exclusive rewards
 </p>
 <button class="text-xs font-medium px-3 py-1 bg-muted rounded-lg flex items-center transition-colors hover:bg-[#22232e]">
 Start Quest
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="ml-1">
 <path d="M5 12h14M12 5l7 7-7 7"></path>
 </svg>
 </button>
 </div>
 </div>
<!-- Quest Card 2 -->
 <div class="card-glass rounded-2xl overflow-hidden card-hover hover:border-accent/50 transition-colors">
 <div class="bg-gradient-to-br from-indigo-600/30 to-emerald-600/30 h-48 flex items-center justify-center">
 <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="opacity-50">
 <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
 </svg>
 </div>
 <div class="p-6">
 <div class="flex items-center justify-between mb-2">
 <h3 class="font-bold text-lg">DeFi Master Quest</h3>
 <div class="px-2 py-1 bg-muted rounded-full text-xs flex items-center">
 <div class="w-2 h-2 rounded-full bg-accent mr-1"></div>
 Active
 </div>
 </div>
 <p class="text-gray-400 text-sm mb-4">
 Complete 5 DeFi protocols to earn master badge
 </p>
 <button class="text-xs font-medium px-3 py-1 bg-muted rounded-lg flex items-center transition-colors hover:bg-[#22232e]">
 Start Quest
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="ml-1">
 <path d="M5 12h14M12 5l7 7-7 7"></path>
 </svg>
 </button>
 </div>
 </div>
<!-- Quest Card 3 -->
 <div class="card-glass rounded-2xl overflow-hidden card-hover hover:border-accent/50 transition-colors">
 <div class="bg-gradient-to-br from-violet-600/30 to-blue-600/30 h-48 flex items-center justify-center">
 <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="opacity-50">
 <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
 </svg>
 </div>
 <div class="p-6">
 <div class="flex items-center justify-between mb-2">
 <h3 class="font-bold text-lg">DAO Explorer Quest</h3>
 <div class="px-2 py-1 bg-muted rounded-full text-xs flex items-center">
 <div class="w-2 h-2 rounded-full bg-accent mr-1"></div>
 Active
 </div>
 </div>
 <p class="text-gray-400 text-sm mb-4">
 Participate in 3 DAO governance decisions
 </p>
 <button class="text-xs font-medium px-3 py-1 bg-muted rounded-lg flex items-center transition-colors hover:bg-[#22232e]">
 Start Quest
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="ml-1">
 <path d="M5 12h14M12 5l7 7-7 7"></path>
 </svg>
 </button>
 </div>
 </div>
<!-- Quest Card 4 -->
 <div class="card-glass rounded-2xl overflow-hidden card-hover hover:border-accent/50 transition-colors">
 <div class="bg-gradient-to-br from-amber-600/30 to-yellow-600/30 h-48 flex items-center justify-center">
 <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="opacity-50">
 <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
 </svg>
 </div>
 <div class="p-6">
 <div class="flex items-center justify-between mb-2">
 <h3 class="font-bold text-lg">Metaverse Pioneer</h3>
 <div class="px-2 py-1 bg-muted rounded-full text-xs flex items-center">
 <div class="w-2 h-2 rounded-full bg-accent mr-1"></div>
 Active
 </div>
 </div>
 <p class="text-gray-400 text-sm mb-4">
 Explore 5 different metaverse worlds
 </p>
 <button class="text-xs font-medium px-3 py-1 bg-muted rounded-lg flex items-center transition-colors hover:bg-[#22232e]">
 Start Quest
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="ml-1">
 <path d="M5 12h14M12 5l7 7-7 7"></path>
 </svg>
 </button>
 </div>
 </div>
<!-- Quest Card 5 -->
 <div class="card-glass rounded-2xl overflow-hidden card-hover hover:border-accent/50 transition-colors">
 <div class="bg-gradient-to-br from-emerald-600/30 to-teal-600/30 h-48 flex items-center justify-center">
 <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="opacity-50">
 <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
 </svg>
 </div>
 <div class="p-6">
 <div class="flex items-center justify-between mb-2">
 <h3 class="font-bold text-lg">Crypto Trader Quest</h3>
 <div class="px-2 py-1 bg-muted rounded-full text-xs flex items-center">
 <div class="w-2 h-2 rounded-full bg-accent mr-1"></div>
 Active
 </div>
 </div>
 <p class="text-gray-400 text-sm mb-4">
 Execute 10 successful trades across different tokens
 </p>
 <button class="text-xs font-medium px-3 py-1 bg-muted rounded-lg flex items-center transition-colors hover:bg-[#22232e]">
 Start Quest
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="ml-1">
 <path d="M5 12h14M12 5l7 7-7 7"></path>
 </svg>
 </button>
 </div>
 </div>
<!-- Quest Card 6 -->
 <div class="card-glass rounded-2xl overflow-hidden card-hover hover:border-accent/50 transition-colors">
 <div class="bg-gradient-to-br from-rose-600/30 to-pink-600/30 h-48 flex items-center justify-center">
 <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="opacity-50">
 <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
 </svg>
 </div>
 <div class="p-6">
 <div class="flex items-center justify-between mb-2">
 <h3 class="font-bold text-lg">Gaming Champion</h3>
 <div class="px-2 py-1 bg-muted rounded-full text-xs flex items-center">
 <div class="w-2 h-2 rounded-full bg-accent mr-1"></div>
 Active
 </div>
 </div>
 <p class="text-gray-400 text-sm mb-4">
 Win 5 blockchain games to earn champion status
 </p>
 <button class="text-xs font-medium px-3 py-1 bg-muted rounded-lg flex items-center transition-colors hover:bg-[#22232e]">
 Start Quest
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="ml-1">
 <path d="M5 12h14M12 5l7 7-7 7"></path>
 </svg>
 </button>
 </div>
 </div>
<!-- Quest Card 7 -->
 <div class="card-glass rounded-2xl overflow-hidden card-hover hover:border-accent/50 transition-colors">
 <div class="bg-gradient-to-br from-cyan-600/30 to-blue-600/30 h-48 flex items-center justify-center">
 <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="opacity-50">
 <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
 </svg>
 </div>
 <div class="p-6">
 <div class="flex items-center justify-between mb-2">
 <h3 class="font-bold text-lg">Staking Master</h3>
 <div class="px-2 py-1 bg-muted rounded-full text-xs flex items-center">
 <div class="w-2 h-2 rounded-full bg-accent mr-1"></div>
 Active
 </div>
 </div>
 <p class="text-gray-400 text-sm mb-4">
 Stake tokens in 3 different protocols
 </p>
 <button class="text-xs font-medium px-3 py-1 bg-muted rounded-lg flex items-center transition-colors hover:bg-[#22232e]">
 Start Quest
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="ml-1">
 <path d="M5 12h14M12 5l7 7-7 7"></path>
 </svg>
 </button>
 </div>
 </div>
<!-- Quest Card 8 -->
 <div class="card-glass rounded-2xl overflow-hidden card-hover hover:border-accent/50 transition-colors">
 <div class="bg-gradient-to-br from-lime-600/30 to-green-600/30 h-48 flex items-center justify-center">
 <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="opacity-50">
 <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
 </svg>
 </div>
 <div class="p-6">
 <div class="flex items-center justify-between mb-2">
 <h3 class="font-bold text-lg">Community Builder</h3>
 <div class="px-2 py-1 bg-muted rounded-full text-xs flex items-center">
 <div class="w-2 h-2 rounded-full bg-accent mr-1"></div>
 Active
 </div>
 </div>
 <p class="text-gray-400 text-sm mb-4">
 Contribute to 5 community discussions
 </p>
 <button class="text-xs font-medium px-3 py-1 bg-muted rounded-lg flex items-center transition-colors hover:bg-[#22232e]">
 Start Quest
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="ml-1">
 <path d="M5 12h14M12 5l7 7-7 7"></path>
 </svg>
 </button>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Keep the same sections: Partners, Media, etc. -->
 <!-- Logo Marquee Sections -->
 <section class="pt-0 pb-10 px-4 sm:px-6 lg:px-8">
 <div class="max-w-7xl mx-auto">
 <h3 class="text-center text-xl font-bold mb-10">Trusted by Industry Leaders</h3>
 <!-- Partners Logo Rail -->
 <div class="mb-16">
 <div class="marquee-container py-6 overflow-hidden">
 <div class="marquee flex">
 <div class="flex space-x-12 px-12">
 <div class="flex items-center justify-center">
 <div class="grayscale hover:grayscale-0 transition-all duration-300 opacity-60 hover:opacity-100 text-xl font-bold">
 CryptoAlpha
 </div>
 </div>
 <div class="flex items-center justify-center">
 <div class="grayscale hover:grayscale-0 transition-all duration-300 opacity-60 hover:opacity-100 text-xl font-bold">
 LedgerTech
 </div>
 </div>
 <div class="flex items-center justify-center">
 <div class="grayscale hover:grayscale-0 transition-all duration-300 opacity-60 hover:opacity-100 text-xl font-bold">
 Ether.io
 </div>
 </div>
 <div class="flex items-center justify-center">
 <div class="grayscale hover:grayscale-0 transition-all duration-300 opacity-60 hover:opacity-100 text-xl font-bold">
 ChainSecure
 </div>
 </div>
 <div class="flex items-center justify-center">
 <div class="grayscale hover:grayscale-0 transition-all duration-300 opacity-60 hover:opacity-100 text-xl font-bold">
 MetaVault
 </div>
 </div>
 <div class="flex items-center justify-center">
 <div class="grayscale hover:grayscale-0 transition-all duration-300 opacity-60 hover:opacity-100 text-xl font-bold">
 PixelPunks
 </div>
 </div>
 </div>
 <div class="flex space-x-12 px-12">
 <div class="flex items-center justify-center">
 <div class="grayscale hover:grayscale-0 transition-all duration-300 opacity-60 hover:opacity-100 text-xl font-bold">
 CryptoAlpha
 </div>
 </div>
 <div class="flex items-center justify-center">
 <div class="grayscale hover:grayscale-0 transition-all duration-300 opacity-60 hover:opacity-100 text-xl font-bold">
 LedgerTech
 </div>
 </div>
 <div class="flex items-center justify-center">
 <div class="grayscale hover:grayscale-0 transition-all duration-300 opacity-60 hover:opacity-100 text-xl font-bold">
 Ether.io
 </div>
 </div>
 <div class="flex items-center justify-center">
 <div class="grayscale hover:grayscale-0 transition-all duration-300 opacity-60 hover:opacity-100 text-xl font-bold">
 ChainSecure
 </div>
 </div>
 <div class="flex items-center justify-center">
 <div class="grayscale hover:grayscale-0 transition-all duration-300 opacity-60 hover:opacity-100 text-xl font-bold">
 MetaVault
 </div>
 </div>
 <div class="flex items-center justify-center">
 <div class="grayscale hover:grayscale-0 transition-all duration-300 opacity-60 hover:opacity-100 text-xl font-bold">
 PixelPunks
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
 </div>
<!-- Footer -->
 <footer class="border-t border-white/10 py-12 px-4 sm:px-6 lg:px-8">
 <div class="max-w-7xl mx-auto">
 <div class="grid grid-cols-1 md:grid-cols-4 gap-10">
 <div>
 <div class="mb-4">
 <div class="rounded-full w-12 h-12 bg-gradient-to-br from-accent to-accent2 flex items-center justify-center">
 <span class="font-bold text-xl">W3D</span>
 </div>
 </div>
 <p class="text-gray-400 mb-6">
 Discover the future of decentralized experiences. Join our community and explore the Web3 revolution.
 </p>
 <div class="flex space-x-4">
 <a href="#" class="p-2 rounded-full bg-muted hover:bg-[#20212c] transition-colors">
 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
 <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"></path>
 </svg>
 </a>
 <a href="#" class="p-2 rounded-full bg-muted hover:bg-[#20212c] transition-colors">
 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
 <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162 0 3.403 2.759 6.162 6.162 6.162 3.403 0 6.162-2.759 6.162-6.162 0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"></path>
 </svg>
 </a>
 <a href="#" class="p-2 rounded-full bg-muted hover:bg-[#20212c] transition-colors">
 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
 <path d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z"></path>
 </svg>
 </a>
 </div>
 </div>
<div>
 <h3 class="font-bold mb-5 text-lg">Resources</h3>
 <ul class="space-y-3">
 <li><a href="#" class="text-gray-400 hover:text-accent transition-colors">Help Center</a></li>
 <li><a href="#" class="text-gray-400 hover:text-accent transition-colors">Developer Portal</a></li>
 <li><a href="#" class="text-gray-400 hover:text-accent transition-colors">Community Forum</a></li>
 <li><a href="#" class="text-gray-400 hover:text-accent transition-colors">Documentation</a></li>
 <li><a href="#" class="text-gray-400 hover:text-accent transition-colors">NFT Marketplace</a></li>
 </ul>
 </div>
<div>
 <h3 class="font-bold mb-5 text-lg">Legal</h3>
 <ul class="space-y-3">
 <li><a href="#" class="text-gray-400 hover:text-accent transition-colors">Privacy Policy</a></li>
 <li><a href="#" class="text-gray-400 hover:text-accent transition-colors">Terms of Service</a></li>
 <li><a href="#" class="text-gray-400 hover:text-accent transition-colors">Cookie Settings</a></li>
 <li><a href="#" class="text-gray-400 hover:text-accent transition-colors">Disclaimer</a></li>
 <li><a href="#" class="text-gray-400 hover:text-accent transition-colors">Risk Disclosure</a></li>
 </ul>
 </div>
</div>
<div class="mt-12 pt-8 border-t border-white/5 text-center text-gray-500 text-sm">
 <p>&copy; 2023 Web3 District. All rights reserved. Decentralizing the future.</p>
 </div>
 </div>
 </footer>
<!-- JavaScript Interactions -->
 <script>
 // GLOBAL CAROUSEL VARIABLES
 let currentSlide = 0;
 let carouselInterval;
 // CAROUSEL FUNCTION - GLOBAL SCOPE
 function showSlide(index) {
 // Get all slides and dots
 const slides = document.querySelectorAll('.slide-content');
 const dots = document.querySelectorAll('.dot');
// Hide all slides
 slides.forEach((slide, i) => {
 slide.classList.add('hidden');
 });
// Show current slide
 if (slides[index]) {
 slides[index].classList.remove('hidden');
 }
// Update dots
 dots.forEach((dot, i) => {
 if (i === index) {
 dot.classList.remove('bg-white/30');
 dot.classList.add('bg-white');
 } else {
 dot.classList.remove('bg-white');
 dot.classList.add('bg-white/30');
 }
 });
currentSlide = index;
 }
// EXPLICITLY ATTACH TO WINDOW OBJECT
 window.showSlide = showSlide;
 // AUTO-ADVANCE FUNCTION
 function startAutoAdvance() {
 carouselInterval = setInterval(() => {
 const slides = document.querySelectorAll('.slide-content');
 const nextSlide = (currentSlide + 1) % slides.length;
 showSlide(nextSlide);
 }, 5000);
 }
 // SPA NAVIGATION FUNCTION
 function navigateToPage(pageName) {
 // Hide all pages
 const mainPage = document.querySelector('main');
 const questsPage = document.getElementById('quests-page');
if (mainPage) mainPage.style.display = 'none';
 if (questsPage) questsPage.classList.add('hidden');
// Show target page
 if (pageName === 'home') {
 if (mainPage) mainPage.style.display = 'block';
 // Scroll to top
 window.scrollTo({ top: 0, behavior: 'smooth' });
 } else if (pageName === 'quests') {
 if (questsPage) questsPage.classList.remove('hidden');
 // Scroll to top
 window.scrollTo({ top: 0, behavior: 'smooth' });
 }
// Close mobile menu
 const mobileMenu = document.getElementById('mobile-menu');
 if (mobileMenu && mobileMenu.classList.contains('open')) {
 mobileMenu.classList.remove('open');
 }
 }
 // INITIALIZE EVERYTHING
 document.addEventListener('DOMContentLoaded', function() {
 // Initialize carousel
 showSlide(0);
 startAutoAdvance();
// SPA NAVIGATION LINKS
 const navLinks = document.querySelectorAll('a[href^="#"]');
 navLinks.forEach(link => {
 link.onclick = function(e) {
 e.preventDefault();
 const targetId = this.getAttribute('href');
// Handle SPA navigation
 if (targetId === '#quests-page') {
 navigateToPage('quests');
 history.pushState(null, null, targetId);
 } else if (targetId === '#home') {
 navigateToPage('home');
 history.pushState(null, null, targetId);
 } else {
 // Handle regular section scrolling (including #quests)
 const targetSection = document.querySelector(targetId);
 if (targetSection) {
 // Close mobile menu
 const mobileMenu = document.getElementById('mobile-menu');
 if (mobileMenu && mobileMenu.classList.contains('open')) {
 mobileMenu.classList.remove('open');
 }
// Scroll to section
 targetSection.scrollIntoView({
behavior: 'smooth',
block: 'start'
 });
history.pushState(null, null, targetId);
 }
 }
 };
 });
// Filter chips
 const filterChips = document.querySelectorAll('.filter-chip');
 filterChips.forEach(chip => {
 chip.onclick = function() {
 filterChips.forEach(c => c.classList.remove('bg-accent', 'text-white'));
 this.classList.add('bg-accent', 'text-white');
 };
 });
 });
 </script>
</body>
</html>