Hugging Face's logo

Spaces:
NeuralDev
/
simple-landing-page
Running

App Files Community
NeuralDev commited on
Commit
5745c71
·
verified ·
1 Parent(s): 38edce3

improve it - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +480 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Simple Landing Page
3
- emoji: 📈
4
  colorFrom: purple
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: simple-landing-page
3
+ emoji: 🐳
4
  colorFrom: purple
5
+ colorTo: pink
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,480 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>QuantumLeap - Next-Gen Productivity</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
10
+ <style>
11
+ * {
12
+ font-family: 'Inter', sans-serif;
13
+ }
14
+
15
+ .gradient-text {
16
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
17
+ -webkit-background-clip: text;
18
+ -webkit-text-fill-color: transparent;
19
+ background-clip: text;
20
+ }
21
+
22
+ .glass-effect {
23
+ backdrop-filter: blur(20px);
24
+ background: rgba(255, 255, 255, 0.1);
25
+ border: 1px solid rgba(255, 255, 255, 0.2);
26
+ }
27
+
28
+ .floating-card {
29
+ transition: all 0.3s ease;
30
+ transform: translateY(0);
31
+ }
32
+
33
+ .floating-card:hover {
34
+ transform: translateY(-8px);
35
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
36
+ }
37
+
38
+ .pulse-animation {
39
+ animation: pulse 2s infinite;
40
+ }
41
+
42
+ @keyframes pulse {
43
+ 0% { transform: scale(1); }
44
+ 50% { transform: scale(1.05); }
45
+ 100% { transform: scale(1); }
46
+ }
47
+
48
+ .typing-effect {
49
+ overflow: hidden;
50
+ border-right: 3px solid #667eea;
51
+ white-space: nowrap;
52
+ animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
53
+ }
54
+
55
+ @keyframes typing {
56
+ from { width: 0 }
57
+ to { width: 100% }
58
+ }
59
+
60
+ @keyframes blink-caret {
61
+ from, to { border-color: transparent }
62
+ 50% { border-color: #667eea }
63
+ }
64
+
65
+ .nav-link {
66
+ position: relative;
67
+ transition: all 0.3s ease;
68
+ }
69
+
70
+ .nav-link::after {
71
+ content: '';
72
+ position: absolute;
73
+ bottom: -5px;
74
+ left: 0;
75
+ width: 0;
76
+ height: 2px;
77
+ background: linear-gradient(90deg, #667eea, #764ba2);
78
+ transition: width 0.3s ease;
79
+ }
80
+
81
+ .nav-link:hover::after {
82
+ width: 100%;
83
+ }
84
+
85
+ .hero-gradient {
86
+ background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
87
+ }
88
+
89
+ .feature-icon {
90
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
91
+ -webkit-background-clip: text;
92
+ -webkit-text-fill-color: transparent;
93
+ }
94
+
95
+ .testimonial-card {
96
+ transition: transform 0.3s ease;
97
+ }
98
+
99
+ .testimonial-card:hover {
100
+ transform: scale(1.02);
101
+ }
102
+ </style>
103
+ </head>
104
+ <body class="bg-gray-50">
105
+ <!-- Navigation -->
106
+ <nav class="fixed top-0 w-full z-50 glass-effect">
107
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
108
+ <div class="flex justify-between items-center h-16">
109
+ <div class="flex items-center space-x-2">
110
+ <div class="w-8 h-8 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-lg flex items-center justify-center">
111
+ <i data-lucide="zap" class="text-white w-5 h-5"></i>
112
+ </div>
113
+ <span class="text-xl font-bold gradient-text">QuantumLeap</span>
114
+ </div>
115
+
116
+ <div class="hidden md:flex items-center space-x-8">
117
+ <a href="#features" class="nav-link text-gray-700 hover:text-indigo-600 font-medium">Features</a>
118
+ <a href="#pricing" class="nav-link text-gray-700 hover:text-indigo-600 font-medium">Pricing</a>
119
+ <a href="#testimonials" class="nav-link text-gray-700 hover:text-indigo-600 font-medium">Testimonials</a>
120
+ <button class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-6 py-2 rounded-full hover:shadow-lg transition-all duration-300">
121
+ Get Started
122
+ </button>
123
+ </div>
124
+
125
+ <button class="md:hidden" id="mobile-menu-btn">
126
+ <i data-lucide="menu" class="w-6 h-6 text-gray-700"></i>
127
+ </button>
128
+ </div>
129
+ </div>
130
+
131
+ <!-- Mobile Menu -->
132
+ <div class="md:hidden hidden bg-white shadow-lg" id="mobile-menu">
133
+ <div class="px-4 py-2 space-y-2">
134
+ <a href="#features" class="block py-2 text-gray-700 hover:text-indigo-600">Features</a>
135
+ <a href="#pricing" class="block py-2 text-gray-700 hover:text-indigo-600">Pricing</a>
136
+ <a href="#testimonials" class="block py-2 text-gray-700 hover:text-indigo-600">Testimonials</a>
137
+ <button class="w-full bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-4 py-2 rounded-full">
138
+ Get Started
139
+ </button>
140
+ </div>
141
+ </div>
142
+ </nav>
143
+
144
+ <!-- Hero Section -->
145
+ <section class="pt-20 pb-20 hero-gradient">
146
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
147
+ <div class="text-center">
148
+ <h1 class="text-4xl md:text-6xl font-bold text-gray-900 mb-6">
149
+ Build Something <span class="gradient-text">Extraordinary</span>
150
+ </h1>
151
+ <p class="text-xl md:text-2xl text-gray-600 mb-8 max-w-3xl mx-auto">
152
+ The future of <span class="typing-effect inline-block">productivity is here</span>
153
+ </p>
154
+ <div class="flex flex-col sm:flex-row gap-4 justify-center">
155
+ <button class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-8 py-4 rounded-full text-lg font-semibold hover:shadow-xl transition-all duration-300 pulse-animation">
156
+ Get Started Free
157
+ </button>
158
+ <button class="border-2 border-gray-300 text-gray-700 px-8 py-4 rounded-full text-lg font-semibold hover:border-indigo-500 hover:text-indigo-600 transition-all duration-300">
159
+ Watch Demo
160
+ </button>
161
+ </div>
162
+ </div>
163
+
164
+ <!-- Hero Image -->
165
+ <div class="mt-16 relative">
166
+ <div class="floating-card max-w-4xl mx-auto">
167
+ <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?w=1200&h=600&fit=crop"
168
+ alt="Dashboard"
169
+ class="rounded-2xl shadow-2xl w-full h-96 object-cover">
170
+ </div>
171
+ </div>
172
+ </div>
173
+ </section>
174
+
175
+ <!-- Features Section -->
176
+ <section id="features" class="py-20 bg-white">
177
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
178
+ <div class="text-center mb-16">
179
+ <h2 class="text-3xl md:text-5xl font-bold text-gray-900 mb-4">
180
+ Powerful <span class="gradient-text">Features</span>
181
+ </h2>
182
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">
183
+ Everything you need to succeed, all in one place
184
+ </p>
185
+ </div>
186
+
187
+ <div class="grid md:grid-cols-3 gap-8">
188
+ <!-- Feature 1 -->
189
+ <div class="floating-card bg-white p-8 rounded-2xl shadow-lg">
190
+ <div class="w-16 h-16 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-xl flex items-center justify-center mb-4">
191
+ <i data-lucide="rocket" class="text-white w-8 h-8"></i>
192
+ </div>
193
+ <h3 class="text-2xl font-bold text-gray-900 mb-3">Lightning Fast</h3>
194
+ <p class="text-gray-600">
195
+ Experience blazing fast performance with our optimized infrastructure
196
+ </p>
197
+ <a href="#" class="text-indigo-600 font-semibold mt-4 inline-block hover:text-indigo-700">
198
+ Learn more →
199
+ </a>
200
+ </div>
201
+
202
+ <!-- Feature 2 -->
203
+ <div class="floating-card bg-white p-8 rounded-2xl shadow-lg">
204
+ <div class="w-16 h-16 bg-gradient-to-r from-green-500 to-teal-600 rounded-xl flex items-center justify-center mb-4">
205
+ <i data-lucide="shield" class="text-white w-8 h-8"></i>
206
+ </div>
207
+ <h3 class="text-2xl font-bold text-gray-900 mb-3">Secure by Design</h3>
208
+ <p class="text-gray-600">
209
+ Enterprise-grade security that keeps your data safe and private
210
+ </p>
211
+ <a href="#" class="text-indigo-600 font-semibold mt-4 inline-block hover:text-indigo-700">
212
+ Learn more →
213
+ </a>
214
+ </div>
215
+
216
+ <!-- Feature 3 -->
217
+ <div class="floating-card bg-white p-8 rounded-2xl shadow-lg">
218
+ <div class="w-16 h-16 bg-gradient-to-r from-pink-500 to-red-600 rounded-xl flex items-center justify-center mb-4">
219
+ <i data-lucide="users" class="text-white w-8 h-8"></i>
220
+ </div>
221
+ <h3 class="text-2xl font-bold text-gray-900 mb-3">Team Collaboration</h3>
222
+ <p class="text-gray-600">
223
+ Work together seamlessly with real-time collaboration features
224
+ </p>
225
+ <a href="#" class="text-indigo-600 font-semibold mt-4 inline-block hover:text-indigo-700">
226
+ Learn more →
227
+ </a>
228
+ </div>
229
+ </div>
230
+ </div>
231
+ </section>
232
+
233
+ <!-- Pricing Section -->
234
+ <section id="pricing" class="py-20 bg-gray-50">
235
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
236
+ <div class="text-center mb-16">
237
+ <h2 class="text-3xl md:text-5xl font-bold text-gray-900 mb-4">
238
+ Simple <span class="gradient-text">Pricing</span>
239
+ </h2>
240
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">
241
+ Choose the perfect plan for your needs
242
+ </p>
243
+ </div>
244
+
245
+ <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
246
+ <!-- Starter Plan -->
247
+ <div class="floating-card bg-white p-8 rounded-2xl shadow-lg text-center">
248
+ <h3 class="text-2xl font-bold text-gray-900 mb-4">Starter</h3>
249
+ <div class="text-4xl font-bold text-gray-900 mb-6">
250
+ $9<span class="text-lg text-gray-600">/month</span>
251
+ </div>
252
+ <ul class="text-gray-600 space-y-3 mb-8">
253
+ <li>✓ Up to 10 projects</li>
254
+ <li>✓ Basic analytics</li>
255
+ <li>✓ Email support</li>
256
+ <li>✓ 5GB storage</li>
257
+ </ul>
258
+ <button class="w-full border-2 border-indigo-500 text-indigo-600 py-3 rounded-full font-semibold hover:bg-indigo-500 hover:text-white transition-all duration-300">
259
+ Get Started
260
+ </button>
261
+ </div>
262
+
263
+ <!-- Professional Plan -->
264
+ <div class="floating-card bg-gradient-to-r from-indigo-500 to-purple-600 p-8 rounded-2xl shadow-lg text-center text-white transform scale-105">
265
+ <div class="bg-white text-indigo-600 px-3 py-1 rounded-full text-sm font-semibold inline-block mb-4">
266
+ MOST POPULAR
267
+ </div>
268
+ <h3 class="text-2xl font-bold mb-4">Professional</h3>
269
+ <div class="text-4xl font-bold mb-6">
270
+ $29<span class="text-lg opacity-75">/month</span>
271
+ </div>
272
+ <ul class="space-y-3 mb-8 opacity-90">
273
+ <li>✓ Unlimited projects</li>
274
+ <li>✓ Advanced analytics</li>
275
+ <li>✓ Priority support</li>
276
+ <li>✓ 100GB storage</li>
277
+ <li>✓ Team collaboration</li>
278
+ </ul>
279
+ <button class="w-full bg-white text-indigo-600 py-3 rounded-full font-semibold hover:shadow-lg transition-all duration-300">
280
+ Get Started
281
+ </button>
282
+ </div>
283
+
284
+ <!-- Enterprise Plan -->
285
+ <div class="floating-card bg-white p-8 rounded-2xl shadow-lg text-center">
286
+ <h3 class="text-2xl font-bold text-gray-900 mb-4">Enterprise</h3>
287
+ <div class="text-4xl font-bold text-gray-900 mb-6">
288
+ $99<span class="text-lg text-gray-600">/month</span>
289
+ </div>
290
+ <ul class="text-gray-600 space-y-3 mb-8">
291
+ <li>✓ Everything in Pro</li>
292
+ <li>✓ Custom integrations</li>
293
+ <li>✓ Dedicated support</li>
294
+ <li>✓ Unlimited storage</li>
295
+ <li>✓ Advanced security</li>
296
+ </ul>
297
+ <button class="w-full border-2 border-indigo-500 text-indigo-600 py-3 rounded-full font-semibold hover:bg-indigo-500 hover:text-white transition-all duration-300">
298
+ Contact Sales
299
+ </button>
300
+ </div>
301
+ </div>
302
+ </div>
303
+ </section>
304
+
305
+ <!-- Testimonials Section -->
306
+ <section id="testimonials" class="py-20 bg-white">
307
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
308
+ <div class="text-center mb-16">
309
+ <h2 class="text-3xl md:text-5xl font-bold text-gray-900 mb-4">
310
+ What Our <span class="gradient-text">Customers Say</span>
311
+ </h2>
312
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">
313
+ Don't just take our word for it
314
+ </p>
315
+ </div>
316
+
317
+ <div class="grid md:grid-cols-3 gap-8">
318
+ <!-- Testimonial 1 -->
319
+ <div class="testimonial-card bg-gray-50 p-6 rounded-xl">
320
+ <div class="flex items-center mb-4">
321
+ <img src="https://images.unsplash.com/photo-1494790108755-2616b332-3fc?w=60&h=60&fit=crop&crop=face"
322
+ alt="Sarah"
323
+ class="w-12 h-12 rounded-full mr-4">
324
+ <div>
325
+ <h4 class="font-semibold text-gray-900">Sarah Johnson</h4>
326
+ <p class="text-sm text-gray-600">CEO, TechCorp</p>
327
+ </div>
328
+ </div>
329
+ <p class="text-gray-700 italic">
330
+ "QuantumLeap has transformed how we work. The productivity gains have been incredible."
331
+ </p>
332
+ <div class="flex text-yellow-400 mt-4">
333
+ <i data-lucide="star" class="w-4 h-4 fill-current"></i>
334
+ <i data-lucide="star" class="w-4 h-4 fill-current"></i>
335
+ <i data-lucide="star" class="w-4 h-4 fill-current"></i>
336
+ <i data-lucide="star" class="w-4 h-4 fill-current"></i>
337
+ <i data-lucide="star" class="w-4 h-4 fill-current"></i>
338
+ </div>
339
+ </div>
340
+
341
+ <!-- Testimonial 2 -->
342
+ <div class="testimonial-card bg-gray-50 p-6 rounded-xl">
343
+ <div class="flex items-center mb-4">
344
+ <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=60&h=60&fit=crop&crop=face"
345
+ alt="Mike"
346
+ class="w-12 h-12 rounded-full mr-4">
347
+ <div>
348
+ <h4 class="font-semibold text-gray-900">Mike Chen</h4>
349
+ <p class="text-sm text-gray-600">CTO, StartupX</p>
350
+ </div>
351
+ </div>
352
+ <p class="text-gray-700 italic">
353
+ "The best investment we've made. Our team's efficiency has improved by 300%."
354
+ </p>
355
+ <div class="flex text-yellow-400 mt-4">
356
+ <i data-lucide="star" class="w-4 h-4 fill-current"></i>
357
+ <i data-lucide="star" class="w-4 h-4 fill-current"></i>
358
+ <i data-lucide="star" class="w-4 h-4 fill-current"></i>
359
+ <i data-lucide="star" class="w-4 h-4 fill-current"></i>
360
+ <i data-lucide="star" class="w-4 h-4 fill-current"></i>
361
+ </div>
362
+ </div>
363
+
364
+ <!-- Testimonial 3 -->
365
+ <div class="testimonial-card bg-gray-50 p-6 rounded-xl">
366
+ <div class="flex items-center mb-4">
367
+ <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=60&h=60&fit=crop&crop=face"
368
+ alt="Emma"
369
+ class="w-12 h-12 rounded-full mr-4">
370
+ <div>
371
+ <h4 class="font-semibold text-gray-900">Emma Davis</h4>
372
+ <p class="text-sm text-gray-600">Product Manager, Innovate</p>
373
+ </div>
374
+ </div>
375
+ <p class="text-gray-700 italic">
376
+ "Intuitive, powerful, and reliable. Exactly what we needed to scale our operations."
377
+ </p>
378
+ <div class="flex text-yellow-400 mt-4">
379
+ <i data-lucide="star" class="w-4 h-4 fill-current"></i>
380
+ <i data-lucide="star" class="w-4 h-4 fill-current"></i>
381
+ <i data-lucide="star" class="w-4 h-4 fill-current"></i>
382
+ <i data-lucide="star" class="w-4 h-4 fill-current"></i>
383
+ <i data-lucide="star" class="w-4 h-4 fill-current"></i>
384
+ </div>
385
+ </div>
386
+ </div>
387
+ </div>
388
+ </section>
389
+
390
+ <!-- Footer -->
391
+ <footer class="bg-gray-900 text-white py-12">
392
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
393
+ <div class="grid md:grid-cols-4 gap-8">
394
+ <div>
395
+ <div class="flex items-center space-x-2 mb-4">
396
+ <div class="w-8 h-8 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-lg flex items-center justify-center">
397
+ <i data-lucide="zap" class="text-white w-5 h-5"></i>
398
+ </div>
399
+ <span class="text-xl font-bold">QuantumLeap</span>
400
+ </div>
401
+ <p class="text-gray-400">
402
+ Building the future of productivity, one feature at a time.
403
+ </p>
404
+ </div>
405
+
406
+ <div>
407
+ <h4 class="font-semibold mb-4">Product</h4>
408
+ <ul class="space-y-2 text-gray-400">
409
+ <li><a href="#" class="hover:text-white transition-colors">Features</a></li>
410
+ <li><a href="#" class="hover:text-white transition-colors">Pricing</a></li>
411
+ <li><a href="#" class="hover:text-white transition-colors">API</a></li>
412
+ </ul>
413
+ </div>
414
+
415
+ <div>
416
+ <h4 class="font-semibold mb-4">Support</h4>
417
+ <ul class="space-y-2 text-gray-400">
418
+ <li><a href="#" class="hover:text-white transition-colors">Help Center</a></li>
419
+ <li><a href="#" class="hover:text-white transition-colors">Contact</a></li>
420
+ <li><a href="#" class="hover:text-white transition-colors">Status</a></li>
421
+ </ul>
422
+ </div>
423
+
424
+ <div>
425
+ <h4 class="font-semibold mb-4">Connect</h4>
426
+ <div class="flex space-x-4">
427
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
428
+ <i data-lucide="twitter" class="w-5 h-5"></i>
429
+ </a>
430
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
431
+ <i data-lucide="linkedin" class="w-5 h-5"></i>
432
+ </a>
433
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
434
+ <i data-lucide="github" class="w-5 h-5"></i>
435
+ </a>
436
+ </div>
437
+ </div>
438
+ </div>
439
+
440
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
441
+ <p>&copy; 2024 QuantumLeap. All rights reserved.</p>
442
+ </div>
443
+ </div>
444
+ </footer>
445
+
446
+ <script>
447
+ // Initialize Lucide icons
448
+ lucide.createIcons();
449
+
450
+ // Mobile menu toggle
451
+ const mobileMenuBtn = document.getElementById('mobile-menu-btn');
452
+ const mobileMenu = document.getElementById('mobile-menu');
453
+
454
+ mobileMenuBtn.addEventListener('click', () => {
455
+ mobileMenu.classList.toggle('hidden');
456
+ });
457
+
458
+ // Smooth scrolling for anchor links
459
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
460
+ anchor.addEventListener('click', function (e) {
461
+ e.preventDefault();
462
+ const target = document.querySelector(this.getAttribute('href'));
463
+ if (target) {
464
+ target.scrollIntoView({ behavior: 'smooth' });
465
+ }
466
+ });
467
+ });
468
+
469
+ // Add scroll effect to navbar
470
+ window.addEventListener('scroll', () => {
471
+ const nav = document.querySelector('nav');
472
+ if (window.scrollY > 100) {
473
+ nav.classList.add('shadow-lg');
474
+ } else {
475
+ nav.classList.remove('shadow-lg');
476
+ }
477
+ });
478
+ </script>
479
+ <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=NeuralDev/simple-landing-page" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
480
+ </html>