183 lines
13 KiB
HTML
183 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 Alchemist | Small Batch Coffee Roaster</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
|
<style>
|
|
/* Custom Styling for a rustic, warm, and artisanal feel */
|
|
.font-serif-display {
|
|
font-family: 'Playfair Display', Georgia, serif; /* Simulated custom font for elegance */
|
|
}
|
|
.font-mono-accent {
|
|
font-family: 'Courier New', monospace;
|
|
}
|
|
.coffee-gradient-bg {
|
|
background: linear-gradient(145deg, #4a2c1e 0%, #6b4d3d 100%);
|
|
}
|
|
/* Subtle hover effect for product cards */
|
|
.product-card:hover {
|
|
transform: translateY(-5px) scale(1.02);
|
|
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
|
|
}
|
|
/* Subtle pulse for CTA */
|
|
@keyframes pulse-glow {
|
|
0% { box-shadow: 0 0 0 0 rgba(180, 50, 10, 0.4); }
|
|
70% { box-shadow: 0 0 0 10px rgba(180, 50, 10, 0); }
|
|
100% { box-shadow: 0 0 0 0 rgba(180, 50, 10, 0); }
|
|
}
|
|
.pulse-cta {
|
|
animation: pulse-glow 2s infinite;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50 text-gray-800 antialiased">
|
|
|
|
<!-- 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 h-20">
|
|
<div class="flex items-center space-x-2">
|
|
<h1 class="text-3xl font-serif-display font-bold text-amber-900 tracking-wider">
|
|
The Roastery Alchemist
|
|
</h1>
|
|
<p class="text-xs font-mono-accent text-gray-500 hidden sm:block">Small Batch Roasters</p>
|
|
</div>
|
|
<nav class="flex space-x-8">
|
|
<a href="#philosophy" class="text-gray-600 hover:text-amber-700 transition duration-150 font-medium border-b-2 border-transparent hover:border-amber-700 pb-1">Our Story</a>
|
|
<a href="#coffees" class="text-gray-600 hover:text-amber-700 transition duration-150 font-medium border-b-2 border-transparent hover:border-amber-700 pb-1">Roasts</a>
|
|
<a href="#about" class="text-gray-600 hover:text-amber-700 transition duration-150 font-medium border-b-2 border-transparent hover:border-amber-700 pb-1">Sourcing</a>
|
|
<a href="#contact" class="text-gray-600 hover:text-amber-700 transition duration-150 font-medium border-b-2 border-transparent hover:border-amber-700 pb-1">Contact</a>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<!-- Hero Section -->
|
|
<section class="coffee-gradient-bg h-[70vh] flex items-center justify-center text-center shadow-xl">
|
|
<div class="max-w-4xl mx-8 p-6 bg-black/10 rounded-xl border-l-8 border-amber-300 backdrop-blur-sm">
|
|
<h2 class="text-6xl font-serif-display font-extrabold text-white leading-tight mb-4 drop-shadow-lg">
|
|
The Art of the Perfect Roast
|
|
</h2>
|
|
<p class="text-xl text-amber-100 mb-8 font-light tracking-wider">
|
|
Mastering the craft of specialty coffee, from seed to sip. Every bean tells a story.
|
|
</p>
|
|
<a href="#coffees" class="inline-block px-10 py-4 text-lg font-semibold text-black bg-amber-300 rounded-full uppercase tracking-widest shadow-lg hover:bg-amber-200 transform hover:scale-105 transition duration-300 focus:outline-none focus:ring-4 focus:ring-amber-400/50 pulse-cta">
|
|
Explore Roasts
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Philosophy Section -->
|
|
<section id="philosophy" 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="grid lg:grid-cols-12 lg:gap-16 items-center">
|
|
<div class="lg:col-span-5">
|
|
<h3 class="text-sm uppercase tracking-widest text-amber-600 font-mono-accent mb-2">Our Ethos</h3>
|
|
<h2 class="text-5xl font-serif-display font-bold text-gray-900 mb-6">
|
|
Precision Meets Passion.
|
|
</h2>
|
|
<p class="text-lg text-gray-600 mb-4 leading-relaxed">
|
|
We believe coffee is more than just a morning ritual; it is a meticulously cultivated experience. At The Roastery Alchemist, we honor the journey of the bean, from its unique terroir to the final, perfect crackle of the roast.
|
|
</p>
|
|
<p class="text-lg text-gray-500 leading-relaxed border-l-4 border-amber-500 pl-4 italic">
|
|
We seek out micro-lots and unique origins that push the boundaries of flavor, ensuring every bag is a journey for your palate.
|
|
</p>
|
|
</div>
|
|
<div class="lg:col-span-7 mt-10 lg:mt-0">
|
|
<!-- Placeholder Image simulating roasting process -->
|
|
<div class="relative aspect-video overflow-hidden rounded-xl shadow-2xl group cursor-pointer">
|
|
<img src="https://images.unsplash.com/photo-1578950388010-3312738c52a0?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cm9hc3Rlcnl8ZW58MHx8fHwxNjczMDc1MTc1&ixlib=rb-4.0.3&q=80&w=1080"
|
|
alt="Artisan coffee roaster in action"
|
|
class="w-full h-full object-cover transition duration-500 group-hover:scale-105"
|
|
loading="lazy">
|
|
<div class="absolute inset-0 bg-black/20 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
|
|
<p class="text-white text-2xl font-serif-display uppercase tracking-widest">The Roasting Chamber</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Coffees/Products Section -->
|
|
<section id="coffees" class="py-20 lg:py-32 bg-amber-50">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-12">
|
|
<h3 class="text-sm uppercase tracking-widest text-amber-700 font-mono-accent">Our Harvest</h3>
|
|
<h2 class="text-5xl font-serif-display font-bold text-gray-900">
|
|
Explore Our Current Roasts
|
|
</h2>
|
|
<p class="mt-3 text-xl text-gray-500 max-w-3xl mx-auto">
|
|
From bright, vibrant acidity to deep, comforting chocolate notes—find your perfect daily cup.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-3 gap-10">
|
|
|
|
<!-- Roast Card 1: Ethiopian Yirgacheffe -->
|
|
<div class="product-card bg-white shadow-xl rounded-2xl overflow-hidden transition duration-300 border border-gray-100 p-6 flex flex-col">
|
|
<div class="h-40 overflow-hidden rounded-t-xl mb-4">
|
|
<img src="https://images.unsplash.com/photo-1542985401-b895f5748145?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTJ8fHFlZ2hhY2hlZmZlJTIwYmlhZCUyMG1hbnxlbnwwfDExfDIlMjV8ZWx8MHx8fHwxNzY3NTg4NDMx"
|
|
alt="Ethiopian Yirgacheffe Coffee Beans"
|
|
class="w-full h-full object-cover transition duration-500 group-hover:opacity-90">
|
|
</div>
|
|
<h3 class="text-3xl font-serif-display font-bold text-gray-900 mb-2">Yirgacheffe Bloom</h3>
|
|
<p class="text-sm uppercase tracking-widest text-amber-600 font-mono-accent mb-3">Light Roast | Africa</p>
|
|
<p class="text-gray-600 flex-grow mb-4 text-base">
|
|
Exquisite notes of blueberry, jasmine, and citrus zest. A vibrant, floral masterpiece from the Ethiopian highlands.
|
|
</p>
|
|
<div class="mt-auto pt-4 border-t border-gray-100">
|
|
<p class="text-2xl font-bold text-gray-900">$19.00</p>
|
|
<button class="mt-3 w-full bg-amber-700 text-white py-3 rounded-full text-lg font-semibold hover:bg-amber-800 transition duration-300 shadow-md focus:outline-none focus:ring-4 focus:ring-amber-300">
|
|
Add to Basket
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Roast Card 2: Guatemalan Antigua -->
|
|
<div class="product-card bg-white shadow-xl rounded-2xl overflow-hidden transition duration-300 border border-gray-100 p-6 flex flex-col">
|
|
<div class="h-40 overflow-hidden rounded-t-xl mb-4">
|
|
<img src="https://images.unsplash.com/photo-1537717244991-297f872454e6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjB8fGNvZmZlZSUyMGJlYW5lcyUyMGlkZW58ZW58MHx8fHwxNjczMDc1MTc1&ixlib=rb-4.0.3&q=80&w=1080"
|
|
alt="Guatemalan Antigua Coffee Beans"
|
|
class="w-full h-full object-cover transition duration-500 group-hover:opacity-90">
|
|
</div>
|
|
<h3 class="text-3xl font-serif-display font-bold text-gray-900 mb-2">Antigua Reserve</h3>
|
|
<p class="text-sm uppercase tracking-widest text-amber-600 font-mono-accent mb-3">Medium Roast | Central America</p>
|
|
<p class="text-gray-600 flex-grow mb-4 text-base">
|
|
Smooth notes of dark chocolate, tobacco, and warm spice. A perfectly balanced, robust classic.
|
|
</p>
|
|
<div class="mt-auto pt-4 border-t border-gray-100">
|
|
<p class="text-2xl font-bold text-gray-900">$18.50</p>
|
|
<button class="mt-3 w-full bg-amber-700 text-white py-3 rounded-full text-lg font-semibold hover:bg-amber-800 transition duration-300 shadow-md focus:outline-none focus:ring-4 focus:ring-amber-300">
|
|
Add to Basket
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Roast Card 3: Sumatra Mandheling -->
|
|
<div class="product-card bg-white shadow-xl rounded-2xl overflow-hidden transition duration-300 border border-gray-100 p-6 flex flex-col">
|
|
<div class="h-40 overflow-hidden rounded-t-xl mb-4">
|
|
<img src="https://images.unsplash.com/photo-1559363357-b71159293035?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTd8fGNvZmZlZSUyMGJlYW5lcyUyMG1hbnxlbnwwfDExfDIlMjV8ZWx8MHx8fHwxNzY3NTg4NDMx"
|
|
alt="Sumatra Mandheling Coffee Beans"
|
|
class="w-full h-full object-cover transition duration-500 group-hover:opacity-90">
|
|
</div>
|
|
<h3 class="text-3xl font-serif-display font-bold text-gray-900 mb-2">Mandheling Shadow</h3>
|
|
<p class="text-sm uppercase tracking-widest text-amber-600 font-mono-accent mb-3">Dark Roast | Sumatra</p>
|
|
<p class="text-gray-600 flex-grow mb-4 text-base">
|
|
Deep, earthy profile with notes of dark cocoa and cedar. Intense, full-bodied, and commanding.
|
|
</p>
|
|
<div class="mt-auto pt-4 border-t border-gray-100">
|
|
<p class="text-2xl font-bold text-gray-900">$17.00</p>
|
|
<button class="mt-3 w-full bg-amber-700 text-white py-3 rounded-full text-lg font-semibold hover:bg-amber-800 transition duration-300 shadow-md focus:outline-none focus:ring-4 focus:ring-amber-300">
|
|
Add to Basket
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- S<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.47s</div> |