website1

Running

App Files Files Community

dablack commited on May 29, 2025

Commit

5da203d

verified ·

1 Parent(s): bda9993

Add 2 files

Browse files

Files changed (2) hide show

index.html +408 -356
prompts.txt +3 -1

index.html CHANGED Viewed

@@ -21,7 +21,24 @@
                             700: '#06101C',
                             800: '#020C15',
                             900: '#00080F',
                         }
                     }
                 }
             }
@@ -29,43 +46,72 @@
     </script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
-        .video-background {
-            position: relative;
-            width: 100%;
-            height: 100vh;
-            overflow: hidden;
         }
-        .video-background video {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            min-width: 100%;
-            min-height: 100%;
-            width: auto;
-            height: auto;
-            z-index: 1;
         }
-        .video-overlay {
             position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
-            background-color: rgba(0, 0, 0, 0.6);
-            z-index: 2;
         }
-        .hero-content {
-            position: relative;
-            z-index: 3;
         }
-        .service-card:hover {
-            transform: translateY(-10px);
-            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
         }
         .tab-content {
@@ -74,32 +120,15 @@
         .tab-content.active {
             display: block;
-            animation: fadeIn 0.5s ease-in-out;
-        }
-        @keyframes fadeIn {
-            from { opacity: 0; }
-            to { opacity: 1; }
         }
         .scroll-down-arrow {
-            animation: bounce 2s infinite;
-        }
-        @keyframes bounce {
-            0%, 20%, 50%, 80%, 100% {
-                transform: translateY(0);
-            }
-            40% {
-                transform: translateY(-20px);
-            }
-            60% {
-                transform: translateY(-10px);
-            }
         }
         .section {
-            scroll-margin-top: 80px;
         }
         .fade-in {
@@ -111,185 +140,242 @@
             opacity: 1;
         }
-        .hero-bg {
-            background-image: url('https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
-            background-size: cover;
-            background-position: center;
-            background-repeat: no-repeat;
-            height: 100vh;
             position: relative;
         }
-        .hero-overlay {
             position: absolute;
-            top: 0;
             left: 0;
             width: 100%;
             height: 100%;
-            background-color: rgba(0, 0, 0, 0.6);
         }
-        /* Dark mode overrides */
-        .dark .dark\:bg-dark-900 {
-            background-color: #0E1829;
         }
-        .dark .dark\:bg-dark-800 {
-            background-color: #121C30;
         }
-        .dark .dark\:bg-dark-700 {
-            background-color: #162036;
         }
-        .dark .dark\:text-gray-200 {
             color: #E5E7EB;
         }
-        .dark .dark\:text-gray-300 {
-            color: #D1D5DB;
         }
-        .dark .dark\:border-gray-700 {
-            border-color: #374151;
         }
-        .dark .dark\:shadow-dark-xl {
-            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.25), 0 10px 10px -5px rgba(0, 0, 0, 0.15);
         }
     </style>
 </head>
-<body class="bg-gray-50 font-sans dark:bg-dark-900 dark:text-gray-200">
     <!-- Dark Mode Toggle -->
     <div class="fixed bottom-6 right-6 z-50">
-        <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">
             <i class="fas fa-moon dark:hidden"></i>
             <i class="fas fa-sun hidden dark:block"></i>
         </button>
     </div>
-    <!-- Navigation -->
-    <nav class="bg-gray-900 dark:bg-dark-700 text-white sticky top-0 z-50 shadow-lg">
-        <div class="container mx-auto px-6 py-4">
-            <div class="flex justify-between items-center">
-                <div class="flex items-center space-x-4">
-                    <div class="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center">
-                        <i class="fas fa-cube text-white text-xl"></i>
-                    </div>
-                    <span class="text-xl font-bold">Nexus Digital</span>
-                </div>
-                <div class="hidden md:flex space-x-8">
-                    <a href="#home-section" class="nav-link font-medium text-blue-400 border-b-2 border-blue-400 pb-1">Home</a>
-                    <a href="#services" class="nav-link font-medium hover:text-blue-400 transition">Services</a>
-                    <a href="#why-us" class="nav-link font-medium hover:text-blue-400 transition">Why Us</a>
-                    <button onclick="changeTab('offers')" class="font-medium hover:text-blue-400 transition">Offers</button>
-                    <button onclick="changeTab('about')" class="font-medium hover:text-blue-400 transition">About</button>
-                </div>
-                <button class="md:hidden focus:outline-none" id="mobile-menu-button">
-                    <i class="fas fa-bars text-2xl"></i>
-                </button>
-            </div>
-            <!-- Mobile menu -->
-            <div class="md:hidden hidden pt-4" id="mobile-menu">
-                <a href="#home-section" class="block w-full text-left py-2 font-medium text-blue-400">Home</a>
-                <a href="#services" class="block w-full text-left py-2 font-medium hover:text-blue-400">Services</a>
-                <a href="#why-us" class="block w-full text-left py-2 font-medium hover:text-blue-400">Why Us</a>
-                <button onclick="changeTab('offers')" class="block w-full text-left py-2 font-medium hover:text-blue-400">Offers</button>
-                <button onclick="changeTab('about')" class="block w-full text-left py-2 font-medium hover:text-blue-400">About</button>
-            </div>
         </div>
     </nav>
     <!-- Home Tab Content -->
     <div id="home" class="tab-content active">
-        <!-- Hero Section with Background Image -->
         <section id="home-section" class="hero-bg section">
             <div class="hero-overlay"></div>
             <div class="hero-content flex items-center justify-center text-center h-full">
-                <div class="px-6">
-                    <h1 class="text-4xl md:text-6xl font-bold mb-6 text-white">Digital Excellence, Simplified</h1>
-                    <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto text-gray-200">Comprehensive digital solutions tailored to elevate your online presence and drive business growth.</p>
                     <div class="flex flex-col sm:flex-row justify-center gap-4">
-                        <a href="#services" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105">
                             Explore Our Services
                         </a>
-                        <button onclick="changeTab('offers')" class="bg-transparent hover:bg-white hover:text-gray-900 text-white font-bold py-3 px-8 rounded-full border-2 border-white transition duration-300 transform hover:scale-105">
                             View Packages
                         </button>
                     </div>
                 </div>
             </div>
             <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 scroll-down-arrow">
-                <a href="#services">
-                    <i class="fas fa-chevron-down text-white text-2xl animate-bounce"></i>
                 </a>
             </div>
         </section>
         <!-- Services Overview -->
-        <section id="services" class="py-20 px-6 section fade-in dark:bg-dark-800">
             <div class="container mx-auto">
-                <h2 class="text-3xl md:text-4xl font-bold text-center text-gray-800 dark:text-gray-200 mb-4">Our Comprehensive Solutions</h2>
-                <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>
-                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
                     <!-- Service 1 -->
-                    <div class="service-card bg-white dark:bg-dark-700 rounded-xl shadow-lg dark:shadow-dark-xl p-8 transition duration-300">
-                        <div class="w-16 h-16 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mb-6">
-                            <i class="fas fa-globe text-blue-600 dark:text-blue-400 text-2xl"></i>
                         </div>
-                        <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-3">Multi Page Website Development</h3>
-                        <p class="text-gray-600 dark:text-gray-300">Professional, responsive websites designed to showcase your brand and convert visitors into customers.</p>
                     </div>
                     <!-- Service 2 -->
-                    <div class="service-card bg-white dark:bg-dark-700 rounded-xl shadow-lg dark:shadow-dark-xl p-8 transition duration-300">
-                        <div class="w-16 h-16 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mb-6">
-                            <i class="fas fa-search text-blue-600 dark:text-blue-400 text-2xl"></i>
                         </div>
-                        <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-3">Enhanced Google Profile Management</h3>
-                        <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>
                     </div>
                     <!-- Service 3 -->
-                    <div class="service-card bg-white dark:bg-dark-700 rounded-xl shadow-lg dark:shadow-dark-xl p-8 transition duration-300">
-                        <div class="w-16 h-16 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mb-6">
-                            <i class="fas fa-share-alt text-blue-600 dark:text-blue-400 text-2xl"></i>
                         </div>
-                        <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-3">Social Media Starter Kit</h3>
-                        <p class="text-gray-600 dark:text-gray-300">Launch your social media presence with professionally designed profiles and a content strategy.</p>
                     </div>
                     <!-- Service 4 -->
-                    <div class="service-card bg-white dark:bg-dark-700 rounded-xl shadow-lg dark:shadow-dark-xl p-8 transition duration-300">
-                        <div class="w-16 h-16 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mb-6">
-                            <i class="fas fa-sync-alt text-blue-600 dark:text-blue-400 text-2xl"></i>
                         </div>
-                        <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-3">Unlimited Rapid Monthly Edits</h3>
-                        <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>
                     </div>
                     <!-- Service 5 -->
-                    <div class="service-card bg-white dark:bg-dark-700 rounded-xl shadow-lg dark:shadow-dark-xl p-8 transition duration-300">
-                        <div class="w-16 h-16 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mb-6">
-                            <i class="fas fa-link text-blue-600 dark:text-blue-400 text-2xl"></i>
                         </div>
-                        <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-3">Free Domain Registration</h3>
-                        <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>
                     </div>
                     <!-- Service 6 -->
-                    <div class="service-card bg-white dark:bg-dark-700 rounded-xl shadow-lg dark:shadow-dark-xl p-8 transition duration-300">
-                        <div class="w-16 h-16 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mb-6">
-                            <i class="fas fa-palette text-blue-600 dark:text-blue-400 text-2xl"></i>
                         </div>
-                        <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-3">Custom Logo Design</h3>
-                        <p class="text-gray-600 dark:text-gray-300">Professional logo creation that captures your brand essence and makes a lasting impression.</p>
                     </div>
                 </div>
-                <div class="text-center mt-16">
-                    <button onclick="changeTab('offers')" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105 inline-flex items-center">
                         See Our Packages
                         <i class="fas fa-arrow-right ml-2"></i>
                     </button>
@@ -298,13 +384,13 @@
         </section>
         <!-- Ratings Section -->
-        <section class="py-16 bg-gray-100 dark:bg-dark-700 px-6 section fade-in">
             <div class="container mx-auto">
-                <h2 class="text-3xl md:text-4xl font-bold text-center text-gray-800 dark:text-gray-200 mb-12">Client Satisfaction</h2>
                 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                     <!-- Rating 1 -->
-                    <div class="bg-white dark:bg-dark-600 p-8 rounded-xl shadow-lg dark:shadow-dark-xl text-center">
                         <div class="text-yellow-400 text-3xl mb-4">
                             <i class="fas fa-star"></i>
                             <i class="fas fa-star"></i>
@@ -312,11 +398,11 @@
                             <i class="fas fa-star"></i>
                             <i class="fas fa-star"></i>
                         </div>
-                        <p class="text-gray-600 dark:text-gray-300 text-xl font-medium">98% Satisfaction Rate</p>
                     </div>
                     <!-- Rating 2 -->
-                    <div class="bg-white dark:bg-dark-600 p-8 rounded-xl shadow-lg dark:shadow-dark-xl text-center">
                         <div class="text-yellow-400 text-3xl mb-4">
                             <i class="fas fa-star"></i>
                             <i class="fas fa-star"></i>
@@ -324,11 +410,11 @@
                             <i class="fas fa-star"></i>
                             <i class="fas fa-star"></i>
                         </div>
-                        <p class="text-gray-600 dark:text-gray-300 text-xl font-medium">95% Repeat Business</p>
                     </div>
                     <!-- Rating 3 -->
-                    <div class="bg-white dark:bg-dark-600 p-8 rounded-xl shadow-lg dark:shadow-dark-xl text-center">
                         <div class="text-yellow-400 text-3xl mb-4">
                             <i class="fas fa-star"></i>
                             <i class="fas fa-star"></i>
@@ -336,61 +422,61 @@
                             <i class="fas fa-star"></i>
                             <i class="fas fa-star"></i>
                         </div>
-                        <p class="text-gray-600 dark:text-gray-300 text-xl font-medium">100% On-Time Delivery</p>
                     </div>
                 </div>
             </div>
         </section>
         <!-- Value Proposition -->
-        <section id="why-us" class="py-20 bg-white dark:bg-dark-800 px-6 section fade-in">
             <div class="container mx-auto">
                 <div class="flex flex-col lg:flex-row items-center">
-                    <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12">
-                        <h2 class="text-3xl md:text-4xl font-bold text-gray-800 dark:text-gray-200 mb-6">Why Choose Nexus Digital?</h2>
-                        <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>
                         <div class="space-y-6">
                             <div class="flex items-start">
-                                <div class="bg-blue-100 dark:bg-blue-900 p-2 rounded-full mr-4">
-                                    <i class="fas fa-bolt text-blue-600 dark:text-blue-400"></i>
                                 </div>
                                 <div>
-                                    <h4 class="font-bold text-gray-800 dark:text-gray-200 mb-1">Rapid Implementation</h4>
-                                    <p class="text-gray-600 dark:text-gray-300">Get your digital assets up and running quickly without compromising quality.</p>
                                 </div>
                             </div>
                             <div class="flex items-start">
-                                <div class="bg-blue-100 dark:bg-blue-900 p-2 rounded-full mr-4">
-                                    <i class="fas fa-headset text-blue-600 dark:text-blue-400"></i>
                                 </div>
                                 <div>
-                                    <h4 class="font-bold text-gray-800 dark:text-gray-200 mb-1">Priority Support</h4>
-                                    <p class="text-gray-600 dark:text-gray-300">Dedicated support team available to address your needs promptly.</p>
                                 </div>
                             </div>
                             <div class="flex items-start">
-                                <div class="bg-blue-100 dark:bg-blue-900 p-2 rounded-full mr-4">
-                                    <i class="fas fa-chart-line text-blue-600 dark:text-blue-400"></i>
                                 </div>
                                 <div>
-                                    <h4 class="font-bold text-gray-800 dark:text-gray-200 mb-1">Strategic Guidance</h4>
-                                    <p class="text-gray-600 dark:text-gray-300">Quarterly strategy calls to align your digital presence with business objectives.</p>
                                 </div>
                             </div>
                         </div>
                         <div class="mt-10">
-                            <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">
                                 Learn More About Us
                                 <i class="fas fa-arrow-right ml-2"></i>
                             </button>
                         </div>
                     </div>
-                    <div class="lg:w-1/2 bg-white dark:bg-dark-700 rounded-xl shadow-lg dark:shadow-dark-xl overflow-hidden">
                         <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">
                     </div>
                 </div>
@@ -398,14 +484,14 @@
         </section>
         <!-- Newsletter CTA -->
-        <section class="py-20 bg-gray-900 dark:bg-dark-700 text-white px-6 section fade-in">
             <div class="container mx-auto text-center">
-                <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Transform Your Business?</h2>
-                <p class="text-xl mb-10 max-w-2xl mx-auto">Get started with a free consultation to discuss your digital needs</p>
-                <div class="max-w-md mx-auto flex flex-col sm:flex-row gap-4">
-                    <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500">
-                    <button onclick="changeTab('consultation')" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300">
                         Schedule a Call
                     </button>
                 </div>
@@ -415,70 +501,26 @@
     <!-- Offers Tab Content -->
     <div id="offers" class="tab-content">
-        <section class="py-20 px-6 dark:bg-dark-900">
             <div class="container mx-auto">
-                <h1 class="text-4xl font-bold text-center text-gray-800 dark:text-gray-200 mb-4">Our Service Packages</h1>
-                <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>
-                <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                     <!-- Basic Package -->
-                    <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">
-                        <div class="bg-gray-100 dark:bg-dark-600 p-6">
-                            <h3 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">Starter Package</h3>
-                            <p class="text-gray-600 dark:text-gray-300 mb-4">Perfect for new businesses establishing their online presence</p>
-                            <div class="flex items-baseline mb-4">
-                                <span class="text-4xl font-bold text-gray-800 dark:text-gray-200">1,099 AED</span>
-                                <span class="ml-2 text-gray-600 dark:text-gray-300">/month</span>
                             </div>
-                            <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">
-                                Get Started
-                            </button>
-                        </div>
-                        <div class="p-6">
-                            <ul class="space-y-3">
-                                <li class="flex items-center">
-                                    <i class="fas fa-check text-green-500 mr-3"></i>
-                                    <span class="text-gray-600 dark:text-gray-300">5-Page Website Development</span>
-                                </li>
-                                <li class="flex items-center">
-                                    <i class="fas fa-check text-green-500 mr-3"></i>
-                                    <span class="text-gray-600 dark:text-gray-300">Google Profile Optimization</span>
-                                </li>
-                                <li class="flex items-center">
-                                    <i class="fas fa-check text-green-500 mr-3"></i>
-                                    <span class="text-gray-600 dark:text-gray-300">Social Media Setup (2 Platforms)</span>
-                                </li>
-                                <li class="flex items-center">
-                                    <i class="fas fa-check text-green-500 mr-3"></i>
-                                    <span class="text-gray-600 dark:text-gray-300">5 Monthly Content Updates</span>
-                                </li>
-                                <li class="flex items-center text-gray-400">
-                                    <i class="fas fa-times text-gray-400 mr-3"></i>
-                                    <span class="text-gray-400">Free Domain (1 Year)</span>
-                                </li>
-                                <li class="flex items-center text-gray-400">
-                                    <i class="fas fa-times text-gray-400 mr-3"></i>
-                                    <span class="text-gray-400">Custom Logo Design</span>
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                    <!-- Popular Package -->
-                    <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">
-                        <div class="bg-blue-500 text-white p-6">
-                            <div class="flex justify-between items-start">
-                                <div>
-                                    <h3 class="text-2xl font-bold mb-2">Growth Package</h3>
-                                    <p class="mb-4">Our most popular package for growing businesses</p>
-                                </div>
-                                <span class="bg-white text-blue-500 text-xs font-bold px-3 py-1 rounded-full">POPULAR</span>
-                            </div>
-                            <div class="flex items-baseline mb-4">
-                                <span class="text-4xl font-bold">2,199 AED</span>
-                                <span class="ml-2 opacity-80">/month</span>
                             </div>
-                            <button onclick="changeTab('consultation')" class="w-full bg-white hover:bg-gray-100 text-blue-500 font-medium py-2 px-4 rounded-lg transition duration-300">
                                 Get Started
                             </button>
                         </div>
@@ -486,46 +528,51 @@
                             <ul class="space-y-3">
                                 <li class="flex items-center">
                                     <i class="fas fa-check text-green-500 mr-3"></i>
-                                    <span class="text-gray-600 dark:text-gray-300">10-Page Website Development</span>
                                 </li>
                                 <li class="flex items-center">
                                     <i class="fas fa-check text-green-500 mr-3"></i>
-                                    <span class="text-gray-600 dark:text-gray-300">Premium Google Profile Management</span>
                                 </li>
                                 <li class="flex items-center">
                                     <i class="fas fa-check text-green-500 mr-3"></i>
-                                    <span class="text-gray-600 dark:text-gray-300">Social Media Starter Kit (4 Platforms)</span>
                                 </li>
                                 <li class="flex items-center">
                                     <i class="fas fa-check text-green-500 mr-3"></i>
-                                    <span class="text-gray-600 dark:text-gray-300">Unlimited Monthly Edits</span>
                                 </li>
                                 <li class="flex items-center">
                                     <i class="fas fa-check text-green-500 mr-3"></i>
-                                    <span class="text-gray-600 dark:text-gray-300">Free Domain (1 Year)</span>
                                 </li>
                                 <li class="flex items-center">
                                     <i class="fas fa-check text-green-500 mr-3"></i>
-                                    <span class="text-gray-600 dark:text-gray-300">Custom Logo Design</span>
                                 </li>
                                 <li class="flex items-center">
                                     <i class="fas fa-check text-green-500 mr-3"></i>
-                                    <span class="text-gray-600 dark:text-gray-300">Priority Email Support</span>
                                 </li>
                             </ul>
                         </div>
                     </div>
                     <!-- Premium Package -->
-                    <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">
-                        <div class="bg-gray-100 dark:bg-dark-600 p-6">
-                            <h3 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">Enterprise Package</h3>
-                            <p class="text-gray-600 dark:text-gray-300 mb-4">For businesses needing comprehensive digital solutions</p>
-                            <div class="flex items-baseline mb-4">
-                                <span class="text-4xl font-bold text-gray-800 dark:text-gray-200">3,699 AED</span>
-                                <span class="ml-2 text-gray-600 dark:text-gray-300">/month</span>
                             </div>
-                            <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">
                                 Get Started
                             </button>
                         </div>
@@ -533,49 +580,53 @@
                             <ul class="space-y-3">
                                 <li class="flex items-center">
                                     <i class="fas fa-check text-green-500 mr-3"></i>
-                                    <span class="text-gray-600 dark:text-gray-300">Unlimited Page Website Development</span>
                                 </li>
                                 <li class="flex items-center">
                                     <i class="fas fa-check text-green-500 mr-3"></i>
-                                    <span class="text-gray-600 dark:text-gray-300">Enhanced Google Profile Management</span>
                                 </li>
                                 <li class="flex items-center">
                                     <i class="fas fa-check text-green-500 mr-3"></i>
-                                    <span class="text-gray-600 dark:text-gray-300">Complete Social Media Setup (All Platforms)</span>
                                 </li>
                                 <li class="flex items-center">
                                     <i class="fas fa-check text-green-500 mr-3"></i>
-                                    <span class="text-gray-600 dark:text-gray-300">Unlimited Rapid Monthly Edits</span>
                                 </li>
                                 <li class="flex items-center">
                                     <i class="fas fa-check text-green-500 mr-3"></i>
-                                    <span class="text-gray-600 dark:text-gray-300">Free Domain (2 Years)</span>
                                 </li>
                                 <li class="flex items-center">
                                     <i class="fas fa-check text-green-500 mr-3"></i>
-                                    <span class="text-gray-600 dark:text-gray-300">Premium Logo & Branding Package</span>
                                 </li>
                                 <li class="flex items-center">
                                     <i class="fas fa-check text-green-500 mr-3"></i>
-                                    <span class="text-gray-600 dark:text-gray-300">24/7 Priority Support</span>
                                 </li>
                                 <li class="flex items-center">
                                     <i class="fas fa-check text-green-500 mr-3"></i>
-                                    <span class="text-gray-600 dark:text-gray-300">Quarterly Strategy Calls</span>
                                 </li>
                                 <li class="flex items-center">
                                     <i class="fas fa-check text-green-500 mr-3"></i>
-                                    <span class="text-gray-600 dark:text-gray-300">Monthly Performance Reports</span>
                                 </li>
                             </ul>
                         </div>
                     </div>
                 </div>
-                <div class="mt-16 bg-gray-100 dark:bg-dark-700 rounded-xl p-8">
-                    <h3 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Not sure which package is right for you?</h3>
-                    <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>
-                    <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">
                         Schedule a Free Consultation
                     </button>
                 </div>
@@ -585,67 +636,67 @@
     <!-- Consultation Tab Content -->
     <div id="consultation" class="tab-content">
-        <section class="py-20 px-6 dark:bg-dark-900">
             <div class="container mx-auto max-w-4xl">
-                <div class="bg-white dark:bg-dark-700 rounded-xl shadow-lg dark:shadow-dark-xl overflow-hidden">
                     <div class="md:flex">
-                        <div class="md:w-1/2 bg-blue-600 text-white p-10">
                             <h2 class="text-3xl font-bold mb-6">Schedule Your Free Consultation</h2>
                             <p class="mb-8">Let's discuss how we can help grow your business with our digital solutions.</p>
                             <div class="space-y-6">
                                 <div class="flex items-start">
-                                    <div class="bg-blue-500 p-2 rounded-full mr-4">
                                         <i class="fas fa-calendar-check text-white"></i>
                                     </div>
                                     <div>
                                         <h4 class="font-bold mb-1">30-Minute Call</h4>
-                                        <p class="text-blue-100">Convenient online meeting at your preferred time</p>
                                     </div>
                                 </div>
                                 <div class="flex items-start">
-                                    <div class="bg-blue-500 p-2 rounded-full mr-4">
                                         <i class="fas fa-lightbulb text-white"></i>
                                     </div>
                                     <div>
                                         <h4 class="font-bold mb-1">Custom Strategy</h4>
-                                        <p class="text-blue-100">Personalized recommendations for your business</p>
                                     </div>
                                 </div>
                                 <div class="flex items-start">
-                                    <div class="bg-blue-500 p-2 rounded-full mr-4">
                                         <i class="fas fa-question text-white"></i>
                                     </div>
                                     <div>
                                         <h4 class="font-bold mb-1">No Obligation</h4>
-                                        <p class="text-blue-100">Just helpful advice with no pressure to buy</p>
                                     </div>
                                 </div>
                             </div>
                         </div>
                         <div class="md:w-1/2 p-10">
-                            <h3 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6">Book Your Slot</h3>
                             <form>
                                 <div class="mb-4">
-                                    <label class="block text-gray-700 dark:text-gray-300 mb-2" for="name">Full Name</label>
-                                    <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">
                                 </div>
                                 <div class="mb-4">
-                                    <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email Address</label>
-                                    <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">
                                 </div>
                                 <div class="mb-4">
-                                    <label class="block text-gray-700 dark:text-gray-300 mb-2" for="phone">Phone Number</label>
-                                    <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">
                                 </div>
                                 <div class="mb-6">
-                                    <label class="block text-gray-700 dark:text-gray-300 mb-2" for="date">Preferred Date & Time</label>
-                                    <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">
                                 </div>
-                                <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">
                                     Schedule Consultation
                                 </button>
                             </form>
@@ -658,61 +709,61 @@
     <!-- About Us Tab Content -->
     <div id="about" class="tab-content">
-        <section class="py-20 px-6 dark:bg-dark-900">
             <div class="container mx-auto">
                 <div class="flex flex-col lg:flex-row items-center mb-20">
-                    <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12">
-                        <h1 class="text-4xl font-bold text-gray-800 dark:text-gray-200 mb-6">Our Story</h1>
-                        <p class="text-gray-600 dark:text-gray-300 mb-6 text-lg">
                             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.
                         </p>
-                        <p class="text-gray-600 dark:text-gray-300 mb-6 text-lg">
                             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.
                         </p>
-                        <div class="bg-blue-100 dark:bg-blue-900 p-6 rounded-lg">
-                            <p class="text-blue-800 dark:text-blue-200 font-medium">
                                 "We believe in making digital excellence accessible to every business, regardless of size or technical expertise."
                             </p>
                         </div>
                     </div>
-                    <div class="lg:w-1/2 bg-white dark:bg-dark-700 rounded-xl shadow-lg dark:shadow-dark-xl overflow-hidden">
                         <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">
                     </div>
                 </div>
                 <div class="py-16">
-                    <h2 class="text-3xl font-bold text-center text-gray-800 dark:text-gray-200 mb-12">Our Core Values</h2>
                     <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-                        <div class="bg-white dark:bg-dark-700 p-8 rounded-xl shadow-lg dark:shadow-dark-xl">
-                            <div class="w-14 h-14 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mb-6">
-                                <i class="fas fa-lightbulb text-blue-600 dark:text-blue-400 text-xl"></i>
                             </div>
-                            <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-3">Innovation</h3>
-                            <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>
                         </div>
-                        <div class="bg-white dark:bg-dark-700 p-8 rounded-xl shadow-lg dark:shadow-dark-xl">
-                            <div class="w-14 h-14 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mb-6">
-                                <i class="fas fa-handshake text-blue-600 dark:text-blue-400 text-xl"></i>
                             </div>
-                            <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-3">Integrity</h3>
-                            <p class="text-gray-600 dark:text-gray-300">We build trust through transparency, honesty, and delivering on our promises.</p>
                         </div>
-                        <div class="bg-white dark:bg-dark-700 p-8 rounded-xl shadow-lg dark:shadow-dark-xl">
-                            <div class="w-14 h-14 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mb-6">
-                                <i class="fas fa-heart text-blue-600 dark:text-blue-400 text-xl"></i>
                             </div>
-                            <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-3">Client-Centric</h3>
-                            <p class="text-gray-600 dark:text-gray-300">Your success is our success. We tailor solutions to your unique needs and goals.</p>
                         </div>
                     </div>
                 </div>
-                <div class="mt-16 text-center">
-                    <h2 class="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-6">Ready to Transform Your Digital Presence?</h2>
-                    <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">
                         Explore Our Services
                         <i class="fas fa-arrow-right ml-2"></i>
                     </button>
@@ -722,82 +773,82 @@
     </div>
     <!-- Footer -->
-    <footer class="bg-gray-900 dark:bg-dark-700 text-white py-12 px-6">
         <div class="container mx-auto">
             <div class="grid grid-cols-1 md:grid-cols-4 gap-10">
                 <div>
                     <div class="flex items-center space-x-3 mb-6">
-                        <div class="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center">
                             <i class="fas fa-cube text-white text-xl"></i>
                         </div>
-                        <span class="text-xl font-bold">Nexus Digital</span>
                     </div>
-                    <p class="text-gray-400 mb-6">
                         Comprehensive digital solutions to elevate your online presence and drive business growth.
                     </p>
                     <div class="flex space-x-4">
-                        <a href="#" class="text-gray-400 hover:text-white transition">
                             <i class="fab fa-facebook-f"></i>
                         </a>
-                        <a href="#" class="text-gray-400 hover:text-white transition">
                             <i class="fab fa-twitter"></i>
                         </a>
-                        <a href="#" class="text-gray-400 hover:text-white transition">
                             <i class="fab fa-linkedin-in"></i>
                         </a>
-                        <a href="#" class="text-gray-400 hover:text-white transition">
                             <i class="fab fa-instagram"></i>
                         </a>
                     </div>
                 </div>
                 <div>
-                    <h3 class="text-lg font-bold mb-6">Services</h3>
                     <ul class="space-y-3">
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">Website Development</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">Google Profile Management</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">Social Media Solutions</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">Content Updates</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">Branding & Logo Design</a></li>
                     </ul>
                 </div>
                 <div>
-                    <h3 class="text-lg font-bold mb-6">Company</h3>
                     <ul class="space-y-3">
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">About Us</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">Our Team</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">Contact Us</a></li>
                     </ul>
                 </div>
                 <div>
-                    <h3 class="text-lg font-bold mb-6">Contact</h3>
                     <ul class="space-y-3">
                         <li class="flex items-start">
-                            <i class="fas fa-map-marker-alt text-gray-400 mt-1 mr-3"></i>
-                            <span class="text-gray-400">123 Digital Lane, Suite 100<br>San Francisco, CA 94103</span>
                         </li>
                         <li class="flex items-center">
-                            <i class="fas fa-phone-alt text-gray-400 mr-3"></i>
-                            <span class="text-gray-400">(555) 123-4567</span>
                         </li>
                         <li class="flex items-center">
-                            <i class="fas fa-envelope text-gray-400 mr-3"></i>
-                            <span class="text-gray-400">info@nexusdigital.com</span>
                         </li>
                     </ul>
                 </div>
             </div>
-            <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
-                <p class="text-gray-400 mb-4 md:mb-0">© 2023 Nexus Digital Solutions. All rights reserved.</p>
                 <div class="flex space-x-6">
-                    <a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a>
-                    <a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a>
-                    <a href="#" class="text-gray-400 hover:text-white transition">Cookie Policy</a>
                 </div>
             </div>
         </div>
@@ -814,25 +865,25 @@
             // Show selected tab content
             document.getElementById(tabId).classList.add('active');
-            // Update tab links
-            document.querySelectorAll('.nav-link').forEach(link => {
-                link.classList.remove('text-blue-400', 'border-b-2', 'border-blue-400', 'pb-1');
-            });
             // Scroll to top
             window.scrollTo(0, 0);
         }
-        // Mobile menu toggle
-        document.getElementById('mobile-menu-button').addEventListener('click', function() {
-            const menu = document.getElementById('mobile-menu');
-            if (menu.classList.contains('hidden')) {
-                menu.classList.remove('hidden');
-            } else {
-                menu.classList.add('hidden');
-            }
         });
         // Smooth scrolling for anchor links
         document.querySelectorAll('a[href^="#"]').forEach(anchor => {
             anchor.addEventListener('click', function(e) {
@@ -882,6 +933,7 @@
         // Update active nav link on scroll
         const sections = document.querySelectorAll('.section');
         window.addEventListener('scroll', () => {
             let current = '';
@@ -895,10 +947,10 @@
                 }
             });
-            document.querySelectorAll('.nav-link').forEach(link => {
-                link.classList.remove('text-blue-400', 'border-b-2', 'border-blue-400', 'pb-1');
                 if (link.getAttribute('href') === `#${current}`) {
-                    link.classList.add('text-blue-400', 'border-b-2', 'border-blue-400', 'pb-1');
                 }
             });
         });

                             700: '#06101C',
                             800: '#020C15',
                             900: '#00080F',
+                        },
+                        futuristic: {
+                            100: '#E5E7EB',
+                            200: '#D1D5DB',
+                            300: '#9CA3AF',
+                            400: '#6B7280',
+                            500: '#4B5563',
+                            600: '#374151',
+                            700: '#1F2937',
+                            800: '#111827',
+                            900: '#030712',
                         }
+                    },
+                    animation: {
+                        'slide-in': 'slideIn 0.5s ease-out forwards',
+                        'slide-up': 'slideUp 0.5s ease-out forwards',
+                        'glow': 'glow 2s ease-in-out infinite alternate',
+                        'float': 'float 6s ease-in-out infinite',
                     }
                 }
             }
     </script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
+        @keyframes slideIn {
+            from { transform: translateX(-100%); opacity: 0; }
+            to { transform: translateX(0); opacity: 1; }
         }
+        @keyframes slideUp {
+            from { transform: translateY(50px); opacity: 0; }
+            to { transform: translateY(0); opacity: 1; }
+        }
+        @keyframes glow {
+            from { box-shadow: 0 0 5px rgba(156, 163, 175, 0.5); }
+            to { box-shadow: 0 0 20px rgba(156, 163, 175, 0.8); }
+        }
+        @keyframes float {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-10px); }
+            100% { transform: translateY(0px); }
+        }
+        .hero-bg {
+            background-image: url('https://images.unsplash.com/photo-1639762681057-408e52192e55?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80');
+            background-size: cover;
+            background-position: center;
+            background-repeat: no-repeat;
+            height: 100vh;
+            position: relative;
         }
+        .hero-overlay {
             position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
+            background: linear-gradient(to bottom, rgba(3, 7, 18, 0.9), rgba(3, 7, 18, 0.7));
         }
+        .floating-nav {
+            backdrop-filter: blur(10px);
+            background-color: rgba(75, 85, 99, 0.2);
+            border: 1px solid rgba(156, 165, 175, 0.1);
+            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+            border-radius: 0;
+            padding: 0.5rem 2rem;
+            width: 80%;
+            max-width: 1000px;
+        }
+        .tech-card {
+            border: 1px solid rgba(156, 163, 175, 0.2);
+            background: linear-gradient(145deg, rgba(31, 41, 55, 0.7), rgba(17, 24, 39, 0.9));
+            backdrop-filter: blur(5px);
+            transition: all 0.3s ease;
+        }
+        .tech-card:hover {
+            transform: translateY(-5px);
+            border-color: rgba(156, 163, 175, 0.5);
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
         }
+        .tech-divider {
+            height: 1px;
+            background: linear-gradient(to right, transparent, rgba(156, 163, 175, 0.5), transparent);
         }
         .tab-content {
         .tab-content.active {
             display: block;
+            animation: slideUp 0.5s ease-out;
         }
         .scroll-down-arrow {
+            animation: float 2s ease-in-out infinite;
         }
         .section {
+            scroll-margin-top: 100px;
         }
         .fade-in {
             opacity: 1;
         }
+        .glow-text {
+            text-shadow: 0 0 8px rgba(229, 231, 235, 0.3);
+        }
+        .floating-menu-item {
             position: relative;
+            overflow: hidden;
         }
+        .floating-menu-item::after {
+            content: '';
             position: absolute;
+            bottom: 0;
             left: 0;
+            width: 0;
+            height: 1px;
+            background: linear-gradient(to right, transparent, #9CA3AF, transparent);
+            transition: width 0.3s ease;
+        }
+        .floating-menu-item:hover::after {
+            width: 100%;
+        }
+        .active-menu-item::after {
+            width: 100%;
+        }
+        .tech-button {
+            position: relative;
+            overflow: hidden;
+            z-index: 1;
+            border-radius: 0;
+        }
+        .tech-button::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
             width: 100%;
             height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(156, 163, 175, 0.2), transparent);
+            transition: all 0.5s ease;
+            z-index: -1;
         }
+        .tech-button:hover::before {
+            left: 100%;
         }
+        .tech-package {
+            background: linear-gradient(145deg, rgba(31, 41, 55, 0.7), rgba(17, 24, 39, 0.9));
+            border: 1px solid rgba(156, 163, 175, 0.2);
+            transition: all 0.3s ease;
+            border-radius: 0;
         }
+        .tech-package:hover {
+            transform: translateY(-5px);
+            border-color: rgba(156, 163, 175, 0.5);
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
         }
+        .tech-package-popular {
+            border: 1px solid rgba(156, 163, 175, 0.5);
+            box-shadow: 0 0 20px rgba(156, 163, 175, 0.3);
+        }
+        .tech-form-input {
+            background-color: rgba(31, 41, 55, 0.5);
+            border: 1px solid rgba(156, 163, 175, 0.2);
             color: #E5E7EB;
+            transition: all 0.3s ease;
+            border-radius: 0;
         }
+        .tech-form-input:focus {
+            outline: none;
+            border-color: rgba(156, 163, 175, 0.5);
+            box-shadow: 0 0 10px rgba(156, 163, 175, 0.3);
         }
+        .tech-footer {
+            background: linear-gradient(to bottom, rgba(17, 24, 39, 0.95), rgba(3, 7, 18, 0.95));
+            border-top: 1px solid rgba(156, 163, 175, 0.2);
         }
+        .premium-highlight {
+            position: absolute;
+            top: -10px;
+            right: -10px;
+            background-color: #f59e0b;
+            color: #111827;
+            font-weight: bold;
+            padding: 0.25rem 0.75rem;
+            font-size: 0.75rem;
+            border-radius: 0;
+            transform: rotate(15deg);
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
         }
     </style>
 </head>
+<body class="bg-futuristic-900 text-futuristic-100 font-sans">
     <!-- Dark Mode Toggle -->
     <div class="fixed bottom-6 right-6 z-50">
+        <button id="darkModeToggle" class="bg-futuristic-800 dark:bg-futuristic-600 text-white p-3 rounded-full shadow-lg hover:bg-futuristic-700 dark:hover:bg-futuristic-500 transition tech-button">
             <i class="fas fa-moon dark:hidden"></i>
             <i class="fas fa-sun hidden dark:block"></i>
         </button>
     </div>
+    <!-- Floating Island Navigation -->
+    <nav class="floating-nav mx-auto fixed top-6 left-1/2 transform -translate-x-1/2 z-50 transition-all duration-300">
+        <div class="flex items-center justify-center space-x-12">
+            <a href="#home-section" class="floating-menu-item active-menu-item text-sm font-medium text-futuristic-200 hover:text-white transition">Home</a>
+            <a href="#services" class="floating-menu-item text-sm font-medium text-futuristic-300 hover:text-white transition">Services</a>
+            <a href="#why-us" class="floating-menu-item text-sm font-medium text-futuristic-300 hover:text-white transition">Why Us</a>
+            <button onclick="changeTab('offers')" class="floating-menu-item text-sm font-medium text-futuristic-300 hover:text-white transition">Offers</button>
+            <button onclick="changeTab('about')" class="floating-menu-item text-sm font-medium text-futuristic-300 hover:text-white transition">About</button>
         </div>
     </nav>
+    <!-- Mobile Menu Button (hidden on desktop) -->
+    <div class="md:hidden fixed top-6 right-6 z-50">
+        <button id="mobileMenuButton" class="bg-futuristic-800 text-white p-3 rounded-full shadow-lg tech-button">
+            <i class="fas fa-bars"></i>
+        </button>
+    </div>
+    <!-- Mobile Menu (hidden by default) -->
+    <div id="mobileMenu" class="fixed inset-0 bg-futuristic-900 bg-opacity-95 z-40 flex items-center justify-center hidden">
+        <div class="text-center">
+            <button id="closeMobileMenu" class="absolute top-6 right-6 text-white text-2xl">
+                <i class="fas fa-times"></i>
+            </button>
+            <div class="space-y-8">
+                <a href="#home-section" class="block text-2xl font-medium text-futuristic-200 hover:text-white transition" onclick="closeMobileMenu()">Home</a>
+                <a href="#services" class="block text-2xl font-medium text-futuristic-300 hover:text-white transition" onclick="closeMobileMenu()">Services</a>
+                <a href="#why-us" class="block text-2xl font-medium text-futuristic-300 hover:text-white transition" onclick="closeMobileMenu()">Why Us</a>
+                <button onclick="changeTab('offers'); closeMobileMenu();" class="block text-2xl font-medium text-futuristic-300 hover:text-white transition w-full">Offers</button>
+                <button onclick="changeTab('about'); closeMobileMenu();" class="block text-2xl font-medium text-futuristic-300 hover:text-white transition w-full">About</button>
+            </div>
+        </div>
+    </div>
     <!-- Home Tab Content -->
     <div id="home" class="tab-content active">
+        <!-- Hero Section -->
         <section id="home-section" class="hero-bg section">
             <div class="hero-overlay"></div>
             <div class="hero-content flex items-center justify-center text-center h-full">
+                <div class="px-6 animate-slide-in">
+                    <h1 class="text-4xl md:text-6xl font-bold mb-6 text-white glow-text">Digital Excellence, <span class="text-futuristic-300">Simplified</span></h1>
+                    <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto text-futuristic-300">Comprehensive digital solutions tailored to elevate your online presence and drive business growth.</p>
                     <div class="flex flex-col sm:flex-row justify-center gap-4">
+                        <a href="#services" class="bg-futuristic-600 hover:bg-futuristic-500 text-white font-bold py-3 px-8 transition duration-300 tech-button">
                             Explore Our Services
                         </a>
+                        <button onclick="changeTab('offers')" class="bg-transparent hover:bg-futuristic-100 hover:text-futuristic-900 text-white font-bold py-3 px-8 border-2 border-futuristic-300 transition duration-300 tech-button">
                             View Packages
                         </button>
                     </div>
                 </div>
             </div>
             <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 scroll-down-arrow">
+                <a href="#services" class="text-futuristic-300 hover:text-white transition">
+                    <i class="fas fa-chevron-down text-2xl"></i>
                 </a>
             </div>
         </section>
         <!-- Services Overview -->
+        <section id="services" class="py-20 px-6 section fade-in">
             <div class="container mx-auto">
+                <h2 class="text-3xl md:text-4xl font-bold text-center text-futuristic-100 mb-4 animate-slide-up">Our Comprehensive Solutions</h2>
+                <p class="text-xl text-center text-futuristic-300 mb-16 max-w-3xl mx-auto animate-slide-up">Everything you need to establish and grow your digital presence</p>
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                     <!-- Service 1 -->
+                    <div class="tech-card p-8 animate-slide-up" style="animation-delay: 0.1s">
+                        <div class="w-16 h-16 bg-futuristic-800 flex items-center justify-center mb-6">
+                            <i class="fas fa-globe text-futuristic-300 text-2xl"></i>
                         </div>
+                        <h3 class="text-xl font-bold text-futuristic-100 mb-3">Multi Page Website Development</h3>
+                        <p class="text-futuristic-300">Professional, responsive websites designed to showcase your brand and convert visitors into customers.</p>
                     </div>
                     <!-- Service 2 -->
+                    <div class="tech-card p-8 animate-slide-up" style="animation-delay: 0.2s">
+                        <div class="w-16 h-16 bg-futuristic-800 flex items-center justify-center mb-6">
+                            <i class="fas fa-search text-futuristic-300 text-2xl"></i>
                         </div>
+                        <h3 class="text-xl font-bold text-futuristic-100 mb-3">Enhanced Google Profile Management</h3>
+                        <p class="text-futuristic-300">Optimize your Google My Business listing to improve local search visibility and attract more customers.</p>
                     </div>
                     <!-- Service 3 -->
+                    <div class="tech-card p-8 animate-slide-up" style="animation-delay: 0.3s">
+                        <div class="w-16 h-16 bg-futuristic-800 flex items-center justify-center mb-6">
+                            <i class="fas fa-share-alt text-futuristic-300 text-2xl"></i>
                         </div>
+                        <h3 class="text-xl font-bold text-futuristic-100 mb-3">Social Media Starter Kit</h3>
+                        <p class="text-futuristic-300">Launch your social media presence with professionally designed profiles and a content strategy.</p>
                     </div>
                     <!-- Service 4 -->
+                    <div class="tech-card p-8 animate-slide-up" style="animation-delay: 0.4s">
+                        <div class="w-16 h-16 bg-futuristic-800 flex items-center justify-center mb-6">
+                            <i class="fas fa-sync-alt text-futuristic-300 text-2xl"></i>
                         </div>
+                        <h3 class="text-xl font-bold text-futuristic-100 mb-3">Unlimited Rapid Monthly Edits</h3>
+                        <p class="text-futuristic-300">Keep your content fresh with unlimited updates to your website and digital assets every month.</p>
                     </div>
                     <!-- Service 5 -->
+                    <div class="tech-card p-8 animate-slide-up" style="animation-delay: 0.5s">
+                        <div class="w-16 h-16 bg-futuristic-800 flex items-center justify-center mb-6">
+                            <i class="fas fa-link text-futuristic-300 text-2xl"></i>
                         </div>
+                        <h3 class="text-xl font-bold text-futuristic-100 mb-3">Free Domain Registration</h3>
+                        <p class="text-futuristic-300">Get a professional domain name included with your website package to establish your online identity.</p>
                     </div>
                     <!-- Service 6 -->
+                    <div class="tech-card p-8 animate-slide-up" style="animation-delay: 0.6s">
+                        <div class="w-16 h-16 bg-futuristic-800 flex items-center justify-center mb-6">
+                            <i class="fas fa-palette text-futuristic-300 text-2xl"></i>
                         </div>
+                        <h3 class="text-xl font-bold text-futuristic-100 mb-3">Custom Logo Design</h3>
+                        <p class="text-futuristic-300">Professional logo creation that captures your brand essence and makes a lasting impression.</p>
                     </div>
                 </div>
+                <div class="text-center mt-16 animate-slide-up" style="animation-delay: 0.7s">
+                    <button onclick="changeTab('offers')" class="bg-futuristic-600 hover:bg-futuristic-500 text-white font-bold py-3 px-8 transition duration-300 tech-button inline-flex items-center">
                         See Our Packages
                         <i class="fas fa-arrow-right ml-2"></i>
                     </button>
         </section>
         <!-- Ratings Section -->
+        <section class="py-16 px-6 section fade-in bg-futuristic-800">
             <div class="container mx-auto">
+                <h2 class="text-3xl md:text-4xl font-bold text-center text-futuristic-100 mb-12 animate-slide-up">Client Satisfaction</h2>
                 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                     <!-- Rating 1 -->
+                    <div class="tech-card p-8 text-center animate-slide-up" style="animation-delay: 0.1s">
                         <div class="text-yellow-400 text-3xl mb-4">
                             <i class="fas fa-star"></i>
                             <i class="fas fa-star"></i>
                             <i class="fas fa-star"></i>
                             <i class="fas fa-star"></i>
                         </div>
+                        <p class="text-futuristic-300 text-xl font-medium">98% Satisfaction Rate</p>
                     </div>
                     <!-- Rating 2 -->
+                    <div class="tech-card p-8 text-center animate-slide-up" style="animation-delay: 0.2s">
                         <div class="text-yellow-400 text-3xl mb-4">
                             <i class="fas fa-star"></i>
                             <i class="fas fa-star"></i>
                             <i class="fas fa-star"></i>
                             <i class="fas fa-star"></i>
                         </div>
+                        <p class="text-futuristic-300 text-xl font-medium">95% Repeat Business</p>
                     </div>
                     <!-- Rating 3 -->
+                    <div class="tech-card p-8 text-center animate-slide-up" style="animation-delay: 0.3s">
                         <div class="text-yellow-400 text-3xl mb-4">
                             <i class="fas fa-star"></i>
                             <i class="fas fa-star"></i>
                             <i class="fas fa-star"></i>
                             <i class="fas fa-star"></i>
                         </div>
+                        <p class="text-futuristic-300 text-xl font-medium">100% On-Time Delivery</p>
                     </div>
                 </div>
             </div>
         </section>
         <!-- Value Proposition -->
+        <section id="why-us" class="py-20 px-6 section fade-in bg-futuristic-900">
             <div class="container mx-auto">
                 <div class="flex flex-col lg:flex-row items-center">
+                    <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12 animate-slide-up">
+                        <h2 class="text-3xl md:text-4xl font-bold text-futuristic-100 mb-6">Why Choose Nexus Digital?</h2>
+                        <p class="text-futuristic-300 mb-8 text-lg">We combine technical expertise with strategic thinking to deliver digital solutions that drive real business results.</p>
                         <div class="space-y-6">
                             <div class="flex items-start">
+                                <div class="bg-futuristic-800 p-2 mr-4">
+                                    <i class="fas fa-bolt text-futuristic-300"></i>
                                 </div>
                                 <div>
+                                    <h4 class="font-bold text-futuristic-100 mb-1">Rapid Implementation</h4>
+                                    <p class="text-futuristic-300">Get your digital assets up and running quickly without compromising quality.</p>
                                 </div>
                             </div>
                             <div class="flex items-start">
+                                <div class="bg-futuristic-800 p-2 mr-4">
+                                    <i class="fas fa-headset text-futuristic-300"></i>
                                 </div>
                                 <div>
+                                    <h4 class="font-bold text-futuristic-100 mb-1">Priority Support</h4>
+                                    <p class="text-futuristic-300">Dedicated support team available to address your needs promptly.</p>
                                 </div>
                             </div>
                             <div class="flex items-start">
+                                <div class="bg-futuristic-800 p-2 mr-4">
+                                    <i class="fas fa-chart-line text-futuristic-300"></i>
                                 </div>
                                 <div>
+                                    <h4 class="font-bold text-futuristic-100 mb-1">Strategic Guidance</h4>
+                                    <p class="text-futuristic-300">Quarterly strategy calls to align your digital presence with business objectives.</p>
                                 </div>
                             </div>
                         </div>
                         <div class="mt-10">
+                            <button onclick="changeTab('about')" class="bg-futuristic-800 hover:bg-futuristic-700 text-white font-medium py-3 px-6 transition duration-300 tech-button inline-flex items-center">
                                 Learn More About Us
                                 <i class="fas fa-arrow-right ml-2"></i>
                             </button>
                         </div>
                     </div>
+                    <div class="lg:w-1/2 tech-card overflow-hidden animate-slide-up" style="animation-delay: 0.2s">
                         <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">
                     </div>
                 </div>
         </section>
         <!-- Newsletter CTA -->
+        <section class="py-20 px-6 section fade-in bg-futuristic-800">
             <div class="container mx-auto text-center">
+                <h2 class="text-3xl md:text-4xl font-bold mb-6 text-futuristic-100 animate-slide-up">Ready to Transform Your Business?</h2>
+                <p class="text-xl mb-10 max-w-2xl mx-auto text-futuristic-300 animate-slide-up">Get started with a free consultation to discuss your digital needs</p>
+                <div class="max-w-md mx-auto flex flex-col sm:flex-row gap-4 animate-slide-up">
+                    <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 tech-form-input focus:outline-none">
+                    <button onclick="changeTab('consultation')" class="bg-futuristic-600 hover:bg-futuristic-500 text-white font-bold py-3 px-6 transition duration-300 tech-button">
                         Schedule a Call
                     </button>
                 </div>
     <!-- Offers Tab Content -->
     <div id="offers" class="tab-content">
+        <section class="py-20 px-6">
             <div class="container mx-auto">
+                <h1 class="text-4xl font-bold text-center text-futuristic-100 mb-4 animate-slide-up">Our Service Packages</h1>
+                <p class="text-xl text-center text-futuristic-300 mb-16 max-w-3xl mx-auto animate-slide-up">Comprehensive digital solutions tailored to your business needs and budget.</p>
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 max-w-4xl mx-auto">
                     <!-- Basic Package -->
+                    <div class="tech-package overflow-hidden border border-futuristic-700 animate-slide-up" style="animation-delay: 0.1s">
+                        <div class="bg-futuristic-800 p-6">
+                            <h3 class="text-2xl font-bold text-futuristic-100 mb-2">Essential Digital Package</h3>
+                            <p class="text-futuristic-300 mb-4">Perfect for new businesses establishing their online presence</p>
+                            <div class="mb-4">
+                                <div class="text-sm text-futuristic-400 mb-1">One-time setup fee</div>
+                                <div class="text-3xl font-bold text-futuristic-100">659 AED</div>
                             </div>
+                            <div class="mb-4">
+                                <div class="text-sm text-futuristic-400 mb-1">Monthly maintenance</div>
+                                <div class="text-3xl font-bold text-futuristic-100">349 AED</div>
                             </div>
+                            <button onclick="changeTab('consultation')" class="w-full bg-futuristic-700 hover:bg-futuristic-600 text-white font-medium py-2 px-4 transition duration-300 tech-button">
                                 Get Started
                             </button>
                         </div>
                             <ul class="space-y-3">
                                 <li class="flex items-center">
                                     <i class="fas fa-check text-green-500 mr-3"></i>
+                                    <span class="text-futuristic-300">Google Business Profile Setup & Optimization</span>
                                 </li>
                                 <li class="flex items-center">
                                     <i class="fas fa-check text-green-500 mr-3"></i>
+                                    <span class="text-futuristic-300">Mobile-Friendly Single Page Website</span>
                                 </li>
                                 <li class="flex items-center">
                                     <i class="fas fa-check text-green-500 mr-3"></i>
+                                    <span class="text-futuristic-300">Custom Domain & Secure Hosting</span>
                                 </li>
                                 <li class="flex items-center">
                                     <i class="fas fa-check text-green-500 mr-3"></i>
+                                    <span class="text-futuristic-300">Weekly Content Updates (additional charges may apply)</span>
                                 </li>
                                 <li class="flex items-center">
                                     <i class="fas fa-check text-green-500 mr-3"></i>
+                                    <span class="text-futuristic-300">Google Review Management System</span>
                                 </li>
                                 <li class="flex items-center">
                                     <i class="fas fa-check text-green-500 mr-3"></i>
+                                    <span class="text-futuristic-300">Monthly Traffic Analytics Report</span>
                                 </li>
                                 <li class="flex items-center">
                                     <i class="fas fa-check text-green-500 mr-3"></i>
+                                    <span class="text-futuristic-300">Domain Privacy & Protection</span>
                                 </li>
                             </ul>
                         </div>
                     </div>
                     <!-- Premium Package -->
+                    <div class="tech-package tech-package-popular overflow-hidden border-2 border-futuristic-400 transform scale-105 z-10 animate-slide-up relative" style="animation-delay: 0.2s">
+                        <div class="premium-highlight">MOST POPULAR</div>
+                        <div class="bg-futuristic-600 text-white p-6">
+                            <h3 class="text-2xl font-bold mb-2">Premium Digital Suite</h3>
+                            <p class="mb-4">Everything you need for complete digital domination</p>
+                            <div class="mb-4">
+                                <div class="text-sm text-futuristic-200 mb-1">One-time setup fee</div>
+                                <div class="text-3xl font-bold">699 AED</div>
                             </div>
+                            <div class="mb-4">
+                                <div class="text-sm text-futuristic-200 mb-1">Monthly maintenance</div>
+                                <div class="text-3xl font-bold">449 AED</div>
+                            </div>
+                            <button onclick="changeTab('consultation')" class="w-full bg-futuristic-100 hover:bg-white text-futuristic-800 font-medium py-2 px-4 transition duration-300 tech-button">
                                 Get Started
                             </button>
                         </div>
                             <ul class="space-y-3">
                                 <li class="flex items-center">
                                     <i class="fas fa-check text-green-500 mr-3"></i>
+                                    <span class="text-futuristic-300 font-medium">Everything in Essential Package PLUS:</span>
                                 </li>
                                 <li class="flex items-center">
                                     <i class="fas fa-check text-green-500 mr-3"></i>
+                                    <span class="text-futuristic-300">Multi-Page Professional Website (5+ pages)</span>
                                 </li>
                                 <li class="flex items-center">
                                     <i class="fas fa-check text-green-500 mr-3"></i>
+                                    <span class="text-futuristic-300">Enhanced Google Profile Management</span>
                                 </li>
                                 <li class="flex items-center">
                                     <i class="fas fa-check text-green-500 mr-3"></i>
+                                    <span class="text-futuristic-300">Complete Social Media Starter Kit (3 platforms)</span>
                                 </li>
                                 <li class="flex items-center">
                                     <i class="fas fa-check text-green-500 mr-3"></i>
+                                    <span class="text-futuristic-300">Unlimited Rapid Monthly Content Updates</span>
                                 </li>
                                 <li class="flex items-center">
                                     <i class="fas fa-check text-green-500 mr-3"></i>
+                                    <span class="text-futuristic-300">Free Domain Registration (1 year)</span>
                                 </li>
                                 <li class="flex items-center">
                                     <i class="fas fa-check text-green-500 mr-3"></i>
+                                    <span class="text-futuristic-300">Custom Logo Design</span>
                                 </li>
                                 <li class="flex items-center">
                                     <i class="fas fa-check text-green-500 mr-3"></i>
+                                    <span class="text-futuristic-300">24/7 Priority Support</span>
                                 </li>
                                 <li class="flex items-center">
                                     <i class="fas fa-check text-green-500 mr-3"></i>
+                                    <span class="text-futuristic-300">Quarterly Strategy Sessions</span>
+                                </li>
+                                <li class="flex items-center">
+                                    <i class="fas fa-check text-green-500 mr-3"></i>
+                                    <span class="text-futuristic-300">Monthly Newsletter Creation & Distribution</span>
                                 </li>
                             </ul>
                         </div>
                     </div>
                 </div>
+                <div class="mt-16 tech-card p-8 animate-slide-up" style="animation-delay: 0.4s">
+                    <h3 class="text-2xl font-bold text-futuristic-100 mb-4">Not sure which package is right for you?</h3>
+                    <p class="text-futuristic-300 mb-6">Our digital consultants can help you determine the perfect solution for your business needs and budget.</p>
+                    <button onclick="changeTab('consultation')" class="bg-futuristic-600 hover:bg-futuristic-500 text-white font-medium py-3 px-6 transition duration-300 tech-button">
                         Schedule a Free Consultation
                     </button>
                 </div>
     <!-- Consultation Tab Content -->
     <div id="consultation" class="tab-content">
+        <section class="py-20 px-6">
             <div class="container mx-auto max-w-4xl">
+                <div class="tech-card overflow-hidden animate-slide-up">
                     <div class="md:flex">
+                        <div class="md:w-1/2 bg-futuristic-600 text-white p-10">
                             <h2 class="text-3xl font-bold mb-6">Schedule Your Free Consultation</h2>
                             <p class="mb-8">Let's discuss how we can help grow your business with our digital solutions.</p>
                             <div class="space-y-6">
                                 <div class="flex items-start">
+                                    <div class="bg-futuristic-500 p-2 mr-4">
                                         <i class="fas fa-calendar-check text-white"></i>
                                     </div>
                                     <div>
                                         <h4 class="font-bold mb-1">30-Minute Call</h4>
+                                        <p class="text-futuristic-200">Convenient online meeting at your preferred time</p>
                                     </div>
                                 </div>
                                 <div class="flex items-start">
+                                    <div class="bg-futuristic-500 p-2 mr-4">
                                         <i class="fas fa-lightbulb text-white"></i>
                                     </div>
                                     <div>
                                         <h4 class="font-bold mb-1">Custom Strategy</h4>
+                                        <p class="text-futuristic-200">Personalized recommendations for your business</p>
                                     </div>
                                 </div>
                                 <div class="flex items-start">
+                                    <div class="bg-futuristic-500 p-2 mr-4">
                                         <i class="fas fa-question text-white"></i>
                                     </div>
                                     <div>
                                         <h4 class="font-bold mb-1">No Obligation</h4>
+                                        <p class="text-futuristic-200">Just helpful advice with no pressure to buy</p>
                                     </div>
                                 </div>
                             </div>
                         </div>
                         <div class="md:w-1/2 p-10">
+                            <h3 class="text-2xl font-bold text-futuristic-100 mb-6">Book Your Slot</h3>
                             <form>
                                 <div class="mb-4">
+                                    <label class="block text-futuristic-300 mb-2" for="name">Full Name</label>
+                                    <input type="text" id="name" class="w-full px-4 py-2 tech-form-input focus:outline-none">
                                 </div>
                                 <div class="mb-4">
+                                    <label class="block text-futuristic-300 mb-2" for="email">Email Address</label>
+                                    <input type="email" id="email" class="w-full px-4 py-2 tech-form-input focus:outline-none">
                                 </div>
                                 <div class="mb-4">
+                                    <label class="block text-futuristic-300 mb-2" for="phone">Phone Number</label>
+                                    <input type="tel" id="phone" class="w-full px-4 py-2 tech-form-input focus:outline-none">
                                 </div>
                                 <div class="mb-6">
+                                    <label class="block text-futuristic-300 mb-2" for="date">Preferred Date & Time</label>
+                                    <input type="datetime-local" id="date" class="w-full px-4 py-2 tech-form-input focus:outline-none">
                                 </div>
+                                <button type="submit" class="w-full bg-futuristic-600 hover:bg-futuristic-500 text-white font-bold py-3 px-4 transition duration-300 tech-button">
                                     Schedule Consultation
                                 </button>
                             </form>
     <!-- About Us Tab Content -->
     <div id="about" class="tab-content">
+        <section class="py-20 px-6">
             <div class="container mx-auto">
                 <div class="flex flex-col lg:flex-row items-center mb-20">
+                    <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12 animate-slide-up">
+                        <h1 class="text-4xl font-bold text-futuristic-100 mb-6">Our Story</h1>
+                        <p class="text-futuristic-300 mb-6 text-lg">
                             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.
                         </p>
+                        <p class="text-futuristic-300 mb-6 text-lg">
                             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.
                         </p>
+                        <div class="bg-futuristic-800 p-6">
+                            <p class="text-futuristic-300 font-medium">
                                 "We believe in making digital excellence accessible to every business, regardless of size or technical expertise."
                             </p>
                         </div>
                     </div>
+                    <div class="lg:w-1/2 tech-card overflow-hidden animate-slide-up" style="animation-delay: 0.2s">
                         <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">
                     </div>
                 </div>
                 <div class="py-16">
+                    <h2 class="text-3xl font-bold text-center text-futuristic-100 mb-12 animate-slide-up">Our Core Values</h2>
                     <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                        <div class="tech-card p-8 animate-slide-up" style="animation-delay: 0.1s">
+                            <div class="w-14 h-14 bg-futuristic-800 flex items-center justify-center mb-6">
+                                <i class="fas fa-lightbulb text-futuristic-300 text-xl"></i>
                             </div>
+                            <h3 class="text-xl font-bold text-futuristic-100 mb-3">Innovation</h3>
+                            <p class="text-futuristic-300">We constantly explore new technologies and strategies to keep our clients ahead of the curve.</p>
                         </div>
+                        <div class="tech-card p-8 animate-slide-up" style="animation-delay: 0.2s">
+                            <div class="w-14 h-14 bg-futuristic-800 flex items-center justify-center mb-6">
+                                <i class="fas fa-handshake text-futuristic-300 text-xl"></i>
                             </div>
+                            <h3 class="text-xl font-bold text-futuristic-100 mb-3">Integrity</h3>
+                            <p class="text-futuristic-300">We build trust through transparency, honesty, and delivering on our promises.</p>
                         </div>
+                        <div class="tech-card p-8 animate-slide-up" style="animation-delay: 0.3s">
+                            <div class="w-14 h-14 bg-futuristic-800 flex items-center justify-center mb-6">
+                                <i class="fas fa-heart text-futuristic-300 text-xl"></i>
                             </div>
+                            <h3 class="text-xl font-bold text-futuristic-100 mb-3">Client-Centric</h3>
+                            <p class="text-futuristic-300">Your success is our success. We tailor solutions to your unique needs and goals.</p>
                         </div>
                     </div>
                 </div>
+                <div class="mt-16 text-center animate-slide-up" style="animation-delay: 0.4s">
+                    <h2 class="text-3xl font-bold text-futuristic-100 mb-6">Ready to Transform Your Digital Presence?</h2>
+                    <button onclick="changeTab('offers')" class="bg-futuristic-600 hover:bg-futuristic-500 text-white font-medium py-3 px-8 transition duration-300 tech-button inline-flex items-center">
                         Explore Our Services
                         <i class="fas fa-arrow-right ml-2"></i>
                     </button>
     </div>
     <!-- Footer -->
+    <footer class="tech-footer py-12 px-6">
         <div class="container mx-auto">
             <div class="grid grid-cols-1 md:grid-cols-4 gap-10">
                 <div>
                     <div class="flex items-center space-x-3 mb-6">
+                        <div class="w-10 h-10 bg-futuristic-600 flex items-center justify-center">
                             <i class="fas fa-cube text-white text-xl"></i>
                         </div>
+                        <span class="text-xl font-bold text-futuristic-100">Nexus Digital</span>
                     </div>
+                    <p class="text-futuristic-400 mb-6">
                         Comprehensive digital solutions to elevate your online presence and drive business growth.
                     </p>
                     <div class="flex space-x-4">
+                        <a href="#" class="text-futuristic-400 hover:text-futuristic-200 transition">
                             <i class="fab fa-facebook-f"></i>
                         </a>
+                        <a href="#" class="text-futuristic-400 hover:text-futuristic-200 transition">
                             <i class="fab fa-twitter"></i>
                         </a>
+                        <a href="#" class="text-futuristic-400 hover:text-futuristic-200 transition">
                             <i class="fab fa-linkedin-in"></i>
                         </a>
+                        <a href="#" class="text-futuristic-400 hover:text-futuristic-200 transition">
                             <i class="fab fa-instagram"></i>
                         </a>
                     </div>
                 </div>
                 <div>
+                    <h3 class="text-lg font-bold text-futuristic-100 mb-6">Services</h3>
                     <ul class="space-y-3">
+                        <li><a href="#" class="text-futuristic-400 hover:text-futuristic-200 transition">Website Development</a></li>
+                        <li><a href="#" class="text-futuristic-400 hover:text-futuristic-200 transition">Google Profile Management</a></li>
+                        <li><a href="#" class="text-futuristic-400 hover:text-futuristic-200 transition">Social Media Solutions</a></li>
+                        <li><a href="#" class="text-futuristic-400 hover:text-futuristic-200 transition">Content Updates</a></li>
+                        <li><a href="#" class="text-futuristic-400 hover:text-futuristic-200 transition">Branding & Logo Design</a></li>
                     </ul>
                 </div>
                 <div>
+                    <h3 class="text-lg font-bold text-futuristic-100 mb-6">Company</h3>
                     <ul class="space-y-3">
+                        <li><a href="#" class="text-futuristic-400 hover:text-futuristic-200 transition">About Us</a></li>
+                        <li><a href="#" class="text-futuristic-400 hover:text-futuristic-200 transition">Our Team</a></li>
+                        <li><a href="#" class="text-futuristic-400 hover:text-futuristic-200 transition">Careers</a></li>
+                        <li><a href="#" class="text-futuristic-400 hover:text-futuristic-200 transition">Blog</a></li>
+                        <li><a href="#" class="text-futuristic-400 hover:text-futuristic-200 transition">Contact Us</a></li>
                     </ul>
                 </div>
                 <div>
+                    <h3 class="text-lg font-bold text-futuristic-100 mb-6">Contact</h3>
                     <ul class="space-y-3">
                         <li class="flex items-start">
+                            <i class="fas fa-map-marker-alt text-futuristic-400 mt-1 mr-3"></i>
+                            <span class="text-futuristic-400">123 Digital Lane, Suite 100<br>San Francisco, CA 94103</span>
                         </li>
                         <li class="flex items-center">
+                            <i class="fas fa-phone-alt text-futuristic-400 mr-3"></i>
+                            <span class="text-futuristic-400">(555) 123-4567</span>
                         </li>
                         <li class="flex items-center">
+                            <i class="fas fa-envelope text-futuristic-400 mr-3"></i>
+                            <span class="text-futuristic-400">info@nexusdigital.com</span>
                         </li>
                     </ul>
                 </div>
             </div>
+            <div class="border-t border-futuristic-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
+                <p class="text-futuristic-400 mb-4 md:mb-0">© 2023 Nexus Digital Solutions. All rights reserved.</p>
                 <div class="flex space-x-6">
+                    <a href="#" class="text-futuristic-400 hover:text-futuristic-200 transition">Privacy Policy</a>
+                    <a href="#" class="text-futuristic-400 hover:text-futuristic-200 transition">Terms of Service</a>
+                    <a href="#" class="text-futuristic-400 hover:text-futuristic-200 transition">Cookie Policy</a>
                 </div>
             </div>
         </div>
             // Show selected tab content
             document.getElementById(tabId).classList.add('active');
             // Scroll to top
             window.scrollTo(0, 0);
         }
+        // Mobile menu functionality
+        document.getElementById('mobileMenuButton').addEventListener('click', function() {
+            document.getElementById('mobileMenu').classList.remove('hidden');
+            document.body.style.overflow = 'hidden';
+        });
+        document.getElementById('closeMobileMenu').addEventListener('click', function() {
+            closeMobileMenu();
         });
+        function closeMobileMenu() {
+            document.getElementById('mobileMenu').classList.add('hidden');
+            document.body.style.overflow = '';
+        }
         // Smooth scrolling for anchor links
         document.querySelectorAll('a[href^="#"]').forEach(anchor => {
             anchor.addEventListener('click', function(e) {
         // Update active nav link on scroll
         const sections = document.querySelectorAll('.section');
+        const navLinks = document.querySelectorAll('.floating-menu-item');
         window.addEventListener('scroll', () => {
             let current = '';
                 }
             });
+            navLinks.forEach(link => {
+                link.classList.remove('active-menu-item');
                 if (link.getAttribute('href') === `#${current}`) {
+                    link.classList.add('active-menu-item');
                 }
             });
         });

prompts.txt CHANGED Viewed

@@ -1,4 +1,6 @@
 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
 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.
 fix the home, services and why us buttons so it takes takes you to the correct spot
-turn everything into dark mode

 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
 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.
 fix the home, services and why us buttons so it takes takes you to the correct spot
+turn everything into dark mode
+change the design of the website keeping all the same details and everything put just changing the animations of the slides and making the design more dull and grey but look more advanced and futuristic. also make the heading menu bar a floating island type of menu.
+the menu bar should be longer and not thicker with frosted glass effect with a very slight grey tint. Remove the enterprise package and just keep 2 packages, one for basic which should have 659 as the setup cost and 349 as the monthy cost for maintenance and all the stuff has Google Business profile and Optimisation  Mobile Friendly Website  Custom Domain and Hosting Weekly Edits Separately paid Domain. Review Booster for Google  Monthly Traffic analytics report Privacy and protection of the domain but reword these as you see suitable also the premium package should be 699 aed as setup cost and 449 per month as maintenance have all the basic stuff with  Multi Page website Enhanced google profile management  Social Media Starter Kit Unlimited Rapid Monthly edits Free Domain Logo making Priority Support  Quarterly Strategy Call Monthly Newsletter made by us also add sharp corners for all buttons except the menu bar try to exagerrate how could the premium package is. keep the overall design same.