Hugging Face's logo

Spaces:
ronny254
/
fitflex-thunderbolt
Running

App Files Community
ronny254 commited on
Commit
099040a
·
verified ·
1 Parent(s): 480e7fc

FitZone is a modern fitness destination built to help you reach your goals with personalized training, cutting-edge equipment, and a supportive community. Whether you’re a beginner or a pro, our expert coaches and tailored programs make every workout effective and inspiring. Discover your strength, challenge your limits, and become the best version of yourself at FitZone.the app should hav 3 pages

Browse files
Files changed (4) hide show
  1. README.md +9 -5
  2. classes.html +271 -0
  3. index.html +339 -18
  4. trainers.html +302 -0
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Fitflex Thunderbolt
3
- emoji: 🐠
4
- colorFrom: purple
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: FitFlex Thunderbolt ⚡
3
+ colorFrom: green
4
+ colorTo: red
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
classes.html ADDED
@@ -0,0 +1,271 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>FitZone - Classes</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <style>
11
+ .class-card:hover img {
12
+ transform: scale(1.1);
13
+ }
14
+ .class-card:hover .class-title {
15
+ color: #3b82f6;
16
+ }
17
+ </style>
18
+ </head>
19
+ <body class="font-sans antialiased">
20
+ <!-- Navigation -->
21
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
22
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
23
+ <div class="flex justify-between h-20 items-center">
24
+ <div class="flex items-center">
25
+ <i data-feather="activity" class="text-blue-600 w-8 h-8"></i>
26
+ <span class="ml-2 text-xl font-bold text-gray-900">FitZone</span>
27
+ </div>
28
+ <div class="hidden md:flex space-x-8">
29
+ <a href="index.html" class="text-gray-700 hover:text-blue-600 transition">Home</a>
30
+ <a href="classes.html" class="text-blue-600 font-medium">Classes</a>
31
+ <a href="trainers.html" class="text-gray-700 hover:text-blue-600 transition">Trainers</a>
32
+ </div>
33
+ <button class="md:hidden focus:outline-none">
34
+ <i data-feather="menu" class="w-6 h-6 text-gray-700"></i>
35
+ </button>
36
+ <div class="hidden md:block">
37
+ <a href="index.html#join" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-medium transition transform hover:-translate-y-1">
38
+ Join Now
39
+ </a>
40
+ </div>
41
+ </div>
42
+ </div>
43
+ </nav>
44
+
45
+ <!-- Hero -->
46
+ <div class="bg-gradient-to-r from-blue-800 to-blue-600 text-white py-20">
47
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
48
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Our Fitness Classes</h1>
49
+ <p class="text-xl max-w-3xl mx-auto">Challenge yourself with our diverse range of group classes designed for all fitness levels</p>
50
+ </div>
51
+ </div>
52
+
53
+ <!-- Classes Grid -->
54
+ <div class="py-16 bg-gray-50">
55
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
56
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
57
+ <!-- Class Card 1 -->
58
+ <div class="class-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300">
59
+ <div class="overflow-hidden">
60
+ <img src="http://static.photos/fitness/640x360/5" alt="HIIT Class" class="w-full h-64 object-cover transition duration-500">
61
+ </div>
62
+ <div class="p-6">
63
+ <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">High Intensity</span>
64
+ <h3 class="class-title text-xl font-bold mt-3 mb-2 transition duration-300">HIIT Blast</h3>
65
+ <p class="text-gray-600 mb-4">30-minute high intensity interval training for maximum calorie burn and endurance.</p>
66
+ <div class="flex justify-between items-center">
67
+ <span class="text-blue-600 font-medium">Mon, Wed, Fri</span>
68
+ <span class="text-gray-500">7:00 AM</span>
69
+ </div>
70
+ </div>
71
+ </div>
72
+
73
+ <!-- Class Card 2 -->
74
+ <div class="class-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300">
75
+ <div class="overflow-hidden">
76
+ <img src="http://static.photos/fitness/640x360/6" alt="Yoga Class" class="w-full h-64 object-cover transition duration-500">
77
+ </div>
78
+ <div class="p-6">
79
+ <span class="bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-0.5 rounded">Low Impact</span>
80
+ <h3 class="class-title text-xl font-bold mt-3 mb-2 transition duration-300">Power Yoga</h3>
81
+ <p class="text-gray-600 mb-4">Build strength, flexibility and mental focus with our advanced yoga flow.</p>
82
+ <div class="flex justify-between items-center">
83
+ <span class="text-blue-600 font-medium">Tue, Thu</span>
84
+ <span class="text-gray-500">6:00 PM</span>
85
+ </div>
86
+ </div>
87
+ </div>
88
+
89
+ <!-- Class Card 3 -->
90
+ <div class="class-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300">
91
+ <div class="overflow-hidden">
92
+ <img src="http://static.photos/fitness/640x360/7" alt="Spin Class" class="w-full h-64 object-cover transition duration-500">
93
+ </div>
94
+ <div class="p-6">
95
+ <span class="bg-purple-100 text-purple-800 text-xs font-semibold px-2.5 py-0.5 rounded">Cardio</span>
96
+ <h3 class="class-title text-xl font-bold mt-3 mb-2 transition duration-300">Cycle Burn</h3>
97
+ <p class="text-gray-600 mb-4">High-energy indoor cycling with motivating music and performance tracking.</p>
98
+ <div class="flex justify-between items-center">
99
+ <span class="text-blue-600 font-medium">Daily</span>
100
+ <span class="text-gray-500">5:30 AM, 6:00 PM</span>
101
+ </div>
102
+ </div>
103
+ </div>
104
+
105
+ <!-- Class Card 4 -->
106
+ <div class="class-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300">
107
+ <div class="overflow-hidden">
108
+ <img src="http://static.photos/fitness/640x360/8" alt="Strength Class" class="w-full h-64 object-cover transition duration-500">
109
+ </div>
110
+ <div class="p-6">
111
+ <span class="bg-red-100 text-red-800 text-xs font-semibold px-2.5 py-0.5 rounded">Strength</span>
112
+ <h3 class="class-title text-xl font-bold mt-3 mb-2 transition duration-300">Barbell Club</h3>
113
+ <p class="text-gray-600 mb-4">Build raw strength with compound lifts and progressive overload techniques.</p>
114
+ <div class="flex justify-between items-center">
115
+ <span class="text-blue-600 font-medium">Mon, Wed, Fri</span>
116
+ <span class="text-gray-500">12:00 PM</span>
117
+ </div>
118
+ </div>
119
+ </div>
120
+
121
+ <!-- Class Card 5 -->
122
+ <div class="class-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300">
123
+ <div class="overflow-hidden">
124
+ <img src="http://static.photos/fitness/640x360/9" alt="Dance Class" class="w-full h-64 object-cover transition duration-500">
125
+ </div>
126
+ <div class="p-6">
127
+ <span class="bg-yellow-100 text-yellow-800 text-xs font-semibold px-2.5 py-0.5 rounded">Fun</span>
128
+ <h3 class="class-title text-xl font-bold mt-3 mb-2 transition duration-300">Zumba Party</h3>
129
+ <p class="text-gray-600 mb-4">Latin-inspired dance workout that's fun, easy and burns major calories.</p>
130
+ <div class="flex justify-between items-center">
131
+ <span class="text-blue-600 font-medium">Sat, Sun</span>
132
+ <span class="text-gray-500">10:00 AM</span>
133
+ </div>
134
+ </div>
135
+ </div>
136
+
137
+ <!-- Class Card 6 -->
138
+ <div class="class-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300">
139
+ <div class="overflow-hidden">
140
+ <img src="http://static.photos/fitness/640x360/10" alt="Boxing Class" class="w-full h-64 object-cover transition duration-500">
141
+ </div>
142
+ <div class="p-6">
143
+ <span class="bg-red-100 text-red-800 text-xs font-semibold px-2.5 py-0.5 rounded">Combat</span>
144
+ <h3 class="class-title text-xl font-bold mt-3 mb-2 transition duration-300">Boxing Skills</h3>
145
+ <p class="text-gray-600 mb-4">Learn proper boxing techniques while getting an intense full-body workout.</p>
146
+ <div class="flex justify-between items-center">
147
+ <span class="text-blue-600 font-medium">Tue, Thu, Sat</span>
148
+ <span class="text-gray-500">7:00 PM</span>
149
+ </div>
150
+ </div>
151
+ </div>
152
+ </div>
153
+ </div>
154
+ </div>
155
+
156
+ <!-- Schedule Section -->
157
+ <div class="py-16 bg-white">
158
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
159
+ <h2 class="text-3xl font-bold text-center mb-12">Weekly Class Schedule</h2>
160
+ <div class="overflow-x-auto">
161
+ <table class="min-w-full divide-y divide-gray-200">
162
+ <thead class="bg-gray-50">
163
+ <tr>
164
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Time</th>
165
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Monday</th>
166
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tuesday</th>
167
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Wednesday</th>
168
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Thursday</th>
169
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Friday</th>
170
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Saturday</th>
171
+ </tr>
172
+ </thead>
173
+ <tbody class="bg-white divide-y divide-gray-200">
174
+ <tr>
175
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">6:00 AM</td>
176
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">HIIT Blast</td>
177
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Cycle Burn</td>
178
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">HIIT Blast</td>
179
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Cycle Burn</td>
180
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">HIIT Blast</td>
181
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"></td>
182
+ </tr>
183
+ <tr>
184
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">12:00 PM</td>
185
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Barbell Club</td>
186
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Yoga Flow</td>
187
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Barbell Club</td>
188
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Yoga Flow</td>
189
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Barbell Club</td>
190
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Zumba Party</td>
191
+ </tr>
192
+ <tr>
193
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">6:00 PM</td>
194
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Cycle Burn</td>
195
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Power Yoga</td>
196
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Cycle Burn</td>
197
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Power Yoga</td>
198
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Cycle Burn</td>
199
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Boxing Skills</td>
200
+ </tr>
201
+ </tbody>
202
+ </table>
203
+ </div>
204
+ </div>
205
+ </div>
206
+
207
+ <!-- Footer -->
208
+ <footer class="bg-gray-900 text-white py-12">
209
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
210
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
211
+ <div>
212
+ <div class="flex items-center mb-4">
213
+ <i data-feather="activity" class="text-blue-400 w-8 h-8"></i>
214
+ <span class="ml-2 text-xl font-bold">FitZone</span>
215
+ </div>
216
+ <p class="text-gray-400 mb-4">Transforming lives through fitness since 2015.</p>
217
+ <div class="flex space-x-4">
218
+ <a href="#" class="text-gray-400 hover:text-white transition">
219
+ <i data-feather="facebook" class="w-5 h-5"></i>
220
+ </a>
221
+ <a href="#" class="text-gray-400 hover:text-white transition">
222
+ <i data-feather="instagram" class="w-5 h-5"></i>
223
+ </a>
224
+ <a href="#" class="text-gray-400 hover:text-white transition">
225
+ <i data-feather="twitter" class="w-5 h-5"></i>
226
+ </a>
227
+ <a href="#" class="text-gray-400 hover:text-white transition">
228
+ <i data-feather="youtube" class="w-5 h-5"></i>
229
+ </a>
230
+ </div>
231
+ </div>
232
+ <div>
233
+ <h3 class="font-bold text-lg mb-4">Quick Links</h3>
234
+ <ul class="space-y-2">
235
+ <li><a href="index.html" class="text-gray-400 hover:text-white transition">Home</a></li>
236
+ <li><a href="classes.html" class="text-gray-400 hover:text-white transition">Classes</a></li>
237
+ <li><a href="trainers.html" class="text-gray-400 hover:text-white transition">Trainers</a></li>
238
+ </ul>
239
+ </div>
240
+ <div>
241
+ <h3 class="font-bold text-lg mb-4">Support</h3>
242
+ <ul class="space-y-2">
243
+ <li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li>
244
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Contact Us</a></li>
245
+ </ul>
246
+ </div>
247
+ <div>
248
+ <h3 class="font-bold text-lg mb-4">Contact</h3>
249
+ <ul class="space-y-2 text-gray-400">
250
+ <li class="flex items-center">
251
+ <i data-feather="map-pin" class="w-4 h-4 mr-2"></i>
252
+ <span>123 Fitness St, Fitville, FZ 90210</span>
253
+ </li>
254
+ <li class="flex items-center">
255
+ <i data-feather="phone" class="w-4 h-4 mr-2"></i>
256
+ <span>(555) 123-4567</span>
257
+ </li>
258
+ </ul>
259
+ </div>
260
+ </div>
261
+ <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
262
+ <p>© 2023 FitZone. All rights reserved.</p>
263
+ </div>
264
+ </div>
265
+ </footer>
266
+
267
+ <script>
268
+ feather.replace();
269
+ </script>
270
+ </body>
271
+ </html>
index.html CHANGED
@@ -1,19 +1,340 @@
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>FitZone: Your Ultimate Fitness Destination</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
12
+ <style>
13
+ .hero-gradient {
14
+ background: linear-gradient(135deg, #1e3a8a 0%, #0ea5e9 100%);
15
+ }
16
+ .equipment-card:hover {
17
+ transform: translateY(-5px);
18
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
19
+ }
20
+ .trainer-card:hover img {
21
+ transform: scale(1.05);
22
+ }
23
+ </style>
24
+ </head>
25
+ <body class="font-sans antialiased">
26
+ <!-- Navigation -->
27
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
28
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
29
+ <div class="flex justify-between h-20 items-center">
30
+ <div class="flex items-center">
31
+ <i data-feather="activity" class="text-blue-600 w-8 h-8"></i>
32
+ <span class="ml-2 text-xl font-bold text-gray-900">FitZone</span>
33
+ </div>
34
+ <div class="hidden md:flex space-x-8">
35
+ <a href="index.html" class="text-blue-600 font-medium">Home</a>
36
+ <a href="classes.html" class="text-gray-700 hover:text-blue-600 transition">Classes</a>
37
+ <a href="trainers.html" class="text-gray-700 hover:text-blue-600 transition">Trainers</a>
38
+ </div>
39
+ <button class="md:hidden focus:outline-none">
40
+ <i data-feather="menu" class="w-6 h-6 text-gray-700"></i>
41
+ </button>
42
+ <div class="hidden md:block">
43
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-medium transition transform hover:-translate-y-1">
44
+ Join Now
45
+ </button>
46
+ </div>
47
+ </div>
48
+ </div>
49
+ </nav>
50
+
51
+ <!-- Hero Section -->
52
+ <div id="hero" class="hero-gradient text-white">
53
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 md:py-32">
54
+ <div class="md:flex items-center justify-between">
55
+ <div class="md:w-1/2 mb-10 md:mb-0">
56
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Transform Your Body, Elevate Your Life</h1>
57
+ <p class="text-xl opacity-90 mb-8">Join the fitness revolution with personalized training programs, state-of-the-art equipment, and a community that pushes you to be your best.</p>
58
+ <div class="flex space-x-4">
59
+ <button class="bg-white text-blue-600 px-6 py-3 rounded-lg font-bold hover:bg-gray-100 transition transform hover:scale-105">
60
+ Start Free Trial
61
+ </button>
62
+ <button class="border-2 border-white px-6 py-3 rounded-lg font-bold hover:bg-white hover:text-blue-600 transition transform hover:scale-105">
63
+ Learn More
64
+ </button>
65
+ </div>
66
+ </div>
67
+ <div class="md:w-1/2 flex justify-center">
68
+ <img src="http://static.photos/fitness/1200x630/10" alt="Fitness Model" class="rounded-lg shadow-2xl max-w-md w-full">
69
+ </div>
70
+ </div>
71
+ </div>
72
+ </div>
73
+
74
+ <!-- Stats Section -->
75
+ <div class="bg-gray-50 py-16">
76
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
77
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
78
+ <div class="bg-white p-8 rounded-xl shadow-md">
79
+ <div class="text-blue-600 mb-4">
80
+ <i data-feather="users" class="w-12 h-12 mx-auto"></i>
81
+ </div>
82
+ <h3 class="text-4xl font-bold mb-2">10,000+</h3>
83
+ <p class="text-gray-600">Happy Members</p>
84
+ </div>
85
+ <div class="bg-white p-8 rounded-xl shadow-md">
86
+ <div class="text-blue-600 mb-4">
87
+ <i data-feather="award" class="w-12 h-12 mx-auto"></i>
88
+ </div>
89
+ <h3 class="text-4xl font-bold mb-2">50+</h3>
90
+ <p class="text-gray-600">Certified Trainers</p>
91
+ </div>
92
+ <div class="bg-white p-8 rounded-xl shadow-md">
93
+ <div class="text-blue-600 mb-4">
94
+ <i data-feather="clock" class="w-12 h-12 mx-auto"></i>
95
+ </div>
96
+ <h3 class="text-4xl font-bold mb-2">24/7</h3>
97
+ <p class="text-gray-600">Open Access</p>
98
+ </div>
99
+ </div>
100
+ </div>
101
+ </div>
102
+
103
+ <!-- Features Section -->
104
+ <div class="py-16 bg-white">
105
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
106
+ <div class="text-center mb-16">
107
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Why Choose FitZone?</h2>
108
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">We're not just a gym, we're a lifestyle transformation platform</p>
109
+ </div>
110
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
111
+ <div class="bg-gray-50 p-8 rounded-xl transition duration-300 hover:shadow-lg">
112
+ <div class="text-blue-600 mb-4">
113
+ <i data-feather="user-check" class="w-10 h-10"></i>
114
+ </div>
115
+ <h3 class="text-xl font-bold mb-3">Personalized Training</h3>
116
+ <p class="text-gray-600">Custom workout plans tailored to your goals, fitness level, and schedule.</p>
117
+ </div>
118
+ <div class="bg-gray-50 p-8 rounded-xl transition duration-300 hover:shadow-lg">
119
+ <div class="text-blue-600 mb-4">
120
+ <i data-feather="heart" class="w-10 h-10"></i>
121
+ </div>
122
+ <h3 class="text-xl font-bold mb-3">Holistic Approach</h3>
123
+ <p class="text-gray-600">Nutrition guidance, recovery strategies, and mental wellness programs.</p>
124
+ </div>
125
+ <div class="bg-gray-50 p-8 rounded-xl transition duration-300 hover:shadow-lg">
126
+ <div class="text-blue-600 mb-4">
127
+ <i data-feather="trending-up" class="w-10 h-10"></i>
128
+ </div>
129
+ <h3 class="text-xl font-bold mb-3">Progress Tracking</h3>
130
+ <p class="text-gray-600">Advanced metrics to track your improvements and celebrate milestones.</p>
131
+ </div>
132
+ </div>
133
+ </div>
134
+ </div>
135
+
136
+ <!-- Equipment Section -->
137
+ <div class="py-16 bg-gray-50">
138
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
139
+ <div class="text-center mb-16">
140
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">State-of-the-Art Equipment</h2>
141
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Train with the best tools in the industry</p>
142
+ </div>
143
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
144
+ <div class="equipment-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300">
145
+ <img src="http://static.photos/fitness/640x360/1" alt="Treadmill" class="w-full h-48 object-cover">
146
+ <div class="p-6">
147
+ <h3 class="font-bold text-xl mb-2">Cardio Machines</h3>
148
+ <p class="text-gray-600">Latest models with interactive displays</p>
149
+ </div>
150
+ </div>
151
+ <div class="equipment-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300">
152
+ <img src="http://static.photos/fitness/640x360/2" alt="Weightlifting" class="w-full h-48 object-cover">
153
+ <div class="p-6">
154
+ <h3 class="font-bold text-xl mb-2">Free Weights</h3>
155
+ <p class="text-gray-600">Premium quality dumbbells and barbells</p>
156
+ </div>
157
+ </div>
158
+ <div class="equipment-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300">
159
+ <img src="http://static.photos/fitness/640x360/3" alt="Functional" class="w-full h-48 object-cover">
160
+ <div class="p-6">
161
+ <h3 class="font-bold text-xl mb-2">Functional Training</h3>
162
+ <p class="text-gray-600">TRX, battle ropes, and plyometric boxes</p>
163
+ </div>
164
+ </div>
165
+ <div class="equipment-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300">
166
+ <img src="http://static.photos/fitness/640x360/4" alt="Recovery" class="w-full h-48 object-cover">
167
+ <div class="p-6">
168
+ <h3 class="font-bold text-xl mb-2">Recovery Zone</h3>
169
+ <p class="text-gray-600">Massage guns, foam rollers, and more</p>
170
+ </div>
171
+ </div>
172
+ </div>
173
+ </div>
174
+ </div>
175
+
176
+ <!-- Testimonials -->
177
+ <div class="py-16 bg-white">
178
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
179
+ <div class="text-center mb-16">
180
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Success Stories</h2>
181
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Hear from our members who transformed their lives</p>
182
+ </div>
183
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
184
+ <div class="bg-gray-50 p-8 rounded-xl">
185
+ <div class="flex items-center mb-4">
186
+ <img src="http://static.photos/people/200x200/1" alt="Member" class="w-12 h-12 rounded-full mr-4">
187
+ <div>
188
+ <h4 class="font-bold">Sarah Johnson</h4>
189
+ <p class="text-blue-600 text-sm">Lost 42lbs in 6 months</p>
190
+ </div>
191
+ </div>
192
+ <p class="text-gray-600 italic">"FitZone completely changed my relationship with fitness. The trainers are knowledgeable and the community is so supportive!"</p>
193
+ <div class="flex mt-4 text-yellow-400">
194
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
195
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
196
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
197
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
198
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
199
+ </div>
200
+ </div>
201
+ <div class="bg-gray-50 p-8 rounded-xl">
202
+ <div class="flex items-center mb-4">
203
+ <img src="http://static.photos/people/200x200/2" alt="Member" class="w-12 h-12 rounded-full mr-4">
204
+ <div>
205
+ <h4 class="font-bold">Michael Chen</h4>
206
+ <p class="text-blue-600 text-sm">Gained 15lbs muscle</p>
207
+ </div>
208
+ </div>
209
+ <p class="text-gray-600 italic">"The personalized training program helped me break through plateaus I'd been stuck at for years. Best gym I've ever joined."</p>
210
+ <div class="flex mt-4 text-yellow-400">
211
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
212
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
213
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
214
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
215
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
216
+ </div>
217
+ </div>
218
+ <div class="bg-gray-50 p-8 rounded-xl">
219
+ <div class="flex items-center mb-4">
220
+ <img src="http://static.photos/people/200x200/3" alt="Member" class="w-12 h-12 rounded-full mr-4">
221
+ <div>
222
+ <h4 class="font-bold">David Rodriguez</h4>
223
+ <p class="text-blue-600 text-sm">Ran first marathon</p>
224
+ </div>
225
+ </div>
226
+ <p class="text-gray-600 italic">"The coaching staff helped me prepare for my first marathon with a perfect training plan. Couldn't have done it without them!"</p>
227
+ <div class="flex mt-4 text-yellow-400">
228
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
229
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
230
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
231
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
232
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
233
+ </div>
234
+ </div>
235
+ </div>
236
+ </div>
237
+ </div>
238
+
239
+ <!-- CTA Section -->
240
+ <div class="hero-gradient py-16 text-white">
241
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
242
+ <h2 class="text-3xl font-bold mb-6">Ready to Start Your Fitness Journey?</h2>
243
+ <p class="text-xl mb-8 max-w-3xl mx-auto">Join today and get 7 days free with no commitment. Our team will help you create a custom plan to reach your goals.</p>
244
+ <button class="bg-white text-blue-600 px-8 py-4 rounded-lg font-bold text-lg hover:bg-gray-100 transition transform hover:scale-105 shadow-lg">
245
+ Claim Your Free Week
246
+ </button>
247
+ </div>
248
+ </div>
249
+
250
+ <!-- Footer -->
251
+ <footer class="bg-gray-900 text-white py-12">
252
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
253
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
254
+ <div>
255
+ <div class="flex items-center mb-4">
256
+ <i data-feather="activity" class="text-blue-400 w-8 h-8"></i>
257
+ <span class="ml-2 text-xl font-bold">FitZone</span>
258
+ </div>
259
+ <p class="text-gray-400 mb-4">Transforming lives through fitness since 2015.</p>
260
+ <div class="flex space-x-4">
261
+ <a href="#" class="text-gray-400 hover:text-white transition">
262
+ <i data-feather="facebook" class="w-5 h-5"></i>
263
+ </a>
264
+ <a href="#" class="text-gray-400 hover:text-white transition">
265
+ <i data-feather="instagram" class="w-5 h-5"></i>
266
+ </a>
267
+ <a href="#" class="text-gray-400 hover:text-white transition">
268
+ <i data-feather="twitter" class="w-5 h-5"></i>
269
+ </a>
270
+ <a href="#" class="text-gray-400 hover:text-white transition">
271
+ <i data-feather="youtube" class="w-5 h-5"></i>
272
+ </a>
273
+ </div>
274
+ </div>
275
+ <div>
276
+ <h3 class="font-bold text-lg mb-4">Quick Links</h3>
277
+ <ul class="space-y-2">
278
+ <li><a href="index.html" class="text-gray-400 hover:text-white transition">Home</a></li>
279
+ <li><a href="classes.html" class="text-gray-400 hover:text-white transition">Classes</a></li>
280
+ <li><a href="trainers.html" class="text-gray-400 hover:text-white transition">Trainers</a></li>
281
+ </ul>
282
+ </div>
283
+ <div>
284
+ <h3 class="font-bold text-lg mb-4">Support</h3>
285
+ <ul class="space-y-2">
286
+ <li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li>
287
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Contact Us</a></li>
288
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li>
289
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a></li>
290
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li>
291
+ </ul>
292
+ </div>
293
+ <div>
294
+ <h3 class="font-bold text-lg mb-4">Contact</h3>
295
+ <ul class="space-y-2 text-gray-400">
296
+ <li class="flex items-center">
297
+ <i data-feather="map-pin" class="w-4 h-4 mr-2"></i>
298
+ <span>123 Fitness St, Fitville, FZ 90210</span>
299
+ </li>
300
+ <li class="flex items-center">
301
+ <i data-feather="phone" class="w-4 h-4 mr-2"></i>
302
+ <span>(555) 123-4567</span>
303
+ </li>
304
+ <li class="flex items-center">
305
+ <i data-feather="mail" class="w-4 h-4 mr-2"></i>
306
+ <span>hello@fitzone.com</span>
307
+ </li>
308
+ <li class="flex items-center">
309
+ <i data-feather="clock" class="w-4 h-4 mr-2"></i>
310
+ <span>Open 24/7</span>
311
+ </li>
312
+ </ul>
313
+ </div>
314
+ </div>
315
+ <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
316
+ <p>© 2023 FitZone. All rights reserved.</p>
317
+ </div>
318
+ </div>
319
+ </footer>
320
+
321
+ <script>
322
+ // Initialize Vanta.js globe
323
+ VANTA.GLOBE({
324
+ el: "#hero",
325
+ mouseControls: true,
326
+ touchControls: true,
327
+ gyroControls: false,
328
+ minHeight: 200.00,
329
+ minWidth: 200.00,
330
+ scale: 1.00,
331
+ scaleMobile: 1.00,
332
+ color: 0x3b82f6,
333
+ backgroundColor: 0x1e3a8a
334
+ });
335
+ </script>
336
+ <script>
337
+ feather.replace();
338
+ </script>
339
+ </body>
340
  </html>
trainers.html ADDED
@@ -0,0 +1,302 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>FitZone - Trainers</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <style>
11
+ .trainer-card:hover img {
12
+ transform: scale(1.05);
13
+ }
14
+ .trainer-card:hover .trainer-name {
15
+ color: #3b82f6;
16
+ }
17
+ .specialty-chip {
18
+ transition: all 0.3s ease;
19
+ }
20
+ .trainer-card:hover .specialty-chip {
21
+ background-color: #3b82f6;
22
+ color: white;
23
+ }
24
+ </style>
25
+ </head>
26
+ <body class="font-sans antialiased">
27
+ <!-- Navigation -->
28
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
29
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
30
+ <div class="flex justify-between h-20 items-center">
31
+ <div class="flex items-center">
32
+ <i data-feather="activity" class="text-blue-600 w-8 h-8"></i>
33
+ <span class="ml-2 text-xl font-bold text-gray-900">FitZone</span>
34
+ </div>
35
+ <div class="hidden md:flex space-x-8">
36
+ <a href="index.html" class="text-gray-700 hover:text-blue-600 transition">Home</a>
37
+ <a href="classes.html" class="text-gray-700 hover:text-blue-600 transition">Classes</a>
38
+ <a href="trainers.html" class="text-blue-600 font-medium">Trainers</a>
39
+ </div>
40
+ <button class="md:hidden focus:outline-none">
41
+ <i data-feather="menu" class="w-6 h-6 text-gray-700"></i>
42
+ </button>
43
+ <div class="hidden md:block">
44
+ <a href="index.html#join" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-medium transition transform hover:-translate-y-1">
45
+ Join Now
46
+ </a>
47
+ </div>
48
+ </div>
49
+ </div>
50
+ </nav>
51
+
52
+ <!-- Hero -->
53
+ <div class="bg-gradient-to-r from-blue-800 to-blue-600 text-white py-20">
54
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
55
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Meet Our Trainers</h1>
56
+ <p class="text-xl max-w-3xl mx-auto">Our certified professionals are here to guide you every step of the way</p>
57
+ </div>
58
+ </div>
59
+
60
+ <!-- Trainers Grid -->
61
+ <div class="py-16 bg-gray-50">
62
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
63
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
64
+ <!-- Trainer 1 -->
65
+ <div class="trainer-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300">
66
+ <div class="relative">
67
+ <img src="http://static.photos/people/640x360/11" alt="Trainer Alex" class="w-full h-80 object-cover transition duration-500">
68
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
69
+ <h3 class="trainer-name text-2xl font-bold text-white transition duration-300">Alex Johnson</h3>
70
+ <p class="text-blue-300">Head Trainer</p>
71
+ </div>
72
+ </div>
73
+ <div class="p-6">
74
+ <div class="flex flex-wrap gap-2 mb-4">
75
+ <span class="specialty-chip bg-gray-100 text-gray-800 text-xs font-semibold px-2.5 py-0.5 rounded">Strength</span>
76
+ <span class="specialty-chip bg-gray-100 text-gray-800 text-xs font-semibold px-2.5 py-0.5 rounded">HIIT</span>
77
+ <span class="specialty-chip bg-gray-100 text-gray-800 text-xs font-semibold px-2.5 py-0.5 rounded">Olympic Lifts</span>
78
+ </div>
79
+ <p class="text-gray-600 mb-4">With 12 years of experience, Alex specializes in functional strength training and athletic performance enhancement.</p>
80
+ <div class="flex items-center">
81
+ <i data-feather="award" class="w-4 h-4 text-blue-600 mr-1"></i>
82
+ <span class="text-sm text-gray-600">NASM, ACE, CrossFit L2</span>
83
+ </div>
84
+ </div>
85
+ </div>
86
+
87
+ <!-- Trainer 2 -->
88
+ <div class="trainer-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300">
89
+ <div class="relative">
90
+ <img src="http://static.photos/people/640x360/12" alt="Trainer Maria" class="w-full h-80 object-cover transition duration-500">
91
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
92
+ <h3 class="trainer-name text-2xl font-bold text-white transition duration-300">Maria Rodriguez</h3>
93
+ <p class="text-blue-300">Yoga & Mobility Expert</p>
94
+ </div>
95
+ </div>
96
+ <div class="p-6">
97
+ <div class="flex flex-wrap gap-2 mb-4">
98
+ <span class="specialty-chip bg-gray-100 text-gray-800 text-xs font-semibold px-2.5 py-0.5 rounded">Yoga</span>
99
+ <span class="specialty-chip bg-gray-100 text-gray-800 text-xs font-semibold px-2.5 py-0.5 rounded">Mobility</span>
100
+ <span class="specialty-chip bg-gray-100 text-gray-800 text-xs font-semibold px-2.5 py-0.5 rounded">Pilates</span>
101
+ </div>
102
+ <p class="text-gray-600 mb-4">Maria brings a holistic approach to fitness with her background in physical therapy and 8 years of yoga instruction.</p>
103
+ <div class="flex items-center">
104
+ <i data-feather="award" class="w-4 h-4 text-blue-600 mr-1"></i>
105
+ <span class="text-sm text-gray-600">RYT-500, NASM-CPT, FRCms</span>
106
+ </div>
107
+ </div>
108
+ </div>
109
+
110
+ <!-- Trainer 3 -->
111
+ <div class="trainer-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300">
112
+ <div class="relative">
113
+ <img src="http://static.photos/people/640x360/13" alt="Trainer Jamal" class="w-full h-80 object-cover transition duration-500">
114
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
115
+ <h3 class="trainer-name text-2xl font-bold text-white transition duration-300">Jamal Williams</h3>
116
+ <p class="text-blue-300">Cycle & HIIT Specialist</p>
117
+ </div>
118
+ </div>
119
+ <div class="p-6">
120
+ <div class="flex flex-wrap gap-2 mb-4">
121
+ <span class="specialty-chip bg-gray-100 text-gray-800 text-xs font-semibold px-2.5 py-0.5 rounded">Cycling</span>
122
+ <span class="specialty-chip bg-gray-100 text-gray-800 text-xs font-semibold px-2.5 py-0.5 rounded">HIIT</span>
123
+ <span class="specialty-chip bg-gray-100 text-gray-800 text-xs font-semibold px-2.5 py-0.5 rounded">Endurance</span>
124
+ </div>
125
+ <p class="text-gray-600 mb-4">A former competitive cyclist, Jamal creates high-energy workouts that push limits while keeping it fun.</p>
126
+ <div class="flex items-center">
127
+ <i data-feather="award" class="w-4 h-4 text-blue-600 mr-1"></i>
128
+ <span class="text-sm text-gray-600">ACE, Schwinn Certified, Precision Nutrition</span>
129
+ </div>
130
+ </div>
131
+ </div>
132
+
133
+ <!-- Trainer 4 -->
134
+ <div class="trainer-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300">
135
+ <div class="relative">
136
+ <img src="http://static.photos/people/640x360/14" alt="Trainer Sarah" class="w-full h-80 object-cover transition duration-500">
137
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
138
+ <h3 class="trainer-name text-2xl font-bold text-white transition duration-300">Sarah Chen</h3>
139
+ <p class="text-blue-300">Nutrition Coach</p>
140
+ </div>
141
+ </div>
142
+ <div class="p-6">
143
+ <div class="flex flex-wrap gap-2 mb-4">
144
+ <span class="specialty-chip bg-gray-100 text-gray-800 text-xs font-semibold px-2.5 py-0.5 rounded">Nutrition</span>
145
+ <span class="specialty-chip bg-gray-100 text-gray-800 text-xs font-semibold px-2.5 py-0.5 rounded">Weight Loss</span>
146
+ <span class="specialty-chip bg-gray-100 text-gray-800 text-xs font-semibold px-2.5 py-0.5 rounded">Meal Planning</span>
147
+ </div>
148
+ <p class="text-gray-600 mb-4">Sarah combines her dietetics background with practical strategies to help clients develop sustainable eating habits.</p>
149
+ <div class="flex items-center">
150
+ <i data-feather="award" class="w-4 h-4 text-blue-600 mr-1"></i>
151
+ <span class="text-sm text-gray-600">RD, NASM-CNC, PN Level 1</span>
152
+ </div>
153
+ </div>
154
+ </div>
155
+
156
+ <!-- Trainer 5 -->
157
+ <div class="trainer-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300">
158
+ <div class="relative">
159
+ <img src="http://static.photos/people/640x360/15" alt="Trainer David" class="w-full h-80 object-cover transition duration-500">
160
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
161
+ <h3 class="trainer-name text-2xl font-bold text-white transition duration-300">David Park</h3>
162
+ <p class="text-blue-300">Boxing & MMA Coach</p>
163
+ </div>
164
+ </div>
165
+ <div class="p-6">
166
+ <div class="flex flex-wrap gap-2 mb-4">
167
+ <span class="specialty-chip bg-gray-100 text-gray-800 text-xs font-semibold px-2.5 py-0.5 rounded">Boxing</span>
168
+ <span class="specialty-chip bg-gray-100 text-gray-800 text-xs font-semibold px-2.5 py-0.5 rounded">MMA</span>
169
+ <span class="specialty-chip bg-gray-100 text-gray-800 text-xs font-semibold px-2.5 py-0.5 rounded">Self-Defense</span>
170
+ </div>
171
+ <p class="text-gray-600 mb-4">Former professional fighter David brings real combat experience to his high-intensity training sessions.</p>
172
+ <div class="flex items-center">
173
+ <i data-feather="award" class="w-4 h-4 text-blue-600 mr-1"></i>
174
+ <span class="text-sm text-gray-600">NSCA-CSCS, USA Boxing Coach</span>
175
+ </div>
176
+ </div>
177
+ </div>
178
+
179
+ <!-- Trainer 6 -->
180
+ <div class="trainer-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300">
181
+ <div class="relative">
182
+ <img src="http://static.photos/people/640x360/16" alt="Trainer Emily" class="w-full h-80 object-cover transition duration-500">
183
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
184
+ <h3 class="trainer-name text-2xl font-bold text-white transition duration-300">Emily Wilson</h3>
185
+ <p class="text-blue-300">Senior Fitness Specialist</p>
186
+ </div>
187
+ </div>
188
+ <div class="p-6">
189
+ <div class="flex flex-wrap gap-2 mb-4">
190
+ <span class="specialty-chip bg-gray-100 text-gray-800 text-xs font-semibold px-2.5 py-0.5 rounded">Senior Fitness</span>
191
+ <span class="specialty-chip bg-gray-100 text-gray-800 text-xs font-semibold px-2.5 py-0.5 rounded">Rehabilitation</span>
192
+ <span class="specialty-chip bg-gray-100 text-gray-800 text-xs font-semibold px-2.5 py-0.5 rounded">Low Impact</span>
193
+ </div>
194
+ <p class="text-gray-600 mb-4">Emily specializes in helping older adults maintain mobility, strength and independence through safe, effective exercise.</p>
195
+ <div class="flex items-center">
196
+ <i data-feather="award" class="w-4 h-4 text-blue-600 mr-1"></i>
197
+ <span class="text-sm text-gray-600">ACE Senior Fitness, NASM-CES</span>
198
+ </div>
199
+ </div>
200
+ </div>
201
+ </div>
202
+ </div>
203
+ </div>
204
+
205
+ <!-- Training Programs -->
206
+ <div class="py-16 bg-white">
207
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
208
+ <h2 class="text-3xl font-bold text-center mb-12">Personal Training Programs</h2>
209
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
210
+ <div class="border border-gray-200 rounded-lg p-6 hover:shadow-lg transition duration-300">
211
+ <div class="text-blue-600 mb-4">
212
+ <i data-feather="user" class="w-10 h-10"></i>
213
+ </div>
214
+ <h3 class="text-xl font-bold mb-3">1-on-1 Coaching</h3>
215
+ <p class="text-gray-600 mb-4">Completely personalized training with undivided attention from your coach.</p>
216
+ <p class="text-blue-600 font-semibold">Starting at $99/session</p>
217
+ </div>
218
+ <div class="border border-gray-200 rounded-lg p-6 hover:shadow-lg transition duration-300">
219
+ <div class="text-blue-600 mb-4">
220
+ <i data-feather="users" class="w-10 h-10"></i>
221
+ </div>
222
+ <h3 class="text-xl font-bold mb-3">Small Group Training</h3>
223
+ <p class="text-gray-600 mb-4">Train with 2-4 others for shared motivation at a lower cost.</p>
224
+ <p class="text-blue-600 font-semibold">Starting at $60/session</p>
225
+ </div>
226
+ <div class="border border-gray-200 rounded-lg p-6 hover:shadow-lg transition duration-300">
227
+ <div class="text-blue-600 mb-4">
228
+ <i data-feather="clipboard" class="w-10 h-10"></i>
229
+ </div>
230
+ <h3 class="text-xl font-bold mb-3">Custom Program Design</h3>
231
+ <p class="text-gray-600 mb-4">Get a professionally designed workout plan tailored to your goals.</p>
232
+ <p class="text-blue-600 font-semibold">Starting at $199/month</p>
233
+ </div>
234
+ </div>
235
+ </div>
236
+ </div>
237
+
238
+ <!-- Footer -->
239
+ <footer class="bg-gray-900 text-white py-12">
240
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
241
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
242
+ <div>
243
+ <div class="flex items-center mb-4">
244
+ <i data-feather="activity" class="text-blue-400 w-8 h-8"></i>
245
+ <span class="ml-2 text-xl font-bold">FitZone</span>
246
+ </div>
247
+ <p class="text-gray-400 mb-4">Transforming lives through fitness since 2015.</p>
248
+ <div class="flex space-x-4">
249
+ <a href="#" class="text-gray-400 hover:text-white transition">
250
+ <i data-feather="facebook" class="w-5 h-5"></i>
251
+ </a>
252
+ <a href="#" class="text-gray-400 hover:text-white transition">
253
+ <i data-feather="instagram" class="w-5 h-5"></i>
254
+ </a>
255
+ <a href="#" class="text-gray-400 hover:text-white transition">
256
+ <i data-feather="twitter" class="w-5 h-5"></i>
257
+ </a>
258
+ <a href="#" class="text-gray-400 hover:text-white transition">
259
+ <i data-feather="youtube" class="w-5 h-5"></i>
260
+ </a>
261
+ </div>
262
+ </div>
263
+ <div>
264
+ <h3 class="font-bold text-lg mb-4">Quick Links</h3>
265
+ <ul class="space-y-2">
266
+ <li><a href="index.html" class="text-gray-400 hover:text-white transition">Home</a></li>
267
+ <li><a href="classes.html" class="text-gray-400 hover:text-white transition">Classes</a></li>
268
+ <li><a href="trainers.html" class="text-gray-400 hover:text-white transition">Trainers</a></li>
269
+ </ul>
270
+ </div>
271
+ <div>
272
+ <h3 class="font-bold text-lg mb-4">Support</h3>
273
+ <ul class="space-y-2">
274
+ <li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li>
275
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Contact Us</a></li>
276
+ </ul>
277
+ </div>
278
+ <div>
279
+ <h3 class="font-bold text-lg mb-4">Contact</h3>
280
+ <ul class="space-y-2 text-gray-400">
281
+ <li class="flex items-center">
282
+ <i data-feather="map-pin" class="w-4 h-4 mr-2"></i>
283
+ <span>123 Fitness St, Fitville, FZ 90210</span>
284
+ </li>
285
+ <li class="flex items-center">
286
+ <i data-feather="phone" class="w-4 h-4 mr-2"></i>
287
+ <span>(555) 123-4567</span>
288
+ </li>
289
+ </ul>
290
+ </div>
291
+ </div>
292
+ <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
293
+ <p>© 2023 FitZone. All rights reserved.</p>
294
+ </div>
295
+ </div>
296
+ </footer>
297
+
298
+ <script>
299
+ feather.replace();
300
+ </script>
301
+ </body>
302
+ </html>