| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Vision of Hope | Faith-Based Eye Care NGO</title> |
| <meta name="description" content="Vision of Hope provides inclusive eye care services to underserved communities through faith-based outreach programs and our dedicated Eye Centre."> |
| <meta name="keywords" content="eye care, NGO, vision health, cataract surgery, free eye checkup, donate for eyesight, faith-based healthcare"> |
| <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"> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: '#3b82f6', |
| secondary: '#1e40af', |
| accent: '#f59e0b', |
| dark: '#1f2937', |
| light: '#f9fafb' |
| }, |
| fontFamily: { |
| sans: ['Inter', 'sans-serif'], |
| serif: ['Merriweather', 'serif'] |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Merriweather:wght@400;700&display=swap'); |
| |
| .hero-bg { |
| background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1579684385127-1ef15d508118?ixlib=rb-4.0.3'); |
| background-size: cover; |
| background-position: center; |
| } |
| |
| .impact-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
| } |
| |
| .donation-meter { |
| height: 20px; |
| background-color: #e5e7eb; |
| border-radius: 10px; |
| overflow: hidden; |
| } |
| |
| .donation-progress { |
| height: 100%; |
| background-color: #3b82f6; |
| width: 65%; |
| transition: width 0.5s ease; |
| } |
| |
| .testimonial-card { |
| background-color: white; |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
| transition: all 0.3s ease; |
| } |
| |
| .testimonial-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); |
| } |
| |
| .mobile-menu { |
| max-height: 0; |
| overflow: hidden; |
| transition: max-height 0.3s ease-out; |
| } |
| |
| .mobile-menu.open { |
| max-height: 500px; |
| } |
| |
| .appointment-form input, |
| .appointment-form select, |
| .appointment-form textarea { |
| border: 1px solid #d1d5db; |
| border-radius: 0.375rem; |
| padding: 0.5rem 0.75rem; |
| width: 100%; |
| } |
| |
| .whatsapp-float { |
| position: fixed; |
| bottom: 30px; |
| right: 30px; |
| z-index: 100; |
| } |
| </style> |
| </head> |
| <body class="font-sans text-gray-800 bg-gray-50"> |
| |
| <div class="whatsapp-float"> |
| <a href="https://wa.me/1234567890?text=Hello%20Vision%20of%20Hope" class="bg-green-500 text-white w-16 h-16 rounded-full flex items-center justify-center shadow-lg hover:bg-green-600 transition"> |
| <i class="fab fa-whatsapp text-3xl"></i> |
| </a> |
| </div> |
|
|
| |
| <header class="bg-white shadow-sm sticky top-0 z-50"> |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
| <div class="flex items-center"> |
| <i class="fas fa-eye text-primary text-3xl mr-3"></i> |
| <a href="#" class="text-2xl font-bold text-primary">Vision of Hope</a> |
| </div> |
| |
| |
| <nav class="hidden md:flex space-x-8"> |
| <a href="#home" class="font-medium hover:text-primary">Home</a> |
| <a href="#about" class="font-medium hover:text-primary">About Us</a> |
| <a href="#services" class="font-medium hover:text-primary">Services</a> |
| <a href="#eye-centre" class="font-medium hover:text-primary">Eye Centre</a> |
| <a href="#blog" class="font-medium hover:text-primary">Blog</a> |
| <a href="#contact" class="font-medium hover:text-primary">Contact</a> |
| </nav> |
| |
| |
| <button id="mobile-menu-button" class="md:hidden text-gray-700"> |
| <i class="fas fa-bars text-2xl"></i> |
| </button> |
| </div> |
| |
| |
| <div id="mobile-menu" class="mobile-menu md:hidden bg-white"> |
| <div class="px-4 py-2 space-y-3"> |
| <a href="#home" class="block py-2 hover:text-primary">Home</a> |
| <a href="#about" class="block py-2 hover:text-primary">About Us</a> |
| <a href="#services" class="block py-2 hover:text-primary">Services</a> |
| <a href="#eye-centre" class="block py-2 hover:text-primary">Eye Centre</a> |
| <a href="#blog" class="block py-2 hover:text-primary">Blog</a> |
| <a href="#contact" class="block py-2 hover:text-primary">Contact</a> |
| <div class="pt-2 border-t"> |
| <a href="#donate" class="block bg-primary text-white py-2 px-4 rounded text-center">Donate Now</a> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <section id="home" class="hero-bg text-white py-20 md:py-32"> |
| <div class="container mx-auto px-4 text-center"> |
| <h1 class="text-4xl md:text-6xl font-bold mb-6 font-serif">Bringing Light to Every Life</h1> |
| <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Faith-based eye care services for underserved communities. Restoring vision, restoring hope.</p> |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> |
| <a href="#donate" class="bg-accent hover:bg-yellow-600 text-white font-bold py-3 px-8 rounded-full transition">Donate Now</a> |
| <a href="#appointment" class="bg-white hover:bg-gray-100 text-primary font-bold py-3 px-8 rounded-full transition">Book Appointment</a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="bg-primary text-white py-12"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center"> |
| <div> |
| <div class="text-4xl font-bold mb-2">10,000+</div> |
| <div class="text-sm uppercase tracking-wider">Eye Surgeries</div> |
| </div> |
| <div> |
| <div class="text-4xl font-bold mb-2">50+</div> |
| <div class="text-sm uppercase tracking-wider">Communities Served</div> |
| </div> |
| <div> |
| <div class="text-4xl font-bold mb-2">200+</div> |
| <div class="text-sm uppercase tracking-wider">Volunteers</div> |
| </div> |
| <div> |
| <div class="text-4xl font-bold mb-2">15</div> |
| <div class="text-sm uppercase tracking-wider">Years of Service</div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="about" class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-4 font-serif">Our Mission & Vision</h2> |
| <div class="w-24 h-1 bg-accent mx-auto"></div> |
| </div> |
| |
| <div class="flex flex-col lg:flex-row gap-12 items-center"> |
| <div class="lg:w-1/2"> |
| <img src="https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?ixlib=rb-4.0.3" alt="Our team helping patients" class="rounded-lg shadow-lg w-full"> |
| </div> |
| <div class="lg:w-1/2"> |
| <h3 class="text-2xl font-bold mb-4 text-primary">Who We Are</h3> |
| <p class="mb-6 text-gray-700">Founded in 2008, Vision of Hope is a faith-based non-profit organization dedicated to providing inclusive eye care services to underserved communities. We believe that clear vision is a fundamental right and work tirelessly to make quality eye care accessible to all, regardless of economic status.</p> |
| |
| <h3 class="text-2xl font-bold mb-4 text-primary">Our Approach</h3> |
| <p class="mb-6 text-gray-700">Combining medical expertise with spiritual care, we address both physical and emotional needs. Our mobile clinics reach remote areas, while our Eye Centre provides comprehensive services in the city.</p> |
| |
| <div class="bg-gray-50 p-6 rounded-lg border-l-4 border-accent"> |
| <p class="italic text-gray-700 mb-4">"The Lord opens the eyes of the blind. The Lord lifts up those who are bowed down."</p> |
| <p class="font-semibold">- Psalm 146:8</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="services" class="py-16 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-4 font-serif">Our Services</h2> |
| <p class="text-gray-600 max-w-2xl mx-auto">Comprehensive eye care services for all ages and backgrounds</p> |
| <div class="w-24 h-1 bg-accent mx-auto"></div> |
| </div> |
| |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="bg-white rounded-lg shadow-md overflow-hidden transition duration-300 hover:shadow-xl"> |
| <div class="h-48 bg-blue-100 flex items-center justify-center"> |
| <i class="fas fa-eye text-6xl text-primary"></i> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold mb-3">Comprehensive Eye Exams</h3> |
| <p class="text-gray-600 mb-4">Thorough vision assessments for all age groups, including specialized tests for children and seniors.</p> |
| <a href="#appointment" class="text-primary font-semibold hover:underline">Book Now →</a> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-lg shadow-md overflow-hidden transition duration-300 hover:shadow-xl"> |
| <div class="h-48 bg-yellow-100 flex items-center justify-center"> |
| <i class="fas fa-procedures text-6xl text-primary"></i> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold mb-3">Cataract Surgery</h3> |
| <p class="text-gray-600 mb-4">Affordable cataract removal with premium intraocular lens implants for clear vision restoration.</p> |
| <a href="#appointment" class="text-primary font-semibold hover:underline">Learn More →</a> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-lg shadow-md overflow-hidden transition duration-300 hover:shadow-xl"> |
| <div class="h-48 bg-green-100 flex items-center justify-center"> |
| <i class="fas fa-glasses text-6xl text-primary"></i> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold mb-3">Prescription Eyewear</h3> |
| <p class="text-gray-600 mb-4">High-quality, affordable glasses with frames to suit every style and budget.</p> |
| <a href="#appointment" class="text-primary font-semibold hover:underline">Get Yours →</a> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-lg shadow-md overflow-hidden transition duration-300 hover:shadow-xl"> |
| <div class="h-48 bg-purple-100 flex items-center justify-center"> |
| <i class="fas fa-heart text-6xl text-primary"></i> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold mb-3">Community Outreach</h3> |
| <p class="text-gray-600 mb-4">Free eye camps in underserved areas with vision screenings and basic treatments.</p> |
| <a href="#volunteer" class="text-primary font-semibold hover:underline">Join Us →</a> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-lg shadow-md overflow-hidden transition duration-300 hover:shadow-xl"> |
| <div class="h-48 bg-red-100 flex items-center justify-center"> |
| <i class="fas fa-child text-6xl text-primary"></i> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold mb-3">Pediatric Vision Care</h3> |
| <p class="text-gray-600 mb-4">Specialized services for children including amblyopia treatment and vision therapy.</p> |
| <a href="#appointment" class="text-primary font-semibold hover:underline">Schedule →</a> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-lg shadow-md overflow-hidden transition duration-300 hover:shadow-xl"> |
| <div class="h-48 bg-teal-100 flex items-center justify-center"> |
| <i class="fas fa-hand-holding-heart text-6xl text-primary"></i> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold mb-3">Spiritual Counseling</h3> |
| <p class="text-gray-600 mb-4">Faith-based emotional support for patients dealing with vision loss or eye health concerns.</p> |
| <a href="#contact" class="text-primary font-semibold hover:underline">Contact Us →</a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="eye-centre" class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-4 font-serif">Vision of Hope Eye Centre</h2> |
| <p class="text-gray-600 max-w-2xl mx-auto">State-of-the-art facility providing comprehensive eye care services</p> |
| <div class="w-24 h-1 bg-accent mx-auto"></div> |
| </div> |
| |
| <div class="flex flex-col lg:flex-row gap-12 items-center"> |
| <div class="lg:w-1/2"> |
| <div class="grid grid-cols-2 gap-4 mb-6"> |
| <div class="bg-gray-100 p-4 rounded-lg"> |
| <i class="fas fa-clock text-primary text-2xl mb-2"></i> |
| <h4 class="font-bold mb-1">Opening Hours</h4> |
| <p class="text-sm">Mon-Fri: 8am-6pm</p> |
| <p class="text-sm">Sat: 9am-3pm</p> |
| </div> |
| <div class="bg-gray-100 p-4 rounded-lg"> |
| <i class="fas fa-map-marker-alt text-primary text-2xl mb-2"></i> |
| <h4 class="font-bold mb-1">Location</h4> |
| <p class="text-sm">123 Vision Street, Hope City</p> |
| </div> |
| <div class="bg-gray-100 p-4 rounded-lg"> |
| <i class="fas fa-phone-alt text-primary text-2xl mb-2"></i> |
| <h4 class="font-bold mb-1">Contact</h4> |
| <p class="text-sm">+1 (555) 123-4567</p> |
| </div> |
| <div class="bg-gray-100 p-4 rounded-lg"> |
| <i class="fas fa-wheelchair text-primary text-2xl mb-2"></i> |
| <h4 class="font-bold mb-1">Accessibility</h4> |
| <p class="text-sm">Fully wheelchair accessible</p> |
| </div> |
| </div> |
| |
| <h3 class="text-2xl font-bold mb-4 text-primary">Our Facilities</h3> |
| <ul class="space-y-2 mb-6"> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-accent mt-1 mr-2"></i> |
| <span>Modern diagnostic equipment</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-accent mt-1 mr-2"></i> |
| <span>On-site surgical suite</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-accent mt-1 mr-2"></i> |
| <span>Optical shop with affordable frames</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-accent mt-1 mr-2"></i> |
| <span>Comfortable recovery areas</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-accent mt-1 mr-2"></i> |
| <span>Prayer and meditation room</span> |
| </li> |
| </ul> |
| |
| <a href="#appointment" class="bg-primary hover:bg-blue-700 text-white font-bold py-3 px-6 rounded inline-flex items-center"> |
| <i class="fas fa-calendar-alt mr-2"></i> Book Appointment |
| </a> |
| </div> |
| |
| <div class="lg:w-1/2"> |
| <div class="bg-gray-100 p-6 rounded-lg"> |
| <h3 class="text-xl font-bold mb-4 text-primary">Patient Testimonials</h3> |
| |
| <div class="space-y-4"> |
| <div class="testimonial-card p-4 rounded"> |
| <div class="flex items-center mb-3"> |
| <div class="w-10 h-10 rounded-full bg-blue-200 flex items-center justify-center"> |
| <i class="fas fa-user text-primary"></i> |
| </div> |
| <div class="ml-3"> |
| <h4 class="font-bold">Maria G.</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-700">"After my cataract surgery at Vision of Hope, I can see clearly again to read my Bible. The staff prayed with me before the procedure, which gave me such peace."</p> |
| </div> |
| |
| <div class="testimonial-card p-4 rounded"> |
| <div class="flex items-center mb-3"> |
| <div class="w-10 h-10 rounded-full bg-blue-200 flex items-center justify-center"> |
| <i class="fas fa-user text-primary"></i> |
| </div> |
| <div class="ml-3"> |
| <h4 class="font-bold">James T.</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-700">"The sliding scale payment system allowed me to get glasses for my daughter that I couldn't afford elsewhere. God bless this ministry!"</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="donate" class="py-16 bg-primary text-white"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-4 font-serif">Give the Gift of Sight</h2> |
| <p class="text-blue-100 max-w-2xl mx-auto">Your donation helps provide eye care to those who cannot afford it</p> |
| <div class="w-24 h-1 bg-accent mx-auto"></div> |
| </div> |
| |
| <div class="flex flex-col lg:flex-row gap-12"> |
| <div class="lg:w-1/2"> |
| <h3 class="text-2xl font-bold mb-6">How Your Donation Helps</h3> |
| |
| <div class="space-y-6"> |
| <div class="flex items-start"> |
| <div class="bg-accent text-white rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mt-1"> |
| <i class="fas fa-dollar-sign"></i> |
| </div> |
| <div class="ml-4"> |
| <h4 class="font-bold mb-1">$50</h4> |
| <p class="text-blue-100">Provides an eye exam and basic glasses for a child</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="bg-accent text-white rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mt-1"> |
| <i class="fas fa-dollar-sign"></i> |
| </div> |
| <div class="ml-4"> |
| <h4 class="font-bold mb-1">$150</h4> |
| <p class="text-blue-100">Covers cataract surgery for one senior citizen</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="bg-accent text-white rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mt-1"> |
| <i class="fas fa-dollar-sign"></i> |
| </div> |
| <div class="ml-4"> |
| <h4 class="font-bold mb-1">$500</h4> |
| <p class="text-blue-100">Sponsors a mobile eye clinic in a rural village</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="bg-accent text-white rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mt-1"> |
| <i class="fas fa-dollar-sign"></i> |
| </div> |
| <div class="ml-4"> |
| <h4 class="font-bold mb-1">$1,000+</h4> |
| <p class="text-blue-100">Funds equipment upgrades for our Eye Centre</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-8 bg-blue-800 bg-opacity-30 p-6 rounded-lg"> |
| <h4 class="font-bold mb-2">Current Fundraising Campaign</h4> |
| <p class="mb-4">Help us reach our goal of $50,000 to provide free cataract surgeries for 100 elderly patients</p> |
| |
| <div class="mb-2 flex justify-between text-sm"> |
| <span>$32,500 raised</span> |
| <span>65% of goal</span> |
| </div> |
| |
| <div class="donation-meter"> |
| <div class="donation-progress"></div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="lg:w-1/2"> |
| <div class="bg-white bg-opacity-10 p-8 rounded-lg border border-blue-300 border-opacity-30"> |
| <h3 class="text-2xl font-bold mb-6">Make a Donation</h3> |
| |
| <form class="space-y-4"> |
| <div> |
| <label class="block mb-1">Amount</label> |
| <div class="grid grid-cols-4 gap-2"> |
| <button type="button" class="bg-blue-700 hover:bg-blue-600 text-white py-2 rounded transition">$50</button> |
| <button type="button" class="bg-blue-700 hover:bg-blue-600 text-white py-2 rounded transition">$100</button> |
| <button type="button" class="bg-blue-700 hover:bg-blue-600 text-white py-2 rounded transition">$250</button> |
| <button type="button" class="bg-blue-700 hover:bg-blue-600 text-white py-2 rounded transition">$500</button> |
| </div> |
| <div class="mt-2 relative"> |
| <span class="absolute left-3 top-3 text-gray-300">$</span> |
| <input type="text" placeholder="Other amount" class="w-full pl-8 py-2 bg-blue-900 bg-opacity-50 border border-blue-700 rounded text-white placeholder-blue-300"> |
| </div> |
| </div> |
| |
| <div> |
| <label class="block mb-1">Donation Type</label> |
| <select class="w-full py-2 bg-blue-900 bg-opacity-50 border border-blue-700 rounded text-white"> |
| <option>General Donation</option> |
| <option>Cataract Surgery Fund</option> |
| <option>Children's Vision Program</option> |
| <option>Mobile Clinic Sponsorship</option> |
| <option>Equipment Fund</option> |
| </select> |
| </div> |
| |
| <div> |
| <label class="block mb-1">Personal Information</label> |
| <input type="text" placeholder="Full Name" class="w-full py-2 px-3 bg-blue-900 bg-opacity-50 border border-blue-700 rounded text-white placeholder-blue-300 mb-2"> |
| <input type="email" placeholder="Email" class="w-full py-2 px-3 bg-blue-900 bg-opacity-50 border border-blue-700 rounded text-white placeholder-blue-300"> |
| </div> |
| |
| <div class="pt-2"> |
| <button type="submit" class="w-full bg-accent hover:bg-yellow-600 text-white font-bold py-3 px-4 rounded transition"> |
| Donate Now <i class="fas fa-arrow-right ml-2"></i> |
| </button> |
| </div> |
| |
| <div class="text-center text-blue-200 text-sm"> |
| <p>All donations are tax-deductible. We are a 501(c)(3) organization.</p> |
| </div> |
| </form> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="volunteer" class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-4 font-serif">Get Involved</h2> |
| <p class="text-gray-600 max-w-2xl mx-auto">Join us in our mission to restore vision and hope</p> |
| <div class="w-24 h-1 bg-accent mx-auto"></div> |
| </div> |
| |
| <div class="grid md:grid-cols-2 gap-8"> |
| <div class="bg-gray-50 p-8 rounded-lg border border-gray-200"> |
| <div class="flex items-center mb-6"> |
| <div class="bg-primary text-white rounded-full w-12 h-12 flex items-center justify-center mr-4"> |
| <i class="fas fa-hands-helping text-xl"></i> |
| </div> |
| <h3 class="text-2xl font-bold">Volunteer</h3> |
| </div> |
| |
| <p class="mb-6 text-gray-700">We welcome volunteers from all backgrounds to assist with various aspects of our work:</p> |
| |
| <ul class="space-y-3 mb-8"> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-accent mt-1 mr-2"></i> |
| <span>Medical professionals (ophthalmologists, optometrists, nurses)</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-accent mt-1 mr-2"></i> |
| <span>Community outreach coordinators</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-accent mt-1 mr-2"></i> |
| <span>Administrative support</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-accent mt-1 mr-2"></i> |
| <span>Spiritual care volunteers</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-accent mt-1 mr-2"></i> |
| <span>Event planning and fundraising</span> |
| </li> |
| </ul> |
| |
| <a href="#contact" class="bg-primary hover:bg-blue-700 text-white font-bold py-3 px-6 rounded inline-flex items-center"> |
| <i class="fas fa-user-plus mr-2"></i> Volunteer Application |
| </a> |
| </div> |
| |
| <div class="bg-gray-50 p-8 rounded-lg border border-gray-200"> |
| <div class="flex items-center mb-6"> |
| <div class="bg-primary text-white rounded-full w-12 h-12 flex items-center justify-center mr-4"> |
| <i class="fas fa-handshake text-xl"></i> |
| </div> |
| <h3 class="text-2xl font-bold">Partnerships</h3> |
| </div> |
| |
| <p class="mb-6 text-gray-700">We collaborate with various organizations to expand our impact:</p> |
| |
| <ul class="space-y-3 mb-8"> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-accent mt-1 mr-2"></i> |
| <span>Churches and faith communities</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-accent mt-1 mr-2"></i> |
| <span>Medical institutions</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-accent mt-1 mr-2"></i> |
| <span>Corporate sponsors</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-accent mt-1 mr-2"></i> |
| <span>Government health programs</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-accent mt-1 mr-2"></i> |
| <span>International NGOs</span> |
| </li> |
| </ul> |
| |
| <a href="#contact" class="bg-primary hover:bg-blue-700 text-white font-bold py-3 px-6 rounded inline-flex items-center"> |
| <i class="fas fa-envelope mr-2"></i> Partnership Inquiry |
| </a> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="blog" class="py-16 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-4 font-serif">Latest News</h2> |
| <p class="text-gray-600 max-w-2xl mx-auto">Updates from our ministry and eye health information</p> |
| <div class="w-24 h-1 bg-accent mx-auto"></div> |
| </div> |
| |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> |
| <div class="h-48 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixlib=rb-4.0.3')"></div> |
| <div class="p-6"> |
| <div class="text-sm text-gray-500 mb-2"> |
| <span>June 15, 2023</span> • <span>Outreach</span> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Mobile Clinic Serves Remote Mountain Village</h3> |
| <p class="text-gray-600 mb-4">Our team traveled to the highlands to provide eye care to 200 residents who had never seen an eye doctor before.</p> |
| <a href="#" class="text-primary font-semibold hover:underline">Read More →</a> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> |
| <div class="h-48 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?ixlib=rb-4.0.3')"></div> |
| <div class="p-6"> |
| <div class="text-sm text-gray-500 mb-2"> |
| <span>May 28, 2023</span> • <span>Faith</span> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Prayer and Medicine: Our Holistic Approach</h3> |
| <p class="text-gray-600 mb-4">How combining spiritual care with medical treatment leads to better outcomes for our patients.</p> |
| <a href="#" class="text-primary font-semibold hover:underline">Read More →</a> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> |
| <div class="h-48 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1583864697784-a0efc8379f70?ixlib=rb-4.0.3')"></div> |
| <div class="p-6"> |
| <div class="text-sm text-gray-500 mb-2"> |
| <span>April 5, 2023</span> • <span>Research</span> |
| </div> |
| <h3 class="text-xl font-bold mb-3">New Study: Faith Communities Key to Eye Health Awareness</h3> |
| <p class="text-gray-600 mb-4">Our research shows that church-based vision screening programs increase early detection of eye diseases by 40%.</p> |
| <a href="#" class="text-primary font-semibold hover:underline">Read More →</a> |
| </div> |
| </div> |
| </div> |
| |
| <div class="text-center mt-12"> |
| <a href="#" class="inline-block bg-primary hover:bg-blue-700 text-white font-bold py-3 px-8 rounded transition"> |
| View All Articles <i class="fas fa-arrow-right ml-2"></i> |
| </a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="appointment" class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-4 font-serif">Book an Appointment</h2> |
| <p class="text-gray-600 max-w-2xl mx-auto">Schedule your visit to our Eye Centre or a mobile clinic</p> |
| <div class="w-24 h-1 bg-accent mx-auto"></div> |
| </div> |
| |
| <div class="max-w-4xl mx-auto"> |
| <div class="bg-gray-50 p-8 rounded-lg border border-gray-200"> |
| <form class="appointment-form space-y-4"> |
| <div class="grid md:grid-cols-2 gap-6"> |
| <div> |
| <label class="block mb-1 font-medium">First Name</label> |
| <input type="text" placeholder="Your first name" required> |
| </div> |
| <div> |
| <label class="block mb-1 font-medium">Last Name</label> |
| <input type="text" placeholder="Your last name" required> |
| </div> |
| </div> |
| |
| <div class="grid md:grid-cols-2 gap-6"> |
| <div> |
| <label class="block mb-1 font-medium">Email</label> |
| <input type="email" placeholder="Your email address" required> |
| </div> |
| <div> |
| <label class="block mb-1 font-medium">Phone</label> |
| <input type="tel" placeholder="Your phone number" required> |
| </div> |
| </div> |
| |
| <div class="grid md:grid-cols-2 gap-6"> |
| <div> |
| <label class="block mb-1 font-medium">Appointment Type</label> |
| <select required> |
| <option value="">Select service</option> |
| <option>Comprehensive Eye Exam</option> |
| <option>Cataract Consultation</option> |
| <option>Pediatric Vision Check</option> |
| <option>Diabetic Eye Screening</option> |
| <option>Glaucoma Evaluation</option> |
| <option>Eyeglasses Fitting</option> |
| <option>Follow-up Visit</option> |
| </select> |
| </div> |
| <div> |
| <label class="block mb-1 font-medium">Preferred Location</label> |
| <select required> |
| <option value="">Select location</option> |
| <option>Vision of Hope Eye Centre (Main)</option> |
| <option>Mobile Clinic - Downtown</option> |
| <option>Mobile Clinic - Westside</option> |
| <option>Mobile Clinic - South District</option> |
| </select> |
| </div> |
| </div> |
| |
| <div class="grid md:grid-cols-2 gap-6"> |
| <div> |
| <label class="block mb-1 font-medium">Preferred Date</label> |
| <input type="date" required> |
| </div> |
| <div> |
| <label class="block mb-1 font-medium">Preferred Time</label> |
| <select required> |
| <option value="">Select time</option> |
| <option>Morning (8am-12pm)</option> |
| <option>Afternoon (12pm-4pm)</option> |
| <option>Evening (4pm-6pm)</option> |
| </select> |
| </div> |
| </div> |
| |
| <div> |
| <label class="block mb-1 font-medium">Insurance/Funding</label> |
| <select> |
| <option value="">Select option</option> |
| <option>Private Insurance</option> |
| <option>Medicare/Medicaid</option> |
| <option>Sliding Scale Payment</option> |
| <option>Sponsorship Needed</option> |
| <option>Self Pay</option> |
| </select> |
| </div> |
| |
| <div> |
| <label class="block mb-1 font-medium">Additional Notes</label> |
| <textarea rows="3" placeholder="Any special requests or information we should know"></textarea> |
| </div> |
| |
| <div class="pt-4"> |
| <button type="submit" class="w-full bg-primary hover:bg-blue-700 text-white font-bold py-3 px-4 rounded transition"> |
| Submit Appointment Request |
| </button> |
| </div> |
| </form> |
| </div> |
| |
| <div class="mt-8 bg-blue-50 p-6 rounded-lg border border-blue-100"> |
| <h3 class="text-xl font-bold mb-4 text-primary">Financial Assistance Available</h3> |
| <p class="mb-4">We believe cost should never be a barrier to eye care. Our sliding scale payment system and sponsorship programs ensure everyone can access the vision services they need.</p> |
| <a href="#donate" class="text-primary font-semibold hover:underline">Learn about our financial assistance options →</a> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="contact" class="py-16 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-4 font-serif">Contact Us</h2> |
| <p class="text-gray-600 max-w-2xl mx-auto">We'd love to hear from you</p> |
| <div class="w-24 h-1 bg-accent mx-auto"></div> |
| </div> |
| |
| <div class="flex flex-col lg:flex-row gap-12"> |
| <div class="lg:w-1/2"> |
| <div class="bg-white p-8 rounded-lg shadow-md"> |
| <h3 class="text-2xl font-bold mb-6 text-primary">Send Us a Message</h3> |
| |
| <form class="space-y-4"> |
| <div class="grid md:grid-cols-2 gap-6"> |
| <div> |
| <label class="block mb-1 font-medium">Name</label> |
| <input type="text" placeholder="Your name" class="w-full py-2 px-3 border border-gray-300 rounded"> |
| </div> |
| <div> |
| <label class="block mb-1 font-medium">Email</label> |
| <input type="email" placeholder="Your email" class="w-full py-2 px-3 border border-gray-300 rounded"> |
| </div> |
| </div> |
| |
| <div> |
| <label class="block mb-1 font-medium">Subject</label> |
| <select class="w-full py-2 px-3 border border-gray-300 rounded"> |
| <option>General Inquiry</option> |
| <option>Appointment Question</option> |
| <option>Volunteer Opportunity</option> |
| <option>Partnership Inquiry</option> |
| <option>Donation Question</option> |
| <option>Other</option> |
| </select> |
| </div> |
| |
| <div> |
| <label class="block mb-1 font-medium">Message</label> |
| <textarea rows="5" placeholder="Your message" class="w-full py-2 px-3 border border-gray-300 rounded"></textarea> |
| </div> |
| |
| <div class="pt-2"> |
| <button type="submit" class="w-full bg-primary hover:bg-blue-700 text-white font-bold py-3 px-4 rounded transition"> |
| Send Message |
| </button> |
| </div> |
| </form> |
| </div> |
| </div> |
| |
| <div class="lg:w-1/2"> |
| <div class="bg-white p-8 rounded-lg shadow-md h-full"> |
| <h3 class="text-2xl font-bold mb-6 text-primary">Contact Information</h3> |
| |
| <div class="space-y-6"> |
| <div class="flex items-start"> |
| <div class="bg-primary bg-opacity-10 text-primary rounded-full w-10 h-10 flex items-center justify-center flex-shrink-0 mt-1"> |
| <i class="fas fa-map-marker-alt"></i> |
| </div> |
| <div class="ml-4"> |
| <h4 class="font-bold mb-1">Address</h4> |
| <p>123 Vision Street<br>Hope City, HC 12345</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="bg-primary bg-opacity-10 text-primary rounded-full w-10 h-10 flex items-center justify-center flex-shrink-0 mt-1"> |
| <i class="fas fa-phone-alt"></i> |
| </div> |
| <div class="ml-4"> |
| <h4 class="font-bold mb-1">Phone</h4> |
| <p>Main: (555) 123-4567<br>Appointments: (555) 123-4568</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="bg-primary bg-opacity-10 text-primary rounded-full w-10 h-10 flex items-center justify-center flex-shrink-0 mt-1"> |
| <i class="fas fa-envelope"></i> |
| </div> |
| <div class="ml-4"> |
| <h4 class="font-bold mb-1">Email</h4> |
| <p>info@visionofhope.org<br>donations@visionofhope.org</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="bg-primary bg-opacity-10 text-primary rounded-full w-10 h-10 flex items-center justify-center flex-shrink-0 mt-1"> |
| <i class="fas fa-clock"></i> |
| </div> |
| <div class="ml-4"> |
| <h4 class="font-bold mb-1">Hours</h4> |
| <p>Monday-Friday: 8am-6pm<br>Saturday: 9am-3pm<br>Sunday: Closed</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-8"> |
| <h4 class="font-bold mb-3">Follow Us</h4> |
| <div class="flex space-x-4"> |
| <a href="#" class="bg-blue-100 text-blue-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-blue-200 transition"> |
| <i class="fab fa-facebook-f"></i> |
| </a> |
| <a href="#" class="bg-blue-100 text-blue-500 w-10 h-10 rounded-full flex items-center justify-center hover:bg-blue-200 transition"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="bg-pink-100 text-pink-500 w-10 h-10 rounded-full flex items-center justify-center hover:bg-pink-200 transition"> |
| <i class="fab fa-instagram"></i> |
| </a> |
| <a href="#" class="bg-blue-100 text-blue-400 w-10 h-10 rounded-full flex items-center justify-center hover:bg-blue-200 transition"> |
| <i class="fab fa-linkedin-in"></i> |
| </a> |
| <a href="#" class="bg-red-100 text-red-500 w-10 h-10 rounded-full flex items-center justify-center hover:bg-red-200 transition"> |
| <i class="fab fa-youtube"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <div class="bg-gray-100"> |
| <div class="container mx-auto px-4 py-8"> |
| <div class="bg-white p-4 rounded-lg shadow-sm"> |
| <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.215256627566!2d-73.9878449241646!3d40.74844097138996!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259a9b3117469%3A0xd134e199a405a163!2sEmpire%20State%20Building!5e0!3m2!1sen!2sus!4v1687893120420!5m2!1sen!2sus" width="100%" height="400" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <section class="py-12 bg-primary text-white"> |
| <div class="container mx-auto px-4 text-center"> |
| <h2 class="text-2xl md:text-3xl font-bold mb-4">Stay Updated</h2> |
| <p class="max-w-2xl mx-auto mb-8 text-blue-100">Subscribe to our newsletter for updates on our programs, events, and inspiring stories of lives transformed.</p> |
| |
| <form class="max-w-md mx-auto flex"> |
| <input type="email" placeholder="Your email address" class="flex-grow py-3 px-4 rounded-l focus:outline-none text-gray-800"> |
| <button type="submit" class="bg-accent hover:bg-yellow-600 text-white font-bold py-3 px-6 rounded-r transition"> |
| Subscribe |
| </button> |
| </form> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-900 text-white py-12"> |
| <div class="container mx-auto px-4"> |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-12"> |
| <div> |
| <div class="flex items-center mb-4"> |
| <i class="fas fa-eye text-primary text-2xl mr-3"></i> |
| <span class="text-xl font-bold">Vision of Hope</span> |
| </div> |
| <p class="mb-4 text-gray-400">Restoring vision, restoring hope through faith-based eye care services.</p> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook-f"></i></a> |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a> |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a> |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-youtube"></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">Home</a></li> |
| <li><a href="#about" class="text-gray-400 hover:text-white transition">About Us</a></li> |
| <li><a href="#services" class="text-gray-400 hover:text-white transition">Services</a></li> |
| <li><a href="#eye-centre" class="text-gray-400 hover:text-white transition">Eye Centre</a></li> |
| <li><a href="#blog" class="text-gray-400 hover:text-white transition">Blog</a></li> |
| <li><a href="#contact" class="text-gray-400 hover:text-white transition">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">Eye Exams</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Cataract Surgery</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Glasses & Lenses</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Pediatric Care</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Community Outreach</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Spiritual Care</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h3 class="text-lg font-bold mb-4">Contact</h3> |
| <ul class="space-y-2"> |
| <li class="flex items-start"> |
| <i class="fas fa-map-marker-alt text-gray-400 mt-1 mr-2"></i> |
| <span class="text-gray-400">123 Vision Street, Hope City</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-phone-alt text-gray-400 mt-1 mr-2"></i> |
| <span class="text-gray-400">(555) 123-4567</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-envelope text-gray-400 mt-1 mr-2"></i> |
| <span class="text-gray-400">info@visionofhope.org</span> |
| </li> |
| </ul> |
| |
| <div class="mt-4"> |
| <a href="#donate" class="inline-block bg-accent hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded text-sm transition"> |
| Donate Now |
| </a> |
| </div> |
| </div> |
| </div> |
| |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> |
| <p class="text-gray-500 text-sm mb-4 md:mb-0">© 2023 Vision of Hope. All rights reserved.</p> |
| <div class="flex space-x-6"> |
| <a href="#" class="text-gray-500 hover:text-white text-sm transition">Privacy Policy</a> |
| <a href="#" class="text-gray-500 hover:text-white text-sm transition">Terms of Service</a> |
| <a href="#" class="text-gray-500 hover:text-white text-sm transition">Sitemap</a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); |
| const mobileMenu = document.getElementById('mobile-menu'); |
| |
| mobileMenuButton.addEventListener('click', () => { |
| mobileMenu.classList.toggle('open'); |
| }); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function (e) { |
| e.preventDefault(); |
| |
| |
| mobileMenu.classList.remove('open'); |
| |
| const targetId = this.getAttribute('href'); |
| if (targetId === '#') return; |
| |
| const targetElement = document.querySelector(targetId); |
| if (targetElement) { |
| window.scrollTo({ |
| top: targetElement.offsetTop - 80, |
| behavior: 'smooth' |
| }); |
| } |
| }); |
| }); |
| |
| |
| const donationAmountButtons = document.querySelectorAll('[id^="donate"] button'); |
| donationAmountButtons.forEach(button => { |
| button.addEventListener('click', (e) => { |
| e.preventDefault(); |
| donationAmountButtons.forEach(btn => btn.classList.remove('bg-blue-800')); |
| button.classList.add('bg-blue-800'); |
| }); |
| }); |
| </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=DTeeted/pegf" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
