Hugging Face's logo

Spaces:
TimonKuik
/
anker-fit
Running

App Files Community
TimonKuik commited on
Commit
b2ef064
·
verified ·
1 Parent(s): 4c42672

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +588 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Anker Fit
3
- emoji: 📈
4
- colorFrom: purple
5
- colorTo: yellow
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: anker-fit
3
+ emoji: 🐳
4
+ colorFrom: gray
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,588 @@
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>Anker-fit | Fitness Accountability Coaching</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=Montserrat:wght@700;900&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ primary: '#1a56db',
16
+ secondary: '#0f172a',
17
+ accent: '#dc2626',
18
+ light: '#f8fafc'
19
+ },
20
+ fontFamily: {
21
+ heading: ['Montserrat', 'sans-serif'],
22
+ body: ['Roboto', 'sans-serif']
23
+ }
24
+ }
25
+ }
26
+ }
27
+ </script>
28
+ <style type="text/css">
29
+ body {
30
+ font-family: 'Roboto', sans-serif;
31
+ background-color: #f8fafc;
32
+ }
33
+ .hero-bg {
34
+ background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
35
+ }
36
+ .stat-card {
37
+ transition: transform 0.3s ease;
38
+ }
39
+ .stat-card:hover {
40
+ transform: translateY(-5px);
41
+ }
42
+ .pricing-card {
43
+ transition: all 0.3s ease;
44
+ border: 2px solid transparent;
45
+ }
46
+ .pricing-card:hover {
47
+ border-color: #1a56db;
48
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
49
+ }
50
+ .feature-icon {
51
+ width: 60px;
52
+ height: 60px;
53
+ display: flex;
54
+ align-items: center;
55
+ justify-content: center;
56
+ border-radius: 50%;
57
+ background: linear-gradient(135deg, #1a56db 0%, #0f172a 100%);
58
+ }
59
+ .testimonial-card {
60
+ background: linear-gradient(to bottom right, #ffffff 0%, #f1f5f9 100%);
61
+ }
62
+ .charity-selector {
63
+ transition: all 0.2s ease;
64
+ }
65
+ .charity-selector:hover {
66
+ transform: scale(1.05);
67
+ border-color: #1a56db;
68
+ }
69
+ .charity-selector.selected {
70
+ border-color: #1a56db;
71
+ background-color: #dbeafe;
72
+ }
73
+ .cta-section {
74
+ background: linear-gradient(135deg, #1a56db 0%, #0f172a 100%);
75
+ }
76
+ .nav-link {
77
+ position: relative;
78
+ }
79
+ .nav-link:after {
80
+ content: '';
81
+ position: absolute;
82
+ width: 0;
83
+ height: 2px;
84
+ bottom: -2px;
85
+ left: 0;
86
+ background-color: #1a56db;
87
+ transition: width 0.3s ease;
88
+ }
89
+ .nav-link:hover:after {
90
+ width: 100%;
91
+ }
92
+ </style>
93
+ </head>
94
+ <body>
95
+ <!-- Header -->
96
+ <header class="bg-white shadow-md sticky top-0 z-50">
97
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
98
+ <div class="flex items-center">
99
+ <div class="bg-primary w-10 h-10 rounded-lg flex items-center justify-center mr-3">
100
+ <i class="fas fa-anchor text-white text-xl"></i>
101
+ </div>
102
+ <h1 class="text-2xl font-heading font-bold text-secondary">Anker<span class="text-primary">-fit</span></h1>
103
+ </div>
104
+
105
+ <nav class="hidden md:flex space-x-8">
106
+ <a href="#how-it-works" class="nav-link text-secondary font-medium">How It Works</a>
107
+ <a href="#features" class="nav-link text-secondary font-medium">Features</a>
108
+ <a href="#pricing" class="nav-link text-secondary font-medium">Pricing</a>
109
+ <a href="#testimonials" class="nav-link text-secondary font-medium">Success Stories</a>
110
+ <a href="#charities" class="nav-link text-secondary font-medium">Charities</a>
111
+ </nav>
112
+
113
+ <button class="bg-primary text-white px-6 py-2 rounded-lg font-medium hover:bg-blue-700 transition duration-300">
114
+ Get Started
115
+ </button>
116
+
117
+ <button class="md:hidden text-secondary">
118
+ <i class="fas fa-bars text-2xl"></i>
119
+ </button>
120
+ </div>
121
+ </header>
122
+
123
+ <!-- Hero Section -->
124
+ <section class="hero-bg text-white">
125
+ <div class="container mx-auto px-4 py-20 md:py-28 flex flex-col md:flex-row items-center">
126
+ <div class="md:w-1/2 mb-10 md:mb-0">
127
+ <h1 class="text-4xl md:text-6xl font-heading font-bold mb-6 leading-tight">
128
+ Stop Skipping The Gym.<br>
129
+ <span class="text-primary">We'll Hold You Accountable.</span>
130
+ </h1>
131
+ <p class="text-xl mb-8 text-gray-300">
132
+ Our fitness accountability coaches ensure you show up when you commit.
133
+ Miss a session? Your payment goes to charity. It's time to get serious.
134
+ </p>
135
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
136
+ <button class="bg-primary hover:bg-blue-700 text-white px-8 py-4 rounded-lg font-bold text-lg transition duration-300">
137
+ Start Your Commitment
138
+ </button>
139
+ <button class="bg-white hover:bg-gray-100 text-secondary px-8 py-4 rounded-lg font-bold text-lg transition duration-300">
140
+ How It Works
141
+ </button>
142
+ </div>
143
+ </div>
144
+ <div class="md:w-1/2 flex justify-center">
145
+ <div class="relative">
146
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-full h-96 md:h-[500px] flex items-center justify-center">
147
+ <div class="text-center p-4">
148
+ <i class="fas fa-user-check text-7xl text-gray-400 mb-4"></i>
149
+ <p class="text-gray-500">Accountability Coach<br>Monitoring Your Progress</p>
150
+ </div>
151
+ </div>
152
+ <div class="absolute -bottom-6 -left-6 bg-white shadow-xl rounded-lg p-4 w-64">
153
+ <div class="flex items-center">
154
+ <div class="bg-green-100 rounded-full p-2 mr-3">
155
+ <i class="fas fa-check-circle text-green-600"></i>
156
+ </div>
157
+ <div>
158
+ <p class="font-bold">John D. checked in</p>
159
+ <p class="text-sm text-gray-500">Today at 8:30 AM</p>
160
+ </div>
161
+ </div>
162
+ </div>
163
+ <div class="absolute -top-6 -right-6 bg-white shadow-xl rounded-lg p-4 w-64">
164
+ <div class="flex items-center">
165
+ <div class="bg-red-100 rounded-full p-2 mr-3">
166
+ <i class="fas fa-times-circle text-red-600"></i>
167
+ </div>
168
+ <div>
169
+ <p class="font-bold">Sarah M. missed session</p>
170
+ <p class="text-sm text-gray-500">$10 donated to charity</p>
171
+ </div>
172
+ </div>
173
+ </div>
174
+ </div>
175
+ </div>
176
+ </div>
177
+ </section>
178
+
179
+ <!-- Stats Section -->
180
+ <section class="py-16 bg-gray-50">
181
+ <div class="container mx-auto px-4">
182
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
183
+ <div class="stat-card bg-white rounded-xl shadow-lg p-8 text-center">
184
+ <div class="text-5xl font-heading font-bold text-primary mb-4">98%</div>
185
+ <h3 class="text-xl font-bold text-secondary mb-2">Attendance Rate</h3>
186
+ <p class="text-gray-600">Clients who stick to their commitments</p>
187
+ </div>
188
+ <div class="stat-card bg-white rounded-xl shadow-lg p-8 text-center">
189
+ <div class="text-5xl font-heading font-bold text-primary mb-4">250k+</div>
190
+ <h3 class="text-xl font-bold text-secondary mb-2">To Charity</h3>
191
+ <p class="text-gray-600">Donated from missed sessions</p>
192
+ </div>
193
+ <div class="stat-card bg-white rounded-xl shadow-lg p-8 text-center">
194
+ <div class="text-5xl font-heading font-bold text-primary mb-4">72%</div>
195
+ <h3 class="text-xl font-bold text-secondary mb-2">Fitness Progress</h3>
196
+ <p class="text-gray-600">Average improvement in 3 months</p>
197
+ </div>
198
+ </div>
199
+ </div>
200
+ </section>
201
+
202
+ <!-- How It Works -->
203
+ <section id="how-it-works" class="py-20">
204
+ <div class="container mx-auto px-4">
205
+ <div class="text-center mb-16">
206
+ <h2 class="text-4xl font-heading font-bold text-secondary mb-4">How Our Accountability System Works</h2>
207
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">We've created a proven system to ensure you never skip the gym again</p>
208
+ </div>
209
+
210
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
211
+ <div class="bg-white rounded-xl shadow-lg p-8">
212
+ <div class="feature-icon mb-6 mx-auto">
213
+ <i class="fas fa-calendar-check text-white text-2xl"></i>
214
+ </div>
215
+ <h3 class="text-2xl font-bold text-secondary mb-4">1. Schedule Sessions</h3>
216
+ <p class="text-gray-600">Plan your gym sessions in advance through our app. Be specific about date, time, and workout.</p>
217
+ </div>
218
+
219
+ <div class="bg-white rounded-xl shadow-lg p-8">
220
+ <div class="feature-icon mb-6 mx-auto">
221
+ <i class="fas fa-bell text-white text-2xl"></i>
222
+ </div>
223
+ <h3 class="text-2xl font-bold text-secondary mb-4">2. Get Reminders</h3>
224
+ <p class="text-gray-600">Receive notifications before your scheduled session. We'll make sure you don't forget.</p>
225
+ </div>
226
+
227
+ <div class="bg-white rounded-xl shadow-lg p-8">
228
+ <div class="feature-icon mb-6 mx-auto">
229
+ <i class="fas fa-check-circle text-white text-2xl"></i>
230
+ </div>
231
+ <h3 class="text-2xl font-bold text-secondary mb-4">3. Check In</h3>
232
+ <p class="text-gray-600">Check in via our app when you arrive at the gym. Simple geolocation verification.</p>
233
+ </div>
234
+
235
+ <div class="bg-white rounded-xl shadow-lg p-8">
236
+ <div class="feature-icon mb-6 mx-auto">
237
+ <i class="fas fa-hands-helping text-white text-2xl"></i>
238
+ </div>
239
+ <h3 class="text-2xl font-bold text-secondary mb-4">4. Accountability</h3>
240
+ <p class="text-gray-600">Missed a session? We'll call you immediately. Your payment goes to charity.</p>
241
+ </div>
242
+ </div>
243
+ </div>
244
+ </section>
245
+
246
+ <!-- Pricing -->
247
+ <section id="pricing" class="py-20 bg-gray-50">
248
+ <div class="container mx-auto px-4">
249
+ <div class="text-center mb-16">
250
+ <h2 class="text-4xl font-heading font-bold text-secondary mb-4">Simple, Transparent Pricing</h2>
251
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Pay only for the accountability you need. Missed sessions benefit others.</p>
252
+ </div>
253
+
254
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
255
+ <div class="pricing-card bg-white rounded-xl shadow-lg p-8">
256
+ <h3 class="text-2xl font-bold text-secondary mb-4">Basic Commitment</h3>
257
+ <div class="text-4xl font-heading font-bold text-primary mb-4">$19<span class="text-xl text-gray-500">/month</span></div>
258
+ <ul class="mb-8 space-y-3">
259
+ <li class="flex items-center">
260
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
261
+ <span>3 scheduled sessions/week</span>
262
+ </li>
263
+ <li class="flex items-center">
264
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
265
+ <span>App notifications</span>
266
+ </li>
267
+ <li class="flex items-center">
268
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
269
+ <span>Missed session fee: $10</span>
270
+ </li>
271
+ <li class="flex items-center text-gray-400">
272
+ <i class="fas fa-times-circle mr-2"></i>
273
+ <span>No personal coach calls</span>
274
+ </li>
275
+ </ul>
276
+ <button class="w-full bg-gray-200 hover:bg-gray-300 text-secondary py-3 rounded-lg font-bold transition duration-300">
277
+ Start Basic
278
+ </button>
279
+ </div>
280
+
281
+ <div class="pricing-card bg-white rounded-xl shadow-lg p-8 border-primary relative">
282
+ <div class="absolute top-0 right-0 bg-primary text-white px-4 py-1 rounded-bl-lg rounded-tr-lg font-bold">
283
+ MOST POPULAR
284
+ </div>
285
+ <h3 class="text-2xl font-bold text-secondary mb-4">Pro Accountability</h3>
286
+ <div class="text-4xl font-heading font-bold text-primary mb-4">$39<span class="text-xl text-gray-500">/month</span></div>
287
+ <ul class="mb-8 space-y-3">
288
+ <li class="flex items-center">
289
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
290
+ <span>Unlimited scheduled sessions</span>
291
+ </li>
292
+ <li class="flex items-center">
293
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
294
+ <span>App + SMS notifications</span>
295
+ </li>
296
+ <li class="flex items-center">
297
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
298
+ <span>Personal coach call if missed</span>
299
+ </li>
300
+ <li class="flex items-center">
301
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
302
+ <span>Missed session fee: $15</span>
303
+ </li>
304
+ </ul>
305
+ <button class="w-full bg-primary hover:bg-blue-700 text-white py-3 rounded-lg font-bold transition duration-300">
306
+ Start Pro
307
+ </button>
308
+ </div>
309
+
310
+ <div class="pricing-card bg-white rounded-xl shadow-lg p-8">
311
+ <h3 class="text-2xl font-bold text-secondary mb-4">Elite Coaching</h3>
312
+ <div class="text-4xl font-heading font-bold text-primary mb-4">$99<span class="text-xl text-gray-500">/month</span></div>
313
+ <ul class="mb-8 space-y-3">
314
+ <li class="flex items-center">
315
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
316
+ <span>Everything in Pro</span>
317
+ </li>
318
+ <li class="flex items-center">
319
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
320
+ <span>Weekly check-in calls</span>
321
+ </li>
322
+ <li class="flex items-center">
323
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
324
+ <span>Personalized workout plans</span>
325
+ </li>
326
+ <li class="flex items-center">
327
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
328
+ <span>Missed session fee: $25</span>
329
+ </li>
330
+ </ul>
331
+ <button class="w-full bg-gray-200 hover:bg-gray-300 text-secondary py-3 rounded-lg font-bold transition duration-300">
332
+ Start Elite
333
+ </button>
334
+ </div>
335
+ </div>
336
+
337
+ <div class="mt-12 text-center max-w-3xl mx-auto bg-white p-6 rounded-lg shadow">
338
+ <h3 class="text-xl font-bold text-secondary mb-2">Important Note on Missed Sessions</h3>
339
+ <p class="text-gray-600">
340
+ When you miss a scheduled session, the fee is automatically donated to the charity of your choice.
341
+ This creates a powerful incentive to honor your commitments while supporting worthy causes.
342
+ We notify you immediately after a missed session and confirm the donation.
343
+ </p>
344
+ </div>
345
+ </div>
346
+ </section>
347
+
348
+ <!-- Testimonials -->
349
+ <section id="testimonials" class="py-20">
350
+ <div class="container mx-auto px-4">
351
+ <div class="text-center mb-16">
352
+ <h2 class="text-4xl font-heading font-bold text-secondary mb-4">Success Stories</h2>
353
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Hear from people who transformed their fitness journey with accountability</p>
354
+ </div>
355
+
356
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
357
+ <div class="testimonial-card rounded-xl p-8 shadow-lg">
358
+ <div class="flex items-center mb-6">
359
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16"></div>
360
+ <div class="ml-4">
361
+ <h4 class="font-bold text-lg">Michael T.</h4>
362
+ <p class="text-gray-500">6 months with CommitFit</p>
363
+ </div>
364
+ </div>
365
+ <p class="text-gray-600 mb-4">
366
+ "Before CommitFit, I was skipping 50% of my gym sessions. Now I haven't missed one in 4 months.
367
+ Knowing someone is holding me accountable makes all the difference."
368
+ </p>
369
+ <div class="flex text-yellow-400">
370
+ <i class="fas fa-star"></i>
371
+ <i class="fas fa-star"></i>
372
+ <i class="fas fa-star"></i>
373
+ <i class="fas fa-star"></i>
374
+ <i class="fas fa-star"></i>
375
+ </div>
376
+ </div>
377
+
378
+ <div class="testimonial-card rounded-xl p-8 shadow-lg">
379
+ <div class="flex items-center mb-6">
380
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16"></div>
381
+ <div class="ml-4">
382
+ <h4 class="font-bold text-lg">Sarah J.</h4>
383
+ <p class="text-gray-500">Pro Plan member</p>
384
+ </div>
385
+ </div>
386
+ <p class="text-gray-600 mb-4">
387
+ "I missed one session and got a call from my coach within 10 minutes.
388
+ I was embarrassed but it motivated me to never miss again.
389
+ Plus, my $15 went to cancer research."
390
+ </p>
391
+ <div class="flex text-yellow-400">
392
+ <i class="fas fa-star"></i>
393
+ <i class="fas fa-star"></i>
394
+ <i class="fas fa-star"></i>
395
+ <i class="fas fa-star"></i>
396
+ <i class="fas fa-star"></i>
397
+ </div>
398
+ </div>
399
+
400
+ <div class="testimonial-card rounded-xl p-8 shadow-lg">
401
+ <div class="flex items-center mb-6">
402
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16"></div>
403
+ <div class="ml-4">
404
+ <h4 class="font-bold text-lg">David R.</h4>
405
+ <p class="text-gray-500">Lost 30lbs with CommitFit</p>
406
+ </div>
407
+ </div>
408
+ <p class="text-gray-600 mb-4">
409
+ "The combination of accountability and knowing my money goes to charity if I skip
410
+ has been revolutionary. I've gone from 3 missed sessions per week to zero in 6 months."
411
+ </p>
412
+ <div class="flex text-yellow-400">
413
+ <i class="fas fa-star"></i>
414
+ <i class="fas fa-star"></i>
415
+ <i class="fas fa-star"></i>
416
+ <i class="fas fa-star"></i>
417
+ <i class="fas fa-star"></i>
418
+ </div>
419
+ </div>
420
+ </div>
421
+ </div>
422
+ </section>
423
+
424
+ <!-- Charity Section -->
425
+ <section id="charities" class="py-20 bg-gray-50">
426
+ <div class="container mx-auto px-4">
427
+ <div class="text-center mb-16">
428
+ <h2 class="text-4xl font-heading font-bold text-secondary mb-4">Your Commitment Helps Others</h2>
429
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Choose where your missed session fees go. Turn skipped workouts into positive impact.</p>
430
+ </div>
431
+
432
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto">
433
+ <div class="charity-selector bg-white rounded-xl p-6 shadow-md border-2 border-gray-200 cursor-pointer">
434
+ <div class="flex justify-center mb-4">
435
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16"></div>
436
+ </div>
437
+ <h3 class="text-xl font-bold text-center mb-2">Children's Health</h3>
438
+ <p class="text-gray-600 text-center text-sm">Supporting medical care for children in need</p>
439
+ </div>
440
+
441
+ <div class="charity-selector bg-white rounded-xl p-6 shadow-md border-2 border-gray-200 cursor-pointer">
442
+ <div class="flex justify-center mb-4">
443
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16"></div>
444
+ </div>
445
+ <h3 class="text-xl font-bold text-center mb-2">Environmental Action</h3>
446
+ <p class="text-gray-600 text-center text-sm">Funding conservation and sustainability projects</p>
447
+ </div>
448
+
449
+ <div class="charity-selector bg-white rounded-xl p-6 shadow-md border-2 border-gray-200 cursor-pointer">
450
+ <div class="flex justify-center mb-4">
451
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16"></div>
452
+ </div>
453
+ <h3 class="text-xl font-bold text-center mb-2">Education Access</h3>
454
+ <p class="text-gray-600 text-center text-sm">Providing learning resources to underserved communities</p>
455
+ </div>
456
+
457
+ <div class="charity-selector bg-white rounded-xl p-6 shadow-md border-2 border-gray-200 cursor-pointer">
458
+ <div class="flex justify-center mb-4">
459
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16"></div>
460
+ </div>
461
+ <h3 class="text-xl font-bold text-center mb-2">Hunger Relief</h3>
462
+ <p class="text-gray-600 text-center text-sm">Feeding families facing food insecurity</p>
463
+ </div>
464
+ </div>
465
+
466
+ <div class="mt-12 text-center">
467
+ <p class="text-xl font-bold text-secondary mb-4">Over $250,000 donated to date</p>
468
+ <button class="bg-primary hover:bg-blue-700 text-white px-8 py-4 rounded-lg font-bold text-lg transition duration-300">
469
+ Join Our Community
470
+ </button>
471
+ </div>
472
+ </div>
473
+ </section>
474
+
475
+ <!-- CTA Section -->
476
+ <section class="cta-section py-20 text-white">
477
+ <div class="container mx-auto px-4 text-center">
478
+ <h2 class="text-4xl md:text-5xl font-heading font-bold mb-6">Ready to Transform Your Fitness Commitment?</h2>
479
+ <p class="text-xl max-w-3xl mx-auto mb-10 text-gray-200">
480
+ Stop disappointing yourself. Let us help you build the discipline you need to achieve your fitness goals.
481
+ </p>
482
+ <button class="bg-white hover:bg-gray-100 text-secondary px-10 py-5 rounded-lg font-bold text-xl transition duration-300">
483
+ Start Your 14-Day Trial
484
+ </button>
485
+ <p class="mt-6 text-gray-300">No credit card required. Cancel anytime.</p>
486
+ </div>
487
+ </section>
488
+
489
+ <!-- Footer -->
490
+ <footer class="bg-secondary text-white py-12">
491
+ <div class="container mx-auto px-4">
492
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
493
+ <div>
494
+ <div class="flex items-center mb-6">
495
+ <div class="bg-primary w-10 h-10 rounded-lg flex items-center justify-center mr-3">
496
+ <i class="fas fa-anchor text-white text-xl"></i>
497
+ </div>
498
+ <h1 class="text-2xl font-heading font-bold">Anker<span class="text-primary">-fit</span></h1>
499
+ </div>
500
+ <p class="text-gray-400 mb-4">
501
+ Like an anchor keeps a ship steady, we'll keep you committed to your fitness goals.
502
+ </p>
503
+ <div class="flex space-x-4">
504
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
505
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
506
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
507
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a>
508
+ </div>
509
+ </div>
510
+
511
+ <div>
512
+ <h3 class="text-lg font-bold mb-6">Quick Links</h3>
513
+ <ul class="space-y-3">
514
+ <li><a href="#" class="text-gray-400 hover:text-white">How It Works</a></li>
515
+ <li><a href="#" class="text-gray-400 hover:text-white">Pricing</a></li>
516
+ <li><a href="#" class="text-gray-400 hover:text-white">Success Stories</a></li>
517
+ <li><a href="#" class="text-gray-400 hover:text-white">Charities</a></li>
518
+ <li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li>
519
+ </ul>
520
+ </div>
521
+
522
+ <div>
523
+ <h3 class="text-lg font-bold mb-6">Legal</h3>
524
+ <ul class="space-y-3">
525
+ <li><a href="#" class="text-gray-400 hover:text-white">Terms of Service</a></li>
526
+ <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li>
527
+ <li><a href="#" class="text-gray-400 hover:text-white">Refund Policy</a></li>
528
+ <li><a href="#" class="text-gray-400 hover:text-white">Charity Partners</a></li>
529
+ </ul>
530
+ </div>
531
+
532
+ <div>
533
+ <h3 class="text-lg font-bold mb-6">Contact Us</h3>
534
+ <ul class="space-y-3">
535
+ <li class="flex items-start">
536
+ <i class="fas fa-envelope mt-1 mr-3 text-gray-400"></i>
537
+ <span class="text-gray-400">support@commitfit.com</span>
538
+ </li>
539
+ <li class="flex items-start">
540
+ <i class="fas fa-phone mt-1 mr-3 text-gray-400"></i>
541
+ <span class="text-gray-400">(888) 555-1234</span>
542
+ </li>
543
+ <li class="flex items-start">
544
+ <i class="fas fa-map-marker-alt mt-1 mr-3 text-gray-400"></i>
545
+ <span class="text-gray-400">123 Fitness Ave, Health City</span>
546
+ </li>
547
+ </ul>
548
+ </div>
549
+ </div>
550
+
551
+ <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500">
552
+ <p>&copy; 2023 CommitFit. All rights reserved. Accountability leads to transformation.</p>
553
+ </div>
554
+ </div>
555
+ </footer>
556
+
557
+ <!-- Floating Action Button -->
558
+ <div class="fixed bottom-6 right-6">
559
+ <button class="bg-primary hover:bg-blue-700 text-white w-14 h-14 rounded-full shadow-lg flex items-center justify-center">
560
+ <i class="fas fa-comment-alt text-xl"></i>
561
+ </button>
562
+ </div>
563
+
564
+ <script>
565
+ // Charity selection functionality
566
+ document.querySelectorAll('.charity-selector').forEach(item => {
567
+ item.addEventListener('click', event => {
568
+ // Remove selected class from all
569
+ document.querySelectorAll('.charity-selector').forEach(el => {
570
+ el.classList.remove('selected');
571
+ });
572
+ // Add selected class to clicked
573
+ event.currentTarget.classList.add('selected');
574
+ });
575
+ });
576
+
577
+ // Smooth scrolling for anchor links
578
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
579
+ anchor.addEventListener('click', function (e) {
580
+ e.preventDefault();
581
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
582
+ behavior: 'smooth'
583
+ });
584
+ });
585
+ });
586
+ </script>
587
+ <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=TimonKuik/anker-fit" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
588
+ </html>