206 lines
13 KiB
HTML
206 lines
13 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>The Green Canopy Initiative | Urgent Support</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
/* Custom styles for a sophisticated, grounded look */
|
|
:root {
|
|
--color-primary: #10b981; /* Emerald Green */
|
|
--color-secondary: #059669; /* Darker Green */
|
|
}
|
|
.btn-primary {
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
|
|
}
|
|
.btn-primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba(16, 185, 129, 0.6);
|
|
}
|
|
.hero-image-overlay {
|
|
background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.85) 100%);
|
|
}
|
|
.card-hover-effect {
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
.card-hover-effect:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
|
|
}
|
|
/* Simple focus ring enhancement for accessibility */
|
|
*:focus {
|
|
outline: 4px solid var(--color-primary);
|
|
outline-offset: 2px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="font-sans bg-gray-50 text-gray-800">
|
|
|
|
<!-- Navigation Bar -->
|
|
<header class="sticky top-0 z-50 bg-white shadow-lg">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between items-center h-16">
|
|
<div class="flex items-center">
|
|
<div class="text-2xl font-extrabold text-gray-900 tracking-tight">
|
|
The Green Canopy
|
|
</div>
|
|
<p class="ml-2 text-xs text-emerald-600 font-medium hidden sm:block">Planting Hope.</p>
|
|
</div>
|
|
<nav class="flex space-x-4">
|
|
<a href="#about" class="text-sm font-medium text-gray-600 hover:text-emerald-600 transition duration-150 p-2 border-b-2 border-transparent hover:border-emerald-600">About Us</a>
|
|
<a href="#impact" class="text-sm font-medium text-gray-600 hover:text-emerald-600 transition duration-150 p-2 border-b-2 border-transparent hover:border-emerald-600">Impact</a>
|
|
<a href="#donate" class="text-sm font-medium text-white bg-emerald-600 hover:bg-emerald-700 px-4 py-2 rounded-lg shadow-md transition duration-150 focus:ring-2 focus:ring-emerald-500">Donate Now</a>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<!-- Hero Section -->
|
|
<section id="hero" class="relative h-[70vh] lg:h-[85vh] flex items-center justify-center bg-cover bg-center"
|
|
style="background-image: url('https://images.pexels.com/photos/4835636/pexels-photo-4835636.jpeg?auto=compress&cs=tinysci&w=800');">
|
|
<div class="absolute inset-0 hero-image-overlay"></div>
|
|
<div class="relative z-10 text-center max-w-4xl px-4">
|
|
<h1 class="text-5xl md:text-7xl font-extrabold text-white mb-4 leading-tight drop-shadow-lg">
|
|
Restore Life. Cultivate Tomorrow.
|
|
</h1>
|
|
<p class="text-xl md:text-2xl text-gray-100 mb-8 font-light drop-shadow-md">
|
|
Join The Green Canopy Initiative to reforest critical habitats and bring ecological balance back to vulnerable communities. Every seed matters.
|
|
</p>
|
|
<div class="flex justify-center space-x-4">
|
|
<a href="#donate" class="btn-primary bg-emerald-600 text-white text-lg font-semibold px-8 py-3 rounded-full shadow-xl transition duration-300 focus:ring-4 focus:ring-emerald-300">
|
|
Give Today
|
|
</a>
|
|
<a href="#about" class="bg-white/20 text-white text-lg font-semibold px-8 py-3 rounded-full border-2 border-white hover:bg-white/30 transition duration-300">
|
|
Learn Our Story
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- Image Attribution -->
|
|
<div class="absolute bottom-4 left-4 text-white text-sm opacity-80">
|
|
Photo by <a href="https://www.pexels.com/search/photos/green-forest-pexels/" target="_blank" class="hover:text-white underline">Pexels</a> on <a href="https://www.pexels.com/search/photos/green-forest-pexels/" target="_blank" class="hover:text-white underline">Pexels</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- About Section -->
|
|
<section id="about" class="py-20 lg:py-32 bg-white">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-16">
|
|
<h2 class="text-sm uppercase tracking-widest text-emerald-600 font-bold">OUR MISSION</h2>
|
|
<p class="text-5xl lg:text-6xl font-extrabold text-gray-900 mt-2">
|
|
Reforesting a Better World
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-3 gap-10">
|
|
<!-- Pillar 1 -->
|
|
<div class="bg-gray-50 p-8 rounded-xl shadow-lg border-t-4 border-emerald-500 card-hover-effect">
|
|
<div class="text-5xl mb-4 text-emerald-600">🌳</div>
|
|
<h3 class="text-2xl font-bold mb-3 text-gray-900">Ecological Restoration</h3>
|
|
<p class="text-gray-600">We partner with local communities to plant native, resilient tree species, reversing deforestation and restoring vital biodiversity hotspots across vulnerable landscapes.</p>
|
|
</div>
|
|
<!-- Pillar 2 -->
|
|
<div class="bg-gray-50 p-8 rounded-xl shadow-lg border-t-4 border-emerald-500 card-hover-effect">
|
|
<div class="text-5xl mb-4 text-emerald-600">💧</div>
|
|
<h3 class="text-2xl font-bold mb-3 text-gray-900">Water Security</h3>
|
|
<p class="text-gray-600">Healthy forests are natural sponges. Our planting efforts help replenish groundwater, providing sustainable water sources for local populations.</p>
|
|
</div>
|
|
<!-- Pillar 3 -->
|
|
<div class="bg-gray-50 p-8 rounded-xl shadow-lg border-t-4 border-emerald-500 card-hover-effect">
|
|
<div class="text-5xl mb-4 text-emerald-600">🤝</div>
|
|
<h3 class="text-2xl font-bold mb-3 text-gray-900">Community Empowerment</h3>
|
|
<p class="text-gray-600">We work alongside indigenous and local groups, ensuring that reforestation projects are community-owned and sustainable for the long term.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Impact/Metrics Section -->
|
|
<section id="impact" class="py-20 lg:py-32 bg-emerald-50">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-16">
|
|
<h2 class="text-sm uppercase tracking-widest text-emerald-700 font-bold">OUR REACH</h2>
|
|
<p class="text-5xl lg:text-6xl font-extrabold text-emerald-900 mt-2">
|
|
Measuring Our Environmental Footprint
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid lg:grid-cols-3 gap-10 text-center">
|
|
<!-- Metric 1 -->
|
|
<div class="p-8 bg-white rounded-xl shadow-xl border-b-4 border-emerald-400">
|
|
<div class="text-6xl font-extrabold text-emerald-600 mb-2">+12,000</div>
|
|
<p class="text-gray-600 text-xl font-semibold">Trees Planted to Date</p>
|
|
</div>
|
|
<!-- Metric 2 -->
|
|
<div class="p-8 bg-white rounded-xl shadow-xl border-b-4 border-emerald-400">
|
|
<div class="text-6xl font-extrabold text-emerald-600 mb-2">45+</div>
|
|
<p class="text-gray-600 text-xl font-semibold">Active Project Sites</p>
|
|
</div>
|
|
<!-- Metric 3 -->
|
|
<div class="p-8 bg-white rounded-xl shadow-xl border-b-4 border-emerald-400">
|
|
<div class="text-6xl font-extrabold text-emerald-600 mb-2">$2.1M+</div>
|
|
<p class="text-gray-600 text-xl font-semibold">Total Funds Raised</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center mt-16">
|
|
<p class="text-lg text-gray-600 mb-4">Your contribution fuels these tangible results. Help us reach our next milestone.</p>
|
|
<a href="#donate" class="btn-primary bg-emerald-600 text-white text-lg font-semibold px-10 py-4 rounded-full shadow-lg transition duration-300 focus:ring-4 focus:ring-emerald-300">
|
|
See The Impact
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Donation Form Section -->
|
|
<section id="donate" class="py-20 lg:py-28 bg-gray-900">
|
|
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-12">
|
|
<h2 class="text-sm uppercase tracking-widest text-emerald-400 font-bold">SUPPORT</h2>
|
|
<p class="text-5xl lg:text-6xl font-extrabold text-white mt-2">
|
|
Sponsor A Seedling
|
|
</p>
|
|
<p class="text-lg mt-3 text-gray-300">
|
|
Your generosity directly translates into life-giving greenery on the ground.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="bg-white p-8 lg:p-12 rounded-xl shadow-2xl border-t-8 border-emerald-500">
|
|
<form id="donationForm" class="space-y-6">
|
|
|
|
<!-- Donation Amount Selection -->
|
|
<div>
|
|
<label for="amount" class="block text-sm font-medium text-gray-700 mb-2">Select Donation Tier</label>
|
|
<div class="flex flex-wrap gap-3">
|
|
<input type="radio" id="tier1" name="donationAmount" value="25" class="hidden peer" required>
|
|
<label for="tier1" class="py-2 px-4 border border-gray-300 rounded-lg text-center cursor-pointer transition duration-150 bg-white hover:bg-emerald-50 peer-checked:bg-emerald-600 text-white font-semibold">
|
|
$25 - Plant 10 Trees
|
|
</label>
|
|
<input type="radio" id="tier2" name="donationAmount" value="100" class="hidden peer">
|
|
<label for="tier2" class="py-2 px-4 border border-gray-300 rounded-lg text-center cursor-pointer transition duration-150 bg-white hover:bg-emerald-50 peer-checked:bg-emerald-600 text-white font-semibold">
|
|
$100 - Sponsor a Grove
|
|
</label>
|
|
<input type="radio" id="tier3" name="donationAmount" value="500" class="hidden peer">
|
|
<label for="tier3" class="py-2 px-4 border border-gray-300 rounded-lg text-center cursor-pointer transition duration-150 bg-white hover:bg-emerald-50 peer-checked:bg-emerald-600 text-white font-semibold">
|
|
$500 - Fund a Patch
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Personal Info -->
|
|
<div>
|
|
<label for="name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
|
|
<input type="text" id="name" name="name" required class="mt-1 block w-full px-3 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-emerald-500 focus:border-emerald-500 transition duration-150" placeholder="Your Full Name">
|
|
</div>
|
|
|
|
<div>
|
|
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
|
|
<input type="email" id="email" name="email" required class="mt-1 block w-full px-3 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-emerald-500 focus:border-emerald-500 transition duration-150" placeholder="you@example.com">
|
|
</div>
|
|
|
|
<!-- Payment Placeholder (Simulated) -->
|
|
<div>
|
|
<label for="card" class="block text-sm font-medium text-gray-700 mb-1">Payment Method (Simulated)</label>
|
|
<input type="text" id="card" name="card" required class="mt-1 block w-full px-3 py-3 border border-gray-30<div style="position:fixed;right:12px;bottom:12px;z-index:2147483647;background:rgba(17,24,39,.92);color:#fff;padding:8px 10px;border-radius:10px;font:12px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;box-shadow:0 8px 20px rgba(0,0,0,.28)">Generated in 29.05s</div> |