193 lines
12 KiB
HTML
193 lines
12 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Kaffeemacher Handwerkskunst | Artisan Coffee Roaster</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<style>
|
||
/* Custom Tailwind Configuration */
|
||
:root {
|
||
--color-primary: #6D4C41; /* Deep Coffee Brown */
|
||
--color-secondary: #A1887F; /* Lighter Roast/Tan */
|
||
--color-accent: #FFB300; /* Warm Gold/Amber for highlights */
|
||
--color-background: #F5F5F5; /* Off-White/Light Grey */
|
||
}
|
||
body {
|
||
font-family: 'Merriweather', serif; /* A classic, sturdy feel */
|
||
background-color: var(--color-background);
|
||
color: #333;
|
||
}
|
||
.btn-primary {
|
||
background-color: var(--color-primary);
|
||
transition: background-color 0.3s, transform 0.1s;
|
||
}
|
||
.btn-primary:hover {
|
||
background-color: #4E342E; /* Darker Brown on hover */
|
||
transform: translateY(-1px);
|
||
}
|
||
.header-glow {
|
||
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
|
||
}
|
||
.roaster-card {
|
||
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
|
||
}
|
||
.roaster-card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 10px 20px rgba(0,0,0,0.15);
|
||
}
|
||
/* Subtle pulse animation for the CTA */
|
||
@keyframes pulse-glow {
|
||
0% { box-shadow: 0 0 0 0 rgba(255, 179, 0, 0.4); }
|
||
70% { box-shadow: 0 0 0 10px rgba(255, 179, 0, 0); }
|
||
100% { box-shadow: 0 0 0 0 rgba(255, 179, 0, 0); }
|
||
}
|
||
.pulse-cta {
|
||
animation: pulse-glow 3s infinite;
|
||
}
|
||
</style>
|
||
<!-- Using Merriweather via Google Fonts for robust typography -->
|
||
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700;900&display=swap" rel="stylesheet">
|
||
</head>
|
||
<body>
|
||
|
||
<!-- Header & Navigation -->
|
||
<header class="bg-white shadow-lg sticky top-0 z-50">
|
||
<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-shrink-0">
|
||
<a href="#" class="text-3xl font-extrabold text-[var(--color-primary)] tracking-tight header-glow">
|
||
Kaffeemacher
|
||
</a>
|
||
<p class="text-xs text-gray-600 mt-[-5px]">Handwerkliche Röste aus Bayern</p>
|
||
</div>
|
||
<nav class="flex space-x-8">
|
||
<a href="#philosophy" class="text-gray-700 hover:text-[var(--color-primary)] px-3 py-2 rounded-md font-medium transition duration-150 focus:outline-none focus:text-[var(--color-primary)]">Philosophie</a>
|
||
<a href="#shop" class="text-gray-700 hover:text-[var(--color-primary)] px-3 py-2 rounded-md font-medium transition duration-150 focus:outline-none focus:text-[var(--color-primary)]">Shop</a>
|
||
<a href="#about" class="text-gray-700 hover:text-[var(--color-primary)] px-3 py-2 rounded-md font-medium transition duration-150 focus:outline-none focus:text-[var(--color-primary)]">Über Uns</a>
|
||
<a href="#" class="btn-primary text-white px-4 py-2 rounded-full text-sm shadow-md focus:outline-none focus:ring-2 focus:ring-amber-500">Bestellen</a>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Hero Section -->
|
||
<section class="relative bg-cover bg-center h-[70vh] flex items-center justify-center"
|
||
style="background-image: url('https://images.unsplash.com/photo-1517237452248-6a5d855165f9?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');">
|
||
|
||
<!-- Overlay for dramatic contrast -->
|
||
<div class="absolute inset-0 bg-black opacity-40"></div>
|
||
|
||
<div class="relative text-center px-4 z-10">
|
||
<h1 class="text-6xl md:text-8xl font-black text-white mb-4 leading-tight uppercase">
|
||
Die Seele des Kaffees
|
||
</h1>
|
||
<p class="text-xl md:text-2xl text-gray-200 mb-8 font-serif">
|
||
Handverlesene Bohnen, mit Leidenschaft geröstet.
|
||
</p>
|
||
<a href="#shop" class="btn-primary bg-amber-600 text-white text-lg px-10 py-4 rounded-full uppercase tracking-widest focus:outline-none focus:ring-4 focus:ring-amber-300 pulse-cta">
|
||
Jetzt Entdecken
|
||
</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Philosophy Section -->
|
||
<section id="philosophy" class="py-20 sm:py-28 bg-white">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||
<h2 class="text-5xl font-bold text-[var(--color-primary)] mb-4 tracking-tight">
|
||
Unsere Philosophie
|
||
</h2>
|
||
<p class="text-xl text-gray-600 mb-12 max-w-3xl mx-auto">
|
||
Wir glauben an die Würde der Bohne. Von der sorgfältigen Auswahl der Ernte bis zum perfekten Röstdunkel – jeder Schritt ist eine Hommage an das Handwerk.
|
||
</p>
|
||
|
||
<div class="grid md:grid-cols-3 gap-10">
|
||
|
||
<!-- Feature 1 -->
|
||
<div class="p-8 bg-white border-t-8 border-[var(--color-secondary)] rounded-xl shadow-lg roaster-card">
|
||
<p class="text-5xl text-[var(--color-accent)] mb-3">🌿</p>
|
||
<h3 class="text-2xl font-bold text-[var(--color-primary)] mb-3">Ursprung</h3>
|
||
<p class="text-gray-600">Wir pflegen direkte Beziehungen zu kleinen, ethischen Farmen. Qualität beginnt am Ursprungsort.</p>
|
||
</div>
|
||
|
||
<!-- Feature 2 -->
|
||
<div class="p-8 bg-white border-t-8 border-[var(--color-secondary)] rounded-xl shadow-lg roaster-card">
|
||
<p class="text-5xl text-[var(--color-accent)] mb-3">🔥</p>
|
||
<h3 class="text-2xl font-bold text-[var(--color-primary)] mb-3">Röstkunst</h3>
|
||
<p class="text-gray-600">Unsere Rösterführung ist ein Dialog. Wir finden den einzigartigen Charakter jeder Bohne durch Präzision.</p>
|
||
</div>
|
||
|
||
<!-- Feature 3 -->
|
||
<div class="p-8 bg-white border-t-8 border-[var(--color-secondary)] rounded-xl shadow-lg roaster-card">
|
||
<p class="text-5xl text-[var(--color-accent)] mb-3">☕</p>
|
||
<h3 class="text-2xl font-bold text-[var(--color-primary)] mb-3">Genuss</h3>
|
||
<p class="text-gray-600">Das Ziel ist der Moment: ein samtiges, komplexes Geschmackserlebnis in jeder Tasse.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Shop/Products Section -->
|
||
<section id="shop" class="py-20 sm:py-28 bg-[var(--color-background)]">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-12">
|
||
<h2 class="text-5xl font-bold text-[var(--color-primary)] mb-3">Unsere aktuellen Sorten</h2>
|
||
<p class="text-xl text-gray-600">Entdecken Sie die Vielfalt unserer sorgfältig gerösteten Kaffeebohnen.</p>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-10">
|
||
|
||
<!-- Product 1: Espresso Roast -->
|
||
<div class="bg-white rounded-xl shadow-2xl overflow-hidden border-b-4 border-[var(--color-primary)] roaster-card">
|
||
<div class="h-48 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1571697788936-3c9c97e8e38d?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');"></div>
|
||
<div class="p-6 text-center">
|
||
<h3 class="text-3xl font-extrabold text-[var(--color-primary)] mb-1">Intensiver Espresso</h3>
|
||
<p class="text-sm text-gray-500 mb-3">Röstgrad: Dunkel | Ursprung: Zentralamerika</p>
|
||
<p class="text-gray-700 mb-4 font-medium">Ein kräftiger, dunkler Geschmack, perfekt für Ihren Morgenritual.</p>
|
||
<button class="btn-primary bg-amber-600 text-white w-full py-3 rounded-lg text-lg focus:outline-none focus:ring-4 ring-amber-300">
|
||
In den Warenkorb
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Product 2: Light Roast Filter -->
|
||
<div class="bg-white rounded-xl shadow-2xl overflow-hidden border-b-4 border-[var(--color-primary)] roaster-card">
|
||
<div class="h-48 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1552218893-635f4945c3d8?q=80&w=2874&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');"></div>
|
||
<div class="p-6 text-center">
|
||
<h3 class="text-3xl font-extrabold text-[var(--color-primary)] mb-1">Zarter Filterkaffee</h3>
|
||
<p class="text-sm text-gray-500 mb-3">Röstgrad: Hell | Ursprung: Äthiopien</p>
|
||
<p class="text-gray-700 mb-4 font-medium">Ein aromareicher, fruchtiger Charakter. Erwachen Sie sanft und elegant.</p>
|
||
<button class="btn-primary bg-amber-600 text-white w-full py-3 rounded-lg text-lg focus:outline-none focus:ring-4 ring-amber-300">
|
||
In den Warenkorb
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Product 3: Medium Roast Blend -->
|
||
<div class="bg-white rounded-xl shadow-2xl overflow-hidden border-b-4 border-[var(--color-primary)] roaster-card">
|
||
<div class="h-48 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1554284685-282b8a98a15d?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');"></div>
|
||
<div class="p-6 text-center">
|
||
<h3 class="text-3xl font-extrabold text-[var(--color-primary)] mb-1">Harmonie Blend</h3>
|
||
<p class="text-sm text-gray-500 mb-3">Röstgrad: Mittel | Ursprung: Mischung</p>
|
||
<p class="text-gray-700 mb-4 font-medium">Der perfekte Allrounder. Ausbalanciert, cremig und unverfälscht.</p>
|
||
<button class="btn-primary bg-amber-600 text-white w-full py-3 rounded-lg text-lg focus:outline-none focus:ring-4 ring-amber-300">
|
||
In den Warenkorb
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- About/Process Section (More detailed content) -->
|
||
<section id="about" class="py-20 sm:py-28 bg-white">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||
|
||
<!-- Image/Visual Focus -->
|
||
<div class="lg:sticky lg:top-20">
|
||
<img src="https://images.unsplash.com/photo-1483313376688-2b12e843a522?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
|
||
alt="Handwerker beim Röstvorgang"
|
||
class="rounded-3xl shadow-2xl transform transition duration-500 hover:scale-[1.02] w-full h-auto">
|
||
</div><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.93s</div> |