Spaces:
Running
Running
please fill AI Matchmaker with this categories so people can click and choose "🔗 Core Web3 Categories DeFi / Finance (DEXs, stablecoins, yield protocols) NFT & Digital Art (collections, marketplaces, generative art) Metaverse & Gaming (virtual worlds, GameFi, VR/AR) DAOs & Governance (tooling, coordination, multisigs) L1 / L2 Protocols (Ethereum, Solana, Arbitrum, TON, etc.) ZK & Privacy Tech (zero-knowledge proofs, privacy infra) Cross-chain & Interoperability (bridges, rollups, messaging layers) Real World Assets (RWA) (tokenized real estate, gold, bonds) SocialFi & Creator Economy (decentralized social, Web3 media) ReFi / Impact (climate, sustainability, circular economy) 🧠 Tech & Infra Categories AI & ML (models, tooling, autonomous agents) Dev Tools (SDKs, IDEs, no-code/low-code tools) Cybersecurity (auditing, wallets, identity) Data & Analytics (oracles, dashboards, indexing) Cloud & Infra (decentralized storage, edge compute) Quantum Computing (R&D, hybrid classical/quantum apps) 📢 Media & Growth Categories Content Creation (podcasts, newsletters, video series) Growth & Community (growth hacking, ambassador programs) Events & Conferences (IRL or virtual) Hackathons & Bounties (project discovery, innovation) Accelerators & Incubators (mentorship, funding, demo days) 🌍 Broader Ecosystem & Culture Education & Research (open source, developer academies) Legal & Compliance (DAO structure, token law) Philanthropy & Nonprofit (donation DAOs, funding missions) Diversity & Inclusion (women in Web3, regional uplift) Lifestyle & Wellness (biohacking, digital health, productivity)" - Follow Up Deployment
4c0aa7f verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Web3 QuickSponsor | Short-Term Sponsorships</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| // AI Matching Simulation | |
| document.getElementById('calculate-match').addEventListener('click', function() { | |
| const button = this; | |
| const spinner = document.getElementById('spinner'); | |
| const vibeBar = document.getElementById('vibe-score-bar'); | |
| // Show loading state | |
| button.disabled = true; | |
| spinner.classList.remove('hidden'); | |
| // Simulate AI processing | |
| setTimeout(() => { | |
| // Update vibe score with animation | |
| let width = 0; | |
| const progress = setInterval(() => { | |
| width += 5; | |
| vibeBar.style.width = `${width}%`; | |
| if (width >= 87) { | |
| clearInterval(progress); | |
| // Show completed state | |
| spinner.classList.add('hidden'); | |
| button.innerHTML = '<span>View 12 High-Quality Matches (Avg. 84% Fit)</span> <i class="fas fa-arrow-right ml-2"></i>'; | |
| button.disabled = false; | |
| // Add pulse animation to draw attention | |
| button.classList.add('animate-pulse'); | |
| setTimeout(() => button.classList.remove('animate-pulse'), 2000); | |
| } | |
| }, 50); | |
| }, 800); | |
| }); | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#00ff9d', | |
| secondary: '#00b8ff', | |
| accent: '#ff00f7', | |
| dark: '#0a0a0a', | |
| light: '#1a1a1a' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| :root { | |
| --bg-color: #0a0a0a; | |
| --text-color: #e0e0e0; | |
| --card-bg: rgba(26, 26, 26, 0.7); | |
| } | |
| [data-theme="light"] { | |
| --bg-color: #f8f8f8; | |
| --text-color: #333333; | |
| --card-bg: rgba(255, 255, 255, 0.7); | |
| } | |
| body { | |
| background-color: var(--bg-color); | |
| color: var(--text-color); | |
| transition: background-color 0.3s, color 0.3s; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, rgba(0,255,157,0.9) 0%, rgba(0,184,255,0.9) 50%, rgba(255,0,247,0.9) 100%); | |
| } | |
| .subtle-gradient { | |
| background: linear-gradient(135deg, rgba(0,255,157,0.1) 0%, rgba(0,184,255,0.1) 50%, rgba(255,0,247,0.1) 100%); | |
| } | |
| .border-gradient { | |
| border: 2px solid transparent; | |
| background-image: linear-gradient(var(--bg-color), var(--bg-color)), | |
| linear-gradient(135deg, #00ff9d 0%, #00b8ff 50%, #ff00f7 100%); | |
| background-origin: border-box; | |
| background-clip: padding-box, border-box; | |
| } | |
| .text-gradient { | |
| background: linear-gradient(135deg, #00ff9d 0%, #00b8ff 50%, #ff00f7 100%); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| display: inline-block; | |
| } | |
| .sponsor-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0, 255, 157, 0.2); | |
| } | |
| .glow { | |
| box-shadow: 0 0 15px rgba(0, 255, 157, 0.3); | |
| } | |
| .glow-sm { | |
| box-shadow: 0 0 10px rgba(0, 184, 255, 0.2); | |
| } | |
| .glass-card { | |
| background: var(--card-bg); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| border-radius: 12px; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); | |
| } | |
| .feature-card:hover { | |
| transform: scale(1.03); | |
| box-shadow: 0 5px 15px rgba(0, 255, 157, 0.3); | |
| border: 1px solid rgba(0, 255, 157, 0.2); | |
| } | |
| .wallet-connect-btn:hover { | |
| background: linear-gradient(135deg, rgba(0,255,157,0.9) 0%, rgba(0,184,255,0.9) 100%); | |
| box-shadow: 0 0 15px rgba(0, 184, 255, 0.3); | |
| } | |
| .gradient-btn:hover { | |
| background-position: 100% 100%; | |
| } | |
| .bg-white { | |
| background-color: #1a1a1a ; | |
| color: #e0e0e0; | |
| } | |
| .bg-gray-50 { | |
| background-color: #121212 ; | |
| } | |
| .text-gray-600 { | |
| color: #a0a0a0 ; | |
| } | |
| .text-gray-800 { | |
| color: #e0e0e0 ; | |
| } | |
| .border-gray-200, .border-gray-300 { | |
| border-color: #333 ; | |
| } | |
| .bg-gray-200 { | |
| background-color: #333 ; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900"> | |
| <!-- Header/Navigation --> | |
| <header class="fixed w-full bg-white shadow-sm z-50"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-handshake text-primary text-2xl"></i> | |
| <h1 class="text-xl font-bold text-gradient">Web3QuickSponsor</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#" class="text-gray-600 hover:text-primary font-medium">Home</a> | |
| <a href="#how-it-works" class="text-gray-600 hover:text-primary font-medium">How It Works</a> | |
| <a href="#explore" class="text-gray-600 hover:text-primary font-medium">Explore</a> | |
| <a href="#testimonials" class="text-gray-600 hover:text-primary font-medium">Success Stories</a> | |
| <a href="#faq" class="text-gray-600 hover:text-primary font-medium">FAQ</a> | |
| </nav> | |
| <div class="flex items-center space-x-4"> | |
| <button id="theme-toggle" class="p-2 rounded-full bg-gray-700 text-gray-300 mr-2 hover:bg-gray-600 transition"> | |
| <i class="fas fa-moon"></i> | |
| <i class="fas fa-sun hidden"></i> | |
| </button> | |
| <button class="wallet-connect-btn px-4 py-2 rounded-full font-medium transition-all duration-300"> | |
| <i class="fas fa-wallet mr-2"></i> | |
| <span class="text-gradient">Connect Wallet</span> | |
| </button> | |
| <button class="md:hidden text-gray-600"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Updated CSS for Dark, Trendy Hero --> | |
| <style> | |
| .gradient-btn { | |
| background: linear-gradient(90deg, #00ff9d, #00b8ff, #ff00f7); | |
| background-size: 200% auto; | |
| transition: background-position 0.5s; | |
| } | |
| .gradient-btn:hover { | |
| background-position: right center; | |
| } | |
| .dark-hero-bg { | |
| position: relative; | |
| background-color: #0d0f12; | |
| background-image: | |
| url('https://www.transparenttextures.com/patterns/asfalt-dark.png'), | |
| linear-gradient(135deg, rgba(0, 255, 157, 0.15) 0%, rgba(0, 184, 255, 0.15) 100%); | |
| background-blend-mode: overlay, overlay; | |
| color: #e0e0e0; | |
| overflow: hidden; | |
| } | |
| .neon-text { | |
| font-size: 4rem; | |
| font-weight: bold; | |
| background: linear-gradient(90deg, #00ff9d, #00b8ff, #ff00f7); | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| color: transparent; | |
| text-shadow: 0 0 8px rgba(0, 255, 157, 0.7), 0 0 16px rgba(0, 184, 255, 0.4); | |
| } | |
| .neon-input { | |
| background: #181a1d; | |
| border: 2px solid #00b8ff; | |
| border-radius: 8px; | |
| padding: 0.75rem 1rem; | |
| color: #e0e0e0; | |
| font-family: 'Space Mono', monospace; | |
| box-shadow: 0 0 10px rgba(0, 184, 255, 0.5); | |
| transition: border-color 0.3s, box-shadow 0.3s; | |
| } | |
| .neon-input:focus { | |
| outline: none; | |
| border-color: #ff00f7; | |
| box-shadow: 0 0 15px rgba(255, 0, 247, 0.7); | |
| } | |
| .icon-large { | |
| font-size: 4rem; | |
| opacity: 0.2; | |
| position: absolute; | |
| top: 20%; | |
| right: 10%; | |
| transform: rotate(25deg); | |
| } | |
| </style> | |
| <!-- Updated Hero Section --> | |
| <section class="dark-hero-bg text-white pt-32 pb-20 flex flex-col items-center relative"> | |
| <!-- Background Icon Accent --> | |
| <i class="fas fa-microchip icon-large text-primary"></i> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h1 class="neon-text mb-4"> | |
| Discover Next‑Gen Sponsors <br class="hidden md:block" /> in Web3 | |
| </h1> | |
| <p class="text-xl mb-8 opacity-80 max-w-2xl mx-auto"> | |
| Fast‑track your project with digital-first sponsorships. Engaging, on‑demand partnerships for events, content creators, and DAOs. | |
| </p> | |
| <div class="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-6"> | |
| <button class="px-8 py-3 rounded-full font-bold border-2 border-secondary hover:bg-secondary/20 transition"> | |
| <i class="fas fa-search mr-2"></i>Browse Sponsors | |
| </button> | |
| <button class="gradient-btn px-8 py-3 rounded-full font-bold text-white hover:opacity-90 transition"> | |
| <i class="fas fa-hand-holding-usd mr-2"></i>Partner with Us | |
| </button> | |
| </div> | |
| <!-- Digital Search Field --> | |
| <div class="mt-10"> | |
| <input type="text" placeholder="🔍 Search sponsorships..." class="neon-input w-full max-w-md" /> | |
| </div> | |
| </div> | |
| </section> | |
| </section> | |
| <!-- Stats Section --> | |
| <section class="bg-white py-12 shadow-sm"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-around text-center"> | |
| <div class="mb-8 md:mb-0"> | |
| <div class="text-4xl font-bold text-primary mb-2">250+</div> | |
| <div class="text-gray-600">Active Sponsors</div> | |
| </div> | |
| <div class="mb-8 md:mb-0"> | |
| <div class="text-4xl font-bold text-secondary mb-2">1,200+</div> | |
| <div class="text-gray-600">Sponsorships Made</div> | |
| </div> | |
| <div class="mb-8 md:mb-0"> | |
| <div class="text-4xl font-bold text-accent mb-2">$3.2M+</div> | |
| <div class="text-gray-600">Total Value Distributed</div> | |
| </div> | |
| <div> | |
| <div class="text-4xl font-bold text-primary mb-2">24h</div> | |
| <div class="text-gray-600">Average Match Time</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- START: AI Matching Quest Game --> | |
| <section class="bg-gray-900 text-white py-20" id="ai-matching"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl font-bold mb-4">🎮 AI Matchmaker Quest</h2> | |
| <p class="text-lg opacity-80 mb-8">Answer 3 quick questions and unlock your perfect sponsor match.</p> | |
| <div class="bg-gray-800 p-6 rounded-xl max-w-2xl mx-auto shadow-lg"> | |
| <!-- Step 1 --> | |
| <div class="mb-6"> | |
| <h3 class="text-xl font-semibold mb-2">🧠 Step 1: What's your project about?</h3> | |
| <select class="w-full p-4 neon-input"> | |
| <option value="">🔗 Select your project category...</option> | |
| <optgroup label="Core Web3 Categories"> | |
| <option>DeFi / Finance (DEXs, stablecoins, yield protocols)</option> | |
| <option>NFT & Digital Art (collections, marketplaces, generative art)</option> | |
| <option>Metaverse & Gaming (virtual worlds, GameFi, VR/AR)</option> | |
| <option>DAOs & Governance (tooling, coordination, multisigs)</option> | |
| <option>L1 / L2 Protocols (Ethereum, Solana, Arbitrum, TON, etc.)</option> | |
| <option>ZK & Privacy Tech (zero-knowledge proofs, privacy infra)</option> | |
| <option>Cross-chain & Interoperability (bridges, rollups, messaging layers)</option> | |
| <option>Real World Assets (RWA) (tokenized real estate, gold, bonds)</option> | |
| <option>SocialFi & Creator Economy (decentralized social, Web3 media)</option> | |
| <option>ReFi / Impact (climate, sustainability, circular economy)</option> | |
| </optgroup> | |
| <optgroup label="Tech & Infra"> | |
| <option>AI & ML (models, tooling, autonomous agents)</option> | |
| <option>Dev Tools (SDKs, IDEs, no-code/low-code tools)</option> | |
| <option>Cybersecurity (auditing, wallets, identity)</option> | |
| <option>Data & Analytics (oracles, dashboards, indexing)</option> | |
| <option>Cloud & Infra (decentralized storage, edge compute)</option> | |
| <option>Quantum Computing (R&D, hybrid classical/quantum apps)</option> | |
| </optgroup> | |
| <optgroup label="Media & Growth"> | |
| <option>Content Creation (podcasts, newsletters, video series)</option> | |
| <option>Growth & Community (growth hacking, ambassador programs)</option> | |
| <option>Events & Conferences (IRL or virtual)</option> | |
| <option>Hackathons & Bounties (project discovery, innovation)</option> | |
| <option>Accelerators & Incubators (mentorship, funding, demo days)</option> | |
| </optgroup> | |
| <optgroup label="Broader Ecosystem"> | |
| <option>Education & Research (open source, developer academies)</option> | |
| <option>Legal & Compliance (DAO structure, token law)</option> | |
| <option>Philanthropy & Nonprofit (donation DAOs, funding missions)</option> | |
| <option>Diversity & Inclusion (women in Web3, regional uplift)</option> | |
| <option>Lifestyle & Wellness (biohacking, digital health, productivity)</option> | |
| </optgroup> | |
| </select> | |
| </div> | |
| <!-- Step 2 --> | |
| <div class="mb-6"> | |
| <h3 class="text-xl font-semibold mb-2">✨ Step 2: Pick your sponsor type</h3> | |
| <div class="grid grid-cols-2 gap-4 text-left"> | |
| <label class="flex items-center space-x-2"> | |
| <input type="radio" name="sponsor-type" class="accent-primary"> <span>Tech DAO</span> | |
| </label> | |
| <label class="flex items-center space-x-2"> | |
| <input type="radio" name="sponsor-type" class="accent-primary"> <span>Media Brand</span> | |
| </label> | |
| <label class="flex items-center space-x-2"> | |
| <input type="radio" name="sponsor-type" class="accent-primary"> <span>Protocol Foundation</span> | |
| </label> | |
| <label class="flex items-center space-x-2"> | |
| <input type="radio" name="sponsor-type" class="accent-primary"> <span>Investment DAO</span> | |
| </label> | |
| </div> | |
| </div> | |
| <!-- Step 3 --> | |
| <div class="mb-6"> | |
| <h3 class="text-xl font-semibold mb-2">💰 Step 3: Budget Range</h3> | |
| <select class="w-full p-4 neon-input"> | |
| <option>Select Range</option> | |
| <option>0.1 - 1 ETH</option> | |
| <option>1 - 5 ETH</option> | |
| <option>5 - 10 ETH</option> | |
| <option>10+ ETH</option> | |
| </select> | |
| </div> | |
| <!-- Submit Button --> | |
| <div class="text-center"> | |
| <button class="gradient-btn px-8 py-4 rounded-full font-bold text-white hover:opacity-90 transition">🎯 Unlock My Sponsor Match</button> | |
| <p class="text-xs mt-4 text-gray-400">Your answers will be used to generate real sponsor matches.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- END: AI Matching Quest Game --> | |
| <!-- How It Works --> | |
| <section id="how-it-works" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">How Web3QuickSponsor Works</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Simple steps to connect with sponsors for your short-term needs</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300"> | |
| <div class="w-16 h-16 gradient-bg rounded-full flex items-center justify-center text-white text-2xl mb-6">1</div> | |
| <h3 class="text-xl font-bold mb-4 text-gray-800">Create Your Profile</h3> | |
| <p class="text-gray-600">Set up your project profile with key details about what you're seeking sponsorship for.</p> | |
| </div> | |
| <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300"> | |
| <div class="w-16 h-16 gradient-bg rounded-full flex items-center justify-center text-white text-2xl mb-6">2</div> | |
| <h3 class="text-xl font-bold mb-4 text-gray-800">Browse Sponsors</h3> | |
| <p class="text-gray-600">Explore our network of Web3 sponsors looking for short-term partnerships.</p> | |
| </div> | |
| <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300"> | |
| <div class="w-16 h-16 gradient-bg rounded-full flex items-center justify-center text-white text-2xl mb-6">3</div> | |
| <h3 class="text-xl font-bold mb-4 text-gray-800">Connect & Get Funded</h3> | |
| <p class="text-gray-600">Send proposals and finalize deals with smart contract-based agreements.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Explore Sponsorships --> | |
| <section id="explore" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-8"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">Explore Sponsorship Opportunities</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Browse and filter sponsorship needs from Web3 projects</p> | |
| </div> | |
| <!-- Filter Controls --> | |
| <div class="mb-12 bg-gray-50 p-6 rounded-xl"> | |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4"> | |
| <div class="flex-1"> | |
| <label class="block text-gray-700 mb-2">Search</label> | |
| <input type="text" placeholder="Find opportunities..." | |
| class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| </div> | |
| <div class="flex-1"> | |
| <label class="block text-gray-700 mb-2">Category</label> | |
| <select class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent filter-category"> | |
| <option value="all">All Categories</option> | |
| <option value="conference">Conferences & Summits</option> | |
| <option value="hackathon">Hackathons</option> | |
| <option value="workshop">Workshops</option> | |
| <option value="meetup">Meetups & Community Gatherings</option> | |
| <option value="webinar">Webinars & Online Events</option> | |
| <option value="fellowship">Fellowships & Scholarships</option> | |
| <option value="accelerator">Accelerators & Incubators</option> | |
| <option value="volunteer">Volunteer or Service Projects</option> | |
| <option value="media">Podcasts & Video Series</option> | |
| <option value="publication">Newsletters & Blogs</option> | |
| <option value="opensource">Open Source Projects</option> | |
| <option value="virtual">Webinars & Virtual Summits</option> | |
| <option value="platform">Hackathon Platforms</option> | |
| <option value="forum">Community Forums & Chat Channels</option> | |
| <option value="nonprofit">Nonprofit Drives</option> | |
| <option value="diversity">Diversity & Inclusion Initiatives</option> | |
| <option value="impact">Environmental or Social Impact Programs</option> | |
| </select> | |
| </div> | |
| <div class="flex-1"> | |
| <label class="block text-gray-700 mb-2">Budget</label> | |
| <select class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent filter-budget"> | |
| <option value="all">Any Budget</option> | |
| <option value="0-1">0-1 ETH</option> | |
| <option value="1-5">1-5 ETH</option> | |
| <option value="5-10">5-10 ETH</option> | |
| <option value="10+">10+ ETH</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Sponsor Card 1 --> | |
| <div class="sponsor-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300" data-category="event" data-budget="5-10"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Web3 Conference" class="w-full h-full object-cover"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> | |
| <div class="text-white font-bold">Web3 Conference Needs Speakers</div> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div> | |
| <h3 class="text-xl font-bold text-gray-800">ETHGlobal Hackathon</h3> | |
| <div> | |
| <span class="badge bg-primary/20 text-primary font-semibold px-3 py-1 rounded-full text-xs shadow-sm">Event</span> | |
| </div> | |
| </div> | |
| <span class="bg-primary/10 text-primary text-sm px-3 py-1 rounded-full">2 Days Left</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">Seeking sponsors for our upcoming hackathon with 500+ expected participants.</p> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-sm text-gray-500 mb-1"> | |
| <span>Budget:</span> | |
| <div class="text-right"> | |
| <div class="font-medium">5-10 ETH</div> | |
| <div class="text-xs">(~ $15k-30k)</div> | |
| <div class="text-xs text-primary">Also accepts: USDT, USDC, SOL</div> | |
| </div> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="gradient-bg h-2 rounded-full" style="width: 65%"></div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-1"> | |
| <i class="fas fa-users text-gray-500 text-sm"></i> | |
| <span class="text-gray-500 text-sm">25 Sponsors</span> | |
| </div> | |
| <button class="bg-primary text-white px-4 py-2 rounded-full text-sm font-medium hover:bg-primary/90">Apply Now</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sponsor Card 2 --> | |
| <div class="sponsor-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300" data-category="content" data-budget="1-3"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1579403124614-197f69d8187b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1064&q=80" alt="NFT Project" class="w-full h-full object-cover"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> | |
| <div class="text-white font-bold">NFT Project Marketing</div> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div> | |
| <h3 class="text-xl font-bold text-gray-800">PixelPunks DAO</h3> | |
| <div> | |
| <span class="badge bg-secondary/20 text-secondary font-semibold px-3 py-1 rounded-full text-xs shadow-sm">Content</span> | |
| </div> | |
| </div> | |
| <span class="bg-green-100 text-green-800 text-sm px-3 py-1 rounded-full">New</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">Looking for content creators to promote our new NFT collection launch.</p> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-sm text-gray-500 mb-1"> | |
| <span>Budget:</span> | |
| <div class="text-right"> | |
| <div class="font-medium">1-3 ETH</div> | |
| <div class="text-xs">(~ $3k-9k)</div> | |
| <div class="text-xs text-primary">Also accepts: USDT, USDC</div> | |
| </div> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="gradient-bg h-2 rounded-full" style="width: 30%"></div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-1"> | |
| <i class="fas fa-users text-gray-500 text-sm"></i> | |
| <span class="text-gray-500 text-sm">8 Sponsors</span> | |
| </div> | |
| <button class="bg-primary text-white px-4 py-2 rounded-full text-sm font-medium hover:bg-primary/90">Apply Now</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sponsor Card 3 --> | |
| <div class="sponsor-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300" data-category="integration" data-budget="10+"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1626785774573-4b799315345d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1171&q=80" alt="DeFi Project" class="w-full h-full object-cover"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> | |
| <div class="text-white font-bold">DeFi Protocol Integration</div> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div> | |
| <h3 class="text-xl font-bold text-gray-800">LiquidSwap</h3> | |
| <div> | |
| <span class="badge bg-accent/20 text-accent font-semibold px-3 py-1 rounded-full text-xs shadow-sm">Integration</span> | |
| </div> | |
| </div> | |
| <span class="bg-yellow-100 text-yellow-800 text-sm px-3 py-1 rounded-full">Ending Soon</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">Need developers to integrate our liquidity protocol for a 2-week campaign.</p> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-sm text-gray-500 mb-1"> | |
| <span>Budget:</span> | |
| <span class="font-medium">15-20 ETH</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="gradient-bg h-2 rounded-full" style="width: 85%"></div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-1"> | |
| <i class="fas fa-users text-gray-500 text-sm"></i> | |
| <span class="text-gray-500 text-sm">14 Sponsors</span> | |
| </div> | |
| <button class="bg-primary text-white px-4 py-2 rounded-full text-sm font-medium hover:bg-primary/90">Apply Now</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sponsor Card 4 --> | |
| <div class="sponsor-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300" data-category="community" data-budget="1-5"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1578962852100-9a146d3bb8eb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Community Growth" class="w-full h-full object-cover"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> | |
| <div class="text-white font-bold">Community Growth Campaign</div> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div> | |
| <h3 class="text-xl font-bold text-gray-800">MetaverseDAO</h3> | |
| <div class="text-gray-500"> | |
| <span class="badge bg-purple-200 text-purple-800 px-3 py-1 rounded-full text-xs shadow-sm font-semibold">Community</span> | |
| </div> | |
| </div> | |
| <span class="bg-blue-100 text-blue-800 text-sm px-3 py-1 rounded-full">Featured</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">3 week campaign to grow our community through engagement activities.</p> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-sm text-gray-500 mb-1"> | |
| <span>Budget:</span> | |
| <span class="font-medium">3-5 ETH</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="gradient-bg h-2 rounded-full" style="width: 45%"></div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-1"> | |
| <i class="fas fa-users text-gray-500 text-sm"></i> | |
| <span class="text-gray-500 text-sm">12 Sponsors</span> | |
| </div> | |
| <button class="bg-primary text-white px-4 py-2 rounded-full text-sm font-medium hover:bg-primary/90">Apply Now</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <button class="border-2 border-primary text-primary px-6 py-3 rounded-full font-bold hover:bg-primary hover:text-white transition">View All Opportunities</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Benefits Section --> | |
| <section class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-6">Why Choose Web3QuickSponsor?</h2> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="gradient-bg p-3 rounded-full mr-4 text-white"> | |
| <i class="fas fa-bolt"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Fast Matching</h3> | |
| <p class="text-gray-600">Our algorithm connects you with the most relevant sponsors in minutes, not weeks.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="gradient-bg p-3 rounded-full mr-4 text-white"> | |
| <i class="fas fa-file-contract"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Smart Contract Escrow</h3> | |
| <p class="text-gray-600">All funds are held in escrow and released automatically when conditions are met.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="gradient-bg p-3 rounded-full mr-4 text-white"> | |
| <i class="fas fa-users"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Verified Network</h3> | |
| <p class="text-gray-600">Every sponsor and project is vetted to ensure quality connections.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 bg-white p-8 rounded-xl shadow-md"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-6">Find Your Perfect Sponsorship Match</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-gray-700 mb-2">I'm looking for sponsorship for...</label> | |
| <select class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| <option value="all">All Categories</option> | |
| <option value="conference">Conferences & Summits</option> | |
| <option value="hackathon">Hackathons</option> | |
| <option value="workshop">Workshops</option> | |
| <option value="meetup">Meetups & Community Gatherings</option> | |
| <option value="webinar">Webinars & Online Events</option> | |
| <option value="fellowship">Fellowships & Scholarships</option> | |
| <option value="accelerator">Accelerators & Incubators</option> | |
| <option value="volunteer">Volunteer or Service Projects</option> | |
| <option value="media">Podcasts & Video Series</option> | |
| <option value="publication">Newsletters & Blogs</option> | |
| <option value="opensource">Open Source Projects</option> | |
| <option value="virtual">Webinars & Virtual Summits</option> | |
| <option value="platform">Hackathon Platforms</option> | |
| <option value="forum">Community Forums & Chat Channels</option> | |
| <option value="nonprofit">Nonprofit Drives</option> | |
| <option value="diversity">Diversity & Inclusion Initiatives</option> | |
| <option value="impact">Environmental or Social Impact Programs</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Budget Range (ETH)</label> | |
| <div class="flex space-x-4"> | |
| <select class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| <option>Minimum</option> | |
| <option>0.1 ETH</option> | |
| <option>0.5 ETH</option> | |
| <option>1 ETH</option> | |
| <option>5 ETH</option> | |
| <option>10+ ETH</option> | |
| </select> | |
| <select class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| <option>Maximum</option> | |
| <option>0.5 ETH</option> | |
| <option>1 ETH</option> | |
| <option>5 ETH</option> | |
| <option>10 ETH</option> | |
| <option>10+ ETH</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Timeframe</label> | |
| <select class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| <option>Select One</option> | |
| <option>1-7 days</option> | |
| <option>1-2 weeks</option> | |
| <option>2-4 weeks</option> | |
| <option>1-3 months</option> | |
| </select> | |
| </div> | |
| <button class="w-full gradient-bg text-white py-3 rounded-lg font-bold mt-4 hover:opacity-90 transition">Find Sponsors Now</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section id="testimonials" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">Success Stories</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Hear from projects and sponsors who found perfect matches</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-50 p-8 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full overflow-hidden mr-4"> | |
| <img src="https://randomuser.me/api/portraits/women/81.jpg" alt="Sarah K." class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Sarah K.</h4> | |
| <div class="text-primary text-sm">DAO Community Manager</div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-4">"Found three sponsors for our community event within 24 hours. The escrow system gave us peace of mind."</p> | |
| <div class="flex"> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-8 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full overflow-hidden mr-4"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael T." class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Michael T.</h4> | |
| <div class="text-primary text-sm">NFT Project Founder</div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-4">"As a sponsor, I love being able to support multiple small projects without long-term commitments."</p> | |
| <div class="flex"> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-8 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full overflow-hidden mr-4"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Priya L." class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Priya L.</h4> | |
| <div class="text-primary text-sm">Web3 Content Creator</div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-4">"Secured sponsorship for 10 videos in different niches. The platform made it easy to connect with relevant brands."</p> | |
| <div class="flex"> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <i class="fas fa-star-half-alt text-yellow-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="gradient-bg text-white py-16"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl font-bold mb-6">Ready to Find Your Next Short-Term Sponsor?</h2> | |
| <p class="text-xl opacity-90 max-w-2xl mx-auto mb-8">Join hundreds of Web3 projects and sponsors already benefiting from quick, transparent partnerships.</p> | |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6"> | |
| <button class="bg-white text-primary px-8 py-3 rounded-full font-bold hover:bg-gray-100 transition">Get Started for Free</button> | |
| <button class="border-2 border-white px-8 py-3 rounded-full font-bold hover:bg-white hover:text-primary transition">Schedule a Demo</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ Section --> | |
| <section id="faq" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">Frequently Asked Questions</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Everything you need to know about short-term sponsorships in Web3</p> | |
| </div> | |
| <div class="max-w-3xl mx-auto"> | |
| <div class="border-b border-gray-200 py-4"> | |
| <button class="flex justify-between items-center w-full text-left font-medium text-gray-800"> | |
| <span>How do short-term sponsorships work in Web3?</span> | |
| <i class="fas fa-chevron-down text-gray-500 transition-transform duration-300"></i> | |
| </button> | |
| <div class="mt-2 text-gray-600"> | |
| Short-term sponsorships in Web3 typically involve smart contract agreements where sponsors allocate funds for specific, time-bound initiatives (1 day to 3 months). Funds are held in escrow and released automatically when predefined milestones are met. | |
| </div> | |
| </div> | |
| <div class="border-b border-gray-200 py-4"> | |
| <button class="flex justify-between items-center w-full text-left font-medium text-gray-800"> | |
| <span>What types of sponsorships are available?</span> | |
| <i class="fas fa-chevron-down text-gray-500 transition-transform duration-300"></i> | |
| </button> | |
| <div class="mt-2 text-gray-600"> | |
| Common types include event sponsorships, content creation sponsorships, community engagement campaigns, hackathon prizes, protocol integrations, and DAO initiatives. Most last between 1-4 weeks. | |
| </div> | |
| </div> | |
| <div class="border-b border-gray-200 py-4"> | |
| <button class="flex justify-between items-center w-full text-left font-medium text-gray-800"> | |
| <span>How are payments handled?</span> | |
| <i class="fas fa-chevron-down text-gray-500 transition-transform duration-300"></i> | |
| </button> | |
| <div class="mt-2 text-gray-600"> | |
| All payments are processed through smart contracts. Sponsors can deposit funds in ETH, USDT, USDC, SOL, TON or EUR (via stablecoin conversion). Funds are held in escrow and released automatically when conditions are met (or returned to sponsors if not). Conversion rates are calculated at time of deposit using Chainlink oracles. | |
| </div> | |
| </div> | |
| <div class="border-b border-gray-200 py-4"> | |
| <button class="flex justify-between items-center w-full text-left font-medium text-gray-800"> | |
| <span>What fees do you charge?</span> | |
| <i class="fas fa-chevron-down text-gray-500 transition-transform duration-300"></i> | |
| </button> | |
| <div class="mt-2 text-gray-600"> | |
| We charge a 5% platform fee on successfully completed sponsorships. There are no upfront costs to list opportunities or browse sponsors. | |
| </div> | |
| </div> | |
| <div class="border-b border-gray-200 py-4"> | |
| <button class="flex justify-between items-center w-full text-left font-medium text-gray-800"> | |
| <span>How do you verify sponsors and projects?</span> | |
| <i class="fas fa-chevron-down text-gray-500 transition-transform duration-300"></i> | |
| </button> | |
| <div class="mt-2 text-gray-600"> | |
| All participants undergo a verification process that includes wallet authentication, social profile verification, and in some cases KYC for larger sponsorship amounts. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-dark text-gray-300 pt-16 pb-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-12"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-6"> | |
| <i class="fas fa-handshake text-primary text-2xl"></i> | |
| <h3 class="text-xl font-bold text-white">Web3<span class="text-primary">QuickSponsor</span></h3> | |
| </div> | |
| <p class="mb-6">The leading platform for short-term sponsorships in the Web3 ecosystem.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-primary transition"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-primary transition"><i class="fab fa-discord"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-primary transition"><i class="fab fa-telegram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-primary transition"><i class="fab fa-github"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-bold mb-6">For Projects</h4> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="hover:text-primary transition">Find Sponsors</a></li> | |
| <li><a href="#" class="hover:text-primary transition">Create Profile</a></li> | |
| <li><a href="#" class="hover:text-primary transition">Success Stories</a></li> | |
| <li><a href="#" class="hover:text-primary transition">Project Guidelines</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-bold mb-6">For Sponsors</h4> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="hover:text-primary transition">Browse Projects</a></li> | |
| <li><a href="#" class="hover:text-primary transition">Become a Sponsor</a></li> | |
| <li><a href="#" class="hover:text-primary transition">Sponsorship ROI</a></li> | |
| <li><a href="#" class="hover:text-primary transition">Sponsor Resources</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-bold mb-6">Resources</h4> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="hover:text-primary transition">Blog</a></li> | |
| <li><a href="#" class="hover:text-primary transition">Documentation</a></li> | |
| <li><a href="#" class="hover:text-primary transition">Smart Contract Overview</a></li> | |
| <li><a href="#" class="hover:text-primary transition">Contact Support</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0">© 2023 Web3QuickSponsor. All rights reserved.</div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="hover:text-primary transition">Privacy Policy</a> | |
| <a href="#" class="hover:text-primary transition">Terms of Service</a> | |
| <a href="#" class="hover:text-primary transition">Cookie Policy</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Filter functionality | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const filterCategory = document.querySelector('.filter-category'); | |
| const filterBudget = document.querySelector('.filter-budget'); | |
| [filterCategory, filterBudget].forEach(filter => { | |
| filter.addEventListener('change', applyFilters); | |
| }); | |
| function applyFilters() { | |
| const selectedCategory = filterCategory.value; | |
| const selectedBudget = filterBudget.value; | |
| document.querySelectorAll('.sponsor-card').forEach(card => { | |
| const cardCategory = card.dataset.category; | |
| const cardBudget = card.dataset.budget; | |
| const categoryMatch = selectedCategory === 'all' || cardCategory === selectedCategory; | |
| const budgetMatch = selectedBudget === 'all' || | |
| (selectedBudget === '10+' && cardBudget === '10+') || | |
| (selectedBudget === cardBudget && selectedBudget !== '10+'); | |
| if (categoryMatch && budgetMatch) { | |
| card.style.display = 'block'; | |
| } else { | |
| card.style.display = 'none'; | |
| } | |
| }); | |
| } | |
| }); | |
| // Dark mode toggle | |
| const themeToggle = document.getElementById('theme-toggle'); | |
| const sunIcon = themeToggle.querySelector('.fa-sun'); | |
| const moonIcon = themeToggle.querySelector('.fa-moon'); | |
| if (localStorage.getItem('theme') === 'light' || | |
| (window.matchMedia('(prefers-color-scheme: light)').matches && !localStorage.getItem('theme'))) { | |
| document.documentElement.setAttribute('data-theme', 'light'); | |
| moonIcon.classList.add('hidden'); | |
| sunIcon.classList.remove('hidden'); | |
| } | |
| themeToggle.addEventListener('click', () => { | |
| if (document.documentElement.getAttribute('data-theme') === 'light') { | |
| document.documentElement.setAttribute('data-theme', 'dark'); | |
| localStorage.setItem('theme', 'dark'); | |
| moonIcon.classList.remove('hidden'); | |
| sunIcon.classList.add('hidden'); | |
| } else { | |
| document.documentElement.setAttribute('data-theme', 'light'); | |
| localStorage.setItem('theme', 'light'); | |
| moonIcon.classList.add('hidden'); | |
| sunIcon.classList.remove('hidden'); | |
| } | |
| }); | |
| // Simple FAQ toggle functionality | |
| document.querySelectorAll('#faq button').forEach(button => { | |
| button.addEventListener('click', () => { | |
| const answer = button.nextElementSibling; | |
| const icon = button.querySelector('i'); | |
| if(answer.style.display === 'none' || !answer.style.display) { | |
| answer.style.display = 'block'; | |
| icon.classList.add('rotate-180'); | |
| } else { | |
| answer.style.display = 'none'; | |
| icon.classList.remove('rotate-180'); | |
| } | |
| }); | |
| }); | |
| // Wallet connection simulation | |
| document.querySelector('.wallet-connect-btn').addEventListener('click', function() { | |
| alert('🔗 Wallet connection modal would appear here in a live implementation with Web3.js or Ethers.js'); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=web3district/w3dshop" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |