yes
This commit is contained in:
@@ -0,0 +1,310 @@
|
||||
<!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>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -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&cs=tinysrgb&fit=crop&h=627&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">
|
||||
© 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>
|
||||
@@ -0,0 +1,294 @@
|
||||
<!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>Root & Reef | Restore Our Coastal Forests</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,700;1,700&family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--forest-deep: #1a3c34;
|
||||
--earth-clay: #9c6644;
|
||||
--mist-white: #f8f9fa;
|
||||
}
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: var(--mist-white);
|
||||
color: #1a1a1a;
|
||||
}
|
||||
h1, h2, h3, .serif {
|
||||
font-family: 'Playfair Display', serif;
|
||||
}
|
||||
.glass-card {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition: all 0.8s ease-out;
|
||||
}
|
||||
.reveal.active {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
.btn-gradient {
|
||||
background: linear-gradient(135deg, #2d5a27 0%, #1a3c34 100%);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
.btn-gradient:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 20px rgba(26, 60, 52, 0.2);
|
||||
}
|
||||
.impact-number {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="antialiased">
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="fixed w-full z-50 bg-white/80 backdrop-blur-md border-b border-gray-100">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between items-center h-16">
|
||||
<div class="flex items-center">
|
||||
<span class="text-2xl font-bold text-[#1a3c34] tracking-tight">ROOT & REEF</span>
|
||||
</div>
|
||||
<div class="hidden md:flex space-x-8 items-center">
|
||||
<a href="#about" class="text-sm font-semibold text-gray-600 hover:text-[#1a3c34] transition">Our Mission</a>
|
||||
<a href="#impact" class="text-sm font-semibold text-gray-600 hover:text-[#1a3c34] transition">Our Impact</a>
|
||||
<a href="#donate" class="px-6 py-2 btn-gradient text-white text-sm font-bold rounded-full">Donate Now</a>
|
||||
</div>
|
||||
<div class="md:hidden">
|
||||
<button class="text-gray-600" id="mobile-menu-btn">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<header class="relative min-h-screen flex items-center pt-16 overflow-hidden">
|
||||
<div class="absolute inset-0 z-0">
|
||||
<img src="https://images.pexels.com/photos/35125738/pexels-photo-35125738.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200" alt="Lush mangrove forest with intricate root systems in Krabi, Thailand." class="w-full h-full object-cover scale-105">
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-black/70 via-black/30 to-transparent"></div>
|
||||
</div>
|
||||
|
||||
<div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full">
|
||||
<div class="max-w-2xl">
|
||||
<span class="inline-block px-3 py-1 mb-6 text-xs font-bold tracking-widest uppercase bg-emerald-500 text-white rounded">Global Restoration Initiative</span>
|
||||
<h1 class="text-5xl md:text-8xl font-bold text-white mb-6 leading-tight">Healing the Coastline, One Root at a Time.</h1>
|
||||
<p class="text-lg md:text-xl text-gray-200 mb-10 leading-relaxed max-w-xl">
|
||||
Coastal ecosystems are our first line of defense. We are restoring mangrove forests and seagrass meadows to protect biodiversity and combat rising tides.
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4">
|
||||
<a href="#donate" class="btn-gradient px-8 py-4 text-white font-bold rounded-md text-center">Support the Movement</a>
|
||||
<a href="#about" class="px-8 py-4 bg-white/10 backdrop-blur-md border border-white/30 text-white font-bold rounded-md text-center hover:bg-white/20 transition">Learn More</a>
|
||||
</div>
|
||||
<div class="mt-12 flex items-center space-x-3 text-white/70 text-xs">
|
||||
<img src="https://images.pexels.com/photos/35125738/pexels-photo-35125738.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200" alt="" class="w-8 h-8 rounded object-cover">
|
||||
<p>Photo by <a href="https://www.pexels.com/photo/dense-mangrove-forest-in-krabi-thailand-35125738/" class="underline hover:text-white">Siarhei Nester</a> on Pexels</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Stats Section -->
|
||||
<section id="impact" class="py-20 bg-[#1a3c34] text-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
|
||||
<div>
|
||||
<div class="text-4xl md:text-6xl font-bold mb-2 impact-number">150K+</div>
|
||||
<div class="text-emerald-200 text-sm uppercase tracking-widest">Saplings Planted</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-4xl md:text-6xl font-bold mb-2 impact-number">12</div>
|
||||
<div class="text-emerald-200 text-sm uppercase tracking-widest">Countries Reached</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-4xl md:text-6xl font-bold mb-2 impact-number">40%</div>
|
||||
<div class="text-emerald-200 text-sm uppercase tracking-widest">Biodiversity Increase</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-4xl md:text-6xl font-bold mb-2 impact-number">2M</div>
|
||||
<div class="text-emerald-200 text-sm uppercase tracking-widest">Tons CO2 Sequestered</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Problem/Solution Section -->
|
||||
<section id="about" class="py-24 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="grid md:grid-cols-2 gap-16 items-center">
|
||||
<div class="reveal">
|
||||
<h2 class="text-4xl md:text-5xl font-bold mb-8 text-[#1a3c34]">The Coastal Crisis is Real.</h2>
|
||||
<p class="text-gray-600 mb-6 text-lg leading-relaxed">
|
||||
Coastal erosion and habitat loss are accelerating at an unprecedented rate. Mangroves and seagrasses—nature's most efficient carbon sinks—are being destroyed by unsustainable development and rising temperatures.
|
||||
</p>
|
||||
<p class="text-gray-600 mb-8 text-lg leading-relaxed">
|
||||
When these habitats vanish, we lose more than just scenery. We lose natural storm barriers, nurseries for marine life, and critical cooling systems for our oceans.
|
||||
</p>
|
||||
<div class="border-l-4 border-[#9c6644] pl-6 py-2">
|
||||
<p class="italic text-gray-700">"We aren't just planting trees; we are building the infrastructure of survival for our coastal communities."</p>
|
||||
<p class="mt-2 font-bold">— Dr. Elena Vance, Lead Ecologist</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4 reveal">
|
||||
<div class="bg-gray-50 p-8 rounded-2xl flex flex-col justify-center">
|
||||
<div class="text-3xl mb-4">🌊</div>
|
||||
<h3 class="text-xl font-bold mb-2">Storm Protection</h3>
|
||||
<p class="text-sm text-gray-500">Mangroves reduce wave energy by up to 66%.</p>
|
||||
</div>
|
||||
<div class="bg-gray-50 p-8 rounded-2xl flex flex-col justify-center mt-8">
|
||||
<div class="text-3xl mb-4">🐟</div>
|
||||
<h3 class="text-xl font-bold mb-2">Fisheries</h3>
|
||||
<p class="text-sm text-gray-500">Over 70% of commercial fish species rely on these habitats.</p>
|
||||
</div>
|
||||
<div class="bg-gray-50 p-8 rounded-2xl flex flex-col justify-center">
|
||||
<div class="text-3xl mb-4">🌡️</div>
|
||||
<h3 class="text-xl font-bold mb-2">Climate Fix</h3>
|
||||
<p class="text-sm text-gray-500">Seagrasses sequester carbon 35x faster than tropical forests.</p>
|
||||
</div>
|
||||
<div class="bg-gray-50 p-8 rounded-2xl flex flex-col justify-center mt-8">
|
||||
<div class="text-3xl mb-4">🏘️</div>
|
||||
<h3 class="text-xl font-bold mb-2">Livelihoods</h3>
|
||||
<p class="text-sm text-gray-500">Empowering 5,000+ local coastal residents.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Donation Section -->
|
||||
<section id="donate" class="py-24 bg-gray-50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-4xl md:text-6xl font-bold mb-4">Your Contribution Matters</h2>
|
||||
<p class="text-gray-600 max-w-2xl mx-auto">Every dollar directly funds nursery maintenance, community education, and reforestation projects in high-risk zones.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
|
||||
<!-- Tier 1 -->
|
||||
<div class="glass-card p-10 rounded-3xl border-2 border-transparent hover:border-[#9c6644] transition-all group">
|
||||
<div class="text-emerald-700 mb-4">🌱</div>
|
||||
<h3 class="text-2xl font-bold mb-2">The Seedling</h3>
|
||||
<div class="text-4xl font-bold mb-6">$25</div>
|
||||
<ul class="text-gray-600 mb-8 space-y-3 text-sm">
|
||||
<li class="flex items-center"><svg class="w-4 h-4 mr-2 text-green-500" fill="currentColor" viewBox="0 0 20 20"><path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"></path></svg>
|
||||
Plant 5 Mangrove Saplings
|
||||
</ul>
|
||||
<button class="w-full py-3 rounded-xl border-2 border-black font-bold group-hover:bg-black group-hover:text-white transition">Contribute $25</button>
|
||||
</div>
|
||||
|
||||
<!-- Tier 2 -->
|
||||
<div class="glass-card p-10 rounded-3xl border-2 border-[#9c6644] transform scale-105 shadow-2xl bg-white">
|
||||
<div class="text-emerald-700 mb-4">🌳</div>
|
||||
<h3 class="text-2xl font-bold mb-2">The Grove</h3>
|
||||
<div class="text-4xl font-bold mb-6">$100</div>
|
||||
<ul class="text-gray-600 mb-8 space-y-3 text-sm">
|
||||
<li class="flex items-center"><svg class="w-4 h-4 mr-2 text-green-500" fill="currentColor" viewBox="0 0 20 20"><path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"></path></svg>
|
||||
Establish 1 Acre of Seagrass
|
||||
</ul>
|
||||
<button class="w-full py-3 rounded-xl bg-[#9c6644] text-white font-bold hover:bg-[#7a5235] transition">Contribute $100</button>
|
||||
</div>
|
||||
|
||||
<!-- Tier 3 -->
|
||||
<div class="glass-card p-10 rounded-3xl border-2 border-transparent hover:border-[#9c6644] transition-all group">
|
||||
<div class="text-emerald-700 mb-4">🌊</div>
|
||||
<h3 class="text-2xl font-bold mb-2">The Reef</h3>
|
||||
<div class="text-4xl font-bold mb-6">$500</div>
|
||||
<ul class="text-gray-600 mb-8 space-y-3 text-sm">
|
||||
<li class="flex items-center"><svg class="w-4 h-4 mr-2 text-green-500" fill="currentColor" viewBox="0 0 20 20"><path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"></path></svg>
|
||||
Fund a Community Nursery
|
||||
</ul>
|
||||
<button class="w-full py-3 rounded-xl border-2 border-black font-bold group-hover:bg-black group-hover:text-white transition">Contribute $500</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-16 text-center">
|
||||
<p class="text-gray-500 mb-4">Prefer a monthly commitment?</p>
|
||||
<button class="px-10 py-4 rounded-full bg-gray-900 text-white font-bold">Set up Monthly Giving</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-[#1a1a1a] text-white py-16">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="grid md:grid-cols-4 gap-12 mb-12">
|
||||
<div class="col-span-2">
|
||||
<h2 class="text-3xl font-bold mb-6">ROOT & REEF</h2>
|
||||
<p class="text-gray-400 max-w-md">
|
||||
A non-profit organization dedicated to the restoration of global coastal ecosystems. We believe that nature is our best technology for a resilient future.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold mb-4">Contact</h4>
|
||||
<p class="text-gray-400 text-sm">hello@rootandreef.org</p>
|
||||
<p class="text-gray-400 text-sm">+1 (555) 987-6543</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold mb-4">Legal</h4>
|
||||
<ul class="text-gray-400 text-sm space-y-2">
|
||||
<li><a href="#" class="hover:text-white">Privacy Policy</a></li>
|
||||
<li><a href="#" class="hover:text-white">Terms of Service</a></li>
|
||||
<li><a href="#" class="hover:text-white">Tax Status (501c3)</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-t border-gray-800 pt-8 text-center text-gray-500 text-xs">
|
||||
© 2024 Root & Reef Initiative. All rights reserved. Seed-61ae4368bba2037e
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Scroll Animation Logic
|
||||
const observerOptions = {
|
||||
threshold: 0.1
|
||||
};
|
||||
|
||||
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);
|
||||
});
|
||||
|
||||
// Mobile Menu Toggle
|
||||
const mobileBtn = document.getElementById('mobile-menu-btn');
|
||||
const nav = document.querySelector('.md\\:flex');
|
||||
|
||||
// Simple alert for donation buttons to simulate interactivity
|
||||
document.querySelectorAll('button').forEach(btn => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
if(btn.innerText.includes('Donate') || btn.innerText.includes('Contribute')) {
|
||||
e.preventDefault();
|
||||
alert("Redirecting to our secure donation portal... Thank you for your support!");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Smooth scroll for anchors
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
document.querySelector(this.getAttribute('href')).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 66.67s<br>Model: unsloth/gemma-4-12B-it-qat-GGUF:Q4_K_XL</div></body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,342 @@
|
||||
<!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>Amalfi Coast | The Azure Guide</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">
|
||||
<style>
|
||||
:root {
|
||||
--color-cream: #FDFCF0;
|
||||
--color-terracotta: #D6684D;
|
||||
--color-ocean: #0077B6;
|
||||
--color-lemon: #F4D03F;
|
||||
}
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: var(--color-cream);
|
||||
color: #2D3436;
|
||||
}
|
||||
h1, h2, h3, .serif {
|
||||
font-family: 'Playfair Display', serif;
|
||||
}
|
||||
.hero-overlay {
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5));
|
||||
}
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition: all 0.8s ease-out;
|
||||
}
|
||||
.reveal.active {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
.nav-link::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 1px;
|
||||
background: currentColor;
|
||||
transition: width .3s;
|
||||
}
|
||||
.nav-link:hover::after {
|
||||
width: 100%;
|
||||
}
|
||||
.card-zoom:hover img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.custom-shadow {
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="antialiased">
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav id="navbar" class="fixed w-full z-50 transition-all duration-300 px-6 py-4">
|
||||
<div class="max-w-7xl mx-auto flex justify-between items-center">
|
||||
<a href="#" class="text-2xl font-bold serif tracking-tight text-white transition-colors duration-300" id="logo">AMALFI</a>
|
||||
|
||||
<!-- Mobile Menu Button -->
|
||||
<button id="menu-btn" class="md:hidden text-white focus:outline-none" aria-label="Toggle Menu">
|
||||
<svg class="w-8 h-8" 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>
|
||||
|
||||
<!-- Desktop Menu -->
|
||||
<div class="hidden md:flex space-x-8 items-center">
|
||||
<a href="#about" class="nav-link text-white hover:text-orange-200 transition-colors duration-300">The Essence</a>
|
||||
<a href="#destinations" class="nav-link text-white hover:text-orange-200 transition-colors duration-300">Destinations</a>
|
||||
<a href="#culinary" class="nav-link text-white hover:text-orange-200 transition-colors duration-300">Culinary</a>
|
||||
<a href="#tips" class="nav-link text-white hover:text-orange-200 transition-colors duration-300">Travel Tips</a>
|
||||
<a href="#contact" class="px-6 py-2 bg-[#D6684D] text-white rounded-full text-sm font-semibold hover:bg-[#b5563d] transition-all duration-300 shadow-lg">Inquire</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu -->
|
||||
<div id="mobile-menu" class="hidden md:hidden absolute top-full left-0 w-full bg-white shadow-xl flex flex-col items-center space-y-6 py-8 text-gray-800">
|
||||
<a href="#about" class="text-lg font-medium hover:text-[#D6684D]">The Essence</a>
|
||||
<a href="#destinations" class="text-lg font-medium hover:text-[#D6684D]">Destinations</a>
|
||||
<a href="#culinary" class="text-lg font-medium hover:text-[#D6684D]">Culinary</a>
|
||||
<a href="#tips" class="text-lg font-medium hover:text-[#D6684D]">Travel Tips</a>
|
||||
</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/18771781/pexels-photo-18771781.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200" alt="Aerial view of the stunning Amalfi coastline with charming buildings and cliffs." class="w-full h-full object-cover">
|
||||
<div class="absolute inset-0 hero-overlay"></div>
|
||||
</div>
|
||||
|
||||
<div class="relative z-10 text-center px-4">
|
||||
<span class="text-lemon text-sm uppercase tracking-[0.4em] mb-4 block font-semibold">Discover Italy's Coastline</span>
|
||||
<h1 class="text-5xl md:text-8xl text-white font-bold mb-6 leading-tight">Amalfi Coast</h1>
|
||||
<p class="text-lg md:text-2xl text-white/90 max-w-2xl mx-auto italic font-light">Where turquoise waters dance with sun-drenched cliffs.</p>
|
||||
</div>
|
||||
|
||||
<div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 z-10 text-white text-xs opacity-70">
|
||||
<p>Photo by <a href="https://www.pexels.com/photo/rocky-hills-on-amalfi-coast-18771781/" class="underline hover:text-lemon transition-colors">Alina Chernii</a> on Pexels</p>
|
||||
</div>
|
||||
|
||||
<div class="absolute bottom-12 left-1/2 transform -translate-x-1/2 animate-bounce">
|
||||
<svg class="w-6 h-6 text-white/50" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path></svg>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- The Essence Section -->
|
||||
<section id="about" class="py-24 px-6">
|
||||
<div class="max-w-5xl mx-auto grid md:grid-cols-2 gap-16 items-center">
|
||||
<div class="reveal">
|
||||
<h2 class="text-4xl md:text-5xl mb-6 text-gray-800">The Azure Dream</h2>
|
||||
<p class="text-lg leading-relaxed text-gray-600 mb-6">
|
||||
Stretching along the southern coast of Italy, the Amalfi Coast is a breathtaking stretch of coastline where dramatic cliffs drop sharply into the shimmering Tyrrhenian Sea.
|
||||
</p>
|
||||
<p class="text-lg leading-relaxed text-gray-600">
|
||||
It is a place of lemon-scented air, pastel-hued villages, and a slow pace of life that invites you to linger over every espresso and every sunset.
|
||||
</p>
|
||||
</div>
|
||||
<div class="reveal relative">
|
||||
<div class="aspect-[4/5] bg-gray-200 rounded-2xl overflow-hidden shadow-2xl">
|
||||
<img src="https://images.unsplash.com/photo-1533105072721-51321c7a324b?auto=format&fit=crop&w=800&q=80" alt="Amalfi landscape" class="w-full h-full object-cover">
|
||||
</div>
|
||||
<div class="absolute -bottom-6 -right-6 w-48 h-48 bg-[#F4D03F] rounded-2xl -z-10"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Destinations Section -->
|
||||
<section id="destinations" class="py-24 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-6">
|
||||
<div class="text-center mb-16 reveal">
|
||||
<h2 class="text-4xl md:text-5xl mb-4">Iconic Villages</h2>
|
||||
<div class="h-1 w-20 bg-[#D6684D] mx-auto"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-10">
|
||||
<!-- Positano -->
|
||||
<div class="reveal group card-zoom overflow-hidden rounded-2xl custom-shadow">
|
||||
<div class="h-80 overflow-hidden">
|
||||
<img src="https://images.unsplash.com/photo-1516483638261-f4dbaf036963?auto=format&fit=crop&w=600&q=80" alt="Positano" class="w-full h-full object-cover transition-transform duration-700">
|
||||
</div>
|
||||
<div class="p-8 bg-white">
|
||||
<h3 class="text-2xl mb-3">Positano</h3>
|
||||
<p class="text-gray-600 leading-relaxed">The vertical paradise. Colorful houses cling to steep cliffs, creating a vibrant mosaic against the blue sea.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Amalfi -->
|
||||
<div class="reveal group card-zoom overflow-hidden rounded-2xl custom-shadow" style="transition-delay: 100ms;">
|
||||
<div class="h-80 overflow-hidden">
|
||||
<img src="https://images.unsplash.com/photo-1594904351112-279046694980?auto=format&fit=crop&w=600&q=80" alt="Amalfi" class="w-full h-full object-cover transition-transform duration-700">
|
||||
</div>
|
||||
<div class="p-8 bg-white">
|
||||
<h3 class="text-2xl mb-3">Amalfi</h3>
|
||||
<p class="text-gray-600 leading-relaxed">A historical powerhouse. Wander through narrow labyrinthine streets and visit the magnificent Cathedral of St. Andrew.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Ravello -->
|
||||
<div class="reveal group card-zoom overflow-hidden rounded-2xl custom-shadow" style="transition-delay: 200ms;">
|
||||
<div class="h-80 overflow-hidden">
|
||||
<img src="https://images.unsplash.com/photo-1633135194090-037e0c0058c3?auto=format&fit=crop&w=600&q=80" alt="Ravello" class="w-full h-full object-cover transition-transform duration-700">
|
||||
</div>
|
||||
<div class="p-8 bg-white">
|
||||
<h3 class="text-2xl mb-3">Ravello</h3>
|
||||
<p class="text-gray-600 leading-relaxed">The balcony of the coast. Perched high above the sea, offering serene gardens and panoramic views.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Culinary Section -->
|
||||
<section id="culinary" class="py-24 px-6 bg-[#F9F6EF]">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="flex flex-col md:flex-row items-center gap-16">
|
||||
<div class="md:w-1/2 reveal">
|
||||
<img src="https://images.unsplash.com/photo-1559014235-8d2e0790a80d?auto=format&fit=crop&w=800&q=80" alt="Italian Food" class="rounded-2xl shadow-2xl">
|
||||
</div>
|
||||
<div class="md:w-1/2 reveal">
|
||||
<h2 class="text-4xl md:text-5xl mb-6">A Taste of the Sun</h2>
|
||||
<p class="text-lg text-gray-600 mb-8">The flavors of the Amalfi Coast are a celebration of the earth and sea. Freshly caught seafood, hand-made pasta, and the legendary Amalfi lemon define the local palate.</p>
|
||||
|
||||
<ul class="space-y-4">
|
||||
<li class="flex items-start gap-4">
|
||||
<span class="w-6 h-6 bg-[#F4D03F] rounded-full mt-1 flex-shrink-0"></span>
|
||||
<div>
|
||||
<h4 class="font-bold">Scialatielli ai Frutti di Mare</h4>
|
||||
<p class="text-sm text-gray-500">Freshly made pasta tossed with clams, mussels, and prawns.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-start gap-4">
|
||||
<span class="w-6 h-6 bg-[#F4D03F] rounded-full mt-1 flex-shrink-0"></span>
|
||||
<div>
|
||||
<h4 class="font-bold">Delizia al Limone</h4>
|
||||
<p class="text-sm text-gray-500">A sponge cake soaked in lemon cream, a true coastal delight.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-start gap-4">
|
||||
<span class="w-6 h-6 bg-[#F4D03F] rounded-full mt-1 flex-shrink-0"></span>
|
||||
<div>
|
||||
<h4 class="font-bold">Limoncello</h4>
|
||||
<p class="text-sm text-gray-500">The iconic digestif, made from the sweet lemons of the region.</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Tips Section -->
|
||||
<section id="tips" class="py-24 px-6">
|
||||
<div class="max-w-4xl mx-auto bg-[#D6684D] text-white rounded-3xl p-8 md:p-16 overflow-hidden relative">
|
||||
<div class="absolute top-0 right-0 -mt-20 -mr-20 w-80 h-80 bg-white/10 rounded-full blur-3xl"></div>
|
||||
<div class="relative z-10">
|
||||
<h2 class="text-3xl md:text-4xl mb-12 text-center">Traveler's Essentials</h2>
|
||||
<div class="grid md:grid-cols-2 gap-12">
|
||||
<div>
|
||||
<h3 class="text-xl font-bold mb-4 border-b border-white/20 pb-2">When to Visit</h3>
|
||||
<p class="text-white/80 leading-relaxed">The best months are May, June, and September. You'll enjoy warm sunshine and clear skies without the intense heat and heavy crowds of July and August.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold mb-4 border-b border-white/20 pb-2">Getting Around</h3>
|
||||
<p class="text-white/80 leading-relaxed">The SITA buses connect the towns, but for the true experience, consider private boat tours or ferry rides to see the coastline from the water.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold mb-4 border-b border-white/20 pb-2">What to Pack</h3>
|
||||
<p class="text-white/80 leading-relaxed">Comfortable walking shoes for the steep stairs, linen fabrics to stay cool, and plenty of sunscreen for those Mediterranean afternoons.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold mb-4 border-b border-white/20 pb-2">Local Etiquette</h3>
|
||||
<p class="text-white/80 leading-relaxed">Embrace 'La Dolce Vita'. Don't rush your meals. The afternoon siesta is widely respected in smaller villages.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer/Contact Section -->
|
||||
<footer id="contact" class="bg-gray-900 text-white py-16 px-6">
|
||||
<div class="max-w-7xl mx-auto grid md:grid-cols-3 gap-12">
|
||||
<div>
|
||||
<h2 class="text-3xl serif mb-6">AMALFI</h2>
|
||||
<p class="text-gray-400 max-w-xs">Curating your perfect Mediterranean escape. Join our newsletter for seasonal travel guides.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-lg font-bold mb-6">Quick Links</h4>
|
||||
<ul class="space-y-3 text-gray-400">
|
||||
<li><a href="#about" class="hover:text-white transition-colors">About the Coast</a></li>
|
||||
<li><a href="#destinations" class="hover:text-white transition-colors">Destinations</a></li>
|
||||
<li><a href="#culinary" class="hover:text-white transition-colors">Dining Guide</a></li>
|
||||
<li><a href="#tips" class="hover:text-white transition-colors">Travel Tips</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-lg font-bold mb-6">Newsletter</h4>
|
||||
<form class="flex gap-2">
|
||||
<input type="email" placeholder="Your email" class="bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 w-full focus:outline-none focus:border-lemon">
|
||||
<button type="submit" class="bg-[#D6684D] px-4 py-2 rounded-lg hover:bg-[#b5563d] transition-colors">Go</button>
|
||||
</form>
|
||||
<div class="mt-8 flex space-x-4 text-gray-400">
|
||||
<a href="#" class="hover:text-white transition-colors">Instagram</a>
|
||||
<a href="#" class="hover:text-white transition-colors">Pinterest</a>
|
||||
<a href="#" class="hover:text-white transition-colors">Facebook</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="max-w-7xl mx-auto mt-16 pt-8 border-t border-gray-800 text-center text-gray-500 text-sm">
|
||||
<p>© 2024 Amalfi Travel Guide. Handcrafted for wanderers.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Navbar Scroll Effect
|
||||
const navbar = document.getElementById('navbar');
|
||||
const logo = document.getElementById('logo');
|
||||
const navLinks = document.querySelectorAll('.nav-link');
|
||||
const menuBtn = document.getElementById('menu-btn');
|
||||
const mobileMenu = document.getElementById('mobile-menu');
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
if (window.scrollY > 50) {
|
||||
navbar.classList.add('bg-white', 'shadow-md', 'py-3');
|
||||
navbar.classList.remove('py-4', 'text-white');
|
||||
logo.classList.remove('text-white');
|
||||
logo.classList.add('text-gray-800');
|
||||
navLinks.forEach(link => {
|
||||
link.classList.remove('text-white');
|
||||
link.classList.add('text-gray-600');
|
||||
});
|
||||
menuBtn.classList.remove('text-white');
|
||||
menuBtn.classList.add('text-gray-800');
|
||||
} else {
|
||||
navbar.classList.remove('bg-white', 'shadow-md', 'py-3');
|
||||
navbar.classList.add('py-4');
|
||||
logo.classList.add('text-white');
|
||||
logo.classList.remove('text-gray-800');
|
||||
navLinks.forEach(link => {
|
||||
link.classList.add('text-white');
|
||||
link.classList.remove('text-gray-600');
|
||||
});
|
||||
menuBtn.classList.add('text-white');
|
||||
menuBtn.classList.remove('text-gray-800');
|
||||
}
|
||||
});
|
||||
|
||||
// Mobile Menu Toggle
|
||||
menuBtn.addEventListener('click', () => {
|
||||
mobileMenu.classList.toggle('hidden');
|
||||
});
|
||||
|
||||
// Close mobile menu when clicking a link
|
||||
document.querySelectorAll('#mobile-menu a').forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
mobileMenu.classList.add('hidden');
|
||||
});
|
||||
});
|
||||
|
||||
// Scroll Reveal Animation
|
||||
const observerOptions = {
|
||||
threshold: 0.1,
|
||||
rootMargin: "0px 0px -50px 0px"
|
||||
};
|
||||
|
||||
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);
|
||||
});
|
||||
</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 55.11s</div></body>
|
||||
</html>
|
||||
@@ -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&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>
|
||||
@@ -0,0 +1,396 @@
|
||||
<!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>Elara Vance | Wildflower Echoes</title>
|
||||
<meta name="description" content="Official release page for Elara Vance's new album, Wildflower Echoes. Listen now, find tour dates, and shop exclusive merchandise.">
|
||||
<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=Inter:wght@300;400;600&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--color-earth-dark: #283618;
|
||||
--color-earth-mid: #3d4a3e;
|
||||
--color-earth-light: #fefae0;
|
||||
--color-accent: #bc6c25;
|
||||
--color-accent-soft: #dda15e;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: var(--color-earth-light);
|
||||
color: var(--color-earth-dark);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
h1, h2, h3, .serif {
|
||||
font-family: 'Playfair Display', serif;
|
||||
}
|
||||
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition: all 0.8s ease-out;
|
||||
}
|
||||
|
||||
.reveal.active {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.nav-blur {
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--color-earth-dark);
|
||||
color: var(--color-earth-light);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: var(--color-accent);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.track-item {
|
||||
border-bottom: 1px solid rgba(40, 54, 24, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.track-item:hover {
|
||||
background-color: rgba(188, 108, 37, 0.05);
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.hero-gradient {
|
||||
background: linear-gradient(to bottom, rgba(40, 54, 24, 0.4), rgba(40, 54, 24, 0.7));
|
||||
}
|
||||
|
||||
.custom-shadow {
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="antialiased">
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="fixed w-full z-50 transition-all duration-300 px-6 py-4 flex justify-between items-center" id="main-nav">
|
||||
<a href="#" class="serif text-2xl font-bold tracking-tight">Elara Vance</a>
|
||||
<div class="hidden md:flex space-x-8 text-sm uppercase tracking-widest font-semibold">
|
||||
<a href="#music" class="hover:text-[#bc6c25] transition-colors">Music</a>
|
||||
<a href="#about" class="hover:text-[#bc6c25] transition-colors">About</a>
|
||||
<a href="#tour" class="hover:text-[#bc6c25] transition-colors">Tour</a>
|
||||
<a href="#store" class="hover:text-[#bc6c25] transition-colors">Store</a>
|
||||
</div>
|
||||
<button class="md:hidden text-2xl" id="menu-toggle">
|
||||
<span class="block w-6 h-0.5 bg-current mb-1"></span>
|
||||
<span class="block w-6 h-0.5 bg-current mb-1"></span>
|
||||
<span class="block w-6 h-0.5 bg-current"></span>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<!-- Mobile Menu -->
|
||||
<div id="mobile-menu" class="fixed inset-0 bg-[#fefae0] z-40 flex flex-col items-center justify-center space-y-8 text-2xl serif hidden">
|
||||
<a href="#music" class="mobile-link">Music</a>
|
||||
<a href="#about" class="mobile-link">About</a>
|
||||
<a href="#tour" class="mobile-link">Tour</a>
|
||||
<a href="#store" class="mobile-link">Store</a>
|
||||
</div>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="relative h-screen w-full flex items-center justify-center overflow-hidden">
|
||||
<img src="https://images.pexels.com/photos/36071300/pexels-photo-36071300.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200" alt="Artistic close-up of blooming wildflowers with a dark, moody background." class="absolute inset-0 w-full h-full object-cover scale-105 animate-[pulse_10s_infinite_alternate]" />
|
||||
<div class="absolute inset-0 hero-gradient"></div>
|
||||
|
||||
<div class="relative z-10 text-center px-4">
|
||||
<span class="text-[#dda15e] uppercase tracking-[0.3em] text-sm mb-4 block reveal">The New Album</span>
|
||||
<h1 class="text-6xl md:text-8xl text-[#fefae0] mb-6 reveal">Wildflower Echoes</h1>
|
||||
<p class="text-xl md:text-2xl text-[#fefae0]/80 mb-10 italic serif reveal">A journey through the quiet spaces.</p>
|
||||
<div class="flex flex-col md:flex-row items-center justify-center gap-4 reveal">
|
||||
<a href="#music" class="btn-primary px-10 py-4 rounded-full text-sm uppercase tracking-widest font-bold w-full md:w-auto">Listen Now</a>
|
||||
<a href="#store" class="border border-[#fefae0] text-[#fefae0] px-10 py-4 rounded-full text-sm uppercase tracking-widest font-bold w-full md:w-auto hover:bg-[#fefae0] hover:text-[#283618] transition-all">Shop Vinyl</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hero Attribution -->
|
||||
<div class="absolute bottom-8 left-1/2 -translate-x-1/2 text-white/60 text-[10px] uppercase tracking-widest">
|
||||
<a href="https://www.pexels.com/photo/moody-close-up-of-wildflowers-in-bloom-36071300/" target="_blank" class="hover:text-white transition-colors">Photo by Daniel's Richard on Pexels</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Album Introduction -->
|
||||
<section id="about" class="py-24 px-6 md:px-20 max-w-7xl mx-auto grid md:grid-cols-2 gap-16 items-center">
|
||||
<div class="reveal">
|
||||
<h2 class="text-4xl md:text-5xl mb-8 leading-tight">Rooted in the soil, <br><span class="italic">reaching for the light.</span></h2>
|
||||
<div class="space-y-6 text-lg text-[#3d4a3e] leading-relaxed">
|
||||
<p>Wildflower Echoes is an intimate collection of songs born from the stillness of the Pacific Northwest. Recorded in a converted barn during the height of spring, every track captures a moment of profound connection with the natural world.</p>
|
||||
<p>With warm acoustic textures and haunting vocal harmonies, Elara Vance invites you to slow down and breathe. This album isn't just something to hear; it's something to feel.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative reveal">
|
||||
<div class="aspect-[4/5] bg-[#3d4a3e] overflow-hidden rounded-sm custom-shadow">
|
||||
<img src="https://images.pexels.com/photos/167682/pexels-photo-167682.jpeg?auto=compress&cs=tinysrgb&w=800" alt="Artist in nature" class="w-full h-full object-cover opacity-90" />
|
||||
</div>
|
||||
<div class="absolute -bottom-6 -right-6 w-48 h-48 border-2 border-[#bc6c25] -z-10"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Tracklist Section -->
|
||||
<section id="music" class="py-24 bg-[#3d4a3e] text-[#fefae0]">
|
||||
<div class="max-w-3xl mx-auto px-6">
|
||||
<div class="text-center mb-16 reveal">
|
||||
<h2 class="text-4xl md:text-5xl mb-4">The Tracks</h2>
|
||||
<div class="w-20 h-1 bg-[#bc6c25] mx-auto"></div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-0 reveal">
|
||||
<!-- Track 1 -->
|
||||
<div class="track-item py-6 flex items-center justify-between group cursor-pointer">
|
||||
<div class="flex items-center space-x-6">
|
||||
<span class="text-sm opacity-50 font-mono">01</span>
|
||||
<span class="text-xl md:text-2xl serif">Rooted</span>
|
||||
</div>
|
||||
<button class="opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Track 2 -->
|
||||
<div class="track-item py-6 flex items-center justify-between group cursor-pointer">
|
||||
<div class="flex items-center space-x-6">
|
||||
<span class="text-sm opacity-50 font-mono">02</span>
|
||||
<span class="text-xl md:text-2xl serif">Morning Mist</span>
|
||||
</div>
|
||||
<button class="opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Track 3 -->
|
||||
<div class="track-item py-6 flex items-center justify-between group cursor-pointer">
|
||||
<div class="flex items-center space-x-6">
|
||||
<span class="text-sm opacity-50 font-mono">03</span>
|
||||
<span class="text-xl md:text-2xl serif">Cedar & Sage</span>
|
||||
</div>
|
||||
<button class="opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Track 4 -->
|
||||
<div class="track-item py-6 flex items-center justify-between group cursor-pointer">
|
||||
<div class="flex items-center space-x-6">
|
||||
<span class="text-sm opacity-50 font-mono">04</span>
|
||||
<span class="text-xl md:text-2xl serif">Golden Hour</span>
|
||||
</div>
|
||||
<button class="opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Track 5 -->
|
||||
<div class="track-item py-6 flex items-center justify-between group cursor-pointer">
|
||||
<div class="flex items-center space-x-6">
|
||||
<span class="text-sm opacity-50 font-mono">05</span>
|
||||
<span class="text-xl md:text-2xl serif">Whispering Pines</span>
|
||||
</div>
|
||||
<button class="opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Track 6 -->
|
||||
<div class="track-item py-6 flex items-center justify-between group cursor-pointer">
|
||||
<div class="flex items-center space-x-6">
|
||||
<span class="text-sm opacity-50 font-mono">06</span>
|
||||
<span class="text-xl md:text-2xl serif">Ember Glow</span>
|
||||
</div>
|
||||
<button class="opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-16 flex justify-center space-x-6 reveal">
|
||||
<a href="#" class="opacity-70 hover:opacity-100 transition-opacity">Spotify</a>
|
||||
<a href="#" class="opacity-70 hover:opacity-100 transition-opacity">Apple Music</a>
|
||||
<a href="#" class="opacity-70 hover:opacity-100 transition-opacity">Bandcamp</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Tour Section -->
|
||||
<section id="tour" class="py-24 px-6 max-w-5xl mx-auto">
|
||||
<div class="text-center mb-16 reveal">
|
||||
<h2 class="text-4xl md:text-5xl mb-4">Live Sessions</h2>
|
||||
<p class="text-[#bc6c25] font-semibold uppercase tracking-widest text-sm">Upcoming Tour Dates</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4 reveal">
|
||||
<div class="flex flex-col md:flex-row justify-between items-center p-8 bg-white shadow-sm border border-stone-100 hover:border-[#dda15e] transition-colors group">
|
||||
<div class="text-center md:text-left mb-4 md:mb-0">
|
||||
<p class="text-sm text-stone-500 font-semibold mb-1">OCT 12, 2024</p>
|
||||
<h3 class="text-2xl serif">The Lyric Hall</h3>
|
||||
<p class="text-stone-500">London, UK</p>
|
||||
</div>
|
||||
<a href="#" class="w-full md:w-auto text-center border border-[#283618] px-8 py-2 text-sm font-bold uppercase hover:bg-[#283618] hover:text-white transition-all">Tickets</a>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col md:flex-row justify-between items-center p-8 bg-white shadow-sm border border-stone-100 hover:border-[#dda15e] transition-colors group">
|
||||
<div class="text-center md:text-left mb-4 md:mb-0">
|
||||
<p class="text-sm text-stone-500 font-semibold mb-1">NOV 02, 2024</p>
|
||||
<h3 class="text-2xl serif">The Bluebird Cafe</h3>
|
||||
<p class="text-stone-500">Nashville, TN</p>
|
||||
</div>
|
||||
<a href="#" class="w-full md:w-auto text-center border border-[#283618] px-8 py-2 text-sm font-bold uppercase hover:bg-[#283618] hover:text-white transition-all">Tickets</a>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col md:flex-row justify-between items-center p-8 bg-white shadow-sm border border-stone-100 hover:border-[#dda15e] transition-colors group">
|
||||
<div class="text-center md:text-left mb-4 md:mb-0">
|
||||
<p class="text-sm text-stone-500 font-semibold mb-1">NOV 15, 2024</p>
|
||||
<h3 class="text-2xl serif">Forest Stage</h3>
|
||||
<p class="text-stone-500">Portland, OR</p>
|
||||
</div>
|
||||
<a href="#" class="w-full md:w-auto text-center border border-[#283618] px-8 py-2 text-sm font-bold uppercase hover:bg-[#283618] hover:text-white transition-all">Tickets</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Store Section -->
|
||||
<section id="store" class="py-24 bg-[#f4f1ea] overflow-hidden">
|
||||
<div class="max-w-7xl mx-auto px-6">
|
||||
<div class="flex flex-col md:flex-row justify-between items-end mb-12 gap-6 reveal">
|
||||
<div>
|
||||
<h2 class="text-4xl md:text-5xl mb-2">The Collection</h2>
|
||||
<p class="text-[#bc6c25] font-semibold uppercase tracking-widest text-sm">Exclusive Merchandise</p>
|
||||
</div>
|
||||
<a href="#" class="text-sm font-bold underline decoration-[#bc6c25] decoration-2 underline-offset-8">View All Items</a>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-10">
|
||||
<!-- Product 1 -->
|
||||
<div class="group reveal">
|
||||
<div class="aspect-square bg-[#e5e1d8] mb-4 overflow-hidden relative">
|
||||
<img src="https://images.pexels.com/photos/1708092/pexels-photo-1708092.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Vinyl record" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" />
|
||||
<div class="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors"></div>
|
||||
</div>
|
||||
<h3 class="text-xl serif mb-1">Wildflower Echoes LP</h3>
|
||||
<p class="text-stone-500 mb-2">$35.00</p>
|
||||
<button class="w-full py-2 text-sm border border-stone-300 hover:border-[#283618] hover:bg-[#283618] hover:text-white transition-all uppercase tracking-widest">Add to Cart</button>
|
||||
</div>
|
||||
|
||||
<!-- Product 2 -->
|
||||
<div class="group reveal" style="transition-delay: 100ms;">
|
||||
<div class="aspect-square bg-[#e5e1d8] mb-4 overflow-hidden relative">
|
||||
<img src="https://images.pexels.com/photos/7569331/pexels-photo-7569331.jpeg?auto=compress&cs=tinysrgb&w=600" alt="T-shirt" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" />
|
||||
<div class="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors"></div>
|
||||
</div>
|
||||
<h3 class="text-xl serif mb-1">"Rooted" Organic Tee</h3>
|
||||
<p class="text-stone-500 mb-2">$30.00</p>
|
||||
<button class="w-full py-2 text-sm border border-stone-300 hover:border-[#283618] hover:bg-[#283618] hover:text-white transition-all uppercase tracking-widest">Add to Cart</button>
|
||||
</div>
|
||||
|
||||
<!-- Product 3 -->
|
||||
<div class="group reveal" style="transition-delay: 200ms;">
|
||||
<div class="aspect-square bg-[#e5e1d8] mb-4 overflow-hidden relative">
|
||||
<img src="https://images.pexels.com/photos/4053394/pexels-photo-4053394.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Art print" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" />
|
||||
<div class="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors"></div>
|
||||
</div>
|
||||
<h3 class="text-xl serif mb-1">Limited Edition Print</h3>
|
||||
<p class="text-stone-500 mb-2">$45.00</p>
|
||||
<button class="w-full py-2 text-sm border border-stone-300 hover:border-[#283618] hover:bg-[#283618] hover:text-white transition-all uppercase tracking-widest">Add to Cart</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-[#283618] text-[#fefae0] py-16 px-6">
|
||||
<div class="max-w-7xl mx-auto grid md:grid-cols-3 gap-12 items-start">
|
||||
<div class="reveal">
|
||||
<h2 class="serif text-3xl mb-6">Elara Vance</h2>
|
||||
<p class="text-[#dda15e]/80 leading-relaxed">
|
||||
Capturing the ephemeral beauty of the natural world through song and sound.
|
||||
</p>
|
||||
</div>
|
||||
<div class="reveal" style="transition-delay: 100ms;">
|
||||
<h4 class="text-sm font-bold uppercase tracking-widest mb-6">Follow</h4>
|
||||
<ul class="space-y-3">
|
||||
<li><a href="#" class="hover:text-[#bc6c25] transition-colors">Instagram</a></li>
|
||||
<li><a href="#" class="hover:text-[#bc6c25] transition-colors">Spotify</a></li>
|
||||
<li><a href="#" class="hover:text-[#bc6c25] transition-colors">YouTube</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="reveal" style="transition-delay: 200ms;">
|
||||
<h4 class="text-sm font-bold uppercase tracking-widest mb-6">Newsletter</h4>
|
||||
<form class="flex">
|
||||
<input type="email" placeholder="Your email" class="bg-transparent border-b border-[#fefae0]/30 py-2 flex-grow focus:outline-none focus:border-[#bc6c25] transition-colors">
|
||||
<button type="submit" class="ml-4 font-bold text-sm uppercase hover:text-[#bc6c25]">Join</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="max-w-7xl mx-auto mt-16 pt-8 border-t border-white/10 flex flex-col md:flex-row justify-between text-xs opacity-50">
|
||||
<p>© 2024 Elara Vance Music. All rights reserved.</p>
|
||||
<div class="mt-4 md:mt-0 space-x-6">
|
||||
<a href="#" class="hover:text-white">Privacy Policy</a>
|
||||
<a href="#" class="hover:text-white">Terms of Use</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Navigation Scroll Effect
|
||||
window.addEventListener('scroll', () => {
|
||||
const nav = document.getElementById('main-nav');
|
||||
if (window.scrollY > 50) {
|
||||
nav.classList.add('nav-blur', 'bg-[#fefae0]/90', 'shadow-sm', 'py-3');
|
||||
nav.classList.remove('py-4');
|
||||
nav.classList.add('text-[#283618]');
|
||||
document.querySelectorAll('#main-nav a, #menu-toggle span').forEach(el => {
|
||||
el.classList.remove('text-white');
|
||||
el.classList.add('text-[#283618]');
|
||||
});
|
||||
} else {
|
||||
nav.classList.remove('nav-blur', 'bg-[#fefae0]/90', 'shadow-sm', 'py-3');
|
||||
nav.classList.remove('text-[#283618]');
|
||||
nav.classList.add('text-white');
|
||||
document.querySelectorAll('#main-nav a, #menu-toggle span').forEach(el => {
|
||||
el.classList.remove('text-[#283618]');
|
||||
el.classList.add('text-white');
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Mobile Menu Toggle
|
||||
const menuToggle = document.getElementById('menu-toggle');
|
||||
const mobileMenu = document.getElementById('mobile-menu');
|
||||
const mobileLinks = document.querySelectorAll('.mobile-link');
|
||||
|
||||
menuToggle.addEventListener('click', () => {
|
||||
mobileMenu.classList.toggle('hidden');
|
||||
});
|
||||
|
||||
mobileLinks.forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
mobileMenu.classList.add('hidden');
|
||||
});
|
||||
});
|
||||
|
||||
// Reveal on Scroll Observer
|
||||
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);
|
||||
});
|
||||
</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 66.43s<br>Model: unsloth/gemma-4-26B-A4B-it-qat-GGUF:Q4_K_XL</div></body>
|
||||
</html>
|
||||
@@ -0,0 +1,510 @@
|
||||
<!doctype html>
|
||||
<html lang="en" class="scroll-smooth">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Paws & Purpose Adoption Center connects loving families with rescue animals through careful matching, rehabilitation, and lifelong support.">
|
||||
<title>Paws & Purpose Adoption Center</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
clay: '#D49A7A',
|
||||
sage: '#7A8B7A',
|
||||
cream: '#F9F6F0',
|
||||
dark: '#2C2825',
|
||||
warm: '#E8DCC4'
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
|
||||
serif: ['Playfair Display', 'Georgia', 'serif']
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</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=Inter:wght@400;500;600;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--focus-color: #D49A7A;
|
||||
--focus-ring: 0 0 0 3px rgba(212, 154, 122, 0.4);
|
||||
}
|
||||
*:focus-visible {
|
||||
outline: 3px solid var(--focus-color);
|
||||
outline-offset: 2px;
|
||||
box-shadow: var(--focus-ring);
|
||||
}
|
||||
.fade-up {
|
||||
opacity: 0;
|
||||
transform: translateY(24px);
|
||||
transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
.fade-up.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
.hero-bg {
|
||||
transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
.hero-bg:hover {
|
||||
transform: scale(1.03);
|
||||
}
|
||||
.card-hover {
|
||||
transition: transform 0.35s ease, box-shadow 0.35s ease;
|
||||
}
|
||||
.card-hover:hover {
|
||||
transform: translateY(-6px);
|
||||
box-shadow: 0 16px 32px rgba(44, 40, 37, 0.08);
|
||||
}
|
||||
.mobile-menu {
|
||||
max-height: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.4s ease, opacity 0.4s ease;
|
||||
}
|
||||
.mobile-menu.open {
|
||||
max-height: 320px;
|
||||
opacity: 1;
|
||||
}
|
||||
.btn-primary {
|
||||
background: var(--clay);
|
||||
color: #fff;
|
||||
transition: background 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background: #c48b6a;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.btn-primary:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-cream text-dark font-sans antialiased selection:bg-clay selection:text-white">
|
||||
|
||||
<header class="sticky top-0 z-50 bg-cream/90 backdrop-blur-md border-b border-dark/10">
|
||||
<div class="max-w-7xl mx-auto px-6 md:px-12 h-20 flex items-center justify-between">
|
||||
<a href="#" class="font-serif text-2xl font-bold tracking-tight hover:opacity-80 transition-opacity">Paws & Purpose</a>
|
||||
|
||||
<nav class="hidden md:flex items-center gap-8">
|
||||
<a href="#mission" class="text-sm font-medium hover:text-clay transition-colors">Our Mission</a>
|
||||
<a href="#pets" class="text-sm font-medium hover:text-clay transition-colors">Available Pets</a>
|
||||
<a href="#process" class="text-sm font-medium hover:text-clay transition-colors">How It Works</a>
|
||||
<a href="#stories" class="text-sm font-medium hover:text-clay transition-colors">Success Stories</a>
|
||||
<a href="#contact" class="text-sm font-medium hover:text-clay transition-colors">Visit Us</a>
|
||||
<a href="#contact" class="btn-primary px-5 py-2.5 rounded-full text-sm font-semibold">Start Adoption</a>
|
||||
</nav>
|
||||
|
||||
<button id="menu-toggle" class="md:hidden p-2 rounded-lg hover:bg-warm/50 transition-colors" aria-label="Toggle navigation menu" aria-expanded="false">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="mobile-nav" class="mobile-menu md:hidden bg-cream border-t border-dark/10">
|
||||
<nav class="flex flex-col p-6 gap-4">
|
||||
<a href="#mission" class="text-lg font-medium hover:text-clay transition-colors">Our Mission</a>
|
||||
<a href="#pets" class="text-lg font-medium hover:text-clay transition-colors">Available Pets</a>
|
||||
<a href="#process" class="text-lg font-medium hover:text-clay transition-colors">How It Works</a>
|
||||
<a href="#stories" class="text-lg font-medium hover:text-clay transition-colors">Success Stories</a>
|
||||
<a href="#contact" class="text-lg font-medium hover:text-clay transition-colors">Visit Us</a>
|
||||
<a href="#contact" class="btn-primary px-5 py-3 rounded-full text-center font-semibold mt-2">Start Adoption</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section id="hero" class="relative min-h-screen flex items-center justify-center overflow-hidden">
|
||||
<div class="absolute inset-0 hero-bg">
|
||||
<img src="https://images.pexels.com/photos/20595085/pexels-photo-20595085.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200" alt="A young puppy stands behind metal bars, casting a poignant gaze that captures a sense of longing and vulnerability." class="w-full h-full object-cover">
|
||||
</div>
|
||||
<div class="absolute inset-0 bg-gradient-to-b from-dark/60 via-dark/40 to-dark/80"></div>
|
||||
|
||||
<div class="relative z-10 max-w-4xl mx-auto px-6 md:px-12 text-center text-cream fade-up">
|
||||
<h1 class="font-serif text-5xl md:text-7xl lg:text-8xl font-bold leading-[1.1] mb-6 tracking-tight">Find Your Furry Soulmate</h1>
|
||||
<p class="text-lg md:text-xl lg:text-2xl text-cream/90 max-w-2xl mx-auto mb-10 leading-relaxed font-light">Every animal deserves a loving home. We bridge the gap between rescue and family through careful matching, rehabilitation, and lifelong support.</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a href="#pets" class="btn-primary px-8 py-4 rounded-full text-lg font-semibold inline-block">Explore Available Pets</a>
|
||||
<a href="#process" class="px-8 py-4 rounded-full text-lg font-semibold border border-cream/40 hover:bg-cream/10 transition-colors inline-block">Learn the Process</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="absolute bottom-8 left-6 md:left-12 z-10 text-cream/80 text-sm fade-up">
|
||||
<a href="https://www.pexels.com/photo/puppy-dog-standing-in-cage-20595085/" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 hover:text-cream transition-colors">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
|
||||
Photo by Bryan on Pexels
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="absolute bottom-8 right-6 md:right-12 z-10 animate-bounce">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-cream"><path d="M12 5v14M19 12l-7 7-7-7"/></svg>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="mission" class="py-24 px-6 md:px-12 max-w-7xl mx-auto">
|
||||
<div class="grid md:grid-cols-2 gap-12 md:gap-20 items-center">
|
||||
<div class="fade-up">
|
||||
<span class="text-clay font-semibold tracking-wider uppercase text-sm">Our Mission</span>
|
||||
<h2 class="font-serif text-4xl md:text-5xl font-bold mt-3 mb-6 leading-tight">Rescue, Rehabilitate, Rehome</h2>
|
||||
<p class="text-dark/80 text-lg leading-relaxed mb-6">Founded in 2012, Paws & Purpose operates on a simple belief: adoption isn't just about finding a pet, it's about finding family. We partner with municipal shelters and private rescues to take in animals that need extra time, specialized care, or behavioral assessment before they're ready for their forever homes.</p>
|
||||
<p class="text-dark/80 text-lg leading-relaxed mb-8">Our team of veterinary technicians, behaviorists, and matchmakers spend weeks building trust with each animal. We don't rush. We ensure every placement aligns with the lifestyle, energy, and patience of the adopting household.</p>
|
||||
<div class="flex gap-8">
|
||||
<div>
|
||||
<span class="block text-3xl font-bold text-sage">2,400+</span>
|
||||
<span class="text-sm text-dark/60">Animals Rehomed</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="block text-3xl font-bold text-sage">98%</span>
|
||||
<span class="text-sm text-dark/60">Placement Success</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="block text-3xl font-bold text-sage">12</span>
|
||||
<span class="text-sm text-dark/60">Years of Service</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative fade-up">
|
||||
<div class="aspect-[4/5] bg-warm/50 rounded-2xl overflow-hidden border border-dark/5">
|
||||
<div class="w-full h-full bg-gradient-to-br from-sage/20 to-clay/20 flex items-center justify-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="text-dark/20"><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path><path d="M8 14s1.5 2 4 2 4-2 4-2"></path><line x1="9" y1="9" x2="9.01" y2="9"></line><line x1="15" y1="9" x2="15.01" y2="9"></line></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute -bottom-6 -left-6 bg-dark text-cream p-6 rounded-xl shadow-lg max-w-xs">
|
||||
<p class="text-sm leading-relaxed italic">"We don't place pets. We place family members. Every match is a lifelong commitment to both sides."</p>
|
||||
<p class="mt-3 text-xs font-semibold text-clay">— Elena Rios, Director of Adoptions</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="pets" class="py-24 bg-warm/30">
|
||||
<div class="max-w-7xl mx-auto px-6 md:px-12">
|
||||
<div class="text-center max-w-2xl mx-auto mb-16 fade-up">
|
||||
<span class="text-clay font-semibold tracking-wider uppercase text-sm">Current Residents</span>
|
||||
<h2 class="font-serif text-4xl md:text-5xl font-bold mt-3 mb-4">Ready to Meet You</h2>
|
||||
<p class="text-dark/70 text-lg">These four companions have completed their rehabilitation and are waiting for their final chapter to begin.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<article class="bg-cream rounded-2xl overflow-hidden shadow-sm card-hover fade-up">
|
||||
<div class="aspect-[3/4] bg-sage/20 flex items-center justify-center p-6">
|
||||
<div class="text-center">
|
||||
<div class="text-6xl mb-2">🐕</div>
|
||||
<p class="text-sm font-semibold text-dark/60">Golden Retriever Mix</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<h3 class="font-serif text-xl font-bold">Barnaby</h3>
|
||||
<span class="text-xs font-medium bg-clay/10 text-clay px-2 py-1 rounded-full">3 Years</span>
|
||||
</div>
|
||||
<p class="text-dark/70 text-sm mb-4">Gentle, deeply affectionate, and loves long walks. Excellent with children and calm around other dogs.</p>
|
||||
<button class="w-full py-2.5 border border-dark/20 rounded-lg text-sm font-semibold hover:bg-dark hover:text-cream transition-colors">Profile & Inquiry</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="bg-cream rounded-2xl overflow-hidden shadow-sm card-hover fade-up" style="transition-delay: 0.1s">
|
||||
<div class="aspect-[3/4] bg-sage/20 flex items-center justify-center p-6">
|
||||
<div class="text-center">
|
||||
<div class="text-6xl mb-2">🐈</div>
|
||||
<p class="text-sm font-semibold text-dark/60">Domestic Shorthair</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<h3 class="font-serif text-xl font-bold">Luna</h3>
|
||||
<span class="text-xs font-medium bg-clay/10 text-clay px-2 py-1 rounded-full">5 Years</span>
|
||||
</div>
|
||||
<p class="text-dark/70 text-sm mb-4">Quiet observer, prefers calm environments, and settles gracefully into any lap. Ideal for apartment living.</p>
|
||||
<button class="w-full py-2.5 border border-dark/20 rounded-lg text-sm font-semibold hover:bg-dark hover:text-cream transition-colors">Profile & Inquiry</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="bg-cream rounded-2xl overflow-hidden shadow-sm card-hover fade-up" style="transition-delay: 0.2s">
|
||||
<div class="aspect-[3/4] bg-sage/20 flex items-center justify-center p-6">
|
||||
<div class="text-center">
|
||||
<div class="text-6xl mb-2">🐕🦺</div>
|
||||
<p class="text-sm font-semibold text-dark/60">Terrier Mix</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<h3 class="font-serif text-xl font-bold">Tango</h3>
|
||||
<span class="text-xs font-medium bg-clay/10 text-clay px-2 py-1 rounded-full">2 Years</span>
|
||||
</div>
|
||||
<p class="text-dark/70 text-sm mb-4">Playful, highly energetic, and endlessly curious. Needs a fenced yard and an active owner for daily adventures.</p>
|
||||
<button class="w-full py-2.5 border border-dark/20 rounded-lg text-sm font-semibold hover:bg-dark hover:text-cream transition-colors">Profile & Inquiry</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="bg-cream rounded-2xl overflow-hidden shadow-sm card-hover fade-up" style="transition-delay: 0.3s">
|
||||
<div class="aspect-[3/4] bg-sage/20 flex items-center justify-center p-6">
|
||||
<div class="text-center">
|
||||
<div class="text-6xl mb-2">🐈⬛</div>
|
||||
<p class="text-sm font-semibold text-dark/60">Tabby Cat</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<h3 class="font-serif text-xl font-bold">Milo</h3>
|
||||
<span class="text-xs font-medium bg-clay/10 text-clay px-2 py-1 rounded-full">1 Year</span>
|
||||
</div>
|
||||
<p class="text-dark/70 text-sm mb-4">Food-motivated, highly trainable, and balances independence with clear affection. Adapts quickly to new routines.</p>
|
||||
<button class="w-full py-2.5 border border-dark/20 rounded-lg text-sm font-semibold hover:bg-dark hover:text-cream transition-colors">Profile & Inquiry</button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-12 fade-up">
|
||||
<a href="#" class="inline-flex items-center gap-2 text-clay font-semibold hover:underline">View Full Catalog <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="process" class="py-24 px-6 md:px-12 max-w-7xl mx-auto">
|
||||
<div class="text-center max-w-2xl mx-auto mb-16 fade-up">
|
||||
<span class="text-clay font-semibold tracking-wider uppercase text-sm">How It Works</span>
|
||||
<h2 class="font-serif text-4xl md:text-5xl font-bold mt-3 mb-4">Three Steps to Forever</h2>
|
||||
<p class="text-dark/70 text-lg">We've streamlined adoption to reduce stress for both you and the animal. Here is what to expect.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-8">
|
||||
<div class="bg-cream p-8 rounded-2xl border border-dark/5 fade-up">
|
||||
<div class="w-12 h-12 bg-sage/20 rounded-xl flex items-center justify-center mb-6">
|
||||
<span class="text-2xl font-bold text-sage">01</span>
|
||||
</div>
|
||||
<h3 class="font-serif text-2xl font-bold mb-3">Browse & Connect</h3>
|
||||
<p class="text-dark/70 leading-relaxed">Explore our current residents online or visit our facility. When you find a match, submit a brief inquiry form detailing your household, lifestyle, and experience level.</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-cream p-8 rounded-2xl border border-dark/5 fade-up" style="transition-delay: 0.15s">
|
||||
<div class="w-12 h-12 bg-clay/20 rounded-xl flex items-center justify-center mb-6">
|
||||
<span class="text-2xl font-bold text-clay">02</span>
|
||||
</div>
|
||||
<h3 class="font-serif text-2xl font-bold mb-3">Meet & Greet</h3>
|
||||
<p class="text-dark/70 leading-relaxed">Schedule a supervised visit with our staff. We observe interactions, answer behavioral questions, and ensure the energy aligns with your home environment.</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-cream p-8 rounded-2xl border border-dark/5 fade-up" style="transition-delay: 0.3s">
|
||||
<div class="w-12 h-12 bg-sage/20 rounded-xl flex items-center justify-center mb-6">
|
||||
<span class="text-2xl font-bold text-sage">03</span>
|
||||
</div>
|
||||
<h3 class="font-serif text-2xl font-bold mb-3">Welcome Home</h3>
|
||||
<p class="text-dark/70 leading-relaxed">Complete the adoption agreement and take your new family member home. We provide a starter kit, veterinary records, and a dedicated support line for the first 90 days.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="stories" class="py-24 bg-dark text-cream">
|
||||
<div class="max-w-7xl mx-auto px-6 md:px-12">
|
||||
<div class="grid md:grid-cols-2 gap-12 items-center">
|
||||
<div class="fade-up">
|
||||
<span class="text-clay font-semibold tracking-wider uppercase text-sm">Success Stories</span>
|
||||
<h2 class="font-serif text-4xl md:text-5xl font-bold mt-3 mb-8">Families Transformed</h2>
|
||||
<p class="text-cream/70 text-lg leading-relaxed mb-8">Adoption changes more than just an animal's life. It reshapes daily routines, builds empathy, and creates bonds that last generations. Here is what our adopters have to say.</p>
|
||||
<button class="border border-cream/30 px-6 py-3 rounded-full text-sm font-semibold hover:bg-cream/10 transition-colors inline-flex items-center gap-2">Read More Stories <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></button>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6 fade-up" style="transition-delay: 0.2s">
|
||||
<blockquote class="bg-cream/5 p-6 rounded-xl border border-cream/10">
|
||||
<p class="text-lg leading-relaxed italic mb-4">"We adopted Barnaby during a difficult year. His calm presence literally slowed our household down. The staff's guidance on transitioning him from shelter life to ours was invaluable."</p>
|
||||
<footer class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-clay/20 flex items-center justify-center text-sm font-bold">MJ</div>
|
||||
<div>
|
||||
<p class="font-semibold">Maria & James T.</p>
|
||||
<p class="text-sm text-cream/60">Adopted Barnaby, 2021</p>
|
||||
</div>
|
||||
</footer>
|
||||
</blockquote>
|
||||
|
||||
<blockquote class="bg-cream/5 p-6 rounded-xl border border-cream/10">
|
||||
<p class="text-lg leading-relaxed italic mb-4">"I never expected to bond so deeply with a rescue cat. Luna walked into my apartment and immediately found her favorite sunbeam. Paws & Purpose matched us perfectly."</p>
|
||||
<footer class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-sage/20 flex items-center justify-center text-sm font-bold">SR</div>
|
||||
<div>
|
||||
<p class="font-semibold">Sam R.</p>
|
||||
<p class="text-sm text-cream/60">Adopted Luna, 2023</p>
|
||||
</div>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact" class="py-24 px-6 md:px-12 max-w-7xl mx-auto">
|
||||
<div class="grid md:grid-cols-2 gap-12 md:gap-20">
|
||||
<div class="fade-up">
|
||||
<span class="text-clay font-semibold tracking-wider uppercase text-sm">Visit Us</span>
|
||||
<h2 class="font-serif text-4xl md:text-5xl font-bold mt-3 mb-6">Come Say Hello</h2>
|
||||
<p class="text-dark/70 text-lg leading-relaxed mb-8">Our adoption facility is open to the public for supervised visits. Walk-ins are welcome during open hours, but we recommend scheduling a specific meet-and-greet for the best experience.</p>
|
||||
|
||||
<div class="space-y-4 mb-8">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="w-10 h-10 bg-sage/20 rounded-lg flex items-center justify-center flex-shrink-0 mt-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold">Location</p>
|
||||
<p class="text-dark/70">482 Maple Creek Road, Suite 12<br>Portland, OR 97205</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="w-10 h-10 bg-clay/20 rounded-lg flex items-center justify-center flex-shrink-0 mt-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold">Hours</p>
|
||||
<p class="text-dark/70">Tue–Fri: 10:00 AM – 6:00 PM<br>Sat–Sun: 11:00 AM – 4:00 PM<br>Mon: Closed</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="w-10 h-10 bg-sage/20 rounded-lg flex items-center justify-center flex-shrink-0 mt-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold">Email</p>
|
||||
<a href="mailto:hello@pawsandpurpose.org" class="text-dark/70 hover:text-clay transition-colors">hello@pawsandpurpose.org</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-cream p-8 md:p-10 rounded-2xl border border-dark/5 fade-up" style="transition-delay: 0.15s">
|
||||
<h3 class="font-serif text-2xl font-bold mb-6">Send Us a Message</h3>
|
||||
<form id="contact-form" class="space-y-5" novalidate>
|
||||
<div>
|
||||
<label for="name" class="block text-sm font-medium mb-2">Full Name</label>
|
||||
<input type="text" id="name" name="name" required class="w-full px-4 py-3 rounded-lg border border-dark/20 bg-white focus:border-clay focus:ring-0 transition-colors" placeholder="Jane Doe">
|
||||
</div>
|
||||
<div>
|
||||
<label for="email" class="block text-sm font-medium mb-2">Email Address</label>
|
||||
<input type="email" id="email" name="email" required class="w-full px-4 py-3 rounded-lg border border-dark/20 bg-white focus:border-clay focus:ring-0 transition-colors" placeholder="jane@example.com">
|
||||
</div>
|
||||
<div>
|
||||
<label for="interest" class="block text-sm font-medium mb-2">Interest</label>
|
||||
<select id="interest" name="interest" class="w-full px-4 py-3 rounded-lg border border-dark/20 bg-white focus:border-clay focus:ring-0 transition-colors">
|
||||
<option value="">Select an option</option>
|
||||
<option value="adoption">Pet Adoption</option>
|
||||
<option value="volunteer">Volunteering</option>
|
||||
<option value="foster">Foster Care</option>
|
||||
<option value="donate">Donations</option>
|
||||
<option value="other">General Inquiry</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label for="message" class="block text-sm font-medium mb-2">Message</label>
|
||||
<textarea id="message" name="message" rows="4" required class="w-full px-4 py-3 rounded-lg border border-dark/20 bg-white focus:border-clay focus:ring-0 transition-colors" placeholder="Tell us about your home, lifestyle, or questions..."></textarea>
|
||||
</div>
|
||||
<button type="submit" class="btn-primary w-full py-3.5 rounded-lg font-semibold text-lg">Submit Inquiry</button>
|
||||
<p class="text-xs text-center text-dark/50 mt-2">We typically respond within 24 hours. By submitting, you agree to our privacy practices.</p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="bg-dark text-cream/80 py-12 px-6 md:px-12 border-t border-cream/10">
|
||||
<div class="max-w-7xl mx-auto grid sm:grid-cols-2 md:grid-cols-4 gap-8 mb-12">
|
||||
<div>
|
||||
<span class="font-serif text-2xl font-bold text-cream">Paws & Purpose</span>
|
||||
<p class="mt-4 text-sm leading-relaxed">Building bridges between rescue animals and loving families since 2012.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-cream mb-4">Explore</h4>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><a href="#mission" class="hover:text-clay transition-colors">Our Mission</a></li>
|
||||
<li><a href="#pets" class="hover:text-clay transition-colors">Available Pets</a></li>
|
||||
<li><a href="#process" class="hover:text-clay transition-colors">Adoption Process</a></li>
|
||||
<li><a href="#stories" class="hover:text-clay transition-colors">Success Stories</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-cream mb-4">Support</h4>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><a href="#" class="hover:text-clay transition-colors">Volunteer</a></li>
|
||||
<li><a href="#" class="hover:text-clay transition-colors">Foster</a></li>
|
||||
<li><a href="#" class="hover:text-clay transition-colors">Donate</a></li>
|
||||
<li><a href="#" class="hover:text-clay transition-colors">Events</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-cream mb-4">Stay Connected</h4>
|
||||
<p class="text-sm mb-4">Join our newsletter for new arrivals, adoption tips, and center updates.</p>
|
||||
<form class="flex gap-2">
|
||||
<input type="email" placeholder="Your email" class="bg-cream/10 border border-cream/20 rounded-lg px-4 py-2 text-sm w-full focus:border-clay focus:ring-0">
|
||||
<button type="submit" class="bg-clay text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-[#c48b6a] transition-colors">Join</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="max-w-7xl mx-auto pt-8 border-t border-cream/10 flex flex-col sm:flex-row justify-between items-center gap-4 text-sm">
|
||||
<p>© <span id="year"></span> Paws & Purpose Adoption Center. All rights reserved.</p>
|
||||
<div class="flex gap-6">
|
||||
<a href="#" class="hover:text-clay transition-colors">Privacy Policy</a>
|
||||
<a href="#" class="hover:text-clay transition-colors">Terms of Service</a>
|
||||
<a href="#" class="hover:text-clay transition-colors">Accessibility</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
document.getElementById('year').textContent = new Date().getFullYear();
|
||||
|
||||
// Mobile menu toggle
|
||||
const menuToggle = document.getElementById('menu-toggle');
|
||||
const mobileNav = document.getElementById('mobile-nav');
|
||||
|
||||
menuToggle.addEventListener('click', () => {
|
||||
const isOpen = mobileNav.classList.contains('open');
|
||||
mobileNav.classList.toggle('open');
|
||||
menuToggle.setAttribute('aria-expanded', !isOpen);
|
||||
});
|
||||
|
||||
// Close mobile menu on link click
|
||||
mobileNav.querySelectorAll('a').forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
mobileNav.classList.remove('open');
|
||||
menuToggle.setAttribute('aria-expanded', 'false');
|
||||
});
|
||||
});
|
||||
|
||||
// Scroll animations
|
||||
const observerOptions = {
|
||||
root: null,
|
||||
rootMargin: '0px',
|
||||
threshold: 0.15
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible');
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));
|
||||
|
||||
// Form handling (prevent default for demo)
|
||||
const form = document.getElementById('contact-form');
|
||||
form.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
const btn = form.querySelector('button[type="submit"]');
|
||||
const originalText = btn.textContent;
|
||||
btn.textContent = 'Sent Successfully!';
|
||||
btn.classList.add('bg-sage', 'cursor-default');
|
||||
btn.classList.remove('btn-primary');
|
||||
form.reset();
|
||||
setTimeout(() => {
|
||||
btn.textContent = originalText;
|
||||
btn.classList.remove('bg-sage', 'cursor-default');
|
||||
btn.classList.add('btn-primary');
|
||||
}, 3000);
|
||||
});
|
||||
</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 204.71s<br>Model: unsloth/Qwen3.6-27B-MTP-GGUF:Q4_0</div></body>
|
||||
</html>
|
||||
@@ -0,0 +1,335 @@
|
||||
<!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>The Organic Atelier | Master Biophilic Interior Design</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;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--color-sage: #5F6F52;
|
||||
--color-sand: #F8F5F2;
|
||||
--color-terracotta: #A98467;
|
||||
--color-charcoal: #2D2D2D;
|
||||
}
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: var(--color-sand);
|
||||
color: var(--color-charcoal);
|
||||
}
|
||||
h1, h2, h3, .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);
|
||||
}
|
||||
.btn-primary {
|
||||
background-color: var(--color-sage);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 20px -5px rgba(95, 111, 82, 0.3);
|
||||
}
|
||||
.card-hover {
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
.card-hover:hover {
|
||||
transform: translateY(-8px);
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="antialiased">
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="fixed w-full z-50 nav-blur border-b border-stone-200/50 bg-white/70">
|
||||
<div class="max-w-7xl mx-auto px-6 sm:px-8 lg:px-12">
|
||||
<div class="flex justify-between items-center h-20">
|
||||
<div class="flex items-center space-x-2">
|
||||
<div class="w-8 h-8 bg-[#5F6F52] rounded-full"></div>
|
||||
<span class="serif text-xl font-bold tracking-tight">The Organic Atelier</span>
|
||||
</div>
|
||||
<div class="hidden md:flex space-x-10 text-sm font-medium tracking-wide uppercase">
|
||||
<a href="#curriculum" class="hover:text-[#A98467] transition-colors">Curriculum</a>
|
||||
<a href="#philosophy" class="hover:text-[#A98467] transition-colors">Philosophy</a>
|
||||
<a href="#pricing" class="hover:text-[#A98467] transition-colors">Pricing</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#pricing" class="inline-block px-6 py-2.5 border border-[#2D2D2D] text-sm font-semibold hover:bg-[#2D2D2D] hover:text-white transition-all duration-300">
|
||||
Enroll Now
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden">
|
||||
<div class="max-w-7xl mx-auto px-6 sm:px-8 lg:px-12">
|
||||
<div class="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div class="reveal">
|
||||
<span class="inline-block px-4 py-1.5 mb-6 text-xs font-semibold tracking-widest uppercase bg-[#5F6F52]/10 text-[#5F6F52] rounded-full">
|
||||
New Masterclass: Spring Edition
|
||||
</span>
|
||||
<h1 class="text-5xl md:text-7xl leading-[1.1] mb-8">
|
||||
Crafting <span class="italic">tranquility</span> through natural design.
|
||||
</h1>
|
||||
<p class="text-lg md:text-xl text-stone-600 mb-10 leading-relaxed max-w-lg">
|
||||
A comprehensive guide to biophilic aesthetics. Learn to curate spaces that harmonize with the natural world using organic textures and light.
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4">
|
||||
<a href="#pricing" class="btn-primary text-white px-10 py-5 text-center font-medium text-lg">
|
||||
Start Learning Today
|
||||
</a>
|
||||
<div class="flex items-center gap-4 px-6 py-3">
|
||||
<div class="flex -space-x-2">
|
||||
<div class="w-8 h-8 rounded-full bg-stone-300 border-2 border-white"></div>
|
||||
<div class="w-8 h-8 rounded-full bg-stone-400 border-2 border-white"></div>
|
||||
<div class="w-8 h-8 rounded-full bg-stone-500 border-2 border-white"></div>
|
||||
</div>
|
||||
<span class="text-sm text-stone-500 font-medium">+2,400 students</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative reveal" style="transition-delay: 200ms;">
|
||||
<div class="aspect-[4/5] rounded-2xl overflow-hidden shadow-2xl">
|
||||
<img src="https://images.pexels.com/photos/17057041/pexels-photo-17057041.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200" alt="Spacious modern interior featuring brick walls with greenery and wooden table." class="w-full h-full object-cover" />
|
||||
</div>
|
||||
<div class="absolute -bottom-6 -left-6 bg-white p-6 shadow-xl rounded-xl max-w-[240px] hidden md:block">
|
||||
<p class="serif text-lg leading-tight mb-2">"Life-changing perspective on my home."</p>
|
||||
<p class="text-xs text-stone-400 uppercase tracking-widest">— Elena R.</p>
|
||||
</div>
|
||||
<a href="https://www.pexels.com/photo/wooden-decorations-and-plants-in-a-modern-interior-17057041/" class="absolute bottom-4 right-4 text-[10px] text-white/60 hover:text-white transition-colors">
|
||||
Photo by Matheus Bertelli on Pexels
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Philosophy Section -->
|
||||
<section id="philosophy" class="py-24 bg-[#F0EDE9]">
|
||||
<div class="max-w-7xl mx-auto px-6 sm:px-8 lg:px-12 text-center">
|
||||
<div class="max-w-3xl mx-auto reveal">
|
||||
<h2 class="text-3xl md:text-5xl mb-8">Design shouldn't fight nature; it should invite it in.</h2>
|
||||
<p class="text-lg text-stone-600 leading-relaxed">
|
||||
We live in a world of synthetic surfaces and harsh artificial lighting. The Organic Atelier was born from the belief that our homes should be sanctuaries—spaces that lower our heart rate and reconnect us to the rhythms of the Earth.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-12 mt-24 reveal">
|
||||
<div class="space-y-4">
|
||||
<div class="w-12 h-12 mx-auto bg-[#A98467]/10 rounded-full flex items-center justify-center text-[#A98467]">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold">Material Integrity</h3>
|
||||
<p class="text-stone-500 text-sm leading-relaxed">Understanding the tactile properties of linen, stone, reclaimed wood, and clay.</p>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div class="w-12 h-12 mx-auto bg-[#5F6F52]/10 rounded-full flex items-center justify-center text-[#5F6F52]">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364-6.364l-.707.707M6.343 17.657l-.707.707m12.728 0l-.707-.707M6.343 6.343l-.707-.707M12 8a4 4 0 110 8 4 4 0 010-8z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold">Luminous Flow</h3>
|
||||
<p class="text-stone-500 text-sm leading-relaxed">Mastering the art of natural light and shadow to define mood and depth.</p>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div class="w-12 h-12 mx-auto bg-[#A98467]/10 rounded-full flex items-center justify-center text-[#A98467]">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L17 16.34a4.5 4.5 0 002.828 0 4.5 4.5 0 000-6.364L7 2.343a4.5 4.5 0 00-6.364 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold">Sustainable Sourcing</h3>
|
||||
<p class="text-stone-500 text-sm leading-relaxed">Curating ethically produced pieces that age beautifully and respect the planet.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Curriculum Section -->
|
||||
<section id="curriculum" class="py-24">
|
||||
<div class="max-w-7xl mx-auto px-6 sm:px-8 lg:px-12">
|
||||
<div class="flex flex-col md:flex-row md:items-end justify-between mb-16 gap-6">
|
||||
<div class="max-w-2xl">
|
||||
<h2 class="text-4xl md:text-5xl mb-6">The Curriculum</h2>
|
||||
<p class="text-lg text-stone-500">Everything you need to move from amateur decorator to conscious interior curator.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-8">
|
||||
<!-- Module 1 -->
|
||||
<div class="reveal bg-white p-8 border border-stone-100 card-hover group">
|
||||
<div class="flex justify-between items-start mb-6">
|
||||
<span class="text-xs font-bold tracking-widest text-[#A98467] uppercase">Module 01</span>
|
||||
<span class="text-xs text-stone-400">4 Videos • 2 PDFs</span>
|
||||
</div>
|
||||
<h3 class="text-2xl mb-4 group-hover:text-[#5F6F52] transition-colors">Foundation of Texture</h3>
|
||||
<p class="text-stone-500 mb-6">Learn why touch is the most overlooked element of design. We explore linen, stone, and wood layering.</p>
|
||||
<ul class="space-y-2 text-sm text-stone-600">
|
||||
<li class="flex items-center"><span class="w-1.5 h-1.5 bg-[#A98467] rounded-full mr-3"></span>Tactile layering techniques</li>
|
||||
<li class="flex items-center"><span class="w-1.5 h-1.5 bg-[#A98467] rounded-full mr-3"></span>The psychology of soft vs. hard surfaces</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Module 2 -->
|
||||
<div class="reveal bg-white p-8 border border-stone-100 card-hover group" style="transition-delay: 100ms;">
|
||||
<div class="flex justify-between items-start mb-6">
|
||||
<span class="text-xs font-bold tracking-widest text-[#A98467] uppercase">Module 02</span>
|
||||
<span class="text-xs text-stone-400">5 Videos • 1 Guide</span>
|
||||
</div>
|
||||
<h3 class="text-2xl mb-4 group-hover:text-[#5F6F52] transition-colors">Atmospheric Light</h3>
|
||||
<p class="text-stone-500 mb-6">Moving beyond overhead lights. Learn to use shadows and golden hour to create depth.</p>
|
||||
<ul class="space-y-2 text-sm text-stone-600">
|
||||
<li class="flex items-center"><span class="w-1.5 h-1.5 bg-[#A98467] rounded-full mr-3"></span>Directional lighting theory</li>
|
||||
<li class="flex items-center"><span class="w-1.5 h-1.5 bg-[#A98467] rounded-full mr-3"></span>The role of candle and lamp placement</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Module 3 -->
|
||||
<div class="reveal bg-white p-8 border border-stone-100 card-hover group" style="transition-delay: 200ms;">
|
||||
<div class="flex justify-between items-start mb-6">
|
||||
<span class="text-xs font-bold tracking-widest text-[#A98467] uppercase">Module 03</span>
|
||||
<span class="text-xs text-stone-400">3 Videos • 3 Case Studies</span>
|
||||
</div>
|
||||
<h3 class="text-2xl mb-4 group-hover:text-[#5F6F52] transition-colors">The Sourcing List</h3>
|
||||
<p class="text-stone-500 mb-6">A curated directory of sustainable makers, woodworkers, and textile artisans.</p>
|
||||
<ul class="space-y-2 text-sm text-stone-600">
|
||||
<li class="flex items-center"><span class="w-1.5 h-1.5 bg-[#A98467] rounded-full mr-3"></span>Identifying high-quality natural materials</li>
|
||||
<li class="flex items-center"><span class="w-1.5 h-1.5 bg-[#A98467] rounded-full mr-3"></span>Ethical sourcing guide for beginners</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Module 4 -->
|
||||
<div class="reveal bg-white p-8 border border-stone-100 card-hover group" style="transition-delay: 300ms;">
|
||||
<div class="flex justify-between items-start mb-6">
|
||||
<span class="text-xs font-bold tracking-widest text-[#A98467] uppercase">Module 04</span>
|
||||
<span class="text-xs text-stone-400">6 Videos • Final Project</span>
|
||||
</div>
|
||||
<h3 class="text-2xl mb-4 group-hover:text-[#5F6F52] transition-colors">Biophilic Layouts</h3>
|
||||
<p class="text-stone-500 mb-6">How to arrange furniture to encourage movement, air circulation, and organic flow.</p>
|
||||
<ul class="space-y-2 text-sm text-stone-600">
|
||||
<li class="flex items-center"><span class="w-1.5 h-1.5 bg-[#A98467] rounded-full mr-3"></span>Circulation and spatial psychology</li>
|
||||
<li class="flex items-center"><span class="w-1.5 h-1.5 bg-[#A98467] rounded-full mr-3"></span>Integrating living plants into structure</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Pricing Section -->
|
||||
<section id="pricing" class="py-24 bg-white">
|
||||
<div class="max-w-4xl mx-auto px-6 sm:px-8 lg:px-12">
|
||||
<div class="text-center mb-16 reveal">
|
||||
<h2 class="text-4xl md:text-5xl mb-4">Start your journey</h2>
|
||||
<p class="text-stone-500">Lifetime access. Self-paced learning. Community support.</p>
|
||||
</div>
|
||||
|
||||
<div class="reveal bg-[#F8F5F2] border border-stone-200 p-8 md:p-16 rounded-3xl relative overflow-hidden">
|
||||
<div class="absolute top-0 right-0 w-64 h-64 bg-[#5F6F52]/5 rounded-full -mr-32 -mt-32"></div>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-12 items-center relative z-10">
|
||||
<div>
|
||||
<h3 class="text-3xl mb-4">The Full Masterclass</h3>
|
||||
<p class="text-stone-500 mb-8 text-lg">Everything you need to design professional-grade organic spaces.</p>
|
||||
<ul class="space-y-4 mb-8">
|
||||
<li class="flex items-center text-sm">
|
||||
<svg class="w-5 h-5 text-[#5F6F52] mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
24 High-Definition Video Lessons
|
||||
</li>
|
||||
<li class="flex items-center text-sm">
|
||||
<svg class="w-5 h-5 text-[#5F6F52] mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
Downloadable Resource Library
|
||||
</li>
|
||||
<li class="flex items-center text-sm">
|
||||
<svg class="w-5 h-5 text-[#5F6F52] mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
Private Community Access
|
||||
</li>
|
||||
<li class="flex items-center text-sm">
|
||||
<svg class="w-5 h-5 text-[#5F6F52] mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
Certificate of Completion
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="text-center bg-white p-10 rounded-2xl shadow-xl">
|
||||
<p class="text-stone-400 text-sm uppercase tracking-widest mb-4">One-time payment</p>
|
||||
<div class="text-6xl font-bold mb-6">$299</div>
|
||||
<a href="#" class="block w-full btn-primary text-white py-4 rounded-lg font-semibold text-lg mb-4">
|
||||
Enroll Now
|
||||
</a>
|
||||
<p class="text-xs text-stone-400">30-day money back guarantee</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="py-12 border-t border-stone-200">
|
||||
<div class="max-w-7xl mx-auto px-6 sm:px-8 lg:px-12 flex flex-col md:flex-row justify-between items-center">
|
||||
<div class="flex items-center space-x-2 mb-6 md:mb-0">
|
||||
<div class="w-6 h-6 bg-[#5F6F52] rounded-full"></div>
|
||||
<span class="serif text-lg font-bold">The Organic Atelier</span>
|
||||
</div>
|
||||
<div class="flex space-x-8 text-sm text-stone-500">
|
||||
<a href="#" class="hover:text-[#A98467]">Instagram</a>
|
||||
<a href="#" class="hover:text-[#A98467]">Pinterest</a>
|
||||
<a href="#" class="hover:text-[#A98467]">Terms</a>
|
||||
<a href="#" class="hover:text-[#A98467]">Privacy</a>
|
||||
</div>
|
||||
<p class="mt-6 md:mt-0 text-xs text-stone-400">
|
||||
© 2024 The Organic Atelier. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Intersection Observer for reveal animations
|
||||
const observerOptions = {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
};
|
||||
|
||||
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 scroll for all 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.13s<br>Model: unsloth/gemma-4-26B-A4B-it-qat-GGUF:Q4_K_XL</div></body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user