|
|
<!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> |
