ye
This commit is contained in:
@@ -0,0 +1,359 @@
|
||||
<!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>Rooted | Reclaiming Our Urban Spaces</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:wght@700;900&family=Inter:wght@300;400;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--forest-green: #1b4332;
|
||||
--terracotta: #bc4749;
|
||||
--sage: #b7b7a4;
|
||||
--cream: #f8f9fa;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: var(--cream);
|
||||
color: #2d3436;
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
.hero-gradient {
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(27,67,50,0.7) 100%);
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 1.2s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.hover-lift {
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.hover-lift:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.progress-bar-fill {
|
||||
transition: width 2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--terracotta);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #a03c3e;
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.custom-scroll::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.custom-scroll::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
.custom-scroll::-webkit-scrollbar-thumb {
|
||||
background: var(--forest-green);
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="custom-scroll">
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="fixed w-full z-50 bg-white/90 backdrop-blur-md border-b border-stone-200">
|
||||
<div class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
|
||||
<div class="text-2xl font-black tracking-tighter text-emerald-900">ROOTED.</div>
|
||||
|
||||
<div class="hidden md:flex items-center space-x-10 font-medium text-sm uppercase tracking-widest">
|
||||
<a href="#about" class="hover:text-red-800 transition-colors">Our Mission</a>
|
||||
<a href="#impact" class="hover:text-red-800 transition-colors">Impact</a>
|
||||
<a href="#community" class="hover:text-red-800 transition-colors">Community</a>
|
||||
<a href="#donate" class="bg-emerald-900 text-white px-6 py-2 rounded-full hover:bg-emerald-800 transition-all">Donate Now</a>
|
||||
</div>
|
||||
|
||||
<button class="md:hidden text-emerald-900">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="relative h-screen flex items-center justify-center overflow-hidden">
|
||||
<img src="https://images.pexels.com/photos/11573639/pexels-photo-11573639.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200" alt="Narrow overgrown alley with electric poles and fences, creating a moody atmosphere." class="absolute inset-0 w-full h-full object-cover scale-105" />
|
||||
<div class="absolute inset-0 hero-gradient"></div>
|
||||
|
||||
<div class="relative z-10 text-center px-6 max-w-4xl animate-fade-in">
|
||||
<span class="text-white/90 uppercase tracking-[0.4em] text-xs mb-4 block">The Urban Reforestation Project</span>
|
||||
<h1 class="text-white text-6xl md:text-8xl font-black leading-tight mb-8">Turn Gray Streets Into Green Sanctuaries.</h1>
|
||||
<p class="text-white/80 text-lg md:text-xl mb-10 max-w-2xl mx-auto font-light leading-relaxed">
|
||||
We are transforming concrete deserts into vibrant, edible forests. Join us in cooling our cities, cleaning our air, and nourishing our neighbors.
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
|
||||
<a href="#donate" class="btn-primary text-white px-10 py-5 rounded-full text-lg font-bold">Plant a Tree Today</a>
|
||||
<a href="#about" class="bg-white text-emerald-900 px-10 py-5 rounded-full text-lg font-bold hover:bg-stone-100 transition-colors">Learn Our Story</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="absolute bottom-8 left-8 z-10">
|
||||
<p class="text-white/60 text-xs">Photo by Alfo Medeiros on <a href="https://www.pexels.com/photo/dirt-road-between-fences-11573639/" class="underline decoration-white/30">Pexels</a></p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Impact Counter -->
|
||||
<section id="impact" class="py-24 bg-emerald-900 text-white">
|
||||
<div class="max-w-7xl mx-auto px-6">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-12 text-center">
|
||||
<div class="space-y-2">
|
||||
<div class="text-6xl md:text-8xl font-black mb-4">12,400</div>
|
||||
<p class="text-emerald-100 uppercase tracking-widest text-sm">Trees Planted</p>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<div class="text-6xl md:text-8xl font-black mb-4">42</div>
|
||||
<p class="text-emerald-100 uppercase tracking-widest text-sm">Community Gardens</p>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<div class="text-6xl md:text-8xl font-black mb-4">85%</div>
|
||||
<p class="text-emerald-100 uppercase tracking-widest text-sm">Local Impact Score</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- The Problem Section -->
|
||||
<section id="about" class="py-32 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-6">
|
||||
<div class="grid md:grid-cols-2 gap-16 items-center">
|
||||
<div class="space-y-8">
|
||||
<h2 class="text-4xl md:text-6xl font-bold text-emerald-950">Cities are heating up. <br><span class="text-red-800">We need a cooler way forward.</span></h2>
|
||||
<p class="text-stone-600 leading-relaxed text-lg">
|
||||
Urban heat islands are a growing crisis. As we build more concrete and asphalt, our cities trap heat, increasing energy costs and health risks for the most vulnerable residents.
|
||||
</p>
|
||||
<div class="space-y-4">
|
||||
<div class="flex gap-4">
|
||||
<div class="w-6 h-6 rounded-full bg-emerald-900 flex items-center justify-center text-white text-xs">✓</div>
|
||||
<p class="text-stone-700">Reduction of local temperatures by up to 8°F</p>
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<div class="w-6 h-6 rounded-full bg-emerald-900 flex items-center justify-center text-white text-xs">✓</div>
|
||||
<p class="text-stone-700">Creation of community food sovereignty</p>
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<div class="w-6 h-6 rounded-full bg-emerald-900 flex items-center justify-center text-white text-xs">✓</div>
|
||||
<p class="text-stone-700">Biodiversity restoration in urban corridors</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<div class="bg-stone-100 p-4 rounded-3xl rotate-3">
|
||||
<img src="https://images.unsplash.com/photo-1558905730-271955676380?auto=format&fit=crop&q=80&w=800" alt="Community garden" class="rounded-2xl shadow-2xl" />
|
||||
</div>
|
||||
<div class="absolute -bottom-6 -left-6 bg-white p-8 shadow-xl rounded-2xl border border-stone-100">
|
||||
<p class="italic text-stone-600">"The new community orchard transformed our block from a noisy street to a peaceful sanctuary."</p>
|
||||
<p class="mt-4 font-bold text-emerald-900">— Maria G., Resident</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Campaign Progress -->
|
||||
<section class="py-20 bg-stone-50">
|
||||
<div class="max-w-4xl mx-auto px-6 text-center">
|
||||
<h3 class="text-3xl font-bold mb-8">Current Goal: The "Eastside Forest" Initiative</h3>
|
||||
<div class="bg-white p-8 rounded-3xl shadow-sm border border-stone-200">
|
||||
<div class="flex justify-between mb-4 text-lg font-semibold">
|
||||
<span>$420,000 Raised</span>
|
||||
<span>Goal: $1,000,000</span>
|
||||
</div>
|
||||
<div class="w-full bg-stone-200 h-6 rounded-full overflow-hidden">
|
||||
<div class="progress-bar-fill h-full bg-red-800" style="width: 42%;"></div>
|
||||
</div>
|
||||
<p class="mt-6 text-stone-500 text-sm">Your donation today directly funds 150 new trees and a community tool shed.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Donation Tiers -->
|
||||
<section id="donate" class="py-32 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-6">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-5xl font-black text-emerald-950 mb-4">Choose Your Impact</h2>
|
||||
<p class="text-stone-500">Every dollar helps us build a greener, healthier future.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-8">
|
||||
<!-- Tier 1 -->
|
||||
<div class="p-10 rounded-3xl border-2 border-stone-100 hover-lift bg-stone-50 flex flex-col">
|
||||
<span class="text-emerald-800 font-bold mb-4">The Seedling</span>
|
||||
<div class="text-5xl font-black mb-6">$25</div>
|
||||
<ul class="space-y-4 mb-10 flex-grow text-stone-600">
|
||||
<li>• Plant one native tree</li>
|
||||
<li>• Contribution to soil restoration</li>
|
||||
<li>• Digital certificate of impact</li>
|
||||
</ul>
|
||||
<button class="w-full py-4 rounded-xl border-2 border-emerald-900 text-emerald-900 font-bold hover:bg-emerald-900 hover:text-white transition-all">Select</button>
|
||||
</div>
|
||||
|
||||
<!-- Tier 2 (Featured) -->
|
||||
<div class="p-10 rounded-3xl border-4 border-red-800 hover-lift bg-white shadow-2xl flex flex-col relative overflow-hidden">
|
||||
<div class="absolute top-0 right-0 bg-red-800 text-white px-4 py-1 text-xs font-bold">MOST POPULAR</div>
|
||||
<span class="text-red-800 font-bold mb-4">The Sapling</span>
|
||||
<div class="text-5xl font-black mb-6">$150</div>
|
||||
<ul class="space-y-4 mb-10 flex-grow text-stone-600">
|
||||
<li>• Plant 6 native trees</li>
|
||||
<li>• Sponsor a community garden bench</li>
|
||||
<li>• Name on our "Founders Wall"</li>
|
||||
<li>• Monthly newsletter updates</li>
|
||||
</ul>
|
||||
<button class="w-full py-4 rounded-xl bg-red-800 text-white font-bold hover:bg-red-900 transition-all">Select</button>
|
||||
</div>
|
||||
|
||||
<!-- Tier 3 -->
|
||||
<div class="p-10 rounded-3xl border-2 border-stone-100 hover-lift bg-stone-50 flex flex-col">
|
||||
<span class="text-emerald-800 font-bold mb-4">The Grove</span>
|
||||
<div class="text-5xl font-black mb-6">$1,000</div>
|
||||
<ul class="space-y-4 mb-10 flex-grow text-stone-600">
|
||||
<li>• Fund a full urban forest plot</li>
|
||||
<li>• Sponsor a community workshop</li>
|
||||
<li>• Permanent recognition</li>
|
||||
<li>• Corporate partnership status</li>
|
||||
</ul>
|
||||
<button class="w-full py-4 rounded-xl border-2 border-emerald-900 text-emerald-900 font-bold hover:bg-emerald-900 hover:text-white transition-all">Select</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-20 text-center">
|
||||
<p class="text-stone-500 mb-6">Want to give a custom amount?</p>
|
||||
<div class="max-w-md mx-auto flex gap-2">
|
||||
<input type="number" placeholder="$ Amount" class="flex-grow p-4 rounded-xl border-2 border-stone-200 focus:border-emerald-900 outline-none">
|
||||
<button class="px-8 py-4 bg-emerald-900 text-white rounded-xl font-bold">Donate</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Newsletter -->
|
||||
<section id="community" class="py-24 bg-emerald-900 text-white relative overflow-hidden">
|
||||
<div class="absolute top-0 right-0 w-1/3 h-full bg-emerald-800/50 skew-x-12 translate-x-20"></div>
|
||||
<div class="max-w-7xl mx-auto px-6 relative z-10">
|
||||
<div class="max-w-2xl">
|
||||
<h2 class="text-4xl md:text-6xl font-bold mb-6">Grow With Us.</h2>
|
||||
<p class="text-emerald-100 mb-10 text-lg">Join our mailing list to receive gardening tips, project updates, and stories from the ground. No spam, just seeds of change.</p>
|
||||
<form class="flex flex-col sm:flex-row gap-4">
|
||||
<input type="email" placeholder="Enter your email" class="flex-grow p-4 rounded-xl text-emerald-900 outline-none">
|
||||
<button class="bg-white text-emerald-900 px-10 py-4 rounded-xl font-bold hover:bg-stone-100 transition-colors">Subscribe</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-stone-100 py-16 border-t border-stone-200">
|
||||
<div class="max-w-7xl mx-auto px-6">
|
||||
<div class="grid md:grid-cols-4 gap-12 mb-12">
|
||||
<div class="col-span-1 md:col-span-1">
|
||||
<div class="text-2xl font-black tracking-tighter text-emerald-900 mb-4">ROOTED.</div>
|
||||
<p class="text-stone-500 text-sm">Dedicated to transforming urban environments through community-led forestry and education.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold mb-4">Organization</h4>
|
||||
<ul class="text-stone-500 text-sm space-y-2">
|
||||
<li><a href="#" class="hover:text-emerald-900">Our History</a></li>
|
||||
<li><a href="#" class="hover:text-emerald-900">Careers</a></li>
|
||||
<li><a href="#" class="hover:text-emerald-900">Transparency Report</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold mb-4">Support</h4>
|
||||
<ul class="text-stone-500 text-sm space-y-2">
|
||||
<li><a href="#" class="hover:text-emerald-900">Volunteer</a></li>
|
||||
<li><a href="#" class="hover:text-emerald-900">Partner with Us</a></li>
|
||||
<li><a href="#" class="hover:text-emerald-900">Press Kit</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold mb-4">Connect</h4>
|
||||
<div class="flex space-x-4">
|
||||
<a href="#" class="w-8 h-8 bg-stone-300 rounded-full flex items-center justify-center hover:bg-emerald-900 hover:text-white transition-colors">IG</a>
|
||||
<a href="#" class="w-8 h-8 bg-stone-300 rounded-full flex items-center justify-center hover:bg-emerald-900 hover:text-white transition-colors">TW</a>
|
||||
<a href="#" class="w-8 h-8 bg-stone-300 rounded-full flex items-center justify-center hover:bg-emerald-900 hover:text-white transition-colors">FB</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-t border-stone-200 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
|
||||
<p class="text-stone-400 text-xs">© 2024 Rooted Urban Forestry. A 501(c)(3) nonprofit organization.</p>
|
||||
<div class="flex gap-6 text-xs text-stone-400">
|
||||
<a href="#">Privacy Policy</a>
|
||||
<a href="#">Terms of Service</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Smooth Scroll and simple interactions
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
if (target) {
|
||||
target.scrollIntoView({
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Progress bar animation on load
|
||||
window.addEventListener('load', () => {
|
||||
const bar = document.querySelector('.progress-bar-fill');
|
||||
if(bar) {
|
||||
bar.style.width = '42%';
|
||||
}
|
||||
});
|
||||
|
||||
// Scroll reveal logic
|
||||
const observerOptions = {
|
||||
threshold: 0.1
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('animate-fade-in');
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
document.querySelectorAll('.hover-lift').forEach(el => observer.observe(el));
|
||||
</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 64.64s<br>Model: unsloth/gemma-4-12B-it-qat-GGUF:Q4_K_XL</div></body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 195 KiB |
Reference in New Issue
Block a user