-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcontact.html
More file actions
508 lines (454 loc) · 27.9 KB
/
contact.html
File metadata and controls
508 lines (454 loc) · 27.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
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GitInsights Pro | Enterprise GitHub Analytics Platform</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
brand: {
50: '#f0fdf4',
100: '#dcfce7',
200: '#bbf7d0',
300: '#86efac',
400: '#4ade80',
500: '#22c55e',
600: '#16a34a',
700: '#15803d',
800: '#166534',
900: '#14532d',
}
},
animation: {
'gradient': 'gradient 8s linear infinite',
'float': 'float 3s ease-in-out infinite',
},
keyframes: {
gradient: {
'0%, 100%': {
'background-size': '200% 200%',
'background-position': 'left center'
},
'50%': {
'background-size': '200% 200%',
'background-position': 'right center'
}
},
float: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-10px)' }
}
}
}
}
}
</script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap">
<style>
/* Base styles directly in HTML */
body {
font-family: 'Plus Jakarta Sans', sans-serif;
}
/* Custom scrollbar styles */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #22c55e;
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: #15803d;
}
</style>
</head>
<body class="bg-white selection:bg-brand-200 selection:text-brand-900">
<!-- Announcement Banner -->
<div class="relative isolate flex items-center gap-x-6 overflow-hidden bg-brand-50 px-6 py-2.5 sm:px-3.5 sm:before:flex-1">
<div class="absolute left-[max(-7rem,calc(50%-52rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl">
<div class="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-brand-500 to-brand-300 opacity-30"></div>
</div>
<div class="flex flex-wrap items-center gap-x-4 gap-y-2">
<p class="text-sm leading-6 text-gray-900">
<strong class="font-semibold">GitInsights Pro 2025</strong>
<svg viewBox="0 0 2 2" class="mx-2 inline h-0.5 w-0.5 fill-current">
<circle cx="1" cy="1" r="1" />
</svg>
New features available for enterprise users
</p>
<a href="#" class="flex-none rounded-full bg-brand-900 px-3.5 py-1 text-sm font-semibold text-white shadow-sm hover:bg-brand-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-900">
Learn more <span aria-hidden="true">→</span>
</a>
</div>
<div class="flex flex-1 justify-end">
<button type="button" class="-m-3 p-3 focus-visible:outline-offset-[-4px]">
<span class="sr-only">Dismiss</span>
<svg class="h-5 w-5 text-gray-900" viewBox="0 0 20 20" fill="currentColor">
<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
</svg>
</button>
</div>
</div>
<!-- Navigation Bar -->
<nav class="fixed top-0 inset-x-0 z-50 bg-white/80 backdrop-blur-lg border-b border-brand-100/50 transition-all duration-300">
<div class="max-w-[2000px] mx-auto">
<div class="px-4 sm:px-6 lg:px-8">
<div class="flex h-16 items-center justify-between">
<!-- Logo Section -->
<div class="flex items-center">
<a href="#" class="flex items-center space-x-3">
<div class="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-r from-brand-600 to-brand-500 shadow-lg shadow-brand-500/25">
<svg class="h-6 w-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/>
</svg>
</div>
<span class="text-2xl font-bold bg-gradient-to-r from-brand-600 to-brand-500 bg-clip-text text-transparent">
GitInsights<span class="text-gray-900">Pro</span>
</span>
</a>
</div>
<!-- Desktop Navigation -->
<div class="hidden md:flex md:items-center md:space-x-8">
<a href="#generator" class="text-sm font-medium text-gray-700 hover:text-brand-600 transition-colors duration-200 ease-in-out">Generator</a>
<a href="#features" class="text-sm font-medium text-gray-700 hover:text-brand-600 transition-colors duration-200 ease-in-out">Features</a>
<a href="#analytics" class="text-sm font-medium text-gray-700 hover:text-brand-600 transition-colors duration-200 ease-in-out">Analytics</a>
<a href="#about" class="text-sm font-medium text-gray-700 hover:text-brand-600 transition-colors duration-200 ease-in-out">About</a>
<a href="#pricing" class="text-sm font-medium text-gray-700 hover:text-brand-600 transition-colors duration-200 ease-in-out">Pricing</a>
</div>
<!-- Action Buttons -->
<div class="flex items-center space-x-4">
<a href="#" class="hidden sm:inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-brand-700 hover:text-brand-800 transition-colors duration-200 ease-in-out">
Sign in
</a>
<a href="#generator" class="inline-flex items-center justify-center px-4 py-2 text-sm font-semibold text-white bg-brand-600 hover:bg-brand-700 rounded-xl shadow-lg shadow-brand-500/25 transition-all duration-200 ease-in-out hover:shadow-brand-500/35">
Get Started
<svg class="ml-2 -mr-1 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
</svg>
</a>
<!-- Mobile Menu Button -->
<button type="button" class="md:hidden inline-flex items-center justify-center p-2 rounded-lg text-gray-700 hover:text-brand-600 hover:bg-brand-50 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-brand-500">
<span class="sr-only">Open menu</span>
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
</div>
</div>
</div>
</div>
<!-- Mobile Navigation Menu -->
<div class="hidden md:hidden">
<div class="px-2 pt-2 pb-3 space-y-1">
<a href="#generator" class="block px-3 py-2 rounded-lg text-base font-medium text-gray-700 hover:text-brand-600 hover:bg-brand-50">Generator</a>
<a href="#features" class="block px-3 py-2 rounded-lg text-base font-medium text-gray-700 hover:text-brand-600 hover:bg-brand-50">Features</a>
<a href="#analytics" class="block px-3 py-2 rounded-lg text-base font-medium text-gray-700 hover:text-brand-600 hover:bg-brand-50">Analytics</a>
<a href="#about" class="block px-3 py-2 rounded-lg text-base font-medium text-gray-700 hover:text-brand-600 hover:bg-brand-50">About</a>
<a href="#pricing" class="block px-3 py-2 rounded-lg text-base font-medium text-gray-700 hover:text-brand-600 hover:bg-brand-50">Pricing</a>
</div>
</div>
</nav>
<!-- Contact Us Section -->
<section class="relative py-16 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- Header -->
<div class="text-center max-w-2xl mx-auto mb-12">
<h1 class="text-3xl font-bold text-gray-900 sm:text-4xl mb-4">
Contact Us
</h1>
<p class="text-lg text-gray-600">
Have questions? We're here to help. Send us a message and we'll respond as soon as possible.
</p>
</div>
<!-- Main Content -->
<div class="max-w-4xl mx-auto bg-white rounded-lg shadow-sm overflow-hidden">
<div class="grid grid-cols-1 md:grid-cols-3">
<!-- Left Sidebar - Contact Info -->
<div class="bg-brand-600 p-8 text-white">
<h3 class="text-lg font-semibold mb-4">Quick Connect</h3>
<!-- Contact Methods -->
<div class="space-y-6">
<!-- Email -->
<div class="flex items-center">
<svg class="h-6 w-6 flex-shrink-0" 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"/>
</svg>
<span class="ml-3">support@githubstats.com</span>
</div>
<!-- Discord -->
<div class="flex items-center">
<svg class="h-6 w-6 flex-shrink-0" viewBox="0 0 24 24" fill="currentColor">
<path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03z"/>
</svg>
<span class="ml-3">Join Discord Community</span>
</div>
<!-- Time -->
<div class="flex items-center">
<svg class="h-6 w-6 flex-shrink-0" 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"/>
</svg>
<span class="ml-3" id="current-utc-time">2025-04-16 08:23:44</span>
</div>
</div>
<!-- Support Hours -->
<div class="mt-8 pt-8 border-t border-brand-500">
<h4 class="font-medium mb-2">Support Hours</h4>
<p class="text-sm opacity-90">Monday - Friday<br>9:00 AM - 6:00 PM (UTC)</p>
</div>
</div>
<!-- Right Side - Contact Form -->
<div class="col-span-2 p-8">
<form id="contact-form" class="space-y-6">
<!-- Name -->
<div>
<label for="name" class="block text-sm font-medium text-gray-700">Name</label>
<input type="text" id="name" name="name" required
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-brand-500 focus:ring-brand-500">
</div>
<!-- Email -->
<div>
<label for="email" class="block text-sm font-medium text-gray-700">Email</label>
<input type="email" id="email" name="email" required
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-brand-500 focus:ring-brand-500">
</div>
<!-- Subject -->
<div>
<label for="subject" class="block text-sm font-medium text-gray-700">Subject</label>
<select id="subject" name="subject" required
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-brand-500 focus:ring-brand-500">
<option value="">Select a topic</option>
<option value="support">Technical Support</option>
<option value="feature">Feature Request</option>
<option value="bug">Bug Report</option>
<option value="other">Other</option>
</select>
</div>
<!-- Message -->
<div>
<label for="message" class="block text-sm font-medium text-gray-700">Message</label>
<textarea id="message" name="message" rows="4" required
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-brand-500 focus:ring-brand-500"></textarea>
</div>
<!-- Submit Button -->
<div class="flex justify-end">
<button type="submit"
class="px-4 py-2 bg-brand-600 text-white rounded-md hover:bg-brand-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500">
Send Message
</button>
</div>
</form>
</div>
</div>
</div>
<!-- FAQ Section -->
<div class="mt-16 max-w-2xl mx-auto text-center">
<h2 class="text-2xl font-bold text-gray-900 mb-4">Frequently Asked Questions</h2>
<p class="text-gray-600 mb-8">
Can't find what you're looking for? Check our FAQ section
</p>
<a href="/faq" class="inline-flex items-center text-brand-600 hover:text-brand-500">
View FAQ
<svg class="ml-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
</svg>
</a>
</div>
</div>
</section>
<!-- Footer Section -->
<footer class="relative pt-20 pb-12 bg-gray-900 overflow-hidden">
<!-- Decorative Elements -->
<div class="absolute inset-0 -z-10">
<!-- Gradient Overlay -->
<div class="absolute inset-0 bg-gradient-to-b from-gray-900/95 to-gray-900"></div>
<!-- Animated Circles -->
<div class="absolute bottom-0 right-1/4 w-96 h-96 bg-brand-600/20 rounded-full mix-blend-overlay filter blur-3xl animate-blob"></div>
<div class="absolute top-1/2 left-1/4 w-96 h-96 bg-brand-500/20 rounded-full mix-blend-overlay filter blur-3xl animate-blob animation-delay-2000"></div>
<!-- Grid Pattern -->
<div class="absolute inset-0 bg-[linear-gradient(to_right,#ffffff05_1px,transparent_1px),linear-gradient(to_bottom,#ffffff05_1px,transparent_1px)] bg-[size:14px_24px]"></div>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- Main Footer Content -->
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 pb-16 border-b border-gray-800">
<!-- Company Info -->
<div class="lg:col-span-4 space-y-8">
<!-- Logo -->
<div class="flex items-center space-x-3">
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-r from-brand-600 to-brand-500 shadow-lg">
<svg class="h-7 w-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
</div>
<span class="text-2xl font-bold text-white">
Get<span class="text-brand-400">Stats</span>Pro
</span>
</div>
<!-- Description -->
<p class="text-gray-400 text-base max-w-sm">
Transform your GitHub profile into beautiful analytics and insights. Track your progress and showcase your achievements.
</p>
<!-- Social Links -->
<div class="flex space-x-6">
<a href="#" class="text-gray-400 hover:text-brand-400 transition-colors duration-200">
<span class="sr-only">Twitter</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"/>
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-brand-400 transition-colors duration-200">
<span class="sr-only">GitHub</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"/>
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-brand-400 transition-colors duration-200">
<span class="sr-only">LinkedIn</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
</svg>
</a>
</div>
</div>
<!-- Quick Links -->
<div class="lg:col-span-2">
<h3 class="text-sm font-semibold text-white uppercase tracking-wider mb-4">Product</h3>
<ul class="space-y-3">
<li>
<a href="#generator" class="text-base text-gray-400 hover:text-brand-400 transition-colors duration-200">
Generator
</a>
</li>
<li>
<a href="#features" class="text-base text-gray-400 hover:text-brand-400 transition-colors duration-200">
Features
</a>
</li>
<li>
<a href="#pricing" class="text-base text-gray-400 hover:text-brand-400 transition-colors duration-200">
Pricing
</a>
</li>
<li>
<a href="#faq" class="text-base text-gray-400 hover:text-brand-400 transition-colors duration-200">
FAQ
</a>
</li>
</ul>
</div>
<!-- Resources -->
<div class="lg:col-span-2">
<h3 class="text-sm font-semibold text-white uppercase tracking-wider mb-4">Resources</h3>
<ul class="space-y-3">
<li>
<a href="#" class="text-base text-gray-400 hover:text-brand-400 transition-colors duration-200">
Documentation
</a>
</li>
<li>
<a href="#" class="text-base text-gray-400 hover:text-brand-400 transition-colors duration-200">
API Reference
</a>
</li>
<li>
<a href="#" class="text-base text-gray-400 hover:text-brand-400 transition-colors duration-200">
Blog
</a>
</li>
<li>
<a href="#" class="text-base text-gray-400 hover:text-brand-400 transition-colors duration-200">
Support
</a>
</li>
</ul>
</div>
<!-- Newsletter -->
<div class="lg:col-span-4">
<h3 class="text-sm font-semibold text-white uppercase tracking-wider mb-4">Stay Updated</h3>
<p class="text-base text-gray-400 mb-4">
Get notified about new features and updates.
</p>
<form class="flex flex-col sm:flex-row gap-3">
<div class="flex-grow">
<label for="email-address" class="sr-only">Email address</label>
<input type="email" id="email-address" name="email-address" required
class="block w-full rounded-lg bg-gray-800 border border-gray-700 py-3 px-4 text-base text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-brand-500"
placeholder="Enter your email">
</div>
<button type="submit"
class="flex-none inline-flex justify-center items-center rounded-lg bg-brand-600 px-6 py-3 text-base font-medium text-white shadow-sm hover:bg-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 focus:ring-offset-gray-900 transition-colors duration-200">
Subscribe
</button>
</form>
</div>
</div>
<!-- Bottom Bar -->
<div class="pt-8 flex flex-col sm:flex-row justify-between items-center">
<!-- Copyright -->
<p class="text-gray-400 text-base">
© 2025 GetStats Pro. All rights reserved.
</p>
<!-- Legal Links -->
<nav class="flex space-x-6 mt-4 sm:mt-0">
<a href="#" class="text-sm text-gray-400 hover:text-brand-400 transition-colors duration-200">
Privacy Policy
</a>
<a href="#" class="text-sm text-gray-400 hover:text-brand-400 transition-colors duration-200">
Terms of Service
</a>
<a href="#" class="text-sm text-gray-400 hover:text-brand-400 transition-colors duration-200">
Cookie Policy
</a>
</nav>
</div>
</div>
</footer>
<!-- Additional styles for animations -->
<style>
@keyframes blob {
0%, 100% { transform: translate(0, 0) scale(1); }
25% { transform: translate(20px, -50px) scale(1.1); }
50% { transform: translate(-20px, 20px) scale(0.9); }
75% { transform: translate(20px, 50px) scale(0.95); }
}
.animate-blob {
animation: blob 7s infinite;
}
.animation-delay-2000 {
animation-delay: 2s;
}
</style>
<script>
// Add your JavaScript here
function toggleMobileMenu() {
const mobileMenu = document.querySelector('.md\\:hidden');
mobileMenu.classList.toggle('hidden');
}
// Add smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Add scroll event listener for header
window.addEventListener('scroll', function() {
const header = document.querySelector('nav');
if (window.scrollY > 0) {
header.classList.add('shadow-md');
} else {
header.classList.remove('shadow-md');
}
});
</script>
<script src="main.js"></script>
</body>
</html>