175 lines
13 KiB
HTML
175 lines
13 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 Roastery Hearth - Artisan Coffee Roaster</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
:root {
|
|
--color-primary: #5C3A21; /* Deep Coffee Brown */
|
|
--color-secondary: #A08466; /* Roasted Grain/Tan */
|
|
--color-light: #F5F1E9; /* Creamy Off-White */
|
|
}
|
|
body {
|
|
background-color: var(--color-light);
|
|
color: #333;
|
|
font-family: 'Georgia', serif;
|
|
line-height: 1.7;
|
|
}
|
|
.btn-primary {
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 4px 15px rgba(92, 58, 33, 0.3);
|
|
}
|
|
.btn-primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba(92, 58, 33, 0.5);
|
|
background-color: #7d4a28;
|
|
}
|
|
.card-hover:hover {
|
|
transform: translateY(-6px);
|
|
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
|
|
transition: box-shadow 0.3s ease, transform 0.3s ease;
|
|
}
|
|
/* Custom gradient for header section */
|
|
.hero-gradient {
|
|
background: linear-gradient(180deg, var(--color-light) 0%, #e0d4c8 100%);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="antialiased">
|
|
|
|
<!-- Navigation Bar -->
|
|
<header class="sticky top-0 z-50 bg-white/95 backdrop-blur-sm shadow-md">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between items-center h-20">
|
|
<div class="text-3xl font-extrabold tracking-tight text-[var(--color-primary)]">
|
|
HearthRoast
|
|
</div>
|
|
<nav class="hidden md:flex space-x-8">
|
|
<a href="#roasts" class="text-gray-700 hover:text-[var(--color-primary)] transition duration-150 font-medium focus:outline-none focus:text-[var(--color-primary)]">Our Roasts</a>
|
|
<a href="#about" class="text-gray-700 hover:text-[var(--color-primary)] transition duration-150 font-medium focus:outline-none focus:text-[var(--color-primary)]">Our Craft</a>
|
|
<a href="#shop" class="text-gray-700 hover:text-[var(--color-primary)] transition duration-150 font-medium focus:outline-none focus:text-[var(--color-primary)]">Shop</a>
|
|
<a href="#contact" class="text-gray-700 hover:text-[var(--color-primary)] transition duration-150 font-medium focus:outline-none focus:text-[var(--color-primary)]">Contact</a>
|
|
</nav>
|
|
<div class="md:hidden">
|
|
<button id="menu-button" class="text-gray-700 hover:text-[var(--color-primary)] focus:outline-none focus:text-[var(--color-primary)] p-2 rounded-md">
|
|
<!-- 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>
|
|
</div>
|
|
</div>
|
|
<!-- Mobile Menu (Hidden by default) -->
|
|
<div id="mobile-menu" class="md:hidden hidden bg-white/90 border-t">
|
|
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
|
|
<a href="#roasts" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none">Our Roasts</a>
|
|
<a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none">Our Craft</a>
|
|
<a href="#shop" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none">Shop</a>
|
|
<a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none">Contact</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<!-- Hero Section -->
|
|
<section class="hero-gradient pt-16 pb-24 text-center shadow-inner">
|
|
<div class="max-w-4xl mx-auto px-4">
|
|
<h1 class="text-6xl md:text-7xl font-serif font-bold text-[var(--color-primary)] leading-tight mb-4 animate-in fade-in duration-1000">
|
|
The Art of the Perfect Brew.
|
|
</h1>
|
|
<p class="text-xl md:text-2xl text-gray-600 mb-8 max-w-2xl mx-auto">
|
|
We meticulously roast single-origin beans to unlock the deepest, most complex notes of the world's finest coffee. Sourced ethically, roasted passionately.
|
|
</p>
|
|
<a href="#shop" class="btn-primary inline-block bg-[var(--color-primary)] text-white text-xl font-semibold py-4 px-10 rounded-lg uppercase tracking-wider shadow-lg focus:outline-none focus:ring-4 focus:ring-[var(--color-secondary)]">
|
|
Explore Our Roasts
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Featured Roasts Section -->
|
|
<section id="roasts" class="py-20 lg:py-28 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-secondary)] mb-2">Signature Selections</h2>
|
|
<p class="text-5xl md:text-6xl font-bold text-[var(--color-primary)]">Our Current Batch</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-10">
|
|
|
|
<!-- Roast Card 1: Ethiopian Yirgacheffe -->
|
|
<div class="bg-gray-50 rounded-xl shadow-xl p-6 border-t-8 border-[var(--color-secondary)] transition duration-300 card-hover cursor-pointer">
|
|
<div class="relative h-48 bg-cover bg-center rounded-lg mb-4" style="background-image: url('https://images.unsplash.com/photo-1556905004-513e3285c480?w=600&h=600&fit=crop');">
|
|
<div class="absolute inset-0 bg-black/20"></div>
|
|
<span class="absolute top-3 right-3 text-white text-xs bg-black/60 px-3 py-1 rounded-full uppercase tracking-widest">Light</span>
|
|
</div>
|
|
<h3 class="text-3xl font-bold text-[var(--color-primary)] mb-2">Yirgacheffe Bloom</h3>
|
|
<p class="text-gray-600 mb-4 text-sm italic">Bright, floral acidity with notes of blueberry and lemon zest.</p>
|
|
<div class="flex justify-between items-center pt-2">
|
|
<span class="text-2xl font-extrabold text-[var(--color-primary)]">$19.00</span>
|
|
<button class="btn-primary bg-gray-800 text-white py-3 px-6 rounded-lg text-sm uppercase tracking-wider focus:outline-none focus:ring-4 focus:ring-gray-700">
|
|
View Roast
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Roast Card 2: Sumatran Mandheling -->
|
|
<div class="bg-gray-50 rounded-xl shadow-xl p-6 border-t-8 border-[var(--color-secondary)] transition duration-300 card-hover cursor-pointer">
|
|
<div class="relative h-48 bg-cover bg-center rounded-lg mb-4" style="background-image: url('https://images.unsplash.com/photo-1552260209-35a02c232e6b?w=600&h=600&fit=crop');">
|
|
<div class="absolute inset-0 bg-black/20"></div>
|
|
<span class="absolute top-3 right-3 text-white text-xs bg-black/60 px-3 py-1 rounded-full uppercase tracking-widest">Dark</span>
|
|
</div>
|
|
<h3 class="text-3xl font-bold text-[var(--color-primary)] mb-2">Sumatran Earth</h3>
|
|
<p class="text-gray-600 mb-4 text-sm italic">Deep, earthy body with hints of dark chocolate and tobacco finish.</p>
|
|
<div class="flex justify-between items-center pt-2">
|
|
<span class="text-2xl font-extrabold text-[var(--color-primary)]">$18.50</span>
|
|
<button class="btn-primary bg-gray-800 text-white py-3 px-6 rounded-lg text-sm uppercase tracking-wider focus:outline-none focus:ring-4 focus:ring-gray-700">
|
|
View Roast
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Roast Card 3: Colombian Supremo -->
|
|
<div class="bg-gray-50 rounded-xl shadow-xl p-6 border-t-8 border-[var(--color-secondary)] transition duration-300 card-hover cursor-pointer">
|
|
<div class="relative h-48 bg-cover bg-center rounded-lg mb-4" style="background-image: url('https://images.unsplash.com/photo-1542766076-8f2a12b45c7d?w=600&h=600&fit=crop');">
|
|
<div class="absolute inset-0 bg-black/20"></div>
|
|
<span class="absolute top-3 right-3 text-white text-xs bg-black/60 px-3 py-1 rounded-full uppercase tracking-widest">Medium</span>
|
|
</div>
|
|
<h3 class="text-3xl font-bold text-[var(--color-primary)] mb-2">Colombian Heritage</h3>
|
|
<p class="text-gray-600 mb-4 text-sm italic">Balanced, comforting profile with notes of caramel and mild citrus.</p>
|
|
<div class="flex justify-between items-center pt-2">
|
|
<span class="text-2xl font-extrabold text-[var(--color-primary)]">$17.00</span>
|
|
<button class="btn-primary bg-gray-800 text-white py-3 px-6 rounded-lg text-sm uppercase tracking-wider focus:outline-none focus:ring-4 focus:ring-gray-700">
|
|
View Roast
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Our Craft/Philosophy Section -->
|
|
<section id="about" class="py-24 lg:py-32 bg-[var(--color-light)]">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="grid md:grid-cols-2 gap-12 items-center">
|
|
<!-- Text Content -->
|
|
<div class="space-y-8">
|
|
<h2 class="text-sm uppercase tracking-widest text-[var(--color-secondary)]">Our Philosophy</h2>
|
|
<h3 class="text-5xl md:text-6xl font-serif font-bold text-[var(--color-primary)]">
|
|
Beyond the Bean. The Experience.
|
|
</h3>
|
|
<p class="text-lg text-gray-600 border-l-4 border-[var(--color-secondary)] pl-4 italic">
|
|
For us, roasting is not just heating beans; it's an act of transformation. We honor the terroir of every farm, coaxing out unique profiles through careful, measured heat.
|
|
</p>
|
|
<ul class="space-y-4 text-lg">
|
|
<li class="flex items-start">
|
|
<svg class="w-6 h-6 mt-1 mr-3 text-[var(--color-secondary)] flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l2.5 2.5m0 0L12 18m-3-7l2.5-2.5m0 0L17 10m-3-7L12 4m-3 7l2.5 2.5"></path></svg>
|
|
<span class="font-medium">Sustainable Sourcing:</span> We partner directly with growers committed to quality and ethical labor.
|
|
</li>
|
|
<li class="flex items-start">
|
|
<svg class="w-6 h-6 mt-1 mr-3 text-[var(--color-secondary)] flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l2.5 2.5m0 0L12 18m-3-7l2.5-2.5m0 0L17 10m-3-7L12 4m-3 7l2.5 2.5"></path></svg>
|
|
<span class="font-medium">Precision Roasting:</span> Every batch profile is documented, ensuring consistency from bag to cup.
|
|
</li>
|
|
<li class="flex items-start">
|
|
<svg class="w-6 h-6 mt-1 mr-3 text-[var(--color-secondary)] flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l2.5 2.5m0 0L1<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.22s</div> |