HTML Source Code
Copy Code
<!-- Hero Section -->
<section class="relative min-h-screen flex items-center justify-center overflow-hidden bg-stone-50">
<div class="absolute inset-0 bg-gradient-to-br from-emerald-900/20 via-transparent to-amber-900/10"></div>
<div class="absolute inset-0" style="background-image: url('https://images.unsplash.com/photo-1500382017468-9049fed747ef?w=1920&q=80'); background-size: cover; background-position: center; opacity: 0.15;"></div>
<div class="relative z-10 max-w-7xl mx-auto px-6 lg:px-8 text-center">
<span class="inline-block px-4 py-2 bg-emerald-100 text-emerald-800 rounded-full text-sm font-semibold tracking-wide uppercase mb-6">
Sustainable Living Since 2017
</span>
<h1 class="text-5xl md:text-7xl font-bold text-stone-900 mb-6 leading-tight">
Whispering Pines<br>
<span class="text-emerald-600">Off-Grid Farm</span>
</h1>
<p class="text-xl md:text-2xl text-stone-600 max-w-3xl mx-auto mb-10 leading-relaxed">
Nestled in the heart of the Cascade Mountains, we cultivate organic produce and sustainable living—completely powered by nature.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="#products" class="px-8 py-4 bg-emerald-600 text-white rounded-lg font-semibold hover:bg-emerald-700 transition-colors shadow-lg shadow-emerald-600/30">
Explore Our Harvest
</a>
<a href="#visit" class="px-8 py-4 bg-white text-stone-800 border-2 border-stone-200 rounded-lg font-semibold hover:border-emerald-600 hover:text-emerald-600 transition-colors">
Schedule a Visit
</a>
</div>
</div>
<!-- Scroll indicator -->
<div class="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
<svg class="w-6 h-6 text-stone-400" 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>
<!-- About Section -->
<section class="py-24 bg-white">
<div class="max-w-7xl mx-auto px-6 lg:px-8">
<div class="grid lg:grid-cols-2 gap-16 items-center">
<div>
<span class="text-emerald-600 font-semibold tracking-wide uppercase text-sm">Our Story</span>
<h2 class="text-4xl md:text-5xl font-bold text-stone-900 mt-3 mb-6">
Living in Harmony with the Land
</h2>
<p class="text-lg text-stone-600 mb-6 leading-relaxed">
Founded by Maya and James Thornton after leaving their corporate careers in Seattle, Whispering Pines began as a dream to reconnect with nature. What started as a modest garden has flourished into a 45-acre sustainable farm.
</p>
<p class="text-lg text-stone-600 mb-8 leading-relaxed">
We operate entirely off the grid, generating 100% of our electricity through solar panels and micro-hydro. Our water comes from natural springs, and we practice regenerative agriculture that heals the soil with each growing season.
</p>
<div class="grid grid-cols-3 gap-6">
<div class="text-center">
<div class="text-4xl font-bold text-emerald-600">45</div>
<div class="text-stone-500 text-sm mt-1">Acres</div>
</div>
<div class="text-center">
<div class="text-4xl font-bold text-emerald-600">100%</div>
<div class="text-stone-500 text-sm mt-1">Renewable</div>
</div>
<div class="text-center">
<div class="text-4xl font-bold text-emerald-600">7</div>
<div class="text-stone-500 text-sm mt-1">Years</div>
</div>
</div>
</div>
<div class="relative">
<div class="aspect-square rounded-2xl overflow-hidden shadow-2xl">
<img src="https://images.unsplash.com/photo-1574943320219-553eb213f72d?w=800&q=80" alt="Farm landscape" class="w-full h-full object-cover">
</div>
<div class="absolute -bottom-6 -left-6 bg-emerald-600 text-white p-6 rounded-xl shadow-lg">
<div class="text-3xl font-bold">Zero Waste</div>
<div class="text-emerald-100">Certified Farm</div>
</div>
</div>
</div>
</div>
</section>
<!-- Features / Sustainability Section -->
<section class="py-24 bg-stone-100">
<div class="max-w-7xl mx-auto px-6 lg:px-8">
<div class="text-center mb-16">
<span class="text-emerald-600 font-semibold tracking-wide uppercase text-sm">Sustainability First</span>
<h2 class="text-4xl md:text-5xl font-bold text-stone-900 mt-3">
How We Live Off the Grid
</h2>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Feature 1 -->
<div class="bg-white p-8 rounded-2xl shadow-sm hover:shadow-lg transition-shadow">
<div class="w-14 h-14 bg-amber-100 rounded-xl flex items-center justify-center mb-6">
<svg class="w-7 h-7 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
</svg>
</div>
<h3 class="text-xl font-bold text-stone-900 mb-3">Solar & Micro-Hydro</h3>
<p class="text-stone-600 leading-relaxed">
32 solar panels and a micro-hydro turbine generate all our electricity, stored in battery banks for cloudy days.
</p>
</div>
<!-- Feature 2 -->
<div class="bg-white p-8 rounded-2xl shadow-sm hover:shadow-lg transition-shadow">
<div class="w-14 h-14 bg-blue-100 rounded-xl flex items-center justify-center mb-6">
<svg class="w-7 h-7 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path>
</svg>
</div>
<h3 class="text-xl font-bold text-stone-900 mb-3">Natural Spring Water</h3>
<p class="text-stone-600 leading-relaxed">
Our gravity-fed water system channels pure mountain spring water to the farmhouse and irrigation lines.
</p>
</div>
<!-- Feature 3 -->
<div class="bg-white p-8 rounded-2xl shadow-sm hover:shadow-lg transition-shadow">
<div class="w-14 h-14 bg-emerald-100 rounded-xl flex items-center justify-center mb-6">
<svg class="w-7 h-7 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"></path>
</svg>
</div>
<h3 class="text-xl font-bold text-stone-900 mb-3">Regenerative Soil</h3>
<p class="text-stone-600 leading-relaxed">
No-till farming, cover cropping, and composting regenerate soil health, capturing carbon naturally.
</p>
</div>
<!-- Feature 4 -->
<div class="bg-white p-8 rounded-2xl shadow-sm hover:shadow-lg transition-shadow">
<div class="w-14 h-14 bg-purple-100 rounded-xl flex items-center justify-center mb-6">
<svg class="w-7 h-7 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
</svg>
</div>
<h3 class="text-xl font-bold text-stone-900 mb-3">Free-Range Livestock</h3>
<p class="text-stone-600 leading-relaxed">
Our chickens, ducks, and goats roam pasture lands, living natural, hormone-free lives.
</p>
</div>
<!-- Feature 5 -->
<div class="bg-white p-8 rounded-2xl shadow-sm hover:shadow-lg transition-shadow">
<div class="w-14 h-14 bg-orange-100 rounded-xl flex items-center justify-center mb-6">
<svg class="w-7 h-7 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"></path>
</svg>
</div>
<h3 class="text-xl font-bold text-stone-900 mb-3">Food Forest</h3>
<p class="text-stone-600 leading-relaxed">
Our 8-acre permaculture food forest provides fruit, nuts, and medicinal herbs year-round.
</p>
</div>
<!-- Feature 6 -->
<div class="bg-white p-8 rounded-2xl shadow-sm hover:shadow-lg transition-shadow">
<div class="w-14 h-14 bg-rose-100 rounded-xl flex items-center justify-center mb-6">
<svg class="w-7 h-7 text-rose-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<h3 class="text-xl font-bold text-stone-900 mb-3">Seasonal Rhythm</h3>
<p class="text-stone-600 leading-relaxed">
We honor nature's cycles, planting and harvesting according to lunar and seasonal traditions.
</p>
</div>
</div>
</div>
</section>
<!-- Products Section -->
<section id="products" class="py-24 bg-white">
<div class="max-w-7xl mx-auto px-6 lg:px-8">
<div class="text-center mb-16">
<span class="text-emerald-600 font-semibold tracking-wide uppercase text-sm">Fresh From the Farm</span>
<h2 class="text-4xl md:text-5xl font-bold text-stone-900 mt-3">
Our Seasonal Harvest
</h2>
<p class="text-lg text-stone-600 mt-4 max-w-2xl mx-auto">
All produce is harvested within 24 hours of delivery. Grown without pesticides, with love.
</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Product 1 -->
<div class="group bg-stone-50 rounded-2xl overflow-hidden hover:shadow-xl transition-all duration-300">
<div class="aspect-square overflow-hidden">
<img src="https://images.unsplash.com/photo-1592924357228-91a4daadcfea?w=400&q=80" alt="Heirloom Tomatoes" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
</div>
<div class="p-6">
<div class="text-xs text-emerald-600 font-semibold uppercase tracking-wide mb-2">In Season</div>
<h3 class="text-lg font-bold text-stone-900 mb-2">Heirloom Tomatoes</h3>
<p class="text-stone-600 text-sm mb-4">20+ varieties including Cherokee Purple, Brandywine, and Green Zebra.</p>
<div class="flex items-center justify-between">
<span class="text-emerald-600 font-bold">$6/lb</span>
<button class="text-sm font-semibold text-stone-700 hover:text-emerald-600 transition-colors">Order Now →</button>
</div>
</div>
</div>
<!-- Product 2 -->
<div class="group bg-stone-50 rounded-2xl overflow-hidden hover:shadow-xl transition-all duration-300">
<div class="aspect-square overflow-hidden">
<img src="https://images.unsplash.com/photo-1550989460-0adf9ea622e2?w=400&q=80" alt="Fresh Eggs" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
</div>
<div class="p-6">
<div class="text-xs text-emerald-600 font-semibold uppercase tracking-wide mb-2">Available Daily</div>
<h3 class="text-lg font-bold text-stone-900 mb-2">Pasture-Raised Eggs</h3>
<p class="text-stone-600 text-sm mb-4">From our 50 heritage breed hens. Deep orange yolks, rich flavor.</p>
<div class="flex items-center justify-between">
<span class="text-emerald-600 font-bold">$8/dozen</span>
<button class="text-sm font-semibold text-stone-700 hover:text-emerald-600 transition-colors">Order Now →</button>
</div>
</div>
</div>
<!-- Product 3 -->
<div class="group bg-stone-50 rounded-2xl overflow-hidden hover:shadow-xl transition-all duration-300">
<div class="aspect-square overflow-hidden">
<img src="https://images.unsplash.com/photo-1610832958506-aa56368176cf?w=400&q=80" alt="Fresh Greens" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
</div>
<div class="p-6">
<div class="text-xs text-emerald-600 font-semibold uppercase tracking-wide mb-2">In Season</div>
<h3 class="text-lg font-bold text-stone-900 mb-2">Mixed Salad Greens</h3>
<p class="text-stone-600 text-sm mb-4">Kale, arugula, chard, and lettuces harvested at peak freshness.</p>
<div class="flex items-center justify-between">
<span class="text-emerald-600 font-bold">$5/bag</span>
<button class="text-sm font-semibold text-stone-700 hover:text-emerald-600 transition-colors">Order Now →</button>
</div>
</div>
</div>
<!-- Product 4 -->
<div class="group bg-stone-50 rounded-2xl overflow-hidden hover:shadow-xl transition-all duration-300">
<div class="aspect-square overflow-hidden">
<img src="https://images.unsplash.com/photo-1560806887-1e4cd0b6cbd6?w=400&q=80" alt="Honey" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
</div>
<div class="p-6">
<div class="text-xs text-amber-600 font-semibold uppercase tracking-wide mb-2">Limited Supply</div>
<h3 class="text-lg font-bold text-stone-900 mb-2">Wildflower Honey</h3>
<p class="text-stone-600 text-sm mb-4">Raw, unfiltered honey from our 12 beehives. Never heated.</p>
<div class="flex items-center justify-between">
<span class="text-emerald-600 font-bold">$12/jar</span>
<button class="text-sm font-semibold text-stone-700 hover:text-emerald-600 transition-colors">Order Now →</button>
</div>
</div>
</div>
</div>
<div class="text-center mt-12">
<a href="#" class="inline-flex items-center gap-2 px-8 py-4 border-2 border-emerald-600 text-emerald-600 rounded-lg font-semibold hover:bg-emerald-600 hover:text-white transition-colors">
View Full Harvest Calendar
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
</svg>
</a>
</div>
</div>
</section>
<!-- CSA Program Section -->
<section class="py-24 bg-emerald-600 relative overflow-hidden">
<div class="absolute inset-0 opacity-10" style="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=\'%23ffffff\' fill-opacity=\'1\'%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');"></div>
<div class="relative max-w-7xl mx-auto px-6 lg:px-8">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div>
<span class="inline-block px-4 py-2 bg-emerald-500/30 text-emerald-100 rounded-full text-sm font-semibold tracking-wide uppercase mb-6">
Community Supported Agriculture
</span>
<h2 class="text-4xl md:text-5xl font-bold text-white mb-6">
Join Our CSA Program
</h2>
<p class="text-emerald-100 text-lg mb-8 leading-relaxed">
Become a member and receive a weekly box of our freshest harvest. You'll get 20+ varieties of seasonal vegetables, fruits, herbs, and eggs—all grown with sustainable practices.
</p>
<div class="space-y-4 mb-8">
<div class="flex items-center gap-3">
<div class="w-6 h-6 bg-emerald-400 rounded-full flex items-center justify-center">
<svg class="w-4 h-4 text-emerald-800" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
</svg>
</div>
<span class="text-white">18-week season (June - October)</span>
</div>
<div class="flex items-center gap-3">
<div class="w-6 h-6 bg-emerald-400 rounded-full flex items-center justify-center">
<svg class="w-4 h-4 text-emerald-800" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
</svg>
</div>
<span class="text-white">Weekly pickup at the farm or 3 delivery hubs</span>
</div>
<div class="flex items-center gap-3">
<div class="w-6 h-6 bg-emerald-400 rounded-full flex items-center justify-center">
<svg class="w-4 h-4 text-emerald-800" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
</svg>
</div>
<span class="text-white">Member-only recipes and farm events</span>
</div>
</div>
<div class="flex flex-col sm:flex-row gap-4">
<a href="#" class="px-8 py-4 bg-white text-emerald-700 rounded-lg font-semibold hover:bg-emerald-50 transition-colors text-center">
Join CSA - $550/Season
</a>
</div>
</div>
<div class="bg-white/10 backdrop-blur-sm rounded-2xl p-8">
<h3 class="text-2xl font-bold text-white mb-6">What's in a Typical Box?</h3>
<div class="grid grid-cols-2 gap-4 text-emerald-50">
<div class="flex items-center gap-2">
<span class="text-2xl">🍅</span>
<span>Heirloom Tomatoes</span>
</div>
<div class="flex items-center gap-2">
<span class="text-2xl">🥬</span>
<span>Fresh Greens</span>
</div>
<div class="flex items-center gap-2">
<span class="text-2xl">🥕</span>
<span>Carrots</span>
</div>
<div class="flex items-center gap-2">
<span class="text-2xl">🥒</span>
<span>Cucumbers</span>
</div>
<div class="flex items-center gap-2">
<span class="text-2xl">🫑</span>
<span>Peppers</span>
</div>
<div class="flex items-center gap-2">
<span class="text-2xl">🧅</span>
<span>Onions</span>
</div>
<div class="flex items-center gap-2">
<span class="text-2xl">🥚</span>
<span>1 Dozen Eggs</span>
</div>
<div class="flex items-center gap-2">
<span class="text-2xl">🌿</span>
<span>Fresh Herbs</span>
</div>
</div>
<p class="text-emerald-200 text-sm mt-6 italic">Contents vary weekly based on harvest.</p>
</div>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section class="py-24 bg-stone-50">
<div class="max-w-7xl mx-auto px-6 lg:px-8">
<div class="text-center mb-16">
<span class="text-emerald-600 font-semibold tracking-wide uppercase text-sm">Community Voices</span>
<h2 class="text-4xl md:text-5xl font-bold text-stone-900 mt-3">
What Our Neighbors Say
</h2>
</div>
<div class="grid md:grid-cols-3 gap-8">
<!-- Testimonial 1 -->
<div class="bg-white p-8 rounded-2xl shadow-sm">
<div class="flex gap-1 mb-4">
<svg class="w-5 h-5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
</div>
<p class="text-stone-600 mb-6 leading-relaxed">
"The CSA program changed how our family eats. My kids now ask for 'farm carrots' instead of store-bought. The quality is unreal."
</p>
<div class="flex items-center gap-4">
<div class="w-12 h-12 bg-emerald-100 rounded-full flex items-center justify-center text-emerald-700 font-bold">
SR
</div>
<div>
<div class="font-semibold text-stone-900">Sarah Rodriguez</div>
<div class="text-stone-500 text-sm">CSA Member for 3 years</div>
</div>
</div>
</div>
<!-- Testimonial 2 -->
<div class="bg-white p-8 rounded-2xl shadow-sm">
<div class="flex gap-1 mb-4">
<svg class="w-5 h-5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
</div>
<p class="text-stone-600 mb-6 leading-relaxed">
"Maya and James are living proof that sustainable agriculture works. Their workshops inspired me to start my own backyard garden."
</p>
<div class="flex items-center gap-4">
<div class="w-12 h-12 bg-amber-100 rounded-full flex items-center justify-center text-amber-700 font-bold">
MC
</div>
<div>
<div class="font-semibold text-stone-900">Michael Chen</div>
<div class="text-stone-500 text-sm">Workshop Attendee</div>
</div>
</div>
</div>
<!-- Testimonial 3 -->
<div class="bg-white p-8 rounded-2xl shadow-sm">
<div class="flex gap-1 mb-4">
<svg class="w-5 h-5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
</div>
<p class="text-stone-600 mb-6 leading-relaxed">
"As a chef, I'm picky about ingredients. Whispering Pines supplies my restaurant because the quality is unmatched. Pure, honest food."
</p>
<div class="flex items-center gap-4">
<div class="w-12 h-12 bg-rose-100 rounded-full flex items-center justify-center text-rose-700 font-bold">
EK
</div>
<div>
<div class="font-semibold text-stone-900">Elena Kowalski</div>
<div class="text-stone-500 text-sm">Chef, The Birch Table</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Visit/Contact Section -->
<section id="visit" class="py-24 bg-white">
<div class="max-w-7xl mx-auto px-6 lg:px-8">
<div class="grid lg:grid-cols-2 gap-16">
<div>
<span class="text-emerald-600 font-semibold tracking-wide uppercase text-sm">Come Visit Us</span>
<h2 class="text-4xl md:text-5xl font-bold text-stone-900 mt-3 mb-6">
Experience the Farm
</h2>
<p class="text-lg text-stone-600 mb-8 leading-relaxed">
We welcome visitors on Saturdays for farm tours. Walk through our fields, meet the animals, and see how we live off the grid. It's a great way to reconnect with where your food comes from.
</p>
<div class="space-y-6">
<div class="flex items-start gap-4">
<div class="w-12 h-12 bg-emerald-100 rounded-xl flex items-center justify-center flex-shrink-0">
<svg class="w-6 h-6 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
</div>
<div>
<h3 class="font-semibold text-stone-900">Location</h3>
<p class="text-stone-600">4726 Mountain Meadow Road<br>North Bend, WA 98045</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="w-12 h-12 bg-emerald-100 rounded-xl flex items-center justify-center flex-shrink-0">
<svg class="w-6 h-6 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<div>
<h3 class="font-semibold text-stone-900">Farm Stand Hours</h3>
<p class="text-stone-600">Saturday: 9:00 AM - 3:00 PM<br>Sunday: 10:00 AM - 2:00 PM</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="w-12 h-12 bg-emerald-100 rounded-xl flex items-center justify-center flex-shrink-0">
<svg class="w-6 h-6 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
</svg>
</div>
<div>
<h3 class="font-semibold text-stone-900">Contact Us</h3>
<p class="text-stone-600">[email protected] <br>(425) 555-BLOOM</p>
</div>
</div>
</div>
</div>
<div>
<form class="bg-stone-50 p-8 rounded-2xl">
<h3 class="text-xl font-bold text-stone-900 mb-6">Schedule a Farm Tour</h3>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-stone-700 mb-2">Full Name</label>
<input type="text" class="w-full px-4 py-3 rounded-lg border border-stone-300 focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 outline-none transition-all" placeholder="Your name">
</div>
<div>
<label class="block text-sm font-medium text-stone-700 mb-2">Email</label>
<input type="email" class="w-full px-4 py-3 rounded-lg border border-stone-300 focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 outline-none transition-all" placeholder="[email protected] ">
</div>
<div>
<label class="block text-sm font-medium text-stone-700 mb-2">Preferred Date</label>
<input type="date" class="w-full px-4 py-3 rounded-lg border border-stone-300 focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 outline-none transition-all">
</div>
<div>
<label class="block text-sm font-medium text-stone-700 mb-2">Number of Guests</label>
<select class="w-full px-4 py-3 rounded-lg border border-stone-300 focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 outline-none transition-all">
<option>1 person</option>
<option>2 people</option>
<option>3 people</option>
<option>4 people</option>
<option>5+ people (group tour)</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-stone-700 mb-2">Message (optional)</label>
<textarea rows="3" class="w-full px-4 py-3 rounded-lg border border-stone-300 focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 outline-none transition-all resize-none" placeholder="Any specific interests or questions?"></textarea>
</div>
<button type="submit" class="w-full px-8 py-4 bg-emerald-600 text-white rounded-lg font-semibold hover:bg-emerald-700 transition-colors shadow-lg shadow-emerald-600/30">
Request Tour
</button>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- Newsletter CTA Section -->
<section class="py-16 bg-stone-900">
<div class="max-w-4xl mx-auto px-6 lg:px-8 text-center">
<h2 class="text-3xl md:text-4xl font-bold text-white mb-4">
Stay Connected to the Harvest
</h2>
<p class="text-stone-400 mb-8 max-w-2xl mx-auto">
Get weekly updates on what's fresh, farm events, recipes, and tips for sustainable living. Join our community of 2,400+ neighbors.
</p>
<form class="flex flex-col sm:flex-row gap-4 max-w-lg mx-auto">
<input type="email" class="flex-1 px-6 py-4 rounded-lg bg-stone-800 text-white border border-stone-700 focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 outline-none transition-all placeholder-stone-500" placeholder="Enter your email">
<button type="submit" class="px-8 py-4 bg-emerald-600 text-white rounded-lg font-semibold hover:bg-emerald-700 transition-colors whitespace-nowrap">
Subscribe
</button>
</form>
<p class="text-stone-500 text-sm mt-4">
We respect your privacy. Unsubscribe anytime.
</p>
</div>
</section>
<!-- Footer -->
<footer class="bg-stone-950 py-16">
<div class="max-w-7xl mx-auto px-6 lg:px-8">
<div class="grid md:grid-cols-4 gap-12 mb-12">
<div class="md:col-span-2">
<h3 class="text-2xl font-bold text-white mb-4">
Whispering Pines
<span class="text-emerald-500">Farm</span>
</h3>
<p class="text-stone-400 mb-6 max-w-sm">
Cultivating connection to the land through sustainable off-grid living. Growing good food, feeding good souls.
</p>
<div class="flex gap-4">
<a href="#" class="w-10 h-10 bg-stone-800 rounded-lg flex items-center justify-center text-stone-400 hover:bg-emerald-600 hover:text-white transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"></path></svg>
</a>
<a href="#" class="w-10 h-10 bg-stone-800 rounded-lg flex items-center justify-center text-stone-400 hover:bg-emerald-600 hover:text-white transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"></path></svg>
</a>
<a href="#" class="w-10 h-10 bg-stone-800 rounded-lg flex items-center justify-center text-stone-400 hover:bg-emerald-600 hover:text-white transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"></path></svg>
</a>
</div>
</div>
<div>
<h4 class="text-white font-semibold mb-4">Quick Links</h4>
<ul class="space-y-3">
<li><a href="#" class="text-stone-400 hover:text-emerald-500 transition-colors">About Us</a></li>
<li><a href="#" class="text-stone-400 hover:text-emerald-500 transition-colors">Our Farm</a></li>
<li><a href="#" class="text-stone-400 hover:text-emerald-500 transition-colors">CSA Program</a></li>
<li><a href="#" class="text-stone-400 hover:text-emerald-500 transition-colors">Farm Stand</a></li>
<li><a href="#" class="text-stone-400 hover:text-emerald-500 transition-colors">Workshops</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-semibold mb-4">Learn More</h4>
<ul class="space-y-3">
<li><a href="#" class="text-stone-400 hover:text-emerald-500 transition-colors">Harvest Calendar</a></li>
<li><a href="#" class="text-stone-400 hover:text-emerald-500 transition-colors">Sustainability</a></li>
<li><a href="#" class="text-stone-400 hover:text-emerald-500 transition-colors">Recipes</a></li>
<li><a href="#" class="text-stone-400 hover:text-emerald-500 transition-colors">Farm Blog</a></li>
<li><a href="#" class="text-stone-400 hover:text-emerald-500 transition-colors">Contact</a></li>
</ul>
</div>
</div>
<div class="border-t border-stone-800 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
<p class="text-stone-500 text-sm">
© 2024 Whispering Pines Farm. All rights reserved.
</p>
<div class="flex gap-6 text-sm">
<a href="#" class="text-stone-500 hover:text-emerald-500 transition-colors">Privacy Policy</a>
<a href="#" class="text-stone-500 hover:text-emerald-500 transition-colors">Terms of Service</a>
</div>
</div>
</div>
</footer>
