Hugging Face's logo

Spaces:
simondev1
/
tm
Running

App Files Community
simondev1 commited on
Commit
2b93051
·
verified ·
1 Parent(s): 8b3b89b

Here’s a structured outline for a homepage for **tm.org** (assuming it’s for **Transcendental Meditation**). This design balances clarity, user engagement, and key information: --- ### **TM.org – Homepage Outline** #### **1. Header (Sticky Navigation Bar)** - **Logo**: TM.org or Transcendental Meditation® logo (links back to homepage) - **Main Menu**: - Home - Learn TM (dropdown: What is TM?, Benefits, How to Learn) - Research & Science - About Us (dropdown: History, Teachers, FAQs) - Events & Courses - Blog/Resources - Contact - **CTA Button**: "Find a Teacher" / "Free Intro Webinar" #### **2. Hero Section (Full-Width Banner)** - **Headline**: "Reduce Stress. Improve Life. Learn Transcendental Meditation®." - **Subheadline**: "A simple, evidence-based technique for clarity, resilience, and inner peace." - **Background**: High-quality image/video of serene meditation or brain activity graphics. - **Primary CTA**: "Watch the Free Intro Video" (button) - **Secondary CTA**: "Find a Local Teacher" (button) #### **3. Benefits Section (Icon Grid or Cards)** - **Title**: "Why Practice TM?" - **Bullet Points** (with icons): - Reduces stress & anxiety - Improves focus & creativity - Backed by 600+ scientific studies - Easy to learn (20 minutes/day) - No apps or gimmicks—just natural relaxation #### **4. Science & Research (Stats/Testimonials)** - **Title**: "Proven by Science, Trusted Worldwide" - **Key Stats**: - "40% reduction in anxiety" (linked to study) - "Used by 10+ million people" - **Testimonial Carousel**: Short quotes from celebrities (e.g., Oprah, Hugh Jackman) or researchers. #### **5. How It Works (3-Step Process)** - **Title**: "Learn TM in 3 Simple Steps" - **Steps**: 1. **Intro Talk**: Free 60-minute webinar. 2. **Personal Instruction**: 1-on-1 session with a certified teacher. 3. **Follow-Up**: Support for lifelong practice. - **CTA**: "See Course Details" #### **6. Teacher/Event Locator (Interactive Tool)** - **Title**: "Find a TM Teacher Near You" - **Search Bar**: By ZIP/country + "Upcoming Events" filter. - **Map**: Interactive pins or list view. #### **7. Media/Recognition Logos** - "Featured in:" [CNN, Harvard Research, TIME, etc.] (logo carousel) #### **8. Blog/Resources Preview** - **Title**: "Explore TM Resources" - **3 Featured Articles**: e.g., "TM for Veterans," "TM vs. Mindfulness," "CEO’s Secret to Productivity." #### **9. Footer** - **Quick Links**: Repeat key nav items. - **Social Media**: Icons + newsletter signup ("Get Tips & Updates"). - **Legal**: Copyright, Privacy Policy, Terms. - **Affiliate Info**: "A non-profit organization" (if applicable). --- ### **Notes for UX/UI**: - **Mobile-Friendly**: Collapsible menu, stacked sections. - **Trust Signals**: Certifications (e.g., "IAYT-approved"), secure checkout for courses. - **Accessibility**: Alt text, readable fonts, contrast. Would you like to emphasize any specific aspect (e.g., celebrity endorsements, global reach)? - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +104 -665
index.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>TM.org - Transcendental Meditation®</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>
@@ -13,106 +13,103 @@
13
  background-position: center;
14
  }
15
 
16
- .testimonial-card {
17
- transition: transform 0.3s ease;
18
- }
19
-
20
- .testimonial-card:hover {
21
  transform: translateY(-5px);
 
22
  }
23
 
24
- .endorsement-logo {
25
- filter: grayscale(100%);
26
- opacity: 0.7;
27
- transition: all 0.3s ease;
28
- }
29
-
30
- .endorsement-logo:hover {
31
- filter: grayscale(0);
32
- opacity: 1;
33
  }
34
 
35
- /* Custom animation for the floating meditation icon */
36
- @keyframes float {
37
- 0% { transform: translateY(0px); }
38
- 50% { transform: translateY(-10px); }
39
- 100% { transform: translateY(0px); }
40
  }
41
 
42
- .floating-icon {
43
- animation: float 3s ease-in-out infinite;
 
 
44
  }
45
  </style>
46
  </head>
47
- <body class="font-sans bg-gray-50">
48
  <!-- Header/Navigation -->
49
  <header class="sticky top-0 z-50 bg-white shadow-md">
50
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
51
  <div class="flex items-center">
52
- <div class="text-2xl font-bold text-indigo-700 mr-10">TM.org</div>
53
- <nav class="hidden md:flex space-x-8">
54
- <a href="#" class="text-gray-700 hover:text-indigo-600 font-medium">Home</a>
55
- <div class="relative group">
56
- <button class="text-gray-700 hover:text-indigo-600 font-medium flex items-center">
57
- Learn TM <i class="fas fa-chevron-down ml-1 text-xs"></i>
58
- </button>
59
- <div class="absolute hidden group-hover:block bg-white shadow-lg rounded-md mt-2 py-2 w-48">
60
- <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-indigo-50 hover:text-indigo-600">What is TM?</a>
61
- <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-indigo-50 hover:text-indigo-600">Benefits</a>
62
- <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-indigo-50 hover:text-indigo-600">How to Learn</a>
63
- </div>
 
64
  </div>
65
- <a href="#" class="text-gray-700 hover:text-indigo-600 font-medium">Research & Science</a>
66
- <div class="relative group">
67
- <button class="text-gray-700 hover:text-indigo-600 font-medium flex items-center">
68
- About Us <i class="fas fa-chevron-down ml-1 text-xs"></i>
69
- </button>
70
- <div class="absolute hidden group-hover:block bg-white shadow-lg rounded-md mt-2 py-2 w-48">
71
- <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-indigo-50 hover:text-indigo-600">History</a>
72
- <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-indigo-50 hover:text-indigo-600">Teachers</a>
73
- <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-indigo-50 hover:text-indigo-600">FAQs</a>
74
- </div>
75
  </div>
76
- <a href="#" class="text-gray-700 hover:text-indigo-600 font-medium">Events & Courses</a>
77
- <a href="#" class="text-gray-700 hover:text-indigo-600 font-medium">Blog</a>
78
- </nav>
79
- </div>
80
- <div class="flex items-center">
81
- <a href="#" class="hidden md:block bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md font-medium transition duration-300">Find a Teacher</a>
82
- <button class="md:hidden text-gray-700" id="mobile-menu-button">
83
- <i class="fas fa-bars text-2xl"></i>
84
- </button>
85
  </div>
 
 
 
 
86
  </div>
87
 
88
  <!-- Mobile menu -->
89
- <div class="md:hidden hidden bg-white shadow-lg" id="mobile-menu">
90
- <div class="px-4 py-3 space-y-3">
91
- <a href="#" class="block text-gray-700 hover:text-indigo-600">Home</a>
92
- <div>
93
- <button class="flex items-center justify-between w-full text-gray-700 hover:text-indigo-600" id="learn-tm-toggle">
94
- Learn TM <i class="fas fa-chevron-down ml-1 text-xs"></i>
95
  </button>
96
- <div class="hidden mt-2 pl-4 space-y-2" id="learn-tm-dropdown">
97
- <a href="#" class="block text-gray-700 hover:text-indigo-600">What is TM?</a>
98
- <a href="#" class="block text-gray-700 hover:text-indigo-600">Benefits</a>
99
- <a href="#" class="block text-gray-700 hover:text-indigo-600">How to Learn</a>
100
  </div>
101
  </div>
102
- <a href="#" class="block text-gray-700 hover:text-indigo-600">Research & Science</a>
103
- <div>
104
- <button class="flex items-center justify-between w-full text-gray-700 hover:text-indigo-600" id="about-us-toggle">
105
- About Us <i class="fas fa-chevron-down ml-1 text-xs"></i>
106
  </button>
107
- <div class="hidden mt-2 pl-4 space-y-2" id="about-us-dropdown">
108
- <a href="#" class="block text-gray-700 hover:text-indigo-600">History</a>
109
- <a href="#" class="block text-gray-700 hover:text-indigo-600">Teachers</a>
110
- <a href="#" class="block text-gray-700 hover:text-indigo-600">FAQs</a>
111
  </div>
112
  </div>
113
- <a href="#" class="block text-gray-700 hover:text-indigo-600">Events & Courses</a>
114
- <a href="#" class="block text-gray-700 hover:text-indigo-600">Blog</a>
115
- <a href="#" class="block bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md font-medium text-center">Find a Teacher</a>
 
116
  </div>
117
  </div>
118
  </header>
@@ -121,628 +118,70 @@
121
  <section class="hero-bg text-white py-20 md:py-32">
122
  <div class="container mx-auto px-4 text-center">
123
  <h1 class="text-4xl md:text-5xl font-bold mb-4">Reduce Stress. Improve Life.</h1>
124
- <h2 class="text-2xl md:text-3xl mb-8">Learn Transcendental Meditation®</h2>
125
  <p class="text-xl mb-10 max-w-2xl mx-auto">A simple, evidence-based technique for clarity, resilience, and inner peace.</p>
126
  <div class="flex flex-col sm:flex-row justify-center gap-4">
127
  <a href="#" class="bg-indigo-600 hover:bg-indigo-700 text-white px-8 py-3 rounded-md font-medium text-lg transition duration-300">Watch the Free Intro Video</a>
128
  <a href="#" class="bg-white hover:bg-gray-100 text-indigo-600 px-8 py-3 rounded-md font-medium text-lg transition duration-300">Find a Local Teacher</a>
129
  </div>
130
-
131
- <!-- Floating meditation icon -->
132
- <div class="mt-16 floating-icon">
133
- <i class="fas fa-spa text-4xl text-white opacity-70"></i>
134
- </div>
135
  </div>
136
  </section>
137
 
138
  <!-- Benefits Section -->
139
- <section class="py-16 bg-white">
140
  <div class="container mx-auto px-4">
141
  <h2 class="text-3xl font-bold text-center mb-12">Why Practice TM?</h2>
142
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
143
- <div class="bg-gray-50 p-6 rounded-lg text-center hover:shadow-lg transition duration-300">
 
144
  <div class="text-indigo-600 mb-4">
145
- <i class="fas fa-heart text-4xl"></i>
146
  </div>
147
- <h3 class="text-xl font-semibold mb-2">Reduces Stress & Anxiety</h3>
148
- <p class="text-gray-600">Experience deep relaxation that dissolves stress and promotes calmness.</p>
149
  </div>
150
- <div class="bg-gray-50 p-6 rounded-lg text-center hover:shadow-lg transition duration-300">
 
 
151
  <div class="text-indigo-600 mb-4">
152
  <i class="fas fa-brain text-4xl"></i>
153
  </div>
154
- <h3 class="text-xl font-semibold mb-2">Improves Focus & Creativity</h3>
155
- <p class="text-gray-600">Enhance cognitive function and unlock your creative potential.</p>
156
  </div>
157
- <div class="bg-gray-50 p-6 rounded-lg text-center hover:shadow-lg transition duration-300">
 
 
158
  <div class="text-indigo-600 mb-4">
159
  <i class="fas fa-flask text-4xl"></i>
160
  </div>
161
- <h3 class="text-xl font-semibold mb-2">Backed by Science</h3>
162
- <p class="text-gray-600">Supported by 600+ scientific studies validating its effectiveness.</p>
163
  </div>
164
- <div class="bg-gray-50 p-6 rounded-lg text-center hover:shadow-lg transition duration-300">
 
 
165
  <div class="text-indigo-600 mb-4">
166
  <i class="fas fa-clock text-4xl"></i>
167
  </div>
168
- <h3 class="text-xl font-semibold mb-2">Easy to Learn</h3>
169
- <p class="text-gray-600">Just 20 minutes a day with no apps or gimmicks—just natural relaxation.</p>
170
- </div>
171
- </div>
172
- </div>
173
- </section>
174
-
175
- <!-- Science & Research Section -->
176
- <section class="py-16 bg-indigo-50">
177
- <div class="container mx-auto px-4">
178
- <h2 class="text-3xl font-bold text-center mb-12">Proven by Science, Trusted Worldwide</h2>
179
-
180
- <div class="flex flex-col lg:flex-row items-center gap-12 mb-16">
181
- <div class="lg:w-1/2">
182
- <div class="bg-white p-8 rounded-lg shadow-md">
183
- <div class="flex items-center mb-4">
184
- <div class="text-indigo-600 mr-4">
185
- <i class="fas fa-chart-line text-3xl"></i>
186
- </div>
187
- <h3 class="text-xl font-semibold">40% Reduction in Anxiety</h3>
188
- </div>
189
- <p class="text-gray-600 mb-4">A study published in the Journal of Clinical Psychology found that TM practitioners experienced a 40% reduction in anxiety symptoms compared to control groups.</p>
190
- <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium">Read the Study →</a>
191
- </div>
192
- </div>
193
- <div class="lg:w-1/2">
194
- <div class="bg-white p-8 rounded-lg shadow-md">
195
- <div class="flex items-center mb-4">
196
- <div class="text-indigo-600 mr-4">
197
- <i class="fas fa-globe text-3xl"></i>
198
- </div>
199
- <h3 class="text-xl font-semibold">Used by 10+ Million People</h3>
200
- </div>
201
- <p class="text-gray-600 mb-4">Transcendental Meditation has been learned by over 10 million people worldwide, across all cultures and walks of life.</p>
202
- <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium">See Global Impact →</a>
203
- </div>
204
- </div>
205
- </div>
206
-
207
- <!-- Testimonial Carousel -->
208
- <div class="max-w-4xl mx-auto">
209
- <h3 class="text-xl font-semibold text-center mb-8">What People Are Saying</h3>
210
- <div class="bg-white p-8 rounded-lg shadow-md relative">
211
- <div class="text-center">
212
- <div class="text-yellow-400 mb-4">
213
- <i class="fas fa-star"></i>
214
- <i class="fas fa-star"></i>
215
- <i class="fas fa-star"></i>
216
- <i class="fas fa-star"></i>
217
- <i class="fas fa-star"></i>
218
- </div>
219
- <p class="text-xl italic mb-6">"TM gives me an inner stillness I've never experienced before. It's the single most important thing I do for myself."</p>
220
- <div class="flex items-center justify-center">
221
- <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Oprah Winfrey" class="w-12 h-12 rounded-full mr-4">
222
- <div>
223
- <p class="font-semibold">Oprah Winfrey</p>
224
- <p class="text-gray-600 text-sm">Media Executive</p>
225
- </div>
226
- </div>
227
- </div>
228
- <button class="absolute top-1/2 left-4 transform -translate-y-1/2 text-gray-400 hover:text-indigo-600">
229
- <i class="fas fa-chevron-left text-2xl"></i>
230
- </button>
231
- <button class="absolute top-1/2 right-4 transform -translate-y-1/2 text-gray-400 hover:text-indigo-600">
232
- <i class="fas fa-chevron-right text-2xl"></i>
233
- </button>
234
- </div>
235
- </div>
236
- </div>
237
- </section>
238
-
239
- <!-- How It Works Section -->
240
- <section class="py-16 bg-white">
241
- <div class="container mx-auto px-4">
242
- <h2 class="text-3xl font-bold text-center mb-12">Learn TM in 3 Simple Steps</h2>
243
-
244
- <div class="flex flex-col md:flex-row gap-8 mb-12">
245
- <div class="md:w-1/3 bg-indigo-50 p-8 rounded-lg text-center">
246
- <div class="text-indigo-600 mb-4">
247
- <div class="inline-flex items-center justify-center w-16 h-16 bg-indigo-100 rounded-full">
248
- <span class="text-2xl font-bold">1</span>
249
- </div>
250
- </div>
251
- <h3 class="text-xl font-semibold mb-4">Intro Talk</h3>
252
- <p class="text-gray-600 mb-4">Start with a free 60-minute introductory webinar to understand the principles and benefits of TM.</p>
253
- <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium">Sign Up for Free →</a>
254
  </div>
255
 
256
- <div class="md:w-1/3 bg-indigo-50 p-8 rounded-lg text-center">
 
257
  <div class="text-indigo-600 mb-4">
258
- <div class="inline-flex items-center justify-center w-16 h-16 bg-indigo-100 rounded-full">
259
- <span class="text-2xl font-bold">2</span>
260
- </div>
261
  </div>
262
- <h3 class="text-xl font-semibold mb-4">Personal Instruction</h3>
263
- <p class="text-gray-600 mb-4">Receive one-on-one training from a certified TM teacher, tailored to your individual needs.</p>
264
- <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium">Find a Teacher →</a>
265
  </div>
266
 
267
- <div class="md:w-1/3 bg-indigo-50 p-8 rounded-lg text-center">
 
268
  <div class="text-indigo-600 mb-4">
269
- <div class="inline-flex items-center justify-center w-16 h-16 bg-indigo-100 rounded-full">
270
- <span class="text-2xl font-bold">3</span>
271
- </div>
272
- </div>
273
- <h3 class="text-xl font-semibold mb-4">Follow-Up Support</h3>
274
- <p class="text-gray-600 mb-4">Get ongoing guidance and support to ensure you're getting the most from your practice.</p>
275
- <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium">Learn More →</a>
276
- </div>
277
- </div>
278
-
279
- <div class="text-center">
280
- <a href="#" class="bg-indigo-600 hover:bg-indigo-700 text-white px-8 py-3 rounded-md font-medium text-lg inline-block transition duration-300">See Course Details</a>
281
- </div>
282
- </div>
283
- </section>
284
-
285
- <!-- Teacher/Event Locator -->
286
- <section class="py-16 bg-indigo-600 text-white">
287
- <div class="container mx-auto px-4">
288
- <h2 class="text-3xl font-bold text-center mb-8">Find a TM Teacher Near You</h2>
289
-
290
- <div class="max-w-2xl mx-auto bg-white rounded-lg shadow-lg overflow-hidden">
291
- <div class="p-6">
292
- <div class="flex flex-col sm:flex-row gap-4 mb-6">
293
- <input type="text" placeholder="Enter your ZIP or City" class="flex-grow px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 text-gray-800">
294
- <select class="px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 text-gray-800">
295
- <option>Select Country</option>
296
- <option>United States</option>
297
- <option>Canada</option>
298
- <option>United Kingdom</option>
299
- <option>Australia</option>
300
- <option>Other</option>
301
- </select>
302
- </div>
303
- <div class="flex justify-between items-center">
304
- <div class="flex items-center">
305
- <input type="checkbox" id="events" class="mr-2">
306
- <label for="events" class="text-gray-800">Show upcoming events</label>
307
- </div>
308
- <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-md font-medium">Search</button>
309
- </div>
310
- </div>
311
- <div class="bg-gray-100 p-6">
312
- <div class="h-64 flex items-center justify-center text-gray-500">
313
- <p>Map or list of teachers/events will appear here</p>
314
- </div>
315
- </div>
316
- </div>
317
- </div>
318
- </section>
319
-
320
- <!-- Endorsements Section -->
321
- <section class="py-16 bg-white">
322
- <div class="container mx-auto px-4">
323
- <h2 class="text-3xl font-bold text-center mb-12">Trusted by Leaders Worldwide</h2>
324
-
325
- <!-- Celebrity Testimonials -->
326
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
327
- <div class="testimonial-card bg-gray-50 p-6 rounded-lg hover:shadow-md">
328
- <div class="flex items-center mb-4">
329
- <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Hugh Jackman" class="w-16 h-16 rounded-full mr-4">
330
- <div>
331
- <h3 class="text-xl font-semibold">Hugh Jackman</h3>
332
- <p class="text-gray-600">Actor</p>
333
- </div>
334
- </div>
335
- <p class="text-gray-700 italic mb-4">"TM is the single most effective tool for focus and creativity in my life. I've been practicing for over 20 years."</p>
336
- <div class="text-yellow-400">
337
- <i class="fas fa-star"></i>
338
- <i class="fas fa-star"></i>
339
- <i class="fas fa-star"></i>
340
- <i class="fas fa-star"></i>
341
- <i class="fas fa-star"></i>
342
- </div>
343
- </div>
344
-
345
- <div class="testimonial-card bg-gray-50 p-6 rounded-lg hover:shadow-md">
346
- <div class="flex items-center mb-4">
347
- <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Jerry Seinfeld" class="w-16 h-16 rounded-full mr-4">
348
- <div>
349
- <h3 class="text-xl font-semibold">Jerry Seinfeld</h3>
350
- <p class="text-gray-600">Comedian</p>
351
- </div>
352
- </div>
353
- <p class="text-gray-700 italic mb-4">"Twice a day, every day—no exceptions. It's like a reset button for your mind and body."</p>
354
- <div class="text-yellow-400">
355
- <i class="fas fa-star"></i>
356
- <i class="fas fa-star"></i>
357
- <i class="fas fa-star"></i>
358
- <i class="fas fa-star"></i>
359
- <i class="fas fa-star"></i>
360
- </div>
361
- </div>
362
-
363
- <div class="testimonial-card bg-gray-50 p-6 rounded-lg hover:shadow-md">
364
- <div class="flex items-center mb-4">
365
- <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Katrina Kaif" class="w-16 h-16 rounded-full mr-4">
366
- <div>
367
- <h3 class="text-xl font-semibold">Katrina Kaif</h3>
368
- <p class="text-gray-600">Actress</p>
369
- </div>
370
- </div>
371
- <p class="text-gray-700 italic mb-4">"TM helps me stay centered amidst the chaos of film shoots and travel. It's my daily anchor."</p>
372
- <div class="text-yellow-400">
373
- <i class="fas fa-star"></i>
374
- <i class="fas fa-star"></i>
375
- <i class="fas fa-star"></i>
376
- <i class="fas fa-star"></i>
377
- <i class="fas fa-star"></i>
378
- </div>
379
- </div>
380
- </div>
381
-
382
- <div class="text-center mb-12">
383
- <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium inline-flex items-center">
384
- See More Celebrity Stories <i class="fas fa-chevron-right ml-2"></i>
385
- </a>
386
- </div>
387
-
388
- <!-- Institutional Credibility -->
389
- <div class="mb-16">
390
- <h3 class="text-2xl font-semibold text-center mb-8">Backed by Science</h3>
391
- <div class="bg-indigo-50 p-8 rounded-lg mb-8">
392
- <div class="flex flex-col md:flex-row items-center">
393
- <div class="md:w-1/2 mb-6 md:mb-0">
394
- <h4 class="text-xl font-semibold mb-4">600+ peer-reviewed studies on TM's benefits</h4>
395
- <p class="text-gray-700 mb-4">Research has shown TM's effectiveness for stress reduction, PTSD treatment, heart health, and cognitive performance.</p>
396
- <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium">Explore Research →</a>
397
- </div>
398
- <div class="md:w-1/2 grid grid-cols-3 gap-4">
399
- <div class="endorsement-logo flex items-center justify-center p-4">
400
- <i class="fas fa-university text-4xl text-gray-600"></i>
401
- </div>
402
- <div class="endorsement-logo flex items-center justify-center p-4">
403
- <i class="fas fa-hospital text-4xl text-gray-600"></i>
404
- </div>
405
- <div class="endorsement-logo flex items-center justify-center p-4">
406
- <i class="fas fa-flask text-4xl text-gray-600"></i>
407
- </div>
408
- <div class="endorsement-logo flex items-center justify-center p-4">
409
- <i class="fas fa-heartbeat text-4xl text-gray-600"></i>
410
- </div>
411
- <div class="endorsement-logo flex items-center justify-center p-4">
412
- <i class="fas fa-graduation-cap text-4xl text-gray-600"></i>
413
- </div>
414
- <div class="endorsement-logo flex items-center justify-center p-4">
415
- <i class="fas fa-brain text-4xl text-gray-600"></i>
416
- </div>
417
- </div>
418
- </div>
419
- </div>
420
- </div>
421
-
422
- <!-- Media Features -->
423
- <div class="mb-16">
424
- <h3 class="text-2xl font-semibold text-center mb-8">As Seen In</h3>
425
- <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6">
426
- <div class="endorsement-logo flex items-center justify-center p-4 bg-white rounded-lg shadow-sm">
427
- <span class="text-xl font-bold text-gray-700">TIME</span>
428
- </div>
429
- <div class="endorsement-logo flex items-center justify-center p-4 bg-white rounded-lg shadow-sm">
430
- <span class="text-xl font-bold text-gray-700">CNN</span>
431
- </div>
432
- <div class="endorsement-logo flex items-center justify-center p-4 bg-white rounded-lg shadow-sm">
433
- <span class="text-xl font-bold text-gray-700">BBC</span>
434
- </div>
435
- <div class="endorsement-logo flex items-center justify-center p-4 bg-white rounded-lg shadow-sm">
436
- <span class="text-xl font-bold text-gray-700">NYT</span>
437
- </div>
438
- <div class="endorsement-logo flex items-center justify-center p-4 bg-white rounded-lg shadow-sm">
439
- <span class="text-xl font-bold text-gray-700">Forbes</span>
440
- </div>
441
- <div class="endorsement-logo flex items-center justify-center p-4 bg-white rounded-lg shadow-sm">
442
- <span class="text-xl font-bold text-gray-700">WSJ</span>
443
- </div>
444
- </div>
445
- <div class="mt-8 text-center">
446
- <p class="text-lg italic text-gray-700 max-w-2xl mx-auto">"TM is the gold standard of meditation techniques." — The Wall Street Journal</p>
447
- </div>
448
- </div>
449
-
450
- <!-- Corporate Partnerships -->
451
- <div>
452
- <h3 class="text-2xl font-semibold text-center mb-8">Transforming Workplaces & Communities</h3>
453
- <div class="bg-white p-8 rounded-lg shadow-md mb-8">
454
- <div class="flex flex-col md:flex-row items-center">
455
- <div class="md:w-1/2 mb-6 md:mb-0">
456
- <h4 class="text-xl font-semibold mb-4">Bringing TM to Organizations</h4>
457
- <p class="text-gray-700 mb-4">Google, Salesforce, and the NFL offer TM to employees. Taught in 500+ schools and veterans' programs globally.</p>
458
- <a href="#" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-md font-medium inline-block">Bring TM to Your Organization</a>
459
- </div>
460
- <div class="md:w-1/2 grid grid-cols-3 gap-4">
461
- <div class="endorsement-logo flex items-center justify-center p-4 bg-gray-100 rounded-lg">
462
- <i class="fab fa-google text-3xl text-gray-600"></i>
463
- </div>
464
- <div class="endorsement-logo flex items-center justify-center p-4 bg-gray-100 rounded-lg">
465
- <i class="fas fa-cloud text-3xl text-gray-600"></i>
466
- </div>
467
- <div class="endorsement-logo flex items-center justify-center p-4 bg-gray-100 rounded-lg">
468
- <i class="fas fa-football-ball text-3xl text-gray-600"></i>
469
- </div>
470
- </div>
471
- </div>
472
- </div>
473
- </div>
474
- </div>
475
- </section>
476
-
477
- <!-- User Testimonials -->
478
- <section class="py-16 bg-indigo-50">
479
- <div class="container mx-auto px-4">
480
- <h2 class="text-3xl font-bold text-center mb-12">Real People, Real Results</h2>
481
-
482
- <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
483
- <div class="bg-white p-6 rounded-lg shadow-sm">
484
- <div class="flex items-center mb-4">
485
- <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah" class="w-12 h-12 rounded-full mr-4">
486
- <div>
487
- <h3 class="font-semibold">Sarah, Teacher</h3>
488
- <p class="text-gray-600 text-sm">Practicing TM for 3 months</p>
489
- </div>
490
- </div>
491
- <p class="text-gray-700 italic mb-4">"After 3 months of TM, my anxiety dropped by 50%. I'm more patient with my students and sleep better at night."</p>
492
- <div class="flex justify-between items-center">
493
- <div class="text-yellow-400">
494
- <i class="fas fa-star"></i>
495
- <i class="fas fa-star"></i>
496
- <i class="fas fa-star"></i>
497
- <i class="fas fa-star"></i>
498
- <i class="fas fa-star"></i>
499
- </div>
500
- <span class="text-xs text-gray-500">Posted 2 weeks ago</span>
501
- </div>
502
- </div>
503
-
504
- <div class="bg-white p-6 rounded-lg shadow-sm">
505
- <div class="flex items-center mb-4">
506
- <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Miguel" class="w-12 h-12 rounded-full mr-4">
507
- <div>
508
- <h3 class="font-semibold">Miguel, Army Veteran</h3>
509
- <p class="text-gray-600 text-sm">Practicing TM for 1 year</p>
510
- </div>
511
- </div>
512
- <p class="text-gray-700 italic mb-4">"No other technique gave me such deep rest. TM has been crucial in managing my PTSD symptoms."</p>
513
- <div class="flex justify-between items-center">
514
- <div class="text-yellow-400">
515
- <i class="fas fa-star"></i>
516
- <i class="fas fa-star"></i>
517
- <i class="fas fa-star"></i>
518
- <i class="fas fa-star"></i>
519
- <i class="fas fa-star-half-alt"></i>
520
- </div>
521
- <span class="text-xs text-gray-500">Posted 1 month ago</span>
522
- </div>
523
- </div>
524
-
525
- <div class="bg-white p-6 rounded-lg shadow-sm">
526
- <div class="flex items-center mb-4">
527
- <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Priya" class="w-12 h-12 rounded-full mr-4">
528
- <div>
529
- <h3 class="font-semibold">Priya, CEO</h3>
530
- <p class="text-gray-600 text-sm">Practicing TM for 5 years</p>
531
- </div>
532
- </div>
533
- <p class="text-gray-700 italic mb-4">"Twice-daily TM gives me the clarity to make better decisions and the resilience to handle business challenges."</p>
534
- <div class="flex justify-between items-center">
535
- <div class="text-yellow-400">
536
- <i class="fas fa-star"></i>
537
- <i class="fas fa-star"></i>
538
- <i class="fas fa-star"></i>
539
- <i class="fas fa-star"></i>
540
- <i class="fas fa-star"></i>
541
- </div>
542
- <span class="text-xs text-gray-500">Posted 3 days ago</span>
543
  </div>
544
- </div>
545
- </div>
546
-
547
- <div class="text-center">
548
- <a href="#" class="inline-flex items-center text-indigo-600 hover:text-indigo-800 font-medium">
549
- Read More Testimonials <i class="fas fa-chevron-right ml-2"></i>
550
- </a>
551
- </div>
552
- </div>
553
- </section>
554
-
555
- <!-- Blog/Resources Preview -->
556
- <section class="py-16 bg-white">
557
- <div class="container mx-auto px-4">
558
- <h2 class="text-3xl font-bold text-center mb-12">Explore TM Resources</h2>
559
-
560
- <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
561
- <div class="border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition duration-300">
562
- <img src="https://images.unsplash.com/photo-1541185934-01b600ea069c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" alt="TM for Veterans" class="w-full h-48 object-cover">
563
- <div class="p-6">
564
- <h3 class="text-xl font-semibold mb-2">TM for Veterans: Healing Trauma Naturally</h3>
565
- <p class="text-gray-600 mb-4">Discover how veterans are finding relief from PTSD through Transcendental Meditation.</p>
566
- <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium">Read Article →</a>
567
- </div>
568
- </div>
569
-
570
- <div class="border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition duration-300">
571
- <img src="https://images.unsplash.com/photo-1499750310107-5fef28a66643?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="TM vs Mindfulness" class="w-full h-48 object-cover">
572
- <div class="p-6">
573
- <h3 class="text-xl font-semibold mb-2">TM vs. Mindfulness: Key Differences</h3>
574
- <p class="text-gray-600 mb-4">Understand how TM compares to other meditation practices and why it's uniquely effective.</p>
575
- <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium">Read Article →</a>
576
- </div>
577
- </div>
578
-
579
- <div class="border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition duration-300">
580
- <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="CEO's Secret" class="w-full h-48 object-cover">
581
- <div class="p-6">
582
- <h3 class="text-xl font-semibold mb-2">A CEO's Secret to Peak Productivity</h3>
583
- <p class="text-gray-600 mb-4">How top executives use TM to enhance decision-making and reduce burnout.</p>
584
- <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium">Read Article →</a>
585
- </div>
586
- </div>
587
- </div>
588
-
589
- <div class="text-center">
590
- <a href="#" class="bg-indigo-600 hover:bg-indigo-700 text-white px-8 py-3 rounded-md font-medium text-lg inline-block transition duration-300">View All Resources</a>
591
- </div>
592
- </div>
593
- </section>
594
-
595
- <!-- Counter Section -->
596
- <section class="py-12 bg-indigo-600 text-white">
597
- <div class="container mx-auto px-4 text-center">
598
- <div class="text-4xl font-bold mb-2">10,000,000+</div>
599
- <p class="text-xl">People worldwide have learned Transcendental Meditation</p>
600
- </div>
601
- </section>
602
-
603
- <!-- Final CTA -->
604
- <section class="py-16 bg-white">
605
- <div class="container mx-auto px-4 text-center">
606
- <h2 class="text-3xl font-bold mb-6">Ready to Transform Your Life?</h2>
607
- <p class="text-xl text-gray-600 max-w-2xl mx-auto mb-8">Start your journey with Transcendental Meditation today and experience the benefits for yourself.</p>
608
- <div class="flex flex-col sm:flex-row justify-center gap-4">
609
- <a href="#" class="bg-indigo-600 hover:bg-indigo-700 text-white px-8 py-3 rounded-md font-medium text-lg transition duration-300">Find a Teacher Near You</a>
610
- <a href="#" class="bg-white hover:bg-gray-100 text-indigo-600 border border-indigo-600 px-8 py-3 rounded-md font-medium text-lg transition duration-300">Watch Free Intro Video</a>
611
- </div>
612
- </div>
613
- </section>
614
-
615
- <!-- Footer -->
616
- <footer class="bg-gray-900 text-white pt-16 pb-8">
617
- <div class="container mx-auto px-4">
618
- <div class="grid grid-cols-1 md:grid-cols-4 gap-12 mb-12">
619
- <div>
620
- <h3 class="text-xl font-bold mb-4">TM.org</h3>
621
- <p class="text-gray-400 mb-4">Transcendental Meditation® is a simple, natural technique practiced 20 minutes twice each day while sitting comfortably with the eyes closed.</p>
622
- <div class="flex space-x-4">
623
- <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
624
- <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
625
- <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
626
- <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-youtube"></i></a>
627
- </div>
628
- </div>
629
-
630
- <div>
631
- <h3 class="text-lg font-semibold mb-4">Quick Links</h3>
632
- <ul class="space-y-2">
633
- <li><a href="#" class="text-gray-400 hover:text-white">Home</a></li>
634
- <li><a href="#" class="text-gray-400 hover:text-white">What is TM?</a></li>
635
- <li><a href="#" class="text-gray-400 hover:text-white">Benefits</a></li>
636
- <li><a href="#" class="text-gray-400 hover:text-white">Research</a></li>
637
- <li><a href="#" class="text-gray-400 hover:text-white">Find a Teacher</a></li>
638
- </ul>
639
- </div>
640
-
641
- <div>
642
- <h3 class="text-lg font-semibold mb-4">Resources</h3>
643
- <ul class="space-y-2">
644
- <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
645
- <li><a href="#" class="text-gray-400 hover:text-white">FAQs</a></li>
646
- <li><a href="#" class="text-gray-400 hover:text-white">Events</a></li>
647
- <li><a href="#" class="text-gray-400 hover:text-white">Corporate Programs</a></li>
648
- <li><a href="#" class="text-gray-400 hover:text-white">School Programs</a></li>
649
- </ul>
650
- </div>
651
-
652
- <div>
653
- <h3 class="text-lg font-semibold mb-4">Newsletter</h3>
654
- <p class="text-gray-400 mb-4">Subscribe to get tips and updates about TM.</p>
655
- <form class="flex">
656
- <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-md w-full text-gray-800 focus:outline-none">
657
- <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-r-md">
658
- <i class="fas fa-paper-plane"></i>
659
- </button>
660
- </form>
661
- </div>
662
- </div>
663
-
664
- <div class="border-t border-gray-800 pt-8">
665
- <div class="flex flex-col md:flex-row justify-between items-center">
666
- <p class="text-gray-400 mb-4 md:mb-0">© 2023 TM.org. All rights reserved.</p>
667
- <div class="flex space-x-6">
668
- <a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a>
669
- <a href="#" class="text-gray-400 hover:text-white">Terms of Service</a>
670
- <a href="#" class="text-gray-400 hover:text-white">Contact Us</a>
671
- </div>
672
- </div>
673
- <p class="text-gray-500 text-sm mt-4">Transcendental Meditation® and TM® are registered trademarks licensed to Maharishi Foundation USA, a 501(c)(3) non-profit organization.</p>
674
- </div>
675
- </div>
676
- </footer>
677
-
678
- <!-- Social Proof Popup -->
679
- <div class="fixed bottom-4 right-4 bg-white shadow-xl rounded-lg p-4 max-w-xs hidden" id="social-proof">
680
- <div class="flex items-start">
681
- <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="User" class="w-10 h-10 rounded-full mr-3">
682
- <div>
683
- <p class="text-sm font-medium">Sarah from Chicago just signed up for a free intro webinar!</p>
684
- <p class="text-xs text-gray-500 mt-1">2 minutes ago</p>
685
- </div>
686
- <button class="ml-2 text-gray-400 hover:text-gray-600" id="close-popup">
687
- <i class="fas fa-times"></i>
688
- </button>
689
- </div>
690
- </div>
691
-
692
- <script>
693
- // Mobile menu toggle
694
- document.getElementById('mobile-menu-button').addEventListener('click', function() {
695
- const menu = document.getElementById('mobile-menu');
696
- menu.classList.toggle('hidden');
697
- });
698
-
699
- // Mobile dropdown toggles
700
- document.getElementById('learn-tm-toggle').addEventListener('click', function() {
701
- document.getElementById('learn-tm-dropdown').classList.toggle('hidden');
702
- });
703
-
704
- document.getElementById('about-us-toggle').addEventListener('click', function() {
705
- document.getElementById('about-us-dropdown').classList.toggle('hidden');
706
- });
707
-
708
- // Close popup
709
- document.getElementById('close-popup').addEventListener('click', function() {
710
- document.getElementById('social-proof').classList.add('hidden');
711
- });
712
-
713
- // Show social proof popup after delay
714
- setTimeout(function() {
715
- document.getElementById('social-proof').classList.remove('hidden');
716
- }, 5000);
717
-
718
- // Simple testimonial carousel functionality
719
- let currentTestimonial = 0;
720
- const testimonials = [
721
- {
722
- quote: "TM gives me an inner stillness I've never experienced before. It's the single most important thing I do for myself.",
723
- name: "Oprah Winfrey",
724
- role: "Media Executive"
725
- },
726
- {
727
- quote: "It's the single most effective tool for focus and creativity in my life. I've been practicing for over 20 years.",
728
- name: "Hugh Jackman",
729
- role: "Actor"
730
- },
731
- {
732
- quote: "Twice a day, every day—no exceptions. It's like a reset button for your mind and body.",
733
- name: "Jerry Seinfeld",
734
- role: "Comedian"
735
- }
736
- ];
737
-
738
- function updateTestimonial() {
739
- const testimonial = testimonials[currentTestimonial];
740
- document.querySelector('.testimonial-carousel .quote').textContent = testimonial.quote;
741
- document.querySelector('.testimonial-carousel .name').textContent = testimonial.name;
742
- document.querySelector('.testimonial-carousel .role').textContent = testimonial.role;
743
- }
744
-
745
- // This would be connected to actual carousel buttons in a real implementation
746
- </script>
747
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=simondev1/tm" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
748
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>TM.org - Transcendental Meditation</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>
 
13
  background-position: center;
14
  }
15
 
16
+ .benefit-card:hover {
 
 
 
 
17
  transform: translateY(-5px);
18
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
19
  }
20
 
21
+ .testimonial-card {
22
+ min-width: 100%;
23
+ transition: transform 0.5s ease;
 
 
 
 
 
 
24
  }
25
 
26
+ @media (min-width: 768px) {
27
+ .testimonial-card {
28
+ min-width: 50%;
29
+ }
 
30
  }
31
 
32
+ @media (min-width: 1024px) {
33
+ .testimonial-card {
34
+ min-width: 33.333%;
35
+ }
36
  }
37
  </style>
38
  </head>
39
+ <body class="font-sans antialiased text-gray-800">
40
  <!-- Header/Navigation -->
41
  <header class="sticky top-0 z-50 bg-white shadow-md">
42
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
43
  <div class="flex items-center">
44
+ <a href="#" class="text-2xl font-bold text-indigo-700">TM<span class="text-indigo-500">.org</span></a>
45
+ </div>
46
+
47
+ <nav class="hidden md:flex space-x-8">
48
+ <a href="#" class="text-gray-700 hover:text-indigo-600 font-medium">Home</a>
49
+ <div class="relative group">
50
+ <button class="text-gray-700 hover:text-indigo-600 font-medium flex items-center">
51
+ Learn TM <i class="fas fa-chevron-down ml-1 text-xs"></i>
52
+ </button>
53
+ <div class="absolute hidden group-hover:block bg-white shadow-lg rounded-md mt-2 py-2 w-48">
54
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-indigo-50 hover:text-indigo-600">What is TM?</a>
55
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-indigo-50 hover:text-indigo-600">Benefits</a>
56
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-indigo-50 hover:text-indigo-600">How to Learn</a>
57
  </div>
58
+ </div>
59
+ <a href="#" class="text-gray-700 hover:text-indigo-600 font-medium">Research & Science</a>
60
+ <div class="relative group">
61
+ <button class="text-gray-700 hover:text-indigo-600 font-medium flex items-center">
62
+ About Us <i class="fas fa-chevron-down ml-1 text-xs"></i>
63
+ </button>
64
+ <div class="absolute hidden group-hover:block bg-white shadow-lg rounded-md mt-2 py-2 w-48">
65
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-indigo-50 hover:text-indigo-600">History</a>
66
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-indigo-50 hover:text-indigo-600">Teachers</a>
67
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-indigo-50 hover:text-indigo-600">FAQs</a>
68
  </div>
69
+ </div>
70
+ <a href="#" class="text-gray-700 hover:text-indigo-600 font-medium">Events & Courses</a>
71
+ <a href="#" class="text-gray-700 hover:text-indigo-600 font-medium">Blog</a>
72
+ <a href="#" class="text-gray-700 hover:text-indigo-600 font-medium">Contact</a>
73
+ </nav>
74
+
75
+ <div class="hidden md:block">
76
+ <a href="#" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md font-medium transition duration-300">Find a Teacher</a>
 
77
  </div>
78
+
79
+ <button id="mobile-menu-button" class="md:hidden text-gray-700">
80
+ <i class="fas fa-bars text-2xl"></i>
81
+ </button>
82
  </div>
83
 
84
  <!-- Mobile menu -->
85
+ <div id="mobile-menu" class="hidden md:hidden bg-white border-t">
86
+ <div class="container mx-auto px-4 py-3 flex flex-col space-y-3">
87
+ <a href="#" class="py-2 text-gray-700 border-b">Home</a>
88
+ <div class="py-2 border-b">
89
+ <button class="flex justify-between items-center w-full text-gray-700">
90
+ Learn TM <i class="fas fa-chevron-down"></i>
91
  </button>
92
+ <div class="hidden mt-2 pl-4 space-y-2">
93
+ <a href="#" class="block py-1 text-gray-600">What is TM?</a>
94
+ <a href="#" class="block py-1 text-gray-600">Benefits</a>
95
+ <a href="#" class="block py-1 text-gray-600">How to Learn</a>
96
  </div>
97
  </div>
98
+ <a href="#" class="py-2 text-gray-700 border-b">Research & Science</a>
99
+ <div class="py-2 border-b">
100
+ <button class="flex justify-between items-center w-full text-gray-700">
101
+ About Us <i class="fas fa-chevron-down"></i>
102
  </button>
103
+ <div class="hidden mt-2 pl-4 space-y-2">
104
+ <a href="#" class="block py-1 text-gray-600">History</a>
105
+ <a href="#" class="block py-1 text-gray-600">Teachers</a>
106
+ <a href="#" class="block py-1 text-gray-600">FAQs</a>
107
  </div>
108
  </div>
109
+ <a href="#" class="py-2 text-gray-700 border-b">Events & Courses</a>
110
+ <a href="#" class="py-2 text-gray-700 border-b">Blog</a>
111
+ <a href="#" class="py-2 text-gray-700 border-b">Contact</a>
112
+ <a href="#" class="bg-indigo-600 text-white px-4 py-2 rounded-md text-center font-medium mt-2">Find a Teacher</a>
113
  </div>
114
  </div>
115
  </header>
 
118
  <section class="hero-bg text-white py-20 md:py-32">
119
  <div class="container mx-auto px-4 text-center">
120
  <h1 class="text-4xl md:text-5xl font-bold mb-4">Reduce Stress. Improve Life.</h1>
121
+ <h2 class="text-2xl md:text-3xl font-light mb-8">Learn Transcendental Meditation®</h2>
122
  <p class="text-xl mb-10 max-w-2xl mx-auto">A simple, evidence-based technique for clarity, resilience, and inner peace.</p>
123
  <div class="flex flex-col sm:flex-row justify-center gap-4">
124
  <a href="#" class="bg-indigo-600 hover:bg-indigo-700 text-white px-8 py-3 rounded-md font-medium text-lg transition duration-300">Watch the Free Intro Video</a>
125
  <a href="#" class="bg-white hover:bg-gray-100 text-indigo-600 px-8 py-3 rounded-md font-medium text-lg transition duration-300">Find a Local Teacher</a>
126
  </div>
 
 
 
 
 
127
  </div>
128
  </section>
129
 
130
  <!-- Benefits Section -->
131
+ <section class="py-16 bg-gray-50">
132
  <div class="container mx-auto px-4">
133
  <h2 class="text-3xl font-bold text-center mb-12">Why Practice TM?</h2>
134
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
135
+ <!-- Benefit 1 -->
136
+ <div class="benefit-card bg-white p-8 rounded-lg shadow-md transition duration-300">
137
  <div class="text-indigo-600 mb-4">
138
+ <i class="fas fa-heartbeat text-4xl"></i>
139
  </div>
140
+ <h3 class="text-xl font-bold mb-3">Reduces Stress & Anxiety</h3>
141
+ <p class="text-gray-600">TM has been shown to significantly lower cortisol levels and reduce symptoms of anxiety and depression.</p>
142
  </div>
143
+
144
+ <!-- Benefit 2 -->
145
+ <div class="benefit-card bg-white p-8 rounded-lg shadow-md transition duration-300">
146
  <div class="text-indigo-600 mb-4">
147
  <i class="fas fa-brain text-4xl"></i>
148
  </div>
149
+ <h3 class="text-xl font-bold mb-3">Improves Focus & Creativity</h3>
150
+ <p class="text-gray-600">Regular practice enhances cognitive function, memory, and creative problem-solving abilities.</p>
151
  </div>
152
+
153
+ <!-- Benefit 3 -->
154
+ <div class="benefit-card bg-white p-8 rounded-lg shadow-md transition duration-300">
155
  <div class="text-indigo-600 mb-4">
156
  <i class="fas fa-flask text-4xl"></i>
157
  </div>
158
+ <h3 class="text-xl font-bold mb-3">Backed by Science</h3>
159
+ <p class="text-gray-600">Over 600 peer-reviewed studies validate the benefits of TM across various health and wellness metrics.</p>
160
  </div>
161
+
162
+ <!-- Benefit 4 -->
163
+ <div class="benefit-card bg-white p-8 rounded-lg shadow-md transition duration-300">
164
  <div class="text-indigo-600 mb-4">
165
  <i class="fas fa-clock text-4xl"></i>
166
  </div>
167
+ <h3 class="text-xl font-bold mb-3">20 Minutes/Day</h3>
168
+ <p class="text-gray-600">Just two 20-minute sessions per day can produce profound benefits without effort or concentration.</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
169
  </div>
170
 
171
+ <!-- Benefit 5 -->
172
+ <div class="benefit-card bg-white p-8 rounded-lg shadow-md transition duration-300">
173
  <div class="text-indigo-600 mb-4">
174
+ <i class="fas fa-chart-line text-4xl"></i>
 
 
175
  </div>
176
+ <h3 class="text-xl font-bold mb-3">Lifetime Benefits</h3>
177
+ <p class="text-gray-600">Unlike apps or temporary solutions, TM provides cumulative benefits that grow with regular practice.</p>
 
178
  </div>
179
 
180
+ <!-- Benefit 6 -->
181
+ <div class="benefit-card bg-white p-8 rounded-lg shadow-md transition duration-300">
182
  <div class="text-indigo-600 mb-4">
183
+ <i class="fas fa-globe text-4xl"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
184
  </div>
185
+ <h3 class="text-xl font-bold mb-3">Global
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
186
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=simondev1/tm" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
187
  </html>