<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Artisanal Seed Vault | Garden Store</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Inter:wght@400;600&display=swap');
h1, h2, h3 { font-family: 'Playfair Display', serif; }
body { font-family: 'Inter', sans-serif; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
</style>
</head>
<body class="bg-stone-50 text-stone-800">
<!-- Navigation -->
<nav class="bg-white border-b border-stone-200 sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16 items-center">
<div class="flex items-center">
<a href="/" class="text-2xl font-bold text-emerald-800 flex items-center gap-2">
<i data-lucide="sprout"></i>
<span class="hidden sm:inline">Seed Vault</span>
</a>
</div>
<!-- Search Bar -->
<form action="/" method="GET" class="hidden md:flex flex-1 max-w-md mx-8">
<div class="relative w-full">
<input type="text" name="q" value="{{ search_query or '' }}" placeholder="Search seeds..." class="w-full pl-10 pr-4 py-2 border border-stone-200 rounded-full focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent text-sm">
<div class="absolute left-3 top-2.5 text-stone-400">
<i data-lucide="search" class="w-4 h-4"></i>
</div>
</div>
</form>
<div class="flex items-center gap-4">
<button class="p-2 text-stone-600 hover:text-emerald-700 md:hidden">
<i data-lucide="search"></i>
</button>
<a href="/cart" class="p-2 text-stone-600 hover:text-emerald-700 relative">
<i data-lucide="shopping-cart"></i>
<span id="cart-count-badge" class="absolute top-0 right-0 bg-emerald-600 text-white text-[10px] rounded-full h-4 w-4 flex items-center justify-center">{{ cart_count }}</span>
</a>
</div>
</div>
</div>
</nav>
<!-- Category Bar -->
<div class="bg-stone-100 border-b border-stone-200">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center space-x-8 py-3 overflow-x-auto no-scrollbar">
<a href="/" class="text-sm font-medium {{ 'text-emerald-700 border-b-2 border-emerald-700' if not active_category else 'text-stone-500 hover:text-emerald-700' }}">All Products</a>
<a href="/?category=Vegetables" class="text-sm font-medium {{ 'text-emerald-700 border-b-2 border-emerald-700' if active_category == 'Vegetables' else 'text-stone-500 hover:text-emerald-700' }}">Vegetables</a>
<a href="/?category=Flowers" class="text-sm font-medium {{ 'text-emerald-700 border-b-2 border-emerald-700' if active_category == 'Flowers' else 'text-stone-500 hover:text-emerald-700' }}">Flowers</a>
<a href="/?category=Herbs" class="text-sm font-medium {{ 'text-emerald-700 border-b-2 border-emerald-700' if active_category == 'Herbs' else 'text-stone-500 hover:text-emerald-700' }}">Herbs</a>
</div>
</div>
</div>
<!-- Hero Section -->
<header class="relative bg-emerald-900 text-white py-24 px-4 overflow-hidden">
<div class="absolute inset-0 opacity-20">
<img src="https://images.unsplash.com/photo-1466692476868-aef1dfb1e735?auto=format&fit=crop&q=80&w=1200" alt="Garden background" class="w-full h-full object-cover">
</div>
<div class="relative max-w-4xl mx-auto text-center">
<h1 class="text-5xl md:text-6xl font-bold mb-6">Cultivate Your Own Sanctuary</h1>
<p class="text-xl text-emerald-100 mb-10">Premium heirloom seeds for the conscious gardener. Sustainably sourced, locally loved.</p>
<a href="#shop" class="bg-emerald-500 hover:bg-emerald-400 text-white px-8 py-3 rounded-full font-semibold transition inline-block">
Explore the Collection
</a>
</div>
</header>
<!-- Main Content -->
<main id="shop" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<div class="flex justify-between items-end mb-12">
<div>
<h2 class="text-3xl font-bold text-stone-900">Our Seasonal Collection</h2>
<p class="text-stone-500 mt-2">
{% if search_query %}
Showing results for "{{ search_query }}"
{% elif active_category %}
Showing {{ active_category }}
{% else %}
Hand-picked varieties for your garden.
{% endif %}
</p>
</div>
</div>
<!-- Product Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
{% for product in products %}
<div class="group bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition border border-stone-100">
<a href="/product/{{ product.id }}">
<div class="aspect-square overflow-hidden bg-stone-200">
<img src="{{ product.image }}" alt="{{ product.name }}" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
</div>
<div class="p-5">
<span class="text-xs font-semibold text-emerald-600 uppercase tracking-wider">{{ product.category }}</span>
<h3 class="text-lg font-bold text-stone-900 mt-1">{{ product.name }}</h3>
<p class="text-stone-600 mt-2 text-sm line-clamp-2">{{ product.description }}</p>
<div class="mt-4 flex items-center justify-between">
<span class="text-xl font-bold text-stone-900">${{ "%.2f"|format(product.price) }}</span>
<button onclick="event.preventDefault(); addToCart({{ product.id }})" class="p-2 rounded-full bg-stone-100 text-stone-600 hover:bg-emerald-100 hover:text-emerald-700 transition">
<i data-lucide="plus" class="w-5 h-5"></i>
</button>
</div>
</div>
</a>
</div>
{% else %}
<div class="col-span-full py-20 text-center">
<i data-lucide="search-x" class="w-12 h-12 text-stone-300 mx-auto mb-4"></i>
<p class="text-stone-500 text-lg">No products found matching your criteria.</p>
<a href="/" class="text-emerald-600 font-semibold mt-4 inline-block">View all products</a>
</div>
{% endfor %}
</div>
</main>
<!-- Sustainability Section -->
<section class="bg-emerald-50 py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-3 gap-12 text-center">
<div>
<div class="w-16 h-16 bg-emerald-100 text-emerald-700 rounded-full flex items-center justify-center mx-auto mb-6">
<i data-lucide="leaf" class="w-8 h-8"></i>
</div>
<h3 class="text-xl font-bold mb-4">Heirloom Quality</h3>
<p class="text-stone-600">We only stock non-GMO, heirloom varieties that have been passed down through generations.</p>
</div>
<div>
<div class="w-16 h-16 bg-emerald-100 text-emerald-700 rounded-full flex items-center justify-center mx-auto mb-6">
<i data-lucide="globe" class="w-8 h-8"></i>
</div>
<h3 class="text-xl font-bold mb-4">Eco-Conscious</h3>
<p class="text-stone-600">Our packaging is 100% compostable, and our shipping is carbon-neutral.</p>
</div>
<div>
<div class="w-16 h-16 bg-emerald-100 text-emerald-700 rounded-full flex items-center justify-center mx-auto mb-6">
<i data-lucide="heart" class="w-8 h-8"></i>
</div>
<h3 class="text-xl font-bold mb-4">Community Driven</h3>
<p class="text-stone-600">A portion of every sale goes towards supporting local community gardens.</p>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-stone-900 text-stone-400 py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<div class="flex justify-center items-center gap-2 text-white text-xl font-bold mb-6">
<i data-lucide="sprout"></i>
<span>Seed Vault</span>
</div>
<p class="mb-6">Nurturing food sovereignty, one seed at a time.</p>
<div class="flex justify-center space-x-6 mb-8">
<a href="#" class="hover:text-white transition">Instagram</a>
<a href="#" class="hover:text-white transition">Newsletter</a>
<a href="#" class="hover:text-white transition">Contact</a>
</div>
<div class="border-t border-stone-800 pt-8 text-sm">
© 2026 The Artisanal Seed Vault. All rights reserved.
</div>
</div>
</footer>
<!-- Toast Notification -->
<div id="toast" class="fixed bottom-5 right-5 bg-emerald-800 text-white px-6 py-3 rounded-lg shadow-lg transform translate-y-20 opacity-0 transition-all duration-300 z-[100] flex items-center gap-3">
<i data-lucide="check-circle" class="w-5 h-5 text-emerald-400"></i>
<span id="toast-message">Added to cart!</span>
</div>
<script>
lucide.createIcons();
async function addToCart(productId) {
try {
const response = await fetch(`/cart/add/${productId}`, { method: 'POST' });
const data = await response.json();
if (data.status === 'success') {
// Update badge
const badge = document.getElementById('cart-count-badge');
badge.innerText = data.cart_count;
// Show toast
showToast('Added to cart!');
}
} catch (error) {
console.error('Error adding to cart:', error);
}
}
function showToast(message) {
const toast = document.getElementById('toast');
const toastMsg = document.getElementById('toast-message');
toastMsg.innerText = message;
toast.classList.remove('translate-y-20', 'opacity-0');
toast.classList.add('translate-y-0', 'opacity-100');
setTimeout(() => {
toast.classList.add('translate-y-20', 'opacity-0');
toast.classList.remove('translate-y-0', 'opacity-100');
}, 3000);
}
</script>
</body>
</html>