192 lines
12 KiB
HTML
192 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 Alchemist's Roast | Artisan Coffee</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
:root {
|
|
--primary-brown: #5D4037;
|
|
--secondary-cream: #F5F5DC;
|
|
--accent-amber: #FFB300;
|
|
}
|
|
body {
|
|
font-family: 'Georgia', serif;
|
|
background-color: #FAF0E6;
|
|
color: #333;
|
|
line-height: 1.7;
|
|
}
|
|
.heading-font {
|
|
font-family: 'Playfair Display', serif; /* Assuming a nice serif fallback for impact */
|
|
font-weight: 700;
|
|
}
|
|
.btn-primary {
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
|
}
|
|
.btn-primary:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
|
|
background-color: var(--accent-amber);
|
|
}
|
|
.card-hover:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
|
|
transition: box-shadow 0.3s ease, transform 0.3s ease;
|
|
}
|
|
/* Custom Scrollbar for elegance */
|
|
body::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
body::-webkit-scrollbar-thumb {
|
|
background-color: var(--primary-brown);
|
|
border-radius: 4px;
|
|
}
|
|
body::-webkit-scrollbar-track {
|
|
background: #FAF0E6;
|
|
}
|
|
</style>
|
|
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body class="antialiased">
|
|
|
|
<!-- Header and Navigation -->
|
|
<header class="sticky top-0 z-50 bg-white shadow-lg border-b border-amber-100">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between items-center py-4">
|
|
<div class="text-3xl heading-font text-amber-900 tracking-widest">
|
|
The Alchemist's Roast
|
|
</div>
|
|
<nav class="hidden md:flex space-x-8">
|
|
<a href="#story" class="text-gray-600 hover:text-amber-700 transition duration-150 text-lg">Our Story</a>
|
|
<a href="#roasts" class="text-gray-600 hover:text-amber-700 transition duration-150 text-lg">Roasts</a>
|
|
<a href="#process" class="text-gray-600 hover:text-amber-700 transition duration-150 text-lg">Craft</a>
|
|
<a href="#shop" class="text-gray-600 hover:text-amber-700 transition duration-150 text-lg border-b-2 border-amber-700 pb-1">Shop</a>
|
|
</nav>
|
|
<div class="md:hidden">
|
|
<!-- Mobile Menu Button Placeholder -->
|
|
<button id="mobile-menu-button" class="text-gray-700 hover:text-amber-700 focus:outline-none p-2">
|
|
<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 Dropdown (Initially hidden) -->
|
|
<div id="mobile-menu" class="md:hidden hidden bg-white border-t">
|
|
<div class="px-4 pt-2 pb-3 space-y-1 sm:px-6">
|
|
<a href="#story" class="block py-2 text-gray-700 hover:bg-amber-50 focus:outline-none focus:bg-amber-100">Our Story</a>
|
|
<a href="#roasts" class="block py-2 text-gray-700 hover:bg-amber-50 focus:outline-none focus:bg-amber-100">Roasts</a>
|
|
<a href="#process" class="block py-2 text-gray-700 hover:bg-amber-50 focus:outline-none focus:bg-amber-100">Craft</a>
|
|
<a href="#shop" class="block py-2 text-gray-700 hover:bg-amber-50 focus:outline-none focus:bg-amber-100">Shop</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<!-- Hero Section -->
|
|
<section class="relative bg-cover bg-center h-[80vh] flex items-center justify-center"
|
|
style="background-image: url('https://images.unsplash.com/photo-1517234954160-4898df9009e4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzNjUyOXwwfDF8c2VhcmNofDEyfHxjb2ZmZWplciUyMG1vZGV8ZW58fHwxNjE0NTU5MTc5&ixlib=rb-4.0.3&q=80&w=1080');">
|
|
<div class="absolute inset-0 bg-black/40"></div>
|
|
<div class="relative text-center max-w-4xl px-4">
|
|
<h1 class="text-6xl sm:text-7xl heading-font text-white mb-4 leading-tight animate-fadeInUp">
|
|
The Art of the Perfect Cup.
|
|
</h1>
|
|
<p class="text-xl sm:text-2xl text-amber-100 mb-8 italic">
|
|
Slow roasted, thoughtfully sourced, expertly brewed. Discover coffee with soul.
|
|
</p>
|
|
<a href="#shop" class="btn-primary inline-block bg-amber-600 text-white text-xl font-semibold py-3 px-10 uppercase rounded-lg shadow-lg hover:bg-amber-700 transition duration-300">
|
|
Explore Our Roasts
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Our Story Section -->
|
|
<section id="story" 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="text-center mb-16">
|
|
<h2 class="text-4xl sm:text-5xl heading-font text-amber-900 mb-3">Our Philosophy</h2>
|
|
<p class="text-xl text-gray-600">More than a beverage; it's an experience.</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-3 gap-10 text-center">
|
|
|
|
<div class="p-6 border border-gray-100 rounded-xl shadow-lg bg-amber-50 card-hover transition duration-300">
|
|
<div class="text-5xl mb-3 text-amber-700">☕</div>
|
|
<h3 class="text-2xl heading-font text-amber-900 mb-2">Source Direct</h3>
|
|
<p class="text-gray-600">We partner directly with small, ethical farms, ensuring quality meets fair practice from the bean's origin.</p>
|
|
</div>
|
|
|
|
<div class="p-6 border border-gray-100 rounded-xl shadow-lg bg-amber-50 card-hover transition duration-300">
|
|
<div class="text-5xl mb-3 text-amber-700">🔥</div>
|
|
<h3 class="text-2xl heading-font text-amber-900 mb-2">Artisan Roasting</h3>
|
|
<p class="text-gray-600">Small batches, meticulous control. Our roaster monitors temperature curves to unlock peak flavor profiles.</p>
|
|
</div>
|
|
|
|
<div class="p-6 border border-gray-100 rounded-xl shadow-lg bg-amber-50 card-hover transition duration-300">
|
|
<div class="text-5xl mb-3 text-amber-700">✨</div>
|
|
<h3 class="text-2xl heading-font text-amber-900 mb-2">Brewed for Life</h3>
|
|
<p class="text-gray-600">We believe the best coffee deserves the best ritual. Taste the difference care makes in every sip.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Featured Roasts Section -->
|
|
<section id="roasts" class="py-20 sm:py-28 bg-[#FAF0E6]">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-14">
|
|
<h2 class="text-4xl sm:text-5xl heading-font text-amber-900 mb-3">Featured Roasts</h2>
|
|
<p class="text-xl text-gray-600">A selection of our current seasonal masterpieces.</p>
|
|
</div>
|
|
|
|
<div class="grid lg:grid-cols-3 gap-10">
|
|
|
|
<!-- Roast Card 1: Ethiopian Yirgacheffe -->
|
|
<div class="bg-white rounded-xl overflow-hidden shadow-2xl card-hover border-t-4 border-amber-600">
|
|
<div class="relative h-64 overflow-hidden">
|
|
<img src="https://images.unsplash.com/photo-1559781496-7d70e9a0e6a7?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzNjUyOXwwfDF8c2VhcmNofDEwfHxjb2ZmZWplciUyMGRlY2hhbmdlcnxlbnwwfHx8fDE2MTQ1NTkxNzkw&ixlib=rb-4.0.3&q=80&w=800"
|
|
alt="Bright Ethiopian Yirgacheffe beans" class="w-full h-full object-cover transition duration-500 hover:scale-105">
|
|
<div class="absolute top-3 right-3 bg-amber-600 text-white text-sm font-bold px-3 py-1 rounded-full shadow-md">ORIGIN</div>
|
|
</div>
|
|
<div class="p-6">
|
|
<h3 class="text-3xl heading-font text-amber-900 mb-2">Ethiopian Bloom</h3>
|
|
<p class="text-sm text-gray-500 mb-3">Light Roast | Floral & Citrus</p>
|
|
<p class="text-gray-600 mb-4 text-sm">Bright, complex notes of jasmine and sweet lemon peel. A delicate awakening.</p>
|
|
<div class="flex justify-between items-center mt-4">
|
|
<span class="text-3xl font-bold text-amber-700">$19.00</span>
|
|
<button class="btn-primary bg-amber-700 text-white py-2 px-5 rounded-lg text-md">
|
|
Select
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Roast Card 2: Sumatran Dark -->
|
|
<div class="bg-white rounded-xl overflow-hidden shadow-2xl card-hover border-t-4 border-amber-600">
|
|
<div class="relative h-64 overflow-hidden">
|
|
<img src="https://images.unsplash.com/photo-1594717986313-a27d1a807a39?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzNjUyOXwwfDF8c2VhcmNofDJ8fGNvZmZlZ2VyfGVufDB8fHx8MTYxNDU1OTE3OTA&ixlib=rb-4.0.3&q=80&w=800"
|
|
alt="Rich Sumatran coffee beans" class="w-full h-full object-cover transition duration-500 hover:scale-105">
|
|
<div class="absolute top-3 right-3 bg-amber-600 text-white text-sm font-bold px-3 py-1 rounded-full shadow-md">RICH</div>
|
|
</div>
|
|
<div class="p-6">
|
|
<h3 class="text-3xl heading-font text-amber-900 mb-2">Sumatran Earth</h3>
|
|
<p class="text-sm text-gray-500 mb-3">Dark Roast | Earthy & Dark Chocolate</p>
|
|
<p class="text-gray-600 mb-4 text-sm">Deep, brooding notes of dark cocoa, clove, and rich forest floor. A powerful brew.</p>
|
|
<div class="flex justify-between items-center mt-4">
|
|
<span class="text-3xl font-bold text-amber-700">$18.50</span>
|
|
<button class="btn-primary bg-amber-700 text-white py-2 px-5 rounded-lg text-md">
|
|
Select
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Roast Card 3: Guatemalan Sunrise -->
|
|
<div class="bg-white rounded-xl overflow-hidden shadow-2xl card-hover border-t-4 border-amber-600">
|
|
<div class="relative h-64 overflow-hidden">
|
|
<img src="https://images.unsplash.com/photo-1560345482-487f72c3e58e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzNjUyOXwwfDF8c2VhcmNofDJ8fGNvZmZlZ2VyJTIwYW5pbWF0ZXIlMjBjb2ZmZmVyZ2V8ZW58fHwxNjE0NTU5MTc5&ixlib=rb-4.0.3&q=80&w=800"
|
|
alt="Balanced Guatemalan coffee beans" class="w-full h-full object-cover transition duration-500 hover:scale-105">
|
|
<div class="absolute top-3 right-3 bg-amber-600 text-white text-sm font-bold px-3 py-1 rounded-full shadow-md">BALANCED</div>
|
|
</div>
|
|
<div class="p-6"><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.99s</div> |