-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
451 lines (433 loc) · 24.9 KB
/
index.html
File metadata and controls
451 lines (433 loc) · 24.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cal Hub – AI Calorie Tracker</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
brand: {
50: "#f0fdf4",
100: "#dcfce7",
600: "#16a34a",
700: "#15803d",
},
},
fontFamily: {
sans: ["Inter", "ui-sans-serif", "system-ui"],
},
animation: {
'fade-in': 'fadeIn 0.6s ease-out',
'slide-up': 'slideUp 0.6s ease-out',
'float': 'float 6s ease-in-out infinite',
},
keyframes: {
fadeIn: {
'0%': { opacity: '0' },
'100%': { opacity: '1' },
},
slideUp: {
'0%': { transform: 'translateY(20px)', opacity: '0' },
'100%': { transform: 'translateY(0)', opacity: '1' },
},
float: {
'0%, 100%': { transform: 'translateY(0px)' },
'50%': { transform: 'translateY(-20px)' },
},
},
},
},
};
</script>
<style>
html {
scroll-behavior: smooth;
}
body {
font-feature-settings: "kern" 1, "liga" 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.gradient-text {
background: linear-gradient(135deg, #16a34a 0%, #10b981 50%, #14b8a6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
</style>
</head>
<body class="text-gray-800 bg-white font-sans">
<!-- Navbar -->
<header
class="fixed top-0 w-full bg-white/95 backdrop-blur-xl shadow-sm border-b border-gray-100 z-50 transition-all duration-300"
>
<div
class="max-w-7xl mx-auto px-6 lg:px-8 py-4 flex justify-between items-center"
>
<h1 class="text-2xl font-bold text-green-600 tracking-tight">Cal Hub</h1>
<nav class="hidden md:flex space-x-10 text-sm font-medium">
<a href="#product" class="text-gray-700 hover:text-green-600 transition-colors duration-200 relative group">
Product
<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-green-600 transition-all duration-200 group-hover:w-full"></span>
</a>
<a href="#features" class="text-gray-700 hover:text-green-600 transition-colors duration-200 relative group">
Features
<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-green-600 transition-all duration-200 group-hover:w-full"></span>
</a>
<a href="#contact" class="text-gray-700 hover:text-green-600 transition-colors duration-200 relative group">
Contact
<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-green-600 transition-all duration-200 group-hover:w-full"></span>
</a>
</nav>
<a
href="https://apps.apple.com/app/cal-hub-calorie-tracker/id6749870891"
target="_blank"
rel="noopener noreferrer"
class="hidden md:inline-flex items-center bg-black text-white px-5 py-2.5 rounded-xl font-semibold hover:bg-gray-900 transition-all duration-200 space-x-2 shadow-lg hover:shadow-xl transform hover:scale-105"
>
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
<path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
</svg>
<span class="text-sm">App Store</span>
</a>
</div>
</header>
<!-- Hero Section -->
<section
class="relative bg-gradient-to-br from-green-600 via-emerald-500 to-teal-500 text-white min-h-screen flex flex-col justify-center overflow-hidden"
>
<!-- Decorative background elements -->
<div class="absolute inset-0 overflow-hidden">
<div class="absolute -top-40 -right-40 w-80 h-80 bg-white/10 rounded-full blur-3xl"></div>
<div class="absolute -bottom-40 -left-40 w-80 h-80 bg-white/10 rounded-full blur-3xl"></div>
</div>
<div
class="relative max-w-7xl mx-auto px-6 lg:px-8 grid md:grid-cols-2 items-center gap-16 pt-32 pb-24"
>
<div class="animate-slide-up">
<div class="inline-flex items-center gap-2 mb-6 px-4 py-2 bg-white/20 backdrop-blur-sm rounded-full text-sm font-medium">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
</svg>
AI-Powered Nutrition Tracking
</div>
<h2 class="text-5xl md:text-6xl lg:text-7xl font-extrabold leading-tight mb-6 tracking-tight">
AI-Powered Calorie Tracking
</h2>
<p class="text-xl md:text-2xl font-semibold text-green-50 mb-6 leading-relaxed">
Just snap a photo — let AI do the counting.
</p>
<p class="text-lg md:text-xl text-green-100 mb-10 leading-relaxed max-w-xl">
Cal Hub uses advanced AI vision to instantly analyze your meals,
estimate calories and macronutrients, and help you stay on track
with visual analytics and progress charts.
</p>
<div class="flex flex-col sm:flex-row gap-4">
<a
href="#product"
class="inline-flex items-center justify-center bg-white text-green-700 font-semibold px-8 py-4 rounded-xl hover:bg-green-50 transition-all duration-200 shadow-xl hover:shadow-2xl transform hover:scale-105"
>
Learn More
</a>
<a
href="https://apps.apple.com/app/cal-hub-calorie-tracker/id6749870891"
target="_blank"
rel="noopener noreferrer"
class="inline-flex items-center justify-center bg-black/90 backdrop-blur-sm text-white font-semibold px-8 py-4 rounded-xl hover:bg-black transition-all duration-200 space-x-3 shadow-xl hover:shadow-2xl transform hover:scale-105"
>
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
<path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
</svg>
<div class="text-left">
<div class="text-xs opacity-90">Download on the</div>
<div class="text-sm font-bold">App Store</div>
</div>
</a>
</div>
</div>
<div class="relative max-w-md mx-auto animate-float">
<div class="absolute inset-0 bg-gradient-to-br from-white/20 to-transparent rounded-3xl blur-2xl transform rotate-6"></div>
<div class="relative p-6">
<img
src="./best_calorie_counter.jpg"
alt="Cal Hub AI Calorie Tracker - Main Dashboard"
class="w-full h-auto rounded-3xl shadow-2xl border-4 border-white/40 object-contain transform hover:scale-105 transition-transform duration-300"
/>
</div>
</div>
</div>
</section>
<!-- Product Section -->
<section id="product" class="py-32 bg-gradient-to-b from-white to-gray-50">
<div
class="max-w-7xl mx-auto px-6 lg:px-8 grid md:grid-cols-2 gap-16 items-center"
>
<div class="relative max-w-md mx-auto order-2 md:order-1">
<div class="absolute -inset-4 bg-gradient-to-br from-green-100 to-emerald-100 rounded-3xl blur-2xl opacity-50"></div>
<div class="relative p-6">
<img
src="./Analyse_your_meal.jpg"
alt="Cal Hub Meal Analysis - AI Food Recognition"
class="w-full h-auto rounded-3xl shadow-2xl object-contain transform hover:scale-105 transition-transform duration-300"
/>
</div>
</div>
<div class="order-1 md:order-2">
<div class="inline-block mb-4 px-4 py-1.5 bg-green-100 text-green-700 rounded-full text-sm font-semibold">
Core Technology
</div>
<h3 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6 leading-tight tracking-tight">
AI That Sees What You Eat
</h3>
<p class="text-lg text-gray-600 mb-8 leading-relaxed">
Take a photo of your meal, and Cal Hub's AI instantly detects
ingredients, estimates calories, and breaks down macronutrients like
proteins, carbs, and fats. Your entire nutrition log builds up
automatically — no manual entry required.
</p>
<ul class="space-y-4 text-gray-700">
<li class="flex items-start space-x-4">
<div class="flex-shrink-0 w-8 h-8 rounded-lg bg-green-100 flex items-center justify-center text-green-600 mt-0.5">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
</div>
<span class="text-lg pt-1">AI-based meal photo recognition</span>
</li>
<li class="flex items-start space-x-4">
<div class="flex-shrink-0 w-8 h-8 rounded-lg bg-green-100 flex items-center justify-center text-green-600 mt-0.5">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
</svg>
</div>
<span class="text-lg pt-1">Historical trends and meal history</span>
</li>
<li class="flex items-start space-x-4">
<div class="flex-shrink-0 w-8 h-8 rounded-lg bg-green-100 flex items-center justify-center text-green-600 mt-0.5">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
</svg>
</div>
<span class="text-lg pt-1">Visual charts for analytics and progress</span>
</li>
</ul>
</div>
</div>
</section>
<!-- Product Showcase Section -->
<section class="py-32 bg-white">
<div class="max-w-7xl mx-auto px-6 lg:px-8">
<div class="text-center mb-20">
<div class="inline-block mb-4 px-4 py-1.5 bg-green-100 text-green-700 rounded-full text-sm font-semibold">
App Features
</div>
<h3 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6 tracking-tight">
See Cal Hub in Action
</h3>
<p class="text-lg text-gray-600 max-w-2xl mx-auto leading-relaxed">
Explore our intuitive interface designed to make calorie tracking effortless and engaging.
</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Progress Dashboard -->
<div class="group text-center bg-gradient-to-br from-white to-gray-50 p-8 rounded-3xl border border-gray-100 hover:border-green-200 hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
<div class="max-w-xs mx-auto mb-6 p-4">
<div class="relative">
<div class="absolute -inset-2 bg-gradient-to-br from-green-100 to-emerald-100 rounded-2xl blur opacity-0 group-hover:opacity-50 transition-opacity duration-300"></div>
<img
src="./Progress_dashboard.jpg"
alt="Cal Hub Progress Dashboard - Track Your Health Goals"
class="relative w-full h-auto rounded-2xl shadow-xl object-contain transform group-hover:scale-105 transition-transform duration-300"
/>
</div>
</div>
<h4 class="text-xl font-bold text-gray-900 mb-3">Progress Dashboard</h4>
<p class="text-gray-600 leading-relaxed">Visualize your calorie trends and health goals with interactive charts</p>
</div>
<!-- Meal History -->
<div class="group text-center bg-gradient-to-br from-white to-gray-50 p-8 rounded-3xl border border-gray-100 hover:border-green-200 hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
<div class="max-w-xs mx-auto mb-6 p-4">
<div class="relative">
<div class="absolute -inset-2 bg-gradient-to-br from-green-100 to-emerald-100 rounded-2xl blur opacity-0 group-hover:opacity-50 transition-opacity duration-300"></div>
<img
src="./meal_history.jpg"
alt="Cal Hub Meal History - Complete Nutrition Timeline"
class="relative w-full h-auto rounded-2xl shadow-xl object-contain transform group-hover:scale-105 transition-transform duration-300"
/>
</div>
</div>
<h4 class="text-xl font-bold text-gray-900 mb-3">Meal History</h4>
<p class="text-gray-600 leading-relaxed">Browse your complete nutrition timeline with detailed meal breakdowns</p>
</div>
<!-- Settings & Customization -->
<div class="group text-center bg-gradient-to-br from-white to-gray-50 p-8 rounded-3xl border border-gray-100 hover:border-green-200 hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 md:col-span-2 lg:col-span-1">
<div class="max-w-xs mx-auto mb-6 p-4">
<div class="relative">
<div class="absolute -inset-2 bg-gradient-to-br from-green-100 to-emerald-100 rounded-2xl blur opacity-0 group-hover:opacity-50 transition-opacity duration-300"></div>
<img
src="./settings_app.jpg"
alt="Cal Hub Settings - Personalize Your Experience"
class="relative w-full h-auto rounded-2xl shadow-xl object-contain transform group-hover:scale-105 transition-transform duration-300"
/>
</div>
</div>
<h4 class="text-xl font-bold text-gray-900 mb-3">Smart Settings</h4>
<p class="text-gray-600 leading-relaxed">Customize your goals, preferences, and notification settings</p>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section id="features" class="py-32 bg-gradient-to-b from-gray-50 to-white">
<div class="max-w-7xl mx-auto px-6 lg:px-8">
<div class="text-center mb-20">
<div class="inline-block mb-4 px-4 py-1.5 bg-green-100 text-green-700 rounded-full text-sm font-semibold">
Key Features
</div>
<h3 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6 tracking-tight">
Powerful Features Built with AI
</h3>
<p class="text-lg text-gray-600 max-w-2xl mx-auto leading-relaxed">
Cal Hub combines computer vision, data analytics, and smart tracking
tools to make nutrition management effortless.
</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div
class="group bg-white p-10 rounded-3xl border border-gray-100 hover:border-green-200 shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2"
>
<div
class="w-20 h-20 mx-auto mb-6 flex items-center justify-center bg-gradient-to-br from-green-100 to-green-50 text-green-600 rounded-2xl shadow-lg group-hover:scale-110 transition-transform duration-300"
>
<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
</svg>
</div>
<h4 class="text-2xl font-bold text-gray-900 mb-4 text-center">AI Meal Recognition</h4>
<p class="text-gray-600 text-center leading-relaxed">
Instantly analyze photos of your meals for calories and nutrients
using advanced AI models.
</p>
</div>
<div
class="group bg-white p-10 rounded-3xl border border-gray-100 hover:border-emerald-200 shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2"
>
<div
class="w-20 h-20 mx-auto mb-6 flex items-center justify-center bg-gradient-to-br from-emerald-100 to-emerald-50 text-emerald-600 rounded-2xl shadow-lg group-hover:scale-110 transition-transform duration-300"
>
<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
</svg>
</div>
<h4 class="text-2xl font-bold text-gray-900 mb-4 text-center">Analytics Dashboard</h4>
<p class="text-gray-600 text-center leading-relaxed">
Get charts and visual reports on your calorie trends, macros, and
goals over time.
</p>
</div>
<div
class="group bg-white p-10 rounded-3xl border border-gray-100 hover:border-teal-200 shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2"
>
<div
class="w-20 h-20 mx-auto mb-6 flex items-center justify-center bg-gradient-to-br from-teal-100 to-teal-50 text-teal-600 rounded-2xl shadow-lg group-hover:scale-110 transition-transform duration-300"
>
<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<h4 class="text-2xl font-bold text-gray-900 mb-4 text-center">Meal History</h4>
<p class="text-gray-600 text-center leading-relaxed">
Access your entire eating history with timestamps and detailed
nutrition breakdowns.
</p>
</div>
</div>
</div>
</section>
<!-- Download Section -->
<section id="download" class="py-32 bg-gradient-to-br from-green-600 via-emerald-500 to-teal-500 text-white relative overflow-hidden">
<!-- Decorative background elements -->
<div class="absolute inset-0 overflow-hidden">
<div class="absolute top-20 left-20 w-64 h-64 bg-white/10 rounded-full blur-3xl"></div>
<div class="absolute bottom-20 right-20 w-64 h-64 bg-white/10 rounded-full blur-3xl"></div>
</div>
<div class="relative max-w-4xl mx-auto px-6 lg:px-8 text-center">
<div class="inline-block mb-6 px-4 py-2 bg-white/20 backdrop-blur-sm rounded-full text-sm font-semibold">
Available Now
</div>
<h3 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 tracking-tight">
Get Cal Hub Today
</h3>
<p class="text-xl md:text-2xl text-green-50 mb-4 leading-relaxed max-w-2xl mx-auto">
Start your AI-powered nutrition journey. Available now on the App Store.
</p>
<p class="text-sm text-green-100 mb-12">
All download buttons throughout the site link directly to the App Store.
</p>
<!-- App Store Button - Replace href with your actual App Store URL -->
<a
href="https://apps.apple.com/app/cal-hub-calorie-tracker/id6749870891"
target="_blank"
rel="noopener noreferrer"
class="inline-flex items-center bg-black/90 backdrop-blur-sm text-white font-semibold px-10 py-5 rounded-2xl hover:bg-black transition-all duration-200 space-x-4 shadow-2xl hover:shadow-3xl transform hover:scale-105 mb-8"
>
<svg width="36" height="36" viewBox="0 0 24 24" fill="currentColor">
<path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
</svg>
<div class="text-left">
<div class="text-sm opacity-90">Download on the</div>
<div class="text-xl font-bold">App Store</div>
</div>
</a>
<p class="text-sm text-green-100">
Compatible with iPhone and iPad • iOS 14.0 or later
</p>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="bg-white py-32">
<div class="max-w-3xl mx-auto px-6 lg:px-8 text-center">
<div class="inline-block mb-4 px-4 py-1.5 bg-green-100 text-green-700 rounded-full text-sm font-semibold">
Contact Us
</div>
<h3 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6 tracking-tight">Get in Touch</h3>
<p class="text-lg text-gray-600 mb-10 leading-relaxed max-w-xl mx-auto">
Have feedback, partnership ideas, or want to integrate our AI engine?
Reach out anytime.
</p>
<a
href="mailto:ishacorporations+support@gmail.com"
class="inline-flex items-center bg-green-600 text-white px-10 py-4 rounded-xl font-semibold hover:bg-green-700 transition-all duration-200 shadow-lg hover:shadow-xl transform hover:scale-105"
>
<svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
</svg>
ishacorporations+support@gmail.com
</a>
</div>
</section>
<!-- Footer -->
<footer class="bg-gradient-to-br from-green-700 via-green-600 to-emerald-600 text-white py-12">
<div class="max-w-7xl mx-auto px-6 lg:px-8">
<div class="flex flex-col md:flex-row justify-between items-center">
<p class="mb-4 md:mb-0 text-green-50 font-medium">© 2025 Cal Hub. All rights reserved.</p>
<div class="flex space-x-6">
<a href="#" class="text-green-100 hover:text-white transition-colors duration-200 font-medium">Twitter</a>
<a href="#" class="text-green-100 hover:text-white transition-colors duration-200 font-medium">Instagram</a>
<a href="#" class="text-green-100 hover:text-white transition-colors duration-200 font-medium">Facebook</a>
</div>
</div>
</div>
</footer>
</body>
</html>