Hugging Face's logo

Spaces:
tutosutiles
/
codeguardian
Running

App Files Community
tutosutiles commited on
Commit
2a122de
·
verified ·
1 Parent(s): 655fb70

ameliore encore - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +982 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Codeguardian
3
- emoji: 🐢
4
- colorFrom: gray
5
- colorTo: yellow
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: codeguardian
3
+ emoji: 🐳
4
+ colorFrom: yellow
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,982 @@
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
+ <meta name="description" content="CodeGuardian provides AI-powered tools to detect bugs, vulnerabilities and code smells in your codebase. Improve code quality and security.">
7
+ <title>CodeGuardian | AI-Powered Code Quality & Security</title>
8
+ <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🛡️</text></svg>">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <link rel="preconnect" href="https://cdnjs.cloudflare.com">
11
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" crossorigin="anonymous">
12
+ <link rel="preconnect" href="https://fonts.googleapis.com">
13
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
14
+ <script>
15
+ // Enhanced dark mode with system preference and smooth transitions
16
+ document.addEventListener('DOMContentLoaded', () => {
17
+ const darkModeToggle = document.getElementById('darkModeToggle');
18
+ const html = document.documentElement;
19
+
20
+ // Check system preference first, then localStorage
21
+ const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
22
+ const savedMode = localStorage.getItem('darkMode');
23
+
24
+ if (savedMode === 'true' || (savedMode === null && prefersDark)) {
25
+ html.classList.add('dark');
26
+ if (darkModeToggle) darkModeToggle.checked = true;
27
+ }
28
+
29
+ // Watch for system preference changes
30
+ window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
31
+ if (localStorage.getItem('darkMode') === null) {
32
+ html.classList.toggle('dark', e.matches);
33
+ }
34
+ });
35
+
36
+ if (darkModeToggle) {
37
+ darkModeToggle.addEventListener('change', function() {
38
+ const isDark = this.checked;
39
+ html.classList.toggle('dark', isDark);
40
+ localStorage.setItem('darkMode', isDark);
41
+
42
+ // Smooth transition for all color changes
43
+ const duration = 300;
44
+ const start = performance.now();
45
+
46
+ function fade(timestamp) {
47
+ const progress = (timestamp - start) / duration;
48
+ if (progress < 1) {
49
+ requestAnimationFrame(fade);
50
+ }
51
+ }
52
+ requestAnimationFrame(fade);
53
+ });
54
+ }
55
+ });
56
+
57
+ // Parallax effect
58
+ window.addEventListener('scroll', function() {
59
+ const scrollPosition = window.pageYOffset;
60
+ const parallaxElements = document.querySelectorAll('.parallax');
61
+
62
+ parallaxElements.forEach(function(element) {
63
+ element.style.backgroundPositionY = (scrollPosition * 0.7) + 'px';
64
+ });
65
+ });
66
+
67
+ tailwind.config = {
68
+ theme: {
69
+ extend: {
70
+ colors: {
71
+ primary: '#4F46E5',
72
+ secondary: '#10B981',
73
+ dark: '#1F2937',
74
+ light: '#F9FAFB',
75
+ danger: '#EF4444',
76
+ warning: '#F59E0B'
77
+ },
78
+ fontFamily: {
79
+ sans: ['Inter', 'sans-serif'],
80
+ },
81
+ }
82
+ }
83
+ }
84
+ </script>
85
+ <style>
86
+ :root {
87
+ --font-inter: 'Inter', sans-serif;
88
+ --primary: #4F46E5;
89
+ --secondary: #10B981;
90
+ --dark: #1F2937;
91
+ --light: #F9FAFB;
92
+ --danger: #EF4444;
93
+ --warning: #F59E0B;
94
+ }
95
+
96
+ .dark {
97
+ --primary: #818cf8;
98
+ --secondary: #6ee7b7;
99
+ --dark: #f3f4f6;
100
+ --light: #1F2937;
101
+ }
102
+
103
+ body {
104
+ font-family: var(--font-inter);
105
+ transition: background-color 0.3s ease, color 0.3s ease;
106
+ }
107
+
108
+ .gradient-bg {
109
+ background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
110
+ }
111
+
112
+ .feature-card:hover {
113
+ transform: translateY(-5px);
114
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
115
+ transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
116
+ }
117
+
118
+ .pulse-animation {
119
+ animation: pulse 2s infinite;
120
+ }
121
+
122
+ @keyframes pulse {
123
+ 0% {
124
+ transform: scale(1);
125
+ box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.7);
126
+ }
127
+ 70% {
128
+ transform: scale(1.05);
129
+ box-shadow: 0 0 0 10px rgba(79, 70, 229, 0);
130
+ }
131
+ 100% {
132
+ transform: scale(1);
133
+ box-shadow: 0 0 0 0 rgba(79, 70, 229, 0);
134
+ }
135
+ }
136
+
137
+ .parallax {
138
+ background-attachment: fixed;
139
+ background-position: center;
140
+ background-repeat: no-repeat;
141
+ background-size: cover;
142
+ }
143
+
144
+ .step-card {
145
+ position: relative;
146
+ overflow: hidden;
147
+ }
148
+
149
+ .step-card::before {
150
+ content: '';
151
+ position: absolute;
152
+ top: 0;
153
+ left: 0;
154
+ width: 100%;
155
+ height: 100%;
156
+ background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
157
+ opacity: 0;
158
+ transition: opacity 0.3s ease;
159
+ z-index: 0;
160
+ }
161
+
162
+ .step-card:hover::before {
163
+ opacity: 0.1;
164
+ }
165
+
166
+ .step-number {
167
+ width: 50px;
168
+ height: 50px;
169
+ display: flex;
170
+ align-items: center;
171
+ justify-content: center;
172
+ border-radius: 50%;
173
+ background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
174
+ color: white;
175
+ font-weight: bold;
176
+ margin-bottom: 1rem;
177
+ }
178
+
179
+ .dark-toggle {
180
+ position: relative;
181
+ display: inline-block;
182
+ width: 60px;
183
+ height: 30px;
184
+ }
185
+
186
+ .dark-toggle input {
187
+ opacity: 0;
188
+ width: 0;
189
+ height: 0;
190
+ }
191
+
192
+ .slider {
193
+ position: absolute;
194
+ cursor: pointer;
195
+ top: 0;
196
+ left: 0;
197
+ right: 0;
198
+ bottom: 0;
199
+ background-color: #ccc;
200
+ transition: .4s;
201
+ border-radius: 30px;
202
+ }
203
+
204
+ .slider:before {
205
+ position: absolute;
206
+ content: "";
207
+ height: 22px;
208
+ width: 22px;
209
+ left: 4px;
210
+ bottom: 4px;
211
+ background-color: white;
212
+ transition: .4s;
213
+ border-radius: 50%;
214
+ }
215
+
216
+ input:checked + .slider {
217
+ background-color: var(--primary);
218
+ }
219
+
220
+ input:checked + .slider:before {
221
+ transform: translateX(30px);
222
+ }
223
+ </style>
224
+ </head>
225
+ <body class="bg-gray-50">
226
+ <!-- Navigation -->
227
+ <nav class="bg-white shadow-sm">
228
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
229
+ <div class="flex justify-between h-16">
230
+ <div class="flex items-center">
231
+ <div class="flex-shrink-0 flex items-center">
232
+ <i class="fas fa-shield-alt text-primary text-2xl mr-2"></i>
233
+ <span class="text-xl font-bold text-dark">CodeGuardian</span>
234
+ </div>
235
+ <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
236
+ <a href="#" class="border-primary text-dark inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>
237
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Features</a>
238
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Pricing</a>
239
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Docs</a>
240
+ </div>
241
+ </div>
242
+ <div class="hidden sm:ml-6 sm:flex sm:items-center space-x-4">
243
+ <label class="dark-toggle">
244
+ <input type="checkbox" id="darkModeToggle">
245
+ <span class="slider"></span>
246
+ </label>
247
+ <button class="bg-primary hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-150 ease-in-out">
248
+ Get Started
249
+ </button>
250
+ </div>
251
+ <div class="-mr-2 flex items-center sm:hidden">
252
+ <button type="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 focus:ring-2 focus:ring-inset focus:ring-primary" aria-controls="mobile-menu" aria-expanded="false">
253
+ <span class="sr-only">Open main menu</span>
254
+ <i class="fas fa-bars"></i>
255
+ </button>
256
+ </div>
257
+ </div>
258
+ </div>
259
+ </nav>
260
+
261
+ <!-- Hero Section -->
262
+ <div class="gradient-bg text-white">
263
+ <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
264
+ <div class="text-center">
265
+ <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
266
+ Elevate Your Code Quality & Security
267
+ </h1>
268
+ <p class="mt-6 max-w-3xl mx-auto text-xl">
269
+ AI-powered tools to detect bugs, vulnerabilities, and code smells before they reach production.
270
+ </p>
271
+ <div class="mt-10 flex justify-center space-x-4">
272
+ <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-primary bg-white hover:bg-gray-50">
273
+ Start Free Trial
274
+ </a>
275
+ <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-primary bg-opacity-20 hover:bg-opacity-30">
276
+ <i class="fas fa-play-circle mr-2"></i> Watch Demo
277
+ </a>
278
+ </div>
279
+ </div>
280
+ </div>
281
+ </div>
282
+
283
+ <!-- How It Works Section -->
284
+ <div class="py-16 bg-white dark:bg-gray-800">
285
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
286
+ <div class="lg:text-center">
287
+ <h2 class="text-base text-primary font-semibold tracking-wide uppercase">Process</h2>
288
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-dark dark:text-white sm:text-4xl">
289
+ How CodeGuardian Works
290
+ </p>
291
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 dark:text-gray-300 lg:mx-auto">
292
+ Simple steps to better code quality and security.
293
+ </p>
294
+ </div>
295
+
296
+ <div class="mt-16">
297
+ <div class="grid grid-cols-1 gap-8 md:grid-cols-3">
298
+ <!-- Step 1 -->
299
+ <div class="step-card relative bg-white dark:bg-gray-700 p-8 rounded-lg shadow-md transition duration-300 ease-in-out">
300
+ <div class="step-number">1</div>
301
+ <h3 class="text-xl font-bold text-dark dark:text-white">Connect Your Repository</h3>
302
+ <p class="mt-2 text-gray-600 dark:text-gray-300">
303
+ Link your GitHub, GitLab or Bitbucket account in just a few clicks.
304
+ </p>
305
+ </div>
306
+
307
+ <!-- Step 2 -->
308
+ <div class="step-card relative bg-white dark:bg-gray-700 p-8 rounded-lg shadow-md transition duration-300 ease-in-out">
309
+ <div class="step-number">2</div>
310
+ <h3 class="text-xl font-bold text-dark dark:text-white">Automatic Analysis</h3>
311
+ <p class="mt-2 text-gray-600 dark:text-gray-300">
312
+ Our AI scans your codebase for bugs, vulnerabilities and code smells.
313
+ </p>
314
+ </div>
315
+
316
+ <!-- Step 3 -->
317
+ <div class="step-card relative bg-white dark:bg-gray-700 p-8 rounded-lg shadow-md transition duration-300 ease-in-out">
318
+ <div class="step-number">3</div>
319
+ <h3 class="text-xl font-bold text-dark dark:text-white">Get Actionable Insights</h3>
320
+ <p class="mt-2 text-gray-600 dark:text-gray-300">
321
+ Receive detailed reports with prioritized fixes and automated solutions.
322
+ </p>
323
+ </div>
324
+ </div>
325
+ </div>
326
+ </div>
327
+ </div>
328
+
329
+ <!-- Stats Section -->
330
+ <div class="bg-white py-12">
331
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
332
+ <div class="grid grid-cols-2 gap-8 md:grid-cols-4">
333
+ <div class="text-center">
334
+ <div class="text-4xl font-bold text-primary">98%</div>
335
+ <div class="text-gray-500 mt-2">Bug Detection Rate</div>
336
+ </div>
337
+ <div class="text-center">
338
+ <div class="text-4xl font-bold text-secondary">10x</div>
339
+ <div class="text-gray-500 mt-2">Faster Code Reviews</div>
340
+ </div>
341
+ <div class="text-center">
342
+ <div class="text-4xl font-bold text-warning">500+</div>
343
+ <div class="text-gray-500 mt-2">Security Rules</div>
344
+ </div>
345
+ <div class="text-center">
346
+ <div class="text-4xl font-bold text-danger">24/7</div>
347
+ <div class="text-gray-500 mt-2">Real-time Monitoring</div>
348
+ </div>
349
+ </div>
350
+ </div>
351
+ </div>
352
+
353
+ <!-- Features Section -->
354
+ <div class="py-16 bg-gray-50">
355
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
356
+ <div class="lg:text-center">
357
+ <h2 class="text-base text-primary font-semibold tracking-wide uppercase">Features</h2>
358
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-dark sm:text-4xl">
359
+ Comprehensive Code Protection
360
+ </p>
361
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
362
+ Our platform combines multiple analysis techniques to ensure your code is clean, secure, and performant.
363
+ </p>
364
+ </div>
365
+
366
+ <div class="mt-20">
367
+ <div class="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-3">
368
+ <!-- Feature 1 -->
369
+ <div class="feature-card relative bg-white p-8 rounded-lg shadow-md transition duration-300 ease-in-out">
370
+ <div class="absolute -top-6 left-6 bg-primary rounded-full p-3 text-white">
371
+ <i class="fas fa-bug text-xl"></i>
372
+ </div>
373
+ <h3 class="mt-4 text-xl font-bold text-dark">Bug Detection</h3>
374
+ <p class="mt-2 text-gray-600">
375
+ Automatically identifies bugs and logic errors before they reach production, saving you time and headaches.
376
+ </p>
377
+ <div class="mt-6">
378
+ <a href="#" class="text-primary font-medium inline-flex items-center">
379
+ Learn more <i class="fas fa-arrow-right ml-1"></i>
380
+ </a>
381
+ </div>
382
+ </div>
383
+
384
+ <!-- Feature 2 -->
385
+ <div class="feature-card relative bg-white p-8 rounded-lg shadow-md transition duration-300 ease-in-out">
386
+ <div class="absolute -top-6 left-6 bg-secondary rounded-full p-3 text-white">
387
+ <i class="fas fa-shield-alt text-xl"></i>
388
+ </div>
389
+ <h3 class="mt-4 text-xl font-bold text-dark">Security Scanning</h3>
390
+ <p class="mt-2 text-gray-600">
391
+ Detects security vulnerabilities, including those listed in the OWASP Top 10, to protect your applications.
392
+ </p>
393
+ <div class="mt-6">
394
+ <a href="#" class="text-primary font-medium inline-flex items-center">
395
+ Learn more <i class="fas fa-arrow-right ml-1"></i>
396
+ </a>
397
+ </div>
398
+ </div>
399
+
400
+ <!-- Feature 3 -->
401
+ <div class="feature-card relative bg-white p-8 rounded-lg shadow-md transition duration-300 ease-in-out">
402
+ <div class="absolute -top-6 left-6 bg-warning rounded-full p-3 text-white">
403
+ <i class="fas fa-code text-xl"></i>
404
+ </div>
405
+ <h3 class="mt-4 text-xl font-bold text-dark">Code Smells</h3>
406
+ <p class="mt-2 text-gray-600">
407
+ Identifies bad practices and potential maintenance issues in your codebase to improve long-term quality.
408
+ </p>
409
+ <div class="mt-6">
410
+ <a href="#" class="text-primary font-medium inline-flex items-center">
411
+ Learn more <i class="fas fa-arrow-right ml-1"></i>
412
+ </a>
413
+ </div>
414
+ </div>
415
+
416
+ <!-- Feature 4 -->
417
+ <div class="feature-card relative bg-white p-8 rounded-lg shadow-md transition duration-300 ease-in-out">
418
+ <div class="absolute -top-6 left-6 bg-danger rounded-full p-3 text-white">
419
+ <i class="fas fa-robot text-xl"></i>
420
+ </div>
421
+ <h3 class="mt-4 text-xl font-bold text-dark">AI-Powered Fixes</h3>
422
+ <p class="mt-2 text-gray-600">
423
+ Provides intelligent suggestions to automatically fix detected issues with just one click.
424
+ </p>
425
+ <div class="mt-6">
426
+ <a href="#" class="text-primary font-medium inline-flex items-center">
427
+ Learn more <i class="fas fa-arrow-right ml-1"></i>
428
+ </a>
429
+ </div>
430
+ </div>
431
+
432
+ <!-- Feature 5 -->
433
+ <div class="feature-card relative bg-white p-8 rounded-lg shadow-md transition duration-300 ease-in-out">
434
+ <div class="absolute -top-6 left-6 bg-primary rounded-full p-3 text-white">
435
+ <i class="fas fa-tachometer-alt text-xl"></i>
436
+ </div>
437
+ <h3 class="mt-4 text-xl font-bold text-dark">Performance Analysis</h3>
438
+ <p class="mt-2 text-gray-600">
439
+ Identifies bottlenecks and helps optimize your code for better performance and scalability.
440
+ </p>
441
+ <div class="mt-6">
442
+ <a href="#" class="text-primary font-medium inline-flex items-center">
443
+ Learn more <i class="fas fa-arrow-right ml-1"></i>
444
+ </a>
445
+ </div>
446
+ </div>
447
+
448
+ <!-- Feature 6 -->
449
+ <div class="feature-card relative bg-white p-8 rounded-lg shadow-md transition duration-300 ease-in-out">
450
+ <div class="absolute -top-6 left-6 bg-secondary rounded-full p-3 text-white">
451
+ <i class="fas fa-eye text-xl"></i>
452
+ </div>
453
+ <h3 class="mt-4 text-xl font-bold text-dark">Continuous Monitoring</h3>
454
+ <p class="mt-2 text-gray-600">
455
+ Scans your code in real-time as you develop to catch issues early when they're easiest to fix.
456
+ </p>
457
+ <div class="mt-6">
458
+ <a href="#" class="text-primary font-medium inline-flex items-center">
459
+ Learn more <i class="fas fa-arrow-right ml-1"></i>
460
+ </a>
461
+ </div>
462
+ </div>
463
+ </div>
464
+ </div>
465
+ </div>
466
+ </div>
467
+
468
+ <!-- Supported Languages -->
469
+ <div class="py-16 bg-white">
470
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
471
+ <div class="lg:text-center mb-12">
472
+ <h2 class="text-base text-primary font-semibold tracking-wide uppercase">Multi-Language Support</h2>
473
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-dark sm:text-4xl">
474
+ Works with Your Tech Stack
475
+ </p>
476
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
477
+ CodeGuardian supports all major programming languages and frameworks.
478
+ </p>
479
+ </div>
480
+ <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8">
481
+ <div class="flex flex-col items-center p-6 rounded-lg hover:bg-gray-50">
482
+ <i class="fab fa-js-square text-4xl text-yellow-400 mb-3"></i>
483
+ <span class="font-medium">JavaScript</span>
484
+ </div>
485
+ <div class="flex flex-col items-center p-6 rounded-lg hover:bg-gray-50">
486
+ <i class="fab fa-python text-4xl text-blue-500 mb-3"></i>
487
+ <span class="font-medium">Python</span>
488
+ </div>
489
+ <div class="flex flex-col items-center p-6 rounded-lg hover:bg-gray-50">
490
+ <i class="fab fa-java text-4xl text-red-500 mb-3"></i>
491
+ <span class="font-medium">Java</span>
492
+ </div>
493
+ <div class="flex flex-col items-center p-6 rounded-lg hover:bg-gray-50">
494
+ <i class="fas fa-code text-4xl text-purple-500 mb-3"></i>
495
+ <span class="font-medium">C#</span>
496
+ </div>
497
+ <div class="flex flex-col items-center p-6 rounded-lg hover:bg-gray-50">
498
+ <i class="fab fa-php text-4xl text-indigo-500 mb-3"></i>
499
+ <span class="font-medium">PHP</span>
500
+ </div>
501
+ <div class="flex flex-col items-center p-6 rounded-lg hover:bg-gray-50">
502
+ <i class="fab fa-swift text-4xl text-orange-500 mb-3"></i>
503
+ <span class="font-medium">Swift</span>
504
+ </div>
505
+ </div>
506
+ </div>
507
+ </div>
508
+
509
+ <!-- Demo Section -->
510
+ <div class="bg-white py-16">
511
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
512
+ <div class="lg:grid lg:grid-cols-2 lg:gap-8 lg:items-center">
513
+ <div class="mb-12 lg:mb-0">
514
+ <h2 class="text-3xl font-extrabold text-dark sm:text-4xl">
515
+ See CodeGuardian in Action
516
+ </h2>
517
+ <p class="mt-3 text-lg text-gray-500">
518
+ Our platform integrates seamlessly with your development workflow to provide real-time feedback and automated fixes.
519
+ </p>
520
+ <div class="mt-8">
521
+ <div class="inline-flex rounded-md shadow">
522
+ <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:bg-indigo-700">
523
+ Request Demo
524
+ </a>
525
+ </div>
526
+ <div class="ml-3 inline-flex rounded-md shadow">
527
+ <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-primary bg-white hover:bg-gray-50">
528
+ <i class="fas fa-play-circle mr-2"></i> Watch Video
529
+ </a>
530
+ </div>
531
+ </div>
532
+ </div>
533
+ <div class="relative">
534
+ <div class="relative rounded-lg shadow-lg overflow-hidden">
535
+ <div class="bg-gray-800 p-4">
536
+ <div class="flex space-x-2">
537
+ <div class="w-3 h-3 rounded-full bg-red-500"></div>
538
+ <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
539
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
540
+ </div>
541
+ </div>
542
+ <div class="bg-gray-900 p-6 text-white font-mono text-sm">
543
+ <div class="flex">
544
+ <div class="text-gray-500 mr-4">1</div>
545
+ <div><span class="text-purple-400">function</span> <span class="text-yellow-300">calculateTotal</span>(items) {</div>
546
+ </div>
547
+ <div class="flex">
548
+ <div class="text-gray-500 mr-4">2</div>
549
+ <div class="ml-4"><span class="text-purple-400">let</span> total = <span class="text-green-400">0</span>;</div>
550
+ </div>
551
+ <div class="flex">
552
+ <div class="text-gray-500 mr-4">3</div>
553
+ <div class="ml-4"><span class="text-purple-400">for</span> (<span class="text-purple-400">let</span> item <span class="text-purple-400">of</span> items) {</div>
554
+ </div>
555
+ <div class="flex bg-red-900 bg-opacity-30">
556
+ <div class="text-gray-500 mr-4">4</div>
557
+ <div class="ml-8"><span class="text-red-400">// Warning: Potential SQL injection vulnerability</span></div>
558
+ </div>
559
+ <div class="flex bg-red-900 bg-opacity-30">
560
+ <div class="text-gray-500 mr-4">5</div>
561
+ <div class="ml-8">total += item.price || <span class="text-green-400">0</span>;</div>
562
+ </div>
563
+ <div class="flex">
564
+ <div class="text-gray-500 mr-4">6</div>
565
+ <div class="ml-4">}</div>
566
+ </div>
567
+ <div class="flex">
568
+ <div class="text-gray-500 mr-4">7</div>
569
+ <div class="ml-4"><span class="text-purple-400">return</span> total;</div>
570
+ </div>
571
+ <div class="flex">
572
+ <div class="text-gray-500 mr-4">8</div>
573
+ <div>}</div>
574
+ </div>
575
+ <div class="mt-4 pt-4 border-t border-gray-700">
576
+ <div class="flex items-center">
577
+ <i class="fas fa-exclamation-triangle text-yellow-400 mr-2"></i>
578
+ <span class="text-yellow-400">1 vulnerability found</span>
579
+ </div>
580
+ <div class="mt-2 flex items-center">
581
+ <i class="fas fa-lightbulb text-blue-400 mr-2"></i>
582
+ <span>Suggested fix: Use parameterized queries</span>
583
+ </div>
584
+ </div>
585
+ </div>
586
+ </div>
587
+ </div>
588
+ </div>
589
+ </div>
590
+ </div>
591
+
592
+ <!-- Pricing -->
593
+ <div class="py-16 bg-gray-50">
594
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
595
+ <div class="lg:text-center mb-12">
596
+ <h2 class="text-base text-primary font-semibold tracking-wide uppercase">Pricing</h2>
597
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-dark sm:text-4xl">
598
+ Simple, Transparent Pricing
599
+ </p>
600
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
601
+ Choose the plan that fits your team's needs.
602
+ </p>
603
+ </div>
604
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
605
+ <!-- Free Plan -->
606
+ <div class="bg-white rounded-lg shadow-lg overflow-hidden">
607
+ <div class="px-6 py-8">
608
+ <h3 class="text-2xl font-bold text-dark">Free</h3>
609
+ <div class="mt-4">
610
+ <span class="text-4xl font-bold">$0</span>
611
+ <span class="text-gray-500">/month</span>
612
+ </div>
613
+ <ul class="mt-6 space-y-3">
614
+ <li class="flex items-center">
615
+ <i class="fas fa-check text-green-500 mr-2"></i>
616
+ <span>Up to 3 users</span>
617
+ </li>
618
+ <li class="flex items-center">
619
+ <i class="fas fa-check text-green-500 mr-2"></i>
620
+ <span>Basic code scanning</span>
621
+ </li>
622
+ <li class="flex items-center">
623
+ <i class="fas fa-check text-green-500 mr-2"></i>
624
+ <span>5 repositories</span>
625
+ </li>
626
+ </ul>
627
+ <div class="mt-8">
628
+ <button class="w-full bg-gray-100 hover:bg-gray-200 text-dark py-3 px-4 rounded-md font-medium">
629
+ Get Started
630
+ </button>
631
+ </div>
632
+ </div>
633
+ </div>
634
+
635
+ <!-- Pro Plan -->
636
+ <div class="bg-white rounded-lg shadow-lg overflow-hidden border-2 border-primary">
637
+ <div class="bg-primary text-white text-center py-2">
638
+ <span class="font-medium">Most Popular</span>
639
+ </div>
640
+ <div class="px-6 py-8">
641
+ <h3 class="text-2xl font-bold text-dark">Pro</h3>
642
+ <div class="mt-4">
643
+ <span class="text-4xl font-bold">$29</span>
644
+ <span class="text-gray-500">/month</span>
645
+ </div>
646
+ <ul class="mt-6 space-y-3">
647
+ <li class="flex items-center">
648
+ <i class="fas fa-check text-green-500 mr-2"></i>
649
+ <span>Up to 10 users</span>
650
+ </li>
651
+ <li class="flex items-center">
652
+ <i class="fas fa-check text-green-500 mr-2"></i>
653
+ <span>Advanced scanning</span>
654
+ </li>
655
+ <li class="flex items-center">
656
+ <i class="fas fa-check text-green-500 mr-2"></i>
657
+ <span>Unlimited repositories</span>
658
+ </li>
659
+ <li class="flex items-center">
660
+ <i class="fas fa-check text-green-500 mr-2"></i>
661
+ <span>Priority support</span>
662
+ </li>
663
+ </ul>
664
+ <div class="mt-8">
665
+ <button class="w-full bg-primary hover:bg-indigo-700 text-white py-3 px-4 rounded-md font-medium">
666
+ Get Started
667
+ </button>
668
+ </div>
669
+ </div>
670
+ </div>
671
+
672
+ <!-- Enterprise Plan -->
673
+ <div class="bg-white rounded-lg shadow-lg overflow-hidden">
674
+ <div class="px-6 py-8">
675
+ <h3 class="text-2xl font-bold text-dark">Enterprise</h3>
676
+ <div class="mt-4">
677
+ <span class="text-4xl font-bold">Custom</span>
678
+ </div>
679
+ <ul class="mt-6 space-y-3">
680
+ <li class="flex items-center">
681
+ <i class="fas fa-check text-green-500 mr-2"></i>
682
+ <span>Unlimited users</span>
683
+ </li>
684
+ <li class="flex items-center">
685
+ <i class="fas fa-check text-green-500 mr-2"></i>
686
+ <span>Enterprise-grade security</span>
687
+ </li>
688
+ <li class="flex items-center">
689
+ <i class="fas fa-check text-green-500 mr-2"></i>
690
+ <span>On-premises option</span>
691
+ </li>
692
+ <li class="flex items-center">
693
+ <i class="fas fa-check text-green-500 mr-2"></i>
694
+ <span>Dedicated support</span>
695
+ </li>
696
+ </ul>
697
+ <div class="mt-8">
698
+ <button class="w-full bg-gray-800 hover:bg-gray-900 text-white py-3 px-4 rounded-md font-medium">
699
+ Contact Sales
700
+ </button>
701
+ </div>
702
+ </div>
703
+ </div>
704
+ </div>
705
+ </div>
706
+ </div>
707
+
708
+ <!-- Testimonials -->
709
+ <div class="bg-gray-100 py-16">
710
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
711
+ <div class="lg:text-center mb-12">
712
+ <h2 class="text-base text-primary font-semibold tracking-wide uppercase">Testimonials</h2>
713
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-dark sm:text-4xl">
714
+ Trusted by developers worldwide
715
+ </p>
716
+ </div>
717
+ <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
718
+ <!-- Testimonial 1 -->
719
+ <div class="bg-white p-6 rounded-lg shadow">
720
+ <div class="flex items-center mb-4">
721
+ <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah Johnson">
722
+ <div>
723
+ <h4 class="text-lg font-semibold">Sarah Johnson</h4>
724
+ <p class="text-gray-500">Senior Developer @TechCorp</p>
725
+ </div>
726
+ </div>
727
+ <p class="text-gray-600">
728
+ "CodeGuardian has reduced our bug rate by 80% and cut our security review time in half. The AI-powered fixes are incredibly accurate."
729
+ </p>
730
+ <div class="mt-4 flex text-yellow-400">
731
+ <i class="fas fa-star"></i>
732
+ <i class="fas fa-star"></i>
733
+ <i class="fas fa-star"></i>
734
+ <i class="fas fa-star"></i>
735
+ <i class="fas fa-star"></i>
736
+ </div>
737
+ </div>
738
+
739
+ <!-- Testimonial 2 -->
740
+ <div class="bg-white p-6 rounded-lg shadow">
741
+ <div class="flex items-center mb-4">
742
+ <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael Chen">
743
+ <div>
744
+ <h4 class="text-lg font-semibold">Michael Chen</h4>
745
+ <p class="text-gray-500">CTO @StartUpX</p>
746
+ </div>
747
+ </div>
748
+ <p class="text-gray-600">
749
+ "As a small team, we can't afford security mistakes. CodeGuardian gives us enterprise-grade protection without the enterprise price tag."
750
+ </p>
751
+ <div class="mt-4 flex text-yellow-400">
752
+ <i class="fas fa-star"></i>
753
+ <i class="fas fa-star"></i>
754
+ <i class="fas fa-star"></i>
755
+ <i class="fas fa-star"></i>
756
+ <i class="fas fa-star"></i>
757
+ </div>
758
+ </div>
759
+
760
+ <!-- Testimonial 3 -->
761
+ <div class="bg-white p-6 rounded-lg shadow">
762
+ <div class="flex items-center mb-4">
763
+ <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emma Rodriguez">
764
+ <div>
765
+ <h4 class="text-lg font-semibold">Emma Rodriguez</h4>
766
+ <p class="text-gray-500">Lead Architect @GlobalBank</p>
767
+ </div>
768
+ </div>
769
+ <p class="text-gray-600">
770
+ "The performance analysis tools helped us identify bottlenecks we didn't even know existed. Our APIs are now 40% faster."
771
+ </p>
772
+ <div class="mt-4 flex text-yellow-400">
773
+ <i class="fas fa-star"></i>
774
+ <i class="fas fa-star"></i>
775
+ <i class="fas fa-star"></i>
776
+ <i class="fas fa-star"></i>
777
+ <i class="fas fa-star-half-alt"></i>
778
+ </div>
779
+ </div>
780
+ </div>
781
+ </div>
782
+ </div>
783
+
784
+ <!-- Integrations -->
785
+ <div class="py-16 bg-white">
786
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
787
+ <div class="lg:text-center mb-12">
788
+ <h2 class="text-base text-primary font-semibold tracking-wide uppercase">Integrations</h2>
789
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-dark sm:text-4xl">
790
+ Works with Your Favorite Tools
791
+ </p>
792
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
793
+ Seamlessly integrate CodeGuardian into your existing workflow.
794
+ </p>
795
+ </div>
796
+ <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8">
797
+ <div class="flex flex-col items-center p-6 rounded-lg hover:bg-gray-50">
798
+ <img src="https://cdn.worldvectorlogo.com/logos/github-icon-1.svg" alt="GitHub" class="h-12 w-12 mb-3">
799
+ <span class="font-medium">GitHub</span>
800
+ </div>
801
+ <div class="flex flex-col items-center p-6 rounded-lg hover:bg-gray-50">
802
+ <img src="https://cdn.worldvectorlogo.com/logos/gitlab.svg" alt="GitLab" class="h-12 w-12 mb-3">
803
+ <span class="font-medium">GitLab</span>
804
+ </div>
805
+ <div class="flex flex-col items-center p-6 rounded-lg hover:bg-gray-50">
806
+ <img src="https://cdn.worldvectorlogo.com/logos/bitbucket.svg" alt="Bitbucket" class="h-12 w-12 mb-3">
807
+ <span class="font-medium">Bitbucket</span>
808
+ </div>
809
+ <div class="flex flex-col items-center p-6 rounded-lg hover:bg-gray-50">
810
+ <img src="https://cdn.worldvectorlogo.com/logos/jira-1.svg" alt="Jira" class="h-12 w-12 mb-3">
811
+ <span class="font-medium">Jira</span>
812
+ </div>
813
+ <div class="flex flex-col items-center p-6 rounded-lg hover:bg-gray-50">
814
+ <img src="https://cdn.worldvectorlogo.com/logos/slack-new-logo.svg" alt="Slack" class="h-12 w-12 mb-3">
815
+ <span class="font-medium">Slack</span>
816
+ </div>
817
+ </div>
818
+ </div>
819
+ </div>
820
+
821
+ <!-- CTA Section -->
822
+ <div class="bg-primary text-white">
823
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
824
+ <h2 class="text-3xl font-extrabold tracking-tight sm:text-4xl">
825
+ <span class="block">Ready to improve your code quality?</span>
826
+ <span class="block text-primary-200">Start your free 14-day trial today.</span>
827
+ </h2>
828
+ <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
829
+ <div class="inline-flex rounded-md shadow">
830
+ <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-primary bg-white hover:bg-gray-50">
831
+ Get started
832
+ </a>
833
+ </div>
834
+ <div class="ml-3 inline-flex rounded-md shadow">
835
+ <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700">
836
+ Contact sales
837
+ </a>
838
+ </div>
839
+ </div>
840
+ </div>
841
+ </div>
842
+
843
+ <!-- Footer -->
844
+ <footer class="bg-dark text-gray-300">
845
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
846
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
847
+ <div>
848
+ <h3 class="text-white text-sm font-semibold tracking-wider uppercase mb-4">Product</h3>
849
+ <ul class="space-y-2">
850
+ <li><a href="#" class="hover:text-white">Features</a></li>
851
+ <li><a href="#" class="hover:text-white">Pricing</a></li>
852
+ <li><a href="#" class="hover:text-white">Integrations</a></li>
853
+ <li><a href="#" class="hover:text-white">Changelog</a></li>
854
+ </ul>
855
+ </div>
856
+ <div>
857
+ <h3 class="text-white text-sm font-semibold tracking-wider uppercase mb-4">Resources</h3>
858
+ <ul class="space-y-2">
859
+ <li><a href="#" class="hover:text-white">Documentation</a></li>
860
+ <li><a href="#" class="hover:text-white">API Reference</a></li>
861
+ <li><a href="#" class="hover:text-white">Community</a></li>
862
+ <li><a href="#" class="hover:text-white">Blog</a></li>
863
+ </ul>
864
+ </div>
865
+ <div>
866
+ <h3 class="text-white text-sm font-semibold tracking-wider uppercase mb-4">Company</h3>
867
+ <ul class="space-y-2">
868
+ <li><a href="#" class="hover:text-white">About</a></li>
869
+ <li><a href="#" class="hover:text-white">Careers</a></li>
870
+ <li><a href="#" class="hover:text-white">Privacy</a></li>
871
+ <li><a href="#" class="hover:text-white">Terms</a></li>
872
+ </ul>
873
+ </div>
874
+ <div>
875
+ <h3 class="text-white text-sm font-semibold tracking-wider uppercase mb-4">Connect</h3>
876
+ <div class="flex space-x-4">
877
+ <a href="#" class="hover:text-white"><i class="fab fa-twitter"></i></a>
878
+ <a href="#" class="hover:text-white"><i class="fab fa-github"></i></a>
879
+ <a href="#" class="hover:text-white"><i class="fab fa-linkedin"></i></a>
880
+ <a href="#" class="hover:text-white"><i class="fab fa-discord"></i></a>
881
+ </div>
882
+ <div class="mt-6">
883
+ <p class="text-sm">Subscribe to our newsletter</p>
884
+ <form class="mt-2 space-y-2">
885
+ <input type="email" placeholder="Your email" required
886
+ class="px-3 py-2 bg-gray-800 text-white rounded-md focus:outline-none focus:ring-1 focus:ring-primary w-full">
887
+ <button type="submit"
888
+ class="bg-primary text-white px-4 py-2 rounded-md hover:bg-indigo-700 w-full transition duration-300 ease-in-out transform hover:scale-105">
889
+ Subscribe
890
+ </button>
891
+ </form>
892
+ <p class="mt-2 text-xs text-gray-500">We'll never share your email. Unsubscribe anytime.</p>
893
+ </div>
894
+ </div>
895
+ </div>
896
+ <div class="mt-12 border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between">
897
+ <p class="text-sm">© 2023 CodeGuardian. All rights reserved.</p>
898
+ <div class="mt-4 md:mt-0 flex space-x-6">
899
+ <a href="#" class="text-sm hover:text-white">Privacy Policy</a>
900
+ <a href="#" class="text-sm hover:text-white">Terms of Service</a>
901
+ <a href="#" class="text-sm hover:text-white">Cookie Policy</a>
902
+ </div>
903
+ </div>
904
+ </div>
905
+ </footer>
906
+
907
+ <script>
908
+ // Enhanced mobile menu with animations
909
+ document.addEventListener('DOMContentLoaded', function() {
910
+ const mobileMenuButton = document.querySelector('[aria-controls="mobile-menu"]');
911
+ if (!mobileMenuButton) return;
912
+
913
+ const mobileMenu = document.createElement('div');
914
+ mobileMenu.id = 'mobile-menu';
915
+ mobileMenu.className = 'hidden sm:hidden bg-white dark:bg-gray-800 shadow-lg transform transition-all duration-300 ease-in-out origin-top';
916
+ mobileMenu.innerHTML = `
917
+ <div class="px-2 pt-2 pb-3 space-y-1">
918
+ <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-dark dark:text-white bg-gray-100 dark:bg-gray-700">Home</a>
919
+ <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 dark:text-gray-300 hover:text-dark dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700">Features</a>
920
+ <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 dark:text-gray-300 hover:text-dark dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700">Pricing</a>
921
+ <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 dark:text-gray-300 hover:text-dark dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700">Docs</a>
922
+ <div class="pt-4 pb-3 border-t border-gray-200 dark:border-gray-700">
923
+ <div class="flex items-center px-5 space-x-4">
924
+ <label class="dark-toggle">
925
+ <input type="checkbox" id="mobileDarkModeToggle">
926
+ <span class="slider"></span>
927
+ </label>
928
+ <button class="bg-primary hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium w-full">
929
+ Get Started
930
+ </button>
931
+ </div>
932
+ </div>
933
+ </div>
934
+ `;
935
+ document.querySelector('nav').appendChild(mobileMenu);
936
+
937
+ // Sync mobile dark mode toggle with main one
938
+ const mainToggle = document.getElementById('darkModeToggle');
939
+ const mobileToggle = document.getElementById('mobileDarkModeToggle');
940
+
941
+ if (mainToggle && mobileToggle) {
942
+ mobileToggle.checked = mainToggle.checked;
943
+ mobileToggle.addEventListener('change', () => {
944
+ mainToggle.checked = mobileToggle.checked;
945
+ mainToggle.dispatchEvent(new Event('change'));
946
+ });
947
+ }
948
+
949
+ mobileMenuButton.addEventListener('click', function() {
950
+ const expanded = this.getAttribute('aria-expanded') === 'true' || false;
951
+ this.setAttribute('aria-expanded', !expanded);
952
+
953
+ if (!expanded) {
954
+ mobileMenu.classList.remove('hidden');
955
+ mobileMenu.style.transform = 'scaleY(0)';
956
+ setTimeout(() => {
957
+ mobileMenu.style.transform = 'scaleY(1)';
958
+ }, 10);
959
+ } else {
960
+ mobileMenu.style.transform = 'scaleY(0)';
961
+ setTimeout(() => {
962
+ mobileMenu.classList.add('hidden');
963
+ }, 300);
964
+ }
965
+ });
966
+
967
+ // Smooth scrolling for anchor links
968
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
969
+ anchor.addEventListener('click', function(e) {
970
+ e.preventDefault();
971
+ const target = document.querySelector(this.getAttribute('href'));
972
+ if (target) {
973
+ target.scrollIntoView({
974
+ behavior: 'smooth'
975
+ });
976
+ }
977
+ });
978
+ });
979
+ });
980
+ </script>
981
+ <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=tutosutiles/codeguardian" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
982
+ </html>