294 lines
16 KiB
HTML
294 lines
16 KiB
HTML
<!doctype html>
|
|
<html lang="en" class="scroll-smooth">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Root & Reef | Restore Our Coastal Forests</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<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=Playfair+Display:ital,wght@0,700;1,700&family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--forest-deep: #1a3c34;
|
|
--earth-clay: #9c6644;
|
|
--mist-white: #f8f9fa;
|
|
}
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background-color: var(--mist-white);
|
|
color: #1a1a1a;
|
|
}
|
|
h1, h2, h3, .serif {
|
|
font-family: 'Playfair Display', serif;
|
|
}
|
|
.glass-card {
|
|
background: rgba(255, 255, 255, 0.8);
|
|
backdrop-filter: blur(12px);
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
}
|
|
.reveal {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
transition: all 0.8s ease-out;
|
|
}
|
|
.reveal.active {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
.btn-gradient {
|
|
background: linear-gradient(135deg, #2d5a27 0%, #1a3c34 100%);
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
.btn-gradient:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 20px rgba(26, 60, 52, 0.2);
|
|
}
|
|
.impact-number {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="antialiased">
|
|
|
|
<!-- Navigation -->
|
|
<nav class="fixed w-full z-50 bg-white/80 backdrop-blur-md border-b border-gray-100">
|
|
<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">
|
|
<span class="text-2xl font-bold text-[#1a3c34] tracking-tight">ROOT & REEF</span>
|
|
</div>
|
|
<div class="hidden md:flex space-x-8 items-center">
|
|
<a href="#about" class="text-sm font-semibold text-gray-600 hover:text-[#1a3c34] transition">Our Mission</a>
|
|
<a href="#impact" class="text-sm font-semibold text-gray-600 hover:text-[#1a3c34] transition">Our Impact</a>
|
|
<a href="#donate" class="px-6 py-2 btn-gradient text-white text-sm font-bold rounded-full">Donate Now</a>
|
|
</div>
|
|
<div class="md:hidden">
|
|
<button class="text-gray-600" id="mobile-menu-btn">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<header class="relative min-h-screen flex items-center pt-16 overflow-hidden">
|
|
<div class="absolute inset-0 z-0">
|
|
<img src="https://images.pexels.com/photos/35125738/pexels-photo-35125738.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200" alt="Lush mangrove forest with intricate root systems in Krabi, Thailand." class="w-full h-full object-cover scale-105">
|
|
<div class="absolute inset-0 bg-gradient-to-r from-black/70 via-black/30 to-transparent"></div>
|
|
</div>
|
|
|
|
<div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full">
|
|
<div class="max-w-2xl">
|
|
<span class="inline-block px-3 py-1 mb-6 text-xs font-bold tracking-widest uppercase bg-emerald-500 text-white rounded">Global Restoration Initiative</span>
|
|
<h1 class="text-5xl md:text-8xl font-bold text-white mb-6 leading-tight">Healing the Coastline, One Root at a Time.</h1>
|
|
<p class="text-lg md:text-xl text-gray-200 mb-10 leading-relaxed max-w-xl">
|
|
Coastal ecosystems are our first line of defense. We are restoring mangrove forests and seagrass meadows to protect biodiversity and combat rising tides.
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row gap-4">
|
|
<a href="#donate" class="btn-gradient px-8 py-4 text-white font-bold rounded-md text-center">Support the Movement</a>
|
|
<a href="#about" class="px-8 py-4 bg-white/10 backdrop-blur-md border border-white/30 text-white font-bold rounded-md text-center hover:bg-white/20 transition">Learn More</a>
|
|
</div>
|
|
<div class="mt-12 flex items-center space-x-3 text-white/70 text-xs">
|
|
<img src="https://images.pexels.com/photos/35125738/pexels-photo-35125738.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200" alt="" class="w-8 h-8 rounded object-cover">
|
|
<p>Photo by <a href="https://www.pexels.com/photo/dense-mangrove-forest-in-krabi-thailand-35125738/" class="underline hover:text-white">Siarhei Nester</a> on Pexels</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Stats Section -->
|
|
<section id="impact" class="py-20 bg-[#1a3c34] text-white">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
|
|
<div>
|
|
<div class="text-4xl md:text-6xl font-bold mb-2 impact-number">150K+</div>
|
|
<div class="text-emerald-200 text-sm uppercase tracking-widest">Saplings Planted</div>
|
|
</div>
|
|
<div>
|
|
<div class="text-4xl md:text-6xl font-bold mb-2 impact-number">12</div>
|
|
<div class="text-emerald-200 text-sm uppercase tracking-widest">Countries Reached</div>
|
|
</div>
|
|
<div>
|
|
<div class="text-4xl md:text-6xl font-bold mb-2 impact-number">40%</div>
|
|
<div class="text-emerald-200 text-sm uppercase tracking-widest">Biodiversity Increase</div>
|
|
</div>
|
|
<div>
|
|
<div class="text-4xl md:text-6xl font-bold mb-2 impact-number">2M</div>
|
|
<div class="text-emerald-200 text-sm uppercase tracking-widest">Tons CO2 Sequestered</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Problem/Solution Section -->
|
|
<section id="about" class="py-24 bg-white">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="grid md:grid-cols-2 gap-16 items-center">
|
|
<div class="reveal">
|
|
<h2 class="text-4xl md:text-5xl font-bold mb-8 text-[#1a3c34]">The Coastal Crisis is Real.</h2>
|
|
<p class="text-gray-600 mb-6 text-lg leading-relaxed">
|
|
Coastal erosion and habitat loss are accelerating at an unprecedented rate. Mangroves and seagrasses—nature's most efficient carbon sinks—are being destroyed by unsustainable development and rising temperatures.
|
|
</p>
|
|
<p class="text-gray-600 mb-8 text-lg leading-relaxed">
|
|
When these habitats vanish, we lose more than just scenery. We lose natural storm barriers, nurseries for marine life, and critical cooling systems for our oceans.
|
|
</p>
|
|
<div class="border-l-4 border-[#9c6644] pl-6 py-2">
|
|
<p class="italic text-gray-700">"We aren't just planting trees; we are building the infrastructure of survival for our coastal communities."</p>
|
|
<p class="mt-2 font-bold">— Dr. Elena Vance, Lead Ecologist</p>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-4 reveal">
|
|
<div class="bg-gray-50 p-8 rounded-2xl flex flex-col justify-center">
|
|
<div class="text-3xl mb-4">🌊</div>
|
|
<h3 class="text-xl font-bold mb-2">Storm Protection</h3>
|
|
<p class="text-sm text-gray-500">Mangroves reduce wave energy by up to 66%.</p>
|
|
</div>
|
|
<div class="bg-gray-50 p-8 rounded-2xl flex flex-col justify-center mt-8">
|
|
<div class="text-3xl mb-4">🐟</div>
|
|
<h3 class="text-xl font-bold mb-2">Fisheries</h3>
|
|
<p class="text-sm text-gray-500">Over 70% of commercial fish species rely on these habitats.</p>
|
|
</div>
|
|
<div class="bg-gray-50 p-8 rounded-2xl flex flex-col justify-center">
|
|
<div class="text-3xl mb-4">🌡️</div>
|
|
<h3 class="text-xl font-bold mb-2">Climate Fix</h3>
|
|
<p class="text-sm text-gray-500">Seagrasses sequester carbon 35x faster than tropical forests.</p>
|
|
</div>
|
|
<div class="bg-gray-50 p-8 rounded-2xl flex flex-col justify-center mt-8">
|
|
<div class="text-3xl mb-4">🏘️</div>
|
|
<h3 class="text-xl font-bold mb-2">Livelihoods</h3>
|
|
<p class="text-sm text-gray-500">Empowering 5,000+ local coastal residents.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Donation Section -->
|
|
<section id="donate" class="py-24 bg-gray-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-4xl md:text-6xl font-bold mb-4">Your Contribution Matters</h2>
|
|
<p class="text-gray-600 max-w-2xl mx-auto">Every dollar directly funds nursery maintenance, community education, and reforestation projects in high-risk zones.</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
|
|
<!-- Tier 1 -->
|
|
<div class="glass-card p-10 rounded-3xl border-2 border-transparent hover:border-[#9c6644] transition-all group">
|
|
<div class="text-emerald-700 mb-4">🌱</div>
|
|
<h3 class="text-2xl font-bold mb-2">The Seedling</h3>
|
|
<div class="text-4xl font-bold mb-6">$25</div>
|
|
<ul class="text-gray-600 mb-8 space-y-3 text-sm">
|
|
<li class="flex items-center"><svg class="w-4 h-4 mr-2 text-green-500" fill="currentColor" viewBox="0 0 20 20"><path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"></path></svg>
|
|
Plant 5 Mangrove Saplings
|
|
</ul>
|
|
<button class="w-full py-3 rounded-xl border-2 border-black font-bold group-hover:bg-black group-hover:text-white transition">Contribute $25</button>
|
|
</div>
|
|
|
|
<!-- Tier 2 -->
|
|
<div class="glass-card p-10 rounded-3xl border-2 border-[#9c6644] transform scale-105 shadow-2xl bg-white">
|
|
<div class="text-emerald-700 mb-4">🌳</div>
|
|
<h3 class="text-2xl font-bold mb-2">The Grove</h3>
|
|
<div class="text-4xl font-bold mb-6">$100</div>
|
|
<ul class="text-gray-600 mb-8 space-y-3 text-sm">
|
|
<li class="flex items-center"><svg class="w-4 h-4 mr-2 text-green-500" fill="currentColor" viewBox="0 0 20 20"><path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"></path></svg>
|
|
Establish 1 Acre of Seagrass
|
|
</ul>
|
|
<button class="w-full py-3 rounded-xl bg-[#9c6644] text-white font-bold hover:bg-[#7a5235] transition">Contribute $100</button>
|
|
</div>
|
|
|
|
<!-- Tier 3 -->
|
|
<div class="glass-card p-10 rounded-3xl border-2 border-transparent hover:border-[#9c6644] transition-all group">
|
|
<div class="text-emerald-700 mb-4">🌊</div>
|
|
<h3 class="text-2xl font-bold mb-2">The Reef</h3>
|
|
<div class="text-4xl font-bold mb-6">$500</div>
|
|
<ul class="text-gray-600 mb-8 space-y-3 text-sm">
|
|
<li class="flex items-center"><svg class="w-4 h-4 mr-2 text-green-500" fill="currentColor" viewBox="0 0 20 20"><path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"></path></svg>
|
|
Fund a Community Nursery
|
|
</ul>
|
|
<button class="w-full py-3 rounded-xl border-2 border-black font-bold group-hover:bg-black group-hover:text-white transition">Contribute $500</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-16 text-center">
|
|
<p class="text-gray-500 mb-4">Prefer a monthly commitment?</p>
|
|
<button class="px-10 py-4 rounded-full bg-gray-900 text-white font-bold">Set up Monthly Giving</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="bg-[#1a1a1a] text-white py-16">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="grid md:grid-cols-4 gap-12 mb-12">
|
|
<div class="col-span-2">
|
|
<h2 class="text-3xl font-bold mb-6">ROOT & REEF</h2>
|
|
<p class="text-gray-400 max-w-md">
|
|
A non-profit organization dedicated to the restoration of global coastal ecosystems. We believe that nature is our best technology for a resilient future.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-bold mb-4">Contact</h4>
|
|
<p class="text-gray-400 text-sm">hello@rootandreef.org</p>
|
|
<p class="text-gray-400 text-sm">+1 (555) 987-6543</p>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-bold mb-4">Legal</h4>
|
|
<ul class="text-gray-400 text-sm space-y-2">
|
|
<li><a href="#" class="hover:text-white">Privacy Policy</a></li>
|
|
<li><a href="#" class="hover:text-white">Terms of Service</a></li>
|
|
<li><a href="#" class="hover:text-white">Tax Status (501c3)</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="border-t border-gray-800 pt-8 text-center text-gray-500 text-xs">
|
|
© 2024 Root & Reef Initiative. All rights reserved. Seed-61ae4368bba2037e
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// Scroll Animation Logic
|
|
const observerOptions = {
|
|
threshold: 0.1
|
|
};
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('active');
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
document.querySelectorAll('.reveal').forEach(el => {
|
|
observer.observe(el);
|
|
});
|
|
|
|
// Mobile Menu Toggle
|
|
const mobileBtn = document.getElementById('mobile-menu-btn');
|
|
const nav = document.querySelector('.md\\:flex');
|
|
|
|
// Simple alert for donation buttons to simulate interactivity
|
|
document.querySelectorAll('button').forEach(btn => {
|
|
btn.addEventListener('click', (e) => {
|
|
if(btn.innerText.includes('Donate') || btn.innerText.includes('Contribute')) {
|
|
e.preventDefault();
|
|
alert("Redirecting to our secure donation portal... Thank you for your support!");
|
|
}
|
|
});
|
|
});
|
|
|
|
// Smooth scroll for anchors
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
anchor.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
document.querySelector(this.getAttribute('href')).scrollIntoView({
|
|
behavior: 'smooth'
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
<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 66.67s<br>Model: unsloth/gemma-4-12B-it-qat-GGUF:Q4_K_XL</div></body>
|
|
</html> |