215 lines
14 KiB
HTML
215 lines
14 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Herz für Zukunft: Unterstütze unsere Projekte</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<style>
|
||
/* Custom Configuration for Tailwind */
|
||
tailwind.config = {
|
||
theme: {
|
||
extend: {
|
||
fontFamily: {
|
||
sans: ['Inter', 'sans-serif'],
|
||
serif: ['Playfair Display', 'serif'],
|
||
},
|
||
colors: {
|
||
'impact-red': '#C82424',
|
||
'hope-green': '#4CAF50',
|
||
'deep-blue': '#1A365D',
|
||
'cream-bg': '#FAF9F6',
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* Custom CSS for subtle animation and typography */
|
||
.hero-bg {
|
||
background-image: linear-gradient(to bottom, #e0f2f1 0%, #b2dfdb 100%);
|
||
}
|
||
|
||
.donate-button {
|
||
transition: all 0.3s ease;
|
||
box-shadow: 0 6px 15px rgba(128, 34, 34, 0.4);
|
||
}
|
||
.donate-button:hover {
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 10px 20px rgba(128, 34, 34, 0.6);
|
||
}
|
||
|
||
.progress-bar-fill {
|
||
transition: width 1.5s ease-out;
|
||
}
|
||
</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="font-sans bg-cream-bg text-gray-800 antialiased">
|
||
|
||
<!-- Header / Navigation -->
|
||
<header class="sticky top-0 z-50 bg-white shadow-lg border-b border-gray-100">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between items-center h-16">
|
||
<h1 class="text-3xl font-serif font-black text-deep-blue tracking-wider">
|
||
Herz<span class="text-hope-green">Für</span>Zukunft
|
||
</h1>
|
||
<nav class="hidden md:flex space-x-8 text-deep-blue font-medium">
|
||
<a href="#mission" class="hover:text-impact-red transition duration-150 focus:outline-none focus:ring-2 focus:ring-impact-red p-1">Unsere Mission</a>
|
||
<a href="#projekte" class="hover:text-impact-red transition duration-150 focus:outline-none focus:ring-2 focus:ring-impact-red p-1">Projekte</a>
|
||
<a href="#impact" class="hover:text-impact-red transition duration-150 focus:outline-none focus:ring-2 focus:ring-impact-red p-1">Wirkung</a>
|
||
<a href="#donate" class="px-4 py-2 bg-impact-red text-white rounded-lg hover:bg-red-700 transition duration-300 focus:outline-none focus:ring-4 focus:ring-impact-red/50">Spenden</a>
|
||
</nav>
|
||
<button class="md:hidden p-2 text-deep-blue focus:outline-none focus:ring-2 focus:ring-deep-blue" aria-label="Menü öffnen">
|
||
<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>
|
||
|
||
<main>
|
||
<!-- Hero Section -->
|
||
<section class="hero-bg pt-16 pb-20 border-b border-white">
|
||
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||
<h2 class="text-6xl sm:text-7xl font-serif font-extrabold text-deep-blue leading-tight mb-4 animate-fade-in">
|
||
Jede Tat zählt. <br class="hidden sm:inline"> Hoffnung schenken.
|
||
</h2>
|
||
<p class="text-xl text-gray-700 mb-10 max-w-3xl mx-auto font-medium">
|
||
Wir ermöglichen lebenswichtige Unterstützung für Gemeinschaften, die sie am dringendsten benötigen. Unterstützen Sie unsere Mission – gemeinsam bauen wir eine bessere Zukunft.
|
||
</p>
|
||
<div class="flex justify-center space-x-4">
|
||
<a href="#donate" class="donate-button px-10 py-4 text-xl bg-impact-red text-white font-bold rounded-xl shadow-lg focus:outline-none focus:ring-4 focus:ring-impact-red/50">
|
||
Jetzt Spenden
|
||
</a>
|
||
<a href="#projekte" class="px-10 py-4 text-xl bg-white border-2 border-deep-blue text-deep-blue font-bold rounded-xl hover:bg-deep-blue hover:text-white transition duration-300 focus:outline-none focus:ring-4 focus:ring-deep-blue/50">
|
||
Projekte entdecken
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Mission Statement Section -->
|
||
<section id="mission" class="py-20 bg-white">
|
||
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-12">
|
||
<p class="text-hope-green text-lg font-semibold mb-2 uppercase tracking-widest">Unsere Grundlage</p>
|
||
<h3 class="text-5xl sm:text-6xl font-serif font-bold text-deep-blue">
|
||
Warum wir handeln
|
||
</h3>
|
||
</div>
|
||
|
||
<div class="grid md:grid-cols-3 gap-10">
|
||
<!-- Wert 1 -->
|
||
<div class="text-center p-8 border-t-4 border-hope-green bg-gray-50 shadow-md hover:shadow-lg transition duration-300">
|
||
<div class="text-6xl text-hope-green mb-4">🌱</div>
|
||
<h4 class="text-3xl font-bold text-deep-blue mb-2">Bedürfnisorientierung</h4>
|
||
<p class="text-gray-600">Wir identifizieren die tiefsten und dringendsten Bedürfnisse vor Ort, um unsere Hilfe gezielt einzusetzen.</p>
|
||
</div>
|
||
<!-- Wert 2 -->
|
||
<div class="text-center p-8 border-t-4 border-deep-blue bg-gray-50 shadow-md hover:shadow-lg transition duration-300">
|
||
<div class="text-6xl text-deep-blue mb-4">🤝</div>
|
||
<h4 class="text-3xl font-bold text-deep-blue mb-2">Gemeinschaftsstärkung</h4>
|
||
<p class="text-gray-600">Wir fördern Selbsthilfe und stärken lokale Strukturen, damit die Hilfe nachhaltig wirkt.</p>
|
||
</div>
|
||
<!-- Wert 3 -->
|
||
<div class="text-center p-8 border-t-4 border-impact-red bg-gray-50 shadow-md hover:shadow-lg transition duration-300">
|
||
<div class="text-6xl text-impact-red mb-4">❤️</div>
|
||
<h4 class="text-3xl font-bold text-deep-blue mb-2">Transparenz</h4>
|
||
<p class="text-gray-600">Jeder Euro wird offen dokumentiert. Wir garantieren, dass Ihre Spende den Menschen hilft, die sie erreichen soll.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Donation Progress Section -->
|
||
<section id="impact" class="py-20 bg-cream-bg border-t border-b border-gray-200">
|
||
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||
<h3 class="text-4xl font-serif font-bold text-deep-blue mb-3">Gemeinsamer Fortschritt</h3>
|
||
<p class="text-xl text-gray-600 mb-12">Wir bewegen uns gemeinsam zu unserem Ziel, jeden Bedarf zu decken.</p>
|
||
|
||
<div class="w-full mb-8">
|
||
<div class="flex justify-between mb-1 text-sm font-medium text-deep-blue">
|
||
<span>Ziel: 100.000 €</span>
|
||
<span>aktuell: <span id="current-amount">125.500</span> €</span>
|
||
</div>
|
||
<div class="w-full bg-gray-200 rounded-full h-8">
|
||
<div id="progress-bar" class="progress-bar-fill bg-hope-green h-8 rounded-full" style="width: 125.5;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="text-2xl text-gray-700 mt-8 font-semibold">
|
||
Wir sind bereits <span class="text-impact-red">125%</span> des Weges zur Veränderung!
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<!-- Projects Showcase Section -->
|
||
<section id="projekte" class="py-24 bg-white">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-16">
|
||
<p class="text-hope-green text-lg font-semibold mb-2 uppercase tracking-widest">Unsere Arbeit</p>
|
||
<h3 class="text-5xl sm:text-6xl font-serif font-bold text-deep-blue">
|
||
Unsere aktuellen Projekte
|
||
</h3>
|
||
<p class="mt-4 text-lg text-gray-600 max-w-3xl">
|
||
Von der Wasserversorgung bis zur Bildung – wir setzen direkt dort ein, wo Menschen am meisten Hilfe benötigen.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="grid lg:grid-cols-3 gap-10">
|
||
<!-- Projekt 1: Wasser -->
|
||
<div class="bg-white shadow-xl rounded-xl overflow-hidden transform hover:scale-[1.02] transition duration-500 border-t-8 border-hope-green">
|
||
<div class="h-48 bg-gray-100 flex items-center justify-center relative">
|
||
<div class="absolute inset-0 bg-cover bg-center opacity-60" style="background-image: url('https://picsum.photos/id/1042/800/600');"></div>
|
||
<div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
|
||
<p class="text-white text-3xl font-serif font-bold">Wasserversorgung</p>
|
||
</div>
|
||
</div>
|
||
<div class="p-6">
|
||
<h4 class="text-3xl font-serif font-bold text-deep-blue mb-3">Sauberes Wasser</h4>
|
||
<p class="text-gray-600 mb-4 text-base">Installation nachhaltiger Wasseraufbereitungsanlagen in entlegenen Dörfern.</p>
|
||
<button class="w-full py-3 bg-hope-green text-white text-lg font-bold rounded-lg hover:bg-green-700 transition duration-300 focus:outline-none focus:ring-4 focus:ring-hope-green/50">
|
||
Unterstützen Sie
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Projekt 2: Bildung -->
|
||
<div class="bg-white shadow-xl rounded-xl overflow-hidden transform hover:scale-[1.02] transition duration-500 border-t-8 border-deep-blue">
|
||
<div class="h-48 bg-gray-100 flex items-center justify-center relative">
|
||
<div class="absolute inset-0 bg-cover bg-center opacity-60" style="background-image: url('https://picsum.photos/id/1025/800/600');"></div>
|
||
<div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
|
||
<p class="text-white text-3xl font-serif font-bold">Bildung</p>
|
||
</div>
|
||
</div>
|
||
<div class="p-6">
|
||
<h4 class="text-3xl font-serif font-bold text-deep-blue mb-3">Bildungszentren</h4>
|
||
<p class="text-gray-600 mb-4 text-base">Schaffung von Lernräumen für Kinder und Jugendliche in Notlagen.</p>
|
||
<button class="w-full py-3 bg-deep-blue text-white text-lg font-bold rounded-lg hover:bg-blue-800 transition duration-300 focus:outline-none focus:ring-4 focus:ring-deep-blue/50">
|
||
Unterstützen Sie
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Projekt 3: Ernährung -->
|
||
<div class="bg-white shadow-xl rounded-xl overflow-hidden transform hover:scale-[1.02] transition duration-500 border-t-8 border-impact-red">
|
||
<div class="h-48 bg-gray-100 flex items-center justify-center relative">
|
||
<div class="absolute inset-0 bg-cover bg-center opacity-60" style="background-image: url('https://picsum.photos/id/1016/800/600');"></div>
|
||
<div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
|
||
<p class="text-white text-3xl font-serif font-bold">Ernährungssicherheit</p>
|
||
</div>
|
||
</div>
|
||
<div class="p-6">
|
||
<h4 class="text-3xl font-serif font-bold text-deep-blue mb-3">Ernährungssouveränität</h4>
|
||
<p class="text-gray-600 mb-4 text-base">Unterstützung lokaler Bauern und Nahrungsmittelversorgung in Krisengebieten.</p>
|
||
<button class="w-full py-3 bg-impact-red text-white text-lg font-bold rounded-lg hover:bg-red-700 transition duration-300 focus:outline-none focus:ring-4 focus:ring-impact-red/50">
|
||
Unterstützen Sie
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<!-- Donation Form Section -->
|
||
<section id="donate" class="py-24 bg-gray-50 border-t border-gray-200">
|
||
<div class="max-w-3xl mx-auto px-4 sm:px-<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 30.04s</div> |