Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ConnectHub - Unified 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> | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-15px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| @keyframes gradient { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899); | |
| background-size: 200% 200%; | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| animation: gradient 5s ease infinite; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #1e3a8a 0%, #4c1d95 100%); | |
| } | |
| .card-hover { | |
| transition: all 0.3s ease; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .floating { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| .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%; | |
| } | |
| .chat-bubble { | |
| position: fixed; | |
| bottom: 30px; | |
| right: 30px; | |
| width: 60px; | |
| height: 60px; | |
| border-radius: 50%; | |
| background: linear-gradient(135deg, #3b82f6, #8b5cf6); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.4); | |
| cursor: pointer; | |
| z-index: 50; | |
| transition: all 0.3s ease; | |
| } | |
| .chat-bubble:hover { | |
| transform: scale(1.1); | |
| } | |
| .chat-window { | |
| position: fixed; | |
| bottom: 100px; | |
| right: 30px; | |
| width: 350px; | |
| background: white; | |
| border-radius: 15px; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); | |
| overflow: hidden; | |
| transform: scale(0); | |
| transform-origin: bottom right; | |
| transition: transform 0.3s ease; | |
| z-index: 50; | |
| } | |
| .chat-window.active { | |
| transform: scale(1); | |
| } | |
| .wave-bg { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 200%; | |
| height: 100%; | |
| background-repeat: repeat-x; | |
| background-position: 0 bottom; | |
| transform-origin: center bottom; | |
| animation: wave 15s linear infinite; | |
| opacity: 0.1; | |
| } | |
| @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); } | |
| } | |
| .particle { | |
| position: absolute; | |
| background-color: rgba(59, 130, 246, 0.6); | |
| border-radius: 50%; | |
| pointer-events: none; | |
| z-index: -1; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans antialiased relative overflow-x-hidden"> | |
| <!-- Floating chat bubble --> | |
| <div class="chat-bubble pulse" id="chatBubble"> | |
| <i class="fas fa-comment-dots text-2xl"></i> | |
| </div> | |
| <!-- Chat window --> | |
| <div class="chat-window" id="chatWindow"> | |
| <div class="bg-gradient-to-r from-blue-600 to-purple-600 p-4 text-white"> | |
| <div class="flex justify-between items-center"> | |
| <h3 class="font-bold text-lg">ConnectHub Support</h3> | |
| <button id="closeChat" class="text-white hover:text-gray-200"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <p class="text-sm opacity-80">We're here to help!</p> | |
| </div> | |
| <div class="p-4 h-64 overflow-y-auto bg-gray-50"> | |
| <div class="flex mb-4"> | |
| <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white mr-2">B</div> | |
| <div class="bg-white p-3 rounded-lg shadow-sm max-w-xs"> | |
| <p class="text-sm">Hello! How can we help you today?</p> | |
| <p class="text-xs text-gray-500 mt-1">Just now</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-200 p-3 bg-white"> | |
| <div class="flex items-center"> | |
| <input type="text" placeholder="Type your message..." class="flex-1 border border-gray-300 rounded-full py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <button class="ml-2 w-10 h-10 rounded-full bg-blue-500 text-white flex items-center justify-center hover:bg-blue-600 transition"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </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"> | |
| <!-- Logo and Company Name --> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-r from-blue-600 to-purple-600 flex items-center justify-center shadow-md"> | |
| <span class="text-white font-bold text-xl">C</span> | |
| </div> | |
| <h1 class="text-2xl font-bold gradient-text">ConnectHub</h1> | |
| </div> | |
| <!-- Desktop Navigation --> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#" class="nav-link text-gray-700 hover:text-blue-600 font-medium py-2 px-1">Home</a> | |
| <a href="#" class="nav-link text-gray-700 hover:text-blue-600 font-medium py-2 px-1">Features</a> | |
| <a href="#" class="nav-link text-gray-700 hover:text-blue-600 font-medium py-2 px-1">Solutions</a> | |
| <a href="#" class="nav-link text-gray-700 hover:text-blue-600 font-medium py-2 px-1">Pricing</a> | |
| <a href="#" class="nav-link text-gray-700 hover:text-blue-600 font-medium py-2 px-1">Resources</a> | |
| </nav> | |
| <!-- Auth Buttons --> | |
| <div class="hidden md:flex items-center space-x-4"> | |
| <a href="#" class="text-gray-700 hover:text-blue-600 font-medium">Login</a> | |
| <a href="#" class="bg-gradient-to-r from-blue-600 to-purple-600 text-white px-6 py-2 rounded-full hover:shadow-lg transition-all duration-300">Get Started</a> | |
| </div> | |
| <!-- Mobile menu button --> | |
| <button class="md:hidden text-gray-700 focus:outline-none" aria-label="Toggle menu" id="menuToggle"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Mobile Menu --> | |
| <div class="md:hidden fixed inset-0 bg-white z-30 transform translate-x-full transition-transform duration-300" id="mobileMenu"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-r from-blue-600 to-purple-600 flex items-center justify-center"> | |
| <span class="text-white font-bold text-xl">C</span> | |
| </div> | |
| <h1 class="text-xl font-bold gradient-text">ConnectHub</h1> | |
| </div> | |
| <button id="closeMenu" class="text-gray-700"> | |
| <i class="fas fa-times text-xl"></i> | |
| </button> | |
| </div> | |
| <nav class="flex flex-col space-y-4"> | |
| <a href="#" class="text-gray-700 hover:text-blue-600 font-medium py-2 border-b border-gray-100">Home</a> | |
| <a href="#" class="text-gray-700 hover:text-blue-600 font-medium py-2 border-b border-gray-100">Features</a> | |
| <a href="#" class="text-gray-700 hover:text-blue-600 font-medium py-2 border-b border-gray-100">Solutions</a> | |
| <a href="#" class="text-gray-700 hover:text-blue-600 font-medium py-2 border-b border-gray-100">Pricing</a> | |
| <a href="#" class="text-gray-700 hover:text-blue-600 font-medium py-2 border-b border-gray-100">Resources</a> | |
| </nav> | |
| <div class="mt-8 pt-4 border-t border-gray-100"> | |
| <a href="#" class="block text-center bg-gradient-to-r from-blue-600 to-purple-600 text-white px-6 py-3 rounded-full mb-3 hover:shadow-lg transition-all duration-300">Get Started</a> | |
| <a href="#" class="block text-center text-blue-600 font-medium">Already have an account? Login</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Hero Section --> | |
| <section class="relative overflow-hidden gradient-bg"> | |
| <div class="absolute inset-0"> | |
| <div class="wave-bg" style="background-image: linear-gradient(to right, transparent, rgba(255,255,255,0.3), transparent);"></div> | |
| <div class="wave-bg" style="background-image: linear-gradient(to right, transparent, rgba(255,255,255,0.2), transparent); animation-delay: -5s;"></div> | |
| </div> | |
| <div class="container mx-auto px-4 py-24 relative z-10"> | |
| <div class="flex flex-col lg:flex-row items-center"> | |
| <div class="lg:w-1/2 mb-12 lg:mb-0"> | |
| <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white leading-tight mb-6"> | |
| Unified <span class="gradient-text">Communication</span> Platform | |
| </h1> | |
| <p class="text-xl text-blue-100 mb-8 max-w-lg"> | |
| Connect with your customers across multiple channels from one powerful dashboard. Never miss an important conversation again. | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4 mb-12"> | |
| <a href="#" class="bg-white text-blue-700 font-semibold px-8 py-3 rounded-lg hover:bg-blue-50 transition-all duration-300 flex items-center justify-center space-x-2"> | |
| <span>Start Free Trial</span> | |
| <i class="fas fa-arrow-right"></i> | |
| </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 flex items-center justify-center space-x-2"> | |
| <i class="fas fa-play"></i> | |
| <span>Watch Demo</span> | |
| </a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex -space-x-2"> | |
| <img src="https://randomuser.me/api/portraits/women/12.jpg" class="w-10 h-10 rounded-full border-2 border-white"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-10 h-10 rounded-full border-2 border-white"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-10 h-10 rounded-full border-2 border-white"> | |
| </div> | |
| <div> | |
| <p class="text-blue-100 text-sm">Trusted by 10,000+ businesses worldwide</p> | |
| <div class="flex mt-1"> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <span class="text-blue-100 text-xs ml-1">4.9/5</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2 relative"> | |
| <div class="relative max-w-md mx-auto lg:mr-0 lg:ml-auto"> | |
| <div class="absolute -inset-4 bg-blue-500 rounded-3xl opacity-20 blur-xl"></div> | |
| <div class="relative bg-white rounded-2xl shadow-2xl overflow-hidden"> | |
| <div class="bg-gray-50 p-4 border-b border-gray-200 flex items-center"> | |
| <div class="flex space-x-2"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <div class="flex-1 text-center text-sm font-medium text-gray-700">ConnectHub Dashboard</div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4"> | |
| <i class="fas fa-user text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-gray-800">Customer Support</h3> | |
| <p class="text-sm text-gray-500">Active now</p> | |
| </div> | |
| </div> | |
| <div class="space-y-4 mb-6"> | |
| <div class="flex justify-end"> | |
| <div class="bg-blue-100 text-blue-800 p-3 rounded-lg max-w-xs"> | |
| <p class="text-sm">Hi there! I need help with my account.</p> | |
| <p class="text-xs text-blue-600 text-right mt-1">10:42 AM</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="bg-gray-100 text-gray-800 p-3 rounded-lg max-w-xs"> | |
| <p class="text-sm">Of course! What seems to be the problem?</p> | |
| <p class="text-xs text-gray-500 text-right mt-1">10:43 AM</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-200 pt-4"> | |
| <div class="flex items-center bg-gray-50 rounded-lg px-4 py-2"> | |
| <input type="text" placeholder="Type your message..." class="flex-1 bg-transparent focus:outline-none text-sm"> | |
| <button class="text-blue-600 hover:text-blue-800"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute -bottom-10 -left-10 w-24 h-24 rounded-full bg-purple-500 opacity-20 blur-xl"></div> | |
| <div class="absolute -top-10 -right-10 w-24 h-24 rounded-full bg-blue-500 opacity-20 blur-xl"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Clients Section --> | |
| <section class="py-12 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <p class="text-center text-gray-500 mb-8">TRUSTED BY INNOVATIVE COMPANIES</p> | |
| <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16 opacity-70"> | |
| <img src="https://via.placeholder.com/120x40?text=Company+1" alt="Company 1" class="h-8"> | |
| <img src="https://via.placeholder.com/120x40?text=Company+2" alt="Company 2" class="h-8"> | |
| <img src="https://via.placeholder.com/120x40?text=Company+3" alt="Company 3" class="h-8"> | |
| <img src="https://via.placeholder.com/120x40?text=Company+4" alt="Company 4" class="h-8"> | |
| <img src="https://via.placeholder.com/120x40?text=Company+5" alt="Company 5" class="h-8"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16 max-w-3xl mx-auto"> | |
| <span class="text-blue-600 font-semibold">POWERFUL FEATURES</span> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mt-2 mb-4">Everything You Need to <span class="gradient-text">Connect Better</span></h2> | |
| <p class="text-gray-600">Our platform integrates all your communication channels into one intuitive interface, saving you time and improving customer satisfaction.</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="bg-white p-8 rounded-xl card-hover"> | |
| <div class="w-14 h-14 rounded-xl bg-blue-100 flex items-center justify-center mb-6 text-blue-600"> | |
| <i class="fas fa-comments text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">Unified Inbox</h3> | |
| <p class="text-gray-600 mb-4">Manage all your messages from email, chat, and social media in one place with our powerful unified inbox.</p> | |
| <a href="#" class="text-blue-600 font-medium inline-flex items-center"> | |
| Learn more <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="bg-white p-8 rounded-xl card-hover"> | |
| <div class="w-14 h-14 rounded-xl bg-purple-100 flex items-center justify-center mb-6 text-purple-600"> | |
| <i class="fas fa-robot text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">AI-Powered Automation</h3> | |
| <p class="text-gray-600 mb-4">Our smart bots handle routine inquiries automatically, freeing your team to focus on complex issues.</p> | |
| <a href="#" class="text-blue-600 font-medium inline-flex items-center"> | |
| Learn more <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="bg-white p-8 rounded-xl card-hover"> | |
| <div class="w-14 h-14 rounded-xl bg-green-100 flex items-center justify-center mb-6 text-green-600"> | |
| <i class="fas fa-chart-pie text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">Advanced Analytics</h3> | |
| <p class="text-gray-600 mb-4">Gain insights into response times, customer satisfaction, and team performance with detailed reports.</p> | |
| <a href="#" class="text-blue-600 font-medium inline-flex items-center"> | |
| Learn more <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="bg-white p-8 rounded-xl card-hover"> | |
| <div class="w-14 h-14 rounded-xl bg-yellow-100 flex items-center justify-center mb-6 text-yellow-600"> | |
| <i class="fas fa-mobile-alt text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">Mobile App</h3> | |
| <p class="text-gray-600 mb-4">Stay connected on the go with our fully-featured mobile app for iOS and Android devices.</p> | |
| <a href="#" class="text-blue-600 font-medium inline-flex items-center"> | |
| Learn more <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Feature 5 --> | |
| <div class="bg-white p-8 rounded-xl card-hover"> | |
| <div class="w-14 h-14 rounded-xl bg-red-100 flex items-center justify-center mb-6 text-red-600"> | |
| <i class="fas fa-shield-alt text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">Enterprise Security</h3> | |
| <p class="text-gray-600 mb-4">Bank-level encryption and compliance with global data protection regulations keep your data safe.</p> | |
| <a href="#" class="text-blue-600 font-medium inline-flex items-center"> | |
| Learn more <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Feature 6 --> | |
| <div class="bg-white p-8 rounded-xl card-hover"> | |
| <div class="w-14 h-14 rounded-xl bg-indigo-100 flex items-center justify-center mb-6 text-indigo-600"> | |
| <i class="fas fa-plug text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">Seamless Integrations</h3> | |
| <p class="text-gray-600 mb-4">Connect with your favorite tools like CRM, help desk, and marketing automation platforms.</p> | |
| <a href="#" class="text-blue-600 font-medium inline-flex items-center"> | |
| Learn more <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How It Works Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16 max-w-3xl mx-auto"> | |
| <span class="text-blue-600 font-semibold">SIMPLE STEPS</span> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mt-2 mb-4">How ConnectHub <span class="gradient-text">Works</span></h2> | |
| <p class="text-gray-600">Get started in minutes and transform your customer communication strategy.</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8 relative"> | |
| <!-- Step line --> | |
| <div class="hidden md:block absolute top-16 left-1/3 right-1/3 h-1 bg-gray-200"></div> | |
| <div class="hidden md:block absolute top-16 left-2/3 right-0 h-1 bg-gray-200"></div> | |
| <!-- Step 1 --> | |
| <div class="relative z-10"> | |
| <div class="w-16 h-16 rounded-full bg-blue-600 flex items-center justify-center text-white font-bold text-2xl mb-6 mx-auto">1</div> | |
| <div class="bg-gray-50 p-8 rounded-xl text-center"> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">Sign Up</h3> | |
| <p class="text-gray-600">Create your account and connect your communication channels in just a few clicks.</p> | |
| </div> | |
| </div> | |
| <!-- Step 2 --> | |
| <div class="relative z-10"> | |
| <div class="w-16 h-16 rounded-full bg-purple-600 flex items-center justify-center text-white font-bold text-2xl mb-6 mx-auto">2</div> | |
| <div class="bg-gray-50 p-8 rounded-xl text-center"> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">Customize</h3> | |
| <p class="text-gray-600">Set up your workflows, automation rules, and team permissions to match your needs.</p> | |
| </div> | |
| </div> | |
| <!-- Step 3 --> | |
| <div class="relative z-10"> | |
| <div class="w-16 h-16 rounded-full bg-indigo-600 flex items-center justify-center text-white font-bold text-2xl mb-6 mx-auto">3</div> | |
| <div class="bg-gray-50 p-8 rounded-xl text-center"> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">Go Live</h3> | |
| <p class="text-gray-600">Start communicating with your customers across all channels from one powerful dashboard.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="py-16 gradient-bg relative overflow-hidden"> | |
| <div class="absolute inset-0 opacity-10"> | |
| <div class="wave-bg" style="background-image: linear-gradient(to right, transparent, rgba(255,255,255,0.3), transparent);"></div> | |
| </div> | |
| <div class="container mx-auto px-4 relative z-10"> | |
| <div class="text-center mb-16"> | |
| <span class="text-blue-300 font-semibold">CUSTOMER STORIES</span> | |
| <h2 class="text-3xl md:text-4xl font-bold text-white mt-2 mb-4">What Our <span class="gradient-text">Clients Say</span></h2> | |
| <p class="text-blue-100 max-w-2xl mx-auto">Don't just take our word for it. Here's what our customers have to say about their experience with ConnectHub.</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-xl p-8 border border-white border-opacity-20"> | |
| <div class="flex items-center mb-6"> | |
| <img src="https://randomuser.me/api/portraits/women/43.jpg" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-semibold text-white">Sarah Johnson</h4> | |
| <p class="text-blue-200 text-sm">Marketing Director, TechCorp</p> | |
| </div> | |
| </div> | |
| <p class="text-blue-100 mb-6">"ConnectHub has transformed how we communicate with our customers. Response times improved by 70% and customer satisfaction scores are at an all-time high."</p> | |
| <div class="flex"> | |
| <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> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-xl p-8 border border-white border-opacity-20"> | |
| <div class="flex items-center mb-6"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-semibold text-white">Michael Chen</h4> | |
| <p class="text-blue-200 text-sm">CEO, StartupHub</p> | |
| </div> | |
| </div> | |
| <p class="text-blue-100 mb-6">"The unified inbox saved our small team countless hours. Now we can focus on growing our business instead of managing multiple communication tools."</p> | |
| <div class="flex"> | |
| <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> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-xl p-8 border border-white border-opacity-20"> | |
| <div class="flex items-center mb-6"> | |
| <img src="https://randomuser.me/api/portraits/women/65.jpg" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-semibold text-white">Emma Rodriguez</h4> | |
| <p class="text-blue-200 text-sm">Customer Support Lead, GlobalRetail</p> | |
| </div> | |
| </div> | |
| <p class="text-blue-100 mb-6">"The analytics dashboard gave us insights we never had before. We've optimized our support workflows and reduced resolution times by 40%."</p> | |
| <div class="flex"> | |
| <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> | |
| </div> | |
| </section> | |
| <!-- Pricing Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16 max-w-3xl mx-auto"> | |
| <span class="text-blue-600 font-semibold">PRICING PLANS</span> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mt-2 mb-4">Simple, Transparent <span class="gradient-text">Pricing</span></h2> | |
| <p class="text-gray-600">Choose the plan that fits your needs. No hidden fees, cancel anytime.</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto"> | |
| <!-- Basic Plan --> | |
| <div class="bg-gray-50 rounded-xl p-8 border border-gray-200"> | |
| <h3 class="text-xl font-semibold mb-4 text-gray-800">Starter</h3> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold text-gray-800">$19</span> | |
| <span class="text-gray-600">/month</span> | |
| </div> | |
| <p class="text-gray-600 mb-6">Perfect for small teams getting started with unified communications.</p> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>5 team members</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>3 communication channels</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Basic analytics</span> | |
| </li> | |
| <li class="flex items-center text-gray-400"> | |
| <i class="fas fa-times text-gray-300 mr-2"></i> | |
| <span>No automation</span> | |
| </li> | |
| <li class="flex items-center text-gray-400"> | |
| <i class="fas fa-times text-gray-300 mr-2"></i> | |
| <span>No API access</span> | |
| </li> | |
| </ul> | |
| <a href="#" class="block text-center bg-white border border-blue-600 text-blue-600 font-medium px-6 py-3 rounded-lg hover:bg-blue-50 transition">Get Started</a> | |
| </div> | |
| <!-- Popular Plan --> | |
| <div class="bg-gradient-to-b from-blue-600 to-purple-600 rounded-xl p-8 text-white relative overflow-hidden"> | |
| <div class="absolute top-0 right-0 bg-yellow-400 text-yellow-800 text-xs font-bold px-3 py-1 rounded-bl-lg">POPULAR</div> | |
| <h3 class="text-xl font-semibold mb-4">Professional</h3> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold">$49</span> | |
| <span class="opacity-80">/month</span> | |
| </div> | |
| <p class="opacity-90 mb-6">For growing businesses that need more advanced features.</p> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-white mr-2"></i> | |
| <span>15 team members</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-white mr-2"></i> | |
| <span>Unlimited channels</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-white mr-2"></i> | |
| <span>Advanced analytics</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-white mr-2"></i> | |
| <span>Basic automation</span> | |
| </li> | |
| <li class="flex items-center opacity-70"> | |
| <i class="fas fa-times text-white mr-2"></i> | |
| <span>Limited API access</span> | |
| </li> | |
| </ul> | |
| <a href="#" class="block text-center bg-white text-blue-600 font-medium px-6 py-3 rounded-lg hover:bg-blue-50 transition">Get Started</a> | |
| </div> | |
| <!-- Enterprise Plan --> | |
| <div class="bg-gray-50 rounded-xl p-8 border border-gray-200"> | |
| <h3 class="text-xl font-semibold mb-4 text-gray-800">Enterprise</h3> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold text-gray-800">$99</span> | |
| <span class="text-gray-600">/month</span> | |
| </div> | |
| <p class="text-gray-600 mb-6">For large organizations with complex communication needs.</p> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Unlimited team members</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Unlimited channels</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Premium analytics</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Advanced automation</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Full API access</span> | |
| </li> | |
| </ul> | |
| <a href="#" class="block text-center bg-blue-600 text-white font-medium px-6 py-3 rounded-lg hover:bg-blue-700 transition">Get Started</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ Section --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16 max-w-3xl mx-auto"> | |
| <span class="text-blue-600 font-semibold">HAVE QUESTIONS?</span> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mt-2 mb-4">Frequently Asked <span class="gradient-text">Questions</span></h2> | |
| <p class="text-gray-600">Find answers to common questions about ConnectHub.</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto"> | |
| <!-- FAQ 1 --> | |
| <div class="bg-white p-6 rounded-xl shadow-sm"> | |
| <h3 class="text-lg font-semibold mb-2 text-gray-800 flex items-center"> | |
| <i class="fas fa-question-circle text-blue-500 mr-3"></i> | |
| What communication channels do you support? | |
| </h3> | |
| <p class="text-gray-600">We support email, live chat, WhatsApp, Telegram, Facebook Messenger, Instagram, and SMS. New channels are added regularly based on customer demand.</p> | |
| </div> | |
| <!-- FAQ 2 --> | |
| <div class="bg-white p-6 rounded-xl shadow-sm"> | |
| <h3 class="text-lg font-semibold mb-2 text-gray-800 flex items-center"> | |
| <i class="fas fa-question-circle text-blue-500 mr-3"></i> | |
| Is there a free trial available? | |
| </h3> | |
| <p class="text-gray-600">Yes! We offer a 14-day free trial with full access to all features. No credit card required to start your trial.</p> | |
| </div> | |
| <!-- FAQ 3 --> | |
| <div class="bg-white p-6 rounded-xl shadow-sm"> | |
| <h3 class="text-lg font-semibold mb-2 text-gray-800 flex items-center"> | |
| <i class="fas fa-question-circle text-blue-500 mr-3"></i> | |
| How secure is my data with ConnectHub? | |
| </h3> | |
| <p class="text-gray-600">We use bank-level encryption, regular security audits, and comply with GDPR and CCPA regulations. Your data security is our top priority.</p> | |
| </div> | |
| <!-- FAQ 4 --> | |
| <div class="bg-white p-6 rounded-xl shadow-sm"> | |
| <h3 class="text-lg font-semibold mb-2 text-gray-800 flex items-center"> | |
| <i class="fas fa-question-circle text-blue-500 mr-3"></i> | |
| Can I upgrade or downgrade my plan later? | |
| </h3> | |
| <p class="text-gray-600">Absolutely! You can change your plan at any time. Changes take effect immediately and we'll prorate the difference.</p> | |
| </div> | |
| <!-- FAQ 5 --> | |
| <div class="bg-white p-6 rounded-xl shadow-sm"> | |
| <h3 class="text-lg font-semibold mb-2 text-gray-800 flex items-center"> | |
| <i class="fas fa-question-circle text-blue-500 mr-3"></i> | |
| Do you offer discounts for nonprofits? | |
| </h3> | |
| <p class="text-gray-600">Yes, we offer special pricing for registered nonprofit organizations. Contact our sales team with proof of nonprofit status to learn more.</p> | |
| </div> | |
| <!-- FAQ 6 --> | |
| <div class="bg-white p-6 rounded-xl shadow-sm"> | |
| <h3 class="text-lg font-semibold mb-2 text-gray-800 flex items-center"> | |
| <i class="fas fa-question-circle text-blue-500 mr-3"></i> | |
| What kind of customer support do you provide? | |
| </h3> | |
| <p class="text-gray-600">All plans include email support with 24-hour response time. Professional and Enterprise plans add live chat and phone support with faster response times.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-16 gradient-bg relative overflow-hidden"> | |
| <div class="absolute inset-0"> | |
| <div class="wave-bg" style="background-image: linear-gradient(to right, transparent, rgba(255,255,255,0.2), transparent);"></div> | |
| </div> | |
| <div class="container mx-auto px-4 relative z-10"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-white mb-6">Ready to Transform Your <span class="gradient-text">Communication</span>?</h2> | |
| <p class="text-blue-100 text-xl mb-8">Join 10,000+ businesses using ConnectHub to deliver exceptional customer experiences.</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 flex items-center justify-center space-x-2"> | |
| <span>Start Free Trial</span> | |
| <i class="fas fa-arrow-right"></i> | |
| </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 flex items-center justify-center space-x-2"> | |
| <i class="fas fa-play"></i> | |
| <span>Watch Demo</span> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white pt-16 pb-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid md:grid-cols-5 gap-8 mb-12"> | |
| <!-- Company Info --> | |
| <div class="md:col-span-2"> | |
| <div class="flex items-center space-x-3 mb-6"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-r from-blue-600 to-purple-600 flex items-center justify-center"> | |
| <span class="text-white font-bold text-xl">C</span> | |
| </div> | |
| <h3 class="text-xl font-bold gradient-text">ConnectHub</h3> | |
| </div> | |
| <p class="text-gray-400 mb-6">The ultimate communication platform for modern businesses to connect with their customers across multiple channels.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 hover:bg-gray-700 flex items-center justify-center transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 hover:bg-gray-700 flex items-center justify-center transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 hover:bg-gray-700 flex items-center justify-center transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 hover:bg-gray-700 flex items-center justify-center transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Quick Links --> | |
| <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 transition">Home</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Features</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Pricing</a></li> | |
| <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">Contact</a></li> | |
| </ul> | |
| </div> | |
| <!-- Resources --> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Resources</h4> | |
| <ul class="space-y-2"> | |
| <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">Help Center</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Tutorials</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">API Docs</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Status</a></li> | |
| </ul> | |
| </div> | |
| <!-- Contact --> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Contact Us</h4> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-map-marker-alt text-blue-400 mt-1 mr-3"></i> | |
| <span class="text-gray-400">123 Business Ave, San Francisco, CA 94107</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-phone text-blue-400 mr-3"></i> | |
| <span class="text-gray-400">+1 (234) 567-890</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-envelope text-blue-400 mr-3"></i> | |
| <span class="text-gray-400">hello@connecthub.com</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 pt-8"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-500 mb-4 md:mb-0">© 2023 ConnectHub. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-500 hover:text-white transition">Privacy Policy</a> | |
| <a href="#" class="text-gray-500 hover:text-white transition">Terms of Service</a> | |
| <a href="#" class="text-gray-500 hover:text-white transition">Cookies</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('menuToggle').addEventListener('click', function() { | |
| document.getElementById('mobileMenu').classList.remove('translate-x-full'); | |
| document.getElementById('mobileMenu').classList.add('translate-x-0'); | |
| }); | |
| document.getElementById('closeMenu').addEventListener('click', function() { | |
| document.getElementById('mobileMenu').classList.remove('translate-x-0'); | |
| document.getElementById('mobileMenu').classList.add('translate-x-full'); | |
| }); | |
| // Chat bubble toggle | |
| document.getElementById('chatBubble').addEventListener('click', function() { | |
| document.getElementById('chatWindow').classList.toggle('active'); | |
| }); | |
| document.getElementById('closeChat').addEventListener('click', function() { | |
| document.getElementById('chatWindow').classList.remove('active'); | |
| }); | |
| // Create floating particles | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const colors = ['rgba(59, 130, 246, 0.6)', 'rgba(139, 92, 246, 0.6)', 'rgba(236, 72, 153, 0.6)']; | |
| for (let i = 0; i < 30; i++) { | |
| const particle = document.createElement('div'); | |
| particle.className = 'particle'; | |
| // Random size between 3px and 8px | |
| const size = Math.random() * 5 + 3; | |
| particle.style.width = `${size}px`; | |
| particle.style.height = `${size}px`; | |
| // Random position | |
| particle.style.left = `${Math.random() * 100}%`; | |
| particle.style.top = `${Math.random() * 100}%`; | |
| // Random color | |
| particle.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; | |
| // Random animation duration between 10s and 20s | |
| const duration = Math.random() * 10 + 10; | |
| particle.style.animation = `float ${duration}s ease-in-out infinite`; | |
| // Random delay | |
| particle.style.animationDelay = `${Math.random() * 5}s`; | |
| document.body.appendChild(particle); | |
| } | |
| }); | |
| // 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' | |
| }); | |
| // Close mobile menu if open | |
| if (!document.getElementById('mobileMenu').classList.contains('translate-x-full')) { | |
| document.getElementById('mobileMenu').classList.add('translate-x-full'); | |
| document.getElementById('mobileMenu').classList.remove('translate-x-0'); | |
| } | |
| } | |
| }); | |
| }); | |
| // Show notification after delay | |
| setTimeout(() => { | |
| const notification = document.createElement('div'); | |
| notification.className = 'fixed top-4 right-4 z-50'; | |
| notification.innerHTML = ` | |
| <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> | |
| `; | |
| document.body.appendChild(notification); | |
| setTimeout(() => { | |
| notification.remove(); | |
| }, 5000); | |
| }, 3000); | |
| </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=SergTsn/my-prototype" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |