<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Rooted Garden Supply</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwindcss.config = {
theme: {
extend: {
colors: {
soil: { 50:'#fdf8f0', 100:'#f9edda', 200:'#f2d9b2', 300:'#e9c08a', 400:'#de9e5a', 500:'#d3813b', 600:'#b8643a', 700:'#8c4b34', 800:'#723f32', 900:'#5e362d' },
leaf: { 50:'#f0fdf3', 100:'#dcfae4', 200:'#bbeecc', 300:'#8edea7', 400:'#5ec684', 500:'#3da867', 600:'#2d8955', 700:'#276e49', 800:'#24593e', 900:'#204b35' },
clay: { 50:'#fdf5f0', 100:'#f9e8dc', 200:'#f2cdba', 300:'#eaa989', 400:'#e08258', 500:'#d46233', 600:'#bf4926', 700:'#9b3924', 800:'#7f3123', 900:'#672b21' },
}
}
}
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700;900&family=Inter:wght@400;500;600&display=swap');
h1,h2,h3,.serif { font-family: 'Merriweather', Georgia, serif; }
body { font-family: 'Inter', system-ui, sans-serif; }
.hero-pattern {
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%232d8955' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.product-card { transition: transform 0.2s, box-shadow 0.2s; }
.product-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.1); }
</style>
</head>
<body class="bg-soil-50 text-soil-900">
<!-- Navigation -->
<nav class="bg-white border-b border-soil-200 sticky top-0 z-50">
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="text-3xl">🌱</span>
<div>
<h1 class="serif font-bold text-xl text-leaf-800 leading-tight">Rooted Garden Supply</h1>
<p class="text-xs text-soil-500 tracking-wide uppercase">Est. 2019 • Local & Organic</p>
</div>
</div>
<div class="hidden md:flex items-center gap-6 text-sm text-soil-700 font-medium">
<a href="#products" class="hover:text-leaf-700 transition-colors">Shop</a>
<a href="#about" class="hover:text-leaf-700 transition-colors">About</a>
<a href="#contact" class="hover:text-leaf-700 transition-colors">Contact</a>
<span class="bg-leaf-600 text-white px-4 py-2 rounded-full text-xs font-semibold cursor-pointer hover:bg-leaf-700 transition-colors">Cart (0)</span>
</div>
<button class="md:hidden text-2xl" onclick="document.getElementById('mobile-menu').classList.toggle('hidden')">☰</button>
</div>
<!-- Mobile menu -->
<div id="mobile-menu" class="hidden md:hidden bg-white border-t border-soil-100 px-6 py-4 space-y-3">
<a href="#products" class="block text-soil-700 font-medium">Shop</a>
<a href="#about" class="block text-soil-700 font-medium">About</a>
<a href="#contact" class="block text-soil-700 font-medium">Contact</a>
</div>
</nav>
<!-- Hero -->
<section class="hero-pattern bg-gradient-to-br from-leaf-50 via-soil-50 to-clay-50 py-20 md:py-28">
<div class="max-w-6xl mx-auto px-6 flex flex-col md:flex-row items-center gap-12">
<div class="flex-1 text-center md:text-left">
<span class="inline-block bg-leaf-100 text-leaf-800 text-xs font-semibold px-3 py-1 rounded-full uppercase tracking-wider mb-4">Spring 2026 — New Arrivals In</span>
<h2 class="serif text-4xl md:text-5xl font-black text-soil-900 leading-tight mb-6">
Everything for your<br /><span class="text-leaf-600">backyard garden</span>
</h2>
<p class="text-lg text-soil-600 mb-8 max-w-lg mx-auto md:mx-0">
Heirloom seeds, organic soil, hand tools, and nursery plants — curated for the home gardener who grows with intention.
</p>
<div class="flex gap-4 justify-center md:justify-start">
<a href="#products" class="bg-leaf-600 hover:bg-leaf-700 text-white font-semibold px-8 py-3 rounded-lg transition-colors inline-block">Shop Now</a>
<a href="#about" class="bg-white border-2 border-soil-300 hover:border-leaf-500 text-soil-700 font-semibold px-8 py-3 rounded-lg transition-colors inline-block">Our Story</a>
</div>
</div>
<div class="flex-1 flex justify-center">
<div class="relative">
<div class="w-72 h-72 md:w-96 md:h-96 bg-gradient-to-br from-leaf-200 to-leaf-400 rounded-full flex items-center justify-center text-8xl md:text-9xl shadow-xl">
🌻
</div>
<div class="absolute -top-4 -right-4 bg-clay-100 rounded-full w-20 h-20 flex items-center justify-center text-3xl shadow-md">🌿</div>
<div class="absolute -bottom-2 -left-6 bg-soil-100 rounded-full w-16 h-16 flex items-center justify-center text-2xl shadow-md">🍅</div>
</div>
</div>
</div>
</section>
<!-- Categories filter -->
<section id="products" class="max-w-6xl mx-auto px-6 py-16">
<div class="text-center mb-10">
<h2 class="serif text-3xl font-bold text-soil-900 mb-2">What We Stock</h2>
<p class="text-soil-500">Hand-picked products for every stage of your garden</p>
</div>
<!-- Category pills -->
<div class="flex flex-wrap gap-2 justify-center mb-12">
{% for cat in categories %}
<button class="cat-btn px-4 py-2 rounded-full text-sm font-medium transition-colors {% if loop.index0 == 0 %}bg-leaf-600 text-white{% else %}bg-white border border-soil-200 text-soil-600 hover:border-leaf-400 hover:text-leaf-700{% endif %}" data-cat="{{ cat }}">{{ cat }}</button>
{% endfor %}
</div>
<!-- Product grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6" id="product-grid">
{% for p in products %}
<div class="product-card bg-white rounded-xl border border-soil-100 overflow-hidden cursor-pointer"
data-type="{{ p.type }}">
<div class="h-40 bg-gradient-to-br from-soil-50 to-leaf-50 flex items-center justify-center text-6xl relative">
{{ p.image }}
{% if p.badge %}
<span class="absolute top-3 left-3 bg-clay-500 text-white text-[10px] font-bold px-2 py-0.5 rounded-full uppercase">{{ p.badge }}</span>
{% endif %}
</div>
<div class="p-4">
<p class="text-xs text-soil-400 uppercase tracking-wide mb-1">{{ p.type }}</p>
<h3 class="serif font-bold text-soil-800 mb-2">{{ p.name }}</h3>
<div class="flex items-center justify-between">
<span class="text-leaf-700 font-bold">$<span class="price-val">{{ p.price }}</span></span>
<span class="text-xs text-soil-400">{{ p.unit }}</span>
</div>
<button class="mt-3 w-full bg-leaf-600 hover:bg-leaf-700 text-white text-sm font-semibold py-2 rounded-lg transition-colors add-to-cart">Add to Cart</button>
</div>
</div>
{% endfor %}
</div>
</section>
<!-- Why us / Features -->
<section class="bg-leaf-800 text-white py-16">
<div class="max-w-6xl mx-auto px-6">
<h2 class="serif text-3xl font-bold text-center mb-12">Why Gardeners Choose Us</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="text-center">
<div class="text-5xl mb-4">🌾</div>
<h3 class="serif font-bold text-lg mb-2">Heirloom First</h3>
<p class="text-leaf-200 text-sm leading-relaxed">We stock non-GMO heirloom and open-pollinated varieties. Save your seeds year after year.</p>
</div>
<div class="text-center">
<div class="text-5xl mb-4">🤝</div>
<h3 class="serif font-bold text-lg mb-2">Local Knowledge</h3>
<p class="text-leaf-200 text-sm leading-relaxed">Our staff grows in the same climate as you. Ask us anything — planting dates, companion pairs, pest tricks.</p>
</div>
<div class="text-center">
<div class="text-5xl mb-4">🚚</div>
<h3 class="serif font-bold text-lg mb-2">Free Local Delivery</h3>
<p class="text-leaf-200 text-sm leading-relaxed">Orders over $50 ship free within 15 miles. Soil, compost, and mulch included.</p>
</div>
</div>
</div>
</section>
<!-- About -->
<section id="about" class="max-w-6xl mx-auto px-6 py-16">
<div class="flex flex-col md:flex-row items-center gap-12">
<div class="flex-1">
<div class="bg-soil-100 rounded-2xl p-12 text-center text-7xl">🌳🏡🌻</div>
</div>
<div class="flex-1">
<span class="text-xs font-semibold text-leaf-600 uppercase tracking-wider">Our Story</span>
<h2 class="serif text-3xl font-bold text-soil-900 mt-2 mb-4">Started in a garage. Still soil under our nails.</h2>
<p class="text-soil-600 mb-4 leading-relaxed">
Rooted Garden Supply was born in 2019 when our founder, tired of big-box stores selling seed mixes with a 30% germination rate, decided to stock only what actually grows. We source from small seed breeders, local nurseries, and organic soil suppliers within 200 miles.
</p>
<p class="text-soil-600 mb-6 leading-relaxed">
We're not a chain. We're your neighbors who happen to know which tomato variety survives late frost and how to build a worm bin from scrap wood. Come in, ask questions, leave with something that grows.
</p>
<div class="flex gap-8">
<div>
<p class="text-3xl font-black text-leaf-600">7</p>
<p class="text-xs text-soil-400 uppercase tracking-wide">Years Open</p>
</div>
<div>
<p class="text-3xl font-black text-leaf-600">400+</p>
<p class="text-xs text-soil-400 uppercase tracking-wide">Seed Varieties</p>
</div>
<div>
<p class="text-3xl font-black text-leaf-600">1.2K</p>
<p class="text-xs text-soil-400 uppercase tracking-wide">Happy Gardeners</p>
</div>
</div>
</div>
</div>
</section>
<!-- Contact / Footer -->
<footer id="contact" class="bg-soil-900 text-soil-300 py-16">
<div class="max-w-6xl mx-auto px-6 grid grid-cols-1 md:grid-cols-3 gap-10">
<div>
<div class="flex items-center gap-2 mb-4">
<span class="text-2xl">🌱</span>
<h3 class="serif font-bold text-white text-lg">Rooted Garden Supply</h3>
</div>
<p class="text-sm leading-relaxed">Your local source for heirloom seeds, organic supplies, and garden expertise since 2019.</p>
</div>
<div>
<h4 class="font-semibold text-white mb-3">Visit Us</h4>
<p class="text-sm">142 Oak Street</p>
<p class="text-sm">Maple Creek, OR 97362</p>
<p class="text-sm mt-3">Tue — Sat: 8am — 6pm</p>
<p class="text-sm">Sun — Mon: Closed</p>
</div>
<div>
<h4 class="font-semibold text-white mb-3">Get In Touch</h4>
<p class="text-sm">📞 (541) 555-0187</p>
<p class="text-sm">📧 hello@rootedgarden.supply</p>
<div class="flex gap-3 mt-4">
<span class="bg-soil-700 hover:bg-soil-600 w-9 h-9 rounded-full flex items-center justify-center text-sm cursor-pointer transition-colors">📘</span>
<span class="bg-soil-700 hover:bg-soil-600 w-9 h-9 rounded-full flex items-center justify-center text-sm cursor-pointer transition-colors">📸</span>
<span class="bg-soil-700 hover:bg-soil-600 w-9 h-9 rounded-full flex items-center justify-center text-sm cursor-pointer transition-colors">🐦</span>
</div>
</div>
</div>
<div class="max-w-6xl mx-auto px-6 mt-12 pt-6 border-t border-soil-700 text-center text-xs text-soil-500">
© 2026 Rooted Garden Supply. All rights reserved. Mock demo site.
</div>
</footer>
<!-- Cart notification -->
<div id="cart-toast" class="fixed bottom-6 right-6 bg-leaf-700 text-white px-5 py-3 rounded-lg shadow-xl text-sm font-medium opacity-0 transition-opacity pointer-events-none z-50">
✓ Added to cart!
</div>
<script>
// Category filter
document.querySelectorAll('.cat-btn').forEach(btn => {
btn.addEventListener('click', () => {
// Update active state
document.querySelectorAll('.cat-btn').forEach(b => {
b.classList.remove('bg-leaf-600','text-white');
b.classList.add('bg-white','border','border-soil-200','text-soil-600');
});
btn.classList.add('bg-leaf-600','text-white');
btn.classList.remove('bg-white','border','border-soil-200','text-soil-600');
const cat = btn.dataset.cat;
document.querySelectorAll('.product-card').forEach(card => {
if (cat === 'All' || catMatch(card.dataset.type, cat)) {
card.style.display = '';
} else {
card.style.display = 'none';
}
});
});
});
function catMatch(type, cat) {
const map = { 'Seeds': 'Heirloom Seed', 'Plants': 'Nursery Plant', 'Soil & Fertilizer': ['Soil & Medium','Organic Fertilizer'], 'Pots & Planters': 'Pots & Planters', 'Tools': 'Hand Tools', 'Irrigation': 'Irrigation', 'Outdoor': 'Outdoor' };
const target = map[cat];
if (!target) return false;
if (Array.isArray(target)) return target.includes(type);
return type === target;
}
// Add to cart toast
let cartCount = 0;
document.querySelectorAll('.add-to-cart').forEach(btn => {
btn.addEventListener('click', (e) => {
e.stopPropagation();
cartCount++;
document.querySelector('.bg-leaf-600.rounded-full').textContent = `Cart (${cartCount})`;
const toast = document.getElementById('cart-toast');
toast.classList.remove('opacity-0');
toast.classList.add('opacity-100');
setTimeout(() => {
toast.classList.add('opacity-0');
toast.classList.remove('opacity-100');
}, 1500);
});
});
</script>
</body>
</html>