Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Web3District Shop | All-in-One Web3 Marketplace</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> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| cyberblue: '#00f5ff', | |
| cyberpurple: '#9d00ff', | |
| cyberpink: '#ff00f5', | |
| cyberdark: '#0f0f1a', | |
| cyberlight: '#e0e0ff', | |
| cybergreen: '#00ff9d', | |
| cyberyellow: '#fff500', | |
| }, | |
| fontFamily: { | |
| sans: ['Inter', 'sans-serif'], | |
| mono: ['Space Mono', 'monospace'], | |
| }, | |
| spacing: { | |
| '18': '4.5rem', | |
| '22': '5.5rem', | |
| '128': '32rem', | |
| '144': '36rem', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap'); | |
| .cyber-gradient { | |
| background: linear-gradient(135deg, #9d00ff 0%, #00f5ff 50%, #ff00f5 100%); | |
| } | |
| .card-hover { | |
| transition: all 0.3s ease; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(157, 0, 255, 0.3); | |
| } | |
| .glow-text { | |
| text-shadow: 0 0 10px rgba(157, 0, 255, 0.7); | |
| } | |
| .cyber-border { | |
| border: 1px solid rgba(157, 0, 255, 0.3); | |
| } | |
| .cyber-border:hover { | |
| border: 1px solid rgba(157, 0, 255, 0.7); | |
| } | |
| .animated-bg { | |
| animation: gradientShift 15s ease infinite; | |
| background-size: 400% 400%; | |
| } | |
| @keyframes gradientShift { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: -2px; | |
| left: 0; | |
| background-color: #9d00ff; | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .search-input:focus { | |
| outline: none; | |
| box-shadow: 0 0 0 2px rgba(157, 0, 255, 0.5); | |
| } | |
| .feature-badge { | |
| transition: all 0.3s ease; | |
| } | |
| .feature-badge:hover { | |
| transform: scale(1.05); | |
| } | |
| .token-icon { | |
| transition: transform 0.3s ease; | |
| } | |
| .token-icon:hover { | |
| transform: rotate(15deg) scale(1.1); | |
| } | |
| .nft-bg-gradient-1 { | |
| background: linear-gradient(135deg, rgba(157, 0, 255, 0.2) 0%, rgba(0, 245, 255, 0.2) 100%); | |
| } | |
| .nft-bg-gradient-2 { | |
| background: linear-gradient(135deg, rgba(0, 245, 255, 0.2) 0%, rgba(255, 0, 245, 0.2) 100%); | |
| } | |
| .nft-bg-gradient-3 { | |
| background: linear-gradient(135deg, rgba(255, 0, 245, 0.2) 0%, rgba(157, 0, 255, 0.2) 100%); | |
| } | |
| .property-bg-gradient-1 { | |
| background: linear-gradient(90deg, rgba(157, 0, 255, 0.2) 0%, rgba(0, 245, 255, 0.2) 100%); | |
| } | |
| .property-bg-gradient-2 { | |
| background: linear-gradient(90deg, rgba(0, 245, 255, 0.2) 0%, rgba(255, 0, 245, 0.2) 100%); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-cyberdark text-cyberlight font-sans min-h-screen"> | |
| <!-- Header/Navbar --> | |
| <header class="sticky top-0 z-50 bg-cyberdark/90 backdrop-blur-md border-b border-cyberpurple/20"> | |
| <div class="container mx-auto px-6 py-4"> | |
| <div class="flex items-center justify-between"> | |
| <!-- Logo --> | |
| <div class="flex items-center space-x-4 mr-8"> | |
| <div class="w-12 h-12 rounded-full cyber-gradient flex items-center justify-center"> | |
| <span class="text-white font-bold text-xl">W3</span> | |
| </div> | |
| <span class="text-2xl font-bold bg-clip-text text-transparent cyber-gradient">Web3District Shop</span> | |
| </div> | |
| <!-- Desktop Navigation --> | |
| <nav class="hidden md:flex items-center space-x-10"> | |
| <a href="#marketplace" class="nav-link font-medium hover:text-cyberpink px-3">Marketplace</a> | |
| <a href="#services" class="nav-link font-medium hover:text-cyberpink px-3">Services</a> | |
| <a href="#nft" class="nav-link font-medium hover:text-cyberpink px-3">NFTs</a> | |
| <a href="#realestate" class="nav-link font-medium hover:text-cyberpink px-3">Real Estate</a> | |
| <a href="#community" class="nav-link font-medium hover:text-cyberpink px-3">Community</a> | |
| </nav> | |
| <!-- Wallet/Login Button --> | |
| <div class="flex items-center space-x-6"> | |
| <button class="hidden md:flex items-center space-x-2 px-6 py-3 rounded-full bg-gradient-to-r from-cyberpurple to-cyberblue text-white font-medium hover:opacity-90 transition"> | |
| <i class="fas fa-wallet"></i> | |
| <span>Connect Wallet</span> | |
| </button> | |
| <button class="md:hidden text-3xl" id="mobileMenuButton"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="relative pt-20 pb-32 overflow-hidden"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col lg:flex-row items-center"> | |
| <div class="lg:w-1/2 mb-12 lg:mb-0"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6 glow-text"> | |
| All-in-One Web3 <span class="bg-clip-text text-transparent cyber-gradient">Marketplace</span> | |
| </h1> | |
| <p class="text-xl mb-8 text-cyberlight/80 max-w-lg"> | |
| Your all-in-one Web3 marketplace - from digital services to tokenized real estate. Powered by Web3District for a seamless decentralized experience. | |
| </p> | |
| <div class="flex flex-wrap gap-4 items-center"> | |
| <button class="flex items-center space-x-2 px-6 py-3 rounded-full bg-gradient-to-r from-cyberpurple to-cyberblue text-white font-medium hover:opacity-90 transition"> | |
| <i class="fas fa-store"></i> | |
| <span>Explore Marketplace</span> | |
| </button> | |
| <button class="flex items-center space-x-2 px-6 py-3 rounded-full bg-transparent border border-cyberpurple text-cyberpink font-medium hover:bg-cyberpurple/10 transition"> | |
| <i class="fas fa-wallet"></i> | |
| <span>Connect Wallet</span> | |
| </button> | |
| </div> | |
| <ul class="flex space-x-4 items-center mt-8"> | |
| <!-- ETH --> | |
| <li class="flex items-center space-x-1 bg-cyberdark/50 px-3 py-1.5 rounded-full border border-cyberpurple/30"> | |
| <svg class="w-5 h-5" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M16 32c8.837 0 16-7.163 16-16S24.837 0 16 0 0 7.163 0 16s7.163 16 16 16z" fill="#627EEA"/><path d="M15.75 4v8.875l7.75 3.5z" fill="#FFF" fill-opacity=".6"/><path d="M15.75 4L8 16.375l7.75-3.5z" fill="#FFF" fill-opacity=".2"/><path d="M15.75 21.969v6.027L23.5 17.616z" fill="#FFF" fill-opacity=".6"/><path d="M15.75 27.996v-6.028L8 17.616z" fill="#FFF" fill-opacity=".2"/><path d="M15.75 20.573l7.75-4.198-7.75-3.5z" fill="#FFF" fill-opacity=".6"/><path d="M8 16.375l7.75 4.198v-7.698z" fill="#FFF" fill-opacity=".2"/></svg> | |
| <span class="text-sm">ETH</span> | |
| </li> | |
| <!-- SOL --> | |
| <li class="flex items-center space-x-1 bg-cyberdark/50 px-3 py-1.5 rounded-full border border-cyberblue/30"> | |
| <svg class="w-5 h-5" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M16 32c8.837 0 16-7.163 16-16S24.837 0 16 0 0 7.163 0 16s7.163 16 16 16z" fill="#00FFBD"/><path d="M9.925 19.687a.59.59 0 00.415.17h14.366a.294.294 0 00.208-.503l-2.838-2.838a.588.588 0 01-.17-.415V9.92a.294.294 0 00-.503-.208l-11.678 11.68a.297.297 0 00.002.416l2.838 2.838h.008z" fill="#fff"/><path d="M22.706 12.302a.294.294 0 00-.208-.503H8.132a.294.294 0 00-.208.503l2.838 2.838a.588.588 0 01.17.415v6.381a.294.294 0 00.503.208l11.678-11.68a.294.294 0 00-.003-.416l-2.838-2.838z" fill="#fff"/></svg> | |
| <span class="text-sm">SOL</span> | |
| </li> | |
| <!-- USDT --> | |
| <li class="flex items-center space-x-1 bg-cyberdark/50 px-3 py-1.5 rounded-full border border-cyberpink/30"> | |
| <svg class="w-5 h-5" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M16 32c8.837 0 16-7.163 16-16S24.837 0 16 0 0 7.163 0 16s7.163 16 16 16z" fill="#26A17B"/><path d="M17.922 17.383v-.002c-.11.008-.677.042-1.942.042-1.01 0-1.721-.03-1.971-.042v.003c-3.888-.171-6.79-.848-6.79-1.658 0-.809 2.902-1.486 6.79-1.66v2.644c.254.018.982.061 1.988.061 1.207 0 1.812-.05 1.925-.06v-2.643c3.88.173 6.775.85 6.775 1.658 0 .81-2.895 1.485-6.775 1.657z" fill="#fff"/><path d="M17.922 14.626v-2.366h5.414V7.875H8.66v4.385h5.414v2.366c-4.4.202-7.709.978-7.709 1.937v3.989c0 .958 3.309 1.734 7.709 1.937v8.387h3.847v-8.387c4.393-.203 7.694-.979 7.694-1.937v-3.989c0-.958-3.301-1.735-7.694-1.937z" fill="#fff"/></svg> | |
| <span class="text-sm">USDT</span> | |
| </li> | |
| <!-- USDC --> | |
| <li class="flex items-center space-x-1 bg-cyberdark/50 px-3 py-1.5 rounded-full border border-cybergreen/30"> | |
| <svg class="w-5 h-5" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M16 32c8.837 0 16-7.163 16-16S24.837 0 16 0 0 7.163 0 16s7.163 16 16 16z" fill="#2775CA"/><path d="M20.022 18.124c0-2.124-1.28-2.852-3.84-3.156-1.828-.243-2.193-.728-2.193-1.578 0-.85.61-1.396 1.828-1.396 1.097 0 1.707.364 2.011 1.275a.458.458 0 00.427.303h.975a.416.416 0 00.427-.425v-.06a3.04 3.04 0 00-2.742-2.489v-1.457a.396.396 0 00-.396-.396h-.792a.396.396 0 00-.396.396v1.427a3.113 3.113 0 00-2.803 3.054c0 2.003 1.219 2.792 3.778 3.095 1.707.303 2.255.668 2.255 1.639 0 .97-.853 1.639-2.011 1.639-1.341 0-2.072-.486-2.316-1.336a.426.426 0 00-.406-.303h-1.036a.416.416 0 00-.426.425v.06a3.501 3.501 0 002.925 2.914v1.427a.396.396 0 00.396.396h.792a.396.396 0 00.396-.396v-1.427a3.502 3.502 0 003.046-3.502z" fill="#fff"/><path d="M12.892 23.496A7.967 7.967 0 018 16a7.967 7.967 0 014.892-7.496 4.104 4.104 0 01-.182-1.253 4.148 4.148 0 014.148-4.147 4.148 4.148 0 014.147 4.147c0 .426-.06.852-.182 1.253A7.967 7.967 0 0124 16a7.967 7.967 0 01-4.892 7.496c.121.425.182.85.182 1.276a4.148 4.148 0 01-4.147 4.147 4.148 4.148 0 01-4.148-4.147c0-.425.06-.85.182-1.276z" fill="#fff"/></svg> | |
| <span class="text-sm">USDC</span> | |
| </li> | |
| <!-- EURO --> | |
| <li class="flex items-center space-x-1 bg-cyberdark/50 px-3 py-1.5 rounded-full border border-cyberyellow/30"> | |
| <svg class="w-5 h-5" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M16 32c8.837 0 16-7.163 16-16S24.837 0 16 0 0 7.163 0 16s7.163 16 16 16z" fill="#0033A1"/><path d="M21.2 19.6c-.4.3-.9.6-1.5.8-.6.2-1.3.4-2.1.4-1.1 0-2-.3-2.7-.8-.7-.5-1.3-1.3-1.7-2.2-.4-1-.6-2.1-.6-3.4 0-1.3.2-2.5.6-3.5.4-1 1-1.8 1.7-2.3.7-.5 1.6-.8 2.7-.8.8 0 1.5.1 2.1.4.6.3 1.1.6 1.5.9l1.2-1.5c-.5-.4-1.1-.8-1.8-1.1-.7-.3-1.5-.5-2.3-.5-1.5 0-2.8.5-3.8 1.4-1 .9-1.7 2.2-2.2 3.8-.5 1.6-.7 3.4-.7 5.3 0 1.9.2 3.7.7 5.3.5 1.6 1.2 2.9 2.2 3.8 1 .9 2.3 1.4 3.8 1.4.8 0 1.6-.2 2.3-.5.7-.3 1.3-.7 1.8-1.1l-1.2-1.5z" fill="#fff"/></svg> | |
| <span class="text-sm">EUR</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="lg:w-1/2 relative"> | |
| <div class="relative z-10"> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="bg-cyberdark/50 p-4 rounded-xl cyber-border card-hover"> | |
| <div class="w-12 h-12 rounded-full bg-cyberpurple/20 flex items-center justify-center mb-3"> | |
| <i class="fas fa-code text-cyberpurple"></i> | |
| </div> | |
| <h3 class="font-bold mb-2">Smart Contracts</h3> | |
| <p class="text-sm text-cyberlight/70">Delivered within hours or 24 hours</p> | |
| </div> | |
| <div class="bg-极客cyberdark/50 p-4 rounded-xl cyber-border card-hover"> | |
| <div class="w-12 h-12 rounded-full bg-cyberblue/20 flex items-center justify-center mb-3"> | |
| <i class="fas fa-ticket-alt text-cyberblue"></i> | |
| </div> | |
| <h3 class="font-bold mb-2">Event Passes</h3> | |
| <p class="text-sm text-cyberlight/70">Web3, AI, and Quantum Computing</p> | |
| </div> | |
| <div class="bg-cyberdark/50 p-4 rounded-xl cyber-border card极客-hover"> | |
| <div class="w-12 h-12 rounded-full bg-cyberpink/20 flex items-center justify-center mb-3"> | |
| <i class="fas fa-home text-cyberpink"></i> | |
| </div> | |
| <h3 class="font-bold mb-2">Real Estate</h3> | |
| <p class="text-sm text-cyberlight/70">Buy or rent using crypto</p> | |
| </div> | |
| <div class="bg-cyberdark/50 p-4 rounded-xl cyber-border card-hover"> | |
| <div class="w-12 h-12 rounded-full bg-cybergreen/20 flex items-center justify-center mb-3"> | |
| <i class="fas fa-newspaper text-cybergreen"></i> | |
| </div> | |
| <h3 class="font-bold mb-2">PR Services</h3> | |
| <p class="text-sm text-cyberlight/70">Worldwide press coverage</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute -top-20 -right-20 w-64 h-64 rounded-full bg-cyberpurple/10 blur-3xl"></div> | |
| <div class="absolute -bottom-20 -left-20 w-64 h-64 rounded-full bg-cyberblue/10 blur-3xl"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Zebra Benefits Section --> | |
| <section class="py-16 bg-gradient-to-br from-cyberpurple/10 to-cyberblue/10"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Unlock Web3 Potential</h2> | |
| <p class="text-xl text-cyberlight/80 max-w-2xl mx-auto"> | |
| Everything you need to thrive in the decentralized economy | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <div class="bg-cyberdark/50 p-6 rounded-xl cyber-border card-hover"> | |
| <div class="w-14 h-14 rounded-full bg-cyberpurple/20 flex items-center justify-center mb-4 mx-auto"> | |
| <i class="fas fa-map-marker-alt text-cyberpurple text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 text-center">Spaces</h3> | |
| <p class="text-cyberlight/70 text-center"> | |
| Access dynamic locations for prototyping, hackathons, and coworking environments. | |
| </p> | |
| </div> | |
| <div class="bg-cyberdark/50 p-6 rounded-xl cyber-border card-hover"> | |
| <div class="w-14 h-14 rounded-full bg-cyberblue/20 flex items-center justify-center mb-4 mx-auto"> | |
| <i class="fas fa-users text-cyberblue text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 text-center">Communities</h3> | |
| <p class="text-cyberlight/70 text-center"> | |
| Join exclusive founder communities to gain skills and find collaborators. | |
| </p> | |
| </div> | |
| <div class="bg-cyberdark/50 p-6 rounded-xl cyber-border card-hover"> | |
| <div class="w-14 h-14 rounded-full bg-cyberpink/20 flex items-center justify-center mb-4 mx-auto"> | |
| <i class="fas fa-hand-holding-usd text-cyberpink text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 text-center">Investments</h3> | |
| <p class="text-cyberlight/70 text-center"> | |
| Get matched with investors, VCs, and funding opportunities. | |
| </p> | |
| </div> | |
| <div class="bg-cyberdark/50 p-6 rounded-xl cyber-border card-hover"> | |
| <div class="极客w-14 h-14 rounded-full bg-cybergreen/20 flex items-center justify-center mb-4 mx-auto"> | |
| <i class="fas fa-chart-line text-cybergreen text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 text-center">Growth Hacking</h3> | |
| <p class="text-cyberlight/70 text-center"> | |
| Expand your user base and boost visibility with our growth packages. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Marketplace Categories --> | |
| <section id="marketplace" class="py-16 bg-cyberdark/70"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Web3 Marketplace Categories</h2> | |
| <p class="text-xl text-cyberlight/80 max-w-2xl mx-auto"> | |
| Everything you need in the Web3 ecosystem - all in one decentralized marketplace | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"> | |
| <!-- Digital Products --> | |
| <div class="bg-cyberdark/50 p-6 rounded-xl cyber-border card-hover"> | |
| <div class="w-14 h-14 rounded-full bg-cyberpurple/20 flex items-center justify-center mb-4"> | |
| <i class="fas fa-laptop-code text-2xl text-cyberpurple"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Digital Products</h3> | |
| <p class="text-cyberlight/70 mb-4"> | |
| Smart contracts, Web3 integrations, AI tools, and blockchain apps delivered fast | |
| </p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="feature-badge text-xs bg-cyberpurple/20 text-cyberpurple px-2 py-1 rounded-full">Smart Contracts</span> | |
| <span class="feature-badge text-xs bg-cyberpurple/20 text-cyberpurple px-2 py-1 rounded-full">AI Tools</span> | |
| <span class="feature-badge text-xs bg-cyberpurple/20 text-cyberpurple px-2 py-1 rounded-full">Web3 Apps</span> | |
| </div> | |
| <a href="#" class="text-cyberpink font-medium flex items-center"> | |
| Explore <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Event Passes --> | |
| <div class="bg-cyberdark/50 p-6 rounded-xl cyber-border card-hover"> | |
| <div class="w-14 h-14 rounded-full bg-cyberblue/20 flex items-center justify-center mb-4"> | |
| <i class="fas fa-ticket-alt text-2xl text-cyberblue"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Event Passes</h3> | |
| <p class="text-cyberlight/70 mb-4"> | |
| Exclusive access to Web3 conferences, hackathons, and VIP experiences | |
| </p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="feature-badge text-xs bg-cyberblue/20 text-cyberblue px-2 py-1 rounded-full">Conferences</span> | |
| <span class="feature-badge text-xs bg-cyberblue/20 text-cyberblue px-2 py-1 rounded-full">VIP Access</span> | |
| <span class="feature-badge text-xs bg-cyberblue/20 text-cyberblue px-2 py-1 rounded-full">Token Gates</span> | |
| </div> | |
| <a href="#" class="text-cyberpink font-medium flex items-center"> | |
| Explore <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Web3 Merch --> | |
| <div class="bg-cyberdark/50 p-6 rounded-xl cyber-border card-hover"> | |
| <div class="w-14 h-14 rounded-full bg-cyberpink极客/20 flex items-center justify-center mb-4"> | |
| <i class="fas fa-tshirt text-2xl text-cyberpink"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Web3 Merch</h3> | |
| <p class="text-cyberlight/70 mb-4"> | |
| Limited edition NFT-backed merchandise from top projects and creators | |
| </p> | |
| <div class="flex flex-wrap gap-极客2 mb-4"> | |
| <span class="feature-badge text-xs bg-cyberpink/20 text-cyberpink px-2 py-1 rounded-full">NFT-Backed</span> | |
| <span class="feature-badge text-xs bg-cyberpink/20 text-cyberpink px-2 py-1 rounded-full">Collectibles</span> | |
| <span class="feature-badge text-xs bg-cyberpink/20 text-cyberpink px-2 py-1 rounded-full">Hardware</span> | |
| </div> | |
| <a href="#" class="text-cyberpink font-medium flex items-center"> | |
| Explore <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Real Estate --> | |
| <div class="bg-cyberdark/50 p-6 rounded-xl cyber-border card-hover"> | |
| <div class="w-14 h-14 rounded-full bg-cybergreen/20 flex items-center justify-center mb-4"> | |
| <i class="fas fa-building text-2xl text-cybergreen"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Real Estate</h3> | |
| <p class="text-cyberlight/70 mb-4"> | |
| Buy, rent, or invest in tokenized properties using cryptocurrency | |
| </p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="feature-badge text-xs bg-cybergreen/20 text-cybergreen px-2 py-1 rounded-full">Crypto Payments</span> | |
| <span class="feature-badge text-xs bg-cybergreen/20 text-cybergreen px-2 py-1 rounded-full">Tokenized</span> | |
| <span class="feature-badge text-xs bg-cybergreen/20 text-cybergreen px-2 py-1 rounded-full">Global</span> | |
| </div> | |
| <a href="#" class="text-cyberpink font-medium flex items-center"> | |
| Explore <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- PR & Marketing --> | |
| <div class="bg-cyberdark/50 p-6 rounded-xl cyber-border card-hover"> | |
| <div class="w-14 h-14 rounded-full bg-cyberyellow/20 flex items-center justify-center mb-4"> | |
| <i class="fas fa-bullhorn text-2xl text-cyberyellow"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">PR & Marketing</h3> | |
| <p class="text-cyberlight/70 mb-4"> | |
| Worldwide PR services, press releases, and social media growth | |
| </p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="feature-badge text-xs bg-cyberyellow/20 text-cyberyellow px-2 py-1 rounded-full">Press Releases</span> | |
| <span class="feature-badge text-xs bg-cyberyellow/20 text-cyberyellow px-2 py-1 rounded-full">Social Growth</span> | |
| <span class="feature-badge text-xs bg-cyberyellow/20 text-cyberyellow px-2 py-1 rounded-full">Influencers</span> | |
| </div> | |
| <a href="#" class="text-cyberpink font-medium flex items-center"> | |
| Explore <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Media Production --> | |
| <div class="bg-cyberdark/50 p-6 rounded-xl cyber-border card-hover"> | |
| <div class="w-14 h-14 rounded-full bg-cyberpurple/20 flex items-center justify-center mb-4"> | |
| <i class="fas fa-video text-2xl text-cyberpurple"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Media Production</h3> | |
| <p class="text-cyberlight/70 mb-4"> | |
| Professional video editing, recording, and post-production services | |
| </p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="feature-badge text-xs bg-cyberpurple/20 text-cyberpurple px-2 py-1 rounded-full">Video Editing</span> | |
| <span class="feature-badge text-xs bg-cyberpurple/20 text-cyberpurple px-2 py-1 rounded-full">Recording</span> | |
| <span class="feature-badge text-xs bg-cyberpurple/20 text-cyberpurple px-2 py-1 rounded-full">Post-Production</span> | |
| </div> | |
| <a href="#" class="text-cyberpink font-medium flex items-center"> | |
| Explore <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Investment Packs --> | |
| <div class="bg-cyberdark/50 p-6 rounded-xl cyber-border card-hover"> | |
| <div class="w-14 h-14 rounded-full bg-cyberblue/20 flex items-center justify-center mb-4"> | |
| <i class="fas fa-hand-holding-usd text-2xl text-cyberblue"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Investment Packs</h3> | |
| <p class="text-cyberlight/70 mb-4"> | |
| Special packages for startups seeking investors and venture capital | |
| </p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="feature-badge text-xs bg-cyberblue/20 text-cyberblue px-2 py-1 rounded-full">VC Access</span> | |
| <span class="feature-badge text-xs bg-cyberblue/20 text-cyberblue px-2 py-1 rounded-full">Pitch Decks</span> | |
| <span class="feature-badge text-xs bg-cyberblue/20 text-cyberblue px-2 py-1 rounded-full">Fundraising</span> | |
| </div> | |
| <a href="#" class="text-cyberpink font-medium flex items-center"> | |
| Explore <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Quantum Computing --> | |
| <div class="bg-cyberdark/50 p-6 rounded-xl cyber-border card-hover"> | |
| <div class="w-14 h-14 rounded-full bg-cyberpink/20 flex items-center justify-center mb-4"> | |
| <i class="fas fa-atom text-2xl text-cyberpink"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Quantum Computing</h3> | |
| <p class="text-cyberlight/70 mb-4"> | |
| Accessories, tools, and services for quantum computing development | |
| </p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="feature-badge text-xs bg-cyberpink/20 text-cyberpink px-2 py-1 rounded-full">Hardware</span> | |
| <span class="feature-badge text-xs bg-cyberpink/20 text-cyberpink px-2 py-极客1 rounded-full">Software</span> | |
| <span class="feature-badge text-xs bg-cyberpink/20 text-cyberpink px-2 py-1 rounded-full">Consulting</span> | |
| </div> | |
| <a href="#" class="text-cyberpink font-medium flex items-center"> | |
| Explore <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- NFT Marketplace Section --> | |
| <section id="nft" class="py-16 bg-gradient-to-b from-cyberdark/70 to-cyberdark"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center mb-12"> | |
| <div> | |
| <h2 class="text-3xl font-bold mb-2">NFT Marketplace</h2> | |
| <p class="text-cyberlight/80">Create, buy, and sell unique digital assets with blockchain authenticity</p> | |
| </div> | |
| <button class="mt-4 md:mt-0 px-6 py-3 rounded-full bg-gradient-to-r from-cyberpurple to-cyberblue text-white font-medium hover:opacity-90 transition"> | |
| Explore NFTs | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- NFT 1 --> | |
| <div class="bg-cyberdark/50 rounded-xl overflow-hidden cyber-border card-hover"> | |
| <div class="h-64 bg-gradient-to-br from-cyberpurple/20 to-cyberblue/20 flex items-center justify-center relative"> | |
| <img src="https://via.placeholder.com/400x400/9d00ff/ffffff?text=Digital+Art" class="absolute inset-0 w-full h-full object-cover opacity-70" alt="NFT"> | |
| <div class="relative z极客-10 text-center p-4"> | |
| <span class="bg-cyberdark/80 text-cyberpink px-3 py-1 rounded-full text-sm">Digital Art</span> | |
| </div> | |
| </div> | |
| <div class="p-5"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <h3 class="font-bold text-lg">Cyberpunk Dreams #124</h3> | |
| <span class="bg-cyberpurple/20 text-cyberpurple text-xs px-2 py-1 rounded">1/1</span> | |
| </div> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-6 h-6 rounded-full bg-cyberblue/20 flex items-center justify-center mr-2"> | |
| <i class="fas fa-check text-xs text-cyberblue"></i> | |
| </div> | |
| <span class="text-sm text-cyberlight/70">Verified Creator</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-xs text-cyberlight/60">Current Price</p> | |
| <p class="font-bold text-cyberblue">0.75 ETH</p> | |
| </div> | |
| <button class="text-xs bg-cyberpurple/20 hover:bg-cyberpurple/30 text-cyberpurple px-3 py-1 rounded-full transition"> | |
| Place Bid | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- NFT 2 --> | |
| <div class="bg-cyberdark/50 rounded-xl overflow-hidden cyber-border card-hover"> | |
| <div class="h-64 bg-gradient-to-br from-cyberblue/20 to-cyberpink/20 flex items-center justify-center relative"> | |
| <img src="https://via.placeholder.com/400x400/00f5ff/ffffff?text=Music+NFT" class="absolute inset-0 w-full h-full object-cover opacity-70" alt="NFT"> | |
| <div class="relative z-10 text-center p-4"> | |
| <span class="bg-cyberdark/80 text-cyberblue px-3 py-1 rounded-full text-sm">Music</span> | |
| </div> | |
| </div> | |
| <div class="p-5"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <h3 class="font-bold text-lg">Neon Symphony #45</h3> | |
| <span class="bg-cyberblue/20 text-cyberblue text-xs px-2 py-1 rounded">1/10</span> | |
| </div> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-6 h-6 rounded-full bg-cyberblue/20 flex items-center justify-center mr-2"> | |
| <i class="fas fa-check text-xs text-cyberblue"></i> | |
| </div> | |
| <span class="text-sm text-cyberlight/70">Verified Creator</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-xs text-cyberlight/60">Current Price</极客</p> | |
| <p class="font-bold text-cyberblue">1.2 ETH</p> | |
| </div> | |
| <button class极客="text-xs bg-cyberblue/20 hover:bg-cyberblue/30 text-cyberblue px-3 py-1 rounded-full transition"> | |
| Place Bid | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- NFT 3 --> | |
| <div class="bg-cyberdark极客/50 rounded-xl overflow-hidden cyber-border card-hover"> | |
| <div class="h-64 bg-gradient-to-br from-cyberpink/20 to-cyberpurple/20 flex items-center justify-center relative"> | |
| <img src="https://via.placeholder.com/400x400/ff00f5/ffffff?text=Collectible" class="absolute inset-0 w-full h-full object-cover opacity-70" alt="NFT"> | |
| <div class="relative z-10 text-center p-4"> | |
| <span class="bg-cyberdark/80 text-cyberpink px-3 py-1 rounded-full text-sm">Collectible</span> | |
| </div> | |
| </div> | |
| <div class="p-5"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <h3 class="font-bold text-lg">MetaPunk #7892</h3> | |
| <span class="bg-cyberpink/20 text-cyberpink text-xs px-2 py-1 rounded">1/5000</span> | |
| </div> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-6 h-6 rounded-full bg-cyberblue/20 flex items-center justify-center mr-2"> | |
| <i class="fas fa-check text-xs text-cyberblue"></i> | |
| </div> | |
| <span class="text-sm text-cyberlight/70">Verified Creator</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-xs text-cyberlight/60">Current Price</p> | |
| <p class="font-bold text-cyberblue">0.15 ETH</p> | |
| </div> | |
| <button class="text-xs bg-cyberpink/20 hover:bg-cyberpink/30 text-cyberpink px-3 py-1 rounded-full transition"> | |
| Buy Now | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <button class="px-6 py-3 rounded-full bg-transparent border border-cyberpurple text-cyberpink font-medium hover:bg-cyberpurple/10 transition"> | |
| View All NFTs | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Real Estate Section --> | |
| <section id="realestate" class="py-16 bg-cyberdark/70"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Tokenized Real Estate</h2> | |
| <p class="text-xl text-cyberlight/80 max-w-2xl mx-auto"> | |
| Invest in properties worldwide using cryptocurrency. Fractional ownership powered by blockchain. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> | |
| <!-- Property 1 --> | |
| <div class="bg-cyberdark/50 rounded-xl overflow-hidden cyber-border card-hover"> | |
| <div class="h-64 property-bg-gradient-1 relative"> | |
| <img src="https://media.vrbo.com/lodging/83000000/82990000/82980100/82980006/3f62489c.jpg?impolicy=resizecrop&rw=1200&ra=fit" class="absolute inset-0 w-full h-full object-cover opacity-70" alt="Villa in Cascais"> | |
| <div class="absolute bottom-4 left-4"> | |
| <span class="bg-cyberdark/80 text-white px-3 py-1 rounded-full text-sm">Portugal</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Luxury Villa in Cascais</h3> | |
| <div class="flex items-center mb-4"> | |
| <i class="fas fa-map-marker-alt text-cyberpink mr-2"></i> | |
| <span class="text-cyberlight/70">Cascais, Portugal</span> | |
| </div> | |
| <div class="grid grid-cols-3 gap-4 mb-4"> | |
| <div> | |
| <p class="text-xs text-cyberlight/60">Price</p> | |
| <p class="font-bold text-cyberblue">45 ETH</p> | |
| </div> | |
| <div> | |
| <p class="text-xs text-cyberlight/60">Size</p> | |
| <p class="font-bold">220 m²</p> | |
| </div> | |
| <div> | |
| <p class="text-xs text-cyberlight/60">Tokens</p> | |
| <p class="font-bold">20,000 W3D</p> | |
| </div> | |
| </div> | |
| <p class="text-cyberlight/70 mb-4"> | |
| Stunning 4-bedroom villa with private pool and ocean views. Modern luxury meets Portuguese charm. Tokenized ownership available. | |
| </p> | |
| <div class="flex justify-between items-center"> | |
| <button class="px-4 py-2 rounded-full bg-gradient-to极客-r from-cyberpurple to-cyberblue text-white text-sm font-medium hover:opacity-90 transition"> | |
| Invest Now | |
| </button> | |
| <button class="px-4 py-2 rounded-full bg-transparent border border-cyberpurple text-cyberpink text-sm font-medium hover:bg-cyberpurple/10 transition"> | |
| View Details | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Property 2 --> | |
| <div class="bg-cyberdark/50 rounded-xl overflow-hidden cyber-border card-hover"> | |
| <div class="h-64 property-bg-gradient-2 relative"> | |
| <img src="https://via.placeholder.com/800x400/00f5ff/ffffff?text=Dubai+Villa" class="absolute inset-0 w-full h极客-full object-cover opacity-70" alt="Property"> | |
| <div class="absolute bottom-4 left-4"> | |
| <span class="bg-cyberdark/80 text-white px-3 py-1 rounded-full text-sm">Dubai</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Luxury Villa in Palm Jumeirah</h3> | |
| <div class="flex items-center mb-4"> | |
| <i class="fas fa-map-marker-alt text-cyberpink mr-2"></i> | |
| <span class="text-cyberlight/70">Palm Jumeirah, Dubai</span> | |
| </div> | |
| <div class="grid grid-cols-3 gap-4 mb-4"> | |
| <div> | |
| <p class="text-xs text-cyberlight/60">Price</p> | |
| <p class="font-bold text-cyberblue">120 ETH</p> | |
| </div> | |
| <div> | |
| <p class="text-xs text-cyberlight/60">Size</p> | |
| <p class="font-bold">350 m²</p> | |
| </div> | |
| <div> | |
| <p class="text-xs text-cyberlight/60">Tokens</p> | |
| <p class="font-bold">50,000 W3D</p> | |
| </div> | |
| </div> | |
| <p class="text-cyberlight/70 mb-4"> | |
| Stunning 5-bedroom villa with private beach access and smart home features. Fractional ownership available. | |
| </p> | |
| <div class="flex justify-between items-center"> | |
| <button class="px-4 py-2 rounded-full bg-gradient-to-r from-cyberpurple to-cyberblue text-white text-sm font-medium hover:opacity-90 transition"> | |
| Invest Now | |
| </button> | |
| <button class="px-4 py-2 rounded-full bg-transparent border border-cyberpurple text-cyberpink text-sm font-medium hover:bg-cyberpurple/10 transition"> | |
| View Details | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <button class="px-6 py-3 rounded-full bg-transparent border border-cyberpurple text-cyberpink font-medium hover:bg-cyberpurple/10 transition"> | |
| Browse All Properties | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Calculator Section --> | |
| <section class="py-16 bg-gradient-to-br from-cyberpurple/10 to-cyberblue/10"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Web3 Services Calculator</h2> | |
| <p class="text-xl text-cyberlight/80 max-w-3xl mx-auto">Estimate costs for custom Web3 development and services tailored to your needs</p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> | |
| <div class="bg-cyberdark/50 p-8 rounded-xl cyber-border"> | |
| <h3 class="text-2xl font-bold mb-6 text-cyberpink">Configure Your Project</h3> | |
| <!-- Service Selection --> | |
| <div class="mb-8"> | |
| <label class="block text-cyberlight/80 mb-3">1. Select Service Type</label> | |
| <select class="w-full px-4 py-3 rounded-lg bg-cyberdark border border-cyberpurple/30 text-cyberlight focus:outline-none focus:ring-2 focus:ring-cyberpurple"> | |
| <option value="">-- Choose a service --</option> | |
| <option value="smart-contract">Smart Contract Development</option> | |
| <option value="dapp">DApp Development</option> | |
| <option value="nft-platform">NFT Marketplace</option> | |
| <option value="defi">DeFi Protocol</option> | |
| <option value="dao">DAO Setup</option> | |
| <option value="token">Token Creation</option> | |
| </select> | |
| </div> | |
| <!-- Project Scope --> | |
| <div class="mb-8"> | |
| <label class="block text-cyberlight/80 mb-3">2. Project Complexity</label> | |
| <div class="bg-cyberdark p-4 rounded-lg border border-cyberpurple/20"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-sm">Simple</span> | |
| <span class="text-sm">Complex</span> | |
| </div> | |
| <input type="range" min="1" max="5" value="3" class="w-full h-2 bg-cyberpurple/30 rounded-lg appearance-none cursor-pointer"> | |
| <div class="flex justify-between text-xs text-cyberlight/60 mt-2"> | |
| <span>Basic</span> | |
| <span>Standard</span> | |
| <span>Advanced</span> | |
| <span>Enterprise</span> | |
| <span>Custom</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Add-ons --> | |
| <div class="mb-8"> | |
| <label class="block text-cyberlight/80 mb-3">3. Additional Features</label> | |
| <div class="bg-cyberdark p-4 rounded-lg border border-cyberpurple/20"> | |
| <div class="space-y-3"> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="form-checkbox h-5 w-5 text-cyberpurple border-cyberpurple/50 rounded focus:ring-cyberpurple"> | |
| <span class="ml-2">Audit & Security Testing (+$5,000)</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="form-checkbox h-5 w-5 text-cyberpurple border-cyberpurple/50 rounded focus:ring-cyberpurple"> | |
| <span class="ml-2">Frontend Development (+$8,000)</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="form-checkbox h-5 w-5 text-cyberpurple border-cyberpurple/50 rounded focus:ring-cyberpurple"> | |
| <span class="ml-2">Ongoing Maintenance (+$2,000/mo)</span> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Blockchain Options --> | |
| <div> | |
| <label class="block text-cyberlight/80 mb-3">4. Blockchain Network</label> | |
| <div class="grid grid-cols-3 gap-2"> | |
| <button class="bg-cyberdark/70 py-2 px-3 rounded border border-cyberpurple/30 hover:bg-cyberpurple/10 transition"> | |
| Ethereum | |
| </button> | |
| <button class="bg-cyberdark/70 py-2 px-3 rounded border border-cyberblue/30 hover:bg-cyberblue/10 transition"> | |
| Solana | |
| </button> | |
| <button class="bg-cyberdark/70 py-2 px-3 rounded border border-cybergreen/30 hover:bg-cybergreen/10 transition"> | |
| Polygon | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-cyberdark/50 p-8 rounded-xl cyber-border"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-2xl font-bold text-cyberblue">Cost Estimate</h3> | |
| <div class="bg-cyberpurple/10 text-cyberpurple px-3 py-1 rounded-full text-sm"> | |
| Updated in Real-time | |
| </div> | |
| </div> | |
| <div class="space-y-4 mb-6"> | |
| <div class="flex justify-between items-center pb-4 border-b border-cyberpurple/10"> | |
| <div> | |
| <h4 class="font-medium">Smart Contract Development</h4> | |
| <p class="text-sm text-cyberlight/60">Standard complexity</p> | |
| </div> | |
| <span class="font-bold">$15,000</span> | |
| </div> | |
| <div class="flex justify-between items-center pb-4 border-b border-cyberpurple/10"> | |
| <div> | |
| <h4 class="font-medium">Audit & Security Testing</h4> | |
| <p class="text-sm text-cyberlight/60">Optional add-on</p> | |
| </div> | |
| <span class="font-bold">+$5,000</span> | |
| </div> | |
| <div class="flex justify-between items-center text-cybergreen"> | |
| <div> | |
| <h4 class="font-medium">First Project Discount</h4> | |
| <p class="text-sm text-cybergreen/70">New customer offer</p> | |
| </div> | |
| <span class="font-bold">-$4,000</span> | |
| </div> | |
| </div> | |
| <div class="bg-cyberpurple/10 border border-cyberpurple/20 rounded-lg p-4 mb-6"> | |
| <div class="flex items-center"> | |
| <div class="bg-cyberpurple/20 text-cyberpurple p-2 rounded-full mr-3"> | |
| <i class="fas fa-percentage"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Pay with W3D Tokens</h4> | |
| <p class="text-sm text-cyberlight/80">Save 15% when you pay with our native token!</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-cyberpurple/20 pt-4 mb-6"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-lg font-bold">Total Estimate</span> | |
| <div class="text-right"> | |
| <p class="text-2xl font-bold text-cyberpink">$16,000</p> | |
| <p class="text-sm text-cyberlight/70">or 8.0 ETH</p> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full py-4 rounded-full bg-gradient-to-r from-cyberpurple to-cyberblue text-white font-bold hover:opacity-90 transition flex items-center justify-center"> | |
| <i class="fas fa-paper-plane mr-2"></i> | |
| Get a Detailed Quote | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 bg-gradient-to-br from-cyberpurple/30 to-cyberblue/30"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="text-3xl md:text-5xl font-bold mb-6">Ready to Dive Into Web3?</h2> | |
| <p class="text-xl text-cyberlight/80 mb-8"> | |
| Join thousands of creators, developers, and investors in the decentralized future | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <button class="flex items-center justify-center space-x-2 px-8 py-4 rounded-full bg-gradient-to-r from-cyberpurple to-cyberblue text-white font-bold hover:opacity-90 transition"> | |
| <i class="fas fa-store"></i> | |
| <span>Explore Marketplace</span> | |
| </button> | |
| <button class="flex items-center justify-center space-x-2 px-8 py-4 rounded-full bg-transparent border border-cyberpurple text-cyberpink font-bold hover:bg-cyberpurple/10 transition"> | |
| <i class="fas fa-wallet"></i> | |
| <span>Connect Wallet</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-cyberdark/90 border-t border-cyberpurple/20 pt-16 pb-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-12 mb-12"> | |
| <!-- Column 1 --> | |
| <div class="lg:col-span-2"> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <div class="w-8 h-8 rounded-full cyber-gradient flex items-center justify-center"> | |
| <span class="text-white font-bold text-sm">W3</span> | |
| </div> | |
| <span class="text-xl font-bold">Web3District Shop</span> | |
| </div> | |
| <p class="text-cyberlight/70 mb-4"> | |
| The ultimate one-stop Web3 marketplace for digital products, services, real estate, and more. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-cyberlight/70 hover:text-cyberpink"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-cyberlight/70 hover:text-cyberpink"> | |
| <i class="fab fa-discord"></i> | |
| </a> | |
| <a href="#" class="text-cyberlight/70 hover:text-cyberpink"> | |
| <i class="fab fa-telegram"></i> | |
| </a> | |
| <a href="#" class="text-cyberlight/70 hover:text-cyberpink"> | |
| <i class="fab fa-linkedin"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Column 2 --> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Marketplace</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-cyberlight/70 hover:text-cyberpink transition">Digital Products</a></li> | |
| <li><a href="#" class="text-cyberlight/70 hover:text-cyberpink transition">Event Passes</a></li> | |
| <li><a href="#" class="text-cyberlight/70 hover:text-cyberpink transition">Web3 Merch</a></li> | |
| <li><a href="#" class="text-cyberlight/70 hover:text-cyberpink transition">Real Estate</a></li> | |
| <li><a href="#" class="text-cyberlight/70 hover:text-cyberpink transition">NFTs</a></li> | |
| </ul> | |
| </div> | |
| <!-- Column 3 --> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Services</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-cyberlight/70 hover:text-cyberpink transition">Smart Contracts</a></li> | |
| <li><a href="#" class="text-cyberlight/70 hover:text-cyberpink transition">PR & Marketing</a></li> | |
| <li><a href="#" class="text-cyberlight/极客70 hover:text-cyberpink transition">Media Production</a></li> | |
| <li><a href="#" class="text-cyberlight/70 hover:text-cyberpink transition">Investment Packs</a></li> | |
| <li><a href="#" class="text-cyberlight/70 hover:text-cyberpink transition">Relocation</a></li> | |
| </ul> | |
| </div> | |
| <!-- Column 4 --> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Resources</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-cyberlight/70 hover:text-cyberpink transition">Whitepaper</a></li> | |
| <li><a href="#" class="text-cyberlight/70 hover:text-cyberpink transition">Documentation</a></li> | |
| <li><a href="#" class="text-cyberlight/70 hover:text-cyberpink transition">Blog</a></li> | |
| <li><a href="#" class="text-cyberlight/70 hover:text-cyberpink transition">Community</a></li> | |
| <li><a href="#" class="text-cyberlight/70 hover:text-cyberpink transition">Careers</a></li> | |
| </ul> | |
| </div> | |
| <!-- Column 5 --> | |
| <div id="contact"> | |
| <h3 class="text-lg font-bold mb-4">Contact Us</h3> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-envelope text-cyberpurple mr-2"></i> | |
| <span class="text-cyberlight/70">hello@web3district.shop</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-map-marker-alt text-cyberblue mr-2"></i> | |
| <span class="text-cyberlight/70">Lisbon, Portugal</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-phone-alt text-cyberpink mr-2"></i> | |
| <span class="text-cyberlight/70">+351 123 456 789</span> | |
| </li> | |
| </ul> | |
| <div class="mt-4"> | |
| <button class="px-4 py-2 rounded-full bg-transparent border border-cyberpurple text-cyberpink text-sm font-medium hover:bg-cyberpurple/10 transition"> | |
| Book a Consultation | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pt-8 border-t border-cyberpurple/10 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-sm text-cyberlight/60 mb-4 md:mb-0"> | |
| © 2023 Web3District Shop. All rights reserved. | |
| </p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-sm text-cyberlight/60 hover:text-cyberpink">Terms</a> | |
| <a href="#" class="text-sm text-cyberlight/60 hover:text-cyberpink">Privacy</a> | |
| <a href="#" class="text-sm text-cyberlight/60 hover:text-cyberpink">Cookies</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Mobile Menu (hidden by default) --> | |
| <div class="fixed inset-0 bg-cyberdark/95 z-50 backdrop-blur-lg hidden flex-col items-center justify-center p-6" id="mobileMenu"> | |
| <button class="absolute top-6 right-6 text-3xl" id="closeMenu"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| <nav class="flex flex-col items-center space-y-8 text-2xl"> | |
| <a href="#marketplace" class="nav-link font-medium hover:text-cyberpink">Marketplace</a> | |
| <a href="#services" class="nav-link font-medium hover:text-cyberpink">Services</a> | |
| <a href="#nft" class="nav-link font-medium hover:text-cyberpink">NFTs</a> | |
| <a href="#realestate" class="nav-link font-medium hover:text-cyberpink">Real Estate</a> | |
| <a href="#community" class="nav-link font-medium hover:text-cyberpink">Community</a> | |
| </nav> | |
| <button class="mt-12 px-8 py-4 text-xl rounded-full bg-gradient-to-r from-cyberpurple to-cyberblue text-white font-medium hover:opacity-90 transition flex items-center space-x-2"> | |
| <i class="fas fa-wallet"></i> | |
| <span>Connect Wallet</span> | |
| </button> | |
| </div> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobileMenuButton').addEventListener('click', function() { | |
| document.getElementById('mobileMenu').classList.remove('hidden'); | |
| document.getElementById('mobileMenu').classList.add('flex'); | |
| document.body.style.overflow = 'hidden'; | |
| }); | |
| document.getElementById('closeMenu').addEventListener('click', function() { | |
| document.getElementById('mobileMenu').classList.add('hidden'); | |
| document.getElementById('mobileMenu').classList.remove('flex'); | |
| document.body.style.overflow = 'auto'; | |
| }); | |
| // Close mobile menu when clicking on a link | |
| document.querySelectorAll('#mobileMenu a').forEach(link => { | |
| link.addEventListener('click', function() { | |
| document.getElementById('mobileMenu').classList.add('hidden'); | |
| document.getElementById('mobileMenu').classList.remove('flex'); | |
| document.body.style.overflow = 'auto'; | |
| }); | |
| }); | |
| // Add smooth scrolling to all links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| // Connect wallet button functionality | |
| document.querySelectorAll('button:has(.fa-wallet)').forEach(button => { | |
| button.addEventListener('click', function() { | |
| alert('Connect your wallet to access all Web3District Shop features!'); | |
| }); | |
| }); | |
| // Calculator functionality | |
| const sliders = document.querySelectorAll('input[type="range"]'); | |
| sliders.forEach(slider => { | |
| slider.addEventListener('input', function() { | |
| // Calculate and update estimated cost based on slider value | |
| const complexity = this.value; | |
| let basePrice; | |
| switch(complexity) { | |
| case '1': basePrice = 5000; break; | |
| case '2': basePrice = 10000; break; | |
| case '3': basePrice = 15000; break; | |
| case '4': basePrice = 25000; break; | |
| case '5': basePrice = 50000; break; | |
| default: basePrice = 15000; | |
| } | |
| // Update the displayed price in the calculator | |
| document.querySelector('.text-cyberpink.text-2xl').textContent = `$${basePrice.toLocaleString()}`; | |
| document.querySelector('.text-cyberlight\\/70.text-sm').textContent = `or ${(basePrice / 2000).toFixed(1)} ETH`; | |
| }); | |
| }); | |
| const checkboxes = document.querySelectorAll('input[type="checkbox"]'); | |
| checkboxes.forEach(checkbox => { | |
| checkbox.addEventListener('change', function() { | |
| // Calculate and update estimated cost based on checkbox selections | |
| // This would be more complex in a real implementation | |
| console.log(`Checkbox ${this.checked ? 'checked' : 'unchecked'}: ${this.parentElement.textContent.trim()}`); | |
| }); | |
| }); | |
| // Blockchain selection buttons | |
| const blockchainButtons = document.querySelectorAll('.grid.grid-cols-3 button'); | |
| blockchainButtons.forEach(button => { | |
| button.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| blockchainButtons.forEach(btn => btn.classList.remove('bg-cyberpurple/30', 'border-cyberpurple/70')); | |
| this.classList.add('bg-cyberpurple/30', 'border-cyberpurple/70'); | |
| }); | |
| }); | |
| </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://deepsite.hf.co/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://deepsite.hf.co" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://deepsite.hf.co?remix=web3district/web3sponsorhip" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |