Hugging Face's logo

Spaces:
Geoko
/
geoko-s
Running

App Files Community
Geoko commited on
Commit
a36024d
·
verified ·
1 Parent(s): 9c3ede1

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +743 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Geoko S
3
- emoji: ⚡
4
- colorFrom: green
5
- colorTo: pink
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: geoko-s
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: gray
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,743 @@
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>Cramele XYZ - NFT Wine Strategy</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 src="https://cdn.jsdelivr.net/npm/@solana/web3.js@1.73.0/lib/index.iife.min.js"></script>
10
+ <style>
11
+ .gradient-bg {
12
+ background: linear-gradient(135deg, #6b46c1 0%, #9f7aea 100%);
13
+ }
14
+ .wine-card {
15
+ transition: all 0.3s ease;
16
+ transform-style: preserve-3d;
17
+ }
18
+ .wine-card:hover {
19
+ transform: translateY(-10px) rotateX(5deg);
20
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
21
+ }
22
+ .nft-preview {
23
+ perspective: 1000px;
24
+ }
25
+ .nft-3d {
26
+ transform-style: preserve-3d;
27
+ transition: transform 0.5s;
28
+ }
29
+ .nft-3d:hover {
30
+ transform: rotateY(15deg);
31
+ }
32
+ .timeline-item:not(:last-child):after {
33
+ content: '';
34
+ position: absolute;
35
+ left: 7px;
36
+ top: 24px;
37
+ height: calc(100% - 24px);
38
+ width: 2px;
39
+ background: #9f7aea;
40
+ }
41
+ .qr-code {
42
+ filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
43
+ }
44
+ </style>
45
+ </head>
46
+ <body class="bg-gray-50 font-sans">
47
+ <!-- Header -->
48
+ <header class="gradient-bg text-white">
49
+ <div class="container mx-auto px-4 py-12">
50
+ <div class="flex justify-between items-center">
51
+ <div>
52
+ <h1 class="text-4xl font-bold">Cramele XYZ</h1>
53
+ <p class="text-xl mt-2">Premium Romanian Wines on Solana Blockchain</p>
54
+ </div>
55
+ <div class="hidden md:block">
56
+ <img src="https://images.unsplash.com/photo-1510812431401-41e2e6f62a6b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="Wine Bottle" class="h-24 rounded-lg shadow-lg">
57
+ </div>
58
+ </div>
59
+ </div>
60
+ </header>
61
+
62
+ <!-- Navigation -->
63
+ <nav class="bg-white shadow-md sticky top-0 z-50">
64
+ <div class="container mx-auto px-4">
65
+ <div class="flex justify-between items-center py-4">
66
+ <div class="flex space-x-8">
67
+ <a href="#strategy" class="text-purple-700 font-medium hover:text-purple-900">Strategy</a>
68
+ <a href="#nfts" class="text-purple-700 font-medium hover:text-purple-900">Our NFTs</a>
69
+ <a href="#roadmap" class="text-purple-700 font-medium hover:text-purple-900">Roadmap</a>
70
+ <a href="#technology" class="text-purple-700 font-medium hover:text-purple-900">Technology</a>
71
+ <a href="#team" class="text-purple-700 font-medium hover:text-purple-900">Team</a>
72
+ </div>
73
+ <button id="connectWallet" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg font-medium transition-colors">
74
+ Connect Wallet
75
+ </button>
76
+ </div>
77
+ </div>
78
+ </nav>
79
+
80
+ <!-- Hero Section -->
81
+ <section class="gradient-bg text-white py-16">
82
+ <div class="container mx-auto px-4">
83
+ <div class="flex flex-col md:flex-row items-center">
84
+ <div class="md:w-1/2 mb-8 md:mb-0">
85
+ <h2 class="text-4xl font-bold mb-4">Revolutionizing Wine Authentication with Solana NFTs</h2>
86
+ <p class="text-xl mb-6">Experience the perfect blend of tradition and innovation with our blockchain-verified premium wines.</p>
87
+ <div class="flex space-x-4">
88
+ <a href="#nfts" class="bg-white text-purple-700 hover:bg-gray-100 px-6 py-3 rounded-lg font-bold transition-colors">
89
+ Explore NFTs
90
+ </a>
91
+ <a href="#strategy" class="border-2 border-white text-white hover:bg-white hover:text-purple-700 px-6 py-3 rounded-lg font-bold transition-colors">
92
+ Our Strategy
93
+ </a>
94
+ </div>
95
+ </div>
96
+ <div class="md:w-1/2 flex justify-center nft-preview">
97
+ <div class="relative nft-3d">
98
+ <img src="https://images.unsplash.com/photo-1558160074-4d7d8bdf4256?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80" alt="Wine NFT" class="rounded-xl shadow-2xl h-64 w-64 object-cover">
99
+ <div class="absolute -bottom-4 -right-4 bg-white p-2 rounded-lg shadow-lg">
100
+ <div class="text-xs text-gray-500">Powered by</div>
101
+ <div class="text-purple-600 font-bold">Solana</div>
102
+ </div>
103
+ </div>
104
+ </div>
105
+ </div>
106
+ </div>
107
+ </section>
108
+
109
+ <!-- Strategy Section -->
110
+ <section id="strategy" class="py-16 bg-white">
111
+ <div class="container mx-auto px-4">
112
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Comprehensive NFT Strategy</h2>
113
+
114
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
115
+ <!-- Strategy Card 1 -->
116
+ <div class="bg-gray-50 p-6 rounded-xl shadow-md wine-card">
117
+ <div class="text-purple-600 text-4xl mb-4">
118
+ <i class="fas fa-fingerprint"></i>
119
+ </div>
120
+ <h3 class="text-xl font-bold mb-3">Provenance & Authenticity</h3>
121
+ <p class="text-gray-600">Each bottle gets a unique NFT verifying its origin, production details, and ownership history on the Solana blockchain.</p>
122
+ </div>
123
+
124
+ <!-- Strategy Card 2 -->
125
+ <div class="bg-gray-50 p-6 rounded-xl shadow-md wine-card">
126
+ <div class="text-purple-600 text-4xl mb-4">
127
+ <i class="fas fa-wine-bottle"></i>
128
+ </div>
129
+ <h3 class="text-xl font-bold mb-3">Wine Futures</h3>
130
+ <p class="text-gray-600">NFTs representing future vintages allow collectors to secure allocations before release, with potential for appreciation.</p>
131
+ </div>
132
+
133
+ <!-- Strategy Card 3 -->
134
+ <div class="bg-gray-50 p-6 rounded-xl shadow-md wine-card">
135
+ <div class="text-purple-600 text-4xl mb-4">
136
+ <i class="fas fa-users"></i>
137
+ </div>
138
+ <h3 class="text-xl font-bold mb-3">Membership Tokens</h3>
139
+ <p class="text-gray-600">Exclusive access to private events, vineyard tours, and limited releases through NFT-based membership tiers.</p>
140
+ </div>
141
+
142
+ <!-- Strategy Card 4 -->
143
+ <div class="bg-gray-50 p-6 rounded-xl shadow-md wine-card">
144
+ <div class="text-purple-600 text-4xl mb-4">
145
+ <i class="fas fa-gem"></i>
146
+ </div>
147
+ <h3 class="text-xl font-bold mb-3">Limited Editions</h3>
148
+ <p class="text-gray-600">Ultra-rare vintages paired with digital art NFTs, creating collectible assets that appreciate over time.</p>
149
+ </div>
150
+ </div>
151
+
152
+ <div class="mt-16 bg-purple-50 p-8 rounded-xl border border-purple-100">
153
+ <h3 class="text-2xl font-bold mb-4 text-purple-800">Implementation Phases</h3>
154
+
155
+ <div class="space-y-8">
156
+ <!-- Phase 1 -->
157
+ <div class="flex items-start">
158
+ <div class="bg-purple-600 text-white rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mr-4 mt-1">
159
+ 1
160
+ </div>
161
+ <div>
162
+ <h4 class="text-xl font-bold mb-2 text-gray-800">Strategy & Planning (2 Weeks)</h4>
163
+ <p class="text-gray-600">Deep brand audit, blockchain selection, tokenomics design, and legal compliance review.</p>
164
+ </div>
165
+ </div>
166
+
167
+ <!-- Phase 2 -->
168
+ <div class="flex items-start">
169
+ <div class="bg-purple-600 text-white rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mr-4 mt-1">
170
+ 2
171
+ </div>
172
+ <div>
173
+ <h4 class="text-xl font-bold mb-2 text-gray-800">NFT Creation (4-6 Weeks)</h4>
174
+ <p class="text-gray-600">Smart contract development, NFT design, marketplace integration, and QR code implementation.</p>
175
+ </div>
176
+ </div>
177
+
178
+ <!-- Phase 3 -->
179
+ <div class="flex items-start">
180
+ <div class="bg-purple-600 text-white rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mr-4 mt-1">
181
+ 3
182
+ </div>
183
+ <div>
184
+ <h4 class="text-xl font-bold mb-2 text-gray-800">Marketing & Community (Ongoing)</h4>
185
+ <p class="text-gray-600">Content marketing, social campaigns, influencer partnerships, and community building.</p>
186
+ </div>
187
+ </div>
188
+ </div>
189
+ </div>
190
+ </div>
191
+ </section>
192
+
193
+ <!-- NFT Showcase -->
194
+ <section id="nfts" class="py-16 bg-gray-50">
195
+ <div class="container mx-auto px-4">
196
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Our NFT Collections</h2>
197
+
198
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
199
+ <!-- NFT 1 -->
200
+ <div class="bg-white rounded-xl overflow-hidden shadow-lg wine-card">
201
+ <div class="relative">
202
+ <img src="https://images.unsplash.com/photo-1558160074-4d7d8bdf4256?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Authenticity NFT" class="w-full h-64 object-cover">
203
+ <div class="absolute top-4 right-4 bg-purple-600 text-white px-3 py-1 rounded-full text-sm font-bold">
204
+ Provenance
205
+ </div>
206
+ </div>
207
+ <div class="p-6">
208
+ <h3 class="text-xl font-bold mb-2">Bottle Authentication</h3>
209
+ <p class="text-gray-600 mb-4">Digital certificate of authenticity for each physical bottle, with full production history.</p>
210
+ <div class="flex justify-between items-center">
211
+ <span class="text-purple-600 font-bold">500 SOL</span>
212
+ <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
213
+ View Details
214
+ </button>
215
+ </div>
216
+ </div>
217
+ </div>
218
+
219
+ <!-- NFT 2 -->
220
+ <div class="bg-white rounded-xl overflow-hidden shadow-lg wine-card">
221
+ <div class="relative">
222
+ <img src="https://images.unsplash.com/photo-1479064555552-3ef4979f8908?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Membership NFT" class="w-full h-64 object-cover">
223
+ <div class="absolute top-4 right-4 bg-purple-600 text-white px-3 py-1 rounded-full text-sm font-bold">
224
+ Membership
225
+ </div>
226
+ </div>
227
+ <div class="p-6">
228
+ <h3 class="text-xl font-bold mb-2">Vineyard Club</h3>
229
+ <p class="text-gray-600 mb-4">Exclusive access to private events, early releases, and VIP experiences.</p>
230
+ <div class="flex justify-between items-center">
231
+ <span class="text-purple-600 font-bold">1,200 SOL</span>
232
+ <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
233
+ View Details
234
+ </button>
235
+ </div>
236
+ </div>
237
+ </div>
238
+
239
+ <!-- NFT 3 -->
240
+ <div class="bg-white rounded-xl overflow-hidden shadow-lg wine-card">
241
+ <div class="relative">
242
+ <img src="https://images.unsplash.com/photo-1568219656418-15c329312bf1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Future NFT" class="w-full h-64 object-cover">
243
+ <div class="absolute top-4 right-4 bg-purple-600 text-white px-3 py-1 rounded-full text-sm font-bold">
244
+ Futures
245
+ </div>
246
+ </div>
247
+ <div class="p-6">
248
+ <h3 class="text-xl font-bold mb-2">2025 Reserve</h3>
249
+ <p class="text-gray-600 mb-4">Pre-purchase rights to our 2025 vintage before bottling, with guaranteed allocation.</p>
250
+ <div class="flex justify-between items-center">
251
+ <span class="text-purple-600 font-bold">800 SOL</span>
252
+ <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
253
+ View Details
254
+ </button>
255
+ </div>
256
+ </div>
257
+ </div>
258
+ </div>
259
+
260
+ <div class="mt-12 text-center">
261
+ <button class="border-2 border-purple-600 text-purple-600 hover:bg-purple-600 hover:text-white px-6 py-3 rounded-lg font-bold transition-colors">
262
+ View All Collections
263
+ </button>
264
+ </div>
265
+ </div>
266
+ </section>
267
+
268
+ <!-- QR Integration -->
269
+ <section class="py-16 bg-white">
270
+ <div class="container mx-auto px-4">
271
+ <div class="flex flex-col md:flex-row items-center">
272
+ <div class="md:w-1/2 mb-8 md:mb-0 flex justify-center">
273
+ <div class="relative">
274
+ <img src="https://images.unsplash.com/photo-1558160074-4d7d8bdf4256?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80" alt="Wine Bottle" class="h-64 rounded-lg shadow-lg">
275
+ <div class="absolute -bottom-4 -right-4 bg-white p-3 rounded-lg shadow-xl qr-code">
276
+ <img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=https://cramele-xyz-nft.com/bottle/12345" alt="QR Code" class="h-24 w-24">
277
+ </div>
278
+ </div>
279
+ </div>
280
+ <div class="md:w-1/2 md:pl-12">
281
+ <h2 class="text-3xl font-bold mb-6 text-gray-800">Seamless Physical-Digital Connection</h2>
282
+ <p class="text-gray-600 mb-6">Each bottle features a unique QR code linking to its Solana NFT, providing instant verification of authenticity and access to exclusive content about the wine's journey from vine to bottle.</p>
283
+ <ul class="space-y-3">
284
+ <li class="flex items-start">
285
+ <i class="fas fa-check-circle text-purple-600 mt-1 mr-2"></i>
286
+ <span class="text-gray-700">Instant verification of bottle authenticity</span>
287
+ </li>
288
+ <li class="flex items-start">
289
+ <i class="fas fa-check-circle text-purple-600 mt-1 mr-2"></i>
290
+ <span class="text-gray-700">Detailed production history and terroir data</span>
291
+ </li>
292
+ <li class="flex items-start">
293
+ <i class="fas fa-check-circle text-purple-600 mt-1 mr-2"></i>
294
+ <span class="text-gray-700">Exclusive digital content for NFT holders</span>
295
+ </li>
296
+ <li class="flex items-start">
297
+ <i class="fas fa-check-circle text-purple-600 mt-1 mr-2"></i>
298
+ <span class="text-gray-700">Secure ownership transfer on secondary market</span>
299
+ </li>
300
+ </ul>
301
+ </div>
302
+ </div>
303
+ </div>
304
+ </section>
305
+
306
+ <!-- Roadmap -->
307
+ <section id="roadmap" class="py-16 bg-purple-50">
308
+ <div class="container mx-auto px-4">
309
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Project Roadmap</h2>
310
+
311
+ <div class="relative">
312
+ <!-- Timeline Item 1 -->
313
+ <div class="relative timeline-item pl-8 pb-8">
314
+ <div class="absolute left-0 bg-purple-600 text-white rounded-full w-6 h-6 flex items-center justify-center">
315
+ <i class="fas fa-check text-xs"></i>
316
+ </div>
317
+ <div class="bg-white p-6 rounded-xl shadow-md">
318
+ <div class="flex justify-between items-start mb-2">
319
+ <h3 class="text-xl font-bold text-purple-800">Q3 2023</h3>
320
+ <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm font-medium">Completed</span>
321
+ </div>
322
+ <p class="text-gray-600">Strategy development and smart contract architecture finalized. First NFT designs completed.</p>
323
+ </div>
324
+ </div>
325
+
326
+ <!-- Timeline Item 2 -->
327
+ <div class="relative timeline-item pl-8 pb-8">
328
+ <div class="absolute left-0 bg-purple-600 text-white rounded-full w-6 h-6 flex items-center justify-center">
329
+ <i class="fas fa-check text-xs"></i>
330
+ </div>
331
+ <div class="bg-white p-6 rounded-xl shadow-md">
332
+ <div class="flex justify-between items-start mb-2">
333
+ <h3 class="text-xl font-bold text-purple-800">Q4 2023</h3>
334
+ <span class="bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm font-medium">In Progress</span>
335
+ </div>
336
+ <p class="text-gray-600">Launch of Authenticity NFTs for current vintages. Membership NFT presale begins.</p>
337
+ </div>
338
+ </div>
339
+
340
+ <!-- Timeline Item 3 -->
341
+ <div class="relative timeline-item pl-8 pb-8">
342
+ <div class="absolute left-0 bg-purple-100 border-2 border-purple-600 text-purple-800 rounded-full w-6 h-6 flex items-center justify-center">
343
+ <span class="text-xs font-bold">3</span>
344
+ </div>
345
+ <div class="bg-white p-6 rounded-xl shadow-md">
346
+ <div class="flex justify-between items-start mb-2">
347
+ <h3 class="text-xl font-bold text-purple-800">Q1 2024</h3>
348
+ <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm font-medium">Planned</span>
349
+ </div>
350
+ <p class="text-gray-600">Wine Futures NFT launch for 2025 vintage. First exclusive members-only event.</p>
351
+ </div>
352
+ </div>
353
+
354
+ <!-- Timeline Item 4 -->
355
+ <div class="relative pl-8">
356
+ <div class="absolute left-0 bg-purple-100 border-2 border-purple-600 text-purple-800 rounded-full w-6 h-6 flex items-center justify-center">
357
+ <span class="text-xs font-bold">4</span>
358
+ </div>
359
+ <div class="bg-white p-6 rounded-xl shadow-md">
360
+ <div class="flex justify-between items-start mb-2">
361
+ <h3 class="text-xl font-bold text-purple-800">Q2 2024</h3>
362
+ <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm font-medium">Planned</span>
363
+ </div>
364
+ <p class="text-gray-600">Limited Edition artist collaboration NFTs. Expansion to international markets.</p>
365
+ </div>
366
+ </div>
367
+ </div>
368
+ </div>
369
+ </section>
370
+
371
+ <!-- Technology Stack -->
372
+ <section id="technology" class="py-16 bg-white">
373
+ <div class="container mx-auto px-4">
374
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Technology Stack</h2>
375
+
376
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
377
+ <!-- Tech 1 -->
378
+ <div class="bg-gray-50 p-6 rounded-xl text-center">
379
+ <div class="text-purple-600 text-5xl mb-4">
380
+ <i class="fab fa-ethereum"></i>
381
+ </div>
382
+ <h3 class="text-lg font-bold mb-2">Solana Blockchain</h3>
383
+ <p class="text-gray-600 text-sm">High-speed, low-cost transactions for seamless NFT experiences</p>
384
+ </div>
385
+
386
+ <!-- Tech 2 -->
387
+ <div class="bg-gray-50 p-6 rounded-xl text-center">
388
+ <div class="text-purple-600 text-5xl mb-4">
389
+ <i class="fas fa-file-contract"></i>
390
+ </div>
391
+ <h3 class="text-lg font-bold mb-2">Smart Contracts</h3>
392
+ <p class="text-gray-600 text-sm">Secure, transparent rules for all NFT transactions and utilities</p>
393
+ </div>
394
+
395
+ <!-- Tech 3 -->
396
+ <div class="bg-gray-50 p-6 rounded-xl text-center">
397
+ <div class="text-purple-600 text-5xl mb-4">
398
+ <i class="fas fa-database"></i>
399
+ </div>
400
+ <h3 class="text-lg font-bold mb-2">IPFS Storage</h3>
401
+ <p class="text-gray-600 text-sm">Decentralized storage for NFT metadata ensuring permanence</p>
402
+ </div>
403
+
404
+ <!-- Tech 4 -->
405
+ <div class="bg-gray-50 p-6 rounded-xl text-center">
406
+ <div class="text-purple-600 text-5xl mb-4">
407
+ <i class="fas fa-qrcode"></i>
408
+ </div>
409
+ <h3 class="text-lg font-bold mb-2">QR Integration</h3>
410
+ <p class="text-gray-600 text-sm">Bridging physical bottles with their digital NFT counterparts</p>
411
+ </div>
412
+ </div>
413
+
414
+ <div class="mt-12 bg-purple-50 p-8 rounded-xl">
415
+ <div class="flex flex-col md:flex-row items-center">
416
+ <div class="md:w-1/2 mb-6 md:mb-0">
417
+ <h3 class="text-2xl font-bold mb-4 text-purple-800">Marketplace Integration</h3>
418
+ <p class="text-gray-600 mb-4">Our NFTs will be available on leading Solana marketplaces as well as our own custom platform designed specifically for wine collectors.</p>
419
+ <div class="flex flex-wrap gap-3">
420
+ <span class="bg-white px-3 py-1 rounded-full text-sm font-medium shadow-sm">Magic Eden</span>
421
+ <span class="bg-white px-3 py-1 rounded-full text-sm font-medium shadow-sm">Tensor</span>
422
+ <span class="bg-white px-3 py-1 rounded-full text-sm font-medium shadow-sm">SolSea</span>
423
+ <span class="bg-white px-3 py-1 rounded-full text-sm font-medium shadow-sm">Custom Platform</span>
424
+ </div>
425
+ </div>
426
+ <div class="md:w-1/2 flex justify-center">
427
+ <img src="https://images.unsplash.com/photo-1639762681057-408e52192e55?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80" alt="NFT Marketplace" class="rounded-lg shadow-lg h-48">
428
+ </div>
429
+ </div>
430
+ </div>
431
+ </div>
432
+ </section>
433
+
434
+ <!-- Team Section -->
435
+ <section id="team" class="py-16 bg-gray-50">
436
+ <div class="container mx-auto px-4">
437
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Our Expert Team</h2>
438
+
439
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
440
+ <!-- Team Member 1 -->
441
+ <div class="bg-white p-6 rounded-xl shadow-md text-center">
442
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Alexandra Popescu" class="w-24 h-24 rounded-full mx-auto mb-4 object-cover">
443
+ <h3 class="text-xl font-bold mb-1">Alexandra Popescu</h3>
444
+ <p class="text-purple-600 font-medium mb-3">Blockchain Strategist</p>
445
+ <p class="text-gray-600 text-sm">10+ years in blockchain development with focus on luxury goods authentication</p>
446
+ </div>
447
+
448
+ <!-- Team Member 2 -->
449
+ <div class="bg-white p-6 rounded-xl shadow-md text-center">
450
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Mihai Ionescu" class="w-24 h-24 rounded-full mx-auto mb-4 object-cover">
451
+ <h3 class="text-xl font-bold mb-1">Mihai Ionescu</h3>
452
+ <p class="text-purple-600 font-medium mb-3">Smart Contract Developer</p>
453
+ <p class="text-gray-600 text-sm">Solana expert specializing in NFT smart contracts with 50+ deployed projects</p>
454
+ </div>
455
+
456
+ <!-- Team Member 3 -->
457
+ <div class="bg-white p-6 rounded-xl shadow-md text-center">
458
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Elena Dumitrescu" class="w-24 h-24 rounded-full mx-auto mb-4 object-cover">
459
+ <h3 class="text-xl font-bold mb-1">Elena Dumitrescu</h3>
460
+ <p class="text-purple-600 font-medium mb-3">Wine Industry Consultant</p>
461
+ <p class="text-gray-600 text-sm">Master Sommelier with deep connections in Romanian wine industry</p>
462
+ </div>
463
+
464
+ <!-- Team Member 4 -->
465
+ <div class="bg-white p-6 rounded-xl shadow-md text-center">
466
+ <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Andrei Vasilescu" class="w-24 h-24 rounded-full mx-auto mb-4 object-cover">
467
+ <h3 class="text-xl font-bold mb-1">Andrei Vasilescu</h3>
468
+ <p class="text-purple-600 font-medium mb-3">Marketing Director</p>
469
+ <p class="text-gray-600 text-sm">Digital marketing expert specializing in NFT and crypto communities</p>
470
+ </div>
471
+ </div>
472
+ </div>
473
+ </section>
474
+
475
+ <!-- CTA Section -->
476
+ <section class="gradient-bg text-white py-16">
477
+ <div class="container mx-auto px-4 text-center">
478
+ <h2 class="text-3xl font-bold mb-6">Ready to Elevate Your Wine Experience?</h2>
479
+ <p class="text-xl mb-8 max-w-2xl mx-auto">Join the future of wine collecting with Cramele XYZ's Solana NFTs.</p>
480
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
481
+ <button id="ctaConnect" class="bg-white hover:bg-gray-100 text-purple-700 px-8 py-4 rounded-lg font-bold text-lg transition-colors">
482
+ Connect Wallet & Explore
483
+ </button>
484
+ <a href="#contact" class="border-2 border-white hover:bg-white hover:text-purple-700 text-white px-8 py-4 rounded-lg font-bold text-lg transition-colors">
485
+ Contact Our Team
486
+ </a>
487
+ </div>
488
+ </div>
489
+ </section>
490
+
491
+ <!-- Contact Section -->
492
+ <section id="contact" class="py-16 bg-white">
493
+ <div class="container mx-auto px-4">
494
+ <div class="max-w-4xl mx-auto bg-gray-50 rounded-xl shadow-md overflow-hidden">
495
+ <div class="md:flex">
496
+ <div class="md:w-1/2 gradient-bg text-white p-8">
497
+ <h2 class="text-2xl font-bold mb-6">Get In Touch</h2>
498
+ <p class="mb-6">Have questions about our NFT strategy or want to discuss a custom solution for your winery? Our team is ready to help.</p>
499
+ <div class="space-y-4">
500
+ <div class="flex items-start">
501
+ <i class="fas fa-envelope mt-1 mr-4"></i>
502
+ <div>
503
+ <h4 class="font-bold">Email</h4>
504
+ <p>nft@cramele-xyz.com</p>
505
+ </div>
506
+ </div>
507
+ <div class="flex items-start">
508
+ <i class="fas fa-phone mt-1 mr-4"></i>
509
+ <div>
510
+ <h4 class="font-bold">Phone</h4>
511
+ <p>+40 123 456 789</p>
512
+ </div>
513
+ </div>
514
+ <div class="flex items-start">
515
+ <i class="fas fa-map-marker-alt mt-1 mr-4"></i>
516
+ <div>
517
+ <h4 class="font-bold">Office</h4>
518
+ <p>Bucharest, Romania</p>
519
+ </div>
520
+ </div>
521
+ </div>
522
+ </div>
523
+ <div class="md:w-1/2 p-8">
524
+ <h3 class="text-2xl font-bold mb-6 text-gray-800">Send Us a Message</h3>
525
+ <form>
526
+ <div class="mb-4">
527
+ <label class="block text-gray-700 mb-2" for="name">Name</label>
528
+ <input type="text" id="name" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600">
529
+ </div>
530
+ <div class="mb-4">
531
+ <label class="block text-gray-700 mb-2" for="email">Email</label>
532
+ <input type="email" id="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600">
533
+ </div>
534
+ <div class="mb-4">
535
+ <label class="block text-gray-700 mb-2" for="message">Message</label>
536
+ <textarea id="message" rows="4" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600"></textarea>
537
+ </div>
538
+ <button type="submit" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg font-bold transition-colors w-full">
539
+ Send Message
540
+ </button>
541
+ </form>
542
+ </div>
543
+ </div>
544
+ </div>
545
+ </div>
546
+ </section>
547
+
548
+ <!-- Footer -->
549
+ <footer class="bg-gray-900 text-white py-12">
550
+ <div class="container mx-auto px-4">
551
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
552
+ <div>
553
+ <h3 class="text-xl font-bold mb-4">Cramele XYZ</h3>
554
+ <p class="text-gray-400">Bridging Romanian wine tradition with blockchain innovation through Solana NFTs.</p>
555
+ </div>
556
+ <div>
557
+ <h4 class="font-bold mb-4">Quick Links</h4>
558
+ <ul class="space-y-2">
559
+ <li><a href="#strategy" class="text-gray-400 hover:text-white transition-colors">Strategy</a></li>
560
+ <li><a href="#nfts" class="text-gray-400 hover:text-white transition-colors">NFT Collections</a></li>
561
+ <li><a href="#roadmap" class="text-gray-400 hover:text-white transition-colors">Roadmap</a></li>
562
+ <li><a href="#team" class="text-gray-400 hover:text-white transition-colors">Our Team</a></li>
563
+ </ul>
564
+ </div>
565
+ <div>
566
+ <h4 class="font-bold mb-4">Resources</h4>
567
+ <ul class="space-y-2">
568
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Whitepaper</a></li>
569
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Smart Contract</a></li>
570
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">FAQ</a></li>
571
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Privacy Policy</a></li>
572
+ </ul>
573
+ </div>
574
+ <div>
575
+ <h4 class="font-bold mb-4">Connect</h4>
576
+ <div class="flex space-x-4 mb-4">
577
+ <a href="#" class="text-gray-400 hover:text-white text-2xl"><i class="fab fa-twitter"></i></a>
578
+ <a href="#" class="text-gray-400 hover:text-white text-2xl"><i class="fab fa-discord"></i></a>
579
+ <a href="#" class="text-gray-400 hover:text-white text-2xl"><i class="fab fa-instagram"></i></a>
580
+ <a href="#" class="text-gray-400 hover:text-white text-2xl"><i class="fab fa-telegram"></i></a>
581
+ </div>
582
+ <p class="text-gray-400">Subscribe to our newsletter</p>
583
+ <div class="flex mt-2">
584
+ <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-lg focus:outline-none text-gray-800 w-full">
585
+ <button class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-r-lg">
586
+ <i class="fas fa-paper-plane"></i>
587
+ </button>
588
+ </div>
589
+ </div>
590
+ </div>
591
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
592
+ <p>&copy; 2023 Cramele XYZ NFT Project. All rights reserved.</p>
593
+ </div>
594
+ </div>
595
+ </footer>
596
+
597
+ <!-- Wallet Connection Modal -->
598
+ <div id="walletModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
599
+ <div class="bg-white rounded-xl p-8 max-w-md w-full">
600
+ <div class="flex justify-between items-center mb-6">
601
+ <h3 class="text-2xl font-bold text-gray-800">Connect Wallet</h3>
602
+ <button id="closeModal" class="text-gray-500 hover:text-gray-700">
603
+ <i class="fas fa-times"></i>
604
+ </button>
605
+ </div>
606
+ <p class="text-gray-600 mb-6">Choose your preferred Solana wallet to connect and explore our NFT collections.</p>
607
+
608
+ <div class="space-y-3">
609
+ <button class="wallet-btn flex items-center w-full p-4 border rounded-lg hover:bg-gray-50 transition-colors">
610
+ <img src="https://phantom.app/favicon.ico" alt="Phantom" class="w-8 h-8 mr-4">
611
+ <span class="font-medium">Phantom</span>
612
+ </button>
613
+ <button class="wallet-btn flex items-center w-full p-4 border rounded-lg hover:bg-gray-50 transition-colors">
614
+ <img src="https://solflare.com/favicon.ico" alt="Solflare" class="w-8 h-8 mr-4">
615
+ <span class="font-medium">Solflare</span>
616
+ </button>
617
+ <button class="wallet-btn flex items-center w-full p-4 border rounded-lg hover:bg-gray-50 transition-colors">
618
+ <img src="https://backpack.app/favicon.ico" alt="Backpack" class="w-8 h-8 mr-4">
619
+ <span class="font-medium">Backpack</span>
620
+ </button>
621
+ <button class="wallet-btn flex items-center w-full p-4 border rounded-lg hover:bg-gray-50 transition-colors">
622
+ <img src="https://getglow.app/favicon.ico" alt="Glow" class="w-8 h-8 mr-4">
623
+ <span class="font-medium">Glow</span>
624
+ </button>
625
+ </div>
626
+
627
+ <div class="mt-6 text-center text-sm text-gray-500">
628
+ <p>Don't have a wallet? <a href="#" class="text-purple-600 hover:underline">Learn how to set one up</a></p>
629
+ </div>
630
+ </div>
631
+ </div>
632
+
633
+ <!-- Connected Wallet Indicator -->
634
+ <div id="walletConnected" class="fixed bottom-4 right-4 bg-purple-600 text-white px-4 py-2 rounded-full shadow-lg hidden items-center">
635
+ <i class="fas fa-wallet mr-2"></i>
636
+ <span id="walletAddress" class="font-medium">Connected</span>
637
+ <button id="disconnectWallet" class="ml-4 text-white hover:text-gray-200">
638
+ <i class="fas fa-times"></i>
639
+ </button>
640
+ </div>
641
+
642
+ <script>
643
+ // Wallet connection functionality
644
+ document.addEventListener('DOMContentLoaded', () => {
645
+ const connectBtn = document.getElementById('connectWallet');
646
+ const ctaConnect = document.getElementById('ctaConnect');
647
+ const walletModal = document.getElementById('walletModal');
648
+ const closeModal = document.getElementById('closeModal');
649
+ const walletConnected = document.getElementById('walletConnected');
650
+ const disconnectWallet = document.getElementById('disconnectWallet');
651
+ const walletAddress = document.getElementById('walletAddress');
652
+ const walletBtns = document.querySelectorAll('.wallet-btn');
653
+
654
+ // Check if wallet is already connected
655
+ if(localStorage.getItem('walletConnected') === 'true') {
656
+ connectBtn.textContent = 'Connected';
657
+ connectBtn.classList.remove('bg-purple-600', 'hover:bg-purple-700');
658
+ connectBtn.classList.add('bg-green-500', 'hover:bg-green-600');
659
+ walletConnected.classList.remove('hidden');
660
+ walletConnected.classList.add('flex');
661
+
662
+ // Display shortened wallet address
663
+ const storedAddress = localStorage.getItem('walletAddress');
664
+ if(storedAddress) {
665
+ walletAddress.textContent = `${storedAddress.substring(0, 4)}...${storedAddress.substring(storedAddress.length - 4)}`;
666
+ }
667
+ }
668
+
669
+ // Open modal
670
+ connectBtn.addEventListener('click', () => {
671
+ walletModal.classList.remove('hidden');
672
+ });
673
+
674
+ ctaConnect.addEventListener('click', () => {
675
+ walletModal.classList.remove('hidden');
676
+ });
677
+
678
+ // Close modal
679
+ closeModal.addEventListener('click', () => {
680
+ walletModal.classList.add('hidden');
681
+ });
682
+
683
+ // Wallet connection simulation
684
+ walletBtns.forEach(btn => {
685
+ btn.addEventListener('click', () => {
686
+ // Simulate wallet connection
687
+ const solana = window.solana;
688
+ if(solana) {
689
+ // In a real app, you would connect to the wallet here
690
+ // For demo purposes, we'll simulate it
691
+ const demoAddress = 'HN3Xgf...W4e5z'; // Shortened for display
692
+
693
+ // Update UI
694
+ connectBtn.textContent = 'Connected';
695
+ connectBtn.classList.remove('bg-purple-600', 'hover:bg-purple-700');
696
+ connectBtn.classList.add('bg-green-500', 'hover:bg-green-600');
697
+ walletConnected.classList.remove('hidden');
698
+ walletConnected.classList.add('flex');
699
+ walletAddress.textContent = demoAddress;
700
+ walletModal.classList.add('hidden');
701
+
702
+ // Store connection state
703
+ localStorage.setItem('walletConnected', 'true');
704
+ localStorage.setItem('walletAddress', demoAddress);
705
+ } else {
706
+ alert('Please install a Solana wallet extension like Phantom to connect.');
707
+ }
708
+ });
709
+ });
710
+
711
+ // Disconnect wallet
712
+ disconnectWallet.addEventListener('click', () => {
713
+ connectBtn.textContent = 'Connect Wallet';
714
+ connectBtn.classList.remove('bg-green-500', 'hover:bg-green-600');
715
+ connectBtn.classList.add('bg-purple-600', 'hover:bg-purple-700');
716
+ walletConnected.classList.add('hidden');
717
+ walletConnected.classList.remove('flex');
718
+
719
+ // Clear connection state
720
+ localStorage.removeItem('walletConnected');
721
+ localStorage.removeItem('walletAddress');
722
+ });
723
+
724
+ // Smooth scrolling for anchor links
725
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
726
+ anchor.addEventListener('click', function (e) {
727
+ e.preventDefault();
728
+
729
+ const targetId = this.getAttribute('href');
730
+ if(targetId === '#') return;
731
+
732
+ const targetElement = document.querySelector(targetId);
733
+ if(targetElement) {
734
+ targetElement.scrollIntoView({
735
+ behavior: 'smooth'
736
+ });
737
+ }
738
+ });
739
+ });
740
+ });
741
+ </script>
742
+ <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=Geoko/geoko-s" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
743
+ </html>
prompts.txt ADDED
File without changes