Hugging Face's logo

Spaces:
CoachSamuelFAI
/
gameify
Running

App Files Community
CoachSamuelFAI commited on
Commit
8ead433
·
verified ·
1 Parent(s): 9aa0393

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1360 -19
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Gameify
3
- emoji: 📈
4
- colorFrom: pink
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: gameify
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: green
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,1360 @@
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>Interactive Gamified Experience</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
+ <style>
10
+ /* Custom CSS for parallax and animations */
11
+ .parallax {
12
+ background-attachment: fixed;
13
+ background-position: center;
14
+ background-repeat: no-repeat;
15
+ background-size: cover;
16
+ min-height: 100vh;
17
+ position: relative;
18
+ overflow: hidden;
19
+ }
20
+
21
+ .parallax-content {
22
+ position: relative;
23
+ z-index: 2;
24
+ }
25
+
26
+ .parallax-bg {
27
+ position: absolute;
28
+ top: 0;
29
+ left: 0;
30
+ width: 100%;
31
+ height: 100%;
32
+ z-index: 1;
33
+ }
34
+
35
+ .parallax-bg-1 {
36
+ background-image: url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
37
+ }
38
+
39
+ .parallax-bg-2 {
40
+ background-image: url('https://images.unsplash.com/photo-1497366754035-f200968a6e72?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
41
+ }
42
+
43
+ .parallax-bg-3 {
44
+ background-image: url('https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
45
+ }
46
+
47
+ .floating {
48
+ animation: floating 3s ease-in-out infinite;
49
+ }
50
+
51
+ @keyframes floating {
52
+ 0% { transform: translateY(0px); }
53
+ 50% { transform: translateY(-20px); }
54
+ 100% { transform: translateY(0px); }
55
+ }
56
+
57
+ .pulse {
58
+ animation: pulse 2s infinite;
59
+ }
60
+
61
+ @keyframes pulse {
62
+ 0% { transform: scale(1); }
63
+ 50% { transform: scale(1.05); }
64
+ 100% { transform: scale(1); }
65
+ }
66
+
67
+ .progress-bar {
68
+ height: 10px;
69
+ border-radius: 5px;
70
+ transition: width 0.5s ease;
71
+ }
72
+
73
+ .social-post {
74
+ transform: rotate(-2deg);
75
+ box-shadow: 10px 10px 0 rgba(0,0,0,0.1);
76
+ transition: all 0.3s ease;
77
+ }
78
+
79
+ .social-post:hover {
80
+ transform: rotate(0deg) scale(1.05);
81
+ box-shadow: 15px 15px 0 rgba(0,0,0,0.15);
82
+ }
83
+
84
+ .social-post:nth-child(even) {
85
+ transform: rotate(2deg);
86
+ }
87
+
88
+ .social-post:nth-child(even):hover {
89
+ transform: rotate(0deg) scale(1.05);
90
+ }
91
+
92
+ .gamification-card {
93
+ perspective: 1000px;
94
+ }
95
+
96
+ .gamification-card-inner {
97
+ transition: transform 0.6s;
98
+ transform-style: preserve-3d;
99
+ }
100
+
101
+ .gamification-card:hover .gamification-card-inner {
102
+ transform: rotateY(180deg);
103
+ }
104
+
105
+ .gamification-card-front, .gamification-card-back {
106
+ backface-visibility: hidden;
107
+ }
108
+
109
+ .gamification-card-back {
110
+ transform: rotateY(180deg);
111
+ }
112
+
113
+ .value-highlight {
114
+ position: relative;
115
+ display: inline-block;
116
+ }
117
+
118
+ .value-highlight::after {
119
+ content: '';
120
+ position: absolute;
121
+ bottom: 0;
122
+ left: 0;
123
+ width: 100%;
124
+ height: 10px;
125
+ background-color: rgba(251, 191, 36, 0.5);
126
+ z-index: -1;
127
+ transition: all 0.3s ease;
128
+ }
129
+
130
+ .value-highlight:hover::after {
131
+ height: 20px;
132
+ background-color: rgba(251, 191, 36, 0.8);
133
+ }
134
+
135
+ /* Onboarding modal styles */
136
+ .onboarding-modal {
137
+ display: none;
138
+ position: fixed;
139
+ top: 0;
140
+ left: 0;
141
+ width: 100%;
142
+ height: 100%;
143
+ background-color: rgba(0,0,0,0.8);
144
+ z-index: 1000;
145
+ overflow-y: auto;
146
+ }
147
+
148
+ .onboarding-content {
149
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
150
+ border-radius: 20px;
151
+ max-width: 800px;
152
+ margin: 50px auto;
153
+ padding: 40px;
154
+ color: white;
155
+ position: relative;
156
+ animation: slideUp 0.5s ease-out;
157
+ }
158
+
159
+ @keyframes slideUp {
160
+ from { transform: translateY(50px); opacity: 0; }
161
+ to { transform: translateY(0); opacity: 1; }
162
+ }
163
+
164
+ .onboarding-step {
165
+ display: none;
166
+ }
167
+
168
+ .onboarding-step.active {
169
+ display: block;
170
+ animation: fadeIn 0.5s ease-in;
171
+ }
172
+
173
+ @keyframes fadeIn {
174
+ from { opacity: 0; }
175
+ to { opacity: 1; }
176
+ }
177
+
178
+ .option-card {
179
+ background-color: rgba(255,255,255,0.2);
180
+ border-radius: 15px;
181
+ padding: 20px;
182
+ margin-bottom: 15px;
183
+ cursor: pointer;
184
+ transition: all 0.3s ease;
185
+ border: 2px solid transparent;
186
+ }
187
+
188
+ .option-card:hover {
189
+ background-color: rgba(255,255,255,0.3);
190
+ transform: translateY(-5px);
191
+ }
192
+
193
+ .option-card.selected {
194
+ background-color: rgba(255,255,255,0.4);
195
+ border-color: white;
196
+ box-shadow: 0 10px 20px rgba(0,0,0,0.2);
197
+ }
198
+
199
+ .progress-dots {
200
+ display: flex;
201
+ justify-content: center;
202
+ margin: 30px 0;
203
+ }
204
+
205
+ .progress-dot {
206
+ width: 12px;
207
+ height: 12px;
208
+ border-radius: 50%;
209
+ background-color: rgba(255,255,255,0.3);
210
+ margin: 0 5px;
211
+ transition: all 0.3s ease;
212
+ }
213
+
214
+ .progress-dot.active {
215
+ background-color: white;
216
+ transform: scale(1.2);
217
+ }
218
+
219
+ /* Features section styles */
220
+ .features-tab {
221
+ display: none;
222
+ }
223
+
224
+ .features-tab.active {
225
+ display: block;
226
+ animation: fadeIn 0.5s ease-in;
227
+ }
228
+
229
+ .tab-button {
230
+ background: none;
231
+ border: none;
232
+ padding: 10px 20px;
233
+ font-size: 18px;
234
+ color: #4a5568;
235
+ cursor: pointer;
236
+ position: relative;
237
+ }
238
+
239
+ .tab-button.active {
240
+ color: #4c51bf;
241
+ font-weight: bold;
242
+ }
243
+
244
+ .tab-button.active:after {
245
+ content: '';
246
+ position: absolute;
247
+ bottom: 0;
248
+ left: 20%;
249
+ width: 60%;
250
+ height: 3px;
251
+ background-color: #4c51bf;
252
+ border-radius: 3px;
253
+ }
254
+
255
+ /* Community dropdown styles */
256
+ .community-dropdown {
257
+ display: none;
258
+ position: absolute;
259
+ background-color: white;
260
+ min-width: 300px;
261
+ box-shadow: 0 10px 25px rgba(0,0,0,0.1);
262
+ border-radius: 10px;
263
+ z-index: 10;
264
+ padding: 15px;
265
+ right: 0;
266
+ animation: fadeIn 0.3s ease-in;
267
+ }
268
+
269
+ .community-dropdown.show {
270
+ display: block;
271
+ }
272
+
273
+ .community-option {
274
+ padding: 10px 15px;
275
+ border-radius: 8px;
276
+ margin-bottom: 5px;
277
+ cursor: pointer;
278
+ transition: all 0.2s ease;
279
+ }
280
+
281
+ .community-option:hover {
282
+ background-color: #f0f4ff;
283
+ transform: translateX(5px);
284
+ }
285
+
286
+ .community-option i {
287
+ margin-right: 10px;
288
+ color: #667eea;
289
+ }
290
+
291
+ /* Social media image styles */
292
+ .social-image {
293
+ width: 100%;
294
+ height: 200px;
295
+ object-fit: cover;
296
+ border-radius: 10px;
297
+ margin-bottom: 15px;
298
+ }
299
+ </style>
300
+ </head>
301
+ <body class="font-sans bg-gray-50">
302
+ <!-- Navigation -->
303
+ <nav class="fixed w-full bg-white bg-opacity-90 shadow-md z-50">
304
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
305
+ <div class="flex justify-between h-16">
306
+ <div class="flex items-center">
307
+ <div class="flex-shrink-0 flex items-center">
308
+ <span class="text-2xl font-bold text-indigo-600">GAME<span class="text-yellow-500">IFY</span></span>
309
+ </div>
310
+ </div>
311
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
312
+ <a href="#" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Home</a>
313
+ <a href="#" id="features-link" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Features</a>
314
+ <div class="relative">
315
+ <a href="#" id="community-link" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium flex items-center">
316
+ Community <i class="fas fa-chevron-down ml-1 text-xs"></i>
317
+ </a>
318
+ <div id="community-dropdown" class="community-dropdown">
319
+ <h4 class="font-bold text-gray-800 mb-3">Start or Join a Community</h4>
320
+ <div class="community-option">
321
+ <i class="fas fa-trophy"></i> Challenge Champions
322
+ </div>
323
+ <div class="community-option">
324
+ <i class="fas fa-running"></i> Fitness Quest
325
+ </div>
326
+ <div class="community-option">
327
+ <i class="fas fa-book"></i> Learning Adventurers
328
+ </div>
329
+ <div class="community-option">
330
+ <i class="fas fa-leaf"></i> Eco Warriors
331
+ </div>
332
+ <div class="community-option">
333
+ <i class="fas fa-utensils"></i> Healthy Eating Guild
334
+ </div>
335
+ <div class="community-option">
336
+ <i class="fas fa-lightbulb"></i> Creative Masters
337
+ </div>
338
+ <div class="community-option">
339
+ <i class="fas fa-coins"></i> Financial Freedom League
340
+ </div>
341
+ <div class="community-option">
342
+ <i class="fas fa-plus-circle text-purple-500"></i> Create Custom Community
343
+ </div>
344
+ </div>
345
+ </div>
346
+ <a href="#" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Pricing</a>
347
+ <button id="start-journey-nav" class="ml-4 bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-full text-sm font-medium transition duration-300 transform hover:scale-105">
348
+ Get Started
349
+ </button>
350
+ </div>
351
+ <div class="-mr-2 flex items-center md:hidden">
352
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
353
+ <span class="sr-only">Open main menu</span>
354
+ <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
355
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
356
+ </svg>
357
+ </button>
358
+ </div>
359
+ </div>
360
+ </div>
361
+ </nav>
362
+
363
+ <!-- Hero Section with Parallax -->
364
+ <section class="parallax pt-16">
365
+ <div class="parallax-bg parallax-bg-1"></div>
366
+ <div class="parallax-content">
367
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-32">
368
+ <div class="text-center">
369
+ <h1 class="text-5xl md:text-7xl font-bold text-white mb-6">
370
+ <span class="value-highlight">Transform</span> Your Experience With
371
+ <span class="value-highlight">Gamification</span>
372
+ </h1>
373
+ <p class="text-xl md:text-2xl text-white mb-10 max-w-3xl mx-auto">
374
+ Our platform turns ordinary tasks into <span class="font-bold text-yellow-300">engaging challenges</span>,
375
+ <span class="font-bold text-yellow-300">rewarding progress</span>, and
376
+ <span class="font-bold text-yellow-300">celebrating achievements</span>.
377
+ </p>
378
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
379
+ <button id="start-journey" class="bg-indigo-600 hover:bg-indigo-700 text-white px-8 py-4 rounded-full text-lg font-bold transition duration-300 transform hover:scale-105 shadow-lg">
380
+ Start Your Journey
381
+ </button>
382
+ <button class="bg-white hover:bg-gray-100 text-indigo-600 px-8 py-4 rounded-full text-lg font-bold transition duration-300 transform hover:scale-105 shadow-lg">
383
+ Watch Demo
384
+ </button>
385
+ </div>
386
+ </div>
387
+ </div>
388
+ </div>
389
+ </section>
390
+
391
+ <!-- Onboarding Modal -->
392
+ <div id="onboarding-modal" class="onboarding-modal">
393
+ <div class="onboarding-content">
394
+ <button id="close-onboarding" class="absolute top-4 right-4 text-white text-2xl hover:text-gray-200">&times;</button>
395
+
396
+ <div id="step1" class="onboarding-step active">
397
+ <h2 class="text-3xl font-bold mb-6 text-center">Welcome to Your Gamified Journey!</h2>
398
+ <p class="text-xl text-center mb-10">Let's customize your experience by answering a few fun questions.</p>
399
+
400
+ <div class="text-center">
401
+ <img src="https://images.unsplash.com/photo-1542621334-a254cf47733d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
402
+ alt="Welcome" class="w-48 h-48 rounded-full object-cover mx-auto mb-8 border-4 border-white">
403
+ <button id="next-step1" class="bg-white text-indigo-600 px-8 py-3 rounded-full text-lg font-bold transition duration-300 transform hover:scale-105 shadow-lg">
404
+ Let's Begin! <i class="fas fa-arrow-right ml-2"></i>
405
+ </button>
406
+ </div>
407
+ </div>
408
+
409
+ <div id="step2" class="onboarding-step">
410
+ <h2 class="text-3xl font-bold mb-6 text-center">What's Your Primary Goal?</h2>
411
+ <p class="text-center mb-8">Choose the area you want to gamify (you can add more later)</p>
412
+
413
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
414
+ <div class="option-card" data-value="productivity">
415
+ <div class="flex items-center">
416
+ <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mr-4">
417
+ <i class="fas fa-check-circle text-indigo-600"></i>
418
+ </div>
419
+ <h3 class="text-xl font-bold">Boost Productivity</h3>
420
+ </div>
421
+ </div>
422
+ <div class="option-card" data-value="fitness">
423
+ <div class="flex items-center">
424
+ <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mr-4">
425
+ <i class="fas fa-running text-green-600"></i>
426
+ </div>
427
+ <h3 class="text-xl font-bold">Improve Fitness</h3>
428
+ </div>
429
+ </div>
430
+ <div class="option-card" data-value="learning">
431
+ <div class="flex items-center">
432
+ <div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center mr-4">
433
+ <i class="fas fa-book text-yellow-600"></i>
434
+ </div>
435
+ <h3 class="text-xl font-bold">Learn New Skills</h3>
436
+ </div>
437
+ </div>
438
+ <div class="option-card" data-value="habits">
439
+ <div class="flex items-center">
440
+ <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mr-4">
441
+ <i class="fas fa-star text-purple-600"></i>
442
+ </div>
443
+ <h3 class="text-xl font-bold">Build Better Habits</h3>
444
+ </div>
445
+ </div>
446
+ </div>
447
+
448
+ <div class="progress-dots">
449
+ <div class="progress-dot"></div>
450
+ <div class="progress-dot active"></div>
451
+ <div class="progress-dot"></div>
452
+ <div class="progress-dot"></div>
453
+ <div class="progress-dot"></div>
454
+ </div>
455
+
456
+ <div class="flex justify-between">
457
+ <button id="prev-step2" class="bg-transparent border border-white text-white px-6 py-2 rounded-full hover:bg-white hover:text-indigo-600">
458
+ <i class="fas fa-arrow-left mr-2"></i> Back
459
+ </button>
460
+ <button id="next-step2" class="bg-white text-indigo-600 px-8 py-3 rounded-full text-lg font-bold transition duration-300 transform hover:scale-105 shadow-lg">
461
+ Next <i class="fas fa-arrow-right ml-2"></i>
462
+ </button>
463
+ </div>
464
+ </div>
465
+
466
+ <div id="step3" class="onboarding-step">
467
+ <h2 class="text-3xl font-bold mb-6 text-center">What Motivates You Most?</h2>
468
+ <p class="text-center mb-8">This helps us create the perfect reward system for you</p>
469
+
470
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
471
+ <div class="option-card" data-value="competition">
472
+ <div class="flex items-center">
473
+ <div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mr-4">
474
+ <i class="fas fa-trophy text-red-600"></i>
475
+ </div>
476
+ <h3 class="text-xl font-bold">Competition & Leaderboards</h3>
477
+ </div>
478
+ </div>
479
+ <div class="option-card" data-value="badges">
480
+ <div class="flex items-center">
481
+ <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-4">
482
+ <i class="fas fa-medal text-blue-600"></i>
483
+ </div>
484
+ <h3 class="text-xl font-bold">Badges & Achievements</h3>
485
+ </div>
486
+ </div>
487
+ <div class="option-card" data-value="progress">
488
+ <div class="flex items-center">
489
+ <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mr-4">
490
+ <i class="fas fa-chart-line text-green-600"></i>
491
+ </div>
492
+ <h3 class="text-xl font-bold">Visual Progress Tracking</h3>
493
+ </div>
494
+ </div>
495
+ <div class="option-card" data-value="community">
496
+ <div class="flex items-center">
497
+ <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mr-4">
498
+ <i class="fas fa-users text-purple-600"></i>
499
+ </div>
500
+ <h3 class="text-xl font-bold">Community Support</h3>
501
+ </div>
502
+ </div>
503
+ </div>
504
+
505
+ <div class="progress-dots">
506
+ <div class="progress-dot"></div>
507
+ <div class="progress-dot"></div>
508
+ <div class="progress-dot active"></div>
509
+ <div class="progress-dot"></div>
510
+ <div class="progress-dot"></div>
511
+ </div>
512
+
513
+ <div class="flex justify-between">
514
+ <button id="prev-step3" class="bg-transparent border border-white text-white px-6 py-2 rounded-full hover:bg-white hover:text-indigo-600">
515
+ <i class="fas fa-arrow-left mr-2"></i> Back
516
+ </button>
517
+ <button id="next-step3" class="bg-white text-indigo-600 px-8 py-3 rounded-full text-lg font-bold transition duration-300 transform hover:scale-105 shadow-lg">
518
+ Next <i class="fas fa-arrow-right ml-2"></i>
519
+ </button>
520
+ </div>
521
+ </div>
522
+
523
+ <div id="step4" class="onboarding-step">
524
+ <h2 class="text-3xl font-bold mb-6 text-center">Choose Your Adventure Style</h2>
525
+ <p class="text-center mb-8">How do you want your journey to look and feel?</p>
526
+
527
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
528
+ <div class="option-card" data-value="fantasy">
529
+ <img src="https://images.unsplash.com/photo-1542273917363-3b1817f69a2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
530
+ alt="Fantasy Theme" class="w-full h-32 object-cover rounded-lg mb-3">
531
+ <h3 class="text-xl font-bold">Fantasy Quest</h3>
532
+ <p class="text-sm">Knights, dragons, and epic adventures</p>
533
+ </div>
534
+ <div class="option-card" data-value="space">
535
+ <img src="https://images.unsplash.com/photo-1454789548928-9a5b1b26ba09?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
536
+ alt="Space Theme" class="w-full h-32 object-cover rounded-lg mb-3">
537
+ <h3 class="text-xl font-bold">Space Explorer</h3>
538
+ <p class="text-sm">Journey through the cosmos</p>
539
+ </div>
540
+ <div class="option-card" data-value="detective">
541
+ <img src="https://images.unsplash.com/photo-1516455590571-18256e5bb9ff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
542
+ alt="Detective Theme" class="w-full h-32 object-cover rounded-lg mb-3">
543
+ <h3 class="text-xl font-bold">Mystery Detective</h3>
544
+ <p class="text-sm">Solve puzzles and uncover clues</p>
545
+ </div>
546
+ </div>
547
+
548
+ <div class="progress-dots">
549
+ <div class="progress-dot"></div>
550
+ <div class="progress-dot"></div>
551
+ <div class="progress-dot"></div>
552
+ <div class="progress-dot active"></div>
553
+ <div class="progress-dot"></div>
554
+ </div>
555
+
556
+ <div class="flex justify-between">
557
+ <button id="prev-step4" class="bg-transparent border border-white text-white px-6 py-2 rounded-full hover:bg-white hover:text-indigo-600">
558
+ <i class="fas fa-arrow-left mr-2"></i> Back
559
+ </button>
560
+ <button id="next-step4" class="bg-white text-indigo-600 px-8 py-3 rounded-full text-lg font-bold transition duration-300 transform hover:scale-105 shadow-lg">
561
+ Next <i class="fas fa-arrow-right ml-2"></i>
562
+ </button>
563
+ </div>
564
+ </div>
565
+
566
+ <div id="step5" class="onboarding-step">
567
+ <h2 class="text-3xl font-bold mb-6 text-center">Your Journey Begins!</h2>
568
+ <p class="text-xl text-center mb-8">Based on your choices, we've created a personalized experience just for you.</p>
569
+
570
+ <div class="bg-white bg-opacity-20 rounded-xl p-6 mb-8">
571
+ <div class="flex items-center mb-4">
572
+ <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mr-4">
573
+ <i class="fas fa-user-astronaut text-indigo-600 text-2xl"></i>
574
+ </div>
575
+ <div>
576
+ <h3 class="text-xl font-bold">Space Explorer Challenge</h3>
577
+ <p class="text-indigo-200">3-month mission to boost productivity</p>
578
+ </div>
579
+ </div>
580
+
581
+ <div class="grid grid-cols-3 gap-4 text-center">
582
+ <div>
583
+ <div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-2">
584
+ <i class="fas fa-medal text-yellow-600"></i>
585
+ </div>
586
+ <p class="text-sm font-bold">15 Badges</p>
587
+ </div>
588
+ <div>
589
+ <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-2">
590
+ <i class="fas fa-rocket text-green-600"></i>
591
+ </div>
592
+ <p class="text-sm font-bold">5 Levels</p>
593
+ </div>
594
+ <div>
595
+ <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-2">
596
+ <i class="fas fa-users text-purple-600"></i>
597
+ </div>
598
+ <p class="text-sm font-bold">Team Challenges</p>
599
+ </div>
600
+ </div>
601
+ </div>
602
+
603
+ <div class="progress-dots">
604
+ <div class="progress-dot"></div>
605
+ <div class="progress-dot"></div>
606
+ <div class="progress-dot"></div>
607
+ <div class="progress-dot"></div>
608
+ <div class="progress-dot active"></div>
609
+ </div>
610
+
611
+ <div class="text-center">
612
+ <button id="complete-onboarding" class="bg-white text-indigo-600 px-8 py-3 rounded-full text-lg font-bold transition duration-300 transform hover:scale-105 shadow-lg mb-4">
613
+ Launch My Journey! <i class="fas fa-rocket ml-2"></i>
614
+ </button>
615
+ <p class="text-sm">You can always change these settings later</p>
616
+ </div>
617
+ </div>
618
+ </div>
619
+ </div>
620
+
621
+ <!-- Features Section -->
622
+ <section id="features-section" class="bg-white py-20" style="display: none;">
623
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
624
+ <div class="text-center mb-16">
625
+ <h2 class="text-4xl font-bold text-gray-900 mb-4">Powerful <span class="text-indigo-600">Features</span></h2>
626
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Everything you need to turn life into an adventure</p>
627
+ </div>
628
+
629
+ <div class="flex justify-center mb-12">
630
+ <div class="inline-flex rounded-md shadow-sm">
631
+ <button id="tab1-btn" class="tab-button active">Progress Tracking</button>
632
+ <button id="tab2-btn" class="tab-button">Rewards System</button>
633
+ <button id="tab3-btn" class="tab-button">Community</button>
634
+ <button id="tab4-btn" class="tab-button">Customization</button>
635
+ </div>
636
+ </div>
637
+
638
+ <div id="tab1" class="features-tab active">
639
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
640
+ <div>
641
+ <h3 class="text-3xl font-bold text-gray-900 mb-6">Visualize Your Entire Journey</h3>
642
+ <p class="text-lg text-gray-600 mb-6">Our interactive dashboards and progress maps show exactly how far you've come and what's ahead in your adventure.</p>
643
+ <ul class="space-y-4">
644
+ <li class="flex items-start">
645
+ <div class="flex-shrink-0 bg-indigo-100 rounded-full p-2 mr-4">
646
+ <i class="fas fa-chart-pie text-indigo-600"></i>
647
+ </div>
648
+ <div>
649
+ <h4 class="font-bold text-gray-900">Detailed Analytics</h4>
650
+ <p class="text-gray-600">Track every metric that matters to you with beautiful visualizations.</p>
651
+ </div>
652
+ </li>
653
+ <li class="flex items-start">
654
+ <div class="flex-shrink-0 bg-green-100 rounded-full p-2 mr-4">
655
+ <i class="fas fa-project-diagram text-green-600"></i>
656
+ </div>
657
+ <div>
658
+ <h4 class="font-bold text-gray-900">Milestone Mapping</h4>
659
+ <p class="text-gray-600">See your path to success with clear milestones and checkpoints.</p>
660
+ </div>
661
+ </li>
662
+ <li class="flex items-start">
663
+ <div class="flex-shrink-0 bg-yellow-100 rounded-full p-2 mr-4">
664
+ <i class="fas fa-bell text-yellow-600"></i>
665
+ </div>
666
+ <div>
667
+ <h4 class="font-bold text-gray-900">Smart Reminders</h4>
668
+ <p class="text-gray-600">Get notified when you're falling behind or crushing your goals.</p>
669
+ </div>
670
+ </li>
671
+ </ul>
672
+ </div>
673
+ <div>
674
+ <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
675
+ alt="Progress Tracking" class="rounded-xl shadow-2xl">
676
+ </div>
677
+ </div>
678
+ </div>
679
+
680
+ <div id="tab2" class="features-tab">
681
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
682
+ <div>
683
+ <h3 class="text-3xl font-bold text-gray-900 mb-6">Motivating Reward System</h3>
684
+ <p class="text-lg text-gray-600 mb-6">Earn points, badges, and unlock achievements that actually motivate you to keep going.</p>
685
+ <ul class="space-y-4">
686
+ <li class="flex items-start">
687
+ <div class="flex-shrink-0 bg-purple-100 rounded-full p-2 mr-4">
688
+ <i class="fas fa-trophy text-purple-600"></i>
689
+ </div>
690
+ <div>
691
+ <h4 class="font-bold text-gray-900">Custom Badges</h4>
692
+ <p class="text-gray-600">Collect unique badges for every milestone you achieve.</p>
693
+ </div>
694
+ </li>
695
+ <li class="flex items-start">
696
+ <div class="flex-shrink-0 bg-red-100 rounded-full p-2 mr-4">
697
+ <i class="fas fa-coins text-red-600"></i>
698
+ </div>
699
+ <div>
700
+ <h4 class="font-bold text-gray-900">Point System</h4>
701
+ <p class="text-gray-600">Earn points for tasks completed and redeem them for rewards.</p>
702
+ </div>
703
+ </li>
704
+ <li class="flex items-start">
705
+ <div class="flex-shrink-0 bg-blue-100 rounded-full p-2 mr-4">
706
+ <i class="fas fa-crown text-blue-600"></i>
707
+ </div>
708
+ <div>
709
+ <h4 class="font-bold text-gray-900">Leaderboards</h4>
710
+ <p class="text-gray-600">Compete with friends or the community for top spots.</p>
711
+ </div>
712
+ </li>
713
+ </ul>
714
+ </div>
715
+ <div>
716
+ <img src="https://images.unsplash.com/photo-1600267165477-6d4cc741b379?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
717
+ alt="Rewards System" class="rounded-xl shadow-2xl">
718
+ </div>
719
+ </div>
720
+ </div>
721
+
722
+ <div id="tab3" class="features-tab">
723
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
724
+ <div>
725
+ <h3 class="text-3xl font-bold text-gray-900 mb-6">Thriving Community</h3>
726
+ <p class="text-lg text-gray-600 mb-6">Join forces with like-minded adventurers to achieve more together than you ever could alone.</p>
727
+ <ul class="space-y-4">
728
+ <li class="flex items-start">
729
+ <div class="flex-shrink-0 bg-green-100 rounded-full p-2 mr-4">
730
+ <i class="fas fa-users text-green-600"></i>
731
+ </div>
732
+ <div>
733
+ <h4 class="font-bold text-gray-900">Group Challenges</h4>
734
+ <p class="text-gray-600">Team up to complete epic quests and earn collective rewards.</p>
735
+ </div>
736
+ </li>
737
+ <li class="flex items-start">
738
+ <div class="flex-shrink-0 bg-yellow-100 rounded-full p-2 mr-4">
739
+ <i class="fas fa-comments text-yellow-600"></i>
740
+ </div>
741
+ <div>
742
+ <h4 class="font-bold text-gray-900">Discussion Forums</h4>
743
+ <p class="text-gray-600">Share tips, get advice, and celebrate wins together.</p>
744
+ </div>
745
+ </li>
746
+ <li class="flex items-start">
747
+ <div class="flex-shrink-0 bg-pink-100 rounded-full p-2 mr-4">
748
+ <i class="fas fa-hands-helping text-pink-600"></i>
749
+ </div>
750
+ <div>
751
+ <h4 class="font-bold text-gray-900">Accountability Partners</h4>
752
+ <p class="text-gray-600">Find your perfect teammate to keep each other motivated.</p>
753
+ </div>
754
+ </li>
755
+ </ul>
756
+ </div>
757
+ <div>
758
+ <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
759
+ alt="Community" class="rounded-xl shadow-2xl">
760
+ </div>
761
+ </div>
762
+ </div>
763
+
764
+ <div id="tab4" class="features-tab">
765
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
766
+ <div>
767
+ <h3 class="text-3xl font-bold text-gray-900 mb-6">Fully Customizable</h3>
768
+ <p class="text-lg text-gray-600 mb-6">Make it truly yours with endless personalization options.</p>
769
+ <ul class="space-y-4">
770
+ <li class="flex items-start">
771
+ <div class="flex-shrink-0 bg-indigo-100 rounded-full p-2 mr-4">
772
+ <i class="fas fa-paint-brush text-indigo-600"></i>
773
+ </div>
774
+ <div>
775
+ <h4 class="font-bold text-gray-900">Themes & Avatars</h4>
776
+ <p class="text-gray-600">Choose from multiple adventure themes and create your character.</p>
777
+ </div>
778
+ </li>
779
+ <li class="flex items-start">
780
+ <div class="flex-shrink-0 bg-purple-100 rounded-full p-2 mr-4">
781
+ <i class="fas fa-sliders-h text-purple-600"></i>
782
+ </div>
783
+ <div>
784
+ <h4 class="font-bold text-gray-900">Goal Customization</h4>
785
+ <p class="text-gray-600">Set exactly what you want to achieve and how you'll measure it.</p>
786
+ </div>
787
+ </li>
788
+ <li class="flex items-start">
789
+ <div class="flex-shrink-0 bg-blue-100 rounded-full p-2 mr-4">
790
+ <i class="fas fa-bell text-blue-600"></i>
791
+ </div>
792
+ <div>
793
+ <h4 class="font-bold text-gray-900">Notification Preferences</h4>
794
+ <p class="text-gray-600">Get reminders exactly how and when you want them.</p>
795
+ </div>
796
+ </li>
797
+ </ul>
798
+ </div>
799
+ <div>
800
+ <img src="https://images.unsplash.com/photo-1551033406-611cf9a28f67?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
801
+ alt="Customization" class="rounded-xl shadow-2xl">
802
+ </div>
803
+ </div>
804
+ </div>
805
+ </div>
806
+ </section>
807
+
808
+ <!-- Progress Tracker -->
809
+ <section class="bg-white py-20">
810
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
811
+ <div class="text-center mb-16">
812
+ <h2 class="text-4xl font-bold text-gray-900 mb-4">Your <span class="text-indigo-600">Progress</span> Journey</h2>
813
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Track your achievements and unlock new levels as you grow</p>
814
+ </div>
815
+
816
+ <div class="bg-gray-100 rounded-xl p-8 mb-12">
817
+ <div class="flex justify-between mb-4">
818
+ <span class="font-medium text-gray-700">Level 3 Explorer</span>
819
+ <span class="font-medium text-indigo-600">65% to next level</span>
820
+ </div>
821
+ <div class="w-full bg-gray-300 rounded-full h-4">
822
+ <div class="progress-bar bg-gradient-to-r from-yellow-400 to-indigo-600 rounded-full h-4" style="width: 65%"></div>
823
+ </div>
824
+ <div class="flex justify-between mt-8">
825
+ <div class="text-center">
826
+ <div class="w-20 h-20 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-2">
827
+ <span class="text-2xl font-bold text-indigo-600">15</span>
828
+ </div>
829
+ <p class="text-sm text-gray-600">Badges Earned</p>
830
+ </div>
831
+ <div class="text-center">
832
+ <div class="w-20 h-20 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-2">
833
+ <span class="text-2xl font-bold text-yellow-600">3</span>
834
+ </div>
835
+ <p class="text-sm text-gray-600">Current Level</p>
836
+ </div>
837
+ <div class="text-center">
838
+ <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-2">
839
+ <span class="text-2xl font-bold text-green-600">87</span>
840
+ </div>
841
+ <p class="text-sm text-gray-600">Points Today</p>
842
+ </div>
843
+ <div class="text-center">
844
+ <div class="w-20 h-20 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-2">
845
+ <span class="text-2xl font-bold text-purple-600">1.2K</span>
846
+ </div>
847
+ <p class="text-sm text-gray-600">Total Points</p>
848
+ </div>
849
+ </div>
850
+ </div>
851
+
852
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
853
+ <div class="gamification-card bg-white rounded-xl shadow-lg overflow-hidden">
854
+ <div class="gamification-card-inner">
855
+ <div class="gamification-card-front p-6">
856
+ <div class="flex items-center mb-4">
857
+ <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mr-4">
858
+ <i class="fas fa-trophy text-indigo-600 text-xl"></i>
859
+ </div>
860
+ <h3 class="text-xl font-bold text-gray-900">Daily Challenge</h3>
861
+ </div>
862
+ <p class="text-gray-600 mb-4">Complete 5 tasks today to earn bonus points and a special badge!</p>
863
+ <div class="w-full bg-gray-200 rounded-full h-2">
864
+ <div class="progress-bar bg-indigo-600 h-2" style="width: 40%"></div>
865
+ </div>
866
+ <p class="text-sm text-gray-500 mt-2">2/5 tasks completed</p>
867
+ </div>
868
+ <div class="gamification-card-back bg-indigo-600 p-6 text-white">
869
+ <h3 class="text-xl font-bold mb-4">Reward Unlocked!</h3>
870
+ <p class="mb-4">Complete 3 more tasks today to earn:</p>
871
+ <div class="flex items-center justify-center mb-4">
872
+ <div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center">
873
+ <i class="fas fa-medal text-yellow-600 text-2xl"></i>
874
+ </div>
875
+ <span class="ml-4 font-bold">Daily Achiever Badge</span>
876
+ </div>
877
+ <p class="text-sm">+50 bonus points</p>
878
+ </div>
879
+ </div>
880
+ </div>
881
+
882
+ <div class="gamification-card bg-white rounded-xl shadow-lg overflow-hidden">
883
+ <div class="gamification-card-inner">
884
+ <div class="gamification-card-front p-6">
885
+ <div class="flex items-center mb-4">
886
+ <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mr-4">
887
+ <i class="fas fa-fire text-green-600 text-xl"></i>
888
+ </div>
889
+ <h3 class="text-xl font-bold text-gray-900">Streak Bonus</h3>
890
+ </div>
891
+ <p class="text-gray-600 mb-4">Maintain a 7-day streak for massive rewards and exclusive content!</p>
892
+ <div class="w-full bg-gray-200 rounded-full h-2">
893
+ <div class="progress-bar bg-green-500 h-2" style="width: 71%"></div>
894
+ </div>
895
+ <p class="text-sm text-gray-500 mt-2">5/7 days completed</p>
896
+ </div>
897
+ <div class="gamification-card-back bg-green-600 p-6 text-white">
898
+ <h3 class="text-xl font-bold mb-4">Keep Going!</h3>
899
+ <p class="mb-4">Just 2 more days to unlock:</p>
900
+ <div class="flex items-center justify-center mb-4">
901
+ <div class="w-16 h-16 bg-white rounded-full flex items-center justify-center">
902
+ <i class="fas fa-crown text-green-600 text-2xl"></i>
903
+ </div>
904
+ <span class="ml-4 font-bold">Weekly Champion</span>
905
+ </div>
906
+ <p class="text-sm">+200 points and exclusive content</p>
907
+ </div>
908
+ </div>
909
+ </div>
910
+
911
+ <div class="gamification-card bg-white rounded-xl shadow-lg overflow-hidden">
912
+ <div class="gamification-card-inner">
913
+ <div class="gamification-card-front p-6">
914
+ <div class="flex items-center mb-4">
915
+ <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mr-4">
916
+ <i class="fas fa-users text-purple-600 text-xl"></i>
917
+ </div>
918
+ <h3 class="text-xl font-bold text-gray-900">Community Challenge</h3>
919
+ </div>
920
+ <p class="text-gray-600 mb-4">Join forces with others to reach a collective goal and earn team rewards!</p>
921
+ <div class="w-full bg-gray-200 rounded-full h-2">
922
+ <div class="progress-bar bg-purple-600 h-2" style="width: 85%"></div>
923
+ </div>
924
+ <p class="text-sm text-gray-500 mt-2">Team at 85% of goal</p>
925
+ </div>
926
+ <div class="gamification-card-back bg-purple-600 p-6 text-white">
927
+ <h3 class="text-xl font-bold mb-4">Team Effort!</h3>
928
+ <p class="mb-4">Your team is close to unlocking:</p>
929
+ <div class="flex items-center justify-center mb-4">
930
+ <div class="w-16 h-16 bg-white rounded-full flex items-center justify-center">
931
+ <i class="fas fa-star text-purple-600 text-2xl"></i>
932
+ </div>
933
+ <span class="ml-4 font-bold">Elite Team Status</span>
934
+ </div>
935
+ <p class="text-sm">+100 points each and special team badge</p>
936
+ </div>
937
+ </div>
938
+ </div>
939
+ </div>
940
+ </div>
941
+ </section>
942
+
943
+ <!-- Value Proposition with Parallax -->
944
+ <section class="parallax">
945
+ <div class="parallax-bg parallax-bg-2"></div>
946
+ <div class="parallax-content">
947
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-32">
948
+ <div class="bg-white bg-opacity-90 rounded-2xl p-8 md:p-12 shadow-2xl max-w-4xl mx-auto">
949
+ <h2 class="text-4xl font-bold text-gray-900 mb-8 text-center">
950
+ Why <span class="text-indigo-600">Gamification</span> Works
951
+ </h2>
952
+
953
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
954
+ <div class="flex items-start">
955
+ <div class="flex-shrink-0 bg-indigo-100 rounded-full p-3 mr-4">
956
+ <i class="fas fa-chart-line text-indigo-600 text-xl"></i>
957
+ </div>
958
+ <div>
959
+ <h3 class="text-xl font-bold text-gray-900 mb-2">
960
+ <span class="value-highlight">78% Increase</span> in Engagement
961
+ </h3>
962
+ <p class="text-gray-600">Users who engage with gamified elements show significantly higher participation rates.</p>
963
+ </div>
964
+ </div>
965
+
966
+ <div class="flex items-start">
967
+ <div class="flex-shrink-0 bg-yellow-100 rounded-full p-3 mr-4">
968
+ <i class="fas fa-clock text-yellow-600 text-xl"></i>
969
+ </div>
970
+ <div>
971
+ <h3 class="text-xl font-bold text-gray-900 mb-2">
972
+ <span class="value-highlight">3x Longer</span> Session Duration
973
+ </h3>
974
+ <p class="text-gray-600">The average user spends more time when gamification elements are present.</p>
975
+ </div>
976
+ </div>
977
+
978
+ <div class="flex items-start">
979
+ <div class="flex-shrink-0 bg-green-100 rounded-full p-3 mr-4">
980
+ <i class="fas fa-heart text-green-600 text-xl"></i>
981
+ </div>
982
+ <div>
983
+ <h3 class="text-xl font-bold text-gray-900 mb-2">
984
+ <span class="value-highlight">92% Satisfaction</span> Rate
985
+ </h3>
986
+ <p class="text-gray-600">Users report higher satisfaction levels with gamified experiences compared to traditional methods.</p>
987
+ </div>
988
+ </div>
989
+
990
+ <div class="flex items-start">
991
+ <div class="flex-shrink-0 bg-purple-100 rounded-full p-3 mr-4">
992
+ <i class="fas fa-redo text-purple-600 text-xl"></i>
993
+ </div>
994
+ <div>
995
+ <h3 class="text-xl font-bold text-gray-900 mb-2">
996
+ <span class="value-highlight">65% Higher</span> Retention
997
+ </h3>
998
+ <p class="text-gray-600">Gamification leads to dramatically improved user retention over time.</p>
999
+ </div>
1000
+ </div>
1001
+ </div>
1002
+
1003
+ <div class="mt-12 text-center">
1004
+ <button class="bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white px-8 py-4 rounded-full text-lg font-bold transition duration-300 transform hover:scale-105 shadow-lg">
1005
+ See Case Studies
1006
+ </button>
1007
+ </div>
1008
+ </div>
1009
+ </div>
1010
+ </div>
1011
+ </section>
1012
+
1013
+ <!-- Social Proof Section -->
1014
+ <section class="bg-gray-50 py-20">
1015
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
1016
+ <div class="text-center mb-16">
1017
+ <h2 class="text-4xl font-bold text-gray-900 mb-4">What Our <span class="text-indigo-600">Community</span> Says</h2>
1018
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Real people sharing their gamified success stories</p>
1019
+ </div>
1020
+
1021
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
1022
+ <!-- Twitter Post -->
1023
+ <div class="social-post bg-white p-6 rounded-lg border-l-4 border-blue-400">
1024
+ <div class="flex items-center mb-4">
1025
+ <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User avatar">
1026
+ <div>
1027
+ <h4 class="font-bold text-gray-900">Sarah Johnson</h4>
1028
+ <p class="text-blue-400">@sarahj_tweets</p>
1029
+ </div>
1030
+ <div class="ml-auto text-blue-400">
1031
+ <i class="fab fa-twitter"></i>
1032
+ </div>
1033
+ </div>
1034
+ <img src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
1035
+ alt="Productivity chart" class="social-image">
1036
+ <p class="text-gray-800 mb-4">Just reached Level 5 on @GamifyPlatform and unlocked the Productivity Master badge! 🎉 The progress tracking and rewards make work feel like a game I want to keep playing. #gamification #productivity</p>
1037
+ <div class="flex justify-between text-gray-500 text-sm">
1038
+ <span><i class="far fa-heart mr-1"></i> 142</span>
1039
+ <span><i class="far fa-comment mr-1"></i> 23</span>
1040
+ <span><i class="far fa-share-square mr-1"></i> 8</span>
1041
+ </div>
1042
+ </div>
1043
+
1044
+ <!-- Instagram Post -->
1045
+ <div class="social-post bg-white p-6 rounded-lg border-l-4 border-pink-500">
1046
+ <div class="flex items-center mb-4">
1047
+ <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User avatar">
1048
+ <div>
1049
+ <h4 class="font-bold text-gray-900">Mike Chen</h4>
1050
+ <p class="text-pink-500">@mikechen.gram</p>
1051
+ </div>
1052
+ <div class="ml-auto text-pink-500">
1053
+ <i class="fab fa-instagram"></i>
1054
+ </div>
1055
+ </div>
1056
+ <img src="https://images.unsplash.com/photo-1545205597-3d9d02c29597?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
1057
+ alt="Fitness progress" class="social-image">
1058
+ <p class="text-gray-800 mb-4">Week 3 of using @GamifyApp and I've already formed better habits than in the past 3 years! The streak system keeps me motivated and the daily challenges make it fun. Swipe for my progress stats 👉</p>
1059
+ <div class="flex justify-between text-gray-500 text-sm">
1060
+ <span><i class="far fa-heart mr-1"></i> 324</span>
1061
+ <span><i class="far fa-comment mr-1"></i> 41</span>
1062
+ <span><i class="far fa-bookmark mr-1"></i></span>
1063
+ </div>
1064
+ </div>
1065
+
1066
+ <!-- LinkedIn Post -->
1067
+ <div class="social-post bg-white p-6 rounded-lg border-l-4 border-blue-600">
1068
+ <div class="flex items-center mb-4">
1069
+ <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User avatar">
1070
+ <div>
1071
+ <h4 class="font-bold text-gray-900">Dr. Priya Patel</h4>
1072
+ <p class="text-blue-600">Productivity Coach | Author</p>
1073
+ </div>
1074
+ <div class="ml-auto text-blue-600">
1075
+ <i class="fab fa-linkedin"></i>
1076
+ </div>
1077
+ </div>
1078
+ <img src="https://images.unsplash.com/photo-1552664730-d307ca884974?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
1079
+ alt="Team working" class="social-image">
1080
+ <p class="text-gray-800 mb-4">After researching dozens of productivity tools, I'm impressed by how @GamifySolutions has implemented behavioral psychology principles into their platform. The results my clients are seeing are remarkable - increased engagement, better habit formation, and measurable progress. The science-backed approach makes all the difference.</p>
1081
+ <div class="flex justify-between text-gray-500 text-sm">
1082
+ <span><i class="far fa-thumbs-up mr-1"></i> 87</span>
1083
+ <span><i class="far fa-comment mr-1"></i> 12</span>
1084
+ <span><i class="far fa-share-square mr-1"></i> 5</span>
1085
+ </div>
1086
+ </div>
1087
+ </div>
1088
+
1089
+ <div class="mt-16 text-center">
1090
+ <button class="bg-white hover:bg-gray-100 text-indigo-600 border-2 border-indigo-600 px-8 py-4 rounded-full text-lg font-bold transition duration-300 transform hover:scale-105 shadow-lg">
1091
+ Join Our Community
1092
+ </button>
1093
+ </div>
1094
+ </div>
1095
+ </section>
1096
+
1097
+ <!-- Final CTA with Parallax -->
1098
+ <section class="parallax">
1099
+ <div class="parallax-bg parallax-bg-3"></div>
1100
+ <div class="parallax-content">
1101
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-32">
1102
+ <div class="text-center">
1103
+ <h2 class="text-5xl md:text-6xl font-bold text-white mb-6">
1104
+ Ready to <span class="value-highlight">Level Up</span> Your Experience?
1105
+ </h2>
1106
+ <p class="text-xl md:text-2xl text-white mb-10 max-w-3xl mx-auto">
1107
+ Join <span class="font-bold">10,000+</span> users who have transformed their routine into an engaging adventure.
1108
+ </p>
1109
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
1110
+ <button id="start-journey-bottom" class="bg-white hover:bg-gray-100 text-indigo-600 px-8 py-4 rounded-full text-lg font-bold transition duration-300 transform hover:scale-105 shadow-lg pulse">
1111
+ Start Free Trial
1112
+ </button>
1113
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-8 py-4 rounded-full text-lg font-bold transition duration-300 transform hover:scale-105 shadow-lg">
1114
+ Schedule Demo
1115
+ </button>
1116
+ </div>
1117
+ </div>
1118
+ </div>
1119
+ </div>
1120
+ </section>
1121
+
1122
+ <!-- Footer -->
1123
+ <footer class="bg-gray-900 text-white py-16">
1124
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
1125
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-12">
1126
+ <div>
1127
+ <h3 class="text-2xl font-bold mb-6">
1128
+ <span class="text-indigo-400">GAME</span><span class="text-yellow-400">IFY</span>
1129
+ </h3>
1130
+ <p class="text-gray-400 mb-6">Turning everyday tasks into engaging adventures through the power of gamification.</p>
1131
+ <div class="flex space-x-4">
1132
+ <a href="#" class="text-gray-400 hover:text-white">
1133
+ <i class="fab fa-twitter text-xl"></i>
1134
+ </a>
1135
+ <a href="#" class="text-gray-400 hover:text-white">
1136
+ <i class="fab fa-facebook text-xl"></i>
1137
+ </a>
1138
+ <a href="#" class="text-gray-400 hover:text-white">
1139
+ <i class="fab fa-instagram text-xl"></i>
1140
+ </a>
1141
+ <a href="#" class="text-gray-400 hover:text-white">
1142
+ <i class="fab fa-linkedin text-xl"></i>
1143
+ </a>
1144
+ </div>
1145
+ </div>
1146
+
1147
+ <div>
1148
+ <h4 class="text-lg font-semibold mb-6">Product</h4>
1149
+ <ul class="space-y-3">
1150
+ <li><a href="#" class="text-gray-400 hover:text-white">Features</a></li>
1151
+ <li><a href="#" class="text-gray-400 hover:text-white">Pricing</a></li>
1152
+ <li><a href="#" class="text-gray-400 hover:text-white">Templates</a></li>
1153
+ <li><a href="#" class="text-gray-400 hover:text-white">Integrations</a></li>
1154
+ <li><a href="#" class="text-gray-400 hover:text-white">Roadmap</a></li>
1155
+ </ul>
1156
+ </div>
1157
+
1158
+ <div>
1159
+ <h4 class="text-lg font-semibold mb-6">Resources</h4>
1160
+ <ul class="space-y-3">
1161
+ <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
1162
+ <li><a href="#" class="text-gray-400 hover:text-white">Guides</a></li>
1163
+ <li><a href="#" class="text-gray-400 hover:text-white">Webinars</a></li>
1164
+ <li><a href="#" class="text-gray-400 hover:text-white">Community</a></li>
1165
+ <li><a href="#" class="text-gray-400 hover:text-white">Support</a></li>
1166
+ </ul>
1167
+ </div>
1168
+
1169
+ <div>
1170
+ <h4 class="text-lg font-semibold mb-6">Company</h4>
1171
+ <ul class="space-y-3">
1172
+ <li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li>
1173
+ <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>
1174
+ <li><a href="#" class="text-gray-400 hover:text-white">Press</a></li>
1175
+ <li><a href="#" class="text-gray-400 hover:text-white">Partners</a></li>
1176
+ <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
1177
+ </ul>
1178
+ </div>
1179
+ </div>
1180
+
1181
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
1182
+ <p class="text-gray-400 mb-4 md:mb-0">© 2023 Gamify Inc. All rights reserved.</p>
1183
+ <div class="flex space-x-6">
1184
+ <a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a>
1185
+ <a href="#" class="text-gray-400 hover:text-white">Terms of Service</a>
1186
+ <a href="#" class="text-gray-400 hover:text-white">Cookie Policy</a>
1187
+ </div>
1188
+ </div>
1189
+ </div>
1190
+ </footer>
1191
+
1192
+ <!-- Floating Action Button -->
1193
+ <div class="fixed bottom-8 right-8 z-50">
1194
+ <button class="w-16 h-16 bg-indigo-600 hover:bg-indigo-700 rounded-full flex items-center justify-center text-white shadow-xl transform hover:scale-110 transition duration-300 floating">
1195
+ <i class="fas fa-gamepad text-2xl"></i>
1196
+ </button>
1197
+ </div>
1198
+
1199
+ <script>
1200
+ // Simple animation for progress bars on scroll
1201
+ document.addEventListener('DOMContentLoaded', function() {
1202
+ // Animate progress bars when they come into view
1203
+ const progressBars = document.querySelectorAll('.progress-bar');
1204
+
1205
+ const observer = new IntersectionObserver((entries) => {
1206
+ entries.forEach(entry => {
1207
+ if (entry.isIntersecting) {
1208
+ const progressBar = entry.target;
1209
+ const targetWidth = progressBar.style.width;
1210
+ progressBar.style.width = '0%';
1211
+
1212
+ setTimeout(() => {
1213
+ progressBar.style.width = targetWidth;
1214
+ }, 100);
1215
+ }
1216
+ });
1217
+ }, { threshold: 0.5 });
1218
+
1219
+ progressBars.forEach(bar => {
1220
+ observer.observe(bar);
1221
+ });
1222
+
1223
+ // Parallax effect
1224
+ window.addEventListener('scroll', function() {
1225
+ const parallaxSections = document.querySelectorAll('.parallax-bg');
1226
+ const scrollPosition = window.pageYOffset;
1227
+
1228
+ parallaxSections.forEach((section, index) => {
1229
+ const speed = 0.3 + (index * 0.1);
1230
+ section.style.transform = `translateY(${scrollPosition * speed}px)`;
1231
+ });
1232
+ });
1233
+
1234
+ // Gamification card hover effect
1235
+ const cards = document.querySelectorAll('.gamification-card');
1236
+ cards.forEach(card => {
1237
+ card.addEventListener('mouseenter', function() {
1238
+ this.querySelector('.gamification-card-inner').style.transform = 'rotateY(180deg)';
1239
+ });
1240
+
1241
+ card.addEventListener('mouseleave', function() {
1242
+ this.querySelector('.gamification-card-inner').style.transform = 'rotateY(0deg)';
1243
+ });
1244
+ });
1245
+
1246
+ // Value highlight animation
1247
+ const highlights = document.querySelectorAll('.value-highlight');
1248
+ highlights.forEach(highlight => {
1249
+ highlight.addEventListener('mouseenter', function() {
1250
+ this.style.transform = 'scale(1.05)';
1251
+ });
1252
+
1253
+ highlight.addEventListener('mouseleave', function() {
1254
+ this.style.transform = 'scale(1)';
1255
+ });
1256
+ });
1257
+
1258
+ // Onboarding journey functionality
1259
+ const onboardingModal = document.getElementById('onboarding-modal');
1260
+ const startJourneyBtn = document.getElementById('start-journey');
1261
+ const startJourneyNavBtn = document.getElementById('start-journey-nav');
1262
+ const startJourneyBottomBtn = document.getElementById('start-journey-bottom');
1263
+ const closeOnboardingBtn = document.getElementById('close-onboarding');
1264
+ const completeOnboardingBtn = document.getElementById('complete-onboarding');
1265
+
1266
+ // Show onboarding modal
1267
+ [startJourneyBtn, startJourneyNavBtn, startJourneyBottomBtn].forEach(btn => {
1268
+ btn.addEventListener('click', function() {
1269
+ onboardingModal.style.display = 'block';
1270
+ document.body.style.overflow = 'hidden';
1271
+ showStep(1);
1272
+ });
1273
+ });
1274
+
1275
+ // Close onboarding modal
1276
+ closeOnboardingBtn.addEventListener('click', function() {
1277
+ onboardingModal.style.display = 'none';
1278
+ document.body.style.overflow = 'auto';
1279
+ });
1280
+
1281
+ // Complete onboarding
1282
+ completeOnboardingBtn.addEventListener('click', function() {
1283
+ onboardingModal.style.display = 'none';
1284
+ document.body.style.overflow = 'auto';
1285
+ alert('Congratulations! Your gamified journey has begun! 🎉');
1286
+ });
1287
+
1288
+ // Option card selection
1289
+ const optionCards = document.querySelectorAll('.option-card');
1290
+ optionCards.forEach(card => {
1291
+ card.addEventListener('click', function() {
1292
+ // Remove selected class from all cards in this step
1293
+ const parent = this.parentElement;
1294
+ parent.querySelectorAll('.option-card').forEach(c => {
1295
+ c.classList.remove('selected');
1296
+ });
1297
+
1298
+ // Add selected class to clicked card
1299
+ this.classList.add('selected');
1300
+ });
1301
+ });
1302
+
1303
+ // Step navigation
1304
+ let currentStep = 1;
1305
+ const totalSteps = 5;
1306
+
1307
+ // Next step buttons
1308
+ document.getElementById('next-step1').addEventListener('click', function() {
1309
+ showStep(2);
1310
+ });
1311
+
1312
+ document.getElementById('next-step2').addEventListener('click', function() {
1313
+ showStep(3);
1314
+ });
1315
+
1316
+ document.getElementById('next-step3').addEventListener('click', function() {
1317
+ showStep(4);
1318
+ });
1319
+
1320
+ document.getElementById('next-step4').addEventListener('click', function() {
1321
+ showStep(5);
1322
+ });
1323
+
1324
+ // Previous step buttons
1325
+ document.getElementById('prev-step2').addEventListener('click', function() {
1326
+ showStep(1);
1327
+ });
1328
+
1329
+ document.getElementById('prev-step3').addEventListener('click', function() {
1330
+ showStep(2);
1331
+ });
1332
+
1333
+ document.getElementById('prev-step4').addEventListener('click', function() {
1334
+ showStep(3);
1335
+ });
1336
+
1337
+ function showStep(stepNumber) {
1338
+ // Hide all steps
1339
+ document.querySelectorAll('.onboarding-step').forEach(step => {
1340
+ step.classList.remove('active');
1341
+ });
1342
+
1343
+ // Show current step
1344
+ document.getElementById(`step${stepNumber}`).classList.add('active');
1345
+
1346
+ // Update progress dots
1347
+ document.querySelectorAll('.progress-dot').forEach((dot, index) => {
1348
+ dot.classList.remove('active');
1349
+ if (index < stepNumber) {
1350
+ dot.classList.add('active');
1351
+ }
1352
+ });
1353
+
1354
+ currentStep = stepNumber;
1355
+ }
1356
+
1357
+ // Features tab functionality
1358
+ const featuresSection = document.getElementById('features-section');
1359
+ const features
1360
+ </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ add more interactive and gamified experience, parallax effect, social media posts and bold texts highlighting value
2
+ when users click start your journey, take them throfuh a fun user experience to find out about their interest and other fun questionaries. the features button must load the features of the app, community section must allow users to find, connect or start a community with drop down of most fun options and ideas. add pictures to social media section in what community says