Hugging Face's logo

Spaces:
dablack
/
webproject
Running

App Files Community
dablack commited on
Commit
bda9993
·
verified ·
1 Parent(s): fa2f7e6

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +416 -342
  2. prompts.txt +2 -1
index.html CHANGED
@@ -5,6 +5,28 @@
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Nexus Digital Solutions</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
  .video-background {
@@ -106,11 +128,48 @@
106
  height: 100%;
107
  background-color: rgba(0, 0, 0, 0.6);
108
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
109
  </style>
110
  </head>
111
- <body class="bg-gray-50 font-sans">
 
 
 
 
 
 
 
 
112
  <!-- Navigation -->
113
- <nav class="bg-gray-900 text-white sticky top-0 z-50 shadow-lg">
114
  <div class="container mx-auto px-6 py-4">
115
  <div class="flex justify-between items-center">
116
  <div class="flex items-center space-x-4">
@@ -168,64 +227,64 @@
168
  </section>
169
 
170
  <!-- Services Overview -->
171
- <section id="services" class="py-20 px-6 section fade-in">
172
  <div class="container mx-auto">
173
- <h2 class="text-3xl md:text-4xl font-bold text-center text-gray-800 mb-4">Our Comprehensive Solutions</h2>
174
- <p class="text-xl text-center text-gray-600 mb-16 max-w-3xl mx-auto">Everything you need to establish and grow your digital presence</p>
175
 
176
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
177
  <!-- Service 1 -->
178
- <div class="service-card bg-white rounded-xl shadow-lg p-8 transition duration-300">
179
- <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6">
180
- <i class="fas fa-globe text-blue-600 text-2xl"></i>
181
  </div>
182
- <h3 class="text-xl font-bold text-gray-800 mb-3">Multi Page Website Development</h3>
183
- <p class="text-gray-600">Professional, responsive websites designed to showcase your brand and convert visitors into customers.</p>
184
  </div>
185
 
186
  <!-- Service 2 -->
187
- <div class="service-card bg-white rounded-xl shadow-lg p-8 transition duration-300">
188
- <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6">
189
- <i class="fas fa-search text-blue-600 text-2xl"></i>
190
  </div>
191
- <h3 class="text-xl font-bold text-gray-800 mb-3">Enhanced Google Profile Management</h3>
192
- <p class="text-gray-600">Optimize your Google My Business listing to improve local search visibility and attract more customers.</p>
193
  </div>
194
 
195
  <!-- Service 3 -->
196
- <div class="service-card bg-white rounded-xl shadow-lg p-8 transition duration-300">
197
- <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6">
198
- <i class="fas fa-share-alt text-blue-600 text-2xl"></i>
199
  </div>
200
- <h3 class="text-xl font-bold text-gray-800 mb-3">Social Media Starter Kit</h3>
201
- <p class="text-gray-600">Launch your social media presence with professionally designed profiles and a content strategy.</p>
202
  </div>
203
 
204
  <!-- Service 4 -->
205
- <div class="service-card bg-white rounded-xl shadow-lg p-8 transition duration-300">
206
- <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6">
207
- <i class="fas fa-sync-alt text-blue-600 text-2xl"></i>
208
  </div>
209
- <h3 class="text-xl font-bold text-gray-800 mb-3">Unlimited Rapid Monthly Edits</h3>
210
- <p class="text-gray-600">Keep your content fresh with unlimited updates to your website and digital assets every month.</p>
211
  </div>
212
 
213
  <!-- Service 5 -->
214
- <div class="service-card bg-white rounded-xl shadow-lg p-8 transition duration-300">
215
- <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6">
216
- <i class="fas fa-link text-blue-600 text-2xl"></i>
217
  </div>
218
- <h3 class="text-xl font-bold text-gray-800 mb-3">Free Domain Registration</h3>
219
- <p class="text-gray-600">Get a professional domain name included with your website package to establish your online identity.</p>
220
  </div>
221
 
222
  <!-- Service 6 -->
223
- <div class="service-card bg-white rounded-xl shadow-lg p-8 transition duration-300">
224
- <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6">
225
- <i class="fas fa-palette text-blue-600 text-2xl"></i>
226
  </div>
227
- <h3 class="text-xl font-bold text-gray-800 mb-3">Custom Logo Design</h3>
228
- <p class="text-gray-600">Professional logo creation that captures your brand essence and makes a lasting impression.</p>
229
  </div>
230
  </div>
231
 
@@ -239,13 +298,13 @@
239
  </section>
240
 
241
  <!-- Ratings Section -->
242
- <section class="py-16 bg-gray-100 px-6 section fade-in">
243
  <div class="container mx-auto">
244
- <h2 class="text-3xl md:text-4xl font-bold text-center text-gray-800 mb-12">Client Satisfaction</h2>
245
 
246
  <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
247
  <!-- Rating 1 -->
248
- <div class="bg-white p-8 rounded-xl shadow-lg text-center">
249
  <div class="text-yellow-400 text-3xl mb-4">
250
  <i class="fas fa-star"></i>
251
  <i class="fas fa-star"></i>
@@ -253,11 +312,11 @@
253
  <i class="fas fa-star"></i>
254
  <i class="fas fa-star"></i>
255
  </div>
256
- <p class="text-gray-600 text-xl font-medium">98% Satisfaction Rate</p>
257
  </div>
258
 
259
  <!-- Rating 2 -->
260
- <div class="bg-white p-8 rounded-xl shadow-lg text-center">
261
  <div class="text-yellow-400 text-3xl mb-4">
262
  <i class="fas fa-star"></i>
263
  <i class="fas fa-star"></i>
@@ -265,11 +324,11 @@
265
  <i class="fas fa-star"></i>
266
  <i class="fas fa-star"></i>
267
  </div>
268
- <p class="text-gray-600 text-xl font-medium">95% Repeat Business</p>
269
  </div>
270
 
271
  <!-- Rating 3 -->
272
- <div class="bg-white p-8 rounded-xl shadow-lg text-center">
273
  <div class="text-yellow-400 text-3xl mb-4">
274
  <i class="fas fa-star"></i>
275
  <i class="fas fa-star"></i>
@@ -277,61 +336,61 @@
277
  <i class="fas fa-star"></i>
278
  <i class="fas fa-star"></i>
279
  </div>
280
- <p class="text-gray-600 text-xl font-medium">100% On-Time Delivery</p>
281
  </div>
282
  </div>
283
  </div>
284
  </section>
285
 
286
  <!-- Value Proposition -->
287
- <section id="why-us" class="py-20 bg-white px-6 section fade-in">
288
  <div class="container mx-auto">
289
  <div class="flex flex-col lg:flex-row items-center">
290
  <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12">
291
- <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-6">Why Choose Nexus Digital?</h2>
292
- <p class="text-gray-600 mb-8 text-lg">We combine technical expertise with strategic thinking to deliver digital solutions that drive real business results.</p>
293
 
294
  <div class="space-y-6">
295
  <div class="flex items-start">
296
- <div class="bg-blue-100 p-2 rounded-full mr-4">
297
- <i class="fas fa-bolt text-blue-600"></i>
298
  </div>
299
  <div>
300
- <h4 class="font-bold text-gray-800 mb-1">Rapid Implementation</h4>
301
- <p class="text-gray-600">Get your digital assets up and running quickly without compromising quality.</p>
302
  </div>
303
  </div>
304
 
305
  <div class="flex items-start">
306
- <div class="bg-blue-100 p-2 rounded-full mr-4">
307
- <i class="fas fa-headset text-blue-600"></i>
308
  </div>
309
  <div>
310
- <h4 class="font-bold text-gray-800 mb-1">Priority Support</h4>
311
- <p class="text-gray-600">Dedicated support team available to address your needs promptly.</p>
312
  </div>
313
  </div>
314
 
315
  <div class="flex items-start">
316
- <div class="bg-blue-100 p-2 rounded-full mr-4">
317
- <i class="fas fa-chart-line text-blue-600"></i>
318
  </div>
319
  <div>
320
- <h4 class="font-bold text-gray-800 mb-1">Strategic Guidance</h4>
321
- <p class="text-gray-600">Quarterly strategy calls to align your digital presence with business objectives.</p>
322
  </div>
323
  </div>
324
  </div>
325
 
326
  <div class="mt-10">
327
- <button onclick="changeTab('about')" class="bg-gray-800 hover:bg-gray-900 text-white font-medium py-3 px-6 rounded-lg transition duration-300 inline-flex items-center">
328
  Learn More About Us
329
  <i class="fas fa-arrow-right ml-2"></i>
330
  </button>
331
  </div>
332
  </div>
333
 
334
- <div class="lg:w-1/2 bg-white rounded-xl shadow-lg overflow-hidden">
335
  <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Team working" class="w-full h-auto">
336
  </div>
337
  </div>
@@ -339,7 +398,7 @@
339
  </section>
340
 
341
  <!-- Newsletter CTA -->
342
- <section class="py-20 bg-gray-900 text-white px-6 section fade-in">
343
  <div class="container mx-auto text-center">
344
  <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Transform Your Business?</h2>
345
  <p class="text-xl mb-10 max-w-2xl mx-auto">Get started with a free consultation to discuss your digital needs</p>
@@ -356,22 +415,22 @@
356
 
357
  <!-- Offers Tab Content -->
358
  <div id="offers" class="tab-content">
359
- <section class="py-20 px-6">
360
  <div class="container mx-auto">
361
- <h1 class="text-4xl font-bold text-center text-gray-800 mb-4">Our Service Packages</h1>
362
- <p class="text-xl text-center text-gray-600 mb-16 max-w-3xl mx-auto">Comprehensive digital solutions tailored to your business needs and budget.</p>
363
 
364
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
365
  <!-- Basic Package -->
366
- <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200 hover:border-blue-500 transition duration-300">
367
- <div class="bg-gray-100 p-6">
368
- <h3 class="text-2xl font-bold text-gray-800 mb-2">Starter Package</h3>
369
- <p class="text-gray-600 mb-4">Perfect for new businesses establishing their online presence</p>
370
  <div class="flex items-baseline mb-4">
371
- <span class="text-4xl font-bold text-gray-800">1,099 AED</span>
372
- <span class="ml-2 text-gray-600">/month</span>
373
  </div>
374
- <button onclick="changeTab('consultation')" class="w-full bg-gray-800 hover:bg-gray-900 text-white font-medium py-2 px-4 rounded-lg transition duration-300">
375
  Get Started
376
  </button>
377
  </div>
@@ -379,34 +438,34 @@
379
  <ul class="space-y-3">
380
  <li class="flex items-center">
381
  <i class="fas fa-check text-green-500 mr-3"></i>
382
- <span>5-Page Website Development</span>
383
  </li>
384
  <li class="flex items-center">
385
  <i class="fas fa-check text-green-500 mr-3"></i>
386
- <span>Google Profile Optimization</span>
387
  </li>
388
  <li class="flex items-center">
389
  <i class="fas fa-check text-green-500 mr-3"></i>
390
- <span>Social Media Setup (2 Platforms)</span>
391
  </li>
392
  <li class="flex items-center">
393
  <i class="fas fa-check text-green-500 mr-3"></i>
394
- <span>5 Monthly Content Updates</span>
395
  </li>
396
  <li class="flex items-center text-gray-400">
397
  <i class="fas fa-times text-gray-400 mr-3"></i>
398
- <span>Free Domain (1 Year)</span>
399
  </li>
400
  <li class="flex items-center text-gray-400">
401
  <i class="fas fa-times text-gray-400 mr-3"></i>
402
- <span>Custom Logo Design</span>
403
  </li>
404
  </ul>
405
  </div>
406
  </div>
407
 
408
  <!-- Popular Package -->
409
- <div class="bg-white rounded-xl shadow-xl overflow-hidden border-2 border-blue-500 transform scale-105 z-10">
410
  <div class="bg-blue-500 text-white p-6">
411
  <div class="flex justify-between items-start">
412
  <div>
@@ -427,46 +486,46 @@
427
  <ul class="space-y-3">
428
  <li class="flex items-center">
429
  <i class="fas fa-check text-green-500 mr-3"></i>
430
- <span>10-Page Website Development</span>
431
  </li>
432
  <li class="flex items-center">
433
  <i class="fas fa-check text-green-500 mr-3"></i>
434
- <span>Premium Google Profile Management</span>
435
  </li>
436
  <li class="flex items-center">
437
  <i class="fas fa-check text-green-500 mr-3"></i>
438
- <span>Social Media Starter Kit (4 Platforms)</span>
439
  </li>
440
  <li class="flex items-center">
441
  <i class="fas fa-check text-green-500 mr-3"></i>
442
- <span>Unlimited Monthly Edits</span>
443
  </li>
444
  <li class="flex items-center">
445
  <i class="fas fa-check text-green-500 mr-3"></i>
446
- <span>Free Domain (1 Year)</span>
447
  </li>
448
  <li class="flex items-center">
449
  <i class="fas fa-check text-green-500 mr-3"></i>
450
- <span>Custom Logo Design</span>
451
  </li>
452
  <li class="flex items-center">
453
  <i class="fas fa-check text-green-500 mr-3"></i>
454
- <span>Priority Email Support</span>
455
  </li>
456
  </ul>
457
  </div>
458
  </div>
459
 
460
  <!-- Premium Package -->
461
- <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200 hover:border-blue-500 transition duration-300">
462
- <div class="bg-gray-100 p-6">
463
- <h3 class="text-2xl font-bold text-gray-800 mb-2">Enterprise Package</h3>
464
- <p class="text-gray-600 mb-4">For businesses needing comprehensive digital solutions</p>
465
  <div class="flex items-baseline mb-4">
466
- <span class="text-4xl font-bold text-gray-800">3,699 AED</span>
467
- <span class="ml-2 text-gray-600">/month</span>
468
  </div>
469
- <button onclick="changeTab('consultation')" class="w-full bg-gray-800 hover:bg-gray-900 text-white font-medium py-2 px-4 rounded-lg transition duration-300">
470
  Get Started
471
  </button>
472
  </div>
@@ -474,48 +533,48 @@
474
  <ul class="space-y-3">
475
  <li class="flex items-center">
476
  <i class="fas fa-check text-green-500 mr-3"></i>
477
- <span>Unlimited Page Website Development</span>
478
  </li>
479
  <li class="flex items-center">
480
  <i class="fas fa-check text-green-500 mr-3"></i>
481
- <span>Enhanced Google Profile Management</span>
482
  </li>
483
  <li class="flex items-center">
484
  <i class="fas fa-check text-green-500 mr-3"></i>
485
- <span>Complete Social Media Setup (All Platforms)</span>
486
  </li>
487
  <li class="flex items-center">
488
  <i class="fas fa-check text-green-500 mr-3"></i>
489
- <span>Unlimited Rapid Monthly Edits</span>
490
  </li>
491
  <li class="flex items-center">
492
  <i class="fas fa-check text-green-500 mr-3"></i>
493
- <span>Free Domain (2 Years)</span>
494
  </li>
495
  <li class="flex items-center">
496
  <i class="fas fa-check text-green-500 mr-3"></i>
497
- <span>Premium Logo & Branding Package</span>
498
  </li>
499
  <li class="flex items-center">
500
  <i class="fas fa-check text-green-500 mr-3"></i>
501
- <span>24/7 Priority Support</span>
502
  </li>
503
  <li class="flex items-center">
504
  <i class="fas fa-check text-green-500 mr-3"></i>
505
- <span>Quarterly Strategy Calls</span>
506
  </li>
507
  <li class="flex items-center">
508
  <i class="fas fa-check text-green-500 mr-3"></i>
509
- <span>Monthly Performance Reports</span>
510
  </li>
511
  </ul>
512
  </div>
513
  </div>
514
  </div>
515
 
516
- <div class="mt-16 bg-gray-100 rounded-xl p-8">
517
- <h3 class="text-2xl font-bold text-gray-800 mb-4">Not sure which package is right for you?</h3>
518
- <p class="text-gray-600 mb-6">Our digital consultants can help you determine the perfect solution for your business needs and budget.</p>
519
  <button onclick="changeTab('consultation')" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-lg transition duration-300">
520
  Schedule a Free Consultation
521
  </button>
@@ -526,9 +585,9 @@
526
 
527
  <!-- Consultation Tab Content -->
528
  <div id="consultation" class="tab-content">
529
- <section class="py-20 px-6">
530
  <div class="container mx-auto max-w-4xl">
531
- <div class="bg-white rounded-xl shadow-lg overflow-hidden">
532
  <div class="md:flex">
533
  <div class="md:w-1/2 bg-blue-600 text-white p-10">
534
  <h2 class="text-3xl font-bold mb-6">Schedule Your Free Consultation</h2>
@@ -568,281 +627,296 @@
568
  </div>
569
 
570
  <div class="md:w-1/2 p-10">
571
- <h3 class="text-2xl font-bold text-gray-800 mb-6">Book Your Slot</h3>
572
  <form>
573
  <div class="mb-4">
574
- <label class="block text-gray-700 mb-2" for="name">Full Name</label>
575
- <input type="text" id="name" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
576
  </div>
577
  <div class="mb-4">
578
- <label class="block text-gray-700 mb-2" for="email">Email Address</label>
579
- <input type="email" id="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
580
- </div>
581
- <div class="mb-4">
582
- <label class="block text-gray-700 mb-2" for="phone">Phone Number</label>
583
- <input type="tel" id="phone" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
584
- </div>
585
- <div class="mb-6">
586
- <label class="block text-gray-700 mb-2" for="date">Preferred Date & Time</label>
587
- <input type="datetime-local" id="date" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
 
 
 
 
 
 
 
588
  </div>
589
- <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300">
590
- Schedule Consultation
591
- </button>
592
- </form>
593
- </div>
594
  </div>
595
- </div>
596
- </div>
597
- </section>
598
- </div>
599
 
600
- <!-- About Us Tab Content -->
601
- <div id="about" class="tab-content">
602
- <section class="py-20 px-6">
603
- <div class="container mx-auto">
604
- <div class="flex flex-col lg:flex-row items-center mb-20">
605
- <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12">
606
- <h1 class="text-4xl font-bold text-gray-800 mb-6">Our Story</h1>
607
- <p class="text-gray-600 mb-6 text-lg">
608
- Founded in 2018, Nexus Digital Solutions began with a simple mission: to help businesses of all sizes establish and grow their digital presence without the complexity and high costs typically associated with digital transformation.
609
- </p>
610
- <p class="text-gray-600 mb-6 text-lg">
611
- What started as a small team of digital enthusiasts has grown into a full-service digital solutions provider serving clients across multiple industries. Our approach combines technical expertise with strategic thinking to deliver results that matter.
612
- </p>
613
- <div class="bg-blue-100 p-6 rounded-lg">
614
- <p class="text-blue-800 font-medium">
615
- "We believe in making digital excellence accessible to every business, regardless of size or technical expertise."
616
  </p>
 
 
 
 
 
 
 
 
 
 
 
617
  </div>
618
  </div>
619
- <div class="lg:w-1/2">
620
- <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Our team" class="w-full rounded-xl shadow-lg">
621
- </div>
622
- </div>
623
-
624
- <div class="py-16">
625
- <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Our Core Values</h2>
626
 
627
- <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
628
- <div class="bg-white p-8 rounded-xl shadow-lg">
629
- <div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mb-6">
630
- <i class="fas fa-lightbulb text-blue-600 text-xl"></i>
631
- </div>
632
- <h3 class="text-xl font-bold text-gray-800 mb-3">Innovation</h3>
633
- <p class="text-gray-600">We constantly explore new technologies and strategies to keep our clients ahead of the curve.</p>
634
- </div>
635
 
636
- <div class="bg-white p-8 rounded-xl shadow-lg">
637
- <div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mb-6">
638
- <i class="fas fa-handshake text-blue-600 text-xl"></i>
 
 
 
 
639
  </div>
640
- <h3 class="text-xl font-bold text-gray-800 mb-3">Integrity</h3>
641
- <p class="text-gray-600">We build trust through transparency, honesty, and delivering on our promises.</p>
642
- </div>
643
-
644
- <div class="bg-white p-8 rounded-xl shadow-lg">
645
- <div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mb-6">
646
- <i class="fas fa-heart text-blue-600 text-xl"></i>
 
 
 
 
 
 
 
 
647
  </div>
648
- <h3 class="text-xl font-bold text-gray-800 mb-3">Client-Centric</h3>
649
- <p class="text-gray-600">Your success is our success. We tailor solutions to your unique needs and goals.</p>
650
  </div>
651
  </div>
 
 
 
 
 
 
 
 
652
  </div>
653
-
654
- <div class="mt-16 text-center">
655
- <h2 class="text-3xl font-bold text-gray-800 mb-6">Ready to Transform Your Digital Presence?</h2>
656
- <button onclick="changeTab('offers')" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-8 rounded-lg transition duration-300 inline-flex items-center">
657
- Explore Our Services
658
- <i class="fas fa-arrow-right ml-2"></i>
659
- </button>
660
- </div>
661
- </div>
662
- </section>
663
- </div>
664
 
665
- <!-- Footer -->
666
- <footer class="bg-gray-900 text-white py-12 px-6">
667
- <div class="container mx-auto">
668
- <div class="grid grid-cols-1 md:grid-cols-4 gap-10">
669
- <div>
670
- <div class="flex items-center space-x-3 mb-6">
671
- <div class="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center">
672
- <i class="fas fa-cube text-white text-xl"></i>
 
 
673
  </div>
674
- <span class="text-xl font-bold">Nexus Digital</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
675
  </div>
676
- <p class="text-gray-400 mb-6">
677
- Comprehensive digital solutions to elevate your online presence and drive business growth.
678
- </p>
679
- <div class="flex space-x-4">
680
- <a href="#" class="text-gray-400 hover:text-white transition">
681
- <i class="fab fa-facebook-f"></i>
682
- </a>
683
- <a href="#" class="text-gray-400 hover:text-white transition">
684
- <i class="fab fa-twitter"></i>
685
- </a>
686
- <a href="#" class="text-gray-400 hover:text-white transition">
687
- <i class="fab fa-linkedin-in"></i>
688
- </a>
689
- <a href="#" class="text-gray-400 hover:text-white transition">
690
- <i class="fab fa-instagram"></i>
691
- </a>
 
 
 
 
 
 
 
 
 
 
 
 
692
  </div>
693
  </div>
694
 
695
- <div>
696
- <h3 class="text-lg font-bold mb-6">Services</h3>
697
- <ul class="space-y-3">
698
- <li><a href="#" class="text-gray-400 hover:text-white transition">Website Development</a></li>
699
- <li><a href="#" class="text-gray-400 hover:text-white transition">Google Profile Management</a></li>
700
- <li><a href="#" class="text-gray-400 hover:text-white transition">Social Media Solutions</a></li>
701
- <li><a href="#" class="text-gray-400 hover:text-white transition">Content Updates</a></li>
702
- <li><a href="#" class="text-gray-400 hover:text-white transition">Branding & Logo Design</a></li>
703
- </ul>
704
- </div>
705
-
706
- <div>
707
- <h3 class="text-lg font-bold mb-6">Company</h3>
708
- <ul class="space-y-3">
709
- <li><a href="#" class="text-gray-400 hover:text-white transition">About Us</a></li>
710
- <li><a href="#" class="text-gray-400 hover:text-white transition">Our Team</a></li>
711
- <li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li>
712
- <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
713
- <li><a href="#" class="text-gray-400 hover:text-white transition">Contact Us</a></li>
714
- </ul>
715
- </div>
716
-
717
- <div>
718
- <h3 class="text-lg font-bold mb-6">Contact</h3>
719
- <ul class="space-y-3">
720
- <li class="flex items-start">
721
- <i class="fas fa-map-marker-alt text-gray-400 mt-1 mr-3"></i>
722
- <span class="text-gray-400">123 Digital Lane, Suite 100<br>San Francisco, CA 94103</span>
723
- </li>
724
- <li class="flex items-center">
725
- <i class="fas fa-phone-alt text-gray-400 mr-3"></i>
726
- <span class="text-gray-400">(555) 123-4567</span>
727
- </li>
728
- <li class="flex items-center">
729
- <i class="fas fa-envelope text-gray-400 mr-3"></i>
730
- <span class="text-gray-400">info@nexusdigital.com</span>
731
- </li>
732
- </ul>
733
- </div>
734
- </div>
735
-
736
- <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
737
- <p class="text-gray-400 mb-4 md:mb-0">© 2023 Nexus Digital Solutions. All rights reserved.</p>
738
- <div class="flex space-x-6">
739
- <a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a>
740
- <a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a>
741
- <a href="#" class="text-gray-400 hover:text-white transition">Cookie Policy</a>
742
  </div>
743
  </div>
744
- </div>
745
- </footer>
746
 
747
- <script>
748
- // Tab functionality
749
- function changeTab(tabId) {
750
- // Hide all tab contents
751
- document.querySelectorAll('.tab-content').forEach(tab => {
752
- tab.classList.remove('active');
753
- });
754
-
755
- // Show selected tab content
756
- document.getElementById(tabId).classList.add('active');
 
 
 
 
 
 
 
 
 
757
 
758
- // Update tab links
759
- document.querySelectorAll('.nav-link').forEach(link => {
760
- link.classList.remove('text-blue-400', 'border-b-2', 'border-blue-400', 'pb-1');
 
 
 
 
 
761
  });
762
 
763
- // Scroll to top
764
- window.scrollTo(0, 0);
765
- }
766
-
767
- // Mobile menu toggle
768
- document.getElementById('mobile-menu-button').addEventListener('click', function() {
769
- const menu = document.getElementById('mobile-menu');
770
- if (menu.classList.contains('hidden')) {
771
- menu.classList.remove('hidden');
772
- } else {
773
- menu.classList.add('hidden');
774
- }
775
- });
776
-
777
- // Smooth scrolling for anchor links
778
- document.querySelectorAll('a[href^="#"]').forEach(anchor => {
779
- anchor.addEventListener('click', function(e) {
780
- if(this.getAttribute('href') !== '#') {
781
- e.preventDefault();
782
-
783
- // Check if we're already on the home tab
784
- const currentTab = document.querySelector('.tab-content.active').id;
785
- const targetSection = this.getAttribute('href').substring(1);
786
-
787
- if (currentTab !== 'home' && ['home-section', 'services', 'why-us'].includes(targetSection)) {
788
- // Switch to home tab first
789
- changeTab('home');
790
 
791
- // Wait for tab switch to complete before scrolling
792
- setTimeout(() => {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
793
  document.querySelector(this.getAttribute('href')).scrollIntoView({
794
  behavior: 'smooth'
795
  });
796
- }, 100);
797
- } else {
798
- // Regular scroll
799
- document.querySelector(this.getAttribute('href')).scrollIntoView({
800
- behavior: 'smooth'
801
- });
802
  }
803
- }
804
  });
805
- });
806
-
807
- // Intersection Observer for fade-in animations
808
- const fadeElements = document.querySelectorAll('.fade-in');
809
-
810
- const observer = new IntersectionObserver((entries) => {
811
- entries.forEach(entry => {
812
- if (entry.isIntersecting) {
813
- entry.target.classList.add('visible');
814
- }
 
 
815
  });
816
- }, {
817
- threshold: 0.1
818
- });
819
-
820
- fadeElements.forEach(element => {
821
- observer.observe(element);
822
- });
823
-
824
- // Update active nav link on scroll
825
- const sections = document.querySelectorAll('.section');
826
-
827
- window.addEventListener('scroll', () => {
828
- let current = '';
829
 
830
- sections.forEach(section => {
831
- const sectionTop = section.offsetTop;
832
- const sectionHeight = section.clientHeight;
833
-
834
- if (pageYOffset >= (sectionTop - 100)) {
835
- current = section.getAttribute('id');
836
- }
837
  });
838
 
839
- document.querySelectorAll('.nav-link').forEach(link => {
840
- link.classList.remove('text-blue-400', 'border-b-2', 'border-blue-400', 'pb-1');
841
- if (link.getAttribute('href') === `#${current}`) {
842
- link.classList.add('text-blue-400', 'border-b-2', 'border-blue-400', 'pb-1');
843
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
844
  });
845
- });
846
- </script>
847
  <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=dablack/webproject" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
848
  </html>
 
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Nexus Digital Solutions</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
+ <script>
9
+ tailwind.config = {
10
+ darkMode: 'class',
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ dark: {
15
+ 100: '#1E293B',
16
+ 200: '#1A243B',
17
+ 300: '#162036',
18
+ 400: '#121C30',
19
+ 500: '#0E1829',
20
+ 600: '#0A1423',
21
+ 700: '#06101C',
22
+ 800: '#020C15',
23
+ 900: '#00080F',
24
+ }
25
+ }
26
+ }
27
+ }
28
+ }
29
+ </script>
30
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
31
  <style>
32
  .video-background {
 
128
  height: 100%;
129
  background-color: rgba(0, 0, 0, 0.6);
130
  }
131
+
132
+ /* Dark mode overrides */
133
+ .dark .dark\:bg-dark-900 {
134
+ background-color: #0E1829;
135
+ }
136
+
137
+ .dark .dark\:bg-dark-800 {
138
+ background-color: #121C30;
139
+ }
140
+
141
+ .dark .dark\:bg-dark-700 {
142
+ background-color: #162036;
143
+ }
144
+
145
+ .dark .dark\:text-gray-200 {
146
+ color: #E5E7EB;
147
+ }
148
+
149
+ .dark .dark\:text-gray-300 {
150
+ color: #D1D5DB;
151
+ }
152
+
153
+ .dark .dark\:border-gray-700 {
154
+ border-color: #374151;
155
+ }
156
+
157
+ .dark .dark\:shadow-dark-xl {
158
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.25), 0 10px 10px -5px rgba(0, 0, 0, 0.15);
159
+ }
160
  </style>
161
  </head>
162
+ <body class="bg-gray-50 font-sans dark:bg-dark-900 dark:text-gray-200">
163
+ <!-- Dark Mode Toggle -->
164
+ <div class="fixed bottom-6 right-6 z-50">
165
+ <button id="darkModeToggle" class="bg-gray-800 dark:bg-gray-600 text-white p-3 rounded-full shadow-lg hover:bg-gray-700 dark:hover:bg-gray-500 transition">
166
+ <i class="fas fa-moon dark:hidden"></i>
167
+ <i class="fas fa-sun hidden dark:block"></i>
168
+ </button>
169
+ </div>
170
+
171
  <!-- Navigation -->
172
+ <nav class="bg-gray-900 dark:bg-dark-700 text-white sticky top-0 z-50 shadow-lg">
173
  <div class="container mx-auto px-6 py-4">
174
  <div class="flex justify-between items-center">
175
  <div class="flex items-center space-x-4">
 
227
  </section>
228
 
229
  <!-- Services Overview -->
230
+ <section id="services" class="py-20 px-6 section fade-in dark:bg-dark-800">
231
  <div class="container mx-auto">
232
+ <h2 class="text-3xl md:text-4xl font-bold text-center text-gray-800 dark:text-gray-200 mb-4">Our Comprehensive Solutions</h2>
233
+ <p class="text-xl text-center text-gray-600 dark:text-gray-300 mb-16 max-w-3xl mx-auto">Everything you need to establish and grow your digital presence</p>
234
 
235
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
236
  <!-- Service 1 -->
237
+ <div class="service-card bg-white dark:bg-dark-700 rounded-xl shadow-lg dark:shadow-dark-xl p-8 transition duration-300">
238
+ <div class="w-16 h-16 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mb-6">
239
+ <i class="fas fa-globe text-blue-600 dark:text-blue-400 text-2xl"></i>
240
  </div>
241
+ <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-3">Multi Page Website Development</h3>
242
+ <p class="text-gray-600 dark:text-gray-300">Professional, responsive websites designed to showcase your brand and convert visitors into customers.</p>
243
  </div>
244
 
245
  <!-- Service 2 -->
246
+ <div class="service-card bg-white dark:bg-dark-700 rounded-xl shadow-lg dark:shadow-dark-xl p-8 transition duration-300">
247
+ <div class="w-16 h-16 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mb-6">
248
+ <i class="fas fa-search text-blue-600 dark:text-blue-400 text-2xl"></i>
249
  </div>
250
+ <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-3">Enhanced Google Profile Management</h3>
251
+ <p class="text-gray-600 dark:text-gray-300">Optimize your Google My Business listing to improve local search visibility and attract more customers.</p>
252
  </div>
253
 
254
  <!-- Service 3 -->
255
+ <div class="service-card bg-white dark:bg-dark-700 rounded-xl shadow-lg dark:shadow-dark-xl p-8 transition duration-300">
256
+ <div class="w-16 h-16 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mb-6">
257
+ <i class="fas fa-share-alt text-blue-600 dark:text-blue-400 text-2xl"></i>
258
  </div>
259
+ <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-3">Social Media Starter Kit</h3>
260
+ <p class="text-gray-600 dark:text-gray-300">Launch your social media presence with professionally designed profiles and a content strategy.</p>
261
  </div>
262
 
263
  <!-- Service 4 -->
264
+ <div class="service-card bg-white dark:bg-dark-700 rounded-xl shadow-lg dark:shadow-dark-xl p-8 transition duration-300">
265
+ <div class="w-16 h-16 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mb-6">
266
+ <i class="fas fa-sync-alt text-blue-600 dark:text-blue-400 text-2xl"></i>
267
  </div>
268
+ <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-3">Unlimited Rapid Monthly Edits</h3>
269
+ <p class="text-gray-600 dark:text-gray-300">Keep your content fresh with unlimited updates to your website and digital assets every month.</p>
270
  </div>
271
 
272
  <!-- Service 5 -->
273
+ <div class="service-card bg-white dark:bg-dark-700 rounded-xl shadow-lg dark:shadow-dark-xl p-8 transition duration-300">
274
+ <div class="w-16 h-16 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mb-6">
275
+ <i class="fas fa-link text-blue-600 dark:text-blue-400 text-2xl"></i>
276
  </div>
277
+ <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-3">Free Domain Registration</h3>
278
+ <p class="text-gray-600 dark:text-gray-300">Get a professional domain name included with your website package to establish your online identity.</p>
279
  </div>
280
 
281
  <!-- Service 6 -->
282
+ <div class="service-card bg-white dark:bg-dark-700 rounded-xl shadow-lg dark:shadow-dark-xl p-8 transition duration-300">
283
+ <div class="w-16 h-16 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mb-6">
284
+ <i class="fas fa-palette text-blue-600 dark:text-blue-400 text-2xl"></i>
285
  </div>
286
+ <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-3">Custom Logo Design</h3>
287
+ <p class="text-gray-600 dark:text-gray-300">Professional logo creation that captures your brand essence and makes a lasting impression.</p>
288
  </div>
289
  </div>
290
 
 
298
  </section>
299
 
300
  <!-- Ratings Section -->
301
+ <section class="py-16 bg-gray-100 dark:bg-dark-700 px-6 section fade-in">
302
  <div class="container mx-auto">
303
+ <h2 class="text-3xl md:text-4xl font-bold text-center text-gray-800 dark:text-gray-200 mb-12">Client Satisfaction</h2>
304
 
305
  <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
306
  <!-- Rating 1 -->
307
+ <div class="bg-white dark:bg-dark-600 p-8 rounded-xl shadow-lg dark:shadow-dark-xl text-center">
308
  <div class="text-yellow-400 text-3xl mb-4">
309
  <i class="fas fa-star"></i>
310
  <i class="fas fa-star"></i>
 
312
  <i class="fas fa-star"></i>
313
  <i class="fas fa-star"></i>
314
  </div>
315
+ <p class="text-gray-600 dark:text-gray-300 text-xl font-medium">98% Satisfaction Rate</p>
316
  </div>
317
 
318
  <!-- Rating 2 -->
319
+ <div class="bg-white dark:bg-dark-600 p-8 rounded-xl shadow-lg dark:shadow-dark-xl text-center">
320
  <div class="text-yellow-400 text-3xl mb-4">
321
  <i class="fas fa-star"></i>
322
  <i class="fas fa-star"></i>
 
324
  <i class="fas fa-star"></i>
325
  <i class="fas fa-star"></i>
326
  </div>
327
+ <p class="text-gray-600 dark:text-gray-300 text-xl font-medium">95% Repeat Business</p>
328
  </div>
329
 
330
  <!-- Rating 3 -->
331
+ <div class="bg-white dark:bg-dark-600 p-8 rounded-xl shadow-lg dark:shadow-dark-xl text-center">
332
  <div class="text-yellow-400 text-3xl mb-4">
333
  <i class="fas fa-star"></i>
334
  <i class="fas fa-star"></i>
 
336
  <i class="fas fa-star"></i>
337
  <i class="fas fa-star"></i>
338
  </div>
339
+ <p class="text-gray-600 dark:text-gray-300 text-xl font-medium">100% On-Time Delivery</p>
340
  </div>
341
  </div>
342
  </div>
343
  </section>
344
 
345
  <!-- Value Proposition -->
346
+ <section id="why-us" class="py-20 bg-white dark:bg-dark-800 px-6 section fade-in">
347
  <div class="container mx-auto">
348
  <div class="flex flex-col lg:flex-row items-center">
349
  <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12">
350
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 dark:text-gray-200 mb-6">Why Choose Nexus Digital?</h2>
351
+ <p class="text-gray-600 dark:text-gray-300 mb-8 text-lg">We combine technical expertise with strategic thinking to deliver digital solutions that drive real business results.</p>
352
 
353
  <div class="space-y-6">
354
  <div class="flex items-start">
355
+ <div class="bg-blue-100 dark:bg-blue-900 p-2 rounded-full mr-4">
356
+ <i class="fas fa-bolt text-blue-600 dark:text-blue-400"></i>
357
  </div>
358
  <div>
359
+ <h4 class="font-bold text-gray-800 dark:text-gray-200 mb-1">Rapid Implementation</h4>
360
+ <p class="text-gray-600 dark:text-gray-300">Get your digital assets up and running quickly without compromising quality.</p>
361
  </div>
362
  </div>
363
 
364
  <div class="flex items-start">
365
+ <div class="bg-blue-100 dark:bg-blue-900 p-2 rounded-full mr-4">
366
+ <i class="fas fa-headset text-blue-600 dark:text-blue-400"></i>
367
  </div>
368
  <div>
369
+ <h4 class="font-bold text-gray-800 dark:text-gray-200 mb-1">Priority Support</h4>
370
+ <p class="text-gray-600 dark:text-gray-300">Dedicated support team available to address your needs promptly.</p>
371
  </div>
372
  </div>
373
 
374
  <div class="flex items-start">
375
+ <div class="bg-blue-100 dark:bg-blue-900 p-2 rounded-full mr-4">
376
+ <i class="fas fa-chart-line text-blue-600 dark:text-blue-400"></i>
377
  </div>
378
  <div>
379
+ <h4 class="font-bold text-gray-800 dark:text-gray-200 mb-1">Strategic Guidance</h4>
380
+ <p class="text-gray-600 dark:text-gray-300">Quarterly strategy calls to align your digital presence with business objectives.</p>
381
  </div>
382
  </div>
383
  </div>
384
 
385
  <div class="mt-10">
386
+ <button onclick="changeTab('about')" class="bg-gray-800 dark:bg-gray-700 hover:bg-gray-900 dark:hover:bg-gray-600 text-white font-medium py-3 px-6 rounded-lg transition duration-300 inline-flex items-center">
387
  Learn More About Us
388
  <i class="fas fa-arrow-right ml-2"></i>
389
  </button>
390
  </div>
391
  </div>
392
 
393
+ <div class="lg:w-1/2 bg-white dark:bg-dark-700 rounded-xl shadow-lg dark:shadow-dark-xl overflow-hidden">
394
  <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Team working" class="w-full h-auto">
395
  </div>
396
  </div>
 
398
  </section>
399
 
400
  <!-- Newsletter CTA -->
401
+ <section class="py-20 bg-gray-900 dark:bg-dark-700 text-white px-6 section fade-in">
402
  <div class="container mx-auto text-center">
403
  <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Transform Your Business?</h2>
404
  <p class="text-xl mb-10 max-w-2xl mx-auto">Get started with a free consultation to discuss your digital needs</p>
 
415
 
416
  <!-- Offers Tab Content -->
417
  <div id="offers" class="tab-content">
418
+ <section class="py-20 px-6 dark:bg-dark-900">
419
  <div class="container mx-auto">
420
+ <h1 class="text-4xl font-bold text-center text-gray-800 dark:text-gray-200 mb-4">Our Service Packages</h1>
421
+ <p class="text-xl text-center text-gray-600 dark:text-gray-300 mb-16 max-w-3xl mx-auto">Comprehensive digital solutions tailored to your business needs and budget.</p>
422
 
423
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
424
  <!-- Basic Package -->
425
+ <div class="bg-white dark:bg-dark-700 rounded-xl shadow-lg dark:shadow-dark-xl overflow-hidden border border-gray-200 dark:border-gray-700 hover:border-blue-500 transition duration-300">
426
+ <div class="bg-gray-100 dark:bg-dark-600 p-6">
427
+ <h3 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">Starter Package</h3>
428
+ <p class="text-gray-600 dark:text-gray-300 mb-4">Perfect for new businesses establishing their online presence</p>
429
  <div class="flex items-baseline mb-4">
430
+ <span class="text-4xl font-bold text-gray-800 dark:text-gray-200">1,099 AED</span>
431
+ <span class="ml-2 text-gray-600 dark:text-gray-300">/month</span>
432
  </div>
433
+ <button onclick="changeTab('consultation')" class="w-full bg-gray-800 dark:bg-gray-700 hover:bg-gray-900 dark:hover:bg-gray-600 text-white font-medium py-2 px-4 rounded-lg transition duration-300">
434
  Get Started
435
  </button>
436
  </div>
 
438
  <ul class="space-y-3">
439
  <li class="flex items-center">
440
  <i class="fas fa-check text-green-500 mr-3"></i>
441
+ <span class="text-gray-600 dark:text-gray-300">5-Page Website Development</span>
442
  </li>
443
  <li class="flex items-center">
444
  <i class="fas fa-check text-green-500 mr-3"></i>
445
+ <span class="text-gray-600 dark:text-gray-300">Google Profile Optimization</span>
446
  </li>
447
  <li class="flex items-center">
448
  <i class="fas fa-check text-green-500 mr-3"></i>
449
+ <span class="text-gray-600 dark:text-gray-300">Social Media Setup (2 Platforms)</span>
450
  </li>
451
  <li class="flex items-center">
452
  <i class="fas fa-check text-green-500 mr-3"></i>
453
+ <span class="text-gray-600 dark:text-gray-300">5 Monthly Content Updates</span>
454
  </li>
455
  <li class="flex items-center text-gray-400">
456
  <i class="fas fa-times text-gray-400 mr-3"></i>
457
+ <span class="text-gray-400">Free Domain (1 Year)</span>
458
  </li>
459
  <li class="flex items-center text-gray-400">
460
  <i class="fas fa-times text-gray-400 mr-3"></i>
461
+ <span class="text-gray-400">Custom Logo Design</span>
462
  </li>
463
  </ul>
464
  </div>
465
  </div>
466
 
467
  <!-- Popular Package -->
468
+ <div class="bg-white dark:bg-dark-700 rounded-xl shadow-xl dark:shadow-dark-xl overflow-hidden border-2 border-blue-500 transform scale-105 z-10">
469
  <div class="bg-blue-500 text-white p-6">
470
  <div class="flex justify-between items-start">
471
  <div>
 
486
  <ul class="space-y-3">
487
  <li class="flex items-center">
488
  <i class="fas fa-check text-green-500 mr-3"></i>
489
+ <span class="text-gray-600 dark:text-gray-300">10-Page Website Development</span>
490
  </li>
491
  <li class="flex items-center">
492
  <i class="fas fa-check text-green-500 mr-3"></i>
493
+ <span class="text-gray-600 dark:text-gray-300">Premium Google Profile Management</span>
494
  </li>
495
  <li class="flex items-center">
496
  <i class="fas fa-check text-green-500 mr-3"></i>
497
+ <span class="text-gray-600 dark:text-gray-300">Social Media Starter Kit (4 Platforms)</span>
498
  </li>
499
  <li class="flex items-center">
500
  <i class="fas fa-check text-green-500 mr-3"></i>
501
+ <span class="text-gray-600 dark:text-gray-300">Unlimited Monthly Edits</span>
502
  </li>
503
  <li class="flex items-center">
504
  <i class="fas fa-check text-green-500 mr-3"></i>
505
+ <span class="text-gray-600 dark:text-gray-300">Free Domain (1 Year)</span>
506
  </li>
507
  <li class="flex items-center">
508
  <i class="fas fa-check text-green-500 mr-3"></i>
509
+ <span class="text-gray-600 dark:text-gray-300">Custom Logo Design</span>
510
  </li>
511
  <li class="flex items-center">
512
  <i class="fas fa-check text-green-500 mr-3"></i>
513
+ <span class="text-gray-600 dark:text-gray-300">Priority Email Support</span>
514
  </li>
515
  </ul>
516
  </div>
517
  </div>
518
 
519
  <!-- Premium Package -->
520
+ <div class="bg-white dark:bg-dark-700 rounded-xl shadow-lg dark:shadow-dark-xl overflow-hidden border border-gray-200 dark:border-gray-700 hover:border-blue-500 transition duration-300">
521
+ <div class="bg-gray-100 dark:bg-dark-600 p-6">
522
+ <h3 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">Enterprise Package</h3>
523
+ <p class="text-gray-600 dark:text-gray-300 mb-4">For businesses needing comprehensive digital solutions</p>
524
  <div class="flex items-baseline mb-4">
525
+ <span class="text-4xl font-bold text-gray-800 dark:text-gray-200">3,699 AED</span>
526
+ <span class="ml-2 text-gray-600 dark:text-gray-300">/month</span>
527
  </div>
528
+ <button onclick="changeTab('consultation')" class="w-full bg-gray-800 dark:bg-gray-700 hover:bg-gray-900 dark:hover:bg-gray-600 text-white font-medium py-2 px-4 rounded-lg transition duration-300">
529
  Get Started
530
  </button>
531
  </div>
 
533
  <ul class="space-y-3">
534
  <li class="flex items-center">
535
  <i class="fas fa-check text-green-500 mr-3"></i>
536
+ <span class="text-gray-600 dark:text-gray-300">Unlimited Page Website Development</span>
537
  </li>
538
  <li class="flex items-center">
539
  <i class="fas fa-check text-green-500 mr-3"></i>
540
+ <span class="text-gray-600 dark:text-gray-300">Enhanced Google Profile Management</span>
541
  </li>
542
  <li class="flex items-center">
543
  <i class="fas fa-check text-green-500 mr-3"></i>
544
+ <span class="text-gray-600 dark:text-gray-300">Complete Social Media Setup (All Platforms)</span>
545
  </li>
546
  <li class="flex items-center">
547
  <i class="fas fa-check text-green-500 mr-3"></i>
548
+ <span class="text-gray-600 dark:text-gray-300">Unlimited Rapid Monthly Edits</span>
549
  </li>
550
  <li class="flex items-center">
551
  <i class="fas fa-check text-green-500 mr-3"></i>
552
+ <span class="text-gray-600 dark:text-gray-300">Free Domain (2 Years)</span>
553
  </li>
554
  <li class="flex items-center">
555
  <i class="fas fa-check text-green-500 mr-3"></i>
556
+ <span class="text-gray-600 dark:text-gray-300">Premium Logo & Branding Package</span>
557
  </li>
558
  <li class="flex items-center">
559
  <i class="fas fa-check text-green-500 mr-3"></i>
560
+ <span class="text-gray-600 dark:text-gray-300">24/7 Priority Support</span>
561
  </li>
562
  <li class="flex items-center">
563
  <i class="fas fa-check text-green-500 mr-3"></i>
564
+ <span class="text-gray-600 dark:text-gray-300">Quarterly Strategy Calls</span>
565
  </li>
566
  <li class="flex items-center">
567
  <i class="fas fa-check text-green-500 mr-3"></i>
568
+ <span class="text-gray-600 dark:text-gray-300">Monthly Performance Reports</span>
569
  </li>
570
  </ul>
571
  </div>
572
  </div>
573
  </div>
574
 
575
+ <div class="mt-16 bg-gray-100 dark:bg-dark-700 rounded-xl p-8">
576
+ <h3 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Not sure which package is right for you?</h3>
577
+ <p class="text-gray-600 dark:text-gray-300 mb-6">Our digital consultants can help you determine the perfect solution for your business needs and budget.</p>
578
  <button onclick="changeTab('consultation')" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-lg transition duration-300">
579
  Schedule a Free Consultation
580
  </button>
 
585
 
586
  <!-- Consultation Tab Content -->
587
  <div id="consultation" class="tab-content">
588
+ <section class="py-20 px-6 dark:bg-dark-900">
589
  <div class="container mx-auto max-w-4xl">
590
+ <div class="bg-white dark:bg-dark-700 rounded-xl shadow-lg dark:shadow-dark-xl overflow-hidden">
591
  <div class="md:flex">
592
  <div class="md:w-1/2 bg-blue-600 text-white p-10">
593
  <h2 class="text-3xl font-bold mb-6">Schedule Your Free Consultation</h2>
 
627
  </div>
628
 
629
  <div class="md:w-1/2 p-10">
630
+ <h3 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6">Book Your Slot</h3>
631
  <form>
632
  <div class="mb-4">
633
+ <label class="block text-gray-700 dark:text-gray-300 mb-2" for="name">Full Name</label>
634
+ <input type="text" id="name" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-dark-600 dark:border-gray-700">
635
  </div>
636
  <div class="mb-4">
637
+ <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email Address</label>
638
+ <input type="email" id="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-dark-600 dark:border-gray-700">
639
+ </div>
640
+ <div class="mb-4">
641
+ <label class="block text-gray-700 dark:text-gray-300 mb-2" for="phone">Phone Number</label>
642
+ <input type="tel" id="phone" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-dark-600 dark:border-gray-700">
643
+ </div>
644
+ <div class="mb-6">
645
+ <label class="block text-gray-700 dark:text-gray-300 mb-2" for="date">Preferred Date & Time</label>
646
+ <input type="datetime-local" id="date" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-dark-600 dark:border-gray-700">
647
+ </div>
648
+ <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300">
649
+ Schedule Consultation
650
+ </button>
651
+ </form>
652
+ </div>
653
+ </div>
654
  </div>
655
+ </div>
656
+ </section>
 
 
 
657
  </div>
 
 
 
 
658
 
659
+ <!-- About Us Tab Content -->
660
+ <div id="about" class="tab-content">
661
+ <section class="py-20 px-6 dark:bg-dark-900">
662
+ <div class="container mx-auto">
663
+ <div class="flex flex-col lg:flex-row items-center mb-20">
664
+ <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12">
665
+ <h1 class="text-4xl font-bold text-gray-800 dark:text-gray-200 mb-6">Our Story</h1>
666
+ <p class="text-gray-600 dark:text-gray-300 mb-6 text-lg">
667
+ Founded in 2018, Nexus Digital Solutions began with a simple mission: to help businesses of all sizes establish and grow their digital presence without the complexity and high costs typically associated with digital transformation.
 
 
 
 
 
 
 
668
  </p>
669
+ <p class="text-gray-600 dark:text-gray-300 mb-6 text-lg">
670
+ What started as a small team of digital enthusiasts has grown into a full-service digital solutions provider serving clients across multiple industries. Our approach combines technical expertise with strategic thinking to deliver results that matter.
671
+ </p>
672
+ <div class="bg-blue-100 dark:bg-blue-900 p-6 rounded-lg">
673
+ <p class="text-blue-800 dark:text-blue-200 font-medium">
674
+ "We believe in making digital excellence accessible to every business, regardless of size or technical expertise."
675
+ </p>
676
+ </div>
677
+ </div>
678
+ <div class="lg:w-1/2 bg-white dark:bg-dark-700 rounded-xl shadow-lg dark:shadow-dark-xl overflow-hidden">
679
+ <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Our team" class="w-full h-auto">
680
  </div>
681
  </div>
 
 
 
 
 
 
 
682
 
683
+ <div class="py-16">
684
+ <h2 class="text-3xl font-bold text-center text-gray-800 dark:text-gray-200 mb-12">Our Core Values</h2>
 
 
 
 
 
 
685
 
686
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
687
+ <div class="bg-white dark:bg-dark-700 p-8 rounded-xl shadow-lg dark:shadow-dark-xl">
688
+ <div class="w-14 h-14 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mb-6">
689
+ <i class="fas fa-lightbulb text-blue-600 dark:text-blue-400 text-xl"></i>
690
+ </div>
691
+ <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-3">Innovation</h3>
692
+ <p class="text-gray-600 dark:text-gray-300">We constantly explore new technologies and strategies to keep our clients ahead of the curve.</p>
693
  </div>
694
+
695
+ <div class="bg-white dark:bg-dark-700 p-8 rounded-xl shadow-lg dark:shadow-dark-xl">
696
+ <div class="w-14 h-14 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mb-6">
697
+ <i class="fas fa-handshake text-blue-600 dark:text-blue-400 text-xl"></i>
698
+ </div>
699
+ <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-3">Integrity</h3>
700
+ <p class="text-gray-600 dark:text-gray-300">We build trust through transparency, honesty, and delivering on our promises.</p>
701
+ </div>
702
+
703
+ <div class="bg-white dark:bg-dark-700 p-8 rounded-xl shadow-lg dark:shadow-dark-xl">
704
+ <div class="w-14 h-14 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mb-6">
705
+ <i class="fas fa-heart text-blue-600 dark:text-blue-400 text-xl"></i>
706
+ </div>
707
+ <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-3">Client-Centric</h3>
708
+ <p class="text-gray-600 dark:text-gray-300">Your success is our success. We tailor solutions to your unique needs and goals.</p>
709
  </div>
 
 
710
  </div>
711
  </div>
712
+
713
+ <div class="mt-16 text-center">
714
+ <h2 class="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-6">Ready to Transform Your Digital Presence?</h2>
715
+ <button onclick="changeTab('offers')" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-8 rounded-lg transition duration-300 inline-flex items-center">
716
+ Explore Our Services
717
+ <i class="fas fa-arrow-right ml-2"></i>
718
+ </button>
719
+ </div>
720
  </div>
721
+ </section>
722
+ </div>
 
 
 
 
 
 
 
 
 
723
 
724
+ <!-- Footer -->
725
+ <footer class="bg-gray-900 dark:bg-dark-700 text-white py-12 px-6">
726
+ <div class="container mx-auto">
727
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-10">
728
+ <div>
729
+ <div class="flex items-center space-x-3 mb-6">
730
+ <div class="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center">
731
+ <i class="fas fa-cube text-white text-xl"></i>
732
+ </div>
733
+ <span class="text-xl font-bold">Nexus Digital</span>
734
  </div>
735
+ <p class="text-gray-400 mb-6">
736
+ Comprehensive digital solutions to elevate your online presence and drive business growth.
737
+ </p>
738
+ <div class="flex space-x-4">
739
+ <a href="#" class="text-gray-400 hover:text-white transition">
740
+ <i class="fab fa-facebook-f"></i>
741
+ </a>
742
+ <a href="#" class="text-gray-400 hover:text-white transition">
743
+ <i class="fab fa-twitter"></i>
744
+ </a>
745
+ <a href="#" class="text-gray-400 hover:text-white transition">
746
+ <i class="fab fa-linkedin-in"></i>
747
+ </a>
748
+ <a href="#" class="text-gray-400 hover:text-white transition">
749
+ <i class="fab fa-instagram"></i>
750
+ </a>
751
+ </div>
752
+ </div>
753
+
754
+ <div>
755
+ <h3 class="text-lg font-bold mb-6">Services</h3>
756
+ <ul class="space-y-3">
757
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Website Development</a></li>
758
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Google Profile Management</a></li>
759
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Social Media Solutions</a></li>
760
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Content Updates</a></li>
761
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Branding & Logo Design</a></li>
762
+ </ul>
763
  </div>
764
+
765
+ <div>
766
+ <h3 class="text-lg font-bold mb-6">Company</h3>
767
+ <ul class="space-y-3">
768
+ <li><a href="#" class="text-gray-400 hover:text-white transition">About Us</a></li>
769
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Our Team</a></li>
770
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li>
771
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
772
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Contact Us</a></li>
773
+ </ul>
774
+ </div>
775
+
776
+ <div>
777
+ <h3 class="text-lg font-bold mb-6">Contact</h3>
778
+ <ul class="space-y-3">
779
+ <li class="flex items-start">
780
+ <i class="fas fa-map-marker-alt text-gray-400 mt-1 mr-3"></i>
781
+ <span class="text-gray-400">123 Digital Lane, Suite 100<br>San Francisco, CA 94103</span>
782
+ </li>
783
+ <li class="flex items-center">
784
+ <i class="fas fa-phone-alt text-gray-400 mr-3"></i>
785
+ <span class="text-gray-400">(555) 123-4567</span>
786
+ </li>
787
+ <li class="flex items-center">
788
+ <i class="fas fa-envelope text-gray-400 mr-3"></i>
789
+ <span class="text-gray-400">info@nexusdigital.com</span>
790
+ </li>
791
+ </ul>
792
  </div>
793
  </div>
794
 
795
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
796
+ <p class="text-gray-400 mb-4 md:mb-0">© 2023 Nexus Digital Solutions. All rights reserved.</p>
797
+ <div class="flex space-x-6">
798
+ <a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a>
799
+ <a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a>
800
+ <a href="#" class="text-gray-400 hover:text-white transition">Cookie Policy</a>
801
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
802
  </div>
803
  </div>
804
+ </footer>
 
805
 
806
+ <script>
807
+ // Tab functionality
808
+ function changeTab(tabId) {
809
+ // Hide all tab contents
810
+ document.querySelectorAll('.tab-content').forEach(tab => {
811
+ tab.classList.remove('active');
812
+ });
813
+
814
+ // Show selected tab content
815
+ document.getElementById(tabId).classList.add('active');
816
+
817
+ // Update tab links
818
+ document.querySelectorAll('.nav-link').forEach(link => {
819
+ link.classList.remove('text-blue-400', 'border-b-2', 'border-blue-400', 'pb-1');
820
+ });
821
+
822
+ // Scroll to top
823
+ window.scrollTo(0, 0);
824
+ }
825
 
826
+ // Mobile menu toggle
827
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
828
+ const menu = document.getElementById('mobile-menu');
829
+ if (menu.classList.contains('hidden')) {
830
+ menu.classList.remove('hidden');
831
+ } else {
832
+ menu.classList.add('hidden');
833
+ }
834
  });
835
 
836
+ // Smooth scrolling for anchor links
837
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
838
+ anchor.addEventListener('click', function(e) {
839
+ if(this.getAttribute('href') !== '#') {
840
+ e.preventDefault();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
841
 
842
+ // Check if we're already on the home tab
843
+ const currentTab = document.querySelector('.tab-content.active').id;
844
+ const targetSection = this.getAttribute('href').substring(1);
845
+
846
+ if (currentTab !== 'home' && ['home-section', 'services', 'why-us'].includes(targetSection)) {
847
+ // Switch to home tab first
848
+ changeTab('home');
849
+
850
+ // Wait for tab switch to complete before scrolling
851
+ setTimeout(() => {
852
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
853
+ behavior: 'smooth'
854
+ });
855
+ }, 100);
856
+ } else {
857
+ // Regular scroll
858
  document.querySelector(this.getAttribute('href')).scrollIntoView({
859
  behavior: 'smooth'
860
  });
861
+ }
 
 
 
 
 
862
  }
863
+ });
864
  });
865
+
866
+ // Intersection Observer for fade-in animations
867
+ const fadeElements = document.querySelectorAll('.fade-in');
868
+
869
+ const observer = new IntersectionObserver((entries) => {
870
+ entries.forEach(entry => {
871
+ if (entry.isIntersecting) {
872
+ entry.target.classList.add('visible');
873
+ }
874
+ });
875
+ }, {
876
+ threshold: 0.1
877
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
878
 
879
+ fadeElements.forEach(element => {
880
+ observer.observe(element);
 
 
 
 
 
881
  });
882
 
883
+ // Update active nav link on scroll
884
+ const sections = document.querySelectorAll('.section');
885
+
886
+ window.addEventListener('scroll', () => {
887
+ let current = '';
888
+
889
+ sections.forEach(section => {
890
+ const sectionTop = section.offsetTop;
891
+ const sectionHeight = section.clientHeight;
892
+
893
+ if (pageYOffset >= (sectionTop - 100)) {
894
+ current = section.getAttribute('id');
895
+ }
896
+ });
897
+
898
+ document.querySelectorAll('.nav-link').forEach(link => {
899
+ link.classList.remove('text-blue-400', 'border-b-2', 'border-blue-400', 'pb-1');
900
+ if (link.getAttribute('href') === `#${current}`) {
901
+ link.classList.add('text-blue-400', 'border-b-2', 'border-blue-400', 'pb-1');
902
+ }
903
+ });
904
+ });
905
+
906
+ // Dark mode toggle functionality
907
+ const darkModeToggle = document.getElementById('darkModeToggle');
908
+ const html = document.documentElement;
909
+
910
+ // Check for saved user preference or system preference
911
+ if (localStorage.getItem('darkMode') === 'true' ||
912
+ (!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
913
+ html.classList.add('dark');
914
+ }
915
+
916
+ darkModeToggle.addEventListener('click', () => {
917
+ html.classList.toggle('dark');
918
+ localStorage.setItem('darkMode', html.classList.contains('dark'));
919
  });
920
+ </script>
 
921
  <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=dablack/webproject" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
922
  </html>
prompts.txt CHANGED
@@ -1,3 +1,4 @@
1
  make the home page a scroll to explore type of thing with a video in full screen as the first thing seen on the website
2
  remove the section that says meet our leadership team. add a background image to the front page/home page. remove the what our clients say section and instead put some ratings without pictures and words of the people like just something simple. put the offers in dirhams and make the buttons to get started take you to a tab for scheduling a free consultation.
3
- fix the home, services and why us buttons so it takes takes you to the correct spot
 
 
1
  make the home page a scroll to explore type of thing with a video in full screen as the first thing seen on the website
2
  remove the section that says meet our leadership team. add a background image to the front page/home page. remove the what our clients say section and instead put some ratings without pictures and words of the people like just something simple. put the offers in dirhams and make the buttons to get started take you to a tab for scheduling a free consultation.
3
+ fix the home, services and why us buttons so it takes takes you to the correct spot
4
+ turn everything into dark mode