Ebilchuk/undefined
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Chuk's Farm-Fresh Bounty</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>11 <script>12 tailwind.config = {13 theme: {14 extend: {15 colors: {16 'farm-purple': '#6A0DAD',17 'earth-brown': '#8D6E63',18 'sun-yellow': '#FFEB3B',19 'light-purple': '#E2D4F0',20}21 }22 }23 }24 </script>25</head>26<body class="bg-light-purple">27<!-- Navigation -->28 <nav class="bg-farm-purple shadow-lg">29<div class="max-w-6xl mx-auto px-4">30 <div class="flex justify-between">31 <div class="flex space-x-7">32 <div>33 <a href="#" class="flex items-center py-4 px-2">34 <span class="font-semibold text-white text-3xl">Chuk's Farm</span>35 </a>36 </div>37 </div>38 <div class="hidden md:flex items-center space-x-1">39 <a href="index.html" class="py-4 px-2 text-white font-semibold hover:text-sun-yellow border-b-4 border-farm-purple hover:border-sun-yellow">Home</a>40 <a href="products.html" class="py-4 px-2 text-white font-semibold hover:text-sun-yellow border-b-4 border-farm-purple hover:border-sun-yellow">Products</a>41 <a href="cart.html" class="py-4 px-2 text-white font-semibold hover:text-sun-yellow border-b-4 border-farm-purple hover:border-sun-yellow">Cart</a>42 <a href="about.html" class="py-4 px-2 text-white font-semibold hover:text-sun-yellow border-b-4 border-farm-purple hover:border-sun-yellow">About</a>43 <a href="contact.html" class="py-4 px-2 text-white font-semibold hover:text-sun-yellow border-b-4 border-farm-purple hover:border-sun-yellow">Contact</a>44</div>45 <div class="md:hidden flex items-center">46 <button class="outline-none mobile-menu-button">47 <i data-feather="menu" class="text-white"></i>48 </button>49 </div>50 </div>51 </div>52 <!-- Mobile menu -->53 <div class="hidden mobile-menu">54 <ul class="">55 <li class="active"><a href="index.html" class="block text-sm px-2 py-4 text-white bg-farm-green font-semibold">Home</a></li>56 <li><a href="products.html" class="block text-sm px-2 py-4 hover:bg-farm-green transition duration-300">Products</a></li>57 <li><a href="cart.html" class="block text-sm px-2 py-4 hover:bg-farm-green transition duration-300">Cart</a></li>58 <li><a href="about.html" class="block text-sm px-2 py-4 hover:bg-farm-green transition duration-300">About</a></li>59 <li><a href="contact.html" class="block text-sm px-2 py-4 hover:bg-farm-green transition duration-300">Contact</a></li>60 </ul>61 </div>62 </nav>63 64 <!-- Hero Section -->65 <section class="relative bg-cover bg-center h-screen" style="background-image: url('http://static.photos/agriculture/1200x630/42')">66 <div class="absolute inset-0 bg-black opacity-40"></div>67 <div class="relative max-w-4xl mx-auto px-4 py-32 sm:py-48 lg:py-56">68 <div class="text-center">69 <h1 class="text-5xl font-extrabold tracking-tight text-white sm:text-6xl">70 Farm-Fresh Produce <br> Straight to Your Door71 </h1>72 <p class="mt-6 text-xl text-white">73 Nature's bounty, harvested with care and delivered with love.74 </p>75 <div class="mt-10 flex justify-center">76 <a href="products.html" class="px-8 py-3 border border-transparent text-base font-medium rounded-md text-farm-purple bg-sun-yellow hover:bg-yellow-500 md:py-4 md:text-lg md:px-10">77Shop Now78 </a>79 </div>80 </div>81 </div>82 </section>83 84 <!-- Featured Products -->85 <section class="py-16">86 <div class="container mx-auto px-6">87 <h2 class="text-3xl font-bold text-center text-farm-purple mb-12">Our Seasonal Picks</h2>88<div class="grid grid-cols-1 md:grid-cols-3 gap-8">89 <!-- Product 1 -->90 <div class="bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-300 hover:scale-105">91 <img src="http://static.photos/food/640x360/1" alt="Organic Tomatoes" class="w-full h-48 object-cover">92 <div class="p-6">93 <h3 class="text-xl font-semibold text-gray-800 mb-2">Organic Tomatoes</h3>94 <p class="text-gray-600 mb-4">Juicy, vine-ripened tomatoes grown without synthetic pesticides.</p>95 <div class="flex justify-between items-center">96 <span class="text-xl font-bold text-farm-purple">$3.99/lb</span>97 <button class="px-4 py-2 bg-farm-purple text-white rounded hover:bg-purple-800">98Add to Cart99 </button>100 </div>101 </div>102 </div>103 104 <!-- Product 2 -->105 <div class="bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-300 hover:scale-105">106 <img src="http://static.photos/food/640x360/2" alt="Fresh Carrots" class="w-full h-48 object-cover">107 <div class="p-6">108 <h3 class="text-xl font-semibold text-gray-800 mb-2">Fresh Carrots</h3>109 <p class="text-gray-600 mb-4">Sweet, crunchy carrots packed with vitamins and minerals.</p>110 <div class="flex justify-between items-center">111 <span class="text-xl font-bold text-farm-green">$2.49/lb</span>112 <button class="px-4 py-2 bg-farm-green text-white rounded hover:bg-green-600">113 Add to Cart114 </button>115 </div>116 </div>117 </div>118 119 <!-- Product 3 -->120 <div class="bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-300 hover:scale-105">121 <img src="http://static.photos/food/640x360/3" alt="Farm Eggs" class="w-full h-48 object-cover">122 <div class="p-6">123 <h3 class="text-xl font-semibold text-gray-800 mb-2">Farm Eggs</h3>124 <p class="text-gray-600 mb-4">Free-range eggs from happy chickens fed on organic feed.</p>125 <div class="flex justify-between items-center">126 <span class="text-xl font-bold text-farm-green">$4.99/dozen</span>127 <button class="px-4 py-2 bg-farm-green text-white rounded hover:bg-green-600">128 Add to Cart129 </button>130 </div>131 </div>132 </div>133 </div>134 <div class="text-center mt-10">135 <a href="products.html" class="px-6 py-3 border border-farm-purple text-base font-medium rounded-md text-farm-purple hover:bg-farm-purple hover:text-white md:py-3 md:text-lg md:px-8">136View All Products137 </a>138 </div>139 </div>140 </section>141 142 <!-- Farm Story -->143 <section class="py-16 bg-earth-brown text-white">144 <div class="container mx-auto px-6">145 <div class="flex flex-col md:flex-row items-center">146 <div class="md:w-1/2 mb-8 md:mb-0">147 <img src="http://static.photos/agriculture/640x360/5" alt="Our Farm" class="rounded-lg shadow-xl">148 </div>149 <div class="md:w-1/2 md:pl-12">150 <h2 class="text-3xl font-bold mb-6">Our Farming Story</h2>151 <p class="mb-4 text-lg">Founded in 2010, Chuk's Farm began as a small family plot growing vegetables for our neighbors. What started as a passion project has grown into a thriving organic farm serving hundreds of families across the region.</p>152 <p class="mb-6 text-lg">We believe in sustainable agriculture that nourishes both people and the planet. Our produce is grown without synthetic pesticides or fertilizers, using traditional methods that respect nature's balance.</p>153 <a href="about.html" class="px-6 py-3 bg-sun-yellow text-earth-brown font-medium rounded-md hover:bg-yellow-400">154 Learn More About Us155 </a>156 </div>157 </div>158 </div>159 </section>160 161 <!-- Testimonials -->162 <section class="py-16 bg-white">163 <div class="container mx-auto px-6">164 <h2 class="text-3xl font-bold text-center text-farm-green mb-12">What Our Customers Say</h2>165 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">166 <div class="bg-gray-50 p-6 rounded-lg shadow">167 <div class="flex items-center mb-4">168 <img src="http://static.photos/people/200x200/1" alt="Customer" class="w-12 h-12 rounded-full mr-4">169 <div>170 <h4 class="font-semibold">Sarah J.</h4>171 <div class="flex text-sun-yellow">172 <i data-feather="star" class="fill-current"></i>173 <i data-feather="star" class="fill-current"></i>174 <i data-feather="star" class="fill-current"></i>175 <i data-feather="star" class="fill-current"></i>176 <i data-feather="star" class="fill-current"></i>177 </div>178 </div>179 </div>180 <p class="text-gray-600">"The tomatoes from Chuk's Farm are the best I've ever tasted! You can really tell they're grown with care."</p>181 </div>182 <div class="bg-gray-50 p-6 rounded-lg shadow">183 <div class="flex items-center mb-4">184 <img src="http://static.photos/people/200x200/2" alt="Customer" class="w-12 h-12 rounded-full mr-4">185 <div>186 <h4 class="font-semibold">Michael T.</h4>187 <div class="flex text-sun-yellow">188 <i data-feather="star" class="fill-current"></i>189 <i data-feather="star" class="fill-current"></i>190 <i data-feather="star" class="fill-current"></i>191 <i data-feather="star" class="fill-current"></i>192 <i data-feather="star" class="fill-current"></i>193 </div>194 </div>195 </div>196 <p class="text-gray-600">"I love knowing exactly where my food comes from. The quality and service from Chuk's are unmatched."</p>197 </div>198 <div class="bg-gray-50 p-6 rounded-lg shadow">199 <div class="flex items-center mb-4">200 <img src="http://static.photos/people/200x200/3" alt="Customer" class="w-12 h-12 rounded-full mr-4">201 <div>202 <h4 class="font-semibold">Lisa M.</h4>203 <div class="flex text-sun-yellow">204 <i data-feather="star" class="fill-current"></i>205 <i data-feather="star" class="fill-current"></i>206 <i data-feather="star" class="fill-current"></i>207 <i data-feather="star" class="fill-current"></i>208 <i data-feather="star" class="fill-current"></i>209 </div>210 </div>211 </div>212 <p class="text-gray-600">"My kids actually eat vegetables now that we get them from Chuk's! The difference in flavor is amazing."</p>213 </div>214 </div>215 </div>216 </section>217 218 <!-- Newsletter -->219 <section class="py-16 bg-farm-purple text-white">220<div class="container mx-auto px-6 text-center">221 <h2 class="text-3xl font-bold mb-6">Join Our Farm Community</h2>222 <p class="max-w-2xl mx-auto mb-8">Sign up for our newsletter to receive seasonal updates, special offers, and farming stories straight to your inbox.</p>223 <div class="max-w-md mx-auto flex">224 <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-l focus:outline-none text-gray-800">225 <button class="px-6 py-3 bg-sun-yellow text-farm-green font-medium rounded-r hover:bg-yellow-400">226 Subscribe227 </button>228 </div>229 </div>230 </section>231 232 <!-- Footer -->233 <footer class="bg-gray-800 text-white py-12">234 <div class="container mx-auto px-6">235 <div class="grid grid-cols-1 md:grid-cols-4 gap-8">236 <div>237 <h3 class="text-xl font-semibold mb-4">Chuk's Farm</h3>238 <p class="text-gray-400">Bringing farm-fresh goodness to your table since 2010.</p>239 </div>240 <div>241 <h3 class="text-xl font-semibold mb-4">Quick Links</h3>242 <ul>243 <li class="mb-2"><a href="index.html" class="text-gray-400 hover:text-white">Home</a></li>244 <li class="mb-2"><a href="products.html" class="text-gray-400 hover:text-white">Products</a></li>245 <li class="mb-2"><a href="cart.html" class="text-gray-400 hover:text-white">Cart</a></li>246 <li class="mb-2"><a href="about.html" class="text-gray-400 hover:text-white">About Us</a></li>247 <li><a href="contact.html" class="text-gray-400 hover:text-white">Contact</a></li>248 </ul>249 </div>250 <div>251 <h3 class="text-xl font-semibold mb-4">Contact</h3>252 <p class="text-gray-400 mb-2"><i data-feather="map-pin" class="inline mr-2"></i> 123 Farm Lane, Ruralville</p>253 <p class="text-gray-400 mb-2"><i data-feather="phone" class="inline mr-2"></i> (555) 123-4567</p>254 <p class="text-gray-400"><i data-feather="mail" class="inline mr-2"></i> hello@chuksfarm.com</p>255 </div>256 <div>257 <h3 class="text-xl font-semibold mb-4">Follow Us</h3>258 <div class="flex space-x-4">259 <a href="#" class="text-gray-400 hover:text-white"><i data-feather="facebook"></i></a>260 <a href="#" class="text-gray-400 hover:text-white"><i data-feather="instagram"></i></a>261 <a href="#" class="text-gray-400 hover:text-white"><i data-feather="twitter"></i></a>262 </div>263 </div>264 </div>265 <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">266 <p>© 2023 Chuk's Farm-Fresh Bounty. All rights reserved.</p>267 </div>268 </div>269 </footer>270 271 <script>272 document.querySelector('.mobile-menu-button').addEventListener('click', function() {273 document.querySelector('.mobile-menu').classList.toggle('hidden');274 });275 </script>276 <script>feather.replace();</script>277</body>278</html>279