317 lines
15 KiB
HTML
317 lines
15 KiB
HTML
<!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&cs=tinysrgb&fit=crop&h=627&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>© 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> |