-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdmca.html
More file actions
635 lines (578 loc) · 36.5 KB
/
dmca.html
File metadata and controls
635 lines (578 loc) · 36.5 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
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
<!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>
<!-- DMCA Notice & Takedown Policy -->
<section class="relative py-16 bg-gradient-to-b from-gray-50 to-white">
<!-- Page Header -->
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<div class="inline-block">
<p class="text-sm font-medium text-brand-600 mb-2">Legal Information</p>
<h1 class="text-4xl font-bold text-gray-900">DMCA Notice & Takedown Policy</h1>
<div class="mt-4 flex items-center justify-center text-sm text-gray-500 space-x-4">
<span class="flex items-center">
<svg class="h-4 w-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
</svg>
Last Updated: 2025-04-16
</span>
<span class="flex items-center">
<svg class="h-4 w-4 mr-1" 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>
Current UTC: 08:31:19
</span>
</div>
</div>
</div>
<!-- Quick Actions -->
<div class="mb-12">
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Submit DMCA Notice -->
<a href="#submit-notice" class="flex items-center justify-between p-4 bg-brand-50 rounded-lg hover:bg-brand-100 transition-colors">
<div class="flex items-center">
<div class="bg-brand-600 rounded-lg p-2">
<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="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
</div>
<div class="ml-4">
<h3 class="font-medium text-gray-900">Submit DMCA Notice</h3>
<p class="text-sm text-gray-500">Report copyright infringement</p>
</div>
</div>
<svg class="h-5 w-5 text-gray-400" 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>
<!-- File Counter Notice -->
<a href="#counter-notice" class="flex items-center justify-between p-4 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
<div class="flex items-center">
<div class="bg-gray-600 rounded-lg p-2">
<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="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/>
</svg>
</div>
<div class="ml-4">
<h3 class="font-medium text-gray-900">File Counter Notice</h3>
<p class="text-sm text-gray-500">Dispute a DMCA claim</p>
</div>
</div>
<svg class="h-5 w-5 text-gray-400" 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>
</div>
<!-- Main Content -->
<div class="space-y-8">
<!-- Overview -->
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
<h2 class="text-2xl font-semibold text-gray-900 mb-4">Overview</h2>
<p class="text-gray-600 leading-relaxed">
GitHub Stats Generator respects intellectual property rights and expects its users to do the same. This policy outlines our procedures for responding to notices of alleged copyright infringement in accordance with the Digital Millennium Copyright Act ("DMCA").
</p>
</div>
<!-- Notice Requirements -->
<div id="submit-notice" class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
<h2 class="text-2xl font-semibold text-gray-900 mb-4">DMCA Notice Requirements</h2>
<div class="space-y-4">
<p class="text-gray-600">To file a copyright infringement notification, please send a written communication that includes:</p>
<div class="grid gap-4 mt-6">
<div class="flex items-start">
<div class="flex-shrink-0 h-6 w-6 flex items-center justify-center rounded-full bg-brand-100 text-brand-600 font-semibold text-sm">1</div>
<div class="ml-4">
<p class="text-gray-700">A physical or electronic signature of the copyright owner or authorized agent</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 h-6 w-6 flex items-center justify-center rounded-full bg-brand-100 text-brand-600 font-semibold text-sm">2</div>
<div class="ml-4">
<p class="text-gray-700">Identification of the copyrighted work claimed to be infringed</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 h-6 w-6 flex items-center justify-center rounded-full bg-brand-100 text-brand-600 font-semibold text-sm">3</div>
<div class="ml-4">
<p class="text-gray-700">Identification of the infringing material and its location</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 h-6 w-6 flex items-center justify-center rounded-full bg-brand-100 text-brand-600 font-semibold text-sm">4</div>
<div class="ml-4">
<p class="text-gray-700">Your contact information (name, address, telephone number, email)</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 h-6 w-6 flex items-center justify-center rounded-full bg-brand-100 text-brand-600 font-semibold text-sm">5</div>
<div class="ml-4">
<p class="text-gray-700">A statement of your good faith belief that the use is not authorized</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 h-6 w-6 flex items-center justify-center rounded-full bg-brand-100 text-brand-600 font-semibold text-sm">6</div>
<div class="ml-4">
<p class="text-gray-700">A statement of accuracy and authorization under penalty of perjury</p>
</div>
</div>
</div>
</div>
</div>
<!-- Contact Methods -->
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
<h2 class="text-2xl font-semibold text-gray-900 mb-4">How to Submit Your Notice</h2>
<div class="grid md:grid-cols-2 gap-6">
<!-- Email -->
<div class="bg-gray-50 rounded-lg p-4">
<div class="flex items-center mb-4">
<svg class="h-6 w-6 text-brand-600" 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>
<h3 class="ml-2 font-medium text-gray-900">Email</h3>
</div>
<p class="text-brand-600">dmca@githubstats.com</p>
</div>
<!-- Postal Mail -->
<div class="bg-gray-50 rounded-lg p-4">
<div class="flex items-center mb-4">
<svg class="h-6 w-6 text-brand-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/>
</svg>
<h3 class="ml-2 font-medium text-gray-900">Postal Mail</h3>
</div>
<address class="text-gray-600 not-italic">
DMCA Agent<br>
GitHub Stats Generator<br>
[Your Address]
</address>
</div>
</div>
</div>
<!-- Counter Notice -->
<div id="counter-notice" class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
<h2 class="text-2xl font-semibold text-gray-900 mb-4">Counter Notice</h2>
<div class="prose prose-blue max-w-none">
<p class="text-gray-600 mb-4">
If you believe your content was removed in error, you may submit a counter notice containing:
</p>
<div class="bg-gray-50 rounded-lg p-4 space-y-3">
<div class="flex items-start">
<svg class="h-5 w-5 text-brand-600 mt-0.5 flex-shrink-0" 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>
<p class="ml-3 text-gray-600">Your physical or electronic signature</p>
</div>
<div class="flex items-start">
<svg class="h-5 w-5 text-brand-600 mt-0.5 flex-shrink-0" 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>
<p class="ml-3 text-gray-600">Identification of the removed material</p>
</div>
<div class="flex items-start">
<svg class="h-5 w-5 text-brand-600 mt-0.5 flex-shrink-0" 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>
<p class="ml-3 text-gray-600">A statement under penalty of perjury of your good faith belief</p>
</div>
<div class="flex items-start">
<svg class="h-5 w-5 text-brand-600 mt-0.5 flex-shrink-0" 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>
<p class="ml-3 text-gray-600">Your contact information and consent to legal jurisdiction</p>
</div>
</div>
</div>
</div>
<!-- Notice Timeline -->
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
<h2 class="text-2xl font-semibold text-gray-900 mb-4">Processing Timeline</h2>
<div class="relative">
<div class="absolute inset-0 flex items-center" aria-hidden="true">
<div class="w-full border-t border-gray-200"></div>
</div>
<div class="relative flex justify-between">
<div>
<span class="bg-brand-600 h-8 w-8 rounded-full flex items-center justify-center ring-8 ring-white">
<svg class="h-5 w-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
</svg>
</span>
<p class="mt-2 text-sm text-gray-500">Notice Received</p>
</div>
<div>
<span class="bg-brand-600 h-8 w-8 rounded-full flex items-center justify-center ring-8 ring-white">
<svg class="h-5 w-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
</span>
<p class="mt-2 text-sm text-gray-500">Review (1-2 days)</p>
</div>
<div>
<span class="bg-brand-600 h-8 w-8 rounded-full flex items-center justify-center ring-8 ring-white">
<svg class="h-5 w-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
</span>
<p class="mt-2 text-sm text-gray-500">Action Taken</p>
</div>
</div>
</div>
</div>
</div>
<!-- Footer Actions -->
<div class="mt-12 flex justify-center space-x-4">
<a href="/terms" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
Terms of Service
</a>
<a href="/privacy" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
Privacy Policy
</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>