Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Nexus Digital Solutions</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| dark: { | |
| 100: '#1E293B', | |
| 200: '#1A243B', | |
| 300: '#162036', | |
| 400: '#121C30', | |
| 500: '#0E1829', | |
| 600: '#0A1423', | |
| 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 { | |
| display: none; | |
| } | |
| .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: 0; | |
| transition: opacity 0.6s ease-in-out; | |
| } | |
| .fade-in.visible { | |
| 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> | |
| </div> | |
| </div> | |
| </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> | |
| <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> | |
| <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> | |
| <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> | |
| </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> | |
| </div> | |
| </section> | |
| </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> | |
| <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-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> | |
| <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-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> | |
| </div> | |
| </section> | |
| </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> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <!-- 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> | |
| </div> | |
| </section> | |
| </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> | |
| </footer> | |
| <script> | |
| // Tab functionality | |
| function changeTab(tabId) { | |
| // Hide all tab contents | |
| document.querySelectorAll('.tab-content').forEach(tab => { | |
| tab.classList.remove('active'); | |
| }); | |
| // 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) { | |
| if(this.getAttribute('href') !== '#') { | |
| e.preventDefault(); | |
| // Check if we're already on the home tab | |
| const currentTab = document.querySelector('.tab-content.active').id; | |
| const targetSection = this.getAttribute('href').substring(1); | |
| if (currentTab !== 'home' && ['home-section', 'services', 'why-us'].includes(targetSection)) { | |
| // Switch to home tab first | |
| changeTab('home'); | |
| // Wait for tab switch to complete before scrolling | |
| setTimeout(() => { | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }, 100); | |
| } else { | |
| // Regular scroll | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| } | |
| } | |
| }); | |
| }); | |
| // Intersection Observer for fade-in animations | |
| const fadeElements = document.querySelectorAll('.fade-in'); | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('visible'); | |
| } | |
| }); | |
| }, { | |
| threshold: 0.1 | |
| }); | |
| fadeElements.forEach(element => { | |
| observer.observe(element); | |
| }); | |
| // Update active nav link on scroll | |
| const sections = document.querySelectorAll('.section'); | |
| const navLinks = document.querySelectorAll('.floating-menu-item'); | |
| window.addEventListener('scroll', () => { | |
| let current = ''; | |
| sections.forEach(section => { | |
| const sectionTop = section.offsetTop; | |
| const sectionHeight = section.clientHeight; | |
| if (pageYOffset >= (sectionTop - 100)) { | |
| current = section.getAttribute('id'); | |
| } | |
| }); | |
| navLinks.forEach(link => { | |
| link.classList.remove('active-menu-item'); | |
| if (link.getAttribute('href') === `#${current}`) { | |
| link.classList.add('active-menu-item'); | |
| } | |
| }); | |
| }); | |
| // Dark mode toggle functionality | |
| const darkModeToggle = document.getElementById('darkModeToggle'); | |
| const html = document.documentElement; | |
| // Check for saved user preference or system preference | |
| if (localStorage.getItem('darkMode') === 'true' || | |
| (!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches)) { | |
| html.classList.add('dark'); | |
| } | |
| darkModeToggle.addEventListener('click', () => { | |
| html.classList.toggle('dark'); | |
| localStorage.setItem('darkMode', html.classList.contains('dark')); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=dablack/webproject" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |