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-73073cc7ef971e5a.html
+317
View File
@@ -0,0 +1,317 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bean & Brew | Artisan Coffee Roaster</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#8B4513',
secondary: '#D2B48C',
accent: '#F5DEB3'
}
}
}
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Montserrat:wght@300;400;600&display=swap');
body {
font-family: 'Montserrat', sans-serif;
scroll-behavior: smooth;
}
h1, h2, h3 {
font-family: 'Playfair Display', serif;
}
.coffee-cup {
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
.hero-image {
transition: transform 0.5s ease;
}
.hero-image:hover {
transform: scale(1.05);
}
</style>
</head>
<body class="bg-accent text-gray-800">
<header class="fixed top-0 w-full bg-white bg-opacity-90 py-4 z-50 shadow-sm">
<div class="container mx-auto px-4 flex justify-between items-center">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center">
<i class="fas fa-mug-hot text-white"></i>
</div>
<h1 class="ml-3 text-xl font-bold">Bean & Brew</h1>
</div>
<nav class="hidden md:block">
<ul class="flex space-x-6">
<li><a href="#about" class="hover:text-primary transition">About</a></li>
<li><a href="#roasters" class="hover:text-primary transition">Our Roasters</a></li>
<li><a href="#products" class="hover:text-primary transition">Products</a></li>
<li><a href="#contact" class="hover:text-primary transition">Contact</a></li>
</ul>
</nav>
<button class="md:hidden text-primary">
<i class="fas fa-bars"></i>
</button>
</div>
</header>
<main>
<!-- Hero Section -->
<section id="hero" class="relative pt-24 pb-16 md:pt-32 md:pb-24">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
<div class="text-center md:text-left">
<h1 class="text-4xl md:text-5xl font-bold mb-6">Artisan Coffee Roasted With Care</h1>
<p class="text-lg mb-8 max-w-lg">Each bean tells a story of passion, craftsmanship and the finest sourcing from small farms around the world.</p>
<div class="flex justify-center md:justify-start space-x-4">
<a href="#products" class="bg-primary text-white px-6 py-3 rounded-full hover:bg-opacity-90 transition">Explore Our Coffee</a>
<a href="#about" class="border-2 border-primary text-primary px-6 py-3 rounded-full hover:bg-primary hover:text-white transition">Learn More</a>
</div>
</div>
<div class="relative">
<div class="relative h-80 w-full overflow-hidden rounded-xl shadow-lg">
<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="hero-image w-full h-full object-cover">
</div>
<p class="text-sm mt-3 text-center">Photo by <a href="https://www.pexels.com/photo/silver-steel-tube-on-brown-textile-4820676/" class="underline hover:text-primary">cottonbro studio</a> on Pexels</p>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="py-16 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold mb-4">Our Coffee Journey</h2>
<p class="max-w-xl mx-auto">A passion for excellence and sustainability in every cup.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-secondary p-6 rounded-lg shadow-sm">
<i class="fas fa-seedling text-primary text-3xl mb-4"></i>
<h3 class="text-xl font-bold mb-2">Sustainable Sourcing</h3>
<p>We partner directly with small farms to ensure fair wages and environmentally friendly practices.</p>
</div>
<div class="bg-secondary p-6 rounded-lg shadow-sm">
<i class="fas fa-mug-hot text-primary text-3xl mb-4"></i>
<h3 class="text-xl font-bold mb-2">Artisan Roasting</h3>
<p>Our small-batch roasting preserves the unique flavors and aromas of each origin.</p>
</div>
<div class="bg-secondary p-6 rounded-lg shadow-sm">
<i class="fas fa-users text-primary text-3xl mb-4"></i>
<h3 class="text-xl font-bold mb-2">Community Focused</h3>
<p>We're committed to local events, workshops and supporting community initiatives.</p>
</div>
</div>
</div>
</section>
<!-- Roasters Section -->
<section id="roasters" class="py-16">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold mb-4">Meet Our Roasters</h2>
<p class="max-w-xl mx-auto">Each of our roasters brings years of experience and passion to creating perfect brews.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<img src="https://images.pexels.com/photos/1162954/pexels-photo-1162954.jpeg?auto=compress&cs=tinysrgb&w=1200" alt="Roaster 1" class="w-full h-64 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Sarah Mitchell</h3>
<p class="text-primary mb-4">Master Roaster, 15 years experience</p>
<p>Sarah's expertise in coffee origins and roasting techniques ensures every cup meets our standards of excellence.</p>
</div>
</div>
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<img src="https://images.pexels.com/photos/1432080/pexels-photo-1432080.jpeg?auto=compress&cs=tinysrgb&w=1200" alt="Roaster 2" class="w-full h-64 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold mb-2">James Rodriguez</h3>
<p class="text-primary mb-4">Specialty Coffee Expert</p>
<p>With a background in coffee science and sustainable farming, James brings innovative approach to our roasting process.</p>
</div>
</div>
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<img src="https://images.pexels.com/photos/4257674/pexels-photo-4257674.jpeg?auto=compress&cs=tinysrgb&w=1200" alt="Roaster 3" class="w-full h-64 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Maria Johnson</h3>
<p class="text-primary mb-4">Sustainability Specialist</p>
<p>Maria ensures that our processes are environmentally responsible and socially ethical.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Products Section -->
<section id="products" class="py-16 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold mb-4">Our Coffee Selection</h2>
<p class="max-w-xl mx-auto">Discover our premium coffee varieties, hand-selected and roasted to perfection.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="bg-secondary rounded-lg p-6 shadow-sm">
<div class="flex justify-center mb-4">
<img src="https://images.pexels.com/photos/4535791/pexels-photo-4535791.jpeg?auto=compress&cs=tinysrgb&w=1200" alt="Coffee 1" class="w-32 h-32 object-cover rounded-full coffee-cup">
</div>
<h3 class="text-xl font-bold text-center mb-2">Guatemala Select</h3>
<p class="text-center mb-4">Rich, smooth with bright caramel notes.</p>
<div class="flex justify-between items-center">
<span class="font-bold">$12.99/lb</span>
<button class="bg-primary text-white px-4 py-2 rounded-full hover:bg-opacity-90 transition">Add to Cart</button>
</div>
</div>
<div class="bg-secondary rounded-lg p-6 shadow-sm">
<div class="flex justify-center mb-4">
<img src="https://images.pexels.com/photos/4535792/pexels-photo-4535792.jpeg?auto=compress&cs=tinysrgb&w=1200" alt="Coffee 2" class="w-32 h-32 object-cover rounded-full coffee-cup">
</div>
<h3 class="text-xl font-bold text-center mb-2">Ethiopian Bright</h3>
<p class="text-center mb-4">Floral, citrus notes with a clean finish.</p>
<div class="flex justify-between items-center">
<span class="font-bold">$14.99/lb</span>
<button class="bg-primary text-white px-4 py-2 rounded-full hover:bg-opacity-90 transition">Add to Cart</button>
</div>
</div>
<div class="bg-secondary rounded-lg p-6 shadow-sm">
<div class="flex justify-center mb-4">
<img src="https://images.pexels.com/photos/4535793/pexels-photo-4535793.jpeg?auto=compress&cs=tinysrgb&w=1200" alt="Coffee 3" class="w-32 h-32 object-cover rounded-full coffee-cup">
</div>
<h3 class="text-xl font-bold text-center mb-2">Colombian Classic</h3>
<p class="text-center mb-4">Balanced flavor profile with nutty undertones.</p>
<div class="flex justify-between items-center">
<span class="font-bold">$13.99/lb</span>
<button class="bg-primary text-white px-4 py-2 rounded-full hover:bg-opacity-90 transition">Add to Cart</button>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="py-16 bg-accent">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold mb-4">What Our Customers Say</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="bg-white p-6 rounded-lg shadow-sm">
<p class="italic mb-4">"The quality of Bean & Brew's coffee is unmatched. I've tried many specialty roasters, but this one consistently delivers exceptional cups."</p>
<div class="flex items-center">
<img src="https://images.pexels.com/photos/2106751/pexels-photo-2106751.jpeg?auto=compress&cs=tinysrgb&w=1200" alt="Customer 1" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold">Michael Thompson</h4>
<p>Regular Customer</p>
</div>
</div>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm">
<p class="italic mb-4">"I love how Bean & Brew supports sustainability and ethical practices. Their coffee tastes great, knowing it's good for the environment."</p>
<div class="flex items-center">
<img src="https://images.pexels.com/photos/5781390/pexels-photo-5781390.jpeg?auto=compress&cs=tinysrgb&w=1200" alt="Customer 2" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold">Emma Rodriguez</h4>
<p>Local Coffee Enthusiast</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-16 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold mb-4">Visit Our Coffee Shop</h2>
<p class="max-w-xl mx-auto">Come taste our premium selection and join our community.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-secondary p-6 rounded-lg text-center">
<i class="fas fa-map-marker-alt text-primary text-2xl mb-4"></i>
<h3 class="text-xl font-bold mb-2">Visit Location</h3>
<p>123 Coffee Street<br>Beanville, CA 90210</p>
</div>
<div class="bg-secondary p-6 rounded-lg text-center">
<i class="fas fa-clock text-primary text-2xl mb-4"></i>
<h3 class="text-xl font-bold mb-2">Opening Hours</h3>
<p>Monday-Friday: 7AM-8PM<br>Saturday-Sunday: 8AM-6PM</p>
</div>
<div class="bg-secondary p-6 rounded-lg text-center">
<i class="fas fa-phone-alt text-primary text-2xl mb-4"></i>
<h3 class="text-xl font-bold mb-2">Contact Us</h3>
<p>Phone: (555) 123-4567<br>Email: info@beanandbrew.com</p>
</div>
</div>
</div>
</section>
</main>
<footer class="bg-primary text-white py-12">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div>
<h3 class="text-xl font-bold mb-4">Bean & Brew</h3>
<p>Artisan coffee roasted with passion and care for the finest taste experiences.</p>
</div>
<div>
<h3 class="text-xl font-bold mb-4">Quick Links</h3>
<ul class="space-y-2">
<li><a href="#about" class="hover:text-accent transition">About Us</a></li>
<li><a href="#roasters" class="hover:text-accent transition">Our Roasters</a></li>
<li><a href="#products" class="hover:text-accent transition">Products</a></li>
<li><a href="#contact" class="hover:text-accent transition">Contact</a></li>
</ul>
</div>
<div>
<h3 class="text-xl font-bold mb-4">Newsletter</h3>
<p>Subscribe for updates and special offers.</p>
<form class="mt-4">
<input type="email" placeholder="Your email" class="w-full px-4 py-2 rounded-full text-gray-800 mb-2">
<button class="bg-accent text-primary px-4 py-2 rounded-full hover:bg-white transition">Subscribe</button>
</form>
</div>
</div>
<div class="border-t border-accent mt-8 pt-8 text-center">
<p>&copy; 2023 Bean & Brew. All rights reserved.</p>
</div>
</div>
</footer>
<script>
// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
window.scrollTo({
top: target.offsetTop - 80,
behavior: 'smooth'
});
}
});
});
// Header scroll effect
window.addEventListener('scroll', function() {
const header = document.querySelector('header');
if (window.scrollY > 50) {
header.classList.add('shadow-md');
} else {
header.classList.remove('shadow-md');
}
});
</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 86.93s</div></body>
</html>