| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Lampage Tech Hub - Web & Software Development Solutions</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> |
| | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
| | |
| | body { |
| | font-family: 'Poppins', sans-serif; |
| | scroll-behavior: smooth; |
| | } |
| | |
| | .gradient-bg { |
| | background: linear-gradient(135deg, #6e8efb, #a777e3); |
| | } |
| | |
| | .service-card:hover { |
| | transform: translateY(-10px); |
| | box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| | } |
| | |
| | .nav-link { |
| | position: relative; |
| | } |
| | |
| | .nav-link::after { |
| | content: ''; |
| | position: absolute; |
| | width: 0; |
| | height: 2px; |
| | bottom: -2px; |
| | left: 0; |
| | background-color: #6e8efb; |
| | transition: width 0.3s ease; |
| | } |
| | |
| | .nav-link:hover::after { |
| | width: 100%; |
| | } |
| | |
| | .animate-float { |
| | animation: float 3s ease-in-out infinite; |
| | } |
| | |
| | @keyframes float { |
| | 0% { transform: translateY(0px); } |
| | 50% { transform: translateY(-15px); } |
| | 100% { transform: translateY(0px); } |
| | } |
| | </style> |
| | </head> |
| | <body class="bg-gray-50"> |
| | |
| | <nav class="bg-white shadow-md fixed w-full z-50"> |
| | <div class="container mx-auto px-6 py-3"> |
| | <div class="flex justify-between items-center"> |
| | <div class="flex items-center"> |
| | <a href="#" class="flex items-center"> |
| | <div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white font-bold text-xl">LT</div> |
| | <span class="ml-3 text-xl font-semibold text-gray-800">Lampage Tech Hub</span> |
| | </a> |
| | </div> |
| | |
| | |
| | <div class="md:hidden flex items-center"> |
| | <button class="outline-none mobile-menu-button"> |
| | <svg class="w-6 h-6 text-gray-500" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"> |
| | <path d="M4 6h16M4 12h16M4 18h16"></path> |
| | </svg> |
| | </button> |
| | </div> |
| | |
| | |
| | <div class="hidden md:flex items-center space-x-8"> |
| | <a href="#home" class="nav-link text-gray-700 hover:text-blue-500">Home</a> |
| | <a href="#services" class="nav-link text-gray-700 hover:text-blue-500">Services</a> |
| | <a href="#about" class="nav-link text-gray-700 hover:text-blue-500">About</a> |
| | <a href="#portfolio" class="nav-link text-gray-700 hover:text-blue-500">Portfolio</a> |
| | <a href="#contact" class="nav-link text-gray-700 hover:text-blue-500">Contact</a> |
| | <a href="#contact" class="px-6 py-2 gradient-bg text-white rounded-full hover:bg-blue-600 transition duration-300">Get Started</a> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="hidden mobile-menu"> |
| | <div class="flex flex-col mt-4 space-y-2"> |
| | <a href="#home" class="block px-3 py-2 text-gray-700 hover:bg-gray-100 rounded">Home</a> |
| | <a href="#services" class="block px-3 py-2 text-gray-700 hover:bg-gray-100 rounded">Services</a> |
| | <a href="#about" class="block px-3 py-2 text-gray-700 hover:bg-gray-100 rounded">About</a> |
| | <a href="#portfolio" class="block px-3 py-2 text-gray-700 hover:bg-gray-100 rounded">Portfolio</a> |
| | <a href="#contact" class="block px-3 py-2 text-gray-700 hover:bg-gray-100 rounded">Contact</a> |
| | <a href="#contact" class="block px-3 py-2 text-center gradient-bg text-white rounded-full hover:bg-blue-600 transition duration-300">Get Started</a> |
| | </div> |
| | </div> |
| | </div> |
| | </nav> |
| |
|
| | |
| | <section id="home" class="pt-32 pb-20 px-4 bg-gradient-to-r from-blue-50 to-purple-50"> |
| | <div class="container mx-auto flex flex-col md:flex-row items-center"> |
| | <div class="md:w-1/2 mb-10 md:mb-0"> |
| | <h1 class="text-4xl md:text-5xl font-bold text-gray-800 leading-tight mb-4"> |
| | Transforming Ideas Into <span class="text-blue-600">Digital Reality</span> |
| | </h1> |
| | <p class="text-lg text-gray-600 mb-8"> |
| | Lampage Tech Hub provides cutting-edge web development, software solutions, and virtual assistance services to help your business thrive in the digital world. |
| | </p> |
| | <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
| | <a href="#contact" class="px-8 py-3 gradient-bg text-white rounded-full text-center font-medium hover:shadow-lg transition duration-300"> |
| | Get Started |
| | </a> |
| | <a href="#services" class="px-8 py-3 border-2 border-blue-500 text-blue-500 rounded-full text-center font-medium hover:bg-blue-50 transition duration-300"> |
| | Our Services |
| | </a> |
| | </div> |
| | <div class="mt-8 flex items-center space-x-6"> |
| | <div class="flex items-center"> |
| | <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" alt="client"> |
| | <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-10 h-10 rounded-full border-2 border-white" alt="client"> |
| | <img src="https://randomuser.me/api/portraits/women/45.jpg" class="w-10 h-10 rounded-full border-2 border-white" alt="client"> |
| | </div> |
| | <span class="ml-3 text-gray-600">500+ Happy Clients</span> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="md:w-1/2 flex justify-center"> |
| | <img src="https://cdn-icons-png.flaticon.com/512/2283/2283188.png" alt="Hero Illustration" class="w-full max-w-md animate-float"> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-12 bg-white"> |
| | <div class="container mx-auto px-4"> |
| | <h2 class="text-center text-gray-500 mb-12">Trusted by innovative companies worldwide</h2> |
| | <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16"> |
| | <img src="https://via.placeholder.com/150x60?text=Company+1" alt="Client Logo" class="h-8 opacity-60 hover:opacity-100 transition duration-300"> |
| | <img src="https://via.placeholder.com/150x60?text=Company+2" alt="Client Logo" class="h-8 opacity-60 hover:opacity-100 transition duration-300"> |
| | <img src="https://via.placeholder.com/150x60?text=Company+3" alt="Client Logo" class="h-8 opacity-60 hover:opacity-100 transition duration-300"> |
| | <img src="https://via.placeholder.com/150x60?text=Company+4" alt="Client Logo" class="h-8 opacity-60 hover:opacity-100 transition duration-300"> |
| | <img src="https://via.placeholder.com/150x60?text=Company+5" alt="Client Logo" class="h-8 opacity-60 hover:opacity-100 transition duration-300"> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section id="services" class="py-20 bg-gray-50"> |
| | <div class="container mx-auto px-4"> |
| | <div class="text-center mb-16"> |
| | <span class="text-blue-500 font-semibold">OUR SERVICES</span> |
| | <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mt-2 mb-4">What We Offer</h2> |
| | <p class="text-gray-600 max-w-2xl mx-auto"> |
| | We provide comprehensive digital solutions tailored to your business needs. Our expertise spans across various domains to ensure your digital success. |
| | </p> |
| | </div> |
| | |
| | <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| | |
| | <div class="bg-white rounded-xl shadow-md overflow-hidden service-card transition duration-300 p-6"> |
| | <div class="w-14 h-14 gradient-bg rounded-lg flex items-center justify-center text-white mb-4"> |
| | <i class="fas fa-code text-2xl"></i> |
| | </div> |
| | <h3 class="text-xl font-semibold text-gray-800 mb-3">Web Development</h3> |
| | <p class="text-gray-600 mb-4"> |
| | Custom, responsive websites built with modern technologies to ensure optimal performance and user experience. |
| | </p> |
| | <ul class="space-y-2 text-gray-600"> |
| | <li class="flex items-center"> |
| | <i class="fas fa-check-circle text-blue-500 mr-2"></i> |
| | E-commerce Solutions |
| | </li> |
| | <li class="flex items-center"> |
| | <i class="fas fa-check-circle text-blue-500 mr-2"></i> |
| | CMS Development |
| | </li> |
| | <li class="flex items-center"> |
| | <i class="fas fa-check-circle text-blue-500 mr-2"></i> |
| | Web Applications |
| | </li> |
| | </ul> |
| | </div> |
| | |
| | |
| | <div class="bg-white rounded-xl shadow-md overflow-hidden service-card transition duration-300 p-6"> |
| | <div class="w-14 h-14 gradient-bg rounded-lg flex items-center justify-center text-white mb-4"> |
| | <i class="fas fa-laptop-code text-2xl"></i> |
| | </div> |
| | <h3 class="text-xl font-semibold text-gray-800 mb-3">Software Development</h3> |
| | <p class="text-gray-600 mb-4"> |
| | Robust software solutions designed to streamline your business operations and enhance productivity. |
| | </p> |
| | <ul class="space-y-2 text-gray-600"> |
| | <li class="flex items-center"> |
| | <i class="fas fa-check-circle text-blue-500 mr-2"></i> |
| | Custom Software |
| | </li> |
| | <li class="flex items-center"> |
| | <i class="fas fa-check-circle text-blue-500 mr-2"></i> |
| | Enterprise Solutions |
| | </li> |
| | <li class="flex items-center"> |
| | <i class="fas fa-check-circle text-blue-500 mr-2"></i> |
| | API Integration |
| | </li> |
| | </ul> |
| | </div> |
| | |
| | |
| | <div class="bg-white rounded-xl shadow-md overflow-hidden service-card transition duration-300 p-6"> |
| | <div class="w-14 h-14 gradient-bg rounded-lg flex items-center justify-center text-white mb-4"> |
| | <i class="fas fa-headset text-2xl"></i> |
| | </div> |
| | <h3 class="text-xl font-semibold text-gray-800 mb-3">Virtual Assistance</h3> |
| | <p class="text-gray-600 mb-4"> |
| | Professional virtual support to handle your administrative, technical, or creative tasks efficiently. |
| | </p> |
| | <ul class="space-y-2 text-gray-600"> |
| | <li class="flex items-center"> |
| | <i class="fas fa-check-circle text-blue-500 mr-2"></i> |
| | Administrative Support |
| | </li> |
| | <li class="flex items-center"> |
| | <i class="fas fa-check-circle text-blue-500 mr-2"></i> |
| | Customer Support |
| | </li> |
| | <li class="flex items-center"> |
| | <i class="fas fa-check-circle text-blue-500 mr-2"></i> |
| | Social Media Management |
| | </li> |
| | </ul> |
| | </div> |
| | |
| | |
| | <div class="bg-white rounded-xl shadow-md overflow-hidden service-card transition duration-300 p-6"> |
| | <div class="w-14 h-14 gradient-bg rounded-lg flex items-center justify-center text-white mb-4"> |
| | <i class="fas fa-mobile-alt text-2xl"></i> |
| | </div> |
| | <h3 class="text-xl font-semibold text-gray-800 mb-3">Mobile App Development</h3> |
| | <p class="text-gray-600 mb-4"> |
| | Cross-platform mobile applications that deliver seamless user experiences across all devices. |
| | </p> |
| | <ul class="space-y-2 text-gray-600"> |
| | <li class="flex items-center"> |
| | <i class="fas fa-check-circle text-blue-500 mr-2"></i> |
| | iOS & Android Apps |
| | </li> |
| | <li class="flex items-center"> |
| | <i class="fas fa-check-circle text-blue-500 mr-2"></i> |
| | Hybrid Applications |
| | </li> |
| | <li class="flex items-center"> |
| | <i class="fas fa-check-circle text-blue-500 mr-2"></i> |
| | Progressive Web Apps |
| | </li> |
| | </ul> |
| | </div> |
| | |
| | |
| | <div class="bg-white rounded-xl shadow-md overflow-hidden service-card transition duration-300 p-6"> |
| | <div class="w-14 h-14 gradient-bg rounded-lg flex items-center justify-center text-white mb-4"> |
| | <i class="fas fa-search-dollar text-2xl"></i> |
| | </div> |
| | <h3 class="text-xl font-semibold text-gray-800 mb-3">Digital Marketing</h3> |
| | <p class="text-gray-600 mb-4"> |
| | Strategic marketing solutions to boost your online presence and drive targeted traffic to your business. |
| | </p> |
| | <ul class="space-y-2 text-gray-600"> |
| | <li class="flex items-center"> |
| | <i class="fas fa-check-circle text-blue-500 mr-2"></i> |
| | SEO Optimization |
| | </li> |
| | <li class="flex items-center"> |
| | <i class="fas fa-check-circle text-blue-500 mr-2"></i> |
| | Content Marketing |
| | </li> |
| | <li class="flex items-center"> |
| | <i class="fas fa-check-circle text-blue-500 mr-2"></i> |
| | PPC Campaigns |
| | </li> |
| | </ul> |
| | </div> |
| | |
| | |
| | <div class="bg-white rounded-xl shadow-md overflow-hidden service-card transition duration-300 p-6"> |
| | <div class="w-14 h-14 gradient-bg rounded-lg flex items-center justify-center text-white mb-4"> |
| | <i class="fas fa-cloud text-2xl"></i> |
| | </div> |
| | <h3 class="text-xl font-semibold text-gray-800 mb-3">Cloud Solutions</h3> |
| | <p class="text-gray-600 mb-4"> |
| | Secure and scalable cloud infrastructure to support your business growth and digital transformation. |
| | </p> |
| | <ul class="space-y-2 text-gray-600"> |
| | <li class="flex items-center"> |
| | <i class="fas fa-check-circle text-blue-500 mr-2"></i> |
| | Cloud Migration |
| | </li> |
| | <li class="flex items-center"> |
| | <i class="fas fa-check-circle text-blue-500 mr-2"></i> |
| | Server Management |
| | </li> |
| | <li class="flex items-center"> |
| | <i class="fas fa-check-circle text-blue-500 mr-2"></i> |
| | DevOps Services |
| | </li> |
| | </ul> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section id="about" class="py-20 bg-white"> |
| | <div class="container mx-auto px-4"> |
| | <div class="flex flex-col lg:flex-row items-center"> |
| | <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10"> |
| | <img src="https://cdn-icons-png.flaticon.com/512/3242/3242257.png" alt="About Us" class="w-full max-w-md mx-auto"> |
| | </div> |
| | <div class="lg:w-1/2"> |
| | <span class="text-blue-500 font-semibold">ABOUT US</span> |
| | <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mt-2 mb-6">Innovative Tech Solutions Provider</h2> |
| | <p class="text-gray-600 mb-6"> |
| | Lampage Tech Hub was founded with a vision to bridge the gap between businesses and technology. Our team of passionate professionals combines technical expertise with creative thinking to deliver exceptional digital solutions. |
| | </p> |
| | |
| | <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> |
| | <div class="flex items-start"> |
| | <div class="w-10 h-10 gradient-bg rounded-full flex items-center justify-center text-white mr-4 flex-shrink-0"> |
| | <i class="fas fa-lightbulb"></i> |
| | </div> |
| | <div> |
| | <h4 class="font-semibold text-gray-800 mb-1">Innovative Approach</h4> |
| | <p class="text-gray-600 text-sm">We stay ahead of technology trends to provide cutting-edge solutions.</p> |
| | </div> |
| | </div> |
| | <div class="flex items-start"> |
| | <div class="w-10 h-10 gradient-bg rounded-full flex items-center justify-center text-white mr-4 flex-shrink-0"> |
| | <i class="fas fa-users"></i> |
| | </div> |
| | <div> |
| | <h4 class="font-semibold text-gray-800 mb-1">Client-Centric</h4> |
| | <p class="text-gray-600 text-sm">Your success is our priority. We tailor solutions to your specific needs.</p> |
| | </div> |
| | </div> |
| | <div class="flex items-start"> |
| | <div class="w-10 h-10 gradient-bg rounded-full flex items-center justify-center text-white mr-4 flex-shrink-0"> |
| | <i class="fas fa-shield-alt"></i> |
| | </div> |
| | <div> |
| | <h4 class="font-semibold text-gray-800 mb-1">Quality Assurance</h4> |
| | <p class="text-gray-600 text-sm">Rigorous testing ensures flawless performance and security.</p> |
| | </div> |
| | </div> |
| | <div class="flex items-start"> |
| | <div class="w-10 h-10 gradient-bg rounded-full flex items-center justify-center text-white mr-4 flex-shrink-0"> |
| | <i class="fas fa-clock"></i> |
| | </div> |
| | <div> |
| | <h4 class="font-semibold text-gray-800 mb-1">Timely Delivery</h4> |
| | <p class="text-gray-600 text-sm">We respect deadlines and deliver projects on time, every time.</p> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="flex items-center"> |
| | <div class="mr-6"> |
| | <span class="block text-3xl font-bold text-blue-600">500+</span> |
| | <span class="text-gray-600">Projects Completed</span> |
| | </div> |
| | <div class="mr-6"> |
| | <span class="block text-3xl font-bold text-blue-600">100%</span> |
| | <span class="text-gray-600">Client Satisfaction</span> |
| | </div> |
| | <div> |
| | <span class="block text-3xl font-bold text-blue-600">50+</span> |
| | <span class="text-gray-600">Expert Team</span> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section id="portfolio" class="py-20 bg-gray-50"> |
| | <div class="container mx-auto px-4"> |
| | <div class="text-center mb-16"> |
| | <span class="text-blue-500 font-semibold">OUR WORK</span> |
| | <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mt-2 mb-4">Featured Projects</h2> |
| | <p class="text-gray-600 max-w-2xl mx-auto"> |
| | Explore some of our recent projects that showcase our expertise and commitment to excellence. |
| | </p> |
| | </div> |
| | |
| | <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| | |
| | <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition duration-300"> |
| | <div class="h-48 bg-gradient-to-r from-blue-100 to-purple-100 flex items-center justify-center"> |
| | <i class="fas fa-shopping-cart text-6xl text-blue-500 opacity-30"></i> |
| | </div> |
| | <div class="p-6"> |
| | <span class="inline-block px-3 py-1 text-xs font-semibold gradient-bg text-white rounded-full mb-2">E-commerce</span> |
| | <h3 class="text-xl font-semibold text-gray-800 mb-2">ShopNest Platform</h3> |
| | <p class="text-gray-600 mb-4"> |
| | A comprehensive e-commerce solution with advanced inventory management and payment integration. |
| | </p> |
| | <a href="#" class="text-blue-500 font-medium hover:text-blue-600 transition duration-300 flex items-center"> |
| | View Case Study <i class="fas fa-arrow-right ml-2"></i> |
| | </a> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition duration-300"> |
| | <div class="h-48 bg-gradient-to-r from-green-100 to-teal-100 flex items-center justify-center"> |
| | <i class="fas fa-mobile-alt text-6xl text-green-500 opacity-30"></i> |
| | </div> |
| | <div class="p-6"> |
| | <span class="inline-block px-3 py-1 text-xs font-semibold gradient-bg text-white rounded-full mb-2">Mobile App</span> |
| | <h3 class="text-xl font-semibold text-gray-800 mb-2">HealthTrack Mobile</h3> |
| | <p class="text-gray-600 mb-4"> |
| | A health monitoring application with real-time analytics and doctor-patient communication features. |
| | </p> |
| | <a href="#" class="text-blue-500 font-medium hover:text-blue-600 transition duration-300 flex items-center"> |
| | View Case Study <i class="fas fa-arrow-right ml-2"></i> |
| | </a> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition duration-300"> |
| | <div class="h-48 bg-gradient-to-r from-purple-100 to-pink-100 flex items-center justify-center"> |
| | <i class="fas fa-chart-line text-6xl text-purple-500 opacity-30"></i> |
| | </div> |
| | <div class="p-6"> |
| | <span class="inline-block px-3 py-1 text-xs font-semibold gradient-bg text-white rounded-full mb-2">SaaS</span> |
| | <h3 class="text-xl font-semibold text-gray-800 mb-2">AnalyticsPro Dashboard</h3> |
| | <p class="text-gray-600 mb-4"> |
| | Business intelligence platform with customizable dashboards and predictive analytics capabilities. |
| | </p> |
| | <a href="#" class="text-blue-500 font-medium hover:text-blue-600 transition duration-300 flex items-center"> |
| | View Case Study <i class="fas fa-arrow-right ml-2"></i> |
| | </a> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="text-center mt-12"> |
| | <a href="#" class="px-8 py-3 border-2 border-blue-500 text-blue-500 rounded-full font-medium hover:bg-blue-50 transition duration-300 inline-flex items-center"> |
| | View All Projects <i class="fas fa-arrow-right ml-2"></i> |
| | </a> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-20 bg-white"> |
| | <div class="container mx-auto px-4"> |
| | <div class="text-center mb-16"> |
| | <span class="text-blue-500 font-semibold">TESTIMONIALS</span> |
| | <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mt-2 mb-4">What Our Clients Say</h2> |
| | <p class="text-gray-600 max-w-2xl mx-auto"> |
| | Don't just take our word for it. Here's what our clients have to say about working with us. |
| | </p> |
| | </div> |
| | |
| | <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| | |
| | <div class="bg-gray-50 p-8 rounded-xl"> |
| | <div class="flex items-center mb-4"> |
| | <div class="flex -space-x-2"> |
| | <img src="https://randomuser.me/api/portraits/women/32.jpg" class="w-12 h-12 rounded-full border-2 border-white" alt="client"> |
| | </div> |
| | <div class="ml-4"> |
| | <h4 class="font-semibold text-gray-800">Sarah Johnson</h4> |
| | <span class="text-gray-600 text-sm">CEO, TechSolutions Inc.</span> |
| | </div> |
| | </div> |
| | <p class="text-gray-600 mb-4"> |
| | "Lampage Tech Hub transformed our outdated website into a modern, user-friendly platform that has significantly increased our online conversions. Their team was professional, responsive, and delivered beyond our expectations." |
| | </p> |
| | <div class="flex text-yellow-400"> |
| | <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> |
| | </div> |
| | |
| | |
| | <div class="bg-gray-50 p-8 rounded-xl"> |
| | <div class="flex items-center mb-4"> |
| | <div class="flex -space-x-2"> |
| | <img src="https://randomuser.me/api/portraits/men/54.jpg" class="w-12 h-12 rounded-full border-2 border-white" alt="client"> |
| | </div> |
| | <div class="ml-4"> |
| | <h4 class="font-semibold text-gray-800">Michael Rodriguez</h4> |
| | <span class="text-gray-600 text-sm">Director, Global Retail</span> |
| | </div> |
| | </div> |
| | <p class="text-gray-600 mb-4"> |
| | "The custom inventory management system developed by Lampage has streamlined our operations like never before. Their attention to detail and understanding of our business needs was impressive." |
| | </p> |
| | <div class="flex text-yellow-400"> |
| | <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> |
| | </div> |
| | |
| | |
| | <div class="bg-gray-50 p-8 rounded-xl"> |
| | <div class="flex items-center mb-4"> |
| | <div class="flex -space-x-2"> |
| | <img src="https://randomuser.me/api/portraits/women/68.jpg" class="w-12 h-12 rounded-full border-2 border-white" alt="client"> |
| | </div> |
| | <div class="ml-4"> |
| | <h4 class="font-semibold text-gray-800">Emily Chen</h4> |
| | <span class="text-gray-600 text-sm">Founder, StartupX</span> |
| | </div> |
| | </div> |
| | <p class="text-gray-600 mb-4"> |
| | "As a startup, we needed a tech partner who could grow with us. Lampage Tech Hub has been instrumental in building our MVP and scaling our platform. Their virtual assistant services have also been a game-changer for our small team." |
| | </p> |
| | <div class="flex text-yellow-400"> |
| | <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-half-alt"></i> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-20 gradient-bg"> |
| | <div class="container mx-auto px-4 text-center"> |
| | <h2 class="text-3xl md:text-4xl font-bold text-white mb-6">Ready to Transform Your Business?</h2> |
| | <p class="text-white opacity-90 max-w-2xl mx-auto mb-8"> |
| | Let's discuss how we can help you achieve your digital goals. Contact us today for a free consultation. |
| | </p> |
| | <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> |
| | <a href="#contact" class="px-8 py-3 bg-white text-blue-600 rounded-full font-medium hover:bg-gray-100 transition duration-300"> |
| | Get Started |
| | </a> |
| | <a href="tel:+1234567890" class="px-8 py-3 border-2 border-white text-white rounded-full font-medium hover:bg-white hover:bg-opacity-10 transition duration-300"> |
| | <i class="fas fa-phone-alt mr-2"></i> Call Us Now |
| | </a> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section id="contact" class="py-20 bg-white"> |
| | <div class="container mx-auto px-4"> |
| | <div class="flex flex-col lg:flex-row"> |
| | <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10"> |
| | <span class="text-blue-500 font-semibold">CONTACT US</span> |
| | <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mt-2 mb-6">Get In Touch</h2> |
| | <p class="text-gray-600 mb-8"> |
| | Have a project in mind or want to learn more about our services? Fill out the form and our team will get back to you within 24 hours. |
| | </p> |
| | |
| | <div class="space-y-6"> |
| | <div class="flex items-start"> |
| | <div class="w-10 h-10 gradient-bg rounded-full flex items-center justify-center text-white mr-4 flex-shrink-0"> |
| | <i class="fas fa-map-marker-alt"></i> |
| | </div> |
| | <div> |
| | <h4 class="font-semibold text-gray-800 mb-1">Our Location</h4> |
| | <p class="text-gray-600">123 Tech Street, Digital City, Abuja</p> |
| | </div> |
| | </div> |
| | <div class="flex items-start"> |
| | <div class="w-10 h-10 gradient-bg rounded-full flex items-center justify-center text-white mr-4 flex-shrink-0"> |
| | <i class="fas fa-envelope"></i> |
| | </div> |
| | <div> |
| | <h4 class="font-semibold text-gray-800 mb-1">Email Us</h4> |
| | <p class="text-gray-600">lampagetechhub91@gmail.com</p> |
| | </div> |
| | </div> |
| | <div class="flex items-start"> |
| | <div class="w-10 h-10 gradient-bg rounded-full flex items-center justify-center text-white mr-4 flex-shrink-0"> |
| | <i class="fas fa-phone-alt"></i> |
| | </div> |
| | <div> |
| | <h4 class="font-semibold text-gray-800 mb-1">Call Us</h4> |
| | <p class="text-gray-600">+234-912-546-7491</p> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="mt-8"> |
| | <h4 class="font-semibold text-gray-800 mb-4">Follow Us</h4> |
| | <div class="flex space-x-4"> |
| | <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-blue-500 hover:text-white transition duration-300"> |
| | <i class="fab fa-facebook-f"></i> |
| | </a> |
| | <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-blue-400 hover:text-white transition duration-300"> |
| | <i class="fab fa-twitter"></i> |
| | </a> |
| | <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-gradient-to-r from-purple-500 to-pink-500 hover:text-white transition duration-300"> |
| | <i class="fab fa-instagram"></i> |
| | </a> |
| | <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-blue-700 hover:text-white transition duration-300"> |
| | <i class="fab fa-linkedin-in"></i> |
| | </a> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="lg:w-1/2"> |
| | <form class="bg-gray-50 p-8 rounded-xl"> |
| | <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> |
| | <div> |
| | <label for="name" class="block text-gray-700 font-medium mb-2">Full Name</label> |
| | <input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="John Doe"> |
| | </div> |
| | <div> |
| | <label for="email" class="block text-gray-700 font-medium mb-2">Email Address</label> |
| | <input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="john@example.com"> |
| | </div> |
| | </div> |
| | <div class="mb-6"> |
| | <label for="subject" class="block text-gray-700 font-medium mb-2">Subject</label> |
| | <input type="text" id="subject" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="How can we help you?"> |
| | </div> |
| | <div class="mb-6"> |
| | <label for="message" class="block text-gray-700 font-medium mb-2">Your Message</label> |
| | <textarea id="message" rows="5" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Tell us about your project..."></textarea> |
| | </div> |
| | <button type="submit" class="w-full gradient-bg text-white py-3 px-6 rounded-lg font-medium hover:shadow-lg transition duration-300"> |
| | Send Message |
| | </button> |
| | </form> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <footer class="bg-gray-900 text-white pt-16 pb-8"> |
| | <div class="container mx-auto px-4"> |
| | <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12"> |
| | <div> |
| | <a href="#" class="flex items-center mb-6"> |
| | <div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white font-bold text-xl">LT</div> |
| | <span class="ml-3 text-xl font-semibold">Lampage Tech Hub</span> |
| | </a> |
| | <p class="text-gray-400 mb-4"> |
| | Transforming businesses through innovative technology solutions and digital expertise. |
| | </p> |
| | <div class="flex space-x-4"> |
| | <a href="#" class="text-gray-400 hover:text-white transition duration-300"> |
| | <i class="fab fa-facebook-f"></i> |
| | </a> |
| | <a href="#" class="text-gray-400 hover:text-white transition duration-300"> |
| | <i class="fab fa-twitter"></i> |
| | </a> |
| | <a href="#" class="text-gray-400 hover:text-white transition duration-300"> |
| | <i class="fab fa-instagram"></i> |
| | </a> |
| | <a href="#" class="text-gray-400 hover:text-white transition duration-300"> |
| | <i class="fab fa-linkedin-in"></i> |
| | </a> |
| | </div> |
| | </div> |
| | |
| | <div> |
| | <h3 class="text-lg font-semibold mb-6">Services</h3> |
| | <ul class="space-y-3"> |
| | <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Web Development</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Software Development</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Virtual Assistance</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Mobile App Development</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Digital Marketing</a></li> |
| | </ul> |
| | </div> |
| | |
| | <div> |
| | <h3 class="text-lg font-semibold mb-6">Company</h3> |
| | <ul class="space-y-3"> |
| | <li><a href="#about" class="text-gray-400 hover:text-white transition duration-300">About Us</a></li> |
| | <li><a href="#portfolio" class="text-gray-400 hover:text-white transition duration-300">Portfolio</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Careers</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Blog</a></li> |
| | <li><a href="#contact" class="text-gray-400 hover:text-white transition duration-300">Contact</a></li> |
| | </ul> |
| | </div> |
| | |
| | <div> |
| | <h3 class="text-lg font-semibold mb-6">Newsletter</h3> |
| | <p class="text-gray-400 mb-4"> |
| | Subscribe to our newsletter for the latest updates and tech insights. |
| | </p> |
| | <form class="flex"> |
| | <input type="email" placeholder="Your email" class="px-4 py-3 w-full rounded-l-lg focus:outline-none text-gray-900"> |
| | <button type="submit" class="gradient-bg px-4 rounded-r-lg"> |
| | <i class="fas fa-paper-plane"></i> |
| | </button> |
| | </form> |
| | </div> |
| | </div> |
| | |
| | <div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center"> |
| | <p class="text-gray-400 mb-4 md:mb-0"> |
| | © 2025 Lampage Tech Hub. All rights reserved. |
| | </p> |
| | <div class="flex space-x-6"> |
| | <a href="#" class="text-gray-400 hover:text-white transition duration-300">Privacy Policy</a> |
| | <a href="#" class="text-gray-400 hover:text-white transition duration-300">Terms of Service</a> |
| | <a href="#" class="text-gray-400 hover:text-white transition duration-300">Sitemap</a> |
| | </div> |
| | </div> |
| | </div> |
| | </footer> |
| |
|
| | |
| | <button id="backToTop" class="fixed bottom-8 right-8 w-12 h-12 gradient-bg rounded-full shadow-lg text-white hidden"> |
| | <i class="fas fa-arrow-up"></i> |
| | </button> |
| |
|
| | <script> |
| | |
| | const mobileMenuButton = document.querySelector('.mobile-menu-button'); |
| | const mobileMenu = document.querySelector('.mobile-menu'); |
| | |
| | mobileMenuButton.addEventListener('click', () => { |
| | mobileMenu.classList.toggle('hidden'); |
| | }); |
| | |
| | |
| | const backToTopButton = document.getElementById('backToTop'); |
| | |
| | window.addEventListener('scroll', () => { |
| | if (window.pageYOffset > 300) { |
| | backToTopButton.classList.remove('hidden'); |
| | } else { |
| | backToTopButton.classList.add('hidden'); |
| | } |
| | }); |
| | |
| | backToTopButton.addEventListener('click', () => { |
| | window.scrollTo({ top: 0, behavior: 'smooth' }); |
| | }); |
| | |
| | |
| | document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| | anchor.addEventListener('click', function(e) { |
| | e.preventDefault(); |
| | |
| | const targetId = this.getAttribute('href'); |
| | const targetElement = document.querySelector(targetId); |
| | |
| | if (targetElement) { |
| | window.scrollTo({ |
| | top: targetElement.offsetTop - 80, |
| | behavior: 'smooth' |
| | }); |
| | |
| | |
| | if (!mobileMenu.classList.contains('hidden')) { |
| | mobileMenu.classList.add('hidden'); |
| | } |
| | } |
| | }); |
| | }); |
| | |
| | |
| | const contactForm = document.querySelector('form'); |
| | if (contactForm) { |
| | contactForm.addEventListener('submit', function(e) { |
| | e.preventDefault(); |
| | |
| | |
| | const name = document.getElementById('name').value; |
| | const email = document.getElementById('email').value; |
| | const subject = document.getElementById('subject').value; |
| | const message = document.getElementById('message').value; |
| | |
| | |
| | console.log({ name, email, subject, message }); |
| | |
| | |
| | alert('Thank you for your message! We will get back to you soon.'); |
| | |
| | |
| | contactForm.reset(); |
| | }); |
| | } |
| | </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=Kingslamb/lampage" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| | </html> |
