christian/website-ai-generator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

yes

Browse Source
This commit is contained in:
christian
2026-07-21 23:07:35 +02:00
parent 80ee4cc892
commit 1d9e3bc7d4
21 changed files with 5029 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/seed-547c8ddf705b3438.html
+303
View File
@@ -0,0 +1,303 @@
<!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 & Bean | 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;0,700;1,400&family=Inter:wght@300;400;600&display=swap" rel="stylesheet">
<script src="https://unpkg.com/lucide@latest"></script>
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #FDFBF7;
color: #2D1B14;
}
h1, h2, h3, .serif {
font-family: 'Playfair Display', serif;
}
.coffee-gradient {
background: linear-gradient(rgba(45, 27, 20, 0.7), rgba(45, 27, 20, 0.7)), url('https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?auto=format&fit=crop&q=80&w=2000');
background-size: cover;
background-position: center;
}
.card-hover:hover {
transform: translateY(-8px);
transition: transform 0.3s ease;
}
.nav-blur {
backdrop-filter: blur(12px);
background-color: rgba(253, 251, 247, 0.8);
}
.reveal {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s ease-out;
}
.reveal.active {
opacity: 1;
transform: translateY(0);
}
</style>
</head>
<body class="overflow-x-hidden">
<!-- Navigation -->
<nav class="fixed w-full z-50 nav-blur border-b border-stone-200">
<div class="max-w-7xl mx-auto px-6 py-4 flex justify-between items-center">
<a href="#" class="text-2xl font-bold serif tracking-tight text-[#2D1B14]">EMBER & BEAN</a>
<div class="hidden md:flex space-x-8 text-sm font-medium tracking-widest uppercase">
<a href="#shop" class="hover:text-orange-800 transition-colors">Shop Coffee</a>
<a href="#process" class="hover:text-orange-800 transition-colors">Our Process</a>
<a href="#about" class="hover:text-orange-800 transition-colors">About</a>
<a href="#subscribe" class="hover:text-orange-800 transition-colors">Subscribe</a>
</div>
<div class="flex items-center space-x-5">
<button class="p-1"><i data-lucide="search" class="w-5 h-5"></i></button>
<button class="p-1 relative">
<i data-lucide="shopping-bag" class="w-5 h-5"></i>
<span class="absolute -top-1 -right-1 bg-orange-800 text-white text-[10px] rounded-full h-4 w-4 flex items-center justify-center">0</span>
</button>
<button class="md:hidden"><i data-lucide="menu" class="w-6 h-6"></i></button>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="relative h-screen flex items-center justify-center overflow-hidden">
<div class="absolute inset-0 z-0">
<img src="https://images.pexels.com/photos/4820676/pexels-photo-4820676.jpeg?auto=compress&amp;cs=tinysrgb&amp;fit=crop&amp;h=627&amp;w=1200" alt="Detailed image of roasted coffee beans spinning inside a professional coffee roaster." class="w-full h-full object-cover scale-105">
<div class="absolute inset-0 bg-black/40"></div>
</div>
<div class="relative z-10 text-center px-6 max-w-4xl">
<span class="text-white/90 uppercase tracking-[0.4em] text-sm mb-6 block animate-fade-in">Small Batch • Hand Roasted • Ethical Sourcing</span>
<h1 class="text-5xl md:text-8xl text-white mb-8 leading-tight">The Art of the Perfect Pour</h1>
<div class="flex flex-col md:flex-row gap-4 justify-center">
<a href="#shop" class="px-10 py-4 bg-[#FDFBF7] text-[#2D1B14] font-semibold hover:bg-orange-50 transition-colors">Shop All Coffee</a>
<a href="#process" class="px-10 py-4 border border-white text-white font-semibold hover:bg-white/10 transition-colors">Discover the Origin</a>
</div>
</div>
<div class="absolute bottom-10 right-10 text-white/70 text-xs italic hidden md:block">
<a href="https://www.pexels.com/photo/silver-steel-tube-on-brown-textile-4820676/" class="hover:text-white transition-colors underline decoration-orange-500/50 decoration-2 underline-offset-4">
Photo by cottonbro studio on Pexels
</a>
</div>
</section>
<!-- Features / Values -->
<section class="py-24 px-6">
<div class="max-w-7xl mx-auto grid md:grid-cols-3 gap-16">
<div class="text-center reveal">
<div class="w-16 h-16 bg-orange-50 rounded-full flex items-center justify-center mx-auto mb-6 text-orange-900">
<i data-lucide="map-pin"></i>
</div>
<h3 class="text-2xl mb-4 serif">Direct Trade</h3>
<p class="text-stone-500 leading-relaxed">We build lasting relationships with farmers, ensuring every bean is sourced ethically and sustainably.</p>
</div>
<div class="text-center reveal" style="transition-delay: 100ms;">
<div class="w-16 h-16 bg-orange-50 rounded-full flex items-center justify-center mx-auto mb-6 text-orange-900">
<i data-lucide="flame"></i>
</div>
<h3 class="text-2xl mb-4 serif">Precision Roasting</h3>
<p class="text-stone-500 leading-relaxed">Using traditional methods and modern thermal sensing to unlock unique flavor profiles.</p>
</div>
<div class="text-center reveal" style="transition-delay: 200ms;">
<div class="w-16 h-16 bg-orange-50 rounded-full flex items-center justify-center mx-auto mb-6 text-orange-900">
<i data-lucide="truck"></i>
</div>
<h3 class="text-2xl mb-4 serif">Freshness First</h3>
<p class="text-stone-500 leading-relaxed">Roasted in small batches and shipped within 48 hours to ensure maximum aroma.</p>
</div>
</div>
</section>
<!-- Shop Section -->
<section id="shop" class="py-24 bg-stone-100">
<div class="max-w-7xl mx-auto px-6">
<div class="flex flex-col md:flex-row justify-between items-end mb-16 gap-6">
<div class="max-w-xl">
<h2 class="text-4xl md:text-5xl mb-4 serif">Curated Collections</h2>
<p class="text-stone-600">From light, floral citrus notes to deep, chocolatey finishes. Find your perfect ritual.</p>
</div>
<div class="flex gap-4 text-sm font-medium uppercase tracking-widest">
<button class="pb-1 border-b-2 border-orange-800 text-orange-800">All</button>
<button class="pb-1 text-stone-400 hover:text-stone-600 transition-colors">Single Origin</button>
<button class="pb-1 text-stone-400 hover:text-stone-600 transition-colors">Blends</button>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
<!-- Product 1 -->
<div class="group card-hover bg-white overflow-hidden shadow-sm">
<div class="aspect-[4/5] bg-stone-200 relative overflow-hidden">
<img src="https://images.unsplash.com/photo-1559056199-641279164123?auto=format&fit=crop&q=80&w=800" alt="Coffee bag" class="object-cover w-full h-full group-hover:scale-110 transition-transform duration-700">
<div class="absolute top-4 left-4">
<span class="bg-white/90 backdrop-blur px-3 py-1 text-[10px] font-bold tracking-widest uppercase">Light Roast</span>
</div>
</div>
<div class="p-8 text-center">
<h3 class="text-xl mb-2 serif">Ethiopian Yirgacheffe</h3>
<p class="text-sm text-stone-500 mb-4 italic">Jasmine, Lemon, Honey</p>
<span class="text-lg font-semibold">$22.00</span>
<button class="w-full mt-6 py-3 border border-stone-200 hover:bg-stone-900 hover:text-white transition-all uppercase text-xs tracking-widest font-bold">Add to Bag</button>
</div>
</div>
<!-- Product 2 -->
<div class="group card-hover bg-white overflow-hidden shadow-sm">
<div class="aspect-[4/5] bg-stone-200 relative overflow-hidden">
<img src="https://images.unsplash.com/photo-1580915411954-28227276535a?auto=format&fit=crop&q=80&w=800" alt="Coffee bag" class="object-cover w-full h-full group-hover:scale-110 transition-transform duration-700">
<div class="absolute top-4 left-4">
<span class="bg-white/90 backdrop-blur px-3 py-1 text-[10px] font-bold tracking-widest uppercase">Medium Roast</span>
</div>
</div>
<div class="p-8 text-center">
<h3 class="text-xl mb-2 serif">Midnight Velvet Blend</h3>
<p class="text-sm text-stone-500 mb-4 italic">Dark Chocolate, Molasses, Nutty</p>
<span class="text-lg font-semibold">$19.00</span>
<button class="w-full mt-6 py-3 border border-stone-200 hover:bg-stone-900 hover:text-white transition-all uppercase text-xs tracking-widest font-bold">Add to Bag</button>
</div>
</div>
<!-- Product 3 -->
<div class="group card-hover bg-white overflow-hidden shadow-sm">
<div class="aspect-[4/5] bg-stone-200 relative overflow-hidden">
<img src="https://images.unsplash.com/photo-1611854779393-1b2da97a131a?auto=format&fit=crop&q=80&w=800" alt="Coffee bag" class="object-cover w-full h-full group-hover:scale-110 transition-transform duration-700">
<div class="absolute top-4 left-4">
<span class="bg-white/90 backdrop-blur px-3 py-1 text-[10px] font-bold tracking-widest uppercase">Medium Roast</span>
</div>
</div>
<div class="p-8 text-center">
<h3 class="text-xl mb-2 serif">Highland Peak</h3>
<p class="text-sm text-stone-500 mb-4 italic">Caramel, Red Berry, Toasted Oats</p>
<span class="text-lg font-semibold">$20.00</span>
<button class="w-full mt-6 py-3 border border-stone-200 hover:bg-stone-900 hover:text-white transition-all uppercase text-xs tracking-widest font-bold">Add to Bag</button>
</div>
</div>
</div>
</div>
</section>
<!-- Process Section -->
<section id="process" class="py-24 px-6">
<div class="max-w-7xl mx-auto flex flex-col lg:flex-row gap-20 items-center">
<div class="lg:w-1/2 relative">
<div class="w-full aspect-square rounded-full overflow-hidden border-[20px] border-stone-100">
<img src="https://images.unsplash.com/photo-1447948633334-437e9145330a?auto=format&fit=crop&q=80&w=1000" alt="Roasting process" class="w-full h-full object-cover">
</div>
<div class="absolute -bottom-10 -right-10 bg-[#2D1B14] text-white p-8 hidden md:block max-w-xs">
<p class="serif text-xl italic leading-relaxed">"Every bean tells a story of the soil, the sun, and the hands that picked it."</p>
</div>
</div>
<div class="lg:w-1/2">
<h2 class="text-4xl md:text-5xl mb-8 serif">How We Create Flavor</h2>
<ul class="space-y-10">
<li class="flex gap-6">
<span class="text-3xl font-bold text-orange-800/30 serif">01</span>
<div>
<h4 class="text-xl font-semibold mb-2">The Search</h4>
<p class="text-stone-500">We scout remote regions, from the highlands of Ethiopia to the volcanic soils of Guatemala, looking for exceptional quality.</p>
</div>
</li>
<li class="flex gap-6">
<span class="text-3xl font-bold text-orange-800/30 serif">02</span>
<div>
<h4 class="text-xl font-semibold mb-2">The Roast</h4>
<p class="text-stone-500">Our master roasters use heat and airflow to develop specific profiles, ensuring clarity of taste without over-roasting.</p>
</div>
</li>
<li class="flex gap-6">
<span class="text-3xl font-bold text-orange-800/30 serif">03</span>
<div>
<h4 class="text-xl font-semibold mb-2">The Delivery</h4>
<p class="text-stone-500">We pack our beans in valve-sealed bags immediately after cooling to preserve the volatile aromatic compounds.</p>
</div>
</li>
</ul>
</div>
</div>
</section>
<!-- Subscription Section -->
<section id="subscribe" class="py-24 px-6">
<div class="max-w-5xl mx-auto bg-[#2D1B14] rounded-3xl p-12 md:p-20 text-center text-white relative overflow-hidden">
<div class="absolute top-0 left-0 w-full h-full opacity-10 pointer-events-none">
<div class="absolute inset-0" style="background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0); background-size: 40px 40px;"></div>
</div>
<h2 class="text-4xl md:text-6xl mb-6 serif">Never Run Out Again</h2>
<p class="text-stone-400 text-lg mb-10 max-w-xl mx-auto">Get freshly roasted coffee delivered to your door on your schedule. Save 15% on every order.</p>
<form class="flex flex-col md:flex-row gap-4 max-w-md mx-auto">
<input type="email" placeholder="Your email address" class="flex-1 px-6 py-4 rounded-full bg-white/10 border border-white/20 text-white placeholder:text-stone-500 focus:outline-none focus:ring-2 focus:ring-orange-500">
<button type="submit" class="px-8 py-4 bg-orange-800 hover:bg-orange-700 rounded-full font-bold transition-colors">Subscribe</button>
</form>
<p class="mt-6 text-xs text-stone-500 uppercase tracking-widest">No commitment. Cancel anytime.</p>
</div>
</section>
<!-- Footer -->
<footer class="py-12 px-6 border-t border-stone-200">
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-12">
<div class="col-span-1 md:col-span-1">
<a href="#" class="text-2xl font-bold serif text-[#2D1B14] block mb-6">EMBER & BEAN</a>
<p class="text-stone-500 text-sm leading-relaxed">Elevating your morning ritual through ethical sourcing and masterful roasting.</p>
</div>
<div>
<h4 class="font-bold uppercase text-xs tracking-widest mb-6">Shop</h4>
<ul class="space-y-4 text-sm text-stone-500">
<li><a href="#" class="hover:text-stone-900 transition-colors">All Coffee</a></li>
<li><a href="#" class="hover:text-stone-900 transition-colors">Brewing Gear</a></li>
<li><a href="#" class="hover:text-stone-900 transition-colors">Gift Cards</a></li>
<li><a href="#" class="hover:text-stone-900 transition-colors">Subscriptions</a></li>
</ul>
</div>
<div>
<h4 class="font-bold uppercase text-xs tracking-widest mb-6">Company</h4>
<ul class="space-y-4 text-sm text-stone-500">
<li><a href="#" class="hover:text-stone-900 transition-colors">Our Story</a></li>
<li><a href="#" class="hover:text-stone-900 transition-colors">Sustainability</a></li>
<li><a href="#" class="hover:text-stone-900 transition-colors">Wholesale</a></li>
<li><a href="#" class="hover:text-stone-900 transition-colors">Contact</a></li>
</ul>
</div>
<div>
<h4 class="font-bold uppercase text-xs tracking-widest mb-6">Follow Us</h4>
<div class="flex space-x-4">
<a href="#" class="text-stone-400 hover:text-stone-900"><i data-lucide="instagram"></i></a>
<a href="#" class="text-stone-400 hover:text-stone-900"><i data-lucide="facebook"></i></a>
<a href="#" class="text-stone-400 hover:text-stone-900"><i data-lucide="twitter"></i></a>
</div>
</div>
</div>
<div class="max-w-7xl mx-auto mt-16 pt-8 border-t border-stone-100 text-center text-xs text-stone-400 uppercase tracking-widest">
&copy; 2024 Ember & Bean Roasters. All Rights Reserved.
</div>
</footer>
<script>
// Initialize Lucide icons
lucide.createIcons();
// Reveal animations on scroll
function reveal() {
var reveals = document.querySelectorAll(".reveal");
for (var i = 0; i < reveals.length; i++) {
var windowHeight = window.innerHeight;
var elementTop = reveals[i].getBoundingClientRect().top;
var elementVisible = 150;
if (elementTop < windowHeight - elementVisible) {
reveals[i].classList.add("active");
}
}
}
window.addEventListener("scroll", reveal);
// Trigger once on load
window.onload = reveal;
</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 54.71s</div></body>
</html>