190 lines
12 KiB
HTML
190 lines
12 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 Community Hearth Project - Warmth for All</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
:root {
|
|
--color-primary: #B37E4A; /* Warm, earthy gold/brown */
|
|
--color-secondary: #4A90E2; /* Calming blue for action */
|
|
}
|
|
.font-display {
|
|
font-family: 'Playfair Display', serif;
|
|
}
|
|
.font-body {
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
.btn-primary {
|
|
background-color: var(--color-primary);
|
|
transition: background-color 0.3s ease, transform 0.2s ease;
|
|
box-shadow: 0 4px 15px rgba(179, 126, 74, 0.4);
|
|
}
|
|
.btn-primary:hover {
|
|
background-color: #9c663e;
|
|
transform: translateY(-1px);
|
|
}
|
|
.progress-bar-fill {
|
|
transition: width 1s ease-out;
|
|
}
|
|
/* Subtle fade-in for content */
|
|
.content-fade-in {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
|
|
}
|
|
.content-fade-in.visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
</style>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Playfair+Display:wght@700;900&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body class="bg-gray-50 text-gray-800 font-body antialiased">
|
|
|
|
<!-- Navigation -->
|
|
<header class="sticky top-0 z-30 bg-white shadow-lg">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
|
|
<div class="text-2xl font-display text-gray-900 tracking-tighter">
|
|
Hearth<span class="text-[var(--color-primary)]">.</span>
|
|
</div>
|
|
<nav class="hidden md:block">
|
|
<a href="#mission" class="text-sm font-medium text-gray-600 hover:text-[var(--color-primary)] px-3 transition">Our Cause</a>
|
|
<a href="#impact" class="text-sm font-medium text-gray-600 hover:text-[var(--color-primary)] px-3 transition">Impact</a>
|
|
<a href="#donate" class="text-sm font-medium bg-[var(--color-secondary)] text-white px-4 py-2 rounded-full shadow-md hover:bg-blue-600 transition focus:outline-none focus:ring-2 focus:ring-blue-500">Donate Now</a>
|
|
</nav>
|
|
<button class="md:hidden text-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-500">
|
|
<!-- Hamburger Icon -->
|
|
<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 12h16M4 18h16"></path></svg>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="bg-gray-100 pt-16 pb-20 lg:pt-24 lg:pb-32">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="lg:flex lg:items-center lg:justify-between">
|
|
<div class="lg:w-3/5">
|
|
<h1 class="text-6xl lg:text-7xl font-display font-bold text-gray-900 leading-tight mb-4">
|
|
Bringing Warmth to Every Home.
|
|
</h1>
|
|
<p class="text-xl lg:text-2xl text-gray-600 mb-8">
|
|
The Community Hearth provides essential warmth, resources, and stability to neighbors facing hardship during cold seasons. Your support fuels our mission.
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row gap-4">
|
|
<a href="#donate" class="btn-primary text-white text-lg font-semibold px-10 py-4 rounded-lg shadow-xl hover:shadow-2xl focus:outline-none focus:ring-4 ring-offset-2 ring-offset-white ring-opacity-50">
|
|
Donate Today
|
|
</a>
|
|
<a href="#impact" class="text-center text-lg font-semibold text-gray-700 bg-white border-2 border-gray-300 px-10 py-4 rounded-lg shadow-md hover:bg-gray-50 transition focus:outline-none focus:ring-2 focus:ring-gray-300">
|
|
See Our Work
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="lg:w-2/5 mt-10 lg:mt-0">
|
|
<div class="relative bg-gray-200 rounded-xl shadow-2xl overflow-hidden transform hover:scale-[1.02] transition-transform duration-500">
|
|
<!-- Placeholder for a powerful, warm image -->
|
|
<img src="https://images.unsplash.com/photo-1551537856-b6b758a53a7e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Volunteers helping distribute blankets in a community setting" class="w-full h-96 object-cover">
|
|
<div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-30 p-6">
|
|
<p class="text-white text-3xl font-display font-bold drop-shadow-lg">Warmth Shared.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Donation Progress & Impact Section -->
|
|
<section id="impact" 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-[var(--color-primary)] font-semibold mb-2">Our Current Need</h2>
|
|
<p class="text-4xl lg:text-5xl font-display font-bold text-gray-900 leading-snug">
|
|
Fueling Community Resilience
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid lg:grid-cols-2 gap-12 items-start">
|
|
<!-- Donation Progress Bar -->
|
|
<div class="lg:sticky lg:top-20">
|
|
<div class="bg-white p-8 lg:p-10 rounded-xl shadow-2xl border-t-4 border-[var(--color-primary)]">
|
|
<h3 class="text-3xl font-display font-bold mb-4 text-gray-900">The Campaign Goal</h3>
|
|
<div class="mb-4">
|
|
<div class="flex justify-between mb-1 text-sm font-medium">
|
|
<span>Raised: <span id="raised-amount">$42,500</span></span>
|
|
<span>Goal: $75,000</span>
|
|
</div>
|
|
<div class="w-full bg-gray-200 rounded-full h-3.5">
|
|
<div id="progress-bar" class="progress-bar-fill h-3.5 rounded-full bg-[var(--color-secondary)]" style="width: 56.67%"></div>
|
|
</div>
|
|
</div>
|
|
<p class="text-lg italic text-gray-600 mb-6">Every contribution moves us closer to providing consistent warmth and resources for our neighbors.</p>
|
|
|
|
<div class="space-y-4">
|
|
<button onclick="simulateDonation(25)" class="btn-primary w-full py-4 rounded-lg text-white text-lg font-semibold focus:outline-none focus:ring-4 ring-offset-2 ring-offset-white">
|
|
Give $25 Now
|
|
</button>
|
|
<button onclick="simulateDonation(100)" class="btn-primary bg-blue-600 hover:bg-blue-700 w-full py-4 rounded-lg text-white text-lg font-semibold focus:outline-none focus:ring-4 ring-offset-2 ring-offset-white">
|
|
Give $100 Now
|
|
</button>
|
|
<a href="#donate" class="block w-full text-center py-3 border-2 border-[var(--color-primary)] text-[var(--color-primary)] hover:bg-gray-50 transition rounded-lg text-lg font-semibold focus:outline-none focus:ring-2 ring-offset-2 ring-[var(--color-primary)]">
|
|
Customize Donation
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Impact Metrics -->
|
|
<div class="grid sm:grid-cols-1 gap-8 lg:gap-0">
|
|
<div class="bg-white p-8 rounded-xl shadow-lg border-l-4 border-yellow-500 transition duration-300 hover:shadow-xl">
|
|
<p class="text-lg font-semibold text-gray-500 mb-1">Families Supported</p>
|
|
<p class="text-5xl font-display font-extrabold text-gray-900">150+</p>
|
|
<p class="text-sm mt-2 text-gray-500">Families receiving resource packages this season.</p>
|
|
</div>
|
|
<div class="bg-white p-8 rounded-xl shadow-lg border-l-4 border-green-500 transition duration-300 hover:shadow-xl">
|
|
<p class="text-lg font-semibold text-gray-500 mb-1">Meals Provided</p>
|
|
<p class="text-5xl font-display font-extrabold text-gray-900">850+</p>
|
|
<p class="text-sm mt-2 text-gray-500">Hot meals served through our local kitchen network.</p>
|
|
</div>
|
|
<div class="bg-white p-8 rounded-xl shadow-lg border-l-4 border-indigo-500 transition duration-300 hover:shadow-xl">
|
|
<p class="text-lg font-semibold text-gray-500 mb-1">Hours of Aid</p>
|
|
<p class="text-5xl font-display font-extrabold text-gray-900">450+</p>
|
|
<p class="text-sm mt-2 text-gray-500">Volunteers dedicate hours to community outreach.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Mission Section -->
|
|
<section id="mission" class="py-20 lg:py-28 bg-gray-100">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-12 content-fade-in">
|
|
<h2 class="text-sm uppercase tracking-widest text-[var(--color-primary)] font-semibold mb-2">Our Foundation</h2>
|
|
<p class="text-4xl lg:text-5xl font-display font-bold text-gray-900">
|
|
A Beacon of Community Support
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid lg:grid-cols-3 gap-8">
|
|
<!-- Value 1 -->
|
|
<div class="bg-white p-8 rounded-xl shadow-lg text-center content-fade-in">
|
|
<div class="mx-auto w-16 h-16 bg-[var(--color-primary)] rounded-full flex items-center justify-center mb-4 shadow-md">
|
|
<!-- Icon: Heart/Home -->
|
|
<svg class="w-8 h-8 text-white" 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="M3 12l2-2m0 0l7-7 7 7m-7-7v14"></path></svg>
|
|
</div>
|
|
<h3 class="text-2xl font-display font-semibold mb-3 text-gray-900">Dignity First</h3>
|
|
<p class="text-gray-600">We ensure that aid is delivered with respect, recognizing the inherent worth of every individual in our community.</p>
|
|
</div>
|
|
<!-- Value 2 -->
|
|
<div class="bg-white p-8 rounded-xl shadow-lg text-center content-fade-in">
|
|
<div class="mx-auto w-16 h-16 bg-[var(--color-secondary)] rounded-full flex items-center justify-center mb-4 shadow-md">
|
|
<!-- Icon: Hands/Helping -->
|
|
<svg class="w-8 h-8 text-white" 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="M17 20h5v-2a3 3 0 00-5.35-1.848L12 11l-4.7 8.168a3 3 0 01-5.35 1.848H3m18 0a3 3 0 01-3-3V7a3 3 0 00-3-3H3a3 3 0 01-3-3v14a3 3 0 01-3 3h-3m18 0h-3"></path></svg>
|
|
</div>
|
|
<h3 class="text-2xl font-display font-semibold mb-3 text-gray-900">Holistic Support</h3>
|
|
<p class="text-gray-600">Beyond immediate relief, we connect individuals with long-term resources and support systems for lasting change.</p>
|
|
</div>
|
|
<!-- Value 3 -->
|
|
<div class="bg-white p-8 rounded-xl shadow-lg text-center content-fade-in">
|
|
<div class="mx-auto w-16 h-16 bg-red-600 rounded-full flex items-<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.41s</div> |