Hugging Face's logo

Spaces:
hamadali1
/
ax1
Running

App Files Community
hamadali1 commited on
Commit
67503da
·
verified ·
1 Parent(s): 8a4752a

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1621 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ax1
3
- emoji: 🏃
4
- colorFrom: gray
5
- colorTo: purple
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: ax1
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: red
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,1621 @@
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>AbilityXchange | AI-Powered Skills 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
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
10
+ <style>
11
+ :root {
12
+ --primary: #A4FF63;
13
+ --primary-dark: #85D44F;
14
+ --dark: #0A0A0A;
15
+ --darker: #010101;
16
+ --light: #F5F5F5;
17
+ --gray: #1E1E1E;
18
+ }
19
+
20
+ body {
21
+ font-family: 'Inter', sans-serif;
22
+ background-color: var(--dark);
23
+ color: white;
24
+ overflow-x: hidden;
25
+ scroll-behavior: smooth;
26
+ }
27
+
28
+ .hero-title {
29
+ line-height: 1.1;
30
+ letter-spacing: -0.05em;
31
+ }
32
+
33
+ .glow-text {
34
+ text-shadow: 0 0 10px rgba(164, 255, 99, 0.7);
35
+ }
36
+
37
+ .glow-box {
38
+ box-shadow: 0 0 20px rgba(164, 255, 99, 0.3);
39
+ }
40
+
41
+ .gradient-box {
42
+ background: linear-gradient(135deg, rgba(10, 10, 10, 0.8), rgba(1, 1, 1, 0.9));
43
+ backdrop-filter: blur(10px);
44
+ -webkit-backdrop-filter: blur(10px);
45
+ border: 1px solid rgba(164, 255, 99, 0.1);
46
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
47
+ }
48
+
49
+ .primary-border {
50
+ position: relative;
51
+ }
52
+
53
+ .primary-border::after {
54
+ content: '';
55
+ position: absolute;
56
+ inset: 0;
57
+ border-radius: inherit;
58
+ padding: 2px;
59
+ background: linear-gradient(45deg, var(--primary), rgba(164, 255, 99, 0.3));
60
+ -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
61
+ mask-composite: exclude;
62
+ pointer-events: none;
63
+ }
64
+
65
+ @keyframes float {
66
+ 0%, 100% { transform: translateY(0px); }
67
+ 50% { transform: translateY(-15px); }
68
+ }
69
+
70
+ .floating {
71
+ animation: float 6s ease-in-out infinite;
72
+ }
73
+
74
+ @keyframes pulse {
75
+ 0% { box-shadow: 0 0 0 0 rgba(164, 255, 99, 0.7); }
76
+ 70% { box-shadow: 0 0 0 15px rgba(164, 255, 99, 0); }
77
+ 100% { box-shadow: 0 0 0 0 rgba(164, 255, 99, 0); }
78
+ }
79
+
80
+ .pulse {
81
+ animation: pulse 2s infinite;
82
+ }
83
+
84
+ .typewriter {
85
+ border-right: 3px solid var(--primary);
86
+ white-space: nowrap;
87
+ overflow: hidden;
88
+ display: inline-block;
89
+ vertical-align: bottom;
90
+ }
91
+
92
+ .typing {
93
+ animation: blink-caret 1s step-end infinite;
94
+ }
95
+
96
+ @keyframes blink-caret {
97
+ from, to { border-color: transparent }
98
+ 50% { border-color: var(--primary); }
99
+ }
100
+
101
+ .scrolling-text {
102
+ animation: scrollText 20s linear infinite;
103
+ white-space: nowrap;
104
+ }
105
+
106
+ @keyframes scrollText {
107
+ 0% { transform: translateX(0); }
108
+ 100% { transform: translateX(-50%); }
109
+ }
110
+
111
+ .gradient-mask {
112
+ mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
113
+ }
114
+
115
+ .ai-chip {
116
+ position: absolute;
117
+ top: -12px;
118
+ left: 50%;
119
+ transform: translateX(-50%);
120
+ background: linear-gradient(90deg, #000000, #1E1E1E, #000000);
121
+ color: var(--primary);
122
+ padding: 4px 12px;
123
+ border-radius: 20px;
124
+ font-size: 12px;
125
+ font-weight: bold;
126
+ border: 1px solid rgba(164, 255, 99, 0.3);
127
+ box-shadow: 0 0 10px rgba(164, 255, 99, 0.2);
128
+ }
129
+
130
+ .gradient-text {
131
+ background: linear-gradient(90deg, var(--primary), #B0FF7D);
132
+ -webkit-background-clip: text;
133
+ background-clip: text;
134
+ color: transparent;
135
+ }
136
+
137
+ .shadow-inner-custom {
138
+ box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5);
139
+ }
140
+
141
+ .grid-pattern {
142
+ background-image:
143
+ linear-gradient(rgba(164, 255, 99, 0.05) 1px, transparent 1px),
144
+ linear-gradient(90deg, rgba(164, 255, 99, 0.05) 1px, transparent 1px);
145
+ background-size: 30px 30px;
146
+ }
147
+
148
+ .hexagon-bg {
149
+ background-image: url("data:image/svg+xml,%3Csvg width='52' height='60' viewBox='0 0 52 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M26 0L51.9808 15V45L26 60L0.019237 45V15L26 0Z' fill='%2300FFA3' fill-opacity='0.03'/%3E%3C/svg%3E%0A");
150
+ background-size: 52px 60px;
151
+ opacity: 0.5;
152
+ }
153
+
154
+ .animated-blob {
155
+ position: absolute;
156
+ border-radius: 50%;
157
+ filter: blur(40px);
158
+ opacity: 0.2;
159
+ animation: blob-move 15s infinite alternate;
160
+ }
161
+
162
+ @keyframes blob-move {
163
+ 0%, 100% { transform: translate(0%, 0%); }
164
+ 25% { transform: translate(10%, -15%); }
165
+ 50% { transform: translate(5%, 10%); }
166
+ 75% { transform: translate(-10%, 5%); }
167
+ }
168
+
169
+ .tilt-effect {
170
+ transition: transform 0.3s ease;
171
+ }
172
+
173
+ .tilt-effect:hover {
174
+ transform: perspective(1000px) rotateY(5deg) rotateX(3deg) scale(1.05);
175
+ }
176
+
177
+ .tech-grid {
178
+ display: grid;
179
+ grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
180
+ gap: 1rem;
181
+ }
182
+
183
+ .feature-card:hover {
184
+ transform: translateY(-10px);
185
+ box-shadow: 0 15px 30px rgba(164, 255, 99, 0.2);
186
+ }
187
+ .feature-card {
188
+ transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
189
+ }
190
+
191
+ .testimonial-card {
192
+ transition: all 0.3s ease;
193
+ border: 1px solid rgba(164, 255, 99, 0.1);
194
+ }
195
+
196
+ .testimonial-card:hover {
197
+ border-color: rgba(164, 255, 99, 0.3);
198
+ }
199
+
200
+ .pricing-card:hover {
201
+ transform: translateY(-5px);
202
+ box-shadow: 0 10px 25px rgba(164, 255, 99, 0.15);
203
+ }
204
+
205
+ /* Responsive typography */
206
+ @media (max-width: 640px) {
207
+ .hero-title {
208
+ font-size: 2.5rem;
209
+ }
210
+ .section-title {
211
+ font-size: 2rem;
212
+ }
213
+ }
214
+
215
+ /* Primary underline effect */
216
+ .primary-underline {
217
+ position: relative;
218
+ display: inline-block;
219
+ }
220
+
221
+ .primary-underline::after {
222
+ content: '';
223
+ position: absolute;
224
+ width: 100%;
225
+ height: 3px;
226
+ bottom: -5px;
227
+ left: 0;
228
+ background: linear-gradient(90deg, var(--primary), transparent);
229
+ transform: scaleX(0);
230
+ transform-origin: left;
231
+ transition: transform 0.3s ease;
232
+ }
233
+
234
+ .primary-underline:hover::after {
235
+ transform: scaleX(1);
236
+ }
237
+
238
+ /* Improved button styles */
239
+ .btn-primary {
240
+ background-color: var(--primary);
241
+ color: var(--dark);
242
+ font-weight: 700;
243
+ position: relative;
244
+ overflow: hidden;
245
+ z-index: 1;
246
+ transition: all 0.3s ease;
247
+ }
248
+
249
+ .btn-primary:hover {
250
+ transform: translateY(-2px);
251
+ box-shadow: 0 10px 20px rgba(164, 255, 99, 0.3);
252
+ }
253
+
254
+ .btn-primary::before {
255
+ content: '';
256
+ position: absolute;
257
+ top: 0;
258
+ left: 0;
259
+ width: 0;
260
+ height: 100%;
261
+ background-color: rgba(255, 255, 255, 0.1);
262
+ transition: all 0.3s ease;
263
+ z-index: -1;
264
+ }
265
+
266
+ .btn-primary:hover::before {
267
+ width: 100%;
268
+ }
269
+
270
+ .btn-secondary {
271
+ background-color: transparent;
272
+ border: 2px solid var(--primary);
273
+ color: var(--primary);
274
+ font-weight: 700;
275
+ position: relative;
276
+ overflow: hidden;
277
+ z-index: 1;
278
+ transition: all 0.3s ease;
279
+ }
280
+
281
+ .btn-secondary:hover {
282
+ color: var(--dark);
283
+ transform: translateY(-2px);
284
+ }
285
+
286
+ .btn-secondary::before {
287
+ content: '';
288
+ position: absolute;
289
+ top: 0;
290
+ left: 0;
291
+ width: 0;
292
+ height: 100%;
293
+ background-color: var(--primary);
294
+ transition: all 0.3s ease;
295
+ z-index: -1;
296
+ }
297
+
298
+ .btn-secondary:hover::before {
299
+ width: 100%;
300
+ }
301
+
302
+ /* Scrollbar styling */
303
+ ::-webkit-scrollbar {
304
+ width: 8px;
305
+ }
306
+
307
+ ::-webkit-scrollbar-track {
308
+ background: var(--darker);
309
+ }
310
+
311
+ ::-webkit-scrollbar-thumb {
312
+ background: var(--primary);
313
+ border-radius: 4px;
314
+ }
315
+
316
+ /* Input field styling */
317
+ .input-field {
318
+ background-color: rgba(30, 30, 30, 0.8);
319
+ border: 1px solid rgba(164, 255, 99, 0.2);
320
+ transition: all 0.3s ease;
321
+ }
322
+
323
+ .input-field:focus {
324
+ border-color: var(--primary);
325
+ box-shadow: 0 0 0 3px rgba(164, 255, 99, 0.2);
326
+ }
327
+
328
+ /* Sparkle effect */
329
+ .sparkle {
330
+ position: absolute;
331
+ width: 4px;
332
+ height: 4px;
333
+ background-color: var(--primary);
334
+ border-radius: 50%;
335
+ pointer-events: none;
336
+ opacity: 0;
337
+ }
338
+
339
+ /* Responsive grid adjustments */
340
+ @media (max-width: 1024px) {
341
+ .feature-columns {
342
+ grid-template-columns: repeat(2, 1fr);
343
+ }
344
+ }
345
+
346
+ @media (max-width: 640px) {
347
+ .feature-columns {
348
+ grid-template-columns: 1fr;
349
+ }
350
+ }
351
+
352
+ /* Fade-in animation */
353
+ @keyframes fadeIn {
354
+ from { opacity: 0; transform: translateY(20px); }
355
+ to { opacity: 1; transform: translateY(0); }
356
+ }
357
+
358
+ .animate-fade-in {
359
+ animation: fadeIn 0.6s ease forwards;
360
+ }
361
+
362
+ /* Wave divider */
363
+ .wave-divider {
364
+ position: relative;
365
+ height: 60px;
366
+ overflow: hidden;
367
+ }
368
+
369
+ .wave-divider svg {
370
+ position: absolute;
371
+ bottom: 0;
372
+ left: 0;
373
+ width: 100%;
374
+ height: 100%;
375
+ }
376
+
377
+ /* Glowing stats */
378
+ .stat-card {
379
+ background: rgba(10, 10, 10, 0.6);
380
+ border: 1px solid rgba(164, 255, 99, 0.1);
381
+ transition: all 0.3s ease;
382
+ }
383
+
384
+ .stat-card:hover {
385
+ border-color: rgba(164, 255, 99, 0.3);
386
+ transform: translateY(-5px);
387
+ }
388
+
389
+ /* Gradient border for cards */
390
+ .gradient-border {
391
+ position: relative;
392
+ background: var(--dark);
393
+ }
394
+
395
+ .gradient-border::before {
396
+ content: '';
397
+ position: absolute;
398
+ top: -1px;
399
+ left: -1px;
400
+ right: -1px;
401
+ bottom: -1px;
402
+ background: linear-gradient(45deg, var(--primary), #0066FF);
403
+ z-index: -1;
404
+ border-radius: inherit;
405
+ }
406
+
407
+ /* Animated gradient text */
408
+ .animated-gradient {
409
+ background: linear-gradient(-45deg, #A4FF63, #0066FF, #A4FF63);
410
+ background-size: 300% 300%;
411
+ -webkit-background-clip: text;
412
+ background-clip: text;
413
+ -webkit-text-fill-color: transparent;
414
+ animation: gradient 6s ease infinite;
415
+ }
416
+
417
+ @keyframes gradient {
418
+ 0% { background-position: 0% 50%; }
419
+ 50% { background-position: 100% 50%; }
420
+ 100% { background-position: 0% 50%; }
421
+ }
422
+
423
+ /* Leaderboard styling */
424
+ .leaderboard-item:nth-child(1) .rank {
425
+ background: linear-gradient(135deg, #FFD700, #FFA500);
426
+ color: black;
427
+ }
428
+
429
+ .leaderboard-item:nth-child(2) .rank {
430
+ background: linear-gradient(135deg, #C0C0C0, #A0A0A0);
431
+ color: black;
432
+ }
433
+
434
+ .leaderboard-item:nth-child(3) .rank {
435
+ background: linear-gradient(135deg, #CD7F32, #A66D2C);
436
+ color: black;
437
+ }
438
+
439
+ /* AI Tool Interface */
440
+ .ai-tool-container {
441
+ background: linear-gradient(135deg, #131313 0%, #0A0A0A 100%);
442
+ border-radius: 12px;
443
+ overflow: hidden;
444
+ position: relative;
445
+ }
446
+
447
+ .ai-tool-header {
448
+ background: rgba(20, 20, 20, 0.8);
449
+ padding: 12px 16px;
450
+ border-bottom: 1px solid rgba(164, 255, 99, 0.1);
451
+ }
452
+
453
+ .ai-tool-content {
454
+ padding: 20px;
455
+ min-height: 300px;
456
+ }
457
+
458
+ .ai-message {
459
+ background: rgba(30, 30, 30, 0.7);
460
+ border-radius: 8px;
461
+ padding: 12px 16px;
462
+ margin-bottom: 12px;
463
+ border-left: 3px solid var(--primary);
464
+ }
465
+
466
+ .ai-loading {
467
+ display: flex;
468
+ align-items: center;
469
+ gap: 8px;
470
+ color: var(--primary);
471
+ }
472
+
473
+ .ai-loading-dot {
474
+ width: 8px;
475
+ height: 8px;
476
+ background: var(--primary);
477
+ border-radius: 50%;
478
+ animation: bounce 1.5s infinite ease-in-out;
479
+ }
480
+
481
+ .ai-loading-dot:nth-child(1) {
482
+ animation-delay: 0s;
483
+ }
484
+
485
+ .ai-loading-dot:nth-child(2) {
486
+ animation-delay: 0.2s;
487
+ }
488
+
489
+ .ai-loading-dot:nth-child(3) {
490
+ animation-delay: 0.4s;
491
+ }
492
+
493
+ @keyframes bounce {
494
+ 0%, 100% { transform: translateY(0); }
495
+ 50% { transform: translateY(-5px); }
496
+ }
497
+
498
+ .ai-tool-input {
499
+ position: relative;
500
+ margin-top: 16px;
501
+ }
502
+
503
+ .ai-tool-input input {
504
+ width: 100%;
505
+ padding: 12px 16px;
506
+ background: rgba(30, 30, 30, 0.7);
507
+ border: 1px solid rgba(164, 255, 99, 0.2);
508
+ border-radius: 8px;
509
+ color: white;
510
+ outline: none;
511
+ }
512
+
513
+ .ai-tool-input button {
514
+ position: absolute;
515
+ right: 8px;
516
+ top: 50%;
517
+ transform: translateY(-50%);
518
+ background: var(--primary);
519
+ color: black;
520
+ border: none;
521
+ border-radius: 50%;
522
+ width: 32px;
523
+ height: 32px;
524
+ display: flex;
525
+ align-items: center;
526
+ justify-content: center;
527
+ cursor: pointer;
528
+ }
529
+
530
+ /* Responsive AI tool positioning */
531
+ @media (max-width: 1024px) {
532
+ .hero-ai-tool {
533
+ margin-top: 40px;
534
+ margin-bottom: 60px;
535
+ }
536
+ .ai-tool-floating-card {
537
+ right: 10px;
538
+ bottom: -50px;
539
+ width: 90%;
540
+ }
541
+ }
542
+
543
+ @media (max-width: 768px) {
544
+ .hero-ai-tool {
545
+ margin-top: 30px;
546
+ margin-bottom: 20px;
547
+ }
548
+ }
549
+
550
+ /* Responsive testimonial card */
551
+ @media (max-width: 640px) {
552
+ .testimonial-card {
553
+ margin-bottom: 20px;
554
+ }
555
+ }
556
+ </style>
557
+ </head>
558
+ <body class="grid-pattern">
559
+ <!-- Animated background elements -->
560
+ <div class="fixed inset-0 overflow-hidden pointer-events-none z-0">
561
+ <div class="animated-blob w-96 h-96 bg-primary -left-20 -top-20 opacity-10" style="animation-delay: 0s;"></div>
562
+ <div class="animated-blob w-80 h-80 bg-purple-500 top-1/4 -right-40 opacity-10" style="animation-delay: 2s;"></div>
563
+ <div class="animated-blob w-96 h-96 bg-teal-500 bottom-0 left-1/2 opacity-10" style="animation-delay: 4s;"></div>
564
+ </div>
565
+
566
+ <!-- Navigation -->
567
+ <nav class="bg-black/70 backdrop-blur-md border-b border-gray-800 fixed w-full z-50">
568
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
569
+ <div class="flex justify-between h-20 items-center">
570
+ <div class="flex items-center gap-8">
571
+ <div class="flex items-center">
572
+ <img src="https://imagedelivery.net/LtCN8b7XAtToQgo5calb3g/5282c62f-e522-4507-9956-07b063b49201/website" alt="AbilityXchange Logo" class="h-10 mr-3">
573
+ <span class="text-2xl font-bold gradient-text">AbilityXchange</span>
574
+ </div>
575
+ <div class="hidden md:flex gap-6">
576
+ <a href="#how-it-works" class="font-medium text-gray-300 hover:text-primary transition-colors flex items-center primary-underline">
577
+ <span>How It Works</span>
578
+ </a>
579
+ <a href="#ai-power" class="font-medium text-gray-300 hover:text-primary transition-colors flex items-center primary-underline">
580
+ <span>AI Power</span>
581
+ </a>
582
+ <section href="#features" class="font-medium text-gray-300 hover:text-primary transition-colors flex items-center primary-underline">
583
+ <span>Features</span>
584
+ </section>
585
+ <a href="#community" class="font-medium text-gray-300 hover:text-primary transition-colors flex items-center primary-underline">
586
+ <span>Community</span>
587
+ </a>
588
+ <a href="#pricing" class="font-medium text-gray-300 hover:text-primary transition-colors flex items-center primary-underline">
589
+ <span>Pricing</span>
590
+ </a>
591
+ </div>
592
+ </div>
593
+ <div class="flex items-center gap-4">
594
+ <button class="hidden md:flex items-center gap-2 px-6 py-2 rounded-full font-medium text-white/80 hover:text-primary transition-colors btn-secondary">
595
+ Sign In
596
+ </button>
597
+ <button class="btn-primary px-6 py-3 rounded-full flex items-center gap-2 glow-box pulse">
598
+ <i class="fas fa-bolt"></i>
599
+ <span>Get Started</span>
600
+ </button>
601
+ <button class="md:hidden text-gray-300 hover:text-primary" id="mobile-menu-button">
602
+ <i class="fas fa-bars text-xl"></i>
603
+ </button>
604
+ </div>
605
+ </div>
606
+ </div>
607
+
608
+ <!-- Mobile menu -->
609
+ <div class="md:hidden hidden bg-black/90 backdrop-blur-lg border-t border-gray-800" id="mobile-menu">
610
+ <div class="px-4 py-3 space-y-4">
611
+ <a href="#how-it-works" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-primary hover:bg-gray-900">
612
+ How It Works
613
+ </a>
614
+ <a href="#ai-power" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-primary hover:bg-gray-900">
615
+ AI Power
616
+ </a>
617
+ <a href="#features" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-primary hover:bg-gray-900">
618
+ Features
619
+ </a>
620
+ <a href="#community" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-primary hover:bg-gray-900">
621
+ Community
622
+ </a>
623
+ <a href="#pricing" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-primary hover:bg-gray-900">
624
+ Pricing
625
+ </a>
626
+ <div class="pt-4 border-t border-gray-800">
627
+ <button class="w-full btn-secondary px-4 py-2 rounded-md text-base font-medium">
628
+ Sign In
629
+ </button>
630
+ </div>
631
+ </div>
632
+ </div>
633
+ </nav>
634
+
635
+ <!-- Hero Section -->
636
+ <section class="pt-32 pb-24 px-4 sm:px-6 lg:px-8 relative z-10">
637
+ <div class="max-w-7xl mx-auto">
638
+ <div class="flex flex-col lg:flex-row items-center gap-8 xl:gap-12">
639
+ <div class="lg:w-1/2">
640
+ <div class="bg-black/20 border border-gray-800 rounded-full px-4 py-1.5 w-max mb-6 glow-box">
641
+ <span class="text-primary text-sm font-medium">YOUR AI-POWERED SKILLS MARKETPLACE</span>
642
+ </div>
643
+ <h1 class="text-5xl md:text-6xl lg:text-7xl font-bold hero-title mb-6">
644
+ <span class="gradient-text">Trade Your Talents</span> <span class="typewriter typing">With AbilityXchange</span>
645
+ </h1>
646
+ <p class="text-xl md:text-2xl text-gray-300 mb-8 max-w-xl">
647
+ Our revolutionary AI matches your unique abilities with perfect counterparts, creating fair exchanges without traditional currency.
648
+ </p>
649
+ <div class="flex flex-col sm:flex-row gap-4 mb-12">
650
+ <button class="btn-primary px-8 py-4 rounded-full text-lg flex items-center justify-center gap-2">
651
+ <i class="fas fa-bolt"></i>
652
+ Start Trading Now
653
+ </button>
654
+ <button class="btn-secondary px-8 py-4 rounded-full text-lg flex items-center justify-center gap-2">
655
+ <i class="fas fa-play-circle"></i>
656
+ See How It Works
657
+ </button>
658
+ </div>
659
+ <div class="flex flex-wrap gap-6 items-center">
660
+ <div class="flex -space-x-4">
661
+ <img src="https://randomuser.me/api/portraits/women/43.jpg" class="w-12 h-12 rounded-full border-2 border-black" alt="">
662
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-12 h-12 rounded-full border-2 border-black" alt="">
663
+ <img src="https://randomuser.me/api/portraits/women/65.jpg" class="w-12 h-12 rounded-full border-2 border-black" alt="">
664
+ <div class="w-12 h-12 rounded-full border-2 border-black bg-gray-900 flex items-center justify-center">
665
+ <span class="text-xs font-bold text-primary">500K+</span>
666
+ </div>
667
+ </div>
668
+ <div class="flex flex-col sm:flex-row sm:items-center gap-2">
669
+ <div class="flex items-center">
670
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
671
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
672
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
673
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
674
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
675
+ </div>
676
+ <span class="text-sm text-gray-400">Trusted by 24K+ professionals</span>
677
+ </div>
678
+ </div>
679
+ </div>
680
+ <div class="lg:w-1/2 relative hero-ai-tool">
681
+ <div class="relative floating">
682
+ <div class="gradient-box rounded-xl w-full max-w-xl mx-auto primary-border tilt-effect p-2">
683
+ <!-- AI Tool Interface -->
684
+ <div class="ai-tool-container">
685
+ <div class="ai-tool-header flex items-center justify-between">
686
+ <div class="flex items-center gap-2">
687
+ <div class="w-3 h-3 rounded-full bg-[#ff5f56]"></div>
688
+ <div class="w-3 h-3 rounded-full bg-[#ffbd2e]"></div>
689
+ <div class="w-3 h-3 rounded-full bg-[#27c93f]"></div>
690
+ </div>
691
+ <h3 class="text-xs font-medium text-gray-400">AbilityXchange AI</h3>
692
+ <div class="w-20"></div>
693
+ </div>
694
+ <div class="ai-tool-content">
695
+ <div class="ai-message">
696
+ <h4 class="font-bold text-primary mb-1">🔍 Skills Analysis Complete</h4>
697
+ <p class="text-sm text-gray-300">Welcome to your AbilityXchange AI assistant! Based on your profile, I've analyzed your skills and found optimal exchange opportunities.</p>
698
+ </div>
699
+
700
+ <div class="ai-message">
701
+ <h4 class="font-bold text-primary mb-1">🎯 Suggested Exchange</h4>
702
+ <p class="text-sm text-gray-300">Your web development skills (rated 4.8/5 by peers) could be exchanged for high-quality logo design services from verified partners.</p>
703
+ <div class="mt-3 flex items-center gap-2">
704
+ <span class="text-xs bg-primary/10 text-primary px-2 py-1 rounded-full">Time Value: 8 hrs ↔ 8 hrs</span>
705
+ <span class="text-xs bg-primary/10 text-primary px-2 py-1 rounded-full">Demand Match: 95%</span>
706
+ </div>
707
+ </div>
708
+
709
+ <div class="ai-message">
710
+ <h4 class="font-bold text-primary mb-1">💡 Optimization Tip</h4>
711
+ <p class="text-sm text-gray-300">Adding backend development to your offer increases potential matches to 12 while maintaining fairness ratios.</p>
712
+ </div>
713
+
714
+ <div class="ai-loading">
715
+ <span class="text-xs">Analyzing new opportunities</span>
716
+ <div class="ai-loading-dot"></div>
717
+ <div class="ai-loading-dot"></div>
718
+ <div class="ai-loading-dot"></div>
719
+ </div>
720
+ </div>
721
+ <div class="ai-tool-input p-4 bg-gray-900/50">
722
+ <input type="text" placeholder="Ask AI for exchange advice..." class="w-full">
723
+ <button>
724
+ <i class="fas fa-paper-plane"></i>
725
+ </button>
726
+ </div>
727
+ </div>
728
+ </div>
729
+ <div class="absolute -bottom-6 -right-6 bg-gray-900 p-6 rounded-2xl shadow-2xl border border-gray-800 w-3/4 z-10 primary-border ai-tool-floating-card">
730
+ <div class="ai-chip">AI MATCH ALERT</div>
731
+ <div class="flex items-center gap-2 mb-3">
732
+ <div class="w-8 h-8 bg-black rounded-lg flex items-center justify-center text-primary border border-gray-700">
733
+ <i class="fas fa-exchange-alt"></i>
734
+ </div>
735
+ <div class="flex-1">
736
+ <div class="text-xs font-medium text-primary">PERFECT MATCH AVAILABLE</div>
737
+ <h4 class="font-bold">Your Web Dev ⇄ Logo Design</h4>
738
+ </div>
739
+ <div class="px-2 py-1 bg-primary/10 text-primary text-xs font-bold rounded">95%</div>
740
+ </div>
741
+ <div class="flex justify-between items-center mt-4 text-xs">
742
+ <div class="flex items-center gap-2">
743
+ <div class="flex -space-x-2">
744
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" class="w-5 h-5 rounded-full border border-black">
745
+ <img src="https://randomuser.me/api/portraits/men/75.jpg" class="w-5 h-5 rounded-full border border-black">
746
+ </div>
747
+ <span class="text-gray-400">Verified Partners</span>
748
+ </div>
749
+ <button class="text-xs btn-primary rounded-full font-bold">
750
+ <i class="fas fa-exchange-alt mr-1"></i>
751
+ View Match
752
+ </button>
753
+ </div>
754
+ </div>
755
+ </div>
756
+ </div>
757
+ </div>
758
+ </div>
759
+ </section>
760
+
761
+ <!-- Client Logos Marquee -->
762
+ <div class="py-8 bg-black/30 border-y border-gray-800 relative overflow-hidden">
763
+ <div class="absolute inset-0 gradient-mask z-10"></div>
764
+ <div class="scrolling-text whitespace-nowrap text-gray-500 text-sm font-medium w-max flex gap-16">
765
+ <span class="flex items-center gap-2"><i class="fas fa-check text-primary"></i> Trusted by professionals worldwide</span>
766
+ <span>•</span>
767
+ <span>24,000+ daily exchanges</span>
768
+ <span>•</span>
769
+ <span>98% satisfaction rate</span>
770
+ <span>•</span>
771
+ <span>5-star rated on Trustpilot</span>
772
+ <span>•</span>
773
+ <span>Featured in TechCrunch & Forbes</span>
774
+ <span>•</span>
775
+ <span>AI-powered valuation</span>
776
+ <span>•</span>
777
+ <span>500K+ member community</span>
778
+ <span>•</span>
779
+ <span>Smart contracts</span>
780
+ </div>
781
+ </div>
782
+
783
+ <!-- Benefits Section -->
784
+ <section class="py-24 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-black to-gray-900 relative overflow-hidden">
785
+ <div class="max-w-7xl mx-auto relative z-10">
786
+ <div class="text-center mb-16">
787
+ <span class="inline-block px-4 py-1.5 rounded-full bg-black/30 border border-gray-800 text-primary font-medium mb-4 glow-box">
788
+ REVOLUTIONARY APPROACH
789
+ </span>
790
+ <h2 class="text-4xl md:text-5xl font-bold text-white mb-6">
791
+ The Future of <span class="gradient-text">Value Exchange</span>
792
+ </h2>
793
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto">
794
+ AbilityXchange transforms how professionals leverage their skills through AI-powered matching
795
+ </p>
796
+ </div>
797
+
798
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
799
+ <!-- Benefit 1 -->
800
+ <div class="gradient-box p-8 rounded-2xl feature-card tilt-effect">
801
+ <div class="w-12 h-12 rounded-full bg-primary/10 text-primary text-xl flex items-center justify-center mb-6">
802
+ <i class="fas fa-money-bill-wave"></i>
803
+ </div>
804
+ <h3 class="text-xl font-bold text-white mb-4">Currency-Free</h3>
805
+ <p class="text-gray-400">
806
+ Exchange value directly using your skills and abilities, bypassing traditional financial systems.
807
+ </p>
808
+ </div>
809
+
810
+ <!-- Benefit 2 -->
811
+ <div class="gradient-box p-8 rounded-2xl feature-card tilt-effect">
812
+ <div class="w-12 h-12 rounded-full bg-primary/10 text-primary text-xl flex items-center justify-center mb-6">
813
+ <i class="fas fa-robot"></i>
814
+ </div>
815
+ <h3 class="text-xl font-bold text-white mb-4">AI-Powered Fairness</h3>
816
+ <p class="text-gray-400">
817
+ Our neural network evaluates 300+ factors to ensure every exchange is perfectly balanced.
818
+ </p>
819
+ </div>
820
+
821
+ <!-- Benefit 3 -->
822
+ <div class="gradient-box p-8 rounded-2xl feature-card tilt-effect">
823
+ <div class="w-12 h-12 rounded-full bg-primary/10 text-primary text-xl flex items-center justify-center mb-6">
824
+ <i class="fas fa-chart-line"></i>
825
+ </div>
826
+ <h3 class="text-xl font-bold text-white mb-4">Expand Your Network</h3>
827
+ <p class="text-gray-400">
828
+ Connect with vetted professionals who truly value your unique abilities.
829
+ </p>
830
+ </div>
831
+
832
+ <!-- Benefit 4 -->
833
+ <div class="gradient-box p-8 rounded-2xl feature-card tilt-effect">
834
+ <div class="w-12 h-12 rounded-full bg-primary/10 text-primary text-xl flex items-center justify-center mb-6">
835
+ <i class="fas fa-shield-alt"></i>
836
+ </div>
837
+ <h3 class="text-xl font-bold text-white mb-4">Blockchain Security</h3>
838
+ <p class="text-gray-400">
839
+ Smart contracts ensure every exchange is completed as promised with AI mediation.
840
+ </p>
841
+ </div>
842
+ </div>
843
+ </div>
844
+ </section>
845
+
846
+ <!-- How It Works Section -->
847
+ <section id="how-it-works" class="py-24 px-4 sm:px-6 lg:px-8 relative z-10">
848
+ <div class="max-w-7xl mx-auto">
849
+ <div class="text-center mb-16">
850
+ <span class="inline-block px-4 py-1.5 rounded-full bg-black/30 border border-gray-800 text-primary font-medium mb-4 glow-box">
851
+ SIMPLE EXCHANGE PROCESS
852
+ </span>
853
+ <h2 class="text-4xl md:text-5xl font-bold text-white mb-6">
854
+ Get Started in <span class="gradient-text">3 Steps</span>
855
+ </h2>
856
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto">
857
+ Our AI-powered platform makes skill trading effortless and rewarding
858
+ </p>
859
+ </div>
860
+
861
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 relative">
862
+ <!-- Step 1 -->
863
+ <div class="gradient-box p-8 rounded-2xl primary-border feature-card tilt-effect animate-fade-in">
864
+ <div class="flex flex-col items-center text-center">
865
+ <div class="relative mb-6">
866
+ <div class="w-24 h-24 bg-gradient-to-br from-black to-gray-900 rounded-full flex items-center justify-center text-primary text-3xl font-bold mb-6 border border-gray-800 shadow-inner-custom">
867
+ 1
868
+ </div>
869
+ <div class="ai-chip">AI-ASSISTED</div>
870
+ </div>
871
+ <h3 class="text-2xl font-bold text-white mb-4">List Your Skills</h3>
872
+ <p class="text-gray-300">
873
+ Describe your abilities and requirements. Our AI helps optimize your listing for ideal matches.
874
+ </p>
875
+ </div>
876
+ </div>
877
+
878
+ <!-- Step 2 -->
879
+ <div class="gradient-box p-8 rounded-2xl primary-border feature-card tilt-effect animate-fade-in" style="animation-delay: 0.2s;">
880
+ <div class="flex flex-col items-center text-center">
881
+ <div class="relative mb-6">
882
+ <div class="w-24 h-24 bg-gradient-to-br from-black to-gray-900 rounded-full flex items-center justify-center text-primary text-3xl font-bold mb-6 border border-gray-800 shadow-inner-custom">
883
+ 2
884
+ </div>
885
+ <div class="ai-chip">AI-POWERED</div>
886
+ </div>
887
+ <h3 class="text-2xl font-bold text-white mb-4">Receive Matches</h3>
888
+ <p class="text-gray-300">
889
+ Our neural network analyzes thousands of variables to find exchanges with perfect value alignment.
890
+ </p>
891
+ </div>
892
+ </div>
893
+
894
+ <!-- Step 3 -->
895
+ <div class="gradient-box p-8 rounded-2xl primary-border feature-card tilt-effect animate-fade-in" style="animation-delay: 0.4s;">
896
+ <div class="flex flex-col items-center text-center">
897
+ <div class="relative mb-6">
898
+ <div class="w-24 h-24 bg-gradient-to-br from-black to-gray-900 rounded-full flex items-center justify-center text-primary text-3xl font-bold mb-6 border border-gray-800 shadow-inner-custom">
899
+ 3
900
+ </div>
901
+ <div class="ai-chip">AI-PROTECTED</div>
902
+ </div>
903
+ <h3 class="text-2xl font-bold text-white mb-4">Exchange Securely</h3>
904
+ <p class="text-gray-300">
905
+ Complete fair exchanges with confidence using blockchain contracts and AI mediation.
906
+ </p>
907
+ </div>
908
+ </div>
909
+ </div>
910
+
911
+ <div class="mt-16 text-center">
912
+ <button class="btn-primary px-8 py-4 rounded-full text-lg glow-box">
913
+ <i class="fas fa-play-circle mr-2"></i>
914
+ Watch Exchange Demo
915
+ </button>
916
+ </div>
917
+ </div>
918
+ </section>
919
+
920
+ <!-- Popular Trades Section -->
921
+ <section id="categories" class="py-24 px-4 sm:px-6 lg:px-8 bg-black/20 relative overflow-hidden">
922
+ <div class="hexagon-bg absolute inset-0 opacity-10"></div>
923
+ <div class="max-w-7xl mx-auto relative z-10">
924
+ <div class="text-center mb-16">
925
+ <span class="inline-block px-4 py-1.5 rounded-full bg-black/30 border border-gray-800 text-primary font-medium mb-4 glow-box">
926
+ TRENDING EXCHANGES
927
+ </span>
928
+ <h2 class="text-4xl md:text-5xl font-bold text-white mb-6">
929
+ Most <span class="gradient-text">Exchanged</span> Skills
930
+ </h2>
931
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto">
932
+ These categories see the most successful trades on AbilityXchange
933
+ </p>
934
+ </div>
935
+
936
+ <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
937
+ <div class="group aspect-square bg-gray-900/70 rounded-xl p-6 flex flex-col justify-center items-center border border-gray-800 hover:border-primary/50 transition-all cursor-pointer">
938
+ <div class="w-16 h-16 rounded-full bg-black flex items-center justify-center text-primary text-2xl mb-4 group-hover:bg-primary/10 transition-colors">
939
+ <i class="fas fa-paint-brush"></i>
940
+ </div>
941
+ <span class="font-medium text-center">Design</span>
942
+ <span class="text-xs text-primary mt-1">98% match rate</span>
943
+ </div>
944
+
945
+ <div class="group aspect-square bg-gray-900/70 rounded-xl p-6 flex flex-col justify-center items-center border border-gray-800 hover:border-primary/50 transition-all cursor-pointer">
946
+ <div class="w-16 h-16 rounded-full bg-black flex items-center justify-center text-primary text-2xl mb-4 group-hover:bg-primary/10 transition-colors">
947
+ <i class="fas fa-code"></i>
948
+ </div>
949
+ <span class="font-medium text-center">Development</span>
950
+ <span class="text-xs text-primary mt-1">96% match rate</span>
951
+ </div>
952
+
953
+ <div class="group aspect-square bg-gray-900/70 rounded-xl p-6 flex flex-col justify-center items-center border border-gray-8p-6 flex flex-col justify-center items-center border border-gray-800 hover:border-primary/50 transition-all cursor-pointer">
954
+ <div class="w-16 h-16 rounded-full bg-black flex items-center justify-center text-primary text-2xl mb-4 group-hover:bg-primary/10 transition-colors">
955
+ <i class="fas fa-language"></i>
956
+ </div>
957
+ <span class="font-medium text-center">Translation</span>
958
+ <span class="text-xs text-primary mt-1">89% match rate</span>
959
+ </div>
960
+ </div>
961
+
962
+ <div class="mt-16 text-center">
963
+ <button class="btn-secondary px-8 py-4 rounded-full text-lg">
964
+ <i class="fas fa-search mr-2"></i>
965
+ Browse All Categories
966
+ </button>
967
+ </div>
968
+ </div>
969
+ </section>
970
+
971
+ <!-- Success Stories Section -->
972
+ <section id="stories" class="py-24 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-black to-gray-900 relative">
973
+ <div class="max-w-7xl mx-auto relative z-10">
974
+ <div class="text-center mb-16">
975
+ <span class="inline-block px-4 py-1.5 rounded-full bg-black/30 border border-gray-800 text-primary font-medium mb-4 glow-box">
976
+ REAL COMMUNITY STORIES
977
+ </span>
978
+ <h2 class="text-4xl md:text-5xl font-bold text-white mb-6">
979
+ Transforming <span class="gradient-text">Lives & Businesses</span>
980
+ </h2>
981
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto">
982
+ See how AbilityXchange members are creating value through fair exchanges
983
+ </p>
984
+ </div>
985
+
986
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
987
+ <!-- Story 1 -->
988
+ <div class="gradient-box p-8 rounded-2xl relative overflow-hidden testimonial-card">
989
+ <div class="absolute -right-10 -top-10 w-48 h-48 rounded-full bg-primary/10 blur-2xl"></div>
990
+ <div class="flex items-center gap-4 mb-6">
991
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-16 h-16 rounded-full object-cover border-2 border-primary/30">
992
+ <div>
993
+ <h4 class="font-bold text-white">Sarah K.</h4>
994
+ <div class="flex items-center gap-1 mt-1">
995
+ <span class="text-primary text-sm">Graphic Designer</span>
996
+ <span class="text-primary">•</span>
997
+ <span class="text-yellow-400 text-xs">
998
+ <i class="fas fa-star"></i>
999
+ 4.9
1000
+ </span>
1001
+ </div>
1002
+ </div>
1003
+ </div>
1004
+ <p class="text-gray-300 mb-6">
1005
+ "Traded my design services for a complete website rebuild. Saved thousands while getting exactly what my business needed!"
1006
+ </p>
1007
+ <div class="relative">
1008
+ <div class="bg-black/30 rounded-lg p-4 border border-gray-700">
1009
+ <div class="flex items-center gap-3">
1010
+ <div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
1011
+ <i class="fas fa-exchange-alt"></i>
1012
+ </div>
1013
+ <div>
1014
+ <h4 class="font-bold">Branding Package ⇄ Web Development</h4>
1015
+ <div class="flex items-center gap-1 mt-1">
1016
+ <span class="text-xs bg-primary/10 text-primary px-2 py-0.5 rounded-full">AI Score: 98%</span>
1017
+ </div>
1018
+ </div>
1019
+ </div>
1020
+ </div>
1021
+ </div>
1022
+ </div>
1023
+
1024
+ <!-- Story 2 -->
1025
+ <div class="gradient-box p-8 rounded-2xl relative overflow-hidden testimonial-card">
1026
+ <div class="absolute -right-10 -top-10 w-48 h-48 rounded-full bg-primary/10 blur-2xl"></div>
1027
+ <div class="flex items-center gap-4 mb-6">
1028
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-16 h-16 rounded-full object-cover border-2 border-primary/30">
1029
+ <div>
1030
+ <h4 class="font-bold text-white">David T.</h4>
1031
+ <div class="flex items-center gap-1 mt-1">
1032
+ <span class="text-primary text-sm">Photographer</span>
1033
+ <span class="text-primary">•</span>
1034
+ <span class="text-yellow-400 text-xs">
1035
+ <i class="fas fa-star"></i>
1036
+ 5.0
1037
+ </span>
1038
+ </div>
1039
+ </div>
1040
+ </div>
1041
+ <p class="text-gray-300 mb-6">
1042
+ "Exchanged product photos for accounting services. The AI valuation ensured perfect fairness - both parties thrilled!"
1043
+ </p>
1044
+ <div class="relative">
1045
+ <div class="bg-black/30 rounded-lg p-4 border border-gray-700">
1046
+ <div class="flex items-center gap-3">
1047
+ <div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
1048
+ <i class="fas fa-exchange-alt"></i>
1049
+ </div>
1050
+ <div>
1051
+ <h4 class="font-bold">Photography ⇄ Financial Services</h4>
1052
+ <div class="flex items-center gap-1 mt-1">
1053
+ <span class="text-xs bg-primary/10 text-primary px-2 py-0.5 rounded-full">AI Score: 96%</span>
1054
+ </div>
1055
+ </div>
1056
+ </div>
1057
+ </div>
1058
+ </div>
1059
+ </div>
1060
+
1061
+ <!-- Story 3 -->
1062
+ <div class="gradient-box p-8 rounded-2xl relative overflow-hidden testimonial-card">
1063
+ <div class="absolute -right-10 -top-10 w-48 h-48 rounded-full bg-primary/10 blur-2xl"></div>
1064
+ <div class="flex items-center gap-4 mb-6">
1065
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" class="w-16 h-16 rounded-full object-cover border-2 border-primary/30">
1066
+ <div>
1067
+ <h4 class="font-bold text-white">Maya P.</h4>
1068
+ <div class="flex items-center gap-1 mt-1">
1069
+ <span class="text-primary text-sm">Copywriter</span>
1070
+ <span class="text-primary">•</span>
1071
+ <span class="text-yellow-400 text-xs">
1072
+ <i class="fas fa-star"></i>
1073
+ 4.8
1074
+ </span>
1075
+ </div>
1076
+ </div>
1077
+ </div>
1078
+ <p class="text-gray-300 mb-6">
1079
+ "Traded website copy for 3 months of personal training. Got fit while helping a trainer boost his business!"
1080
+ </p>
1081
+ <div class="relative">
1082
+ <div class="bg-black/30 rounded-lg p-4 border border-gray-700">
1083
+ <div class="flex items-center gap-3">
1084
+ <div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
1085
+ <i class="fas fa-exchange-alt"></i>
1086
+ </div>
1087
+ <div>
1088
+ <h4 class="font-bold">Copywriting ⇄ Fitness Training</h4>
1089
+ <div class="flex items-center gap-1 mt-1">
1090
+ <span class="text-xs bg-primary/10 text-primary px-2 py-0.5 rounded-full">AI Score: 95%</span>
1091
+ </div>
1092
+ </div>
1093
+ </div>
1094
+ </div>
1095
+ </div>
1096
+ </div>
1097
+ </div>
1098
+ </div>
1099
+ </section>
1100
+
1101
+ <!-- AI Power Section -->
1102
+ <section id="ai-power" class="py-24 px-4 sm:px-6 lg:px-8 relative overflow-hidden bg-black/20">
1103
+ <div class="max-w-7xl mx-auto relative z-10">
1104
+ <div class="text-center mb-16">
1105
+ <span class="inline-block px-4 py-1.5 rounded-full bg-black/30 border border-gray-800 text-primary font-medium mb-4 glow-box">
1106
+ CUTTING-EDGE TECHNOLOGY
1107
+ </span>
1108
+ <h2 class="text-4xl md:text-5xl font-bold text-white mb-6">
1109
+ Our <span class="gradient-text">AI Matching Engine</span>
1110
+ </h2>
1111
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto">
1112
+ Advanced artificial intelligence powers every exchange to ensure fairness and perfect value alignment
1113
+ </p>
1114
+ </div>
1115
+
1116
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
1117
+ <div>
1118
+ <h3 class="text-3xl font-bold text-white mb-6">Smart Valuation Algorithm</h3>
1119
+ <p class="text-gray-300 mb-6">
1120
+ Our proprietary neural network evaluates hundreds of factors to calculate the perfect exchange ratio:
1121
+ </p>
1122
+ <ul class="space-y-4 mb-8">
1123
+ <li class="flex items-start gap-3">
1124
+ <div class="w-6 h-6 rounded-full bg-primary/10 text-primary flex items-center justify-center flex-shrink-0 mt-1">
1125
+ <i class="fas fa-check text-xs"></i>
1126
+ </div>
1127
+ <span class="text-gray-300">Market demand for each skill</span>
1128
+ </li>
1129
+ <li class="flex items-start gap-3">
1130
+ <div class="w-6 h-6 rounded-full bg-primary/10 text-primary flex items-center justify-center flex-shrink-0 mt-1">
1131
+ <i class="fas fa-check text-xs"></i>
1132
+ </div>
1133
+ <span class="text-gray-300">Historical exchange data</span>
1134
+ </li>
1135
+ <li class="flex items-start gap-3">
1136
+ <div class="w-6 h-6 rounded-full bg-primary/10 text-primary flex items-center justify-center flex-shrink-0 mt-1">
1137
+ <i class="fas fa-check text-xs"></i>
1138
+ </div>
1139
+ <span class="text-gray-300">Time investment required</span>
1140
+ </li>
1141
+ <li class="flex items-start gap-3">
1142
+ <div class="w-6 h-6 rounded-full bg-primary/10 text-primary flex items-center justify-center flex-shrink-0 mt-1">
1143
+ <i class="fas fa-check text-xs"></i>
1144
+ </div>
1145
+ <span class="text-gray-300">Complexity & specialization</span>
1146
+ </li>
1147
+ <li class="flex items-start gap-3">
1148
+ <div class="w-6 h-6 rounded-full bg-primary/10 text-primary flex items-center justify-center flex-shrink-0 mt-1">
1149
+ <i class="fas fa-check text-xs"></i>
1150
+ </div>
1151
+ <span class="text-gray-300">Reputation & verification status</span>
1152
+ </li>
1153
+ </ul>
1154
+ <button class="btn-primary px-6 py-3 rounded-full">
1155
+ Learn How Our AI Works
1156
+ </button>
1157
+ </div>
1158
+ <div class="gradient-box rounded-xl p-1 primary-border tilt-effect">
1159
+ <div class="bg-black/20 rounded-lg p-8 aspect-video flex items-center justify-center">
1160
+ <div class="text-center">
1161
+ <div class="w-20 h-20 mx-auto rounded-full bg-primary/10 text-primary text-3xl flex items-center justify-center mb-6">
1162
+ <i class="fas fa-brain"></i>
1163
+ </div>
1164
+ <h4 class="font-bold text-2xl text-white mb-2">AI Match Visualization</h4>
1165
+ <p class="text-gray-300 mb-4">See how skills connect across our network</p>
1166
+ <div class="flex gap-2 justify-center">
1167
+ <div class="w-6 h-6 rounded-full bg-primary/20 border border-primary/40 animate-pulse" style="animation-delay: 0s;"></div>
1168
+ <div class="w-6 h-6 rounded-full bg-primary/30 border border-primary/50 animate-pulse" style="animation-delay: 0.2s;"></div>
1169
+ <div class="w-6 h-6 rounded-full bg-primary/40 border border-primary/60 animate-pulse" style="animation-delay: 0.4s;"></div>
1170
+ </div>
1171
+ </div>
1172
+ </div>
1173
+ </div>
1174
+ </div>
1175
+ </div>
1176
+ </section>
1177
+
1178
+ <!-- Features Section -->
1179
+ <section id="features" class="py-24 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-gray-900 to-black">
1180
+ <div class="max-w-7xl mx-auto">
1181
+ <div class="text-center mb-16">
1182
+ <span class="inline-block px-4 py-1.5 rounded-full bg-black/30 border border-gray-800 text-primary font-medium mb-4 glow-box">
1183
+ PREMIUM FEATURES
1184
+ </span>
1185
+ <h2 class="text-4xl md:text-5xl font-bold text-white mb-6">
1186
+ Why Choose <span class="gradient-text">AbilityXchange</span>
1187
+ </h2>
1188
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto">
1189
+ Powerful tools to make your skill trading experience seamless and rewarding
1190
+ </p>
1191
+ </div>
1192
+
1193
+ <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8">
1194
+ <!-- Feature 1 -->
1195
+ <div class="gradient-box p-8 rounded-2xl feature-card">
1196
+ <div class="flex items-start gap-4">
1197
+ <div class="w-12 h-12 rounded-lg bg-primary/10 text-primary text-xl flex items-center justify-center flex-shrink-0">
1198
+ <i class="fas fa-shield-alt"></i>
1199
+ </div>
1200
+ <div>
1201
+ <h3 class="text-xl font-bold text-white mb-2">Escrow Protection</h3>
1202
+ <p class="text-gray-400">
1203
+ AI mediates every exchange, holding both parties accountable until all terms are met to mutual satisfaction.
1204
+ </p>
1205
+ </div>
1206
+ </div>
1207
+ </div>
1208
+
1209
+ <!-- Feature 2 -->
1210
+ <div class="gradient-box p-8 rounded-2xl feature-card">
1211
+ <div class="flex items-start gap-4">
1212
+ <div class="w-12 h-12 rounded-lg bg-primary/10 text-primary text-xl flex items-center justify-center flex-shrink-0">
1213
+ <i class="fas fa-chart-network"></i>
1214
+ </div>
1215
+ <div>
1216
+ <h3 class="text-xl font-bold text-white mb-2">Smart Recommendations</h3>
1217
+ <p class="text-gray-400">
1218
+ Our AI suggests optimal exchanges you might not have considered, expanding your opportunities.
1219
+ </p>
1220
+ </div>
1221
+ </div>
1222
+ </div>
1223
+
1224
+ <!-- Feature 3 -->
1225
+ <div class="gradient-box p-8 rounded-2xl feature-card">
1226
+ <div class="flex items-start gap-4">
1227
+ <div class="w-12 h-12 rounded-lg bg-primary/10 text-primary text-xl flex items-center justify-center flex-shrink-0">
1228
+ <i class="fas fa-file-contract"></i>
1229
+ </div>
1230
+ <div>
1231
+ <h3 class="text-xl font-bold text-white mb-2">Smart Contracts</h3>
1232
+ <p class="text-gray-400">
1233
+ Blockchain-based agreements automatically enforce terms and release exchanges when conditions are met.
1234
+ </p>
1235
+ </div>
1236
+ </div>
1237
+ </div>
1238
+
1239
+ <!-- Feature 4 -->
1240
+ <div class="gradient-box p-8 rounded-2xl feature-card">
1241
+ <div class="flex items-start gap-4">
1242
+ <div class="w-12 h-12 rounded-lg bg-primary/10 text-primary text-xl flex items-center justify-center flex-shrink-0">
1243
+ <i class="fas fa-network-wired"></i>
1244
+ </div>
1245
+ <div>
1246
+ <h3 class="text-xl font-bold text-white mb-2">Multi-Skill Exchanges</h3>
1247
+ <p class="text-gray-400">
1248
+ Combine multiple skills for more complex trades, all balanced by our AI valuation system.
1249
+ </p>
1250
+ </div>
1251
+ </div>
1252
+ </div>
1253
+
1254
+ <!-- Feature 5 -->
1255
+ <div class="gradient-box p-8 rounded-2xl feature-card">
1256
+ <div class="flex items-start gap-4">
1257
+ <div class="w-12 h-12 rounded-lg bg-primary/10 text-primary text-xl flex items-center justify-center flex-shrink-0">
1258
+ <i class="fas fa-clipboard-list-check"></i>
1259
+ </div>
1260
+ <div>
1261
+ <h3 class="text-xl font-bold text-white mb-2">Milestone Tracking</h3>
1262
+ <p class="text-gray-400">
1263
+ Break larger exchanges into manageable phases with automated progress tracking.
1264
+ </p>
1265
+ </div>
1266
+ </div>
1267
+ </div>
1268
+
1269
+ <!-- Feature 6 -->
1270
+ <div class="gradient-box p-8 rounded-2xl feature-card">
1271
+ <div class="flex items-start gap-4">
1272
+ <div class="w-12 h-12 rounded-lg bg-primary/10 text-primary text-xl flex items-center justify-center flex-shrink-0">
1273
+ <i class="fas fa-users"></i>
1274
+ </div>
1275
+ <div>
1276
+ <h3 class="text-xl font-bold text-white mb-2">Community Network</h3>
1277
+ <p class="text-gray-400">
1278
+ Connect with like-minded professionals who value skill-based trading.
1279
+ </p>
1280
+ </div>
1281
+ </div>
1282
+ </div>
1283
+ </div>
1284
+
1285
+ <div class="mt-16 text-center">
1286
+ <button class="btn-secondary px-8 py-4 rounded-full text-lg">
1287
+ See All Features
1288
+ </button>
1289
+ </div>
1290
+ </div>
1291
+ </section>
1292
+
1293
+ <!-- Pricing Section -->
1294
+ <section id="pricing" class="py-24 px-4 sm:px-6 lg:px-8 bg-black/20 relative">
1295
+ <div class="max-w-7xl mx-auto relative z-10">
1296
+ <div class="text-center mb-16">
1297
+ <span class="inline-block px-4 py-1.5 rounded-full bg-black/30 border border-gray-800 text-primary font-medium mb-4 glow-box">
1298
+ FAIR & TRANSPARENT
1299
+ </span>
1300
+ <h2 class="text-4xl md:text-5xl font-bold text-white mb-6">
1301
+ Simple <span class="gradient-text">Pricing</span>
1302
+ </h2>
1303
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto">
1304
+ Choose the plan that works for you. We only succeed when you do.
1305
+ </p>
1306
+ </div>
1307
+
1308
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 max-w-5xl mx-auto">
1309
+ <!-- Free Plan -->
1310
+ <div class="gradient-box p-8 rounded-2xl pricing-card">
1311
+ <div class="mb-6">
1312
+ <h3 class="text-2xl font-bold text-white mb-1">Starter</h3>
1313
+ <p class="text-gray-400 text-sm">Perfect for trying out skill exchanges</p>
1314
+ </div>
1315
+ <div class="mb-6">
1316
+ <span class="text-5xl font-bold text-white">$0</span>
1317
+ <span class="text-gray-400">/forever</span>
1318
+ </div>
1319
+ <ul class="space-y-3 mb-8">
1320
+ <li class="flex items-center gap-2">
1321
+ <i class="fas fa-check text-primary"></i>
1322
+ <span class="text-gray-300">5 exchanges per month</span>
1323
+ </li>
1324
+ <li class="flex items-center gap-2">
1325
+ <i class="fas fa-check text-primary"></i>
1326
+ <span class="text-gray-300">Basic AI matching</span>
1327
+ </li>
1328
+ <li class="flex items-center gap-2">
1329
+ <i class="fas fa-check text-primary"></i>
1330
+ <span class="text-gray-300">Community ratings</span>
1331
+ </li>
1332
+ <li class="flex items-center gap-2 opacity-50">
1333
+ <i class="fas fa-times text-gray-500"></i>
1334
+ <span class="text-gray-500">Priority support</span>
1335
+ </li>
1336
+ </ul>
1337
+ <button class="w-full btn-secondary px-6 py-3 rounded-full">
1338
+ Get Started
1339
+ </button>
1340
+ </div>
1341
+
1342
+ <!-- Pro Plan -->
1343
+ <div class="gradient-box p-8 rounded-2xl pricing-card relative border-2 border-primary/30">
1344
+ <div class="absolute top-0 right-0 bg-primary text-black px-4 py-1 rounded-bl-lg rounded-tr-lg font-bold text-sm">
1345
+ MOST POPULAR
1346
+ </div>
1347
+ <div class="mb-6">
1348
+ <h3 class="text-2xl font-bold text-white mb-1">Professional</h3>
1349
+ <p class="text-gray-400 text-sm">For serious skill traders</p>
1350
+ </div>
1351
+ <div class="mb-6">
1352
+ <span class="text-5xl font-bold text-white">$15</span>
1353
+ <span class="text-gray-400">/month</span>
1354
+ </div>
1355
+ <ul class="space-y-3 mb-8">
1356
+ <li class="flex items-center gap-2">
1357
+ <i class="fas fa-check text-primary"></i>
1358
+ <span class="text-gray-300">Unlimited exchanges</span>
1359
+ </li>
1360
+ <li class="flex items-center gap-2">
1361
+ <i class="fas fa-check text-primary"></i>
1362
+ <span class="text-gray-300">Advanced AI matching</span>
1363
+ </li>
1364
+ <li class="flex items-center gap-2">
1365
+ <i class="fas fa-check text-primary"></i>
1366
+ <span class="text-gray-300">Priority listing</span>
1367
+ </li>
1368
+ <li class="flex items-center gap-2">
1369
+ <i class="fas fa-check text-primary"></i>
1370
+ <span class="text-gray-300">Premium support</span>
1371
+ </li>
1372
+ </ul>
1373
+ <button class="w-full btn-primary px-6 py-3 rounded-full glow-box">
1374
+ Go Professional
1375
+ </button>
1376
+ </div>
1377
+
1378
+ <!-- Business Plan -->
1379
+ <div class="gradient-box p-8 rounded-2xl pricing-card">
1380
+ <div class="mb-6">
1381
+ <h3 class="text-2xl font-bold text-white mb-1">Enterprise</h3>
1382
+ <p class="text-gray-400 text-sm">For teams & organizations</p>
1383
+ </div>
1384
+ <div class="mb-6">
1385
+ <span class="text-5xl font-bold text-white">$99</span>
1386
+ <span class="text-gray-400">/month</span>
1387
+ </div>
1388
+ <ul class="space-y-3 mb-8">
1389
+ <li class="flex items-center gap-2">
1390
+ <i class="fas fa-check text-primary"></i>
1391
+ <span class="text-gray-300">Unlimited team members</span>
1392
+ </li>
1393
+ <li class="flex items-center gap-2">
1394
+ <i class="fas fa-check text-primary"></i>
1395
+ <span class="text-gray-300">Custom AI matching</span>
1396
+ </li>
1397
+ <li class="flex items-center gap-2">
1398
+ <i class="fas fa-check text-primary"></i>
1399
+ <span class="text-gray-300">Dedicated account manager</span>
1400
+ </li>
1401
+ <li class="flex items-center gap-2">
1402
+ <i class="fas fa-check text-primary"></i>
1403
+ <span class="text-gray-300">Enterprise API access</span>
1404
+ </li>
1405
+ </ul>
1406
+ <button class="w-full btn-secondary px-6 py-3 rounded-full">
1407
+ Contact Sales
1408
+ </button>
1409
+ </div>
1410
+ </div>
1411
+ </div>
1412
+ </section>
1413
+
1414
+ <!-- CTA Section -->
1415
+ <section class="py-24 px-4 sm:px-6 lg:px-8 bg-gradient-to-r from-black to-gray-900 relative overflow-hidden">
1416
+ <div class="max-w-7xl mx-auto text-center relative z-10">
1417
+ <h2 class="text-4xl md:text-5xl font-bold text-white mb-6">
1418
+ Ready to Transform Your <span class="gradient-text">Skills Network</span>?
1419
+ </h2>
1420
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto mb-10">
1421
+ Join AbilityXchange today and start exchanging skills with top professionals worldwide.
1422
+ </p>
1423
+ <div class="flex flex-col sm:flex-row gap-4 justify-center">
1424
+ <button class="btn-primary px-8 py-4 rounded-full text-lg">
1425
+ <i class="fas fa-bolt mr-2"></i>
1426
+ Get Started - It's Free
1427
+ </button>
1428
+ <button class="btn-secondary px-8 py-4 rounded-full text-lg">
1429
+ <i class="fas fa-comments mr-2"></i>
1430
+ Talk to Our Team
1431
+ </button>
1432
+ </div>
1433
+ <div class="mt-10 flex flex-wrap items-center justify-center gap-6 text-sm text-gray-400">
1434
+ <div class="flex items-center gap-2">
1435
+ <i class="fas fa-shield-alt"></i>
1436
+ <span>SSL Secured</span>
1437
+ </div>
1438
+ <div class="flex items-center gap-2">
1439
+ <i class="fas fa-lock"></i>
1440
+ <span>Data Encrypted</span>
1441
+ </div>
1442
+ <div class="flex items-center gap-2">
1443
+ <i class="fas fa-user-shield"></i>
1444
+ <span>Privacy First</span>
1445
+ </div>
1446
+ </div>
1447
+ </div>
1448
+ </section>
1449
+
1450
+ <!-- Footer -->
1451
+ <footer class="bg-black/70 border-t border-gray-800 relative z-10">
1452
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
1453
+ <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-12">
1454
+ <div class="col-span-2">
1455
+ <div class="flex items-center mb-6">
1456
+ <img src="https://imagedelivery.net/LtCN8b7XAtToQgo5calb3g/5282c62f-e522-4507-9956-07b063b49201/website" alt="AbilityXchange Logo" class="h-10 mr-3">
1457
+ <span class="text-2xl font-bold gradient-text">AbilityXchange</span>
1458
+ </div>
1459
+ <p class="text-gray-400 mb-6">
1460
+ The future of fair value exchange powered by artificial intelligence.
1461
+ </p>
1462
+ <div class="flex gap-4">
1463
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-900 flex items-center justify-center text-gray-300 hover:text-primary transition-colors">
1464
+ <i class="fab fa-twitter"></i>
1465
+ </a>
1466
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-900 flex items-center justify-center text-gray-300 hover:text-primary transition-colors">
1467
+ <i class="fab fa-linkedin"></i>
1468
+ </a>
1469
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-900 flex items-center justify-center text-gray-300 hover:text-primary transition-colors">
1470
+ <i class="fab fa-instagram"></i>
1471
+ </a>
1472
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-900 flex items-center justify-center text-gray-300 hover:text-primary transition-colors">
1473
+ <i class="fab fa-facebook"></i>
1474
+ </a>
1475
+ </div>
1476
+ </div>
1477
+ <div>
1478
+ <h4 class="text-lg font-semibold text-white mb-4">Platform</h4>
1479
+ <ul class="space-y-3">
1480
+ <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">How It Works</a></li>
1481
+ <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Features</a></li>
1482
+ <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Pricing</a></li>
1483
+ <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Success Stories</a></li>
1484
+ <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">API</a></li>
1485
+ </ul>
1486
+ </div>
1487
+ <div>
1488
+ <h4 class="text-lg font-semibold text-white mb-4">Resources</h4>
1489
+ <ul class="space-y-3">
1490
+ <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Help Center</a></li>
1491
+ <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Community</a></li>
1492
+ <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Blog</a></li>
1493
+ <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Webinars</a></li>
1494
+ <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Status</a></li>
1495
+ </ul>
1496
+ </div>
1497
+ <div>
1498
+ <h4 class="text-lg font-semibold text-white mb-4">Company</h4>
1499
+ <ul class="space-y-3">
1500
+ <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">About Us</a></li>
1501
+ <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Careers</a></li>
1502
+ <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Press</a></li>
1503
+ <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Contact</a></li>
1504
+ <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Legal</a></li>
1505
+ </ul>
1506
+ </div>
1507
+ </div>
1508
+ <div class="border-t border-gray-800 mt-16 pt-8 flex flex-col md:flex-row justify-between items-center">
1509
+ <p class="text-gray-400">
1510
+ © 2023 AbilityXchange. All rights reserved.
1511
+ </p>
1512
+ <div class="flex gap-6 mt-4 md:mt-0">
1513
+ <a href="#" class="text-gray-400 hover:text-primary transition-colors text-sm">Privacy Policy</a>
1514
+ <a href="#" class="text-gray-400 hover:text-primary transition-colors text-sm">Terms of Service</a>
1515
+ <a href="#" class="text-gray-400 hover:text-primary transition-colors text-sm">Cookie Policy</a>
1516
+ </div>
1517
+ </div>
1518
+ <div class="mt-6 text-center md:text-left text-xs text-gray-500">
1519
+ <p>"AbilityXchange" is a registered trademark of AbilityXchange Technologies LLC.</p>
1520
+ <p class="mt-1">The future of fair exchange is here. Trade skills, not dollars.</p>
1521
+ </div>
1522
+ </div>
1523
+ </footer>
1524
+
1525
+ <script>
1526
+ // Mobile menu toggle
1527
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
1528
+ const menu = document.getElementById('mobile-menu');
1529
+ if (menu.classList.contains('hidden')) {
1530
+ menu.classList.remove('hidden');
1531
+ menu.classList.add('block');
1532
+ } else {
1533
+ menu.classList.remove('block');
1534
+ menu.classList.add('hidden');
1535
+ }
1536
+ });
1537
+
1538
+ // Typewriter effect
1539
+ let i = 0;
1540
+ const txt = 'With AbilityXchange';
1541
+ const speed = 120;
1542
+
1543
+ function typeWriter() {
1544
+ if (i < txt.length) {
1545
+ document.querySelector(".typewriter").textContent += txt.charAt(i);
1546
+ i++;
1547
+ setTimeout(typeWriter, speed);
1548
+ } else {
1549
+ // Start blinking cursor animation after typing completes
1550
+ document.querySelector(".typewriter").classList.add("typing");
1551
+ }
1552
+ }
1553
+
1554
+ // Start the typewriter effect after page loads
1555
+ window.addEventListener('load', function() {
1556
+ setTimeout(typeWriter, 1000);
1557
+ });
1558
+
1559
+ // Sparkle effect
1560
+ document.addEventListener('mousemove', function(e) {
1561
+ const sparkle = document.createElement('div');
1562
+ sparkle.className = 'sparkle';
1563
+ sparkle.style.left = e.clientX + 'px';
1564
+ sparkle.style.top = e.clientY + 'px';
1565
+ document.body.appendChild(sparkle);
1566
+
1567
+ // Animation
1568
+ sparkle.animate([
1569
+ { opacity: 1, transform: 'scale(1)' },
1570
+ { opacity: 0, transform: 'scale(3)' }
1571
+ ], {
1572
+ duration: 1000,
1573
+ easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
1574
+ fill: 'forwards'
1575
+ });
1576
+
1577
+ // Remove after animation
1578
+ setTimeout(() => {
1579
+ sparkle.remove();
1580
+ }, 1000);
1581
+ });
1582
+
1583
+ // Smooth scrolling for anchor links
1584
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
1585
+ anchor.addEventListener('click', function (e) {
1586
+ e.preventDefault();
1587
+
1588
+ const target = document.querySelector(this.getAttribute('href'));
1589
+ if (target) {
1590
+ target.scrollIntoView({
1591
+ behavior: 'smooth',
1592
+ block: 'start'
1593
+ });
1594
+ }
1595
+ });
1596
+ });
1597
+
1598
+ // Intersection Observer for animation triggers
1599
+ const animateOnScroll = function() {
1600
+ const elements = document.querySelectorAll('.animate-fade-in');
1601
+
1602
+ const observer = new IntersectionObserver((entries) => {
1603
+ entries.forEach(entry => {
1604
+ if (entry.isIntersecting) {
1605
+ entry.target.style.animationPlayState = 'running';
1606
+ observer.unobserve(entry.target);
1607
+ }
1608
+ });
1609
+ }, { threshold: 0.1 });
1610
+
1611
+ elements.forEach(element => {
1612
+ element.style.animationPlayState = 'paused';
1613
+ observer.observe(element);
1614
+ });
1615
+ }
1616
+
1617
+ // Initialize animations on load
1618
+ window.addEventListener('load', animateOnScroll);
1619
+ </script>
1620
+ <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=hamadali1/ax1" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
1621
+ </html>