Spaces:

SergTsn
/

my-prototype

Running

App Files Files Community

SergTsn commited on Jul 18, 2025

Commit

8e7cd78

verified ·

1 Parent(s): 64de6a7

помести на фон с индустриальной тематикой - Follow Up Deployment

Browse files

Files changed (1) hide show

index.html +382 -79

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Responsive Header with Contact Icons</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
@@ -22,6 +22,7 @@
                 padding: 1rem;
                 border-top: 1px solid #e5e7eb;
                 z-index: 10;
             }
         }
         .contact-icon {
@@ -36,24 +37,32 @@
             background-clip: text;
             color: transparent;
         }
-    </style>
-    <style>
-        .laser-ray {
-            position: absolute;
-            height: 1px;
-            background: linear-gradient(90deg, rgba(0,255,255,0), cyan, rgba(0,255,255,0));
-            box-shadow: 0 0 10px cyan;
-            transform-origin: left center;
-            animation: laser 3s infinite linear;
-            opacity: 0.7;
         }
-        @keyframes laser {
-            0% { transform: rotate(0deg) translateX(0); width: 0; }
-            50% { width: 100vw; }
-            100% { transform: rotate(360deg) translateX(0); width: 0; }
         }
         .wave {
             position: absolute;
             bottom: 0;
@@ -64,37 +73,71 @@
             background-position: 0 bottom;
             transform-origin: center bottom;
             animation: wave 12s linear infinite;
         }
-        .wave:nth-child(2) {
-            animation-delay: -3s;
-            opacity: 0.5;
-        }
-        .wave:nth-child(3) {
-            animation-delay: -6s;
-            opacity: 0.3;
-        }
         @keyframes wave {
             0% { transform: translateX(0) translateZ(0) scaleY(1); }
             50% { transform: translateX(-25%) translateZ(0) scaleY(0.5); }
             100% { transform: translateX(-50%) translateZ(0) scaleY(1); }
         }
     </style>
 </head>
-<body class="bg-gray-50 relative overflow-hidden">
-    <div id="waves" class="absolute inset-0 -z-10 opacity-20"></div>
-    <header class="bg-white shadow-sm">
-        <div class="container mx-auto px-4 py-4">
             <div class="flex items-center justify-between">
                 <!-- Mobile menu button -->
-                <button class="md:hidden text-gray-700 focus:outline-none" aria-label="Toggle menu">
                     <i class="fas fa-bars text-xl"></i>
                 </button>
                 <!-- Logo and Company Name -->
                 <div class="flex items-center space-x-3">
-                    <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center">
                         <span class="text-white font-bold text-xl">C</span>
                     </div>
                     <h1 class="text-2xl font-bold logo-text">ConnectHub</h1>
@@ -102,33 +145,32 @@
                 <!-- Contact Icons -->
                 <div class="flex items-center space-x-4 md:space-x-6">
-                    <a href="tel:+1234567890" class="contact-icon group">
                         <div class="flex items-center space-x-2">
-                            <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center group-hover:bg-blue-200">
                                 <i class="fas fa-phone text-blue-600"></i>
                             </div>
                             <span class="hidden md:inline-block text-gray-700 font-medium">+1 (234) 567-890</span>
                         </div>
                     </a>
-                    <a href="https://wa.me/1234567890" target="_blank" class="contact-icon group">
                         <div class="flex items-center space-x-2">
-                            <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center group-hover:bg-green-200">
                                 <i class="fab fa-whatsapp text-green-600"></i>
                             </div>
                             <span class="hidden md:inline-block text-gray-700 font-medium">WhatsApp</span>
                         </div>
                     </a>
-                    <a href="https://t.me/username" target="_blank" class="contact-icon group">
                         <div class="flex items-center space-x-2">
-                            <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center group-hover:bg-blue-200">
                                 <i class="fab fa-telegram text-blue-500"></i>
                             </div>
                             <span class="hidden md:inline-block text-gray-700 font-medium">Telegram</span>
                         </div>
                     </a>
                 </div>
             </div>
         </div>
@@ -137,51 +179,270 @@
     <!-- Main Navigation Menu -->
     <nav class="bg-white shadow-sm">
         <div class="container mx-auto px-4">
-            <div class="hidden md:flex justify-center space-x-8 py-4">
-                <a href="#" class="text-gray-700 hover:text-blue-600 font-medium py-2">О нас</a>
-                <a href="#" class="text-gray-700 hover:text-blue-600 font-medium py-2">Услуги</a>
-                <a href="#" class="text-gray-700 hover:text-blue-600 font-medium py-2">Наши работы</a>
-                <a href="#" class="text-gray-700 hover:text-blue-600 font-medium py-2">Поддержка</a>
-                <a href="#" class="text-gray-700 hover:text-blue-600 font-medium py-2">Помощь</a>
-                <a href="#" class="text-gray-700 hover:text-blue-600 font-medium py-2">Контакты</a>
             </div>
         </div>
     </nav>
     <!-- Mobile Menu (hidden by default) -->
     <div class="mobile-menu md:hidden">
-        <a href="#" class="py-2 px-4 text-gray-700 hover:bg-gray-100">О нас</a>
-        <a href="#" class="py-2 px-4 text-gray-700 hover:bg-gray-100">Услуги</a>
-        <a href="#" class="py-2 px-4 text-gray-700 hover:bg-gray-100">Наши работы</a>
-        <a href="#" class="py-2 px-4 text-gray-700 hover:bg-gray-100">Поддержка</a>
-        <a href="#" class="py-2 px-4 text-gray-700 hover:bg-gray-100">Помощь</a>
-        <a href="#" class="py-2 px-4 text-gray-700 hover:bg-gray-100">Контакты</a>
     </div>
-    <main class="container mx-auto px-4 py-12 bg-blue-900 relative overflow-hidden">
-        <div id="lasers"></div>
-        <div class="text-center relative z-10">
-            <h2 class="text-3xl font-bold text-white mb-4">Welcome to ConnectHub</h2>
-            <p class="text-gray-300 max-w-[800px] mx-auto">This responsive header features a logo on the left and contact options on the right. On mobile devices, only the icons are shown to save space.</p>
-        </div>
     </main>
-    <script>
-        // Create laser rays
-        document.addEventListener('DOMContentLoaded', function() {
-            const lasersContainer = document.getElementById('lasers');
-            const rayCount = 8;
-            for (let i = 0; i < rayCount; i++) {
-                const ray = document.createElement('div');
-                ray.className = 'laser-ray';
-                ray.style.top = `${Math.random() * 100}%`;
-                ray.style.left = '50%';
-                ray.style.animationDelay = `${i * 0.5}s`;
-                lasersContainer.appendChild(ray);
-            }
-        });
         // Create animated waves
         document.addEventListener('DOMContentLoaded', function() {
             const wavesContainer = document.getElementById('waves');
@@ -196,15 +457,57 @@
             });
         });
         // Toggle mobile menu
-        document.querySelector('header button').addEventListener('click', function() {
             document.querySelector('.mobile-menu').classList.toggle('active');
         });
-        // Contact icons functionality
-        document.querySelectorAll('.contact-icon').forEach(icon => {
-            icon.addEventListener('click', function() {
-                console.log('Contact method clicked:', this.querySelector('span').textContent);
             });
         });
     </script>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ConnectHub - Modern Communication Platform</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
                 padding: 1rem;
                 border-top: 1px solid #e5e7eb;
                 z-index: 10;
+                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
             }
         }
         .contact-icon {
             background-clip: text;
             color: transparent;
         }
+        .gradient-bg {
+            background: linear-gradient(135deg, #1e3a8a 0%, #4c1d95 100%);
         }
+        .floating {
+            animation: floating 6s ease-in-out infinite;
+        }
+        @keyframes floating {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-15px); }
+            100% { transform: translateY(0px); }
+        }
+        .pulse {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
+            70% { box-shadow: 0 0 0 15px rgba(59, 130, 246, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
+        }
+        .glow {
+            animation: glow 3s ease-in-out infinite alternate;
+        }
+        @keyframes glow {
+            from { filter: drop-shadow(0 0 5px rgba(59, 130, 246, 0.5)); }
+            to { filter: drop-shadow(0 0 15px rgba(59, 130, 246, 0.8)); }
         }
         .wave {
             position: absolute;
             bottom: 0;
             background-position: 0 bottom;
             transform-origin: center bottom;
             animation: wave 12s linear infinite;
+            opacity: 0.2;
         }
         @keyframes wave {
             0% { transform: translateX(0) translateZ(0) scaleY(1); }
             50% { transform: translateX(-25%) translateZ(0) scaleY(0.5); }
             100% { transform: translateX(-50%) translateZ(0) scaleY(1); }
         }
+        .connect-dot {
+            position: absolute;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background-color: rgba(59, 130, 246, 0.6);
+            animation: connect 4s linear infinite;
+        }
+        @keyframes connect {
+            0% { transform: scale(0.5); opacity: 0; }
+            50% { transform: scale(1.2); opacity: 1; }
+            100% { transform: scale(0.5); opacity: 0; }
+        }
+        .nav-link {
+            position: relative;
+        }
+        .nav-link::after {
+            content: '';
+            position: absolute;
+            width: 0;
+            height: 2px;
+            bottom: 0;
+            left: 0;
+            background-color: #3b82f6;
+            transition: width 0.3s ease;
+        }
+        .nav-link:hover::after {
+            width: 100%;
+        }
     </style>
 </head>
+<body class="bg-gray-50 relative overflow-x-hidden">
+    <!-- Animated background elements -->
+    <div id="waves" class="absolute inset-0 -z-10"></div>
+    <div id="connect-dots" class="absolute inset-0 -z-10 overflow-hidden"></div>
+    <!-- Floating notification -->
+    <div class="fixed top-4 right-4 z-50 hidden" id="notification">
+        <div class="bg-white rounded-lg shadow-lg p-4 flex items-center space-x-3 animate-bounce">
+            <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
+                <i class="fas fa-bell text-blue-600"></i>
+            </div>
+            <p class="text-sm font-medium text-gray-700">New message received!</p>
+        </div>
+    </div>
+    <!-- Header -->
+    <header class="bg-white shadow-sm sticky top-0 z-40">
+        <div class="container mx-auto px-4 py-3">
             <div class="flex items-center justify-between">
                 <!-- Mobile menu button -->
+                <button class="md:hidden text-gray-700 focus:outline-none" aria-label="Toggle menu" id="menu-toggle">
                     <i class="fas fa-bars text-xl"></i>
                 </button>
                 <!-- Logo and Company Name -->
                 <div class="flex items-center space-x-3">
+                    <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center pulse">
                         <span class="text-white font-bold text-xl">C</span>
                     </div>
                     <h1 class="text-2xl font-bold logo-text">ConnectHub</h1>
                 <!-- Contact Icons -->
                 <div class="flex items-center space-x-4 md:space-x-6">
+                    <a href="tel:+1234567890" class="contact-icon group" title="Call us">
                         <div class="flex items-center space-x-2">
+                            <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center group-hover:bg-blue-200 transition-all duration-300">
                                 <i class="fas fa-phone text-blue-600"></i>
                             </div>
                             <span class="hidden md:inline-block text-gray-700 font-medium">+1 (234) 567-890</span>
                         </div>
                     </a>
+                    <a href="https://wa.me/1234567890" target="_blank" class="contact-icon group" title="WhatsApp">
                         <div class="flex items-center space-x-2">
+                            <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center group-hover:bg-green-200 transition-all duration-300">
                                 <i class="fab fa-whatsapp text-green-600"></i>
                             </div>
                             <span class="hidden md:inline-block text-gray-700 font-medium">WhatsApp</span>
                         </div>
                     </a>
+                    <a href="https://t.me/username" target="_blank" class="contact-icon group" title="Telegram">
                         <div class="flex items-center space-x-2">
+                            <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center group-hover:bg-blue-200 transition-all duration-300">
                                 <i class="fab fa-telegram text-blue-500"></i>
                             </div>
                             <span class="hidden md:inline-block text-gray-700 font-medium">Telegram</span>
                         </div>
                     </a>
                 </div>
             </div>
         </div>
     <!-- Main Navigation Menu -->
     <nav class="bg-white shadow-sm">
         <div class="container mx-auto px-4">
+            <div class="hidden md:flex justify-center space-x-8 py-3">
+                <a href="#" class="nav-link text-gray-700 hover:text-blue-600 font-medium py-2 px-1">О нас</a>
+                <a href="#" class="nav-link text-gray-700 hover:text-blue-600 font-medium py-2 px-1">Услуги</a>
+                <a href="#" class="nav-link text-gray-700 hover:text-blue-600 font-medium py-2 px-1">Наши работы</a>
+                <a href="#" class="nav-link text-gray-700 hover:text-blue-600 font-medium py-2 px-1">Поддержка</a>
+                <a href="#" class="nav-link text-gray-700 hover:text-blue-600 font-medium py-2 px-1">Помощь</a>
+                <a href="#" class="nav-link text-gray-700 hover:text-blue-600 font-medium py-2 px-1">Контакты</a>
             </div>
         </div>
     </nav>
     <!-- Mobile Menu (hidden by default) -->
     <div class="mobile-menu md:hidden">
+        <a href="#" class="py-3 px-4 text-gray-700 hover:bg-gray-100 transition-colors duration-200 flex items-center space-x-2">
+            <i class="fas fa-info-circle text-blue-500 w-5"></i>
+            <span>О нас</span>
+        </a>
+        <a href="#" class="py-3 px-4 text-gray-700 hover:bg-gray-100 transition-colors duration-200 flex items-center space-x-2">
+            <i class="fas fa-concierge-bell text-blue-500 w-5"></i>
+            <span>Услуги</span>
+        </a>
+        <a href="#" class="py-3 px-4 text-gray-700 hover:bg-gray-100 transition-colors duration-200 flex items-center space-x-2">
+            <i class="fas fa-briefcase text-blue-500 w-5"></i>
+            <span>Наши работы</span>
+        </a>
+        <a href="#" class="py-3 px-4 text-gray-700 hover:bg-gray-100 transition-colors duration-200 flex items-center space-x-2">
+            <i class="fas fa-headset text-blue-500 w-5"></i>
+            <span>Поддержка</span>
+        </a>
+        <a href="#" class="py-3 px-4 text-gray-700 hover:bg-gray-100 transition-colors duration-200 flex items-center space-x-2">
+            <i class="fas fa-question-circle text-blue-500 w-5"></i>
+            <span>Помощь</span>
+        </a>
+        <a href="#" class="py-3 px-4 text-gray-700 hover:bg-gray-100 transition-colors duration-200 flex items-center space-x-2">
+            <i class="fas fa-envelope text-blue-500 w-5"></i>
+            <span>Контакты</span>
+        </a>
     </div>
+    <main class="w-full px-4 py-16 gradient-bg relative overflow-hidden">
+        <!-- Hero Section -->
+        <section class="container mx-auto text-center relative z-10">
+            <div class="max-w-4xl mx-auto">
+                <h1 class="text-4xl md:text-5xl font-bold text-white mb-6 leading-tight">Seamless Communication <span class="text-blue-300">Solutions</span></h1>
+                <p class="text-xl text-blue-100 mb-8">Connect with your audience through multiple channels with our integrated communication platform.</p>
+                <div class="flex flex-col sm:flex-row justify-center gap-4 mb-12">
+                    <a href="#" class="bg-white text-blue-700 font-semibold px-6 py-3 rounded-lg hover:bg-blue-50 transition-all duration-300 flex items-center justify-center space-x-2">
+                        <span>Get Started</span>
+                        <i class="fas fa-arrow-right"></i>
+                    </a>
+                    <a href="#" class="bg-transparent border-2 border-white text-white font-semibold px-6 py-3 rounded-lg hover:bg-white hover:text-blue-700 transition-all duration-300 flex items-center justify-center space-x-2">
+                        <i class="fas fa-play"></i>
+                        <span>Watch Demo</span>
+                    </a>
+                </div>
+            </div>
+            <div class="relative mt-16">
+                <div class="absolute -inset-4 bg-blue-500 rounded-2xl opacity-20 blur-lg"></div>
+                <div class="relative bg-white rounded-xl shadow-xl p-6 max-w-4xl mx-auto">
+                    <div class="flex flex-wrap justify-center gap-6">
+                        <div class="flex items-center space-x-3">
+                            <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center">
+                                <i class="fas fa-phone text-blue-600 text-xl"></i>
+                            </div>
+                            <div>
+                                <p class="text-sm text-gray-500">Phone Support</p>
+                                <p class="font-semibold">24/7 Available</p>
+                            </div>
+                        </div>
+                        <div class="flex items-center space-x-3">
+                            <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center">
+                                <i class="fab fa-whatsapp text-green-600 text-xl"></i>
+                            </div>
+                            <div>
+                                <p class="text-sm text-gray-500">WhatsApp</p>
+                                <p class="font-semibold">Instant Messaging</p>
+                            </div>
+                        </div>
+                        <div class="flex items-center space-x-3">
+                            <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center">
+                                <i class="fab fa-telegram text-blue-500 text-xl"></i>
+                            </div>
+                            <div>
+                                <p class="text-sm text-gray-500">Telegram</p>
+                                <p class="font-semibold">Secure Chat</p>
+                            </div>
+                        </div>
+                        <div class="flex items-center space-x-3">
+                            <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center">
+                                <i class="fas fa-envelope text-purple-600 text-xl"></i>
+                            </div>
+                            <div>
+                                <p class="text-sm text-gray-500">Email</p>
+                                <p class="font-semibold">response@connecthub.com</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
     </main>
+    <!-- Features Section -->
+    <section class="py-16 bg-white">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl font-bold text-gray-800 mb-4">Why Choose ConnectHub?</h2>
+                <p class="text-gray-600 max-w-2xl mx-auto">Our platform offers seamless integration with multiple communication channels to ensure you never miss a connection.</p>
+            </div>
+            <div class="grid md:grid-cols-3 gap-8">
+                <div class="bg-gray-50 p-6 rounded-xl hover:shadow-lg transition-all duration-300">
+                    <div class="w-14 h-14 rounded-full bg-blue-100 flex items-center justify-center mb-4">
+                        <i class="fas fa-bolt text-blue-600 text-xl"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2 text-gray-800">Instant Connectivity</h3>
+                    <p class="text-gray-600">Reach your audience instantly through multiple channels with a single platform integration.</p>
+                </div>
+                <div class="bg-gray-50 p-6 rounded-xl hover:shadow-lg transition-all duration-300">
+                    <div class="w-14 h-14 rounded-full bg-purple-100 flex items-center justify-center mb-4">
+                        <i class="fas fa-shield-alt text-purple-600 text-xl"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2 text-gray-800">Secure Communication</h3>
+                    <p class="text-gray-600">End-to-end encryption and secure protocols to protect your conversations and data.</p>
+                </div>
+                <div class="bg-gray-50 p-6 rounded-xl hover:shadow-lg transition-all duration-300">
+                    <div class="w-14 h-14 rounded-full bg-green-100 flex items-center justify-center mb-4">
+                        <i class="fas fa-chart-line text-green-600 text-xl"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2 text-gray-800">Analytics Dashboard</h3>
+                    <p class="text-gray-600">Track engagement and optimize your communication strategy with our comprehensive analytics.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Testimonials -->
+    <section class="py-16 bg-gray-50">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-12">
+                <h2 class="text-3xl font-bold text-gray-800 mb-4">What Our Clients Say</h2>
+                <p class="text-gray-600 max-w-2xl mx-auto">Hear from businesses that transformed their communication with ConnectHub.</p>
+            </div>
+            <div class="grid md:grid-cols-2 gap-8">
+                <div class="bg-white p-6 rounded-xl shadow-sm">
+                    <div class="flex items-center mb-4">
+                        <div class="w-12 h-12 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold mr-4">JD</div>
+                        <div>
+                            <h4 class="font-semibold">John Doe</h4>
+                            <p class="text-sm text-gray-500">CEO, TechSolutions</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-700">"ConnectHub has revolutionized how we communicate with our clients. The multi-channel approach ensures we're always available."</p>
+                    <div class="flex mt-4">
+                        <i class="fas fa-star text-yellow-400"></i>
+                        <i class="fas fa-star text-yellow-400"></i>
+                        <i class="fas fa-star text-yellow-400"></i>
+                        <i class="fas fa-star text-yellow-400"></i>
+                        <i class="fas fa-star text-yellow-400"></i>
+                    </div>
+                </div>
+                <div class="bg-white p-6 rounded-xl shadow-sm">
+                    <div class="flex items-center mb-4">
+                        <div class="w-12 h-12 rounded-full bg-purple-500 flex items-center justify-center text-white font-bold mr-4">AS</div>
+                        <div>
+                            <h4 class="font-semibold">Anna Smith</h4>
+                            <p class="text-sm text-gray-500">Marketing Director, BrandUp</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-700">"The analytics dashboard provides incredible insights into our customer engagement. We've improved our response times by 60%."</p>
+                    <div class="flex mt-4">
+                        <i class="fas fa-star text-yellow-400"></i>
+                        <i class="fas fa-star text-yellow-400"></i>
+                        <i class="fas fa-star text-yellow-400"></i>
+                        <i class="fas fa-star text-yellow-400"></i>
+                        <i class="fas fa-star-half-alt text-yellow-400"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- CTA Section -->
+    <section class="py-16 gradient-bg relative overflow-hidden">
+        <div class="absolute inset-0 bg-gradient-to-r from-blue-900/50 to-purple-900/50"></div>
+        <div class="container mx-auto px-4 relative z-10">
+            <div class="max-w-3xl mx-auto text-center">
+                <h2 class="text-3xl font-bold text-white mb-4">Ready to Transform Your Communication?</h2>
+                <p class="text-blue-100 mb-8">Join thousands of businesses already using ConnectHub to enhance their customer engagement.</p>
+                <div class="flex flex-col sm:flex-row justify-center gap-4">
+                    <a href="#" class="bg-white text-blue-700 font-semibold px-8 py-3 rounded-lg hover:bg-blue-50 transition-all duration-300">Start Free Trial</a>
+                    <a href="#" class="bg-transparent border-2 border-white text-white font-semibold px-8 py-3 rounded-lg hover:bg-white hover:text-blue-700 transition-all duration-300">Schedule Demo</a>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="bg-gray-900 text-white py-12">
+        <div class="container mx-auto px-4">
+            <div class="grid md:grid-cols-4 gap-8 mb-8">
+                <div>
+                    <div class="flex items-center space-x-3 mb-4">
+                        <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center">
+                            <span class="text-white font-bold text-xl">C</span>
+                        </div>
+                        <h3 class="text-xl font-bold logo-text">ConnectHub</h3>
+                    </div>
+                    <p class="text-gray-400 mb-4">The ultimate communication platform for modern businesses.</p>
+                    <div class="flex space-x-4">
+                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
+                    </div>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">Quick Links</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white">Home</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Services</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Portfolio</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">Services</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white">Phone Support</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">WhatsApp Integration</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Telegram Bots</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Email Management</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Analytics</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">Contact Us</h4>
+                    <ul class="space-y-2">
+                        <li class="flex items-start space-x-2">
+                            <i class="fas fa-map-marker-alt mt-1 text-blue-400"></i>
+                            <span class="text-gray-400">123 Business Ave, Suite 100, San Francisco, CA 94107</span>
+                        </li>
+                        <li class="flex items-center space-x-2">
+                            <i class="fas fa-phone text-blue-400"></i>
+                            <span class="text-gray-400">+1 (234) 567-890</span>
+                        </li>
+                        <li class="flex items-center space-x-2">
+                            <i class="fas fa-envelope text-blue-400"></i>
+                            <span class="text-gray-400">info@connecthub.com</span>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div class="border-t border-gray-800 pt-8 text-center text-gray-500">
+                <p>&copy; 2023 ConnectHub. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+    <script>
         // Create animated waves
         document.addEventListener('DOMContentLoaded', function() {
             const wavesContainer = document.getElementById('waves');
             });
         });
+        // Create connecting dots animation
+        document.addEventListener('DOMContentLoaded', function() {
+            const dotsContainer = document.getElementById('connect-dots');
+            const dotCount = 20;
+            for (let i = 0; i < dotCount; i++) {
+                const dot = document.createElement('div');
+                dot.className = 'connect-dot';
+                dot.style.left = `${Math.random() * 100}%`;
+                dot.style.top = `${Math.random() * 100}%`;
+                dot.style.animationDelay = `${i * 0.2}s`;
+                dotsContainer.appendChild(dot);
+            }
+        });
         // Toggle mobile menu
+        document.getElementById('menu-toggle').addEventListener('click', function() {
             document.querySelector('.mobile-menu').classList.toggle('active');
         });
+        // Show notification after delay
+        setTimeout(() => {
+            document.getElementById('notification').classList.remove('hidden');
+            setTimeout(() => {
+                document.getElementById('notification').classList.add('hidden');
+            }, 5000);
+        }, 3000);
+        // Add hover effect to feature cards
+        document.querySelectorAll('.bg-gray-50').forEach(card => {
+            card.addEventListener('mouseenter', function() {
+                const icon = this.querySelector('i');
+                icon.classList.add('glow');
+            });
+            card.addEventListener('mouseleave', function() {
+                const icon = this.querySelector('i');
+                icon.classList.remove('glow');
+            });
+        });
+        // Smooth scrolling for anchor links
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function(e) {
+                e.preventDefault();
+                const target = document.querySelector(this.getAttribute('href'));
+                if (target) {
+                    window.scrollTo({
+                        top: target.offsetTop - 100,
+                        behavior: 'smooth'
+                    });
+                }
             });
         });
     </script>