Hugging Face's logo

Spaces:
web3district
/
w3dshop
Running

App Files Community
web3district commited on
Commit
2ace911
·
verified ·
1 Parent(s): 5b690c4

undefined - Initial Deployment

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1428 -18
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: W3dshop
3
- emoji: 👁
4
- colorFrom: indigo
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: w3dshop
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1429 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Web3District Shop | The Ultimate One-Stop Web3 Marketplace</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ cyberblue: '#00f5ff',
15
+ cyberpurple: '#9d00ff',
16
+ cyberpink: '#ff00f5',
17
+ cyberdark: '#0f0f1a',
18
+ cyberlight: '#e0e0ff',
19
+ cybergreen: '#00ff9d',
20
+ cyberyellow: '#fff500',
21
+ },
22
+ fontFamily: {
23
+ sans: ['Inter', 'sans-serif'],
24
+ mono: ['Space Mono', 'monospace'],
25
+ },
26
+ spacing: {
27
+ '18': '4.5rem',
28
+ '22': '5.5rem',
29
+ '128': '32rem',
30
+ '144': '36rem',
31
+ }
32
+ }
33
+ }
34
+ }
35
+ </script>
36
+ <style>
37
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');
38
+
39
+ .cyber-gradient {
40
+ background: linear-gradient(135deg, #9d00ff 0%, #00f5ff 50%, #ff00f5 100%);
41
+ }
42
+
43
+ .card-hover {
44
+ transition: all 0.3s ease;
45
+ }
46
+
47
+ .card-hover:hover {
48
+ transform: translateY(-5px);
49
+ box-shadow: 0 10px 25px rgba(157, 0, 255, 0.3);
50
+ }
51
+
52
+ .glow-text {
53
+ text-shadow: 0 0 10px rgba(157, 0, 255, 0.7);
54
+ }
55
+
56
+ .cyber-border {
57
+ border: 1px solid rgba(157, 0, 255, 0.3);
58
+ }
59
+
60
+ .cyber-border:hover {
61
+ border: 1px solid rgba(157, 0, 255, 0.7);
62
+ }
63
+
64
+ .animated-bg {
65
+ animation: gradientShift 15s ease infinite;
66
+ background-size: 400% 400%;
67
+ }
68
+
69
+ @keyframes gradientShift {
70
+ 0% { background-position: 0% 50%; }
71
+ 50% { background-position: 100% 50%; }
72
+ 100% { background-position: 0% 50%; }
73
+ }
74
+
75
+ .nav-link {
76
+ position: relative;
77
+ }
78
+
79
+ .nav-link::after {
80
+ content: '';
81
+ position: absolute;
82
+ width: 0;
83
+ height: 2px;
84
+ bottom: -2px;
85
+ left: 0;
86
+ background-color: #9d00ff;
87
+ transition: width 0.3s ease;
88
+ }
89
+
90
+ .nav-link:hover::after {
91
+ width: 100%;
92
+ }
93
+
94
+ .search-input:focus {
95
+ outline: none;
96
+ box-shadow: 0 0 0 2px rgba(157, 0, 255, 0.5);
97
+ }
98
+
99
+ .feature-badge {
100
+ transition: all 0.3s ease;
101
+ }
102
+
103
+ .feature-badge:hover {
104
+ transform: scale(1.05);
105
+ }
106
+
107
+ .token-icon {
108
+ transition: transform 0.3s ease;
109
+ }
110
+
111
+ .token-icon:hover {
112
+ transform: rotate(15deg) scale(1.1);
113
+ }
114
+
115
+ /* Calculator specific styles */
116
+ .calculator-input {
117
+ background-color: rgba(15, 15, 26, 0.7);
118
+ border: 1px solid rgba(157, 0, 255, 0.3);
119
+ color: #e0e0ff;
120
+ transition: all 0.3s ease;
121
+ }
122
+
123
+ .calculator-input:focus {
124
+ outline: none;
125
+ border-color: #9d00ff;
126
+ box-shadow: 0 0 0 2px rgba(157, 0, 255, 0.3);
127
+ }
128
+
129
+ .calculator-select {
130
+ background-color: rgba(15, 15, 26, 0.7);
131
+ border: 1px solid rgba(157, 0, 255, 0.3);
132
+ color: #e0e0ff;
133
+ transition: all 0.3s ease;
134
+ }
135
+
136
+ .calculator-select:focus {
137
+ outline: none;
138
+ border-color: #9d00ff;
139
+ box-shadow: 0 0 0 2px rgba(157, 0, 255, 0.3);
140
+ }
141
+
142
+ .calculator-checkbox:checked {
143
+ background-color: #9d00ff;
144
+ border-color: #9d00ff;
145
+ }
146
+
147
+ .calculator-slider {
148
+ -webkit-appearance: none;
149
+ width: 100%;
150
+ height: 6px;
151
+ background: rgba(157, 0, 255, 0.3);
152
+ border-radius: 5px;
153
+ outline: none;
154
+ }
155
+
156
+ .calculator-slider::-webkit-slider-thumb {
157
+ -webkit-appearance: none;
158
+ appearance: none;
159
+ width: 20px;
160
+ height: 20px;
161
+ border-radius: 50%;
162
+ background: #9d00ff;
163
+ cursor: pointer;
164
+ transition: all 0.3s ease;
165
+ }
166
+
167
+ .calculator-slider::-webkit-slider-thumb:hover {
168
+ transform: scale(1.2);
169
+ box-shadow: 0 0 10px rgba(157, 0, 255, 0.7);
170
+ }
171
+
172
+ .calculator-slider::-moz-range-thumb {
173
+ width: 20px;
174
+ height: 20px;
175
+ border-radius: 50%;
176
+ background: #9d00ff;
177
+ cursor: pointer;
178
+ transition: all 0.3s ease;
179
+ }
180
+
181
+ .calculator-slider::-moz-range-thumb:hover {
182
+ transform: scale(1.2);
183
+ box-shadow: 0 0 10px rgba(157, 0, 255, 0.7);
184
+ }
185
+
186
+ .summary-item {
187
+ transition: all 0.3s ease;
188
+ }
189
+
190
+ .summary-item:hover {
191
+ background-color: rgba(157, 0, 255, 0.1);
192
+ }
193
+
194
+ .discount-badge {
195
+ animation: pulse 2s infinite;
196
+ }
197
+
198
+ @keyframes pulse {
199
+ 0% { transform: scale(1); }
200
+ 50% { transform: scale(1.05); }
201
+ 100% { transform: scale(1); }
202
+ }
203
+ </style>
204
+ </head>
205
+ <body class="bg-cyberdark text-cyberlight font-sans min-h-screen">
206
+ <!-- Animated Background Overlay -->
207
+ <div class="fixed inset-0 bg-black opacity-20 pointer-events-none"></div>
208
+
209
+ <!-- Header/Navbar -->
210
+ <header class="sticky top-0 z-50 bg-cyberdark/90 backdrop-blur-md border-b border-cyberpurple/20">
211
+ <div class="container mx-auto px-6 py-4">
212
+ <div class="flex items-center justify-between">
213
+ <!-- Logo -->
214
+ <div class="flex items-center space-x-4 mr-8">
215
+ <div class="w-12 h-12 rounded-full cyber-gradient flex items-center justify-center">
216
+ <span class="text-white font-bold text-xl">W3</span>
217
+ </div>
218
+ <span class="text-2xl font-bold bg-clip-text text-transparent cyber-gradient">Web3District Shop</span>
219
+ </div>
220
+
221
+ <!-- Desktop Navigation -->
222
+ <nav class="hidden md:flex items-center space-x-10">
223
+ <a href="#marketplace" class="nav-link font-medium hover:text-cyberpink px-3">Marketplace</a>
224
+ <a href="#services" class="nav-link font-medium hover:text-cyberpink px-3">Services</a>
225
+ <a href="#nft" class="nav-link font-medium hover:text-cyberpink px-3">NFTs</a>
226
+ <a href="#realestate" class="nav-link font-medium hover:text-cyberpink px-3">Real Estate</a>
227
+ <a href="#community" class="nav-link font-medium hover:text-cyberpink px-3">Community</a>
228
+ </nav>
229
+
230
+ <!-- Wallet/Login Button -->
231
+ <div class="flex items-center space-x-6">
232
+ <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">
233
+ <i class="fas fa-wallet"></i>
234
+ <span>Connect Wallet</span>
235
+ </button>
236
+ <button class="md:hidden text-3xl">
237
+ <i class="fas fa-bars"></i>
238
+ </button>
239
+ </div>
240
+ </div>
241
+ </div>
242
+ </header>
243
+
244
+ <!-- Hero Section -->
245
+ <section class="relative pt-20 pb-32 overflow-hidden">
246
+ <div class="container mx-auto px-4">
247
+ <div class="flex flex-col lg:flex-row items-center">
248
+ <div class="lg:w-1/2 mb-12 lg:mb-0">
249
+ <h1 class="text-4xl md:text-极客6xl font-bold mb-6 glow-text">
250
+ The Ultimate <span class="bg-clip-text text-transparent cyber-gradient">Web3 Marketplace</span>
251
+ </h1>
252
+ <p class="text-xl mb-8 text-cyberlight/80 max-w-lg">
253
+ Buy, sell, and trade everything Web3 - from digital services to real estate. Powered by blockchain for a seamless decentralized experience.
254
+ </p>
255
+ <div class="flex flex-wrap gap-4 items-center">
256
+ <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">
257
+ <i class="fas fa-store"></i>
258
+ <span>Explore Marketplace</span>
259
+ </button>
260
+ <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">
261
+ <i class="fas fa-wallet"></i>
262
+ <span>Connect Wallet</span>
263
+ </button>
264
+ </div>
265
+ <div class="mt-8 flex flex-wrap gap-3">
266
+ <div class="flex items-center space-x-2 bg-cyberdark/50 px-3 py-1.5 rounded-full border border-cyberpurple/30">
267
+ <img src="https://cryptologos.cc/logos/ethereum-eth-logo.png" class="w-5 h-5" alt="Ethereum">
268
+ <span class="text-sm">ETH</span>
269
+ </div>
270
+ <div class="flex items-center space-x-2 bg-cyberdark/50 px-3 py-1.5 rounded-full border border-cyberblue/30">
271
+ <img src="https://cryptologos.cc/logos/solana-sol-logo.png" class="w-5 h-5" alt="Solana">
272
+ <span class="text-sm">SOL</span>
273
+ </div>
274
+ <div class="flex items-center space-x-2 bg-cyberdark/50 px-3 py-1.5 rounded-full border border-cyberpink/30">
275
+ <img src="https://cryptologos.cc/logos/tether-usdt-logo.png" class="w-5 h-5" alt="USDT">
276
+ <span class="text-sm">USDT</span>
277
+ </div>
278
+ <div class="flex items-center space-x-2 bg-cyberdark/50 px-3 py-1.5 rounded-full border border-cybergreen/30">
279
+ <img src="https://cryptologos.cc/logos/usd-coin-usdc-logo.png" class="w-5 h-5" alt="USDC">
280
+ <span class="text-sm">USDC</span>
281
+ </div>
282
+ </div>
283
+ </div>
284
+ <div class="lg:w-1/2 relative">
285
+ <div class="relative z-10">
286
+ <div class="grid grid-cols-2 gap-4">
287
+ <div class="bg-cyberdark/50 p-4 rounded-xl cyber-border card-hover">
288
+ <div class="w-12 h-12 rounded-full bg-cyberpurple/20 flex items-center justify-center mb-3">
289
+ <i class="fas fa-code text-cyberpurple"></i>
290
+ </div>
291
+ <h3 class="font-bold mb-2">Smart Contracts</h3>
292
+ <p class="text-sm text-cyberlight/70">Delivered within hours or 24 hours</p>
293
+ </div>
294
+ <div class="bg-cyberdark/50 p-4 rounded-xl cyber-border card-hover">
295
+ <div class="w-12 h-12 rounded-full bg-cyberblue/20 flex items-center justify-center mb-3">
296
+ <i class="fas fa-ticket-alt text-cyberblue"></i>
297
+ </div>
298
+ <h3 class="font-bold mb-2">Event Passes</h3>
299
+ <p class="text-sm text-cyberlight/70">Web3, AI, and Quantum Computing</p>
300
+ </div>
301
+ <div class="bg-cyberdark/50 p-4 rounded-xl cyber-border card-hover">
302
+ <div class="w-12 h-12 rounded-full bg-cyberpink/20 flex items-center justify-center mb-3">
303
+ <i class="fas fa-home text-cyberpink"></i>
304
+ </div>
305
+ <h3 class="font-bold mb-2">Real Estate</h3>
306
+ <p class="text-sm text-cyberlight/70">Buy or rent using crypto</p>
307
+ </div>
308
+ <div class="bg-cyberdark/50 p-4 rounded-xl cyber-border card-hover">
309
+ <div class="w-12 h-12 rounded-full bg-cybergreen/20 flex items-center justify-center mb-3">
310
+ <i class="fas fa-newspaper text-cybergreen"></i>
311
+ </div>
312
+ <h3 class="font-bold mb-2">PR Services</h3>
313
+ <p class="text-sm text-cyberlight/70">Worldwide press coverage</p>
314
+ </div>
315
+ </div>
316
+ </div>
317
+ <div class="absolute -top-20 -right-20 w-64 h-64 rounded-full bg-cyberpurple/10 blur-3xl"></div>
318
+ <div class="absolute -bottom-20 -left-20 w-64 h-64 rounded-full bg-cyberblue/10 blur-3xl"></div>
319
+ </div>
320
+ </div>
321
+ </div>
322
+ </section>
323
+
324
+ <!-- Marketplace Categories -->
325
+ <section id="marketplace" class="py-16 bg-cyberdark/70">
326
+ <div class="container mx-auto px-4">
327
+ <div class="text-center mb-16">
328
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Web3 Marketplace Categories</h2>
329
+ <p class="text-xl text-cyberlight/80 max-w-2xl mx-auto">
330
+ Everything you need in the Web3 ecosystem - all in one decentralized marketplace
331
+ </p>
332
+ </div>
333
+
334
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
335
+ <!-- Digital Products -->
336
+ <div class="bg-cyberdark/50 p-6 rounded-xl cyber-border card-hover">
337
+ <div class="w-14 h-14 rounded-full bg-cyberpurple/20 flex items-center justify-center mb-4">
338
+ <i class="fas fa-laptop-code text-2xl text-cyberpurple"></i>
339
+ </div>
340
+ <h3 class="text-xl font-bold mb-3">Digital Products</h3>
341
+ <p class="text-cyberlight/70 mb-4">
342
+ Smart contracts, Web3 integrations, AI tools, and blockchain apps delivered fast
343
+ </p>
344
+ <div class="flex flex-wrap gap-2 mb-4">
345
+ <span class="feature-badge text-xs bg-cyberpurple/20 text-cyberpurple px-2 py-1 rounded-full">Smart Contracts</span>
346
+ <span class="feature-badge text-xs bg-cyberpurple/20 text-cyberpurple px-2 py-1 rounded-full">AI Tools</span>
347
+ <span class="feature-badge text-xs bg-cyberpurple/20 text-cyberpurple px极客-2 py-1 rounded-full">Web3 Apps</span>
348
+ </div>
349
+ <a href="#" class="text-cyberpink font-medium flex items-center">
350
+ Explore <i class="fas fa-arrow-right ml-2"></i>
351
+ </a>
352
+ </div>
353
+
354
+ <!-- Event Passes -->
355
+ <div class="bg-极客cyberdark/50 p-6 rounded-xl cyber-border card-hover">
356
+ <div class="w-14 h-14 rounded-full bg-cyberblue/20 flex items-center justify-center mb-4">
357
+ <i class="fas fa-calendar-star text-2xl text-cyberblue"></i>
358
+ </div>
359
+ <h3 class="text-xl font-bold mb-3">Event Passes</h3>
360
+ <p class="text-cyberlight/70 mb-4">
361
+ Exclusive access to Web3 conferences, hackathons, and VIP experiences
362
+ </p>
363
+ <div class="flex flex-wrap gap-2 mb-4">
364
+ <span class="feature-badge text-xs bg-cyberblue/20 text-cyberblue px-2 py-1 rounded-full">Conferences</span>
365
+ <span class="feature-badge text-xs bg-cyberblue/20 text-cyberblue px-2 py-1 rounded-full">VIP Access</span>
366
+ <span class="feature-badge text-xs bg-cyberblue/20 text-cyberblue px-2 py-1 rounded-full">Token Gates</span>
367
+ </div>
368
+ <a href="#" class="text-cyberpink font-medium flex items-center">
369
+ Explore <i class="fas fa-arrow-right ml-2"></i>
370
+ </a>
371
+ </div>
372
+
373
+ <!-- Web3 Merch -->
374
+ <div class="bg-cyberdark/50 p-6 rounded-xl cyber-border card-hover">
375
+ <div class="w-14 h-14 rounded-full bg-cyberpink/20 flex items-center justify-center mb-4">
376
+ <i class="fas fa-tshirt text-2xl text-cyberpink"></i>
377
+ </div>
378
+ <h3 class="text-xl font-bold mb-3">Web3 Merch</h3>
379
+ <p class="text-cyberlight/70 mb-4">
380
+ Limited edition NFT-backed merchandise from top projects and creators
381
+ </p>
382
+ <div class="flex flex-wrap gap-2 mb-4">
383
+ <span class="feature-badge text-xs bg-cyberpink/20 text-cyberpink px-2 py-1 rounded-full">NFT-Backed</span>
384
+ <span class="feature-badge text-xs bg-cyberpink/20 text-cyberpink px-2 py-1 rounded-full">Collectibles</span>
385
+ <span class="feature-badge text-xs bg-cyberpink/20 text-cyberpink px-2 py-1 rounded-full">Hardware</span>
386
+ </div>
387
+ <a href="#" class="text-cyberpink font-medium flex items-center">
388
+ Explore <i class="fas fa-arrow-right ml-2"></i>
389
+ </a>
390
+ </div>
391
+
392
+ <!-- Real Estate -->
393
+ <div class="bg-cyberdark/50 p-6 rounded-xl cyber-border card-hover">
394
+ <div class="w-14 h-14 rounded-full bg-cybergreen/20 flex items-center justify-center mb-4">
395
+ <i class="fas fa-building text-2xl text-cybergreen"></i>
396
+ </div>
397
+ <h3 class="text-xl font-bold mb-3">Real Estate</h3>
398
+ <p class="text-cyberlight/70 mb-4">
399
+ Buy, rent, or invest in tokenized properties using cryptocurrency
400
+ </p>
401
+ <div class="flex flex-wrap gap-2 mb-4">
402
+ <span class="feature-badge text-xs bg-cybergreen/20 text-cybergreen px-2 py-1 rounded-full">Crypto Payments</span>
403
+ <span class="feature-badge text-xs bg-cybergreen/20 text-cybergreen px-2 py-1 rounded-full">Tokenized</span>
404
+ <span class="feature-badge text-xs bg-cybergreen/20 text-cybergreen px-2 py-1 rounded-full">Global</span>
405
+ </div>
406
+ <a href="#" class="text-cyberpink font-medium flex items-center">
407
+ Explore <i class="fas fa-arrow-right ml-2"></i>
408
+ </a>
409
+ </div>
410
+
411
+ <!-- PR & Marketing -->
412
+ <div class="bg-cyberdark/50 p-6 rounded-xl cyber-border card-hover">
413
+ <div class="w-14 h-14 rounded-full bg-cyberyellow/20 flex items-center justify-center mb-4">
414
+ <i class="fas fa-bullhorn text-2xl text-cyberyellow"></i>
415
+ </div>
416
+ <h3 class="text-xl font-bold mb-3">PR & Marketing</h3>
417
+ <p class="text-cyberlight/70 mb-4">
418
+ Worldwide PR services, press releases, and social media growth
419
+ </p>
420
+ <div class="flex flex-wrap gap-2 mb-4">
421
+ <span class="feature-badge text-xs bg-cyberyellow/20 text-cyberyellow px-2 py-1 rounded-full">Press Releases</span>
422
+ <span class="feature-badge text-xs bg-cyberyellow/20 text-cyberyellow px-2 py-1 rounded-full">Social Growth</span>
423
+ <span class="feature-badge text-xs bg-cyberyellow/20 text-cyberyellow px-2 py-1 rounded-full">Influencers</span>
424
+ </div>
425
+ <a href="#" class="text-cyberpink font-medium flex items-center">
426
+ Explore <i class="fas fa-arrow-right ml-2"></i>
427
+ </a>
428
+ </div>
429
+
430
+ <!-- Media Production -->
431
+ <div class="bg-cyberdark/50 p-6 rounded-xl cyber-border card-hover">
432
+ <div class="w-14 h-14 rounded-full bg-cyberpurple/20 flex items-center justify-center mb-4">
433
+ <i class="fas fa-video text-2xl text-cyberpurple"></i>
434
+ </div>
435
+ <h3 class="text-xl font-bold mb-3">Media Production</h3>
436
+ <p class="text-cyberlight/70 mb-4">
437
+ Professional video editing, recording, and post-production services
438
+ </p>
439
+ <div class="flex flex-wrap gap-2 mb-4">
440
+ <span class="feature-badge text-xs bg-cyberpurple/20 text-cyberpurple px-2 py-1 rounded-full">Video Editing</span>
441
+ <span class="feature-badge text-xs bg-cyberpurple/20 text-cyberpurple px-2 py-1 rounded-full">Recording</span>
442
+ <span class="feature-badge text-xs bg-cyberpurple/20 text-cyberpurple px-2 py-1 rounded-full">Post-Production</span>
443
+ </div>
444
+ <a href="#" class="text-cyberpink font-medium flex items-center">
445
+ Explore <i class="fas fa-arrow-right ml-2"></i>
446
+ </a>
447
+ </div>
448
+
449
+ <!-- Investment Packs -->
450
+ <div class="bg-cyberdark/50 p-6 rounded-xl cyber-border card-hover">
451
+ <div class="w-14 h-14 rounded-full bg-cyberblue/20 flex items-center justify-center mb-4">
452
+ <i class="fas fa-hand-holding-usd text-2xl text-cyberblue"></i>
453
+ </div>
454
+ <h3 class="text-xl font-bold mb-3">Investment Packs</h3>
455
+ <极客p class="text-cyberlight/70 mb-4">
456
+ Special packages for startups seeking investors and venture capital
457
+ </p>
458
+ <div class="flex flex-wrap gap-2 mb-4">
459
+ <span class="feature-badge text-xs bg-cyberblue极客/20 text-cyberblue px-2 py-1 rounded-full">VC Access</span>
460
+ <span class="feature-badge text-xs bg-cyberblue/20 text-cyberblue px-2 py-1 rounded-full">Pitch Decks</span>
461
+ <span class="feature-badge text-xs bg-cyberblue/20 text-cyberblue px-2 py-1 rounded-full">Fundraising</span>
462
+ </div>
463
+ <a href="#" class="text-cyberpink font-medium flex items-center">
464
+ Explore <i class="fas fa-arrow-right ml-2"></i>
465
+ </a>
466
+ </div>
467
+
468
+ <!-- Quantum Computing -->
469
+ <div class="bg-cyberdark/50 p-6 rounded-xl cyber-border card-hover">
470
+ <div class="w-14 h-14 rounded-full bg-cyberpink/20 flex items-center justify-center mb-4">
471
+ <i class="fas fa-atom text-2xl text-cyberpink"></i>
472
+ </div>
473
+ <h3 class="text-xl font-bold mb-3">Quantum Computing</h3>
474
+ <p class="text-cyberlight/70 mb-4">
475
+ Accessories, tools, and services for quantum computing development
476
+ </p>
477
+ <div class="flex flex-wrap gap-2 mb-4">
478
+ <span class="feature-badge text-xs bg-cyberpink/20 text-cyberpink px-2 py-1 rounded-full">Hardware</span>
479
+ <span class="feature-badge text-xs bg-cyberpink/20 text-cyberpink px-2 py-1 rounded-full">Software</span>
480
+ <span class="feature-badge text-xs bg-cyberpink/20 text-cyberpink px-2 py-1 rounded-full">Consulting</span>
481
+ </div>
482
+ <a href="#" class="text-cyberpink font-medium flex items-center">
483
+ Explore <i class="fas fa-arrow-right ml-2"></i>
484
+ </a>
485
+ </div>
486
+ </div>
487
+ </div>
488
+ </section>
489
+
490
+ <!-- NFT Marketplace Section -->
491
+ <section id="nft" class="py-16 bg-gradient-to-b from-cyberdark/70 to-cyberdark">
492
+ <div class="container mx-auto px-4">
493
+ <div class="flex flex-col md:flex-row justify-between items-center mb-12">
494
+ <div>
495
+ <h2 class="text-3xl font-bold mb-2">NFT Marketplace</h2>
496
+ <p class="text-cyberlight/80">Create, buy, and sell unique digital assets with blockchain authenticity</p>
497
+ </div>
498
+ <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">
499
+ Explore NFTs
500
+ </button>
501
+ </div>
502
+
503
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
504
+ <!-- NFT 1 -->
505
+ <div class="bg-cyberdark/50 rounded-xl overflow-hidden cyber-border card-hover">
506
+ <div class="h-64 bg-gradient-to-br from-cyberpurple/20 to-cyberblue/20 flex items-center justify-center relative">
507
+ <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">
508
+ <div class="relative z-10 text-center p-4">
509
+ <span class="bg-cyberdark/80 text-cyberpink px-3 py-1 rounded-full text-sm">Digital Art</span>
510
+ </div>
511
+ </div>
512
+ <div class="p-5">
513
+ <div class="flex justify-between items-start mb-3">
514
+ <h3 class="font-bold text-lg">Cyberpunk Dreams #124</h3>
515
+ <span class="bg-cyberpurple/20 text-cyberpurple text-xs px-2 py-1 rounded">1/极客1</span>
516
+ </div>
517
+ <div class="极客flex items-center mb-4">
518
+ <div class="w-6 h-6 rounded-full bg-cyberblue/20 flex items-center justify-center mr-2">
519
+ <i class="fas fa-check text-xs text-cyberblue"></i>
520
+ </div>
521
+ <span class="text-sm text-cyberlight/70">Verified Creator</span>
522
+ </div>
523
+ <div class="flex justify-between items-center">
524
+ <div>
525
+ <p class="text-xs text-cyberlight/60">Current Price</p>
526
+ <p class="font-bold text-cyberblue">0.75 ETH</p>
527
+ </极客div>
528
+ <button class="text-xs bg-cyberpurple/20 hover:bg-cyberpurple/30 text-cyberpurple px-3 py-1 rounded-full transition">
529
+ Place Bid
530
+ </button>
531
+ </div>
532
+ </div>
533
+ </div>
534
+
535
+ <!-- NFT 2 -->
536
+ <div class="bg-cyberdark/50 rounded-xl overflow-hidden cyber-border card-hover">
537
+ <div class="h-64 bg-gradient-to-br from-cyberblue/20 to-cyberpink/20 flex items-center justify-center relative">
538
+ <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">
539
+ <div class="relative z-10 text-center p-4">
540
+ <span class="bg-cyberdark/80 text-cyberblue px-3 py-1 rounded-full text-sm">Music</span>
541
+ </div>
542
+ </div>
543
+ <div class="p-5">
544
+ <div class="flex justify-between items-start mb-3">
545
+ <h3 class="font-bold text-lg">Neon Symphony #45</h3>
546
+ <span class="bg-cyberblue/20 text-cyberblue text-xs px-2 py-1 rounded">1/10</span>
547
+ </div>
548
+ <div class="flex items-center mb-4">
549
+ <div class="w-6 h-6 rounded-full bg-cyberblue/20 flex items-center justify-center mr-2">
550
+ <i class="fas fa-check text-xs text-cyberblue"></i>
551
+ </div>
552
+ <span class="text-sm text-cyberlight/70">Verified Creator</span>
553
+ </div>
554
+ <div class="flex justify-between items-center">
555
+ <div>
556
+ <p class="text-xs text-cyberlight/60">Current Price</p>
557
+ <p class="font-bold text-cyberblue">1.2 ETH</p>
558
+ </div>
559
+ <button class="text-xs bg-cyberblue/20 hover:bg-cyberblue/30 text-cyberblue px-3 py-1 rounded-full transition">
560
+ Place Bid
561
+ </button>
562
+ </div>
563
+ </div>
564
+ </div>
565
+
566
+ <!-- NFT 3 -->
567
+ <div class="bg-cyberdark/50 rounded-xl overflow-hidden cyber-border card-hover">
568
+ <div class="h-64 bg-gradient-to-br from-cyberpink/20 to-cyberpurple/20 flex items-center justify-center relative">
569
+ <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">
570
+ <div class="relative z-10 text-center p-4">
571
+ <span class="bg-cyberdark/80 text-cyberpink px-3 py-1 rounded-full text-sm">Collectible</span>
572
+ </div>
573
+ </div>
574
+ <div class="p-5">
575
+ <div class="flex justify-between items-start mb-3">
576
+ <h3 class="font-bold text-lg">MetaPunk #7892</h3>
577
+ <span class="bg-cyberpink/20 text-cyberpink text-xs px-2 py-1 rounded">1/5000</span>
578
+ </div>
579
+ <div class="flex items-center mb-4">
580
+ <div class="w-6 h-6 rounded-full bg-cyberblue/20 flex items-center justify-center mr-2">
581
+ <i class="fas fa-check text-xs text-cyberblue"></i>
582
+ </div>
583
+ <span class="text-sm text-cyberlight/70">Verified Creator</span>
584
+ </div>
585
+ <div class="flex justify-between items-center">
586
+ <div>
587
+ <p class="text-xs text-cyberlight/60">Current Price</p>
588
+ <p class="font-bold text-cyberblue">0.15 ETH</p>
589
+ </div>
590
+ <button class="text-xs bg-cyberpink/20 hover:bg-cyberpink/30 text-cyberpink px-3 py-1 rounded-full transition">
591
+ Buy Now
592
+ </button>
593
+ </div>
594
+ </div>
595
+ </div>
596
+ </div>
597
+
598
+ <div class="text-center mt-12">
599
+ <button class="px-6 py-3 rounded-full bg-transparent border border-cyberpurple text-cyberpink font-medium hover:bg-cyberpurple/10 transition">
600
+ View All NFTs
601
+ </button>
602
+ </div>
603
+ </div>
604
+ </section>
605
+
606
+ <!-- Real Estate Section -->
607
+ <section id="realestate" class="py-16 bg-cyberdark/70">
608
+ <div class="container mx-auto px-4">
609
+ <div class="text-center mb-16">
610
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Tokenized Real Estate</h2>
611
+ <p class="极客text-xl text-cyberlight/80 max-w-2xl mx-auto">
612
+ Invest in properties worldwide using cryptocurrency. Fractional ownership powered by blockchain.
613
+ </p>
614
+ </div>
615
+
616
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
617
+ <!-- Property 1 -->
618
+ <div class="bg-cyberdark/50 rounded-xl overflow-hidden cyber-border card-hover">
619
+ <div class="h-64 bg-gradient-to-r from-cyberpurple/20 to-cyberblue/20 relative">
620
+ <img src="https://via.placeholder.com/800x400/9极客d00ff/ffffff?text=Lisbon+Apartment" class="absolute inset-0 w-full h-full object-cover opacity-70" alt="Property">
621
+ <div class="absolute bottom-4 left-4">
622
+ <span class="bg-cyberdark/80 text-white px-3 py-1 rounded-full text-sm">Portugal</span>
623
+ </div>
624
+ </div>
625
+ <div class="p-6">
626
+ <h3 class="text-xl font-bold mb-2">Modern Apartment in Lisbon</h3>
627
+ <div class="flex items-center mb-4">
628
+ <i class="fas fa-map-marker-alt text-cyberpink mr-2"></i>
629
+ <span class="text-cyberlight/70">Alfama District, Lisbon</span>
630
+ </div>
631
+ <div class="grid grid-cols-3 gap-4 mb-4">
632
+ <div>
633
+ <p class="text-xs text-cyberlight/60">Price</p>
634
+ <p class="font-bold text-cyberblue">25 ETH</p>
635
+ </div>
636
+ <div>
637
+ <p class="text-xs text-cyberlight/60">Size</p>
638
+ <p class="font-bold">85 m²</p>
639
+ </div>
640
+ <div>
641
+ <p class="text-xs text-cyberlight/60">Tokens</p>
642
+ <p class="font-bold">10,000 W3D</极客p>
643
+ </div>
644
+ </div>
645
+ <p class="text-cyberlight/70 mb-4">
646
+ Beautiful 2-bedroom apartment in historic Alfama district. Fully renovated with modern amenities. Tokenized ownership available.
647
+ </p>
648
+ <div class="flex justify-between items-center">
649
+ <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">
650
+ Invest Now
651
+ </button>
652
+ <button class="px-4 py-2 rounded-full bg-transparent border border-cyberpurple text-cyberpink text-sm font-medium hover:bg-cyberpurple/10 transition">
653
+ View Details
654
+ </button>
655
+ </div>
656
+ </div>
657
+ </div>
658
+
659
+ <!-- Property 2 -->
660
+ <div class="bg-cyberdark/50 rounded-xl overflow-hidden cyber-border card-hover">
661
+ <div class="h-64 bg-gradient-to-r from-cyberblue/20 to-cyberpink/20 relative">
662
+ <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">
663
+ <div class="absolute bottom-4 left-4">
664
+ <span class="bg-cyberdark/80 text-white px-3 py-1 rounded-full text-sm">Dubai</span>
665
+ </div>
666
+ </div>
667
+ <div class="p-6">
668
+ <h3 class="text-xl font-bold mb-2">Luxury Villa in Palm Jumeirah</h3>
669
+ <div class="flex items-center mb-4">
670
+ <i class="fas fa-map-marker-alt text-cyberpink mr-2"></i>
671
+ <span class="text-cyberlight/70">Palm Jumeirah, Dubai</span>
672
+ </div>
673
+ <div class="grid grid-cols-3 gap-4 mb-4">
674
+ <div>
675
+ <p class="text-xs text-cyberlight/60">Price</p>
676
+ <p class="font-bold text-cyberblue">120 ETH</p>
677
+ </div>
678
+ <div>
679
+ <p class="text-xs text-cyberlight/60">Size</p>
680
+ <p class="font-bold">350 m²</p>
681
+ </div>
682
+ <div>
683
+ <p class="text-xs text-cyberlight/60">Tokens</p>
684
+ <p class="font-bold">50,000 W3D</p>
685
+ </div>
686
+ </div>
687
+ <p class="text-cyberlight/70 mb-4">
688
+ Stunning 5-bedroom villa with private beach access and smart home features. Fractional ownership available.
689
+ </p>
690
+ <div class="flex justify-between items-center">
691
+ <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">
692
+ Invest Now
693
+ </button>
694
+ <button class="px-4 py-2 rounded-full bg-transparent border border-cyberpurple text-cyberpink text-sm font-medium hover:bg-cyberpurple/10 transition">
695
+ View Details
696
+ </button>
697
+ </div>
698
+ </div>
699
+ </div>
700
+ </div>
701
+
702
+ <div class="text-center mt-12">
703
+ <button class="px-6 py-3 rounded-full bg-transparent border border-cyberpurple text-cyberpink font-medium hover:bg-cyberpurple/10 transition">
704
+ Browse All Properties
705
+ </button>
706
+ </div>
707
+ </div>
708
+ </section>
709
+
710
+ <!-- Token Economy Section -->
711
+ <section class="py-16 cyber-gradient">
712
+ <div class="container mx-auto px-4">
713
+ <div class="text-center mb-16">
714
+ <h2 class="text-3xl md:text-4xl font-bold mb-4 text-white">Web3District Token Economy</h2>
715
+ <p class="text-xl text-white/80 max极客-w-2xl mx-auto">
716
+ Powering the marketplace with $W3D tokens - stake, govern, and earn rewards
717
+ </p>
718
+ </div>
719
+
720
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
721
+ <!-- Token Utility 1 -->
722
+ <div class="bg-white/10 p-8 rounded-xl backdrop-blur-sm border border-white/10">
723
+ <div class="w-16 h-16 rounded-full bg-white/20 flex items-center justify-center mb-6 mx-auto">
724
+ <极客i class="fas fa-coins text-3xl text-white"></i>
725
+ </div>
726
+ <h3 class="text-xl font-bold mb-4 text-center text-white">Payments</h3>
727
+ <p class="text-white/80 text-center">
728
+ Use $W3D tokens to pay for products and services with discounted fees and exclusive access
729
+ </p>
730
+ </div>
731
+
732
+ <!-- Token Utility 2 -->
733
+ <div class="bg-white/10 p-8 rounded-xl backdrop-blur-sm border border-white/10">
734
+ <div class="w-16 h-16 rounded-full bg-white/20 flex items-center justify-center mb-6 mx-auto">
735
+ <i class="fas fa-vote-yea text-3xl text-white"></i>
736
+ </div>
737
+ <h3 class="text-xl font-bold mb-4 text-center text-white">Governance</h3>
738
+ <p class="text-white/80 text-center">
739
+ Stake tokens to vote on platform decisions, new features, and community proposals
740
+ </p>
741
+ </div>
742
+
743
+ <!-- Token Utility 3 -->
744
+ <div class="bg-white/10 p-8 rounded-xl backdrop-blur-sm border border-white/10">
745
+ <div class="w-16 h-16 rounded-full bg-white/20 flex items-center justify-center mb-6 mx-auto">
746
+ <i class="fas fa-gem text-3xl text-white"></i>
747
+ </div>
748
+ <h3 class="text-xl font-bold mb-4 text-center text-white">Rewards</h3>
749
+ <p class="text-white/80 text-center">
750
+ Earn tokens through participation, referrals, and providing liquidity to the ecosystem
751
+ </p>
752
+ </div>
753
+ </div>
754
+
755
+ <div class="mt-16 bg-cyberdark/80 rounded-xl p-8 max-w-4xl mx-auto border border-white/10">
756
+ <div class="flex flex-col md:flex-row items-center">
757
+ <div class="md:w-1/3 mb-6 md:mb-0 flex justify-center">
758
+ <div class="w-32 h-32 rounded-full cyber-gradient flex items-center justify-center token-icon">
759
+ <span class="text-white font-bold text-2xl">W3D</span>
760
+ </div>
761
+ </div>
762
+ <div class="md:w-2/3 md:pl-8">
763
+ <h3 class="text-2xl font-bold mb-4 text-white">$W3D Token Details</h3>
764
+ <div class="grid grid-cols-2 gap-4 mb-6">
765
+ <div>
766
+ <p class="text-sm text-white/60">Total Supply</p>
767
+ <p class="font-bold text-white">1,000,000,000</p>
768
+ </div>
769
+ <div>
770
+ <p class="text-sm text-white/60">Initial Price</p>
771
+ <p class="font-bold text-white">$0.10</p>
772
+ </div>
773
+ <div>
774
+ <p class="text-sm text-white/60">Blockchain</极客</p>
775
+ <p class="font-bold text-white">Ethereum & Solana</p>
776
+ </div>
777
+ <div>
778
+ <p class="text-sm text-white/60">Token Type</p>
779
+ <p class="font-bold text-white">ERC-20 & SPL</p>
780
+ </div>
781
+ </div>
782
+ <div class="flex flex-wrap gap-3 justify-center md:justify-start">
783
+ <button class="px-6 py-3 rounded-full bg-white text-cyberpurple font-bold hover:bg-white/90 transition">
784
+ Buy $W3D
785
+ </button>
786
+ <button class="px-6 py-3 rounded-full bg-transparent border border-white text-white font-bold hover:bg-white/10 transition">
787
+ Whitepaper
788
+ </button>
789
+ </div>
790
+ </div>
791
+ </div>
792
+ </div>
793
+ </div>
794
+ </section>
795
+
796
+ <!-- Custom Purchase Calculator Section -->
797
+ <section id="calculator" class="py-16 bg-cyberdark/70">
798
+ <div class="container mx-auto px-4">
799
+ <div class="text-center mb-16">
800
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Customize Your Purchase and See Your Savings!</h2>
801
+ <p class="text-xl text-cyberlight/80 max-w-3xl mx-auto">
802
+ Welcome to the Web3 District marketplace! Use our budget calculator to choose from a wide range of services and products, then watch as we calculate your total in real-time.
803
+ </p>
804
+ </div>
805
+
806
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
807
+ <!-- Calculator Form -->
808
+ <div class="bg-cyberdark/50 p-8 rounded-xl cyber-border">
809
+ <h3 class="text-2xl font-bold mb-6 text-cyberpink">Build Your Order</h3>
810
+
811
+ <!-- Product Selection -->
812
+ <div class="mb-8">
813
+ <label class="block text-cyberlight/80 mb-3">1. Select Product/Service</label>
814
+ <select class="calculator-select w-full px-4 py-3 rounded-lg mb-3">
815
+ <option value="">-- Select a product or service --</option>
816
+ <option value="smart-contract">Smart Contract Development</option>
817
+ <option value="website-dev">Web3 Website Development</option>
818
+ <option value="event-pass">VIP Event Pass</option>
819
+ <option value="nft-collection">Custom NFT Collection</option>
820
+ <option value="pr-package">PR & Marketing Package</option>
821
+ <option value="real-estate">Tokenized Real Estate</option>
822
+ </select>
823
+
824
+ <!-- Options will appear based on selection -->
825
+ <div id="product-options" class="mt-4 space-y-4 hidden">
826
+ <div>
827
+ <label class="block text-cyberlight/80 mb-2">Options</label>
828
+ <div class="space-y-2">
829
+ <label class="flex items-center">
830
+ <input type="checkbox" class="calculator-checkbox rounded border-cyberpurple/50 text-cyberpurple focus:ring-cyberpurple mr-2">
831
+ <span>Priority Delivery (+20%)</span>
832
+ </label>
833
+ <label class="flex items-center">
834
+ <input type="checkbox" class="calculator-checkbox rounded border-cyberpurple/50 text-cyberpurple focus:ring-cyberpurple mr-2">
835
+ <span>Extended Support (+15%)</span>
836
+ </label>
837
+ </div>
838
+ </div>
839
+
840
+ <div>
841
+ <label class="block text-cyberlight/80 mb-2">Quantity</label>
842
+ <input type="range" min="1" max="10" value="1" class="calculator-slider w-full mb-2">
843
+ <div class="flex justify-between text-sm text-cyberlight/70">
844
+ <span>1</span>
845
+ <span>10</span>
846
+ </div>
847
+ </div>
848
+ </div>
849
+ </div>
850
+
851
+ <!-- Discount Options -->
852
+ <div class="mb-8">
853
+ <label class="block text-cyberlight/80 mb-3">2. Apply Discounts</label>
854
+ <div class="space-y-3">
855
+ <label class="flex items-center bg-cyberpurple/10 p-3 rounded-lg border border-cyberpurple/30">
856
+ <input type="checkbox" class="calculator-checkbox rounded border-cyberpurple/50 text-cyberpurple focus:ring-cyberpurple mr-3">
857
+ <div>
858
+ <span class="font-medium">First-time Customer (20% off)</span>
859
+ <p class="text-sm text-cyberlight/70">Automatically applied to your first purchase</p>
860
+ </div>
861
+ </label>
862
+ <label class="flex items-center bg-cyberblue/10 p-3 rounded-lg border border-cyberblue/30">
863
+ <input type="checkbox" class="calculator-checkbox rounded border-cyberblue/50 text-cyberblue focus:ring-cyberblue mr-3">
864
+ <div>
865
+ <span class="font-medium">Referral Bonus (10% off)</span>
866
+ <p class="text-sm text-cyberlight/70">Available when your referral spends over 500€</p>
867
+ </div>
868
+ </label>
869
+ </div>
870
+ </div>
871
+
872
+ <!-- Payment Method -->
873
+ <div>
874
+ <label class="block text-cyberlight/80 mb-3">3. Payment Method</label>
875
+ <div class="grid grid-cols-4 gap-3">
876
+ <button class="flex flex-col items-center justify-center p-3 rounded-lg border border-cyberpurple/30 hover:bg-cyberpurple/10 transition">
877
+ <img src="https://cryptologos.cc/logos/ethereum-eth-logo.png" class="w-8 h-8 mb-1" alt="ETH">
878
+ <span class="text-xs">ETH</span>
879
+ </button>
880
+ <button class="flex flex-col items-center justify-center p-3 rounded-lg border border-cyberblue/30 hover:bg-cyberblue/10 transition">
881
+ <img src="https://cryptologos.cc/logos/solana-sol-logo.png" class="w-8 h-8 mb-1" alt="SOL">
882
+ <span class="text-xs">SOL</span>
883
+ </button>
884
+ <button class="flex flex-col items-center justify-center p-3 rounded-lg border border-cyberpink/30 hover:bg-cyberpink/10 transition">
885
+ <img src="https://cryptologos.cc/logos/tether-usdt-logo.png" class="w-8 h-8 mb-1" alt="USDT">
886
+ <span class="text-xs">USDT</span>
887
+ </button>
888
+ <button class="flex flex-col items-center justify-center p-3 rounded-lg border border-cybergreen/30 hover:bg-cybergreen/10 transition">
889
+ <img src="https://cryptologos.cc/logos/usd-coin-usdc-logo.png" class="w-8 h-8 mb-1" alt="USDC">
890
+ <span class="text-xs">USDC</span>
891
+ </button>
892
+ </div>
893
+ </div>
894
+ </div>
895
+
896
+ <!-- Order Summary -->
897
+ <div class="bg-cyberdark/50 p-8 rounded-xl cyber-border">
898
+ <h3 class="text-2xl font-bold mb-6 text-cyberblue">Order Summary</h3>
899
+
900
+ <div class="mb-6">
901
+ <div class="flex justify-between items-center mb-4">
902
+ <h4 class="font-medium">Selected Items</h4>
903
+ <button class="text-xs bg-cyberpurple/20 hover:bg-cyberpurple/30 text-cyberpurple px-2 py-1 rounded-full transition">
904
+ Add Another Item
905
+ </button>
906
+ </div>
907
+
908
+ <div id="order-items" class="space-y-3">
909
+ <!-- Example item (would be dynamically generated) -->
910
+ <div class="summary-item bg-cyberdark/70 p-3 rounded-lg flex justify-between items-center">
911
+ <div>
912
+ <p class="font-medium">Smart Contract Development</p>
913
+ <p class="text-sm text-cyberlight/70">Standard delivery • Qty: 1</p>
914
+ </div>
915
+ <p class="font-bold">1.5 ETH</p>
916
+ </div>
917
+ </div>
918
+ </div>
919
+
920
+ <div class="border-t border-cyberpurple/20 pt-4 mb-6">
921
+ <div class="flex justify-between items-center mb-2">
922
+ <span class="text-cyberlight/70">Subtotal</span>
923
+ <span class="font-medium">1.5 ETH</span>
924
+ </div>
925
+ <div class="flex justify-between items-center mb-2">
926
+ <span class="text-cyberlight/70">Service Fee</span>
927
+ <span class="font-medium">0.15 ETH</span>
928
+ </div>
929
+ <div class="flex justify-between items-center text-cybergreen">
930
+ <span>First-time Discount (20%)</span>
931
+ <span class="font-bold">-0.3 ETH</span>
932
+ </div>
933
+ </div>
934
+
935
+ <div class="border-t border-cyberpurple/20 pt-4 mb-6">
936
+ <div class="flex justify-between items-center">
937
+ <span class="text-lg font-bold">Total</span>
938
+ <div class="text-right">
939
+ <p class="text-xl font-bold text-cyberpink">1.35 ETH</p>
940
+ <p class="text-sm text-cyberlight/70">≈ $2,430.00</p>
941
+ </div>
942
+ </div>
943
+ </div>
944
+
945
+ <div class="bg-cyberpurple/10 border border-cyberpurple/20 rounded-lg p-4 mb-6">
946
+ <div class="flex items-start">
947
+ <div class="bg-cyberpurple/20 text-cyberpurple p-2 rounded-full mr-3">
948
+ <i class="fas fa-gift"></i>
949
+ </div>
950
+ <div>
951
+ <h4 class="font-bold mb-1">Exclusive Discount!</h4>
952
+ <p class="text-sm text-cyberlight/80">First-time customers save 20% on their first purchase!</p>
953
+ </div>
954
+ </div>
955
+ </div>
956
+
957
+ <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">
958
+ <i class="fas fa-lock mr-2"></i>
959
+ Proceed to Checkout
960
+ </button>
961
+
962
+ <div class="mt-4 text-center text-sm text-cyberlight/70">
963
+ <p>Prices are estimates and may vary based on market conditions.</p>
964
+ </div>
965
+ </div>
966
+ </div>
967
+
968
+ <div class="mt-12 bg-cyberdark/80 rounded-xl p-8 border border-cyberpurple/20">
969
+ <h3 class="text-2xl font-bold mb-4 text-center">How It Works</h3>
970
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
971
+ <div class="text-center">
972
+ <div class="w-16 h-16 rounded-full bg-cyberpurple/20 flex items-center justify-center mx-auto mb-4">
973
+ <i class="fas fa-search text-cyberpurple text-2xl"></i>
974
+ </div>
975
+ <h4 class="font-bold mb-2">Browse Our Full Menu</h4>
976
+ <p class="text-cyberlight/70">
977
+ Explore a wide variety of services, from event packages to exclusive merchandise. Simply select what you're interested in.
978
+ </p>
979
+ </div>
980
+ <div class="text-center">
981
+ <div class="w-16 h-16 rounded-full bg-cyberblue/20 flex items-center justify-center mx-auto mb-4">
982
+ <i class="fas fa-cog text-cyberblue text-2xl"></i>
983
+ </div>
984
+ <h4 class="font-bold mb-2">Choose Your Options</h4>
985
+ <p class="text-cyberlight/70">
986
+ Select specific features and quantity for each product. Want more than one? Just adjust the quantity slider.
987
+ </p>
988
+ </div>
989
+ <div class="text-center">
990
+ <div class="w-16 h-16 rounded-full bg-cyberpink/20 flex items-center justify-center mx-auto mb-4">
991
+ <i class="fas fa-calculator text-cyberpink text-2xl"></i>
992
+ </div>
993
+ <h4 class="font-bold mb-2">Instant Calculation</h4>
994
+ <p class="text-cyberlight/70">
995
+ See your total in real-time with all costs transparently displayed. Apply discounts and see your savings!
996
+ </p>
997
+ </div>
998
+ </div>
999
+ </div>
1000
+ </div>
1001
+ </section>
1002
+
1003
+ <!-- CTA Section -->
1004
+ <section class="py-20 bg-gradient-to-br from-cyberpurple/10 to-cyberblue/10">
1005
+ <div class="container mx-auto px-4">
1006
+ <div class="max-w-4xl mx-auto text-center">
1007
+ <h2 class="text-3xl md:text-5xl font-bold mb-6">Join the Web3 Revolution</h2>
1008
+ <p class="text-xl text-cyberlight/80 mb-8">
1009
+ Everything you need for your Web3 journey in one decentralized marketplace
1010
+ </p>
1011
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
1012
+ <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">
1013
+ <i class="fas fa-store"></i>
1014
+ <span>Explore Marketplace</span>
1015
+ </button>
1016
+ <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">
1017
+ <i class="fas fa-wallet"></i>
1018
+ <span>Connect Wallet</span>
1019
+ </button>
1020
+ </div>
1021
+ </div>
1022
+ </div>
1023
+ </section>
1024
+
1025
+ <!-- Footer -->
1026
+ <footer class="bg-cyberdark/90 border-t border-cyberpurple/20 pt-16 pb-8">
1027
+ <div class="container mx-auto px-4">
1028
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-12 mb-12">
1029
+ <!-- Column 1 -->
1030
+ <div class="lg:col-span-2">
1031
+ <div class="flex items-center space-x-2 mb-4">
1032
+ <div class="w-8 h-8 rounded-full cyber-gradient flex items-center justify-center">
1033
+ <span class="text-white font-bold text-sm">W3</span>
1034
+ </div>
1035
+ <span class="text-xl font-bold">Web3District Shop</span>
1036
+ </div>
1037
+ <p class="text-cyberlight/70 mb-4">
1038
+ The ultimate one-stop Web3 marketplace for digital products, services, real estate, and more.
1039
+ </p>
1040
+ <div class="flex space-x-4">
1041
+ <a href="#" class="text-cyberlight/70 hover:text-cyberpink">
1042
+ <i class="fab fa-twitter"></i>
1043
+ </a>
1044
+ <a href="#" class="text-cyberlight/70 hover:text-cyberpink">
1045
+ <i class="fab fa-discord"></i>
1046
+ </a>
1047
+ <a href="#" class="text-cyberlight/70 hover:text-cyberpink">
1048
+ <i class="fab fa-telegram"></i>
1049
+ </a>
1050
+ <a href="#" class="text-cyberlight/70 hover:text-cyberpink">
1051
+ <i class="fab fa-linkedin"></i>
1052
+ </a>
1053
+ </div>
1054
+ </div>
1055
+
1056
+ <!-- Column 2 -->
1057
+ <div>
1058
+ <h3 class="text-lg font-bold mb-4">Marketplace</h3>
1059
+ <ul class="space-y-2">
1060
+ <li><a href="#" class="text-cyberlight/70 hover:text-cyberpink transition">Digital Products</a></li>
1061
+ <li><a href="#" class="text-cyberlight/70 hover:text-cyberpink transition">Event Passes</a></li>
1062
+ <li><a href="#" class="text-cyberlight/70 hover:text-cyberpink transition">Web3 Merch</a></li>
1063
+ <li><a href="#" class="text-cyberlight/70 hover:text-cyberpink transition">Real Estate</a></极客li>
1064
+ <li><a href="#" class="text-cyberlight/70 hover:text-cyberpink transition">NFTs</a></li>
1065
+ </ul>
1066
+ </div>
1067
+
1068
+ <!-- Column 3 -->
1069
+ <div>
1070
+ <h3 class="text-lg font-bold mb-4">Services</h3>
1071
+ <ul class="space-y-2">
1072
+ <li><a href="#" class="text-cyberlight/70 hover:text-cyberpink transition">Smart Contracts</a></li>
1073
+ <li><a href="#" class="text-cyberlight/70 hover:text-cyberpink transition">PR & Marketing</a></li>
1074
+ <li><a href="#" class="text-cyberlight/70 hover:text-cyberpink transition">Media Production</a></li>
1075
+ <li><a href="#" class="text-cyberlight/70 hover:text-cyberpink transition">Investment Packs</a></li>
1076
+ <li><a href="#" class="text-cyberlight/70 hover:text-cyberpink transition">Relocation</a></li>
1077
+ </ul>
1078
+ </div>
1079
+
1080
+ <!-- Column 4 -->
1081
+ <div>
1082
+ <h3 class="text-lg font-bold mb-4">Resources</h3>
1083
+ <ul class="space-y-2">
1084
+ <li><a href="#" class="text-cyberlight/70 hover:text-cyberpink transition">Whitepaper</a></li>
1085
+ <li><a href="#" class="text-cyberlight/70 hover:text-cyberpink transition">Documentation</a></li>
1086
+ <li><a href="#" class="text-cyberlight/70 hover:text-cyberpink transition">Blog</a></li>
1087
+ <li><a href="#" class="text-cyberlight/70 hover:text-cyberpink transition">Community</a></li>
1088
+ <li><a href="#" class="text-cyberlight/70 hover:text-cyberpink transition">Careers</a></li>
1089
+ </ul>
1090
+ </div>
1091
+
1092
+ <!-- Column 5 -->
1093
+ <div id="contact">
1094
+ <h3 class="text-lg font-bold mb-4">Contact Us</h3>
1095
+ <ul class="space-y-2">
1096
+ <li class="flex items-center">
1097
+ <i class="fas fa-envelope text-cyberpurple mr-2"></i>
1098
+ <span class="text-cyberlight/70">hello@web3district.shop</span>
1099
+ </li>
1100
+ <li class="flex items-center">
1101
+ <i class="fas fa-map-marker-alt text-cyberblue mr-2"></i>
1102
+ <span class="text-cyberlight/70">Lisbon, Portugal</span>
1103
+ </li>
1104
+ <li class="flex items-center">
1105
+ <i class="fas fa-phone-alt text-cyberpink mr-2"></i>
1106
+ <span class="text-cyberlight/70">+351 123 456 789</span>
1107
+ </li>
1108
+ </ul>
1109
+ <div class="mt-4">
1110
+ <button class="px-4 py-2 rounded-full bg-transparent border border-cyberpurple text-cyberpink text-sm font-medium hover:bg-cyberpurple/10 transition">
1111
+ Book a Consultation
1112
+ </button>
1113
+ </div>
1114
+ </div>
1115
+ </div>
1116
+
1117
+ <div class="pt-8 border-t border-cyberpurple/10 flex flex-col md:flex-row justify-between items-center">
1118
+ <p class="text-sm text-cyberlight/60 mb-4 md:mb-0">
1119
+ © 2023 Web3District Shop. All rights reserved.
1120
+ </p>
1121
+ <div class="flex space-x-6">
1122
+ <a href="#" class="text-sm text-cyberlight/60 hover:text-cyberpink">Terms</a>
1123
+ <a href="#" class="text-sm text-cyberlight/60 hover:text-cyberpink">Privacy</a>
1124
+ <a href="#" class="text-sm text-cyberlight/60 hover:text-cyberpink">Cookies</a>
1125
+ </div>
1126
+ </div>
1127
+ </div>
1128
+ </footer>
1129
+
1130
+ <!-- Mobile Menu (hidden by default) -->
1131
+ <div class="fixed inset-0 bg-cyberdark/95 z-50 backdrop-blur-lg hidden flex-col items-center justify-center p-6" id="mobileMenu">
1132
+ <button class="absolute top-6 right-6 text-2xl" id="closeMenu">
1133
+ <i class="fas fa-times"></i>
1134
+ </button>
1135
+ <nav class="flex flex-col items-center space-y-8 text-xl">
1136
+ <a href="#marketplace" class="nav-link font-medium hover:text-cyberpink">Marketplace</a>
1137
+ <a href="#services" class="nav-link font-medium hover:text-cyberpink">Services</a>
1138
+ <a href="#nft" class="nav-link font-medium hover:text-cyberpink">NFTs</a>
1139
+ <a href="#realestate" class="nav-link font-medium hover:text-cyberpink">Real Estate</a>
1140
+ <a href="#community" class="nav-link font-medium hover:text-cyberpink">Community</a>
1141
+ </nav>
1142
+ <button class="mt-12 px-6 py-3 rounded-full bg-gradient-to-r from-cyberpurple to-cyberblue text-white font-medium hover:opacity-90 transition flex items-center space-x-2">
1143
+ <i class="fas fa-wallet"></i>
1144
+ <span>Connect Wallet</span>
1145
+ </button>
1146
+ </div>
1147
+
1148
+ <script>
1149
+ // Mobile menu toggle
1150
+ document.querySelector('.md\\:hidden.text-3xl').addEventListener('click', function() {
1151
+ document.getElementById('mobileMenu').classList.remove('hidden');
1152
+ document.getElementById('mobileMenu').classList.add('flex');
1153
+ });
1154
+
1155
+ document.getElementById('closeMenu').addEventListener('click', function() {
1156
+ document.getElementById('mobileMenu').classList.add('hidden');
1157
+ document.getElementById('mobileMenu').classList.remove('flex');
1158
+ });
1159
+
1160
+ // Close mobile menu when clicking on a link
1161
+ document.querySelectorAll('#mobileMenu a').forEach(link => {
1162
+ link.addEventListener('click', function() {
1163
+ document.getElementById('mobileMenu').classList.add('hidden');
1164
+ document.getElementById('mobileMenu').classList.remove('flex');
1165
+ });
1166
+ });
1167
+
1168
+ // Add smooth scrolling to all links
1169
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
1170
+ anchor.addEventListener('click', function (e) {
1171
+ e.preventDefault();
1172
+
1173
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
1174
+ behavior: 'smooth'
1175
+ });
1176
+ });
1177
+ });
1178
+
1179
+ // Connect wallet button functionality
1180
+ document.querySelectorAll('button:has(.fa-wallet)').forEach(button => {
1181
+ button.addEventListener('click', function() {
1182
+ alert('Connect your wallet to access all Web3District Shop features!');
1183
+ });
1184
+ });
1185
+
1186
+ // Calculator functionality
1187
+ const productSelect = document.querySelector('.calculator-select');
1188
+ const productOptions = document.getElementById('product-options');
1189
+
1190
+ productSelect.addEventListener('change', function() {
1191
+ if (this.value) {
1192
+ productOptions.classList.remove('hidden');
1193
+ } else {
1194
+ productOptions.classList.add('hidden');
1195
+ }
1196
+ });
1197
+
1198
+ // Example of dynamic calculation (would be more complex in a real implementation)
1199
+ const sliders = document.querySelectorAll('.calculator-slider');
1200
+ sliders.forEach(slider => {
1201
+ slider.addEventListener('input', function() {
1202
+ // In a real implementation, this would update the order summary
1203
+ console.log(`Slider value changed to: ${this.value}`);
1204
+ });
1205
+ });
1206
+
1207
+ const checkboxes = document.querySelectorAll('.calculator-checkbox');
1208
+ checkboxes.forEach(checkbox => {
1209
+ checkbox.addEventListener('change', function() {
1210
+ // In a real implementation, this would update the order summary
1211
+ console.log(`Checkbox ${this.checked ? 'checked' : 'unchecked'}`);
1212
+ });
1213
+ });
1214
+ </script>
1215
+ <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>
1216
  </html>
1217
+
1218
+
1219
+ <!DOCTYPE html>
1220
+ <html lang="en">
1221
+ <head>
1222
+ <meta charset="UTF-8" />
1223
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
1224
+ <title>Web3District Shop | The Ultimate Web3 Marketplace</title>
1225
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap" rel="stylesheet" />
1226
+ <style>
1227
+ body {
1228
+ margin: 0;
1229
+ font-family: 'Inter', sans-serif;
1230
+ background: #0d0d1d;
1231
+ color: white;
1232
+ }
1233
+ header {
1234
+ display: flex;
1235
+ justify-content: space-between;
1236
+ align-items: center;
1237
+ padding: 1rem 2rem;
1238
+ background: #0b0b18;
1239
+ border-bottom: 1px solid #222;
1240
+ }
1241
+ header h1 {
1242
+ font-size: 1.5rem;
1243
+ background: linear-gradient(to right, #00f0ff, #f000ff);
1244
+ -webkit-background-clip: text;
1245
+ -webkit-text-fill-color: transparent;
1246
+ margin: 0;
1247
+ }
1248
+ nav a {
1249
+ color: #ccc;
1250
+ margin: 0 1rem;
1251
+ text-decoration: none;
1252
+ }
1253
+ .btn {
1254
+ background: linear-gradient(to right, #a020f0, #00f0ff);
1255
+ color: white;
1256
+ border: none;
1257
+ padding: 0.7rem 1.5rem;
1258
+ border-radius: 30px;
1259
+ cursor: pointer;
1260
+ font-weight: bold;
1261
+ }
1262
+ .hero {
1263
+ display: flex;
1264
+ flex-direction: column;
1265
+ align-items: center;
1266
+ text-align: center;
1267
+ padding: 4rem 2rem;
1268
+ }
1269
+ .hero h2 {
1270
+ font-size: 3rem;
1271
+ margin: 0;
1272
+ }
1273
+ .hero h2 span {
1274
+ background: linear-gradient(to right, #00f0ff, #f000ff);
1275
+ -webkit-background-clip: text;
1276
+ -webkit-text-fill-color: transparent;
1277
+ }
1278
+ .hero p {
1279
+ max-width: 700px;
1280
+ margin-top: 1rem;
1281
+ color: #aaa;
1282
+ }
1283
+ .cta {
1284
+ margin-top: 2rem;
1285
+ display: flex;
1286
+ gap: 1rem;
1287
+ flex-wrap: wrap;
1288
+ }
1289
+ .services {
1290
+ display: grid;
1291
+ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
1292
+ gap: 1.5rem;
1293
+ padding: 4rem 2rem;
1294
+ }
1295
+ .card {
1296
+ background: #151530;
1297
+ border-radius: 12px;
1298
+ padding: 1.5rem;
1299
+ display: flex;
1300
+ flex-direction: column;
1301
+ gap: 0.5rem;
1302
+ box-shadow: 0 0 15px rgba(0, 255, 255, 0.1);
1303
+ }
1304
+ .card h3 {
1305
+ margin: 0;
1306
+ font-size: 1.2rem;
1307
+ }
1308
+ .card p {
1309
+ color: #bbb;
1310
+ font-size: 0.95rem;
1311
+ }
1312
+ .tokens {
1313
+ display: flex;
1314
+ gap: 1rem;
1315
+ justify-content: center;
1316
+ margin-top: 2rem;
1317
+ }
1318
+ .token {
1319
+ background: #1a1a2e;
1320
+ padding: 0.5rem 1rem;
1321
+ border-radius: 20px;
1322
+ border: 1px solid #444;
1323
+ }
1324
+ .zebra-benefits {
1325
+ background: #250048;
1326
+ padding: 4rem 2rem;
1327
+ text-align: center;
1328
+ color: white;
1329
+ }
1330
+ .zebra-benefits h2 {
1331
+ font-size: 2rem;
1332
+ margin-bottom: 2rem;
1333
+ }
1334
+ .zebra-grid {
1335
+ display: grid;
1336
+ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
1337
+ gap: 2rem;
1338
+ text-align: center;
1339
+ }
1340
+ .zebra-item {
1341
+ padding: 1rem;
1342
+ border-radius: 12px;
1343
+ background: #361159;
1344
+ }
1345
+ .zebra-item h3 {
1346
+ margin-bottom: 1rem;
1347
+ color: #fff;
1348
+ }
1349
+ .zebra-item p {
1350
+ font-size: 0.95rem;
1351
+ color: #ccc;
1352
+ }
1353
+ </style>
1354
+ </head>
1355
+ <body>
1356
+ <header>
1357
+ <h1>Web3District Shop</h1>
1358
+ <nav>
1359
+ <a href="#">Marketplace</a>
1360
+ <a href="#">Services</a>
1361
+ <a href="#">NFTs</a>
1362
+ <a href="#">Real Estate</a>
1363
+ <a href="#">Community</a>
1364
+ </nav>
1365
+ <button class="btn">Connect Wallet</button>
1366
+ </header>
1367
+
1368
+ <section class="hero">
1369
+ <h2>The Ultimate <span>Web3 Marketplace</span></h2>
1370
+ <p>Buy, sell, and trade everything Web3 — from digital services to real estate. Powered by blockchain for a seamless decentralized experience.</p>
1371
+ <div class="cta">
1372
+ <button class="btn">🛒 Explore Marketplace</button>
1373
+ <button class="btn" style="background: transparent; border: 1px solid #888; color: #fff;">🔗 Connect Wallet</button>
1374
+ </div>
1375
+ <div class="tokens">
1376
+ <div class="token">ETH</div>
1377
+ <div class="token">SOL</div>
1378
+ <div class="token">USDT</div>
1379
+ <div class="token">USDC</div>
1380
+ </div>
1381
+ </section>
1382
+
1383
+ <section class="services">
1384
+ <div
1385
+ class="card">
1386
+ <h3>Smart Contracts</h3>
1387
+ <p>Delivered within hours or 24 hours</p>
1388
+ </div>
1389
+ <div class="card">
1390
+ <h3>Event Passes</h3>
1391
+ <p>Web3, AI, and Quantum Computing</p>
1392
+ </div>
1393
+ <div class="card">
1394
+ <h3>Real Estate</h3>
1395
+ <p>Buy or rent using crypto</p>
1396
+ </div>
1397
+ <div class="card">
1398
+ <h3>PR Services</h3>
1399
+ <p>Worldwide press coverage</p>
1400
+ </div>
1401
+ </section>
1402
+
1403
+ <section class="zebra-benefits">
1404
+ <h2>What You Can Unlock</h2>
1405
+ <div class="zebra-grid">
1406
+ <div class="zebra-item">
1407
+ <h3>Spaces</h3>
1408
+ <p>Access dynamic locations for prototyping, hackathons, workshops, and coworking environments — perfect for innovation and collaboration.</p>
1409
+ </div>
1410
+ <div class="zebra-item">
1411
+ <h3>Communities</h3>
1412
+ <p>Join exclusive founder communities to gain skills, find co-founders, hire talent, and grow through curated events and collaboration hubs.</p>
1413
+ </div>
1414
+ <div class="zebra-item">
1415
+ <h3>Investment Access</h3>
1416
+ <p>Get matched with investors, VCs, syndicates, and government funding opportunities tailored to your startup’s needs.</p>
1417
+ </div>
1418
+ <div class="zebra-item">
1419
+ <h3>Growth Hacking</h3>
1420
+ <p>Expand your user base, boost brand visibility, enter new markets, and strategically relocate with our growth strategy packages.</p>
1421
+ </div>
1422
+ </div>
1423
+ </section>
1424
+ </body>
1425
+ </html>
1426
+
1427
+
1428
+
1429
+
prompts.txt ADDED
File without changes