Hugging Face's logo

Spaces:
Mishak
/
habithero
Running

App Files Community
Mishak commited on
Commit
92889cc
·
verified ·
1 Parent(s): bead0af

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +566 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Habithero
3
- emoji: 👀
4
- colorFrom: pink
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: habithero
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,566 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>HabitHero | Transform Your Daily Routine</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
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
12
+ }
13
+ .feature-card {
14
+ transition: all 0.3s ease;
15
+ }
16
+ .feature-card:hover {
17
+ transform: translateY(-5px);
18
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
19
+ }
20
+ .app-mockup {
21
+ filter: drop-shadow(0 20px 25px rgba(0, 0, 0, 0.1));
22
+ }
23
+ .testimonial-card {
24
+ background: rgba(255, 255, 255, 0.1);
25
+ backdrop-filter: blur(10px);
26
+ }
27
+ .pulse {
28
+ animation: pulse 2s infinite;
29
+ }
30
+ @keyframes pulse {
31
+ 0% {
32
+ transform: scale(1);
33
+ }
34
+ 50% {
35
+ transform: scale(1.05);
36
+ }
37
+ 100% {
38
+ transform: scale(1);
39
+ }
40
+ }
41
+ </style>
42
+ </head>
43
+ <body class="font-sans antialiased text-gray-800">
44
+ <!-- Navigation -->
45
+ <nav class="bg-white shadow-sm sticky top-0 z-50">
46
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
47
+ <div class="flex justify-between h-16">
48
+ <div class="flex items-center">
49
+ <div class="flex-shrink-0 flex items-center">
50
+ <i class="fas fa-check-circle text-indigo-600 text-2xl mr-2"></i>
51
+ <span class="text-xl font-bold text-gray-900">HabitHero</span>
52
+ </div>
53
+ </div>
54
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
55
+ <a href="#features" class="text-gray-500 hover:text-gray-700 px-3 py-2 text-sm font-medium">Features</a>
56
+ <a href="#testimonials" class="text-gray-500 hover:text-gray-700 px-3 py-2 text-sm font-medium">Testimonials</a>
57
+ <a href="#" class="text-indigo-600 hover:text-indigo-800 px-3 py-2 text-sm font-medium">Download</a>
58
+ </div>
59
+ <div class="-mr-2 flex items-center md:hidden">
60
+ <button type="button" id="mobile-menu-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">
61
+ <i class="fas fa-bars"></i>
62
+ </button>
63
+ </div>
64
+ </div>
65
+ </div>
66
+ <!-- Mobile menu -->
67
+ <div id="mobile-menu" class="hidden md:hidden bg-white border-t">
68
+ <div class="px-2 pt-2 pb-3 space-y-1">
69
+ <a href="#features" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Features</a>
70
+ <a href="#testimonials" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Testimonials</a>
71
+ <a href="#" class="block px-3 py-2 text-base font-medium text-indigo-600 hover:text-indigo-800 hover:bg-gray-50">Download</a>
72
+ </div>
73
+ </div>
74
+ </nav>
75
+
76
+ <!-- Hero Section -->
77
+ <section class="gradient-bg text-white">
78
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-32">
79
+ <div class="md:flex md:items-center md:justify-between">
80
+ <div class="md:w-1/2 mb-12 md:mb-0">
81
+ <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6">Transform Your Day, <span class="text-yellow-300">One Habit at a Time</span></h1>
82
+ <p class="text-xl mb-8 opacity-90">The scientifically-proven habit tracker that helps you build lasting routines. Small daily improvements compound into life-changing results.</p>
83
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
84
+ <a href="#" class="bg-white text-indigo-700 hover:bg-gray-100 font-bold py-4 px-8 rounded-lg text-center pulse">
85
+ <div class="flex items-center justify-center">
86
+ <i class="fab fa-apple mr-3 text-xl"></i>
87
+ <div>
88
+ <div class="text-xs">Download on the</div>
89
+ <div class="text-lg">App Store</div>
90
+ </div>
91
+ </div>
92
+ </a>
93
+ <a href="#" class="bg-gray-900 hover:bg-gray-800 text-white font-bold py-4 px-8 rounded-lg text-center">
94
+ <div class="flex items-center justify-center">
95
+ <i class="fab fa-google-play mr-3 text-xl"></i>
96
+ <div>
97
+ <div class="text-xs">Get it on</div>
98
+ <div class="text-lg">Google Play</div>
99
+ </div>
100
+ </div>
101
+ </a>
102
+ </div>
103
+ </div>
104
+ <div class="md:w-1/2 flex justify-center">
105
+ <svg class="app-mockup w-full max-w-md" viewBox="0 0 300 600" xmlns="http://www.w3.org/2000/svg">
106
+ <!-- Phone outline -->
107
+ <rect x="20" y="20" width="260" height="560" rx="30" fill="#fff" stroke="#e5e7eb" stroke-width="2"/>
108
+ <!-- Screen content -->
109
+ <rect x="40" y="40" width="220" height="520" rx="10" fill="#f9fafb"/>
110
+ <!-- Header -->
111
+ <rect x="40" y="40" width="220" height="70" rx="10" fill="#4f46e5"/>
112
+ <text x="150" y="80" font-family="Arial" font-size="18" font-weight="bold" fill="#fff" text-anchor="middle">HabitHero</text>
113
+ <text x="150" y="105" font-family="Arial" font-size="12" fill="#c7d2fe" text-anchor="middle">Today's Progress</text>
114
+
115
+ <!-- Stats -->
116
+ <circle cx="150" cy="170" r="50" fill="none" stroke="#4f46e5" stroke-width="8"/>
117
+ <text x="150" y="175" font-family="Arial" font-size="30" font-weight="bold" fill="#4f46e5" text-anchor="middle">75%</text>
118
+ <text x="150" y="210" font-family="Arial" font-size="12" fill="#6b7280" text-anchor="middle">Daily Goal</text>
119
+
120
+ <!-- Habits list -->
121
+ <rect x="60" cy="230" width="180" height="40" rx="5" fill="#fff" stroke="#e5e7eb" stroke-width="1"/>
122
+ <rect x="60" cy="280" width="180" height="40" rx="5" fill="#fff" stroke="#e5e7eb" stroke-width="1"/>
123
+ <rect x="60" cy="330" width="180" height="40" rx="5" fill="#fff" stroke="#e5e7eb" stroke-width="1"/>
124
+
125
+ <!-- Checkboxes -->
126
+ <circle cx="80" cy="250" r="10" fill="#4f46e5"/>
127
+ <path d="M75 250 L78 255 L85 245" stroke="#fff" stroke-width="2" fill="none"/>
128
+
129
+ <circle cx="80" cy="300" r="10" fill="#e5e7eb"/>
130
+ <circle cx="80" cy="350" r="10" fill="#e5e7eb"/>
131
+
132
+ <!-- Habit labels -->
133
+ <text x="100" y="255" font-family="Arial" font-size="14" fill="#111827">Morning Meditation</text>
134
+ <text x="100" y="305" font-family="Arial" font-size="14" fill="#6b7280">Drink 8 Glasses</text>
135
+ <text x="100" y="355" font-family="Arial" font-size="14" fill="#6b7280">30-min Workout</text>
136
+
137
+ <!-- Bottom nav -->
138
+ <rect x="40" y="570" width="220" height="40" rx="5" fill="#fff" stroke="#e5e7eb" stroke-width="1"/>
139
+ <circle cx="80" cy="590" r="5" fill="#4f46e5"/>
140
+ <circle cx="150" cy="590" r="5" fill="#d1d5db"/>
141
+ <circle cx="220" cy="590" r="5" fill="#d1d5db"/>
142
+ </svg>
143
+ </div>
144
+ </div>
145
+ </div>
146
+ </section>
147
+
148
+ <!-- Features Section -->
149
+ <section id="features" class="py-20 bg-white">
150
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
151
+ <div class="text-center mb-16">
152
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Build Habits That Actually Stick</h2>
153
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Backed by behavioral science and designed for real life. Here's how HabitHero helps you succeed.</p>
154
+ </div>
155
+
156
+ <!-- Feature 1 -->
157
+ <div class="md:flex md:items-center md:space-x-12 mb-20">
158
+ <div class="md:w-1/2 mb-10 md:mb-0">
159
+ <svg class="w-full max-w-md mx-auto app-mockup" viewBox="0 0 300 500" xmlns="http://www.w3.org/2000/svg">
160
+ <!-- Phone outline -->
161
+ <rect x="20" y="20" width="260" height="460" rx="30" fill="#fff" stroke="#e5e7eb" stroke-width="2"/>
162
+ <!-- Screen content -->
163
+ <rect x="40" y="40" width="220" height="420" rx="10" fill="#f9fafb"/>
164
+
165
+ <!-- Streak visualization -->
166
+ <rect x="60" y="60" width="180" height="60" rx="5" fill="#4f46e5"/>
167
+ <text x="150" y="90" font-family="Arial" font-size="18" font-weight="bold" fill="#fff" text-anchor="middle">7-Day Streak!</text>
168
+ <text x="150" y="110" font-family="Arial" font-size="12" fill="#c7d2fe" text-anchor="middle">Keep going to unlock rewards</text>
169
+
170
+ <!-- Calendar -->
171
+ <rect x="60" y="140" width="180" height="300" rx="5" fill="#fff" stroke="#e5e7eb" stroke-width="1"/>
172
+ <text x="150" y="165" font-family="Arial" font-size="14" font-weight="bold" fill="#111827" text-anchor="middle">January 2023</text>
173
+
174
+ <!-- Calendar grid -->
175
+ <line x1="60" y1="180" x2="240" y2="180" stroke="#e5e7eb" stroke-width="1"/>
176
+ <text x="80" y="200" font-family="Arial" font-size="12" fill="#6b7280" text-anchor="middle">S</text>
177
+ <text x="110" y="200" font-family="Arial" font-size="12" fill="#6b7280" text-anchor="middle">M</text>
178
+ <text x="140" y="200" font-family="Arial" font-size="12" fill="#6b7280" text-anchor="middle">T</text>
179
+ <text x="170" y="200" font-family="Arial" font-size="12" fill="#6b7280" text-anchor="middle">W</text>
180
+ <text x="200" y="200" font-family="Arial" font-size="12" fill="#6b7280" text-anchor="middle">T</text>
181
+ <text x="230" y="200" font-family="Arial" font-size="12" fill="#6b7280" text-anchor="middle">F</text>
182
+
183
+ <!-- Calendar days with checkmarks -->
184
+ <circle cx="80" cy="230" r="10" fill="#4f46e5"/>
185
+ <path d="M75 230 L78 235 L85 225" stroke="#fff" stroke-width="2" fill="none"/>
186
+
187
+ <circle cx="110" cy="230" r="10" fill="#4f46e5"/>
188
+ <path d="M105 230 L108 235 L115 225" stroke="#fff" stroke-width="2" fill="none"/>
189
+
190
+ <circle cx="140" cy="230" r="10" fill="#4f46e5"/>
191
+ <path d="M135 230 L138 235 L145 225" stroke="#fff" stroke-width="2" fill="none"/>
192
+
193
+ <!-- Current day -->
194
+ <circle cx="170" cy="230" r="15" fill="#f59e0b" stroke="#fff" stroke-width="2"/>
195
+ <text x="170" y="235" font-family="Arial" font-size="12" font-weight="bold" fill="#fff" text-anchor="middle">17</text>
196
+
197
+ <!-- Future days -->
198
+ <text x="200" y="235" font-family="Arial" font-size="12" fill="#6b7280" text-anchor="middle">18</text>
199
+ <text x="230" y="235" font-family="Arial" font-size="12" fill="#6b7280" text-anchor="middle">19</text>
200
+ </svg>
201
+ </div>
202
+ <div class="md:w-1/2">
203
+ <div class="max-w-md">
204
+ <div class="flex items-center mb-4">
205
+ <div class="bg-indigo-100 rounded-full p-2 mr-4">
206
+ <i class="fas fa-fire text-indigo-600 text-xl"></i>
207
+ </div>
208
+ <h3 class="text-2xl font-bold text-gray-900">Streaks That Motivate</h3>
209
+ </div>
210
+ <p class="text-gray-600 mb-6">Our streak system taps into your brain's reward centers, making habit formation feel exciting rather than exhausting. Watch your progress grow day by day.</p>
211
+ <ul class="space-y-3">
212
+ <li class="flex items-start">
213
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
214
+ <span class="text-gray-700">Visual progress tracking that keeps you engaged</span>
215
+ </li>
216
+ <li class="flex items-start">
217
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
218
+ <span class="text-gray-700">Milestone celebrations to acknowledge your wins</span>
219
+ </li>
220
+ <li class="flex items-start">
221
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
222
+ <span class="text-gray-700">Smart reminders before you're about to break a streak</span>
223
+ </li>
224
+ </ul>
225
+ </div>
226
+ </div>
227
+ </div>
228
+
229
+ <!-- Feature 2 -->
230
+ <div class="md:flex md:flex-row-reverse md:items-center md:space-x-12 mb-20">
231
+ <div class="md:w-1/2 mb-10 md:mb-0">
232
+ <svg class="w-full max-w-md mx-auto app-mockup" viewBox="0 0 300 500" xmlns="http://www.w3.org/2000/svg">
233
+ <!-- Phone outline -->
234
+ <rect x="20" y="20" width="260" height="460" rx="30" fill="#fff" stroke="#e5e7eb" stroke-width="2"/>
235
+ <!-- Screen content -->
236
+ <rect x="40" y="40" width="220" height="420" rx="10" fill="#f9fafb"/>
237
+
238
+ <!-- Header -->
239
+ <rect x="40" y="40" width="220" height="60" rx="10" fill="#4f46e5"/>
240
+ <text x="150" y="75" font-family="Arial" font-size="16" font-weight="bold" fill="#fff" text-anchor="middle">Habit Analytics</text>
241
+
242
+ <!-- Stats overview -->
243
+ <rect x="60" y="120" width="180" height="100" rx="5" fill="#fff" stroke="#e5e7eb" stroke-width="1"/>
244
+ <text x="150" y="150" font-family="Arial" font-size="14" font-weight="bold" fill="#111827" text-anchor="middle">Your Consistency</text>
245
+ <text x="150" y="180" font-family="Arial" font-size="32" font-weight="bold" fill="#4f46e5" text-anchor="middle">83%</text>
246
+
247
+ <!-- Progress bars -->
248
+ <rect x="60" y="240" width="180" height="20" rx="10" fill="#e5e7eb"/>
249
+ <rect x="60" y="240" width="144" height="20" rx="10" fill="#4f46e5"/>
250
+ <text x="70" y="255" font-family="Arial" font-size="10" fill="#fff">Morning Routine</text>
251
+
252
+ <rect x="60" y="270" width="180" height="20" rx="10" fill="#e5e7eb"/>
253
+ <rect x="60" y="270" width="90" height="20" rx="10" fill="#4f46e5"/>
254
+ <text x="70" y="285" font-family="Arial" font-size="10" fill="#fff">Exercise</text>
255
+
256
+ <!-- Insights -->
257
+ <rect x="60" y="320" width="180" height="120" rx="5" fill="#fff" stroke="#e5e7eb" stroke-width="1"/>
258
+ <text x="150" y="340" font-family="Arial" font-size="14" font-weight="bold" fill="#111827" text-anchor="middle">Weekly Insights</text>
259
+ <text x="150" y="370" font-family="Arial" font-size="12" fill="#6b7280" text-anchor="middle">You're most consistent</text>
260
+ <text x="150" y="390" font-family="Arial" font-size="12" fill="#6b7280" text-anchor="middle">on Tuesday mornings</text>
261
+ <text x="150" y="410" font-family="Arial" font-size="12" fill="#6b7280" text-anchor="middle">between 7-8 AM</text>
262
+ </svg>
263
+ </div>
264
+ <div class="md:w-1/2">
265
+ <div class="max-w-md">
266
+ <div class="flex items-center mb-4">
267
+ <div class="bg-indigo-100 rounded-full p-2 mr-4">
268
+ <i class="fas fa-chart-line text-indigo-600 text-xl"></i>
269
+ </div>
270
+ <h3 class="text-2xl font-bold text-gray-900">Data-Driven Insights</h3>
271
+ </div>
272
+ <p class="text-gray-600 mb-6">Go beyond simple tracking with powerful analytics that reveal your patterns, strengths, and opportunities for improvement.</p>
273
+ <ul class="space-y-3">
274
+ <li class="flex items-start">
275
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
276
+ <span class="text-gray-700">Personalized recommendations based on your behavior</span>
277
+ </li>
278
+ <li class="flex items-start">
279
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
280
+ <span class="text-gray-700">Identify your most productive times and patterns</span>
281
+ </li>
282
+ <li class="flex items-start">
283
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
284
+ <span class="text-gray-700">Track long-term progress with detailed historical data</span>
285
+ </li>
286
+ </ul>
287
+ </div>
288
+ </div>
289
+ </div>
290
+
291
+ <!-- Feature 3 -->
292
+ <div class="md:flex md:items-center md:space-x-12">
293
+ <div class="md:w-1/2 mb-10 md:mb-0">
294
+ <svg class="w-full max-w-md mx-auto app-mockup" viewBox="0 0 300 500" xmlns="http://www.w3.org/2000/svg">
295
+ <!-- Phone outline -->
296
+ <rect x="20" y="20" width="260" height="460" rx="30" fill="#fff" stroke="#e5e7eb" stroke-width="2"/>
297
+ <!-- Screen content -->
298
+ <rect x="40" y="40" width="220" height="420" rx="10" fill="#f9fafb"/>
299
+
300
+ <!-- Header -->
301
+ <rect x="40" y="40" width="220" height="60" rx="10" fill="#4f46e5"/>
302
+ <text x="150" y="75" font-family="Arial" font-size="16" font-weight="bold" fill="#fff" text-anchor="middle">Community</text>
303
+
304
+ <!-- Friend activity -->
305
+ <rect x="60" y="120" width="180" height="60" rx="5" fill="#fff" stroke="#e5e7eb" stroke-width="1"/>
306
+ <circle cx="80" cy="150" r="15" fill="#4f46e5"/>
307
+ <text x="110" y="150" font-family="Arial" font-size="12" fill="#111827">Sarah completed her 5-day streak!</text>
308
+
309
+ <!-- Group challenge -->
310
+ <rect x="60" y="200" width="180" height="120" rx="5" fill="#fff" stroke="#e5e7eb" stroke-width="1"/>
311
+ <text x="150" y="220" font-family="Arial" font-size="14" font-weight="bold" fill="#111827" text-anchor="middle">30-Day Challenge</text>
312
+ <text x="150" y="240" font-family="Arial" font-size="12" fill="#6b7280" text-anchor="middle">Hydration Challenge</text>
313
+
314
+ <rect x="80" y="260" width="140" height="10" rx="5" fill="#e5e7eb"/>
315
+ <rect x="80" y="260" width="70" height="10" rx="5" fill="#4f46e5"/>
316
+ <text x="150" y="290" font-family="Arial" font-size="12" fill="#6b7280" text-anchor="middle">12/30 members completed today</text>
317
+
318
+ <!-- Join button -->
319
+ <rect x="100" y="310" width="100" height="30" rx="15" fill="#4f46e5"/>
320
+ <text x="150" y="330" font-family="Arial" font-size="12" font-weight="bold" fill="#fff" text-anchor="middle">Join</text>
321
+ </svg>
322
+ </div>
323
+ <div class="md:w-1/2">
324
+ <div class="max-w-md">
325
+ <div class="flex items-center mb-4">
326
+ <div class="bg-indigo-100 rounded-full p-2 mr-4">
327
+ <i class="fas fa-users text-indigo-600 text-xl"></i>
328
+ </div>
329
+ <h3 class="text-2xl font-bold text-gray-900">Community Support</h3>
330
+ </div>
331
+ <p class="text-gray-600 mb-6">Join thousands of others on the same journey. Our supportive community and group challenges make habit formation a team sport.</p>
332
+ <ul class="space-y-3">
333
+ <li class="flex items-start">
334
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
335
+ <span class="text-gray-700">Share progress and get encouragement from peers</span>
336
+ </li>
337
+ <li class="flex items-start">
338
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
339
+ <span class="text-gray-700">Participate in themed challenges with rewards</span>
340
+ </li>
341
+ <li class="flex items-start">
342
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
343
+ <span class="text-gray-700">Learn from others' experiences and strategies</span>
344
+ </li>
345
+ </ul>
346
+ </div>
347
+ </div>
348
+ </div>
349
+ </div>
350
+ </section>
351
+
352
+ <!-- Testimonials Section -->
353
+ <section id="testimonials" class="py-20 gradient-bg text-white">
354
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
355
+ <div class="text-center mb-16">
356
+ <h2 class="text-3xl font-bold mb-4">Trusted by 250,000+ Habit Builders</h2>
357
+ <p class="text-xl opacity-90 max-w-3xl mx-auto">Real people achieving real results. Here's what they say about HabitHero.</p>
358
+ </div>
359
+
360
+ <div class="grid md:grid-cols-3 gap-8">
361
+ <!-- Testimonial 1 -->
362
+ <div class="testimonial-card p-8 rounded-xl">
363
+ <div class="flex items-center mb-4">
364
+ <div class="flex-shrink-0">
365
+ <div class="h-12 w-12 rounded-full bg-indigo-200 flex items-center justify-center">
366
+ <span class="text-indigo-700 font-bold">JD</span>
367
+ </div>
368
+ </div>
369
+ <div class="ml-4">
370
+ <h4 class="font-bold">Jamie D.</h4>
371
+ <div class="flex">
372
+ <i class="fas fa-star text-yellow-300"></i>
373
+ <i class="fas fa-star text-yellow-300"></i>
374
+ <i class="fas fa-star text-yellow-300"></i>
375
+ <i class="fas fa-star text-yellow-300"></i>
376
+ <i class="fas fa-star text-yellow-300"></i>
377
+ </div>
378
+ </div>
379
+ </div>
380
+ <p class="mb-4">"After years of failed attempts, HabitHero finally helped me establish a consistent morning routine. The streak system kept me motivated when willpower alone wasn't enough."</p>
381
+ <div class="text-sm opacity-80">Meditated 120+ days in a row</div>
382
+ </div>
383
+
384
+ <!-- Testimonial 2 -->
385
+ <div class="testimonial-card p-8 rounded-xl">
386
+ <div class="flex items-center mb-4">
387
+ <div class="flex-shrink-0">
388
+ <div class="h-12 w-12 rounded-full bg-indigo-200 flex items-center justify-center">
389
+ <span class="text-indigo-700 font-bold">TS</span>
390
+ </div>
391
+ </div>
392
+ <div class="ml-4">
393
+ <h4 class="font-bold">Taylor S.</h4>
394
+ <div class="flex">
395
+ <i class="fas fa-star text-yellow-300"></i>
396
+ <i class="fas fa-star text-yellow-300"></i>
397
+ <i class="fas fa-star text-yellow-300"></i>
398
+ <i class="fas fa-star text-yellow-300"></i>
399
+ <i class="fas fa-star text-yellow-300"></i>
400
+ </div>
401
+ </div>
402
+ </div>
403
+ <p class="mb-4">"The analytics showed me I was most likely to skip workouts on Thursdays. Now I schedule them for mornings instead of evenings, and my consistency has improved dramatically."</p>
404
+ <div class="text-sm opacity-80">Worked out 5x/week for 3 months</div>
405
+ </div>
406
+
407
+ <!-- Testimonial 3 -->
408
+ <div class="testimonial-card p-8 rounded-xl">
409
+ <div class="flex items-center mb-4">
410
+ <div class="flex-shrink-0">
411
+ <div class="h-12 w-12 rounded-full bg-indigo-200 flex items-center justify-center">
412
+ <span class="text-indigo-700 font-bold">AM</span>
413
+ </div>
414
+ </div>
415
+ <div class="ml-4">
416
+ <h4 class="font-bold">Alex M.</h4>
417
+ <div class="flex">
418
+ <i class="fas fa-star text-yellow-300"></i>
419
+ <i class="fas fa-star text-yellow-300"></i>
420
+ <i class="fas fa-star text-yellow-300"></i>
421
+ <i class="fas fa-star text-yellow-300"></i>
422
+ <i class="fas fa-star text-yellow-300"></i>
423
+ </div>
424
+ </div>
425
+ </div>
426
+ <p class="mb-4">"Joining the 30-day reading challenge pushed me to finally make time for books. The community support made all the difference when my motivation dipped in week two."</p>
427
+ <div class="text-sm opacity-80">Read 25 books last year</div>
428
+ </div>
429
+ </div>
430
+
431
+ <div class="mt-12 text-center">
432
+ <div class="inline-flex items-center space-x-2">
433
+ <i class="fas fa-award text-yellow-300 text-2xl"></i>
434
+ <span class="font-bold">4.9/5 Rating Across 12,000+ Reviews</span>
435
+ </div>
436
+ </div>
437
+ </div>
438
+ </section>
439
+
440
+ <!-- Final CTA Section -->
441
+ <section class="py-20 bg-white">
442
+ <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
443
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">Ready to Change Your Life?</h2>
444
+ <p class="text-xl text-gray-600 mb-10">Small habits compound into massive results. Start your transformation today—it only takes 5 minutes to begin.</p>
445
+
446
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4 mb-16">
447
+ <a href="#" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-4 px-8 rounded-lg text-center">
448
+ <div class="flex items-center justify-center">
449
+ <i class="fab fa-apple mr-3 text-xl"></i>
450
+ <div>
451
+ <div class="text-xs">Download on the</div>
452
+ <div class="text-lg">App Store</div>
453
+ </div>
454
+ </div>
455
+ </a>
456
+ <a href="#" class="bg-gray-900 hover:bg-gray-800 text-white font-bold py-4 px-8 rounded-lg text-center">
457
+ <div class="flex items-center justify-center">
458
+ <i class="fab fa-google-play mr-3 text-xl"></i>
459
+ <div>
460
+ <div class="text-xs">Get it on</div>
461
+ <div class="text-lg">Google Play</div>
462
+ </div>
463
+ </div>
464
+ </a>
465
+ </div>
466
+
467
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
468
+ <div>
469
+ <div class="text-3xl font-bold text-indigo-600">250K+</div>
470
+ <div class="text-gray-600">Users</div>
471
+ </div>
472
+ <div>
473
+ <div class="text-3xl font-bold text-indigo-600">4.9★</div>
474
+ <div class="text-gray-600">Average Rating</div>
475
+ </div>
476
+ <div>
477
+ <div class="text-3xl font-bold text-indigo-600">92%</div>
478
+ <div class="text-gray-600">Success Rate</div>
479
+ </div>
480
+ <div>
481
+ <div class="text-3xl font-bold text-indigo-600">10M+</div>
482
+ <div class="text-gray-600">Habits Tracked</div>
483
+ </div>
484
+ </div>
485
+ </div>
486
+ </section>
487
+
488
+ <!-- Footer -->
489
+ <footer class="bg-gray-50">
490
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
491
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
492
+ <div>
493
+ <div class="flex items-center mb-4">
494
+ <i class="fas fa-check-circle text-indigo-600 text-2xl mr-2"></i>
495
+ <span class="text-xl font-bold text-gray-900">HabitHero</span>
496
+ </div>
497
+ <p class="text-gray-600 mb-4">The simplest way to build habits that last.</p>
498
+ <div class="flex space-x-4">
499
+ <a href="#" class="text-gray-500 hover:text-indigo-600"><i class="fab fa-twitter"></i></a>
500
+ <a href="#" class="text-gray-500 hover:text-indigo-600"><i class="fab fa-instagram"></i></a>
501
+ <a href="#" class="text-gray-500 hover:text-indigo-600"><i class="fab fa-facebook"></i></a>
502
+ </div>
503
+ </div>
504
+ <div>
505
+ <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-4">Product</h3>
506
+ <ul class="space-y-2">
507
+ <li><a href="#" class="text-gray-600 hover:text-indigo-600">Features</a></li>
508
+ <li><a href="#" class="text-gray-600 hover:text-indigo-600">Pricing</a></li>
509
+ <li><a href="#" class="text-gray-600 hover:text-indigo-600">Download</a></li>
510
+ </ul>
511
+ </div>
512
+ <div>
513
+ <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-4">Company</h3>
514
+ <ul class="space-y-2">
515
+ <li><a href="#" class="text-gray-600 hover:text-indigo-600">About</a></li>
516
+ <li><a href="#" class="text-gray-600 hover:text-indigo-600">Blog</a></li>
517
+ <li><a href="#" class="text-gray-600 hover:text-indigo-600">Careers</a></li>
518
+ </ul>
519
+ </div>
520
+ <div>
521
+ <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-4">Support</h3>
522
+ <ul class="space-y-2">
523
+ <li><a href="#" class="text-gray-600 hover:text-indigo-600">Help Center</a></li>
524
+ <li><a href="#" class="text-gray-600 hover:text-indigo-600">Contact</a></li>
525
+ <li><a href="#" class="text-gray-600 hover:text-indigo-600">Privacy Policy</a></li>
526
+ </ul>
527
+ </div>
528
+ </div>
529
+ <div class="mt-12 pt-8 border-t border-gray-200">
530
+ <p class="text-gray-500 text-sm text-center">© 2023 HabitHero. All rights reserved.</p>
531
+ </div>
532
+ </div>
533
+ </footer>
534
+
535
+ <script>
536
+ // Mobile menu toggle
537
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
538
+ const menu = document.getElementById('mobile-menu');
539
+ menu.classList.toggle('hidden');
540
+ });
541
+
542
+ // Smooth scrolling for anchor links
543
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
544
+ anchor.addEventListener('click', function (e) {
545
+ e.preventDefault();
546
+
547
+ const targetId = this.getAttribute('href');
548
+ if (targetId === '#') return;
549
+
550
+ const targetElement = document.querySelector(targetId);
551
+ if (targetElement) {
552
+ targetElement.scrollIntoView({
553
+ behavior: 'smooth'
554
+ });
555
+
556
+ // Close mobile menu if open
557
+ const mobileMenu = document.getElementById('mobile-menu');
558
+ if (!mobileMenu.classList.contains('hidden')) {
559
+ mobileMenu.classList.add('hidden');
560
+ }
561
+ }
562
+ });
563
+ });
564
+ </script>
565
+ <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=Mishak/habithero" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
566
+ </html>