| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Web3 Affiliate Engine | Next-Gen Affiliate Marketing</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"> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap'); |
| |
| body { |
| font-family: 'Space Grotesk', sans-serif; |
| background-color: #0a0b0e; |
| color: #e2e8f0; |
| scroll-behavior: smooth; |
| } |
| |
| .gradient-text { |
| background: linear-gradient(90deg, #d946ef, #a855f7, #ec4899); |
| -webkit-background-clip: text; |
| background-clip: text; |
| color: transparent; |
| } |
| |
| .hero-gradient { |
| background: radial-gradient(circle at 10% 20%, rgba(59, 130, 246, 0.15) 0%, rgba(139, 92, 246, 0.1) 50%, rgba(17, 24, 39, 0) 70%); |
| } |
| |
| .card-glow:hover { |
| box-shadow: 0 0 25px rgba(59, 130, 246, 0.3); |
| } |
| |
| .feature-icon { |
| transition: all 0.3s ease; |
| } |
| |
| .feature-card:hover .feature-icon { |
| transform: scale(1.1) rotate(5deg); |
| } |
| |
| .scroll-indicator { |
| animation: bounce 2s infinite; |
| } |
| |
| @keyframes bounce { |
| 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} |
| 40% {transform: translateY(-20px);} |
| 60% {transform: translateY(-10px);} |
| } |
| |
| .pulse { |
| animation: pulse 2s infinite; |
| } |
| |
| @keyframes pulse { |
| 0% {box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);} |
| 70% {box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);} |
| 100% {box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);} |
| } |
| </style> |
| </head> |
| <body> |
| |
| <nav class="fixed w-full bg-gray-900/80 backdrop-blur-md z-50 border-b border-gray-800"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex justify-between h-16 items-center"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 flex items-center"> |
| <span class="text-2xl font-bold gradient-text">Web3Affiliate</span> |
| </div> |
| </div> |
| <div class="hidden md:block"> |
| <div class="ml-10 flex items-center space-x-4"> |
| <a href="#overview" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition">Overview</a> |
| <a href="#solution" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition">Solution</a> |
| <a href="#works" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition">How It Works</a> |
| <a href="#contact" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition">Contact</a> |
| </div> |
| </div> |
| <div class="md:hidden"> |
| <button id="menu-toggle" class="text-gray-300 hover:text-white focus:outline-none"> |
| <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> |
| </svg> |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="mobile-menu" class="md:hidden hidden bg-gray-900/95"> |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> |
| <a href="#overview" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium transition">Overview</a> |
| <a href="#solution" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium transition">Solution</a> |
| <a href="#works" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium transition">How It Works</a> |
| <a href="#contact" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium transition">Contact</a> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <section class="hero-gradient pt-32 pb-20 px-4 sm:px-6 lg:px-8"> |
| <div class="max-w-7xl mx-auto"> |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-10 md:mb-0"> |
| <h1 class="text-4xl md:text-6xl font-bold leading-tight mb-6"> |
| <span class="gradient-text">Upgrade</span> Your Affiliate Traffic |
| </h1> |
| <p class="text-xl text-gray-300 mb-8"> |
| Transform traditional affiliate marketing into engaged, gamified, and data-enriched user flows through Web3 mechanics and AI optimization. |
| </p> |
| <div class="flex flex-col sm:flex-row gap-4"> |
| <a href="#contact" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300 text-center"> |
| Partner With Us |
| </a> |
| <a href="#solution" class="border border-indigo-500 text-indigo-300 hover:bg-indigo-900/30 hover:text-white font-bold py-3 px-6 rounded-lg transition duration-300 text-center"> |
| Learn More |
| </a> |
| </div> |
| </div> |
| <div class="md:w-1/2 relative"> |
| <div class="relative max-w-md mx-auto"> |
| <div class="absolute -inset-4 bg-gradient-to-r from-blue-600 to-purple-600 rounded-xl blur opacity-75"></div> |
| <div class="relative bg-gray-900 rounded-xl p-6 border border-gray-800"> |
| <div class="flex items-center mb-4"> |
| <div class="h-3 w-3 rounded-full bg-red-500 mr-2"></div> |
| <div class="h-3 w-3 rounded-full bg-yellow-500 mr-2"></div> |
| <div class="h-3 w-3 rounded-full bg-green-500"></div> |
| </div> |
| <div class="bg-gray-800 rounded-lg p-4 mb-4"> |
| <div class="flex items-center mb-2"> |
| <div class="w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center mr-3"> |
| <i class="fas fa-user text-white"></i> |
| </div> |
| <div> |
| <div class="text-sm font-medium text-white">User Dashboard</div> |
| <div class="text-xs text-gray-400">Connected Wallet: 0x7f...3a4b</div> |
| </div> |
| </div> |
| <div class="text-sm text-gray-300 mb-3"> |
| Complete quests to earn rewards! |
| </div> |
| <div class="grid grid-cols-3 gap-2 mb-3"> |
| <div class="bg-gray-700 rounded p-2 text-center"> |
| <i class="fas fa-gem text-yellow-400 mb-1"></i> |
| <div class="text-xs">500 XP</div> |
| </div> |
| <div class="bg-gray-700 rounded p-2 text-center"> |
| <i class="fas fa-trophy text-blue-400 mb-1"></i> |
| <div class="text-xs">Level 3</div> |
| </div> |
| <div class="bg-gray-700 rounded p-2 text-center"> |
| <i class="fas fa-coins text-purple-400 mb-1"></i> |
| <div class="text-xs">3 NFTs</div> |
| </div> |
| </div> |
| <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 rounded text-sm font-medium transition"> |
| Claim Your NFT Reward |
| </button> |
| </div> |
| <div class="text-xs text-gray-500 text-center"> |
| Powered by Web3 Affiliate Engine |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="text-center mt-16 scroll-indicator"> |
| <a href="#overview" class="text-gray-400 hover:text-white"> |
| <i class="fas fa-chevron-down text-2xl"></i> |
| </a> |
| </div> |
| </section> |
|
|
| |
| <section id="overview" class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-900"> |
| <div class="max-w-7xl mx-auto"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-4"> |
| <span class="gradient-text">Web3 Affiliate Engine</span> Overview |
| </h2> |
| <p class="text-xl text-gray-400 max-w-3xl mx-auto"> |
| A next-generation system that transforms traditional affiliate marketing traffic into engaged, gamified, and data-enriched user flows. |
| </p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| <div class="bg-gray-800 rounded-xl p-8 border border-gray-700 card-glow transition"> |
| <div class="w-14 h-14 rounded-full bg-blue-900/30 flex items-center justify-center mb-6"> |
| <i class="fas fa-network-wired text-blue-400 text-2xl feature-icon"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">For Affiliate Networks</h3> |
| <p class="text-gray-400"> |
| Media buyers looking to increase ROI with Web3 gamification and AI-powered optimization. |
| </p> |
| </div> |
| |
| <div class="bg-gray-800 rounded-xl p-8 border border-gray-700 card-glow transition"> |
| <div class="w-14 h-14 rounded-full bg-purple-900/30 flex items-center justify-center mb-6"> |
| <i class="fas fa-gamepad text-purple-400 text-2xl feature-icon"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">For iGaming & E-commerce</h3> |
| <p class="text-gray-400"> |
| Platforms seeking higher engagement and retention through NFT rewards and quest systems. |
| </p> |
| </div> |
| |
| <div class="bg-gray-800 rounded-xl p-8 border border-gray-700 card-glow transition"> |
| <div class="w-14 h-14 rounded-full bg-pink-900/30 flex items-center justify-center mb-6"> |
| <i class="fas fa-users text-pink-400 text-2xl feature-icon"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">For Web3 Projects</h3> |
| <p class="text-gray-400"> |
| User acquisition with real retention through on-chain loyalty programs and token incentives. |
| </p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-900 border-t border-gray-800"> |
| <div class="max-w-7xl mx-auto"> |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-6"> |
| The <span class="gradient-text">Problem</span> We Solve |
| </h2> |
| <p class="text-gray-400 mb-6"> |
| Traditional affiliate marketing faces significant challenges in today's competitive landscape: |
| </p> |
| <ul class="space-y-4"> |
| <li class="flex items-start"> |
| <div class="flex-shrink-0 mt-1"> |
| <div class="w-5 h-5 rounded-full bg-red-500 flex items-center justify-center"> |
| <i class="fas fa-times text-white text-xs"></i> |
| </div> |
| </div> |
| <p class="ml-3 text-gray-300"> |
| <span class="font-medium">Shallow Engagement</span> - Users complete one action and leave with no reason to return |
| </p> |
| </li> |
| <li class="flex items-start"> |
| <div class="flex-shrink-0 mt-1"> |
| <div class="w-5 h-5 rounded-full bg-red-500 flex items-center justify-center"> |
| <i class="fas fa-times text-white text-xs"></i> |
| </div> |
| </div> |
| <p class="ml-3 text-gray-300"> |
| <span class="font-medium">Low Retention</span> - 80-90% of acquired users never engage again after initial conversion |
| </p> |
| </li> |
| <li class="flex items-start"> |
| <div class="flex-shrink-0 mt-1"> |
| <div class="w-5 h-5 rounded-full bg-red-500 flex items-center justify-center"> |
| <i class="fas fa-times text-white text-xs"></i> |
| </div> |
| </div> |
| <p class="ml-3 text-gray-300"> |
| <span class="font-medium">Limited Data</span> - Traditional tracking provides minimal insights into user behavior |
| </p> |
| </li> |
| <li class="flex items-start"> |
| <div class="flex-shrink-0 mt-1"> |
| <div class="w-5 h-5 rounded-full bg-red-500 flex items-center justify-center"> |
| <i class="fas fa-times text-white text-xs"></i> |
| </div> |
| </div> |
| <p class="ml-3 text-gray-300"> |
| <span class="font-medium">High Competition</span> - Same offers and landing pages lead to diminishing returns |
| </p> |
| </li> |
| </ul> |
| </div> |
| <div class="md:w-1/2"> |
| <div class="bg-gray-800 rounded-xl p-6 border border-gray-700"> |
| <div class="flex items-center mb-4"> |
| <div class="w-10 h-10 rounded-full bg-red-500 flex items-center justify-center mr-3"> |
| <i class="fas fa-chart-line text-white"></i> |
| </div> |
| <div> |
| <h3 class="text-lg font-bold">Traditional Affiliate Metrics</h3> |
| <p class="text-sm text-gray-400">Typical performance without Web3 enhancements</p> |
| </div> |
| </div> |
| <div class="space-y-4"> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="text-sm font-medium text-gray-300">Conversion Rate</span> |
| <span class="text-sm font-medium text-gray-400">1.2%</span> |
| </div> |
| <div class="w-full bg-gray-700 rounded-full h-2.5"> |
| <div class="bg-red-500 h-2.5 rounded-full" style="width: 12%"></div> |
| </div> |
| </div> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="text-sm font-medium text-gray-300">Retention (30d)</span> |
| <span class="text-sm font-medium text-gray-400">8%</span> |
| </div> |
| <div class="w-full bg-gray-700 rounded-full h-2.5"> |
| <div class="bg-red-500 h-2.5 rounded-full" style="width: 8%"></div> |
| </div> |
| </div> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="text-sm font-medium text-gray-300">LTV Increase</span> |
| <span class="text-sm font-medium text-gray-400">0%</span> |
| </div> |
| <div class="w-full bg-gray-700 rounded-full h-2.5"> |
| <div class="bg-red-500 h-2.5 rounded-full" style="width: 0%"></div> |
| </div> |
| </div> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="text-sm font-medium text-gray-300">Referral Rate</span> |
| <span class="text-sm font-medium text-gray-400">0.5%</span> |
| </div> |
| <div class="w-full bg-gray-700 rounded-full h-2.5"> |
| <div class="bg-red-500 h-2.5 rounded-full" style="width: 5%"></div> |
| </div> |
| </div> |
| </div> |
| <div class="mt-6 p-4 bg-gray-900 rounded-lg"> |
| <p class="text-sm text-center text-gray-400"> |
| "Traditional methods hit diminishing returns as competition increases" |
| </p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="solution" class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-900 border-t border-gray-800"> |
| <div class="max-w-7xl mx-auto"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-4"> |
| Our <span class="gradient-text">Web3 + AI</span> Solution |
| </h2> |
| <p class="text-xl text-gray-400 max-w-3xl mx-auto"> |
| Three powerful layers that transform your affiliate traffic into engaged, high-value users |
| </p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16"> |
| <div class="bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl p-8 border border-gray-700 card-glow transition"> |
| <div class="w-16 h-16 rounded-full bg-blue-900/30 flex items-center justify-center mb-6 mx-auto"> |
| <i class="fas fa-trophy text-blue-400 text-3xl feature-icon"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3 text-center">Gamified Experience</h3> |
| <ul class="space-y-3 text-gray-400"> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-blue-400 mt-1 mr-2"></i> |
| <span>On-chain & off-chain quest systems</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-blue-400 mt-1 mr-2"></i> |
| <span>NFT rewards & achievement tiers</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-blue-400 mt-1 mr-2"></i> |
| <span>Tokenized loyalty programs</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-blue-400 mt-1 mr-2"></i> |
| <span>Referral bounties with crypto payouts</span> |
| </li> |
| </ul> |
| </div> |
| |
| <div class="bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl p-8 border border-gray-700 card-glow transition"> |
| <div class="w-16 h-16 rounded-full bg-purple-900/30 flex items-center justify-center mb-6 mx-auto"> |
| <i class="fas fa-robot text-purple-400 text-3xl feature-icon"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3 text-center">AI Optimization</h3> |
| <ul class="space-y-3 text-gray-400"> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-purple-400 mt-1 mr-2"></i> |
| <span>Dynamic offer personalization</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-purple-400 mt-1 mr-2"></i> |
| <span>Behavioral segmentation</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-purple-400 mt-1 mr-2"></i> |
| <span>Conversion path prediction</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-purple-400 mt-1 mr-2"></i> |
| <span>Smart retargeting flows</span> |
| </li> |
| </ul> |
| </div> |
| |
| <div class="bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl p-8 border border-gray-700 card-glow transition"> |
| <div class="w-16 h-16 rounded-full bg-pink-900/30 flex items-center justify-center mb-6 mx-auto"> |
| <i class="fas fa-database text-pink-400 text-3xl feature-icon"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3 text-center">Advanced Analytics</h3> |
| <ul class="space-y-3 text-gray-400"> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-pink-400 mt-1 mr-2"></i> |
| <span>Wallet behavior mapping</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-pink-400 mt-1 mr-2"></i> |
| <span>Traffic source ROI analysis</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-pink-400 mt-1 mr-2"></i> |
| <span>Multi-source attribution</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-pink-400 mt-1 mr-2"></i> |
| <span>Real-time performance dashboards</span> |
| </li> |
| </ul> |
| </div> |
| </div> |
| |
| <div class="bg-gray-800 rounded-xl p-8 border border-gray-700"> |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> |
| <h3 class="text-2xl font-bold mb-4">Performance Comparison</h3> |
| <p class="text-gray-400 mb-6"> |
| See how Web3 Affiliate Engine transforms key metrics compared to traditional approaches: |
| </p> |
| <div class="space-y-4"> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="text-sm font-medium text-gray-300">Conversion Rate</span> |
| <span class="text-sm font-medium text-blue-400">+320%</span> |
| </div> |
| <div class="w-full bg-gray-700 rounded-full h-2.5"> |
| <div class="bg-gradient-to-r from-blue-500 to-purple-500 h-2.5 rounded-full" style="width: 80%"></div> |
| </div> |
| </div> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="text-sm font-medium text-gray-300">Retention (30d)</span> |
| <span class="text-sm font-medium text-blue-400">+525%</span> |
| </div> |
| <div class="w-full bg-gray-700 rounded-full h-2.5"> |
| <div class="bg-gradient-to-r from-blue-500 to-purple-500 h-2.5 rounded-full" style="width: 50%"></div> |
| </div> |
| </div> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="text-sm font-medium text-gray-300">LTV Increase</span> |
| <span class="text-sm font-medium text-blue-400">+600%</span> |
| </div> |
| <div class="w-full bg-gray-700 rounded-full h-2.5"> |
| <div class="bg-gradient-to-r from-blue-500 to-purple-500 h-2.5 rounded-full" style="width: 60%"></div> |
| </div> |
| </div> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="text-sm font-medium text-gray-300">Referral Rate</span> |
| <span class="text-sm font-medium text-blue-400">+900%</span> |
| </div> |
| <div class="w-full bg-gray-700 rounded-full h-2.5"> |
| <div class="bg-gradient-to-r from-blue-500 to-purple-500 h-2.5 rounded-full" style="width: 45%"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="md:w-1/2"> |
| <div class="bg-gray-900 rounded-lg p-6 border border-gray-700"> |
| <div class="flex items-center mb-4"> |
| <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center mr-3"> |
| <i class="fas fa-chart-pie text-white"></i> |
| </div> |
| <div> |
| <h3 class="text-lg font-bold">Web3 Affiliate Dashboard</h3> |
| <p class="text-sm text-gray-400">Real-time performance metrics</p> |
| </div> |
| </div> |
| <div class="grid grid-cols-2 gap-4 mb-4"> |
| <div class="bg-gray-800 rounded-lg p-3 text-center"> |
| <div class="text-2xl font-bold text-blue-400">5.1%</div> |
| <div class="text-xs text-gray-400">Conversion</div> |
| </div> |
| <div class="bg-gray-800 rounded-lg p-3 text-center"> |
| <div class="text-2xl font-bold text-purple-400">42%</div> |
| <div class="text-xs text-gray-400">Retention</div> |
| </div> |
| <div class="bg-gray-800 rounded-lg p-3 text-center"> |
| <div class="text-2xl font-bold text-pink-400">4.5x</div> |
| <div class="text-xs text-gray-400">LTV</div> |
| </div> |
| <div class="bg-gray-800 rounded-lg p-3 text-center"> |
| <div class="text-2xl font-bold text-green-400">4.5%</div> |
| <div class="text-xs text-gray-400">Referrals</div> |
| </div> |
| </div> |
| <div class="h-40 bg-gray-800 rounded-lg mb-3 flex items-center justify-center"> |
| <i class="fas fa-chart-line text-gray-600 text-4xl"></i> |
| </div> |
| <div class="text-xs text-gray-500 text-center"> |
| Updated in real-time from on-chain and off-chain data |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="works" class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-900 border-t border-gray-800"> |
| <div class="max-w-7xl mx-auto"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-4"> |
| How <span class="gradient-text">Web3 Affiliate Engine</span> Works |
| </h2> |
| <p class="text-xl text-gray-400 max-w-3xl mx-auto"> |
| A seamless integration that transforms your existing traffic into high-value Web3 users |
| </p> |
| </div> |
| |
| <div class="relative"> |
| |
| <div class="hidden md:block absolute left-1/2 h-full w-1 bg-gradient-to-b from-blue-500 to-purple-500 -ml-0.5"></div> |
| |
| |
| <div class="space-y-8 md:space-y-16"> |
| |
| <div class="relative flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 md:pr-8 mb-6 md:mb-0"> |
| <div class="bg-gray-800 rounded-xl p-6 border border-gray-700"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-blue-500/20 flex items-center justify-center mr-4"> |
| <i class="fas fa-mouse-pointer text-blue-400 text-xl"></i> |
| </div> |
| <h3 class="text-xl font-bold">Traffic Landing</h3> |
| </div> |
| <p class="text-gray-400"> |
| Affiliate traffic lands on a gamified Web3 landing layer instead of a traditional offer page. Users are immediately engaged with quests and rewards. |
| </p> |
| </div> |
| </div> |
| <div class="md:w-1/2 md:pl-8"> |
| <div class="flex justify-center md:justify-start"> |
| <div class="w-16 h-16 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold text-xl border-4 border-gray-900 z-10"> |
| 1 |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="relative flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 md:pr-8 order-2 md:order-1"> |
| <div class="flex justify-center md:justify-end"> |
| <div class="w-16 h-16 rounded-full bg-purple-500 flex items-center justify-center text-white font-bold text-xl border-4 border-gray-900 z-10"> |
| 2 |
| </div> |
| </div> |
| </div> |
| <div class="md:w-1/2 md:pl-8 mb-6 md:mb-0 order-1 md:order-2"> |
| <div class="bg-gray-800 rounded-xl p-6 border border-gray-700"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-purple-500/20 flex items-center justify-center mr-4"> |
| <i class="fas fa-tasks text-purple-400 text-xl"></i> |
| </div> |
| <h3 class="text-xl font-bold">Quest Completion</h3> |
| </div> |
| <p class="text-gray-400"> |
| Users complete actions like registration, KYC, or first deposit while earning XP, tokens, or NFT rewards. AI evaluates user quality in real-time. |
| </p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="relative flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 md:pr-8 mb-6 md:mb-0"> |
| <div class="bg-gray-800 rounded-xl p-6 border border-gray-700"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-pink-500/20 flex items-center justify-center mr-4"> |
| <i class="fas fa-robot text-pink-400 text-xl"></i> |
| </div> |
| <h3 class="text-xl font-bold">AI Optimization</h3> |
| </div> |
| <p class="text-gray-400"> |
| Our system personalizes the user journey, triggers retargeting flows for high-value users, and optimizes conversion paths based on behavioral data. |
| </p> |
| </div> |
| </div> |
| <div class="md:w-1/2 md:pl-8"> |
| <div class="flex justify-center md:justify-start"> |
| <div class="w-16 h-16 rounded-full bg-pink-500 flex items-center justify-center text-white font-bold text-xl border-4 border-gray-900 z-10"> |
| 3 |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="relative flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 md:pr-8 order-2 md:order-1"> |
| <div class="flex justify-center md:justify-end"> |
| <div class="w-16 h-16 rounded-full bg-green-500 flex items-center justify-center text-white font-bold text-xl border-4 border-gray-900 z-10"> |
| 4 |
| </div> |
| </div> |
| </div> |
| <div class="md:w-1/2 md:pl-8 mb-6 md:mb-0 order-1 md:order-2"> |
| <div class="bg-gray-800 rounded-xl p-6 border border-gray-700"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-green-500/20 flex items-center justify-center mr-4"> |
| <i class="fas fa-chart-bar text-green-400 text-xl"></i> |
| </div> |
| <h3 class="text-xl font-bold">Data & Payouts</h3> |
| </div> |
| <p class="text-gray-400"> |
| Partners receive enriched insights, higher LTV users, and automated payouts. Performance data is available in real-time through our dashboard. |
| </p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-900 border-t border-gray-800"> |
| <div class="max-w-7xl mx-auto"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-4"> |
| <span class="gradient-text">Sample Use Case</span>: SBC Summit 2024 |
| </h2> |
| <p class="text-xl text-gray-400 max-w-3xl mx-auto"> |
| How Web3 Affiliate Engine can transform event traffic into engaged communities |
| </p> |
| </div> |
| |
| <div class="bg-gray-800 rounded-xl overflow-hidden border border-gray-700 mb-12"> |
| <div class="flex flex-col md:flex-row"> |
| <div class="md:w-1/2 p-8"> |
| <h3 class="text-2xl font-bold mb-4">Event Activation Flow</h3> |
| <ol class="space-y-4"> |
| <li class="flex items-start"> |
| <div class="flex-shrink-0 mt-1"> |
| <div class="w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center text-white text-xs font-bold">1</div> |
| </div> |
| <p class="ml-3 text-gray-300"> |
| <span class="font-medium">QR Code Scanning</span> - Attendees scan codes throughout the venue to join the Web3 District quest |
| </p> |
| </li> |
| <li class="flex items-start"> |
| <div class="flex-shrink-0 mt-1"> |
| <div class="w-6 h-6 rounded-full bg-purple-500 flex items-center justify-center text-white text-xs font-bold">2</div> |
| </div> |
| <p class="ml-3 text-gray-300"> |
| <span class="font-medium">Quest Completion</span> - Users visit sponsor booths, attend sessions, and network to earn points |
| </p> |
| </li> |
| <li class="flex items-start"> |
| <div class="flex-shrink-0 mt-1"> |
| <div class="w-6 h-6 rounded-full bg-pink-500 flex items-center justify-center text-white text-xs font-bold">3</div> |
| </div> |
| <p class="ml-3 text-gray-300"> |
| <span class="font-medium">Reward Claim</span> - Earned points can be redeemed for NFTs, token rewards, or exclusive partner deals |
| </p> |
| </li> |
| <li class="flex items-start"> |
| <div class="flex-shrink-0 mt-1"> |
| <div class="w-6 h-6 rounded-full bg-green-500 flex items-center justify-center text-white text-xs font-bold">4</div> |
| </div> |
| <p class="ml-3 text-gray-300"> |
| <span class="font-medium">Post-Event Engagement</span> - Sponsors receive qualified leads and can continue engaging users through the platform |
| </p> |
| </li> |
| </ol> |
| </div> |
| <div class="md:w-1/2 bg-gray-900 p-8 border-t md:border-t-0 md:border-l border-gray-700"> |
| <h3 class="text-2xl font-bold mb-6">Benefits for Sponsors</h3> |
| <div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> |
| <div class="bg-gray-800 rounded-lg p-4"> |
| <div class="w-10 h-10 rounded-full bg-blue-500/20 flex items-center justify-center mb-3"> |
| <i class="fas fa-users text-blue-400"></i> |
| </div> |
| <h4 class="font-bold mb-1">Qualified Leads</h4> |
| <p class="text-sm text-gray-400">Users who complete quests are 5x more likely to convert</p> |
| </div> |
| <div class="bg-gray-800 rounded-lg p-4"> |
| <div class="w-10 h-10 rounded-full bg-purple-500/20 flex items-center justify-center mb-3"> |
| <i class="fas fa-database text-purple-400"></i> |
| </div> |
| <h4 class="font-bold mb-1">Rich Data</h4> |
| <p class="text-sm text-gray-400">Behavioral insights from both physical and digital interactions</p> |
| </div> |
| <div class="bg-gray-800 rounded-lg p-4"> |
| <div class="w-10 h-10 rounded-full bg-pink-500/20 flex items-center justify-center mb-3"> |
| <i class="fas fa-retweet text-pink-400"></i> |
| </div> |
| <h4 class="font-bold mb-1">Ongoing Engagement</h4> |
| <p class="text-sm text-gray-400">Continue the conversation post-event through the platform</p> |
| </div> |
| <div class="bg-gray-800 rounded-lg p-4"> |
| <div class="w-10 h-10 rounded-full bg-green-500/20 flex items-center justify-center mb-3"> |
| <i class="fas fa-chart-pie text-green-400"></i> |
| </div> |
| <h4 class="font-bold mb-1">Measurable ROI</h4> |
| <p class="text-sm text-gray-400">Clear metrics on booth visits, engagements, and conversions</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="text-center"> |
| <h3 class="text-2xl font-bold mb-6">Ready to transform your event or affiliate traffic?</h3> |
| <a href="#contact" class="inline-block bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-bold py-4 px-8 rounded-lg transition duration-300 text-lg"> |
| Get Started Today |
| </a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="contact" class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-900 border-t border-gray-800"> |
| <div class="max-w-7xl mx-auto"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-4"> |
| <span class="gradient-text">Partner</span> With Us |
| </h2> |
| <p class="text-xl text-gray-400 max-w-3xl mx-auto"> |
| We're onboarding affiliate leaders, Web3 founders, and platforms seeking the next frontier of conversion tech. |
| </p> |
| </div> |
| |
| <div class="flex flex-col md:flex-row gap-12"> |
| <div class="md:w-1/2"> |
| <div class="bg-gray-800 rounded-xl p-8 border border-gray-700"> |
| <h3 class="text-2xl font-bold mb-6">Contact Information</h3> |
| <div class="space-y-6"> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 mt-1"> |
| <div class="w-10 h-10 rounded-full bg-blue-500/20 flex items-center justify-center"> |
| <i class="fas fa-envelope text-blue-400"></i> |
| </div> |
| </div> |
| <div class="ml-4"> |
| <h4 class="font-bold text-gray-300">Email Us</h4> |
| <p class="text-gray-400">hello@web3district.xyz</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 mt-1"> |
| <div class="w-10 h-10 rounded-full bg-purple-500/20 flex items-center justify-center"> |
| <i class="fas fa-globe text-purple-400"></i> |
| </div> |
| </div> |
| <div class="ml-4"> |
| <h4 class="font-bold text-gray-300">Visit Website</h4> |
| <p class="text-gray-400">web3district.xyz</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 mt-1"> |
| <div class="w-10 h-10 rounded-full bg-pink-500/20 flex items-center justify-center"> |
| <i class="fab fa-telegram text-pink-400"></i> |
| </div> |
| </div> |
| <div class="ml-4"> |
| <h4 class="font-bold text-gray-300">Telegram</h4> |
| <p class="text-gray-400">@web3affiliate</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 mt-1"> |
| <div class="w-10 h-10 rounded-full bg-green-500/20 flex items-center justify-center"> |
| <i class="fab fa-twitter text-green-400"></i> |
| </div> |
| </div> |
| <div class="ml-4"> |
| <h4 class="font-bold text-gray-300">Twitter</h4> |
| <p class="text-gray-400">@web3affiliate</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="md:w-1/2"> |
| <div class="bg-gray-800 rounded-xl p-8 border border-gray-700"> |
| <h3 class="text-2xl font-bold mb-6">Send Us a Message</h3> |
| <form id="contact-form" class="space-y-6"> |
| <div> |
| <label for="name" class="block text-sm font-medium text-gray-400 mb-1">Your Name</label> |
| <input type="text" id="name" name="name" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" required> |
| </div> |
| <div> |
| <label for="email" class="block text-sm font-medium text-gray-400 mb-1">Email Address</label> |
| <input type="email" id="email" name="email" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" required> |
| </div> |
| <div> |
| <label for="company" class="block text-sm font-medium text-gray-400 mb-1">Company (Optional)</label> |
| <input type="text" id="company" name="company" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"> |
| </div> |
| <div> |
| <label for="message" class="block text-sm font-medium text-gray-400 mb-1">Your Message</label> |
| <textarea id="message" name="message" rows="4" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" required></textarea> |
| </div> |
| <div> |
| <button type="submit" class="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300"> |
| Send Message |
| </button> |
| </div> |
| </form> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="py-12 px-4 sm:px-6 lg:px-8 bg-gray-900 border-t border-gray-800"> |
| <div class="max-w-7xl mx-auto"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="mb-6 md:mb-0"> |
| <span class="text-2xl font-bold gradient-text">Web3Affiliate</span> |
| <p class="text-gray-500 mt-2 text-sm"> |
| Upgrading Affiliate Traffic with Web3 Gamification & AI Insights |
| </p> |
| </div> |
| <div class="flex space-x-6"> |
| <a href="#" class="text-gray-500 hover:text-white transition"> |
| <i class="fab fa-twitter text-xl"></i> |
| </a> |
| <a href="#" class="text-gray-500 hover:text-white transition"> |
| <i class="fab fa-telegram text-xl"></i> |
| </a> |
| <a href="#" class="text-gray-500 hover:text-white transition"> |
| <i class="fab fa-discord text-xl"></i> |
| </a> |
| <a href="#" class="text-gray-500 hover:text-white transition"> |
| <i class="fab fa-linkedin text-xl"></i> |
| </a> |
| </div> |
| </div> |
| <div class="mt-8 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center"> |
| <p class="text-gray-500 text-sm mb-4 md:mb-0"> |
| © 2023 Web3 Affiliate Engine. All rights reserved. |
| </p> |
| <div class="flex space-x-6"> |
| <a href="#" class="text-gray-500 hover:text-white text-sm transition">Privacy Policy</a> |
| <a href="#" class="text-gray-500 hover:text-white text-sm transition">Terms of Service</a> |
| <a href="#" class="text-gray-500 hover:text-white text-sm transition">Cookies</a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| document.getElementById('menu-toggle').addEventListener('click', function() { |
| const menu = document.getElementById('mobile-menu'); |
| menu.classList.toggle('hidden'); |
| }); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function (e) { |
| e.preventDefault(); |
| |
| const targetId = this.getAttribute('href'); |
| const targetElement = document.querySelector(targetId); |
| |
| if (targetElement) { |
| |
| const mobileMenu = document.getElementById('mobile-menu'); |
| if (!mobileMenu.classList.contains('hidden')) { |
| mobileMenu.classList.add('hidden'); |
| } |
| |
| |
| window.scrollTo({ |
| top: targetElement.offsetTop - 80, |
| behavior: 'smooth' |
| }); |
| } |
| }); |
| }); |
| |
| |
| document.getElementById('contact-form').addEventListener('submit', function(e) { |
| e.preventDefault(); |
| |
| |
| const name = document.getElementById('name').value; |
| const email = document.getElementById('email').value; |
| const company = document.getElementById('company').value; |
| const message = document.getElementById('message').value; |
| |
| |
| |
| alert(`Thank you, ${name}! Your message has been received. We'll contact you at ${email} soon.`); |
| |
| |
| this.reset(); |
| }); |
| |
| |
| const observerOptions = { |
| threshold: 0.1, |
| rootMargin: '0px 0px -50px 0px' |
| }; |
| |
| const observer = new IntersectionObserver((entries) => { |
| entries.forEach(entry => { |
| if (entry.isIntersecting) { |
| entry.target.classList.add('animate-fadeIn'); |
| observer.unobserve(entry.target); |
| } |
| }); |
| }, observerOptions); |
| |
| document.querySelectorAll('.feature-card, .card-glow').forEach(card => { |
| observer.observe(card); |
| }); |
| </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/web3-affiliate-engine" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
