Hugging Face's logo

Spaces:
TORZ
/
lava
Running

App Files Community
TORZ commited on
Commit
5253c37
·
verified ·
1 Parent(s): 9c70bdd

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +264 -346
index.html CHANGED
@@ -3,36 +3,54 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Lava Yoga | Testosterone-Boosting Yoga for Men</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
- @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
11
 
12
  body {
13
- font-family: 'Montserrat', sans-serif;
14
- background-color: #f8f8f8;
15
- }
16
-
17
- .hero-gradient {
18
- background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
19
- }
20
-
21
- .testimonial-card {
22
- transition: all 0.3s ease;
23
- }
24
-
25
- .testimonial-card:hover {
26
- transform: translateY(-5px);
27
- box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
28
- }
29
-
30
- .course-card {
31
- transition: all 0.3s ease;
32
- }
33
-
34
- .course-card:hover {
35
- transform: translateY(-5px);
36
  }
37
 
38
  .nav-link {
@@ -43,10 +61,10 @@
43
  content: '';
44
  position: absolute;
45
  width: 0;
46
- height: 2px;
47
  bottom: -2px;
48
  left: 0;
49
- background-color: #e94560;
50
  transition: width 0.3s ease;
51
  }
52
 
@@ -54,55 +72,70 @@
54
  width: 100%;
55
  }
56
 
57
- .btn-primary {
58
  transition: all 0.3s ease;
 
59
  }
60
 
61
- .btn-primary:hover {
62
- transform: translateY(-2px);
63
- box-shadow: 0 5px 15px rgba(233, 69, 96, 0.3);
64
  }
65
 
66
- .masculine-icon {
67
- color: #e94560;
68
- background-color: rgba(233, 69, 96, 0.1);
69
- border-radius: 50%;
70
- padding: 12px;
71
- width: 48px;
72
- height: 48px;
73
- display: flex;
74
- align-items: center;
75
- justify-content: center;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
76
  }
77
  </style>
78
  </head>
79
- <body class="text-gray-800">
80
  <!-- Navigation -->
81
- <nav class="bg-white shadow-sm fixed w-full z-10">
82
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
83
- <div class="flex justify-between h-16">
84
  <div class="flex items-center">
85
  <div class="flex-shrink-0 flex items-center">
86
- <div class="masculine-icon mr-3">
87
- <i class="fas fa-fire text-xl"></i>
88
- </div>
89
- <span class="text-xl font-bold text-gray-900">LAVA YOGA</span>
90
  </div>
91
  </div>
92
- <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
93
- <a href="#home" class="nav-link px-3 py-2 text-sm font-medium text-gray-900">Home</a>
94
- <a href="#programs" class="nav-link px-3 py-2 text-sm font-medium text-gray-900">Programs</a>
95
- <a href="#products" class="nav-link px-3 py-2 text-sm font-medium text-gray-900">Products</a>
96
- <a href="#testimonials" class="nav-link px-3 py-2 text-sm font-medium text-gray-900">Results</a>
97
- <a href="#about" class="nav-link px-3 py-2 text-sm font-medium text-gray-900">About</a>
98
- <a href="#contact" class="nav-link px-3 py-2 text-sm font-medium text-gray-900">Contact</a>
99
- <button class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300">
100
- <i class="fas fa-lock mr-1"></i> Member Login
101
  </button>
102
  </div>
103
  <div class="-mr-2 flex items-center md:hidden">
104
- <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-red-500" aria-controls="mobile-menu" aria-expanded="false">
105
- <span class="sr-only">Open main menu</span>
106
  <i class="fas fa-bars"></i>
107
  </button>
108
  </div>
@@ -111,227 +144,145 @@
111
  </nav>
112
 
113
  <!-- Hero Section -->
114
- <section id="home" class="hero-gradient pt-24 pb-20 md:pt-32 md:pb-28 text-white">
115
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
116
  <div class="md:flex md:items-center md:justify-between">
117
- <div class="md:w-1/2 mb-10 md:mb-0">
118
- <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6">Unlock Your <span class="text-red-400">Primal Potential</span></h1>
119
- <p class="text-lg md:text-xl text-gray-300 mb-8">Scientifically-designed yoga programs to naturally boost testosterone, enhance vitality, and reclaim your masculine energy.</p>
120
  <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
121
- <button class="bg-red-500 hover:bg-red-600 text-white px-6 py-3 rounded-md text-lg font-medium transition duration-300 btn-primary">
122
- <i class="fas fa-play-circle mr-2"></i> Start Free Trial
123
  </button>
124
- <button class="border border-white hover:bg-white hover:text-gray-900 text-white px-6 py-3 rounded-md text-lg font-medium transition duration-300">
125
- <i class="fas fa-book-open mr-2"></i> Explore Programs
126
  </button>
127
  </div>
128
  </div>
129
- <div class="md:w-1/2 flex justify-center">
130
- <img src="https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1520&q=80" alt="Man doing yoga" class="rounded-lg shadow-xl w-full max-w-md">
131
  </div>
132
  </div>
133
  </div>
134
  </section>
135
 
136
- <!-- Stats Section -->
137
- <section class="bg-white py-12">
138
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
139
- <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
140
- <div class="p-4">
141
- <div class="text-3xl md:text-4xl font-bold text-red-500 mb-2">87%</div>
142
- <div class="text-gray-600">Testosterone Increase</div>
143
- </div>
144
- <div class="p-4">
145
- <div class="text-3xl md:text-4xl font-bold text-red-500 mb-2">10K+</div>
146
- <div class="text-gray-600">Men Transformed</div>
147
- </div>
148
- <div class="p-4">
149
- <div class="text-3xl md:text-4xl font-bold text-red-500 mb-2">28</div>
150
- <div class="text-gray-600">Days to See Results</div>
151
- </div>
152
- <div class="p-4">
153
- <div class="text-3xl md:text-4xl font-bold text-red-500 mb-2">5.0</div>
154
- <div class="text-gray-600">Average Rating</div>
155
- </div>
156
- </div>
157
- </div>
158
- </section>
159
 
160
- <!-- Programs Section -->
161
- <section id="programs" class="py-16 bg-gray-50">
162
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
163
  <div class="text-center mb-16">
164
- <h2 class="text-3xl md:text-4xl font-bold mb-4">Our <span class="text-red-500">Signature Programs</span></h2>
165
- <p class="text-lg text-gray-600 max-w-3xl mx-auto">Choose the program that matches your goals and current fitness level</p>
166
  </div>
167
 
168
  <div class="grid md:grid-cols-3 gap-8">
169
- <!-- Program 1 -->
170
- <div class="bg-white rounded-xl shadow-md overflow-hidden course-card">
171
- <div class="h-48 bg-gradient-to-r from-red-500 to-orange-500 flex items-center justify-center">
172
- <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Man doing beginner yoga" class="w-full h-full object-cover">
173
  </div>
174
  <div class="p-6">
175
  <div class="flex justify-between items-start mb-4">
176
- <h3 class="text-xl font-bold">Ignite Foundation</h3>
177
- <span class="bg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded">Beginner</span>
178
  </div>
179
- <p class="text-gray-600 mb-4">Build fundamental strength and flexibility while kickstarting your testosterone production.</p>
180
- <div class="flex items-center text-gray-500 text-sm mb-4">
181
- <i class="fas fa-clock mr-2"></i>
182
- <span>6 weeks • 15-20 min/day</span>
183
- </div>
184
- <div class="flex justify-between items-center">
185
- <span class="text-xl font-bold">$97</span>
186
- <button class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300 btn-primary">
187
- Enroll Now
188
- </button>
189
  </div>
 
 
 
190
  </div>
191
  </div>
192
 
193
- <!-- Program 2 -->
194
- <div class="bg-white rounded-xl shadow-md overflow-hidden course-card">
195
- <div class="h-48 bg-gradient-to-r from-orange-500 to-amber-500 flex items-center justify-center">
196
- <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" alt="Man doing intermediate yoga" class="w-full h-full object-cover">
197
  </div>
198
  <div class="p-6">
199
  <div class="flex justify-between items-start mb-4">
200
- <h3 class="text-xl font-bold">Primal Surge</h3>
201
- <span class="bg-amber-100 text-amber-800 text-xs font-medium px-2.5 py-0.5 rounded">Intermediate</span>
202
- </div>
203
- <p class="text-gray-600 mb-4">Advanced poses and sequences designed to maximize testosterone and masculine energy.</p>
204
- <div class="flex items-center text-gray-500 text-sm mb-4">
205
- <i class="fas fa-clock mr-2"></i>
206
- <span>8 weeks • 25-30 min/day</span>
207
  </div>
208
- <div class="flex justify-between items-center">
209
- <span class="text-xl font-bold">$147</span>
210
- <button class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300 btn-primary">
211
- Enroll Now
212
- </button>
213
  </div>
 
 
 
214
  </div>
215
  </div>
216
 
217
- <!-- Program 3 -->
218
- <div class="bg-white rounded-xl shadow-md overflow-hidden course-card">
219
- <div class="h-48 bg-gradient-to-r from-amber-500 to-yellow-500 flex items-center justify-center">
220
- <img src="https://images.unsplash.com/photo-1538805060514-97d67c7a1c70?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Man doing advanced yoga" class="w-full h-full object-cover">
221
  </div>
222
  <div class="p-6">
223
  <div class="flex justify-between items-start mb-4">
224
- <h3 class="text-xl font-bold">Titan Protocol</h3>
225
- <span class="bg-yellow-100 text-yellow-800 text-xs font-medium px-2.5 py-0.5 rounded">Advanced</span>
226
- </div>
227
- <p class="text-gray-600 mb-4">Combine yoga with primal movement patterns for ultimate strength and hormonal optimization.</p>
228
- <div class="flex items-center text-gray-500 text-sm mb-4">
229
- <i class="fas fa-clock mr-2"></i>
230
- <span>12 weeks • 35-45 min/day</span>
231
  </div>
232
- <div class="flex justify-between items-center">
233
- <span class="text-xl font-bold">$197</span>
234
- <button class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300 btn-primary">
235
- Enroll Now
236
- </button>
237
  </div>
 
 
 
238
  </div>
239
  </div>
240
  </div>
241
-
242
- <div class="text-center mt-12">
243
- <button class="border border-red-500 text-red-500 hover:bg-red-50 px-6 py-3 rounded-md text-lg font-medium transition duration-300">
244
- <i class="fas fa-list mr-2"></i> View All Programs
245
- </button>
246
- </div>
247
  </div>
248
  </section>
249
 
250
- <!-- Products Section -->
251
- <section id="products" class="py-16 bg-white">
252
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
253
- <div class="text-center mb-16">
254
- <h2 class="text-3xl md:text-4xl font-bold mb-4">Premium <span class="text-red-500">Performance Gear</span></h2>
255
- <p class="text-lg text-gray-600 max-w-3xl mx-auto">Tools to enhance your practice and accelerate results</p>
256
- </div>
257
-
258
- <div class="grid md:grid-cols-3 gap-8">
259
- <!-- Product 1 -->
260
- <div class="bg-gray-50 rounded-xl overflow-hidden shadow-sm">
261
- <div class="h-64 bg-gray-200 flex items-center justify-center">
262
- <img src="https://images.unsplash.com/photo-1595079835353-a269f1a9e944?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Yoga mat" class="w-full h-full object-cover">
263
- </div>
264
- <div class="p-6">
265
- <h3 class="text-xl font-bold mb-2">Primal Mat</h3>
266
- <p class="text-gray-600 mb-4">Non-slip, extra-thick yoga mat designed for stability in all poses.</p>
267
- <div class="flex justify-between items-center">
268
- <span class="text-xl font-bold">$89</span>
269
- <button class="bg-gray-800 hover:bg-black text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300">
270
- Add to Cart
271
- </button>
272
- </div>
273
- </div>
274
- </div>
275
-
276
- <!-- Product 2 -->
277
- <div class="bg-gray-50 rounded-xl overflow-hidden shadow-sm">
278
- <div class="h-64 bg-gray-200 flex items-center justify-center">
279
- <img src="https://images.unsplash.com/photo-1607619056574-7b8d3ee536b2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Essential oils" class="w-full h-full object-cover">
280
- </div>
281
- <div class="p-6">
282
- <h3 class="text-xl font-bold mb-2">TestoBlend Oil</h3>
283
- <p class="text-gray-600 mb-4">Essential oil blend to support hormonal balance and recovery.</p>
284
- <div class="flex justify-between items-center">
285
- <span class="text-xl font-bold">$49</span>
286
- <button class="bg-gray-800 hover:bg-black text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300">
287
- Add to Cart
288
- </button>
289
- </div>
290
- </div>
291
  </div>
292
-
293
- <!-- Product 3 -->
294
- <div class="bg-gray-50 rounded-xl overflow-hidden shadow-sm">
295
- <div class="h-64 bg-gray-200 flex items-center justify-center">
296
- <img src="https://images.unsplash.com/photo-1544947950-fa07a98d237f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Book" class="w-full h-full object-cover">
297
- </div>
298
- <div class="p-6">
299
- <h3 class="text-xl font-bold mb-2">The Lava Codex</h3>
300
- <p class="text-gray-600 mb-4">Comprehensive guide to testosterone-boosting yoga and nutrition.</p>
301
- <div class="flex justify-between items-center">
302
- <span class="text-xl font-bold">$37</span>
303
- <button class="bg-gray-800 hover:bg-black text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300">
304
- Add to Cart
305
- </button>
306
- </div>
307
- </div>
308
  </div>
309
  </div>
310
-
311
- <div class="text-center mt-12">
312
- <button class="border border-gray-800 text-gray-800 hover:bg-gray-100 px-6 py-3 rounded-md text-lg font-medium transition duration-300">
313
- <i class="fas fa-store mr-2"></i> Visit Full Store
314
- </button>
315
- </div>
316
  </div>
317
  </section>
318
 
 
 
319
  <!-- Testimonials Section -->
320
- <section id="testimonials" class="py-16 bg-gray-900 text-white">
321
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
322
  <div class="text-center mb-16">
323
- <h2 class="text-3xl md:text-4xl font-bold mb-4">Real Men, <span class="text-red-400">Real Results</span></h2>
324
- <p class="text-lg text-gray-300 max-w-3xl mx-auto">Hear from men who transformed their lives with Lava Yoga</p>
325
  </div>
326
 
327
  <div class="grid md:grid-cols-3 gap-8">
328
  <!-- Testimonial 1 -->
329
- <div class="bg-gray-800 rounded-xl p-6 testimonial-card">
330
  <div class="flex items-center mb-4">
331
- <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Michael T." class="w-12 h-12 rounded-full object-cover mr-4">
332
  <div>
333
- <h4 class="font-bold">Michael T.</h4>
334
- <div class="flex text-yellow-400">
335
  <i class="fas fa-star"></i>
336
  <i class="fas fa-star"></i>
337
  <i class="fas fa-star"></i>
@@ -340,19 +291,19 @@
340
  </div>
341
  </div>
342
  </div>
343
- <p class="text-gray-300 mb-4">"After just 6 weeks of the Ignite program, my energy levels skyrocketed. My doctor was shocked at my testosterone increase at my annual checkup."</p>
344
- <div class="text-sm text-gray-400">
345
- <i class="fas fa-chart-line mr-2"></i> Testosterone increased by 42%
346
  </div>
347
  </div>
348
 
349
  <!-- Testimonial 2 -->
350
- <div class="bg-gray-800 rounded-xl p-6 testimonial-card">
351
  <div class="flex items-center mb-4">
352
- <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="David R." class="w-12 h-12 rounded-full object-cover mr-4">
353
  <div>
354
- <h4 class="font-bold">David R.</h4>
355
- <div class="flex text-yellow-400">
356
  <i class="fas fa-star"></i>
357
  <i class="fas fa-star"></i>
358
  <i class="fas fa-star"></i>
@@ -361,146 +312,125 @@
361
  </div>
362
  </div>
363
  </div>
364
- <p class="text-gray-300 mb-4">"At 52, I was feeling my age. The Primal Surge program gave me back the vitality I had in my 30s. My wife is thrilled with the changes too!"</p>
365
- <div class="text-sm text-gray-400">
366
- <i class="fas fa-heartbeat mr-2"></i> Energy levels up 68%
367
  </div>
368
  </div>
369
 
370
  <!-- Testimonial 3 -->
371
- <div class="bg-gray-800 rounded-xl p-6 testimonial-card">
372
  <div class="flex items-center mb-4">
373
- <img src="https://images.unsplash.com/photo-1530268729831-4b0b9e170218?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="James K." class="w-12 h-12 rounded-full object-cover mr-4">
374
  <div>
375
- <h4 class="font-bold">James K.</h4>
376
- <div class="flex text-yellow-400">
377
- <i class="fas fa-star"></i>
378
  <i class="fas fa-star"></i>
379
  <i class="fas fa-star"></i>
380
  <i class="fas fa-star"></i>
381
  <i class="fas fa-star"></i>
 
382
  </div>
383
  </div>
384
  </div>
385
- <p class="text-gray-300 mb-4">"The Titan Protocol completely changed my physique. I gained lean muscle while becoming more flexible than ever. The perfect combo for martial arts."</p>
386
- <div class="text-sm text-gray-400">
387
- <i class="fas fa-weight-hanging mr-2"></i> Gained 8lbs muscle in 12 weeks
388
  </div>
389
  </div>
390
  </div>
391
  </div>
392
  </section>
393
 
394
- <!-- About Section -->
395
- <section id="about" class="py-16 bg-gray-50">
396
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
397
- <div class="md:flex md:items-center md:space-x-12">
398
- <div class="md:w-1/2 mb-10 md:mb-0">
399
- <img src="https://images.unsplash.com/photo-1583864697781-a880de37c988?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Founder" class="rounded-lg shadow-lg w-full">
400
- </div>
401
- <div class="md:w-1/2">
402
- <h2 class="text-3xl md:text-4xl font-bold mb-6">Our <span class="text-red-500">Philosophy</span></h2>
403
- <p class="text-lg text-gray-600 mb-6">Lava Yoga was founded by former professional athlete Marcus Kane after a career-ending injury left him with plummeting testosterone levels and chronic pain.</p>
404
- <p class="text-lg text-gray-600 mb-6">Through years of research and practice, Marcus developed a unique system combining ancient yoga wisdom with modern sports science to naturally optimize male hormones.</p>
405
- <p class="text-lg text-gray-600 mb-8">Our mission is to help men reclaim their vitality, strength, and masculine energy through targeted movement, breathwork, and mindset practices.</p>
406
- <button class="bg-red-500 hover:bg-red-600 text-white px-6 py-3 rounded-md text-lg font-medium transition duration-300 btn-primary">
407
- <i class="fas fa-play mr-2"></i> Watch Our Story
408
- </button>
409
- </div>
410
- </div>
411
- </div>
412
- </section>
413
 
414
  <!-- CTA Section -->
415
- <section class="py-16 bg-gradient-to-r from-red-500 to-orange-500 text-white">
416
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
417
- <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to <span class="text-gray-900">Ignite Your Potential</span>?</h2>
418
- <p class="text-xl mb-8 max-w-3xl mx-auto">Join thousands of men who have transformed their health, hormones, and lives with Lava Yoga.</p>
419
  <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6">
420
- <button class="bg-white hover:bg-gray-100 text-red-600 px-8 py-4 rounded-md text-lg font-bold transition duration-300">
421
- <i class="fas fa-play-circle mr-2"></i> Start 7-Day Free Trial
422
  </button>
423
- <button class="border-2 border-white hover:bg-white hover:text-red-600 text-white px-8 py-4 rounded-md text-lg font-bold transition duration-300">
424
- <i class="fas fa-comment-dots mr-2"></i> Book Consultation
425
  </button>
426
  </div>
427
  </div>
428
  </section>
429
 
430
  <!-- Contact Section -->
431
- <section id="contact" class="py-16 bg-white">
432
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
433
  <div class="text-center mb-16">
434
- <h2 class="text-3xl md:text-4xl font-bold mb-4">Get In <span class="text-red-500">Touch</span></h2>
435
- <p class="text-lg text-gray-600 max-w-3xl mx-auto">Have questions? Our team is here to help you on your journey.</p>
436
  </div>
437
 
438
  <div class="grid md:grid-cols-2 gap-12">
439
  <div>
440
  <form>
441
  <div class="mb-6">
442
- <label for="name" class="block text-sm font-medium text-gray-700 mb-2">Full Name</label>
443
- <input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:ring-red-500 focus:border-red-500" placeholder="John Smith">
444
  </div>
445
  <div class="mb-6">
446
- <label for="email" class="block text-sm font-medium text-gray-700 mb-2">Email Address</label>
447
- <input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:ring-red-500 focus:border-red-500" placeholder="john@example.com">
448
  </div>
449
  <div class="mb-6">
450
- <label for="message" class="block text-sm font-medium text-gray-700 mb-2">Your Message</label>
451
- <textarea id="message" rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:ring-red-500 focus:border-red-500" placeholder="How can we help you?"></textarea>
452
  </div>
453
- <button type="submit" class="w-full bg-red-500 hover:bg-red-600 text-white px-6 py-3 rounded-md text-lg font-medium transition duration-300 btn-primary">
454
  Send Message
455
  </button>
456
  </form>
457
  </div>
458
  <div>
459
- <div class="bg-gray-50 p-8 rounded-xl h-full">
460
- <h3 class="text-xl font-bold mb-6">Contact Information</h3>
461
  <div class="space-y-6">
462
  <div class="flex items-start">
463
  <div class="flex-shrink-0">
464
- <i class="fas fa-map-marker-alt text-red-500 text-xl mt-1"></i>
465
  </div>
466
  <div class="ml-4">
467
- <h4 class="text-lg font-medium text-gray-900">Location</h4>
468
- <p class="text-gray-600">123 Warrior Way<br>Boulder, CO 80301</p>
469
  </div>
470
  </div>
471
  <div class="flex items-start">
472
  <div class="flex-shrink-0">
473
- <i class="fas fa-envelope text-red-500 text-xl mt-1"></i>
474
  </div>
475
  <div class="ml-4">
476
- <h4 class="text-lg font-medium text-gray-900">Email</h4>
477
- <p class="text-gray-600">support@lavayoga.com</p>
478
  </div>
479
  </div>
480
  <div class="flex items-start">
481
  <div class="flex-shrink-0">
482
- <i class="fas fa-phone-alt text-red-500 text-xl mt-1"></i>
483
  </div>
484
  <div class="ml-4">
485
- <h4 class="text-lg font-medium text-gray-900">Phone</h4>
486
- <p class="text-gray-600">(720) 555-0123</p>
487
  </div>
488
  </div>
489
  </div>
490
  <div class="mt-8">
491
- <h4 class="text-lg font-medium text-gray-900 mb-4">Follow Us</h4>
492
- <div class="flex space-x-4">
493
- <a href="#" class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-700 hover:bg-red-500 hover:text-white transition duration-300">
494
  <i class="fab fa-instagram"></i>
495
  </a>
496
- <a href="#" class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-700 hover:bg-red-500 hover:text-white transition duration-300">
497
- <i class="fab fa-facebook-f"></i>
498
- </a>
499
- <a href="#" class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-700 hover:bg-red-500 hover:text-white transition duration-300">
500
  <i class="fab fa-youtube"></i>
501
  </a>
502
- <a href="#" class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-700 hover:bg-red-500 hover:text-white transition duration-300">
503
- <i class="fab fa-twitter"></i>
504
  </a>
505
  </div>
506
  </div>
@@ -511,61 +441,50 @@
511
  </section>
512
 
513
  <!-- Footer -->
514
- <footer class="bg-gray-900 text-white py-12">
515
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
516
  <div class="grid md:grid-cols-4 gap-8">
517
  <div>
518
  <div class="flex items-center mb-4">
519
- <div class="masculine-icon mr-3">
520
- <i class="fas fa-fire text-xl"></i>
521
- </div>
522
- <span class="text-xl font-bold">LAVA YOGA</span>
523
  </div>
524
- <p class="text-gray-400">Testosterone-optimizing yoga programs designed specifically for men.</p>
525
  </div>
526
  <div>
527
- <h4 class="text-lg font-bold mb-4">Programs</h4>
528
  <ul class="space-y-2">
529
- <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Ignite Foundation</a></li>
530
- <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Primal Surge</a></li>
531
- <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Titan Protocol</a></li>
532
- <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Corporate Programs</a></li>
533
  </ul>
534
  </div>
535
  <div>
536
- <h4 class="text-lg font-bold mb-4">Resources</h4>
537
  <ul class="space-y-2">
538
- <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Testosterone Guide</a></li>
539
- <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Blog</a></li>
540
- <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Research</a></li>
541
- <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">FAQs</a></li>
542
  </ul>
543
  </div>
544
  <div>
545
- <h4 class="text-lg font-bold mb-4">Legal</h4>
546
  <ul class="space-y-2">
547
- <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Terms of Service</a></li>
548
- <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Privacy Policy</a></li>
549
- <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Refund Policy</a></li>
550
- <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Medical Disclaimer</a></li>
551
  </ul>
552
  </div>
553
  </div>
554
- <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
555
- <p class="text-gray-400 mb-4 md:mb-0">© 2023 Lava Yoga. All rights reserved.</p>
556
- <div class="flex space-x-6">
557
- <a href="#" class="text-gray-400 hover:text-white transition duration-300">
558
- <i class="fab fa-cc-visa text-2xl"></i>
559
- </a>
560
- <a href="#" class="text-gray-400 hover:text-white transition duration-300">
561
- <i class="fab fa-cc-mastercard text-2xl"></i>
562
- </a>
563
- <a href="#" class="text-gray-400 hover:text-white transition duration-300">
564
- <i class="fab fa-cc-amex text-2xl"></i>
565
- </a>
566
- <a href="#" class="text-gray-400 hover:text-white transition duration-300">
567
- <i class="fab fa-cc-paypal text-2xl"></i>
568
- </a>
569
  </div>
570
  </div>
571
  </div>
@@ -577,17 +496,16 @@
577
  const mobileMenuButton = document.querySelector('button[aria-controls="mobile-menu"]');
578
  const mobileMenu = document.createElement('div');
579
  mobileMenu.id = 'mobile-menu';
580
- mobileMenu.className = 'hidden md:hidden bg-white shadow-lg';
581
  mobileMenu.innerHTML = `
582
  <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
583
- <a href="#home" class="block px-3 py-2 text-base font-medium text-gray-900 hover:bg-gray-100">Home</a>
584
- <a href="#programs" class="block px-3 py-2 text-base font-medium text-gray-900 hover:bg-gray-100">Programs</a>
585
- <a href="#products" class="block px-3 py-2 text-base font-medium text-gray-900 hover:bg-gray-100">Products</a>
586
- <a href="#testimonials" class="block px-3 py-2 text-base font-medium text-gray-900 hover:bg-gray-100">Results</a>
587
- <a href="#about" class="block px-3 py-2 text-base font-medium text-gray-900 hover:bg-gray-100">About</a>
588
- <a href="#contact" class="block px-3 py-2 text-base font-medium text-gray-900 hover:bg-gray-100">Contact</a>
589
- <button class="w-full text-left px-3 py-2 text-base font-medium text-red-600 hover:bg-red-50">
590
- <i class="fas fa-lock mr-1"></i> Member Login
591
  </button>
592
  </div>
593
  `;
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Serene Flow | Mindful Yoga for Men</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ bamboo: {
15
+ 50: '#f8f5f0',
16
+ 100: '#e8e0d1',
17
+ 200: '#d8cbb3',
18
+ 300: '#c0b28a',
19
+ 400: '#a8996a',
20
+ 500: '#8f8252',
21
+ 600: '#756a43',
22
+ 700: '#5c5335',
23
+ 800: '#433d27',
24
+ 900: '#2a271a',
25
+ },
26
+ stone: {
27
+ 50: '#f5f5f4',
28
+ 100: '#e7e5e4',
29
+ 200: '#d6d3d1',
30
+ 300: '#a8a29e',
31
+ 400: '#78716c',
32
+ 500: '#57534e',
33
+ 600: '#44403c',
34
+ 700: '#292524',
35
+ 800: '#1c1917',
36
+ 900: '#0c0a09',
37
+ }
38
+ },
39
+ fontFamily: {
40
+ sans: ['"Noto Sans"', 'sans-serif'],
41
+ serif: ['"Noto Serif"', 'serif'],
42
+ }
43
+ }
44
+ }
45
+ }
46
+ </script>
47
  <style>
48
+ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;600&family=Noto+Serif:wght@400;500;600&display=swap');
49
 
50
  body {
51
+ font-family: 'Noto Sans', sans-serif;
52
+ background-color: #f8f5f0;
53
+ color: #292524;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
54
  }
55
 
56
  .nav-link {
 
61
  content: '';
62
  position: absolute;
63
  width: 0;
64
+ height: 1px;
65
  bottom: -2px;
66
  left: 0;
67
+ background-color: #8f8252;
68
  transition: width 0.3s ease;
69
  }
70
 
 
72
  width: 100%;
73
  }
74
 
75
+ .btn {
76
  transition: all 0.3s ease;
77
+ letter-spacing: 0.5px;
78
  }
79
 
80
+ .btn:hover {
81
+ transform: translateY(-1px);
 
82
  }
83
 
84
+ .section-divider {
85
+ height: 1px;
86
+ background: linear-gradient(90deg, rgba(143,130,82,0) 0%, rgba(143,130,82,0.3) 50%, rgba(143,130,82,0) 100%);
87
+ }
88
+
89
+ .testimonial-card {
90
+ transition: all 0.3s ease;
91
+ }
92
+
93
+ .testimonial-card:hover {
94
+ transform: translateY(-3px);
95
+ }
96
+
97
+ .course-card {
98
+ transition: all 0.3s ease;
99
+ }
100
+
101
+ .course-card:hover {
102
+ transform: translateY(-3px);
103
+ }
104
+
105
+ .breathing-animation {
106
+ animation: breathe 8s infinite ease-in-out;
107
+ }
108
+
109
+ @keyframes breathe {
110
+ 0%, 100% { transform: scale(1); }
111
+ 50% { transform: scale(1.03); }
112
  }
113
  </style>
114
  </head>
115
+ <body class="antialiased">
116
  <!-- Navigation -->
117
+ <nav class="bg-bamboo-50 fixed w-full z-10">
118
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
119
+ <div class="flex justify-between h-20 items-center">
120
  <div class="flex items-center">
121
  <div class="flex-shrink-0 flex items-center">
122
+ <i class="fas fa-leaf text-bamboo-500 text-xl mr-2"></i>
123
+ <span class="text-xl font-serif font-medium text-stone-700">Serene Flow</span>
 
 
124
  </div>
125
  </div>
126
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-6">
127
+ <a href="#home" class="nav-link px-3 py-2 text-sm font-medium text-stone-700">Home</a>
128
+ <a href="#practice" class="nav-link px-3 py-2 text-sm font-medium text-stone-700">Practice</a>
129
+ <a href="#philosophy" class="nav-link px-3 py-2 text-sm font-medium text-stone-700">Philosophy</a>
130
+ <a href="#testimonials" class="nav-link px-3 py-2 text-sm font-medium text-stone-700">Experiences</a>
131
+ <a href="#contact" class="nav-link px-3 py-2 text-sm font-medium text-stone-700">Connect</a>
132
+ <button class="border border-bamboo-500 text-bamboo-600 hover:bg-bamboo-100 px-4 py-2 rounded-sm text-sm font-medium btn">
133
+ Begin Journey
 
134
  </button>
135
  </div>
136
  <div class="-mr-2 flex items-center md:hidden">
137
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-sm text-stone-500 hover:text-stone-700 hover:bg-bamboo-100 focus:outline-none" aria-controls="mobile-menu" aria-expanded="false">
138
+ <span class="sr-only">Open menu</span>
139
  <i class="fas fa-bars"></i>
140
  </button>
141
  </div>
 
144
  </nav>
145
 
146
  <!-- Hero Section -->
147
+ <section id="home" class="pt-24 pb-16 md:pt-28 md:pb-20 bg-bamboo-50">
148
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
149
  <div class="md:flex md:items-center md:justify-between">
150
+ <div class="md:w-1/2 mb-12 md:mb-0">
151
+ <h1 class="text-3xl md:text-4xl font-serif font-medium leading-tight mb-6 text-stone-800">Cultivate <span class="text-bamboo-600">Strength</span> Through Stillness</h1>
152
+ <p class="text-lg text-stone-600 mb-8">A mindful approach to yoga that honors masculine energy while fostering deep peace and resilience.</p>
153
  <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
154
+ <button class="bg-bamboo-500 hover:bg-bamboo-600 text-white px-6 py-3 rounded-sm text-sm font-medium btn">
155
+ <i class="fas fa-seedling mr-2"></i> Start Your Practice
156
  </button>
157
+ <button class="border border-bamboo-500 text-bamboo-600 hover:bg-bamboo-100 px-6 py-3 rounded-sm text-sm font-medium btn">
158
+ <i class="fas fa-water mr-2"></i> Learn More
159
  </button>
160
  </div>
161
  </div>
162
+ <div class="md:w-1/2 flex justify-center breathing-animation">
163
+ <img src="https://images.unsplash.com/photo-1545389336-cf090694435e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1364&q=80" alt="Man meditating in nature" class="rounded-sm shadow-sm w-full max-w-md object-cover h-96">
164
  </div>
165
  </div>
166
  </div>
167
  </section>
168
 
169
+ <div class="section-divider my-12"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
170
 
171
+ <!-- Practice Section -->
172
+ <section id="practice" class="py-16 bg-bamboo-50">
173
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
174
  <div class="text-center mb-16">
175
+ <h2 class="text-2xl md:text-3xl font-serif font-medium mb-4 text-stone-800">The <span class="text-bamboo-600">Pathways</span> of Practice</h2>
176
+ <p class="text-stone-600 max-w-3xl mx-auto">Choose the approach that resonates with your current season of life</p>
177
  </div>
178
 
179
  <div class="grid md:grid-cols-3 gap-8">
180
+ <!-- Practice 1 -->
181
+ <div class="bg-white rounded-sm shadow-sm overflow-hidden course-card border border-bamboo-100">
182
+ <div class="h-48 bg-bamboo-100 flex items-center justify-center">
183
+ <img src="https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1520&q=80" alt="Morning practice" class="w-full h-full object-cover opacity-90">
184
  </div>
185
  <div class="p-6">
186
  <div class="flex justify-between items-start mb-4">
187
+ <h3 class="text-lg font-serif font-medium text-stone-800">Dawn Flow</h3>
188
+ <span class="bg-bamboo-50 text-bamboo-600 text-xs font-medium px-2 py-0.5 rounded-sm">Gentle</span>
189
  </div>
190
+ <p class="text-stone-600 text-sm mb-4">Morning sequences to awaken the body with grace and set intention for the day.</p>
191
+ <div class="flex items-center text-stone-500 text-xs mb-4">
192
+ <i class="fas fa-sun mr-2"></i>
193
+ <span>15-20 min • Rise with the sun</span>
 
 
 
 
 
 
194
  </div>
195
+ <button class="w-full border border-bamboo-500 text-bamboo-600 hover:bg-bamboo-100 px-4 py-2 rounded-sm text-xs font-medium btn">
196
+ Explore
197
+ </button>
198
  </div>
199
  </div>
200
 
201
+ <!-- Practice 2 -->
202
+ <div class="bg-white rounded-sm shadow-sm overflow-hidden course-card border border-bamboo-100">
203
+ <div class="h-48 bg-bamboo-100 flex items-center justify-center">
204
+ <img src="https://images.unsplash.com/photo-1541577141970-eebc83ebe30c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Strength practice" class="w-full h-full object-cover opacity-90">
205
  </div>
206
  <div class="p-6">
207
  <div class="flex justify-between items-start mb-4">
208
+ <h3 class="text-lg font-serif font-medium text-stone-800">Mountain Form</h3>
209
+ <span class="bg-bamboo-50 text-bamboo-600 text-xs font-medium px-2 py-0.5 rounded-sm">Steady</span>
 
 
 
 
 
210
  </div>
211
+ <p class="text-stone-600 text-sm mb-4">Build resilient strength through grounded postures and mindful movement.</p>
212
+ <div class="flex items-center text-stone-500 text-xs mb-4">
213
+ <i class="fas fa-mountain mr-2"></i>
214
+ <span>25-30 min • Foundational</span>
 
215
  </div>
216
+ <button class="w-full border border-bamboo-500 text-bamboo-600 hover:bg-bamboo-100 px-4 py-2 rounded-sm text-xs font-medium btn">
217
+ Explore
218
+ </button>
219
  </div>
220
  </div>
221
 
222
+ <!-- Practice 3 -->
223
+ <div class="bg-white rounded-sm shadow-sm overflow-hidden course-card border border-bamboo-100">
224
+ <div class="h-48 bg-bamboo-100 flex items-center justify-center">
225
+ <img src="https://images.unsplash.com/photo-1548602088-819d0b587552?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Evening practice" class="w-full h-full object-cover opacity-90">
226
  </div>
227
  <div class="p-6">
228
  <div class="flex justify-between items-start mb-4">
229
+ <h3 class="text-lg font-serif font-medium text-stone-800">Twilight Release</h3>
230
+ <span class="bg-bamboo-50 text-bamboo-600 text-xs font-medium px-2 py-0.5 rounded-sm">Restorative</span>
 
 
 
 
 
231
  </div>
232
+ <p class="text-stone-600 text-sm mb-4">Evening rituals to unwind the nervous system and prepare for deep rest.</p>
233
+ <div class="flex items-center text-stone-500 text-xs mb-4">
234
+ <i class="fas fa-moon mr-2"></i>
235
+ <span>20-25 min • Wind down</span>
 
236
  </div>
237
+ <button class="w-full border border-bamboo-500 text-bamboo-600 hover:bg-bamboo-100 px-4 py-2 rounded-sm text-xs font-medium btn">
238
+ Explore
239
+ </button>
240
  </div>
241
  </div>
242
  </div>
 
 
 
 
 
 
243
  </div>
244
  </section>
245
 
246
+ <div class="section-divider my-12"></div>
247
+
248
+ <!-- Philosophy Section -->
249
+ <section id="philosophy" class="py-16 bg-bamboo-50">
250
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
251
+ <div class="md:flex md:items-center md:space-x-12">
252
+ <div class="md:w-1/2 mb-12 md:mb-0">
253
+ <img src="https://images.unsplash.com/photo-1518611012118-696072aa579a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Bamboo forest" class="rounded-sm shadow-sm w-full object-cover h-96">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
254
  </div>
255
+ <div class="md:w-1/2">
256
+ <h2 class="text-2xl md:text-3xl font-serif font-medium mb-6 text-stone-800">Rooted in <span class="text-bamboo-600">Stillness</span>, Growing in Strength</h2>
257
+ <p class="text-stone-600 mb-6">Like bamboo that bends but does not break, our practice cultivates resilience through mindful movement and conscious breath.</p>
258
+ <p class="text-stone-600 mb-6">We honor the masculine journey - not through force, but through presence; not through tension, but through balanced effort.</p>
259
+ <p class="text-stone-600 mb-8">This is yoga that respects your nature while guiding you toward greater harmony within yourself and with the world around you.</p>
260
+ <button class="border border-bamboo-500 text-bamboo-600 hover:bg-bamboo-100 px-6 py-3 rounded-sm text-sm font-medium btn">
261
+ <i class="fas fa-book-open mr-2"></i> Read Our Philosophy
262
+ </button>
 
 
 
 
 
 
 
 
263
  </div>
264
  </div>
 
 
 
 
 
 
265
  </div>
266
  </section>
267
 
268
+ <div class="section-divider my-12"></div>
269
+
270
  <!-- Testimonials Section -->
271
+ <section id="testimonials" class="py-16 bg-bamboo-50">
272
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
273
  <div class="text-center mb-16">
274
+ <h2 class="text-2xl md:text-3xl font-serif font-medium mb-4 text-stone-800">Voices of <span class="text-bamboo-600">Transformation</span></h2>
275
+ <p class="text-stone-600 max-w-3xl mx-auto">Hear from men who have found balance through this practice</p>
276
  </div>
277
 
278
  <div class="grid md:grid-cols-3 gap-8">
279
  <!-- Testimonial 1 -->
280
+ <div class="bg-white rounded-sm shadow-sm p-6 testimonial-card border border-bamboo-100">
281
  <div class="flex items-center mb-4">
282
+ <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Michael" class="w-12 h-12 rounded-sm object-cover mr-4">
283
  <div>
284
+ <h4 class="font-medium text-stone-800">Michael</h4>
285
+ <div class="flex text-bamboo-400 text-xs">
286
  <i class="fas fa-star"></i>
287
  <i class="fas fa-star"></i>
288
  <i class="fas fa-star"></i>
 
291
  </div>
292
  </div>
293
  </div>
294
+ <p class="text-stone-600 text-sm mb-4 italic">"After years of high-intensity training, Serene Flow taught me the power of moving with awareness. My chronic back pain has disappeared and I feel stronger than ever."</p>
295
+ <div class="text-xs text-stone-500">
296
+ <i class="fas fa-leaf mr-2"></i> Practicing for 8 months
297
  </div>
298
  </div>
299
 
300
  <!-- Testimonial 2 -->
301
+ <div class="bg-white rounded-sm shadow-sm p-6 testimonial-card border border-bamboo-100">
302
  <div class="flex items-center mb-4">
303
+ <img src="https://images.unsplash.com/photo-1530268729831-4b0b9e170218?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="James" class="w-12 h-12 rounded-sm object-cover mr-4">
304
  <div>
305
+ <h4 class="font-medium text-stone-800">James</h4>
306
+ <div class="flex text-bamboo-400 text-xs">
307
  <i class="fas fa-star"></i>
308
  <i class="fas fa-star"></i>
309
  <i class="fas fa-star"></i>
 
312
  </div>
313
  </div>
314
  </div>
315
+ <p class="text-stone-600 text-sm mb-4 italic">"As a CEO, I needed tools to manage stress without losing my edge. The breathing techniques alone have transformed how I show up in meetings and make decisions."</p>
316
+ <div class="text-xs text-stone-500">
317
+ <i class="fas fa-leaf mr-2"></i> Practicing for 1 year
318
  </div>
319
  </div>
320
 
321
  <!-- Testimonial 3 -->
322
+ <div class="bg-white rounded-sm shadow-sm p-6 testimonial-card border border-bamboo-100">
323
  <div class="flex items-center mb-4">
324
+ <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="David" class="w-12 h-12 rounded-sm object-cover mr-4">
325
  <div>
326
+ <h4 class="font-medium text-stone-800">David</h4>
327
+ <div class="flex text-bamboo-400 text-xs">
 
328
  <i class="fas fa-star"></i>
329
  <i class="fas fa-star"></i>
330
  <i class="fas fa-star"></i>
331
  <i class="fas fa-star"></i>
332
+ <i class="fas fa-star-half-alt"></i>
333
  </div>
334
  </div>
335
  </div>
336
+ <p class="text-stone-600 text-sm mb-4 italic">"I came to yoga skeptical it could be masculine. The Mountain Form practice showed me true strength comes from stability and presence, not just muscle."</p>
337
+ <div class="text-xs text-stone-500">
338
+ <i class="fas fa-leaf mr-2"></i> Practicing for 5 months
339
  </div>
340
  </div>
341
  </div>
342
  </div>
343
  </section>
344
 
345
+ <div class="section-divider my-12"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
346
 
347
  <!-- CTA Section -->
348
+ <section class="py-16 bg-bamboo-800 text-white">
349
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
350
+ <h2 class="text-2xl md:text-3xl font-serif font-medium mb-6">Begin Your <span class="text-bamboo-200">Journey</span> Today</h2>
351
+ <p class="text-bamboo-100 mb-8 max-w-3xl mx-auto">Join our community of men discovering strength through mindful movement and conscious breath.</p>
352
  <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6">
353
+ <button class="bg-white hover:bg-bamboo-50 text-bamboo-700 px-8 py-3 rounded-sm text-sm font-medium btn">
354
+ <i class="fas fa-seedling mr-2"></i> Start 7-Day Practice
355
  </button>
356
+ <button class="border border-white hover:bg-bamboo-700 text-white px-8 py-3 rounded-sm text-sm font-medium btn">
357
+ <i class="fas fa-comment mr-2"></i> Speak With a Guide
358
  </button>
359
  </div>
360
  </div>
361
  </section>
362
 
363
  <!-- Contact Section -->
364
+ <section id="contact" class="py-16 bg-bamboo-50">
365
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
366
  <div class="text-center mb-16">
367
+ <h2 class="text-2xl md:text-3xl font-serif font-medium mb-4 text-stone-800">Connect <span class="text-bamboo-600">With Us</span></h2>
368
+ <p class="text-stone-600 max-w-3xl mx-auto">We're here to support your practice and answer any questions</p>
369
  </div>
370
 
371
  <div class="grid md:grid-cols-2 gap-12">
372
  <div>
373
  <form>
374
  <div class="mb-6">
375
+ <label for="name" class="block text-sm font-medium text-stone-700 mb-2">Name</label>
376
+ <input type="text" id="name" class="w-full px-4 py-2 border border-bamboo-200 rounded-sm focus:ring-bamboo-500 focus:border-bamboo-500 bg-white" placeholder="Your name">
377
  </div>
378
  <div class="mb-6">
379
+ <label for="email" class="block text-sm font-medium text-stone-700 mb-2">Email</label>
380
+ <input type="email" id="email" class="w-full px-4 py-2 border border-bamboo-200 rounded-sm focus:ring-bamboo-500 focus:border-bamboo-500 bg-white" placeholder="your@email.com">
381
  </div>
382
  <div class="mb-6">
383
+ <label for="message" class="block text-sm font-medium text-stone-700 mb-2">Message</label>
384
+ <textarea id="message" rows="4" class="w-full px-4 py-2 border border-bamboo-200 rounded-sm focus:ring-bamboo-500 focus:border-bamboo-500 bg-white" placeholder="How can we help you?"></textarea>
385
  </div>
386
+ <button type="submit" class="w-full bg-bamboo-500 hover:bg-bamboo-600 text-white px-6 py-3 rounded-sm text-sm font-medium btn">
387
  Send Message
388
  </button>
389
  </form>
390
  </div>
391
  <div>
392
+ <div class="bg-white p-8 rounded-sm shadow-sm h-full border border-bamboo-100">
393
+ <h3 class="text-lg font-serif font-medium mb-6 text-stone-800">Contact Information</h3>
394
  <div class="space-y-6">
395
  <div class="flex items-start">
396
  <div class="flex-shrink-0">
397
+ <i class="fas fa-map-marker-alt text-bamboo-500 mt-1"></i>
398
  </div>
399
  <div class="ml-4">
400
+ <h4 class="text-sm font-medium text-stone-800">Location</h4>
401
+ <p class="text-stone-600 text-sm">123 Peaceful Path<br>Portland, OR 97201</p>
402
  </div>
403
  </div>
404
  <div class="flex items-start">
405
  <div class="flex-shrink-0">
406
+ <i class="fas fa-envelope text-bamboo-500 mt-1"></i>
407
  </div>
408
  <div class="ml-4">
409
+ <h4 class="text-sm font-medium text-stone-800">Email</h4>
410
+ <p class="text-stone-600 text-sm">connect@sereneflow.com</p>
411
  </div>
412
  </div>
413
  <div class="flex items-start">
414
  <div class="flex-shrink-0">
415
+ <i class="fas fa-phone-alt text-bamboo-500 mt-1"></i>
416
  </div>
417
  <div class="ml-4">
418
+ <h4 class="text-sm font-medium text-stone-800">Phone</h4>
419
+ <p class="text-stone-600 text-sm">(503) 555-0182</p>
420
  </div>
421
  </div>
422
  </div>
423
  <div class="mt-8">
424
+ <h4 class="text-sm font-medium text-stone-800 mb-4">Follow Our Journey</h4>
425
+ <div class="flex space-x-3">
426
+ <a href="#" class="w-8 h-8 rounded-sm bg-bamboo-50 flex items-center justify-center text-bamboo-500 hover:bg-bamboo-100 transition duration-300">
427
  <i class="fab fa-instagram"></i>
428
  </a>
429
+ <a href="#" class="w-8 h-8 rounded-sm bg-bamboo-50 flex items-center justify-center text-bamboo-500 hover:bg-bamboo-100 transition duration-300">
 
 
 
430
  <i class="fab fa-youtube"></i>
431
  </a>
432
+ <a href="#" class="w-8 h-8 rounded-sm bg-bamboo-50 flex items-center justify-center text-bamboo-500 hover:bg-bamboo-100 transition duration-300">
433
+ <i class="fab fa-spotify"></i>
434
  </a>
435
  </div>
436
  </div>
 
441
  </section>
442
 
443
  <!-- Footer -->
444
+ <footer class="bg-stone-800 text-bamboo-100 py-12">
445
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
446
  <div class="grid md:grid-cols-4 gap-8">
447
  <div>
448
  <div class="flex items-center mb-4">
449
+ <i class="fas fa-leaf text-bamboo-300 text-xl mr-2"></i>
450
+ <span class="text-xl font-serif font-medium">Serene Flow</span>
 
 
451
  </div>
452
+ <p class="text-bamboo-200 text-sm">Mindful yoga practices designed for men seeking strength through stillness.</p>
453
  </div>
454
  <div>
455
+ <h4 class="text-sm font-medium mb-4">Practice</h4>
456
  <ul class="space-y-2">
457
+ <li><a href="#" class="text-bamboo-200 hover:text-white text-sm transition duration-300">Daily Flows</a></li>
458
+ <li><a href="#" class="text-bamboo-200 hover:text-white text-sm transition duration-300">Breathwork</a></li>
459
+ <li><a href="#" class="text-bamboo-200 hover:text-white text-sm transition duration-300">Meditations</a></li>
460
+ <li><a href="#" class="text-bamboo-200 hover:text-white text-sm transition duration-300">Workshops</a></li>
461
  </ul>
462
  </div>
463
  <div>
464
+ <h4 class="text-sm font-medium mb-4">Resources</h4>
465
  <ul class="space-y-2">
466
+ <li><a href="#" class="text-bamboo-200 hover:text-white text-sm transition duration-300">Blog</a></li>
467
+ <li><a href="#" class="text-bamboo-200 hover:text-white text-sm transition duration-300">Research</a></li>
468
+ <li><a href="#" class="text-bamboo-200 hover:text-white text-sm transition duration-300">FAQs</a></li>
469
+ <li><a href="#" class="text-bamboo-200 hover:text-white text-sm transition duration-300">Guides</a></li>
470
  </ul>
471
  </div>
472
  <div>
473
+ <h4 class="text-sm font-medium mb-4">Legal</h4>
474
  <ul class="space-y-2">
475
+ <li><a href="#" class="text-bamboo-200 hover:text-white text-sm transition duration-300">Terms</a></li>
476
+ <li><a href="#" class="text-bamboo-200 hover:text-white text-sm transition duration-300">Privacy</a></li>
477
+ <li><a href="#" class="text-bamboo-200 hover:text-white text-sm transition duration-300">Cookies</a></li>
478
+ <li><a href="#" class="text-bamboo-200 hover:text-white text-sm transition duration-300">Accessibility</a></li>
479
  </ul>
480
  </div>
481
  </div>
482
+ <div class="border-t border-stone-700 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
483
+ <p class="text-bamboo-300 text-xs mb-4 md:mb-0">© 2023 Serene Flow. All rights reserved.</p>
484
+ <div class="flex space-x-4">
485
+ <a href="#" class="text-bamboo-300 hover:text-white text-xs transition duration-300">Privacy Policy</a>
486
+ <a href="#" class="text-bamboo-300 hover:text-white text-xs transition duration-300">Terms of Service</a>
487
+ <a href="#" class="text-bamboo-300 hover:text-white text-xs transition duration-300">Contact</a>
 
 
 
 
 
 
 
 
 
488
  </div>
489
  </div>
490
  </div>
 
496
  const mobileMenuButton = document.querySelector('button[aria-controls="mobile-menu"]');
497
  const mobileMenu = document.createElement('div');
498
  mobileMenu.id = 'mobile-menu';
499
+ mobileMenu.className = 'hidden md:hidden bg-white shadow-lg border-t border-bamboo-100';
500
  mobileMenu.innerHTML = `
501
  <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
502
+ <a href="#home" class="block px-3 py-2 text-base font-medium text-stone-700 hover:bg-bamboo-50">Home</a>
503
+ <a href="#practice" class="block px-3 py-2 text-base font-medium text-stone-700 hover:bg-bamboo-50">Practice</a>
504
+ <a href="#philosophy" class="block px-3 py-2 text-base font-medium text-stone-700 hover:bg-bamboo-50">Philosophy</a>
505
+ <a href="#testimonials" class="block px-3 py-2 text-base font-medium text-stone-700 hover:bg-bamboo-50">Experiences</a>
506
+ <a href="#contact" class="block px-3 py-2 text-base font-medium text-stone-700 hover:bg-bamboo-50">Connect</a>
507
+ <button class="w-full text-left px-3 py-2 text-base font-medium text-bamboo-600 hover:bg-bamboo-50">
508
+ Begin Journey
 
509
  </button>
510
  </div>
511
  `;