<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Let's Start Donating</title>
<!-- Favicon -->
<link rel="icon" href="https://via.placeholder.com/32x32" type="image/x-icon">
<!-- Google Font: Inter -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #f8f9fa;
}
.cause-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cause-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.1), 0 8px 16px -8px rgba(0, 0, 0, 0.1);
}
.testimonial-card {
transition: transform 0.3s ease;
}
.testimonial-card:hover {
transform: scale(1.03);
}
</style>
</head>
<body class="bg-gray-50">
<!-- Header Section -->
<header class="bg-white shadow-sm sticky top-0 z-50">
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
<a href="#" class="flex items-center space-x-2">
<div class="w-10 h-10 bg-blue-600 text-white flex items-center justify-center rounded-lg font-bold text-xl">
E
</div>
<span class="text-2xl font-bold text-gray-800">Emvior Foundation</span>
</a>
<nav class="hidden md:flex space-x-6 text-gray-600 font-medium">
<a href="#about" class="hover:text-blue-600 transition-colors">About</a>
<a href="#causes" class="hover:text-blue-600 transition-colors">Causes</a>
<a href="#testimonials" class="hover:text-blue-600 transition-colors">Testimonials</a>
</nav>
<a href="#donate" class="bg-blue-600 text-white font-semibold py-2 px-6 rounded-full hover:bg-blue-700 transition-colors hidden md:inline-flex">
Donate Now
</a>
<!-- Mobile Menu Button -->
<button class="md:hidden text-gray-600 hover:text-blue-600 focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
</svg>
</button>
</div>
</header>
<!-- Hero Section -->
<section class="relative bg-gray-100 py-24 md:py-32 overflow-hidden">
<div class="absolute inset-0 bg-cover bg-center opacity-20" style="background-image: url('https://placehold.co/1920x1080/e2e8f0/94a3b8?text=Emvior+Foundation');"></div>
<div class="container mx-auto px-4 text-center relative z-10">
<h1 class="text-4xl md:text-6xl font-extrabold text-gray-900 mb-4 leading-tight">
Your Donation Makes a Difference
</h1>
<p class="text-lg md:text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
See your impact through transparent donation causes. Together, we can create a better world.
</p>
<a href="#causes" class="inline-block bg-blue-600 text-white font-semibold py-3 px-8 rounded-full shadow-lg hover:bg-blue-700 transition-transform transform hover:scale-105">
Explore Causes
</a>
</div>
</section>
<!-- About Section -->
<section id="about" class="py-20 bg-white">
<div class="container mx-auto px-4">
<div class="grid md:grid-cols-2 gap-12 items-center">
<div class="relative w-full h-64 md:h-96 rounded-2xl overflow-hidden shadow-xl">
<img src="https://placehold.co/800x600/b1c4d4/2b4a68?text=Our+Mission" alt="Our Mission" class="w-full h-full object-cover transform transition-transform duration-500 hover:scale-110">
</div>
<div class="space-y-6">
<h2 class="text-3xl md:text-4xl font-bold text-gray-800">About Our Mission</h2>
<p class="text-gray-600 text-lg leading-relaxed">
At Emvior Foundation, we believe in complete transparency. We use every donation
to its fullest potential, providing essential services to those in need. Our mission is to
empower communities and create lasting change through education, healthcare, and sustainable
development.
</p>
<p class="text-gray-600 text-lg leading-relaxed">
We work closely with local partners to ensure that your contribution directly reaches
the people who need it most, creating a ripple effect of hope and progress.
</p>
<a href="#causes" class="inline-block bg-gray-200 text-gray-800 font-semibold py-3 px-8 rounded-full hover:bg-gray-300 transition-colors">
Learn More
</a>
</div>
</div>
</div>
</section>
<!-- Causes Section -->
<section id="causes" class="py-20 bg-gray-100">
<div class="container mx-auto px-4 text-center">
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Our Causes</h2>
<p class="text-lg text-gray-600 mb-12 max-w-2xl mx-auto">
Choose a cause that speaks to you and see the immediate impact of your generosity.
</p>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- Cause Card 1 -->
<div class="cause-card bg-white p-6 rounded-2xl shadow-md border border-gray-200 text-left">
<div class="relative w-full h-40 mb-4 rounded-xl overflow-hidden">
<img src="https://placehold.co/400x300/e0f2fe/0c4a6e?text=Education" alt="Education cause" class="w-full h-full object-cover">
</div>
<h3 class="text-xl font-bold text-gray-800 mb-2">Give children a Good education</h3>
<p class="text-gray-600 mb-4">
Your donation provides books, supplies, and technology, giving a child the chance to succeed in the classroom and beyond.
</p>
<a href="#donate" class="text-blue-600 font-semibold hover:underline">Donate now →</a>
</div>
<!-- Cause Card 2 -->
<div class="cause-card bg-white p-6 rounded-2xl shadow-md border border-gray-200 text-left">
<div class="relative w-full h-40 mb-4 rounded-xl overflow-hidden">
<img src="https://placehold.co/400x300/d1fae5/065f46?text=Healthcare" alt="Healthcare cause" class="w-full h-full object-cover">
</div>
<h3 class="text-xl font-bold text-gray-800 mb-2">Support Learning, Inspire Hope in India</h3>
<p class="text-gray-600 mb-4">
Help us break the cycle of poverty. Your contribution funds quality education, empowering children to build a brighter future for themselves.
</p>
<a href="#donate" class="text-green-600 font-semibold hover:underline">Donate now →</a>
</div>
<!-- Cause Card 3 -->
<div class="cause-card bg-white p-6 rounded-2xl shadow-md border border-gray-200 text-left">
<div class="relative w-full h-40 mb-4 rounded-xl overflow-hidden">
<img src="https://placehold.co/400x300/ffe4e6/be123c?text=Community" alt="Community cause" class="w-full h-full object-cover">
</div>
<h3 class="text-xl font-bold text-gray-800 mb-2">Building Bright Futures With Every Lesson</h3>
<p class="text-gray-600 mb-4">
Every lesson you support is a step toward a better life. Your gift helps provide a safe place to learn and the resources a child needs to thrive.
</p>
<a href="#donate" class="text-orange-600 font-semibold hover:underline">Donate now →</a>
</div>
<!-- Cause Card 4 -->
<div class="cause-card bg-white p-6 rounded-2xl shadow-md border border-gray-200 text-left">
<div class="relative w-full h-40 mb-4 rounded-xl overflow-hidden">
<img src="https://placehold.co/400x300/f3e8ff/581c87?text=Child+Care" alt="Child care cause" class="w-full h-full object-cover">
</div>
<h3 class="text-xl font-bold text-gray-800 mb-2">Help Children Dream Bigger With Education</h3>
<p class="text-gray-600 mb-4">
From a textbook to a teacher's guidance, your support fuels a child's imagination and ambition. Donate today to help them reach for their dreams.
</p>
<a href="#donate" class="text-purple-600 font-semibold hover:underline">Donate now →</a>
</div>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section id="testimonials" class="py-20 bg-white">
<div class="container mx-auto px-4 text-center">
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">What People Say About Us</h2>
<p class="text-lg text-gray-600 mb-12 max-w-2xl mx-auto">
Hear from our incredible donors about their experience and the impact they've made.
</p>
<div class="grid md:grid-cols-3 gap-8">
<!-- Testimonial 1 -->
<div class="testimonial-card bg-gray-50 p-6 rounded-2xl shadow-sm border border-gray-200">
<div class="flex items-center justify-center mb-4">
<img src="https://placehold.co/80x80/2a3547/ffffff?text=P" alt="Priya" class="w-16 h-16 rounded-full object-cover border-4 border-white">
</div>
<p class="text-gray-700 italic mb-4">
"I was so impressed to see how my small donation directly impacted a child's education. The transparency of the Emvior Foundation's work allowed me to see exactly where my money went."
</p>
<p class="font-semibold text-gray-800">- Priya, a regular donor</p>
</div>
<!-- Testimonial 2 -->
<div class="testimonial-card bg-gray-50 p-6 rounded-2xl shadow-sm border border-gray-200">
<div class="flex items-center justify-center mb-4">
<img src="https://placehold.co/80x80/2a3547/ffffff?text=A" alt="Amit" class="w-16 h-16 rounded-full object-cover border-4 border-white">
</div>
<p class="text-gray-700 italic mb-4">
"My family has always been committed to giving back, but with Emvior Foundation, we can see the real difference our support makes. This isn't just a charity; it's a lifeline that gives people a fighting chance at a healthy life."
</p>
<p class="font-semibold text-gray-800">- Amit, a founding supporter</p>
</div>
<!-- Testimonial 3 -->
<div class="testimonial-card bg-gray-50 p-6 rounded-2xl shadow-sm border border-gray-200">
<div class="flex items-center justify-center mb-4">
<img src="https://placehold.co/80x80/2a3547/ffffff?text=L" alt="Leena" class="w-16 h-16 rounded-full object-cover border-4 border-white">
</div>
<p class="text-gray-700 italic mb-4">
"I donate to the Emvior Foundation because I believe no child should go hungry. It's incredibly rewarding to see the photos and stories of the healthy meals being distributed. Their transparent approach gives me confidence that my contribution is directly nourishing a child."
</p>
<p class="font-semibold text-gray-800">- Leena, a passionate supporter</p>
</div>
</div>
</div>
</section>
<!-- Footer Section -->
<footer class="bg-gray-800 text-white py-12">
<div class="container mx-auto px-4 text-center">
<div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
<div class="text-gray-400">© 2025 Emvior Foundation. All rights reserved.</div>
<div class="space-x-4">
<a href="#" class="text-gray-400 hover:text-white transition-colors">Privacy Policy</a>
<a href="#" class="text-gray-400 hover:text-white transition-colors">Terms of Service</a>
</div>
</div>
</div>
</footer>
</body>
</html>