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>Contact Us - Purple Pastures</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</head>11<body class="bg-light-purple">12 <!-- Navigation -->13 <nav class="bg-farm-purple shadow-lg">14 <div class="max-w-6xl mx-auto px-4">15 <div class="flex justify-between">16 <div class="flex space-x-7">17 <div>18 <a href="index.html" class="flex items-center py-4 px-2">19 <span class="font-semibold text-white text-3xl">Purple Pastures</span>20 </a>21 </div>22 </div>23 <div class="hidden md:flex items-center space-x-1">24 <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>25 <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>26 <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>27 <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>28 <a href="contact.html" class="py-4 px-2 text-sun-yellow font-semibold border-b-4 border-sun-yellow">Contact</a>29 </div>30 <div class="md:hidden flex items-center">31 <button class="outline-none mobile-menu-button">32 <i data-feather="menu" class="text-white"></i>33 </button>34 </div>35 </div>36 </div>37 </nav>38 39 <!-- Contact Section -->40 <section class="py-16">41 <div class="container mx-auto px-6">42 <div class="text-center mb-12">43 <h1 class="text-4xl font-bold text-farm-purple mb-4">Get in Touch</h1>44 <p class="text-xl text-gray-600">We'd love to hear from you!</p>45 </div>46 47 <div class="flex flex-col md:flex-row gap-12">48 <!-- Contact Form -->49 <div class="md:w-1/2">50 <div class="bg-white rounded-lg shadow-lg p-8">51 <form id="contact-form">52 <div class="mb-6">53 <label for="name" class="block text-gray-700 font-medium mb-2">Your Name</label>54 <input type="text" id="name" name="name" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-farm-purple" required>55 </div>56 <div class="mb-6">57 <label for="email" class="block text-gray-700 font-medium mb-2">Email Address</label>58 <input type="email" id="email" name="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-farm-purple" required>59 </div>60 <div class="mb-6">61 <label for="subject" class="block text-gray-700 font-medium mb-2">Subject</label>62 <select id="subject" name="subject" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-farm-purple" required>63 <option value="" disabled selected>Select a topic</option>64 <option value="order">Order Inquiry</option>65 <option value="product">Product Question</option>66 <option value="farm">Farm Visit</option>67 <option value="other">Other</option>68 </select>69 </div>70 <div class="mb-6">71 <label for="message" class="block text-gray-700 font-medium mb-2">Message</label>72 <textarea id="message" name="message" rows="5" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-farm-purple" required></textarea>73 </div>74 <button type="submit" class="w-full px-6 py-3 bg-farm-purple text-white rounded-lg hover:bg-purple-800 transition">75 Send Message76 </button>77 </form>78 </div>79 </div>80 81 <!-- Contact Info -->82 <div class="md:w-1/2">83 <div class="bg-white rounded-lg shadow-lg p-8 h-full">84 <h2 class="text-2xl font-bold text-farm-purple mb-6">Contact Information</h2>85 86 <div class="space-y-6">87 <div class="flex items-start">88 <div class="bg-farm-purple bg-opacity-10 p-3 rounded-full mr-4">89 <i data-feather="map-pin" class="text-farm-purple"></i>90 </div>91 <div>92 <h3 class="font-bold text-gray-800 mb-1">Our Farm</h3>93 <p class="text-gray-600">123 Purple Pastures Lane<br>Ruralville, CA 90210</p>94 </div>95 </div>96 97 <div class="flex items-start">98 <div class="bg-farm-purple bg-opacity-10 p-3 rounded-full mr-4">99 <i data-feather="phone" class="text-farm-purple"></i>100 </div>101 <div>102 <h3 class="font-bold text-gray-800 mb-1">Phone</h3>103 <p class="text-gray-600">(555) 123-4567</p>104 </div>105 </div>106 107 <div class="flex items-start">108 <div class="bg-farm-purple bg-opacity-10 p-3 rounded-full mr-4">109 <i data-feather="mail" class="text-farm-purple"></i>110 </div>111 <div>112 <h3 class="font-bold text-gray-800 mb-1">Email</h3>113 <p class="text-gray-600">hello@purplepastures.com</p>114 </div>115 </div>116 117 <div class="flex items-start">118 <div class="bg-farm-purple bg-opacity-10 p-3 rounded-full mr-4">119 <i data-feather="clock" class="text-farm-purple"></i>120 </div>121 <div>122 <h3 class="font-bold text-gray-800 mb-1">Hours</h3>123 <p class="text-gray-600">Monday - Friday: 9am - 5pm<br>Saturday: 10am - 4pm<br>Sunday: Closed</p>124 </div>125 </div>126 </div>127 128 <div class="mt-8">129 <h3 class="font-bold text-gray-800 mb-4">Follow Us</h3>130 <div class="flex space-x-4">131 <a href="#" class="bg-farm-purple bg-opacity-10 p-3 rounded-full text-farm-purple hover:bg-opacity-20">132 <i data-feather="facebook"></i>133 </a>134 <a href="#" class="bg-farm-purple bg-opacity-10 p-3 rounded-full text-farm-purple hover:bg-opacity-20">135 <i data-feather="instagram"></i>136 </a>137 <a href="#" class="bg-farm-purple bg-opacity-10 p-3 rounded-full text-farm-purple hover:bg-opacity-20">138 <i data-feather="twitter"></i>139 </a>140 </div>141 </div>142 </div>143 </div>144 </div>145 </div>146 </section>147 148 <!-- Map Section -->149 <section class="py-8 bg-white">150 <div class="container mx-auto px-6">151 <div class="rounded-lg overflow-hidden shadow-lg">152 <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.2151329922826!2d-73.98784368459377!3d40.757985979326816!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNDDCsDQ1JzI4LjciTiA3M8KwNTknMTQuMiJX!5e0!3m2!1sen!2sus!4v1623256789012!5m2!1sen!2sus" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>153 </div>154 </div>155 </section>156 157 <script>158 document.getElementById('contact-form').addEventListener('submit', function(e) {159 e.preventDefault();160 alert('Thank you for your message! We will get back to you soon.');161 this.reset();162 });163 feather.replace();164 </script>165</body>166</html>