| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Maisha Adaptive Mobility Care | Prosthetics & Orthotics 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; |
| } |
| |
| .hero-gradient { |
| background: linear-gradient(135deg, rgba(25, 130, 196, 0.9) 0%, rgba(0, 179, 159, 0.9) 100%); |
| } |
| |
| .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); |
| } |
| |
| .testimonial-card { |
| transition: all 0.3s ease; |
| } |
| |
| .testimonial-card:hover { |
| transform: scale(1.03); |
| } |
| |
| .nav-link { |
| position: relative; |
| } |
| |
| .nav-link::after { |
| content: ''; |
| position: absolute; |
| width: 0; |
| height: 2px; |
| bottom: -2px; |
| left: 0; |
| background-color: #3b82f6; |
| transition: width 0.3s ease; |
| } |
| |
| .nav-link:hover::after { |
| width: 100%; |
| } |
| |
| .mobile-menu { |
| max-height: 0; |
| overflow: hidden; |
| transition: max-height 0.5s ease-out; |
| } |
| |
| .mobile-menu.open { |
| max-height: 500px; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50"> |
| |
| <header class="bg-white shadow-md sticky top-0 z-50"> |
| <div class="container mx-auto px-4 py-3"> |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center"> |
| <div class="mr-2"> |
| <i class="fas fa-wheelchair text-blue-500 text-2xl"></i> |
| </div> |
| <a href="#" class="text-2xl font-bold text-gray-800"> |
| <span class="text-blue-600">Maisha</span> Adaptive Mobility Care |
| </a> |
| </div> |
| |
| <nav class="hidden md:flex space-x-8"> |
| <a href="#home" class="nav-link text-gray-700 hover:text-blue-600 font-medium">Home</a> |
| <a href="#services" class="nav-link text-gray-700 hover:text-blue-600 font-medium">Services</a> |
| <a href="#about" class="nav-link text-gray-700 hover:text-blue-600 font-medium">About Us</a> |
| <a href="#testimonials" class="nav-link text-gray-700 hover:text-blue-600 font-medium">Testimonials</a> |
| <a href="#contact" class="nav-link text-gray-700 hover:text-blue-600 font-medium">Contact</a> |
| </nav> |
| |
| <div class="md:hidden"> |
| <button id="menu-toggle" class="text-gray-700 focus:outline-none"> |
| <i class="fas fa-bars text-2xl"></i> |
| </button> |
| </div> |
| </div> |
| |
| |
| <div id="mobile-menu" class="mobile-menu md:hidden bg-white"> |
| <div class="px-2 pt-2 pb-4 space-y-2"> |
| <a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-100">Home</a> |
| <a href="#services" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-100">Services</a> |
| <a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-100">About Us</a> |
| <a href="#testimonials" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-100">Testimonials</a> |
| <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-100">Contact</a> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <section id="home" class="hero-gradient text-white py-20"> |
| <div class="container mx-auto px-4 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 mb-6">Restoring Mobility, Renewing Life</h1> |
| <p class="text-xl mb-8">Custom prosthetic and orthotic solutions designed to help you regain independence and improve your quality of life.</p> |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
| <a href="#contact" class="bg-white text-blue-600 hover:bg-gray-100 font-bold py-3 px-6 rounded-lg text-center transition duration-300"> |
| <i class="fas fa-phone-alt mr-2"></i> Book Consultation |
| </a> |
| <a href="#services" class="bg-transparent border-2 border-white hover:bg-white hover:text-blue-600 font-bold py-3 px-6 rounded-lg text-center transition duration-300"> |
| <i class="fas fa-info-circle mr-2"></i> Learn More |
| </a> |
| </div> |
| </div> |
| <div class="md:w-1/2 flex justify-center"> |
| <img src="https://images.unsplash.com/photo-1571019613454-1cb2f5b44fcc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
| alt="Prosthetic leg fitting" |
| class="rounded-lg shadow-2xl max-w-full h-auto"> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="services" class="py-20 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Our Specialized Services</h2> |
| <div class="w-20 h-1 bg-blue-500 mx-auto mb-4"></div> |
| <p class="text-gray-600 max-w-3xl mx-auto">Comprehensive prosthetic and orthotic solutions tailored to your unique needs and lifestyle.</p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="service-card bg-gray-50 rounded-lg overflow-hidden shadow-md p-6 transition duration-300"> |
| <div class="text-blue-500 mb-4"> |
| <i class="fas fa-procedures text-4xl"></i> |
| </div> |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Prosthetic Limbs</h3> |
| <p class="text-gray-600 mb-4">Custom-designed artificial limbs that restore function and comfort for amputees of all ages.</p> |
| <ul class="space-y-2 text-gray-600"> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> |
| <span>Upper & lower extremity prosthetics</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> |
| <span>Microprocessor-controlled knees</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> |
| <span>Cosmetic restoration</span> |
| </li> |
| </ul> |
| </div> |
| |
| |
| <div class="service-card bg-gray-50 rounded-lg overflow-hidden shadow-md p-6 transition duration-300"> |
| <div class="text-blue-500 mb-4"> |
| <i class="fas fa-bone text-4xl"></i> |
| </div> |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Orthotic Devices</h3> |
| <p class="text-gray-600 mb-4">Custom braces and supports to correct or accommodate musculoskeletal conditions.</p> |
| <ul class="space-y-2 text-gray-600"> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> |
| <span>Spinal orthotics (TLSO, LSO)</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> |
| <span>Ankle-foot orthoses (AFOs)</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> |
| <span>Knee-ankle-foot orthoses (KAFOs)</span> |
| </li> |
| </ul> |
| </div> |
| |
| |
| <div class="service-card bg-gray-50 rounded-lg overflow-hidden shadow-md p-6 transition duration-300"> |
| <div class="text-blue-500 mb-4"> |
| <i class="fas fa-child text-4xl"></i> |
| </div> |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Pediatric Care</h3> |
| <p class="text-gray-600 mb-4">Specialized solutions for children with congenital or acquired mobility challenges.</p> |
| <ul class="space-y-2 text-gray-600"> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> |
| <span>Cerebral palsy orthotics</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> |
| <span>Spina bifida solutions</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> |
| <span>Growing-child prosthetics</span> |
| </li> |
| </ul> |
| </div> |
| |
| |
| <div class="service-card bg-gray-50 rounded-lg overflow-hidden shadow-md p-6 transition duration-300"> |
| <div class="text-blue-500 mb-4"> |
| <i class="fas fa-heartbeat text-4xl"></i> |
| </div> |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Diabetic Foot Care</h3> |
| <p class="text-gray-600 mb-4">Preventative and therapeutic solutions for diabetic foot complications.</p> |
| <ul class="space-y-2 text-gray-600"> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> |
| <span>Custom diabetic footwear</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> |
| <span>Pressure-relieving orthotics</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> |
| <span>Charcot foot management</span> |
| </li> |
| </ul> |
| </div> |
| |
| |
| <div class="service-card bg-gray-50 rounded-lg overflow-hidden shadow-md p-6 transition duration-300"> |
| <div class="text-blue-500 mb-4"> |
| <i class="fas fa-recycle text-4xl"></i> |
| </div> |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Repair & Maintenance</h3> |
| <p class="text-gray-600 mb-4">Keep your devices functioning optimally with our expert repair services.</p> |
| <ul class="space-y-2 text-gray-600"> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> |
| <span>Prosthetic adjustments</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> |
| <span>Component replacement</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> |
| <span>Cosmetic repairs</span> |
| </li> |
| </ul> |
| </div> |
| |
| |
| <div class="service-card bg-gray-50 rounded-lg overflow-hidden shadow-md p-6 transition duration-300"> |
| <div class="text-blue-500 mb-4"> |
| <i class="fas fa-hands-helping text-4xl"></i> |
| </div> |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Rehabilitation Support</h3> |
| <p class="text-gray-600 mb-4">Comprehensive therapy and training to maximize your device's potential.</p> |
| <ul class="space-y-2 text-gray-600"> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> |
| <span>Gait training</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> |
| <span>Functional training</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> |
| <span>Home exercise programs</span> |
| </li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="about" class="py-20 bg-gray-50"> |
| <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://images.unsplash.com/photo-1579684385127-1ef15d508118?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
| alt="Our team working" |
| class="rounded-lg shadow-xl w-full"> |
| </div> |
| <div class="lg:w-1/2"> |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-6">About Maisha Adaptive Mobility Care</h2> |
| <div class="w-20 h-1 bg-blue-500 mb-6"></div> |
| <p class="text-gray-600 mb-6">Founded in 2010, Maisha Adaptive Mobility Care has been transforming lives through innovative prosthetic and orthotic solutions. Our name "Maisha" means "life" in Swahili, reflecting our commitment to helping our patients live life to the fullest.</p> |
| |
| <div class="mb-6"> |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Our Mission</h3> |
| <p class="text-gray-600">To provide exceptional, personalized prosthetic and orthotic care that enhances mobility, independence, and quality of life for all our patients.</p> |
| </div> |
| |
| <div class="mb-6"> |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Our Approach</h3> |
| <ul class="space-y-3 text-gray-600"> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i> |
| <span><strong>Patient-Centered Care:</strong> Every solution is tailored to your unique needs and goals</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i> |
| <span><strong>Cutting-Edge Technology:</strong> Utilizing the latest advancements in prosthetic and orthotic science</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i> |
| <span><strong>Comprehensive Support:</strong> From initial consultation to long-term follow-up care</span> |
| </li> |
| </ul> |
| </div> |
| |
| <div class="flex flex-wrap gap-4"> |
| <div class="bg-white p-4 rounded-lg shadow-sm flex items-center"> |
| <div class="bg-blue-100 p-3 rounded-full mr-3"> |
| <i class="fas fa-user-md text-blue-500 text-xl"></i> |
| </div> |
| <div> |
| <h4 class="font-bold text-gray-800">15+</h4> |
| <p class="text-sm text-gray-600">Certified Specialists</p> |
| </div> |
| </div> |
| |
| <div class="bg-white p-4 rounded-lg shadow-sm flex items-center"> |
| <div class="bg-green-100 p-3 rounded-full mr-3"> |
| <i class="fas fa-smile text-green-500 text-xl"></i> |
| </div> |
| <div> |
| <h4 class="font-bold text-gray-800">5,000+</h4> |
| <p class="text-sm text-gray-600">Patients Served</p> |
| </div> |
| </div> |
| |
| <div class="bg-white p-4 rounded-lg shadow-sm flex items-center"> |
| <div class="bg-purple-100 p-3 rounded-full mr-3"> |
| <i class="fas fa-clinic-medical text-purple-500 text-xl"></i> |
| </div> |
| <div> |
| <h4 class="font-bold text-gray-800">8</h4> |
| <p class="text-sm text-gray-600">Locations</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="testimonials" class="py-20 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Patient Success Stories</h2> |
| <div class="w-20 h-1 bg-blue-500 mx-auto mb-4"></div> |
| <p class="text-gray-600 max-w-3xl mx-auto">Hear from individuals whose lives have been transformed through our care.</p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="testimonial-card bg-gray-50 rounded-lg shadow-md p-6"> |
| <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-bold text-gray-800">John D.</h4> |
| <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> |
| <p class="text-gray-600 italic mb-4">"After losing my leg in an accident, Maisha gave me back my independence. Their prosthetic leg feels so natural, I can hike with my family again!"</p> |
| <div class="text-sm text-gray-500"> |
| <i class="fas fa-procedures mr-1"></i> Below-knee amputee |
| </div> |
| </div> |
| |
| |
| <div class="testimonial-card bg-gray-50 rounded-lg shadow-md p-6"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-green-500 flex items-center justify-center text-white font-bold mr-4">SM</div> |
| <div> |
| <h4 class="font-bold text-gray-800">Sarah M.</h4> |
| <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> |
| <p class="text-gray-600 italic mb-4">"My daughter was born with cerebral palsy. The orthotics from Maisha have dramatically improved her mobility and confidence. The pediatric specialists are amazing!"</p> |
| <div class="text-sm text-gray-500"> |
| <i class="fas fa-child mr-1"></i> Pediatric orthotics |
| </div> |
| </div> |
| |
| |
| <div class="testimonial-card bg-gray-50 rounded-lg shadow-md p-6"> |
| <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">RK</div> |
| <div> |
| <h4 class="font-bold text-gray-800">Robert K.</h4> |
| <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> |
| <p class="text-gray-600 italic mb-4">"As a diabetic, I was at risk of losing my foot. Maisha's custom footwear and orthotics saved me from amputation. Their diabetic care program is exceptional."</p> |
| <div class="text-sm text-gray-500"> |
| <i class="fas fa-heartbeat mr-1"></i> Diabetic foot care |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-12 text-center"> |
| <a href="#contact" class="inline-block bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300"> |
| <i class="fas fa-comment-medical mr-2"></i> Share Your Story |
| </a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="contact" class="py-20 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Contact Us</h2> |
| <div class="w-20 h-1 bg-blue-500 mx-auto mb-4"></div> |
| <p class="text-gray-600 max-w-3xl mx-auto">Ready to take the next step toward improved mobility? Reach out to our team today.</p> |
| </div> |
| |
| <div class="flex flex-col lg:flex-row gap-10"> |
| <div class="lg:w-1/2"> |
| <div class="bg-white rounded-lg shadow-md p-8"> |
| <h3 class="text-2xl font-bold text-gray-800 mb-6">Get In Touch</h3> |
| |
| <form id="contact-form" class="space-y-6"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div> |
| <label for="first-name" class="block text-gray-700 font-medium mb-2">First Name</label> |
| <input type="text" id="first-name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| </div> |
| <div> |
| <label for="last-name" class="block text-gray-700 font-medium mb-2">Last Name</label> |
| <input type="text" id="last-name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| </div> |
| </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-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| </div> |
| |
| <div> |
| <label for="phone" class="block text-gray-700 font-medium mb-2">Phone Number</label> |
| <input type="tel" id="phone" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| </div> |
| |
| <div> |
| <label for="service" class="block text-gray-700 font-medium mb-2">Service Interested In</label> |
| <select id="service" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <option value="">Select a service</option> |
| <option value="prosthetics">Prosthetic Limbs</option> |
| <option value="orthotics">Orthotic Devices</option> |
| <option value="pediatric">Pediatric Care</option> |
| <option value="diabetic">Diabetic Foot Care</option> |
| <option value="repair">Repair & Maintenance</option> |
| <option value="other">Other</option> |
| </select> |
| </div> |
| |
| <div> |
| <label for="message" class="block text-gray-700 font-medium mb-2">Your Message</label> |
| <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea> |
| </div> |
| |
| <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300"> |
| <i class="fas fa-paper-plane mr-2"></i> Send Message |
| </button> |
| </form> |
| </div> |
| </div> |
| |
| <div class="lg:w-1/2"> |
| <div class="bg-white rounded-lg shadow-md p-8 mb-8"> |
| <h3 class="text-2xl font-bold text-gray-800 mb-6">Our Locations</h3> |
| |
| <div class="space-y-6"> |
| <div class="flex items-start"> |
| <div class="text-blue-500 mr-4 mt-1"> |
| <i class="fas fa-map-marker-alt text-xl"></i> |
| </div> |
| <div> |
| <h4 class="font-bold text-gray-800 mb-2">Headquarters</h4> |
| <p class="text-gray-600">123 Mobility Way<br>Nairobi, Kenya</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="text-green-500 mr-4 mt-1"> |
| <i class="fas fa-map-marker-alt text-xl"></i> |
| </div> |
| <div> |
| <h4 class="font-bold text-gray-800 mb-2">Mombasa Clinic</h4> |
| <p class="text-gray-600">456 Coastal Road<br>Mombasa, Kenya</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="text-purple-500 mr-4 mt-1"> |
| <i class="fas fa-map-marker-alt text-xl"></i> |
| </div> |
| <div> |
| <h4 class="font-bold text-gray-800 mb-2">Kisumu Center</h4> |
| <p class="text-gray-600">789 Lakeside Drive<br>Kisumu, Kenya</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-lg shadow-md p-8"> |
| <h3 class="text-2xl font-bold text-gray-800 mb-6">Contact Information</h3> |
| |
| <div class="space-y-6"> |
| <div class="flex items-center"> |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-phone text-blue-500"></i> |
| </div> |
| <div> |
| <h4 class="font-bold text-gray-800 mb-1">Phone</h4> |
| <a href="tel:+254700123456" class="text-blue-600 hover:underline">+254 700 123 456</a> |
| </div> |
| </div> |
| |
| <div class="flex items-center"> |
| <div class="bg-green-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-envelope text-green-500"></i> |
| </div> |
| <div> |
| <h4 class="font-bold text-gray-800 mb-1">Email</h4> |
| <a href="mailto:info@maishamobility.com" class="text-blue-600 hover:underline">info@maishamobility.com</a> |
| </div> |
| </div> |
| |
| <div class="flex items-center"> |
| <div class="bg-purple-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-clock text-purple-500"></i> |
| </div> |
| <div> |
| <h4 class="font-bold text-gray-800 mb-1">Hours</h4> |
| <p class="text-gray-600">Monday - Friday: 8:00 AM - 5:00 PM<br>Saturday: 9:00 AM - 1:00 PM</p> |
| </div> |
| </div> |
| |
| <div class="pt-4"> |
| <h4 class="font-bold text-gray-800 mb-3">Follow Us</h4> |
| <div class="flex space-x-4"> |
| <a href="#" class="bg-blue-100 p-3 rounded-full text-blue-500 hover:bg-blue-500 hover:text-white transition duration-300"> |
| <i class="fab fa-facebook-f"></i> |
| </a> |
| <a href="#" class="bg-blue-400 p-3 rounded-full text-white hover:bg-blue-500 transition duration-300"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="bg-pink-100 p-3 rounded-full text-pink-500 hover:bg-pink-500 hover:text-white transition duration-300"> |
| <i class="fab fa-instagram"></i> |
| </a> |
| <a href="#" class="bg-blue-600 p-3 rounded-full text-white hover:bg-blue-700 transition duration-300"> |
| <i class="fab fa-linkedin-in"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-800 text-white py-12"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> |
| <div> |
| <div class="flex items-center mb-4"> |
| <div class="mr-2"> |
| <i class="fas fa-wheelchair text-blue-400 text-2xl"></i> |
| </div> |
| <a href="#" class="text-2xl font-bold"> |
| <span class="text-blue-400">Maisha</span> Adaptive Mobility Care |
| </a> |
| </div> |
| <p class="text-gray-400 mb-4">Restoring mobility, renewing life through innovative prosthetic and orthotic solutions.</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-bold mb-4">Quick Links</h3> |
| <ul class="space-y-2"> |
| <li><a href="#home" class="text-gray-400 hover:text-white transition duration-300">Home</a></li> |
| <li><a href="#services" class="text-gray-400 hover:text-white transition duration-300">Services</a></li> |
| <li><a href="#about" class="text-gray-400 hover:text-white transition duration-300">About Us</a></li> |
| <li><a href="#testimonials" class="text-gray-400 hover:text-white transition duration-300">Testimonials</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-bold mb-4">Services</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Prosthetic Limbs</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Orthotic Devices</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Pediatric Care</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Diabetic Foot Care</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Repair & Maintenance</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h3 class="text-lg font-bold mb-4">Newsletter</h3> |
| <p class="text-gray-400 mb-4">Subscribe to our newsletter for the latest updates and health tips.</p> |
| <form class="flex"> |
| <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-lg focus:outline-none text-gray-800 w-full"> |
| <button type="submit" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-r-lg transition duration-300"> |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| </form> |
| </div> |
| </div> |
| |
| <div class="border-t border-gray-700 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> |
| <p class="text-gray-400 mb-4 md:mb-0">© 2023 Maisha Adaptive Mobility Care. 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">Accessibility</a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| |
| <button id="back-to-top" class="fixed bottom-8 right-8 bg-blue-600 text-white p-3 rounded-full shadow-lg opacity-0 invisible transition-all duration-300"> |
| <i class="fas fa-arrow-up"></i> |
| </button> |
|
|
| <script> |
| |
| const menuToggle = document.getElementById('menu-toggle'); |
| const mobileMenu = document.getElementById('mobile-menu'); |
| |
| menuToggle.addEventListener('click', () => { |
| mobileMenu.classList.toggle('open'); |
| }); |
| |
| |
| 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('open')) { |
| mobileMenu.classList.remove('open'); |
| } |
| } |
| }); |
| }); |
| |
| |
| const backToTopButton = document.getElementById('back-to-top'); |
| |
| window.addEventListener('scroll', () => { |
| if (window.pageYOffset > 300) { |
| backToTopButton.classList.remove('opacity-0', 'invisible'); |
| backToTopButton.classList.add('opacity-100', 'visible'); |
| } else { |
| backToTopButton.classList.remove('opacity-100', 'visible'); |
| backToTopButton.classList.add('opacity-0', 'invisible'); |
| } |
| }); |
| |
| backToTopButton.addEventListener('click', () => { |
| window.scrollTo({ |
| top: 0, |
| behavior: 'smooth' |
| }); |
| }); |
| |
| |
| const contactForm = document.getElementById('contact-form'); |
| |
| contactForm.addEventListener('submit', (e) => { |
| e.preventDefault(); |
| |
| |
| const firstName = document.getElementById('first-name').value; |
| const lastName = document.getElementById('last-name').value; |
| const email = document.getElementById('email').value; |
| const phone = document.getElementById('phone').value; |
| const service = document.getElementById('service').value; |
| const message = document.getElementById('message').value; |
| |
| |
| |
| alert(`Thank you, ${firstName}! Your message has been received. We'll contact 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=JNdichu/yy" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
