310 lines
18 KiB
HTML
310 lines
18 KiB
HTML
<!doctype html>
|
|
<html lang="en" class="scroll-smooth">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Ember & Grain | Artisan Coffee Roasters</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Inter:wght@300;400;600&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--espresso: #2c1e1a;
|
|
--cream: #fdfcf0;
|
|
--burnt: #bc6c25;
|
|
--honey: #dda15e;
|
|
--sage: #606c38;
|
|
}
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background-color: var(--cream);
|
|
color: var(--espresso);
|
|
}
|
|
h1, h2, h3, .font-serif {
|
|
font-family: 'Playfair Display', serif;
|
|
}
|
|
.reveal {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
|
|
}
|
|
.reveal.active {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
.nav-blur {
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
}
|
|
.product-card:hover .product-overlay {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
.focus-ring:focus {
|
|
outline: 2px solid var(--burnt);
|
|
outline-offset: 4px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="antialiased">
|
|
|
|
<!-- Navigation -->
|
|
<nav class="fixed w-full z-50 transition-all duration-300 px-6 py-4" id="main-nav">
|
|
<div class="max-w-7xl mx-auto flex justify-between items-center">
|
|
<a href="#" class="text-2xl font-serif font-bold tracking-tighter text-espresso">
|
|
EMBER & <span class="text-[#bc6c25]">GRAIN</span>
|
|
</a>
|
|
|
|
<!-- Desktop Menu -->
|
|
<div class="hidden md:flex space-x-10 text-sm font-medium uppercase tracking-widest items-center">
|
|
<a href="#collection" class="hover:text-[#bc6c25] transition-colors">The Collection</a>
|
|
<a href="#philosophy" class="hover:text-[#bc6c25] transition-colors">Our Process</a>
|
|
<a href="#subscription" class="hover:text-[#bc6c25] transition-colors">Subscriptions</a>
|
|
<a href="#contact" class="bg-[#2c1e1a] text-[#fdfcf0] px-6 py-2 rounded-full hover:bg-[#bc6c25] transition-all focus-ring">Shop Now</a>
|
|
</div>
|
|
|
|
<!-- Mobile Toggle -->
|
|
<button id="menu-btn" class="md:hidden focus-ring p-2" aria-label="Toggle Menu">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path></svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Mobile Menu -->
|
|
<div id="mobile-menu" class="hidden absolute top-full left-0 w-full bg-[#fdfcf0] border-t border-stone-200 p-6 flex flex-col space-y-4 md:hidden shadow-xl">
|
|
<a href="#collection" class="text-lg font-serif">The Collection</a>
|
|
<a href="#philosophy" class="text-lg font-serif">Our Process</a>
|
|
<a href="#subscription" class="text-lg font-serif">Subscriptions</a>
|
|
<a href="#contact" class="text-lg font-serif text-[#bc6c25]">Shop Now</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<main>
|
|
<!-- Hero Section -->
|
|
<section class="relative h-screen min-h-[700px] flex items-center justify-center overflow-hidden">
|
|
<div class="absolute inset-0 z-0">
|
|
<img src="https://images.pexels.com/photos/4820817/pexels-photo-4820817.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200" alt="Close-up of a professional roasting coffee beans in an industrial setting, focusing on equipment and beans." class="w-full h-full object-cover scale-105 hover:scale-100 transition-transform duration-[10s] ease-linear">
|
|
<div class="absolute inset-0 bg-black/40"></div>
|
|
</div>
|
|
|
|
<div class="relative z-10 text-center px-6">
|
|
<h1 class="text-5xl md:text-8xl text-white font-serif mb-6 leading-tight reveal">
|
|
Small Batch Roasting.<br><span class="italic text-[#dda15e]">Big Soul.</span>
|
|
</h1>
|
|
<p class="text-xl md:text-2xl text-stone-200 mb-10 max-w-2xl mx-auto font-light reveal" style="transition-delay: 0.2s;">
|
|
Directly sourced micro-lots, roasted over open flame to unlock the hidden stories in every bean.
|
|
</p>
|
|
<div class="flex flex-col md:flex-row gap-4 justify-center reveal" style="transition-delay: 0.4s;">
|
|
<a href="#collection" class="bg-[#bc6c25] text-white px-10 py-4 rounded-full text-lg font-medium hover:bg-[#dda15e] transition-all focus-ring inline-block">Explore Blends</a>
|
|
<a href="#philosophy" class="border-2 border-white text-white px-10 py-4 rounded-full text-lg font-medium hover:bg-white hover:text-stone-900 transition-all focus-ring inline-block">Our Story</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hero Image Attribution -->
|
|
<div class="absolute bottom-10 right-10 z-20 text-xs text-white/70">
|
|
<a href="https://www.pexels.com/photo/person-holding-silver-ball-on-black-round-tray-4820817/" target="_blank" class="hover:text-white transition-colors">
|
|
Photo by cottonbro studio on Pexels
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Philosophy Section -->
|
|
<section id="philosophy" class="py-24 px-6 bg-[#fdfcf0]">
|
|
<div class="max-w-7xl mx-auto">
|
|
<div class="grid md:grid-cols-2 gap-16 items-center">
|
|
<div class="reveal">
|
|
<span class="uppercase tracking-[0.3em] text-[#bc6c25] font-semibold text-sm">The Craft</span>
|
|
<h2 class="text-4xl md:text-5xl mt-4 mb-8 leading-tight">From Earth to Ember.</h2>
|
|
<div class="space-y-6 text-lg text-stone-600 leading-relaxed">
|
|
<p>We don't believe in mass production. We believe in the nuances of the soil, the height of the canopy, and the precise moment the bean turns from green to gold.</p>
|
|
<p>Our master roasters work in small, controlled batches, monitoring temperature curves with obsessive detail to ensure that the natural sweetness of the terroir is never masked by smoke, but celebrated by flame.</p>
|
|
</div>
|
|
<div class="mt-10 flex items-center gap-6">
|
|
<div class="h-[1px] w-12 bg-[#bc6c25]"></div>
|
|
<span class="font-serif italic text-xl">Ethically Sourced. Roasted Locally.</span>
|
|
</div>
|
|
</div>
|
|
<div class="relative reveal" style="transition-delay: 0.2s;">
|
|
<div class="aspect-[4/5] bg-stone-200 overflow-hidden rounded-sm">
|
|
<img src="https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?auto=format&fit=crop&q=80&w=800" alt="Coffee being roasted" class="w-full h-full object-cover">
|
|
</div>
|
|
<div class="absolute -bottom-6 -left-6 bg-[#bc6c25] text-white p-8 max-w-[240px] hidden lg:block">
|
|
<p class="font-serif italic text-2xl">"The ritual of the morning, perfected."</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Collection Section -->
|
|
<section id="collection" class="py-24 px-6 bg-white">
|
|
<div class="max-w-7xl mx-auto">
|
|
<div class="flex flex-col md:flex-row md:items-end justify-between mb-16 gap-6 reveal">
|
|
<div>
|
|
<span class="uppercase tracking-[0.3em] text-[#bc6c25] font-semibold text-sm">Seasonal Selection</span>
|
|
<h2 class="text-4xl md:text-5xl mt-4">Our Signature Roasts</h2>
|
|
</div>
|
|
<p class="max-w-md text-stone-500">Small lots available in limited quantities. Once they're gone, they're gone until the next harvest.</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-3 gap-10">
|
|
<!-- Product 1 -->
|
|
<div class="product-card group cursor-pointer reveal" style="transition-delay: 0.1s;">
|
|
<div class="relative aspect-[3/4] bg-stone-100 overflow-hidden mb-6">
|
|
<img src="https://images.unsplash.com/photo-1559056199-641a4317134a?auto=format&fit=crop&q=80&w=800" alt="Midnight Velvet Coffee" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
|
|
<div class="product-overlay absolute inset-0 bg-black/20 opacity-0 transition-all duration-300 flex items-end p-6">
|
|
<button class="w-full bg-white text-[#2c1e1a] py-3 font-semibold uppercase tracking-widest text-xs hover:bg-[#bc6c25] hover:text-white transition-colors focus-ring">Add to Cart — $19</button>
|
|
</div>
|
|
</div>
|
|
<h3 class="text-2xl mb-2">Midnight Velvet</h3>
|
|
<p class="text-stone-500 text-sm uppercase tracking-widest mb-3">Dark Roast • Whole Bean</p>
|
|
<p class="text-stone-600">Notes of dark chocolate, molasses, and a hint of smoked cedar.</p>
|
|
</div>
|
|
|
|
<!-- Product 2 -->
|
|
<div class="product-card group cursor-pointer reveal" style="transition-delay: 0.2s;">
|
|
<div class="relative aspect-[3/4] bg-stone-100 overflow-hidden mb-6">
|
|
<img src="https://images.unsplash.com/photo-1580915411954-2822f906c304?auto=format&fit=crop&q=80&w=800" alt="Sun-Drenched Citron Coffee" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
|
|
<div class="product-overlay absolute inset-0 bg-black/20 opacity-0 transition-all duration-300 flex items-end p-6">
|
|
<button class="w-full bg-white text-[#2c1e1a] py-3 font-semibold uppercase tracking-widest text-xs hover:bg-[#bc6c25] hover:text-white transition-colors focus-ring">Add to Cart — $22</button>
|
|
</div>
|
|
</div>
|
|
<h3 class="text-2xl mb-2">Sun-Drenched Citron</h3>
|
|
<p class="text-stone-500 text-sm uppercase tracking-widest mb-3">Light Roast • Whole Bean</p>
|
|
<p class="text-stone-600">Notes of lemon zest, jasmine, and bright wildflower honey.</p>
|
|
</div>
|
|
|
|
<!-- Product 3 -->
|
|
<div class="product-card group cursor-pointer reveal" style="transition-delay: 0.3s;">
|
|
<div class="relative aspect-[3/4] bg-stone-100 overflow-hidden mb-6">
|
|
<img src="https://images.unsplash.com/photo-1514432324607-a09d9b4aefdd?auto=format&fit=crop&q=80&w=800" alt="Hearthstone Blend Coffee" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
|
|
<div class="product-overlay absolute inset-0 bg-black/20 opacity-0 transition-all duration-300 flex items-end p-6">
|
|
<button class="w-full bg-white text-[#2c1e1a] py-3 font-semibold uppercase tracking-widest text-xs hover:bg-[#bc6c25] hover:text-white transition-colors focus-ring">Add to Cart — $20</button>
|
|
</div>
|
|
</div>
|
|
<h3 class="text-2xl mb-2">Hearthstone Blend</h3>
|
|
<p class="text-stone-500 text-sm uppercase tracking-widest mb-3">Medium Roast • Whole Bean</p>
|
|
<p class="text-stone-600">Notes of toasted hazelnut, caramel, and subtle baking spices.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Subscription CTA -->
|
|
<section id="subscription" class="py-24 px-6 bg-[#2c1e1a] text-[#fdfcf0] overflow-hidden relative">
|
|
<div class="absolute top-0 left-0 w-full h-full opacity-10">
|
|
<svg width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M 40 0 L 0 0 0 40" fill="none" stroke="white" stroke-width="1"/></pattern></defs><rect width="100%" height="100%" fill="url(#grid)" /></svg>
|
|
</div>
|
|
<div class="max-w-3xl mx-auto text-center relative z-10">
|
|
<h2 class="text-4xl md:text-6xl font-serif mb-6">Never Run Dry.</h2>
|
|
<p class="text-xl text-stone-400 mb-12">Subscribe to our monthly roast club. Freshly roasted beans delivered to your doorstep on your schedule.</p>
|
|
|
|
<form class="flex flex-col md:flex-row gap-4">
|
|
<input type="email" placeholder="Enter your email" class="flex-1 px-8 py-4 rounded-full bg-white/10 border border-white/20 text-white placeholder-stone-500 focus:outline-none focus:border-[#dda15e] transition-colors">
|
|
<button type="submit" class="bg-[#bc6c25] text-white px-10 py-4 rounded-full font-bold hover:bg-[#dda15e] transition-all focus-ring">Join the Club</button>
|
|
</form>
|
|
<p class="mt-6 text-sm text-stone-500 italic">Cancel or pause anytime. Free shipping on all subscriptions.</p>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer id="contact" class="bg-[#fdfcf0] pt-20 pb-10 px-6 border-t border-stone-200">
|
|
<div class="max-w-7xl mx-auto">
|
|
<div class="grid md:grid-cols-4 gap-12 mb-16">
|
|
<div class="col-span-1 md:col-span-2">
|
|
<a href="#" class="text-3xl font-serif font-bold tracking-tighter text-espresso">
|
|
EMBER & <span class="text-[#bc6c25]">GRAIN</span>
|
|
</a>
|
|
<p class="mt-6 text-stone-600 max-w-sm">
|
|
Crafting extraordinary coffee experiences through meticulous sourcing and small-batch artistry. From our hearth to your home.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-bold uppercase tracking-widest text-sm mb-6">Explore</h4>
|
|
<ul class="space-y-4 text-stone-600">
|
|
<li><a href="#collection" class="hover:text-[#bc6c25] transition-colors">Shop All</a></li>
|
|
<li><a href="#subscription" class="hover:text-[#bc6c25] transition-colors">Subscriptions</a></li>
|
|
<li><a href="#" class="hover:text-[#bc6c25] transition-colors">Wholesale</a></li>
|
|
<li><a href="#" class="hover:text-[#bc6c25] transition-colors">Gift Cards</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-bold uppercase tracking-widest text-sm mb-6">Connect</h4>
|
|
<ul class="space-y-4 text-stone-600">
|
|
<li><a href="#" class="hover:text-[#bc6c25] transition-colors">Instagram</a></li>
|
|
<li><a href="#" class="hover:text-[#bc6c25] transition-colors">Facebook</a></li>
|
|
<li><a href="#" class="hover:text-[#bc6c25] transition-colors">Pinterest</a></li>
|
|
<li><a href="#" class="hover:text-[#bc6c25] transition-colors">Contact Us</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="pt-8 border-t border-stone-200 flex flex-col md:flex-row justify-between items-center gap-4 text-sm text-stone-400">
|
|
<p>© 2024 Ember & Grain Coffee Roasters. All rights reserved.</p>
|
|
<div class="flex space-x-6">
|
|
<a href="#" class="hover:text-stone-600">Privacy Policy</a>
|
|
<a href="#" class="hover:text-stone-600">Terms of Service</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// Sticky Nav Scroll Effect
|
|
const nav = document.getElementById('main-nav');
|
|
window.addEventListener('scroll', () => {
|
|
if (window.scrollY > 50) {
|
|
nav.classList.add('nav-blur', 'bg-[#fdfcf0]/80', 'shadow-sm', 'py-3');
|
|
nav.classList.remove('py-4');
|
|
} else {
|
|
nav.classList.remove('nav-blur', 'bg-[#fdfcf0]/80', 'shadow-sm', 'py-3');
|
|
nav.classList.add('py-4');
|
|
}
|
|
});
|
|
|
|
// Mobile Menu Toggle
|
|
const menuBtn = document.getElementById('menu-btn');
|
|
const mobileMenu = document.getElementById('mobile-menu');
|
|
menuBtn.addEventListener('click', () => {
|
|
mobileMenu.classList.toggle('hidden');
|
|
});
|
|
|
|
// Close mobile menu on link click
|
|
document.querySelectorAll('#mobile-menu a').forEach(link => {
|
|
link.addEventListener('click', () => {
|
|
mobileMenu.classList.add('hidden');
|
|
});
|
|
});
|
|
|
|
// Intersection Observer for Reveal Animations
|
|
const observerOptions = {
|
|
threshold: 0.15
|
|
};
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('active');
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
document.querySelectorAll('.reveal').forEach(el => {
|
|
observer.observe(el);
|
|
});
|
|
|
|
// Smooth Scrolling for all internal links
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
anchor.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
const target = document.querySelector(this.getAttribute('href'));
|
|
if (target) {
|
|
target.scrollIntoView({
|
|
behavior: 'smooth'
|
|
});
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
<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 57.39s</div></body>
|
|
</html> |