Spaces:
Running
Running
File size: 10,348 Bytes
e6d79a5 91cf644 e6d79a5 91cf644 e6d79a5 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us | The Roll Joint</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
</head>
<body class="font-sans bg-pink-50">
<!-- Navigation -->
<nav class="bg-primary text-white sticky top-0 z-50 shadow-lg">
<div class="container mx-auto px-6 py-4 flex justify-between items-center">
<a href="index.html" class="text-2xl font-bold flex items-center">
<img src="https://huggingface.co/spaces/Nicksimmons10/undefined/resolve/main/images/cinnamon%20rjb.png" alt="The Roll Joint Logo" class="h-10 mr-2">
The Roll Joint
</a>
<div class="hidden md:flex space-x-8">
<a href="index.html" class="hover:text-secondary">Home</a>
<a href="menu.html" class="hover:text-secondary">Menu</a>
<a href="about.html" class="hover:text-secondary">About</a>
<a href="contact.html" class="hover:text-secondary font-bold">Contact</a>
<a href="gallery.html" class="hover:text-secondary">Gallery</a>
</div>
<button class="md:hidden">
<i data-feather="menu"></i>
</button>
</div>
</nav>
<!-- Hero Section -->
<section class="bg-primary text-white py-20 text-center">
<div class="container mx-auto px-6">
<h1 class="text-4xl md:text-5xl font-bold mb-4" data-aos="fade-up">Get In Touch</h1>
<p class="text-xl max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100">We'd love to hear from you - questions, feedback, or just to say hello!</p>
</div>
</section>
<!-- Contact Content -->
<section class="py-16 px-6">
<div class="container mx-auto max-w-6xl">
<div class="grid grid-cols-1 md:grid-cols-2 gap-12">
<!-- Contact Form -->
<div class="bg-white p-8 rounded-lg shadow-sm" data-aos="fade-right">
<h2 class="text-2xl font-bold mb-6 text-primary">Send Us a Message</h2>
<form>
<div class="mb-4">
<label for="name" class="block text-gray-700 mb-2">Name</label>
<input type="text" id="name" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary">
</div>
<div class="mb-4">
<label for="email" class="block text-gray-700 mb-2">Email</label>
<input type="email" id="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary">
</div>
<div class="mb-4">
<label for="subject" class="block text-gray-700 mb-2">Subject</label>
<select id="subject" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary">
<option value="">Select a topic</option>
<option value="general">General Inquiry</option>
<option value="catering">Catering Request</option>
<option value="feedback">Feedback</option>
<option value="employment">Employment</option>
</select>
</div>
<div class="mb-4">
<label for="message" class="block text-gray-700 mb-2">Message</label>
<textarea id="message" rows="4" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"></textarea>
</div>
<button type="submit" class="bg-primary hover:bg-teal-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300 w-full">
Send Message
</button>
</form>
</div>
<!-- Contact Info -->
<div data-aos="fade-left">
<h2 class="text-2xl font-bold mb-6 text-primary">Visit Us</h2>
<div class="bg-white p-8 rounded-lg shadow-sm mb-8">
<div class="flex items-start mb-6">
<i data-feather="map-pin" class="text-primary mr-4 mt-1"></i>
<div>
<h3 class="font-bold text-lg mb-1">Location</h3>
<p class="text-gray-700">123 Baker Street<br>Rollington, CA 90210</p>
</div>
</div>
<div class="flex items-start mb-6">
<i data-feather="phone" class="text-primary mr-4 mt-1"></i>
<div>
<h3 class="font-bold text-lg mb-1">Phone</h3>
<p class="text-gray-700">(555) 123-4567</p>
</div>
</div>
<div class="flex items-start mb-6">
<i data-feather="mail" class="text-primary mr-4 mt-1"></i>
<div>
<h3 class="font-bold text-lg mb-1">Email</h3>
<p class="text-gray-700">hello@rolljoint.com</p>
</div>
</div>
<div class="flex items-start">
<i data-feather="clock" class="text-primary mr-4 mt-1"></i>
<div>
<h3 class="font-bold text-lg mb-1">Hours</h3>
<p class="text-gray-700 mb-1">Monday - Friday: 7am - 6pm</p>
<p class="text-gray-700 mb-1">Saturday: 8am - 5pm</p>
<p class="text-gray-700">Sunday: 9am - 3pm</p>
</div>
</div>
</div>
<h2 class="text-2xl font-bold mb-6 text-primary">Follow Us</h2>
<div class="flex space-x-4">
<a href="#" class="bg-white w-12 h-12 rounded-full flex items-center justify-center shadow-sm hover:bg-secondary hover:text-white transition duration-300">
<i data-feather="instagram" class="text-primary"></i>
</a>
<a href="#" class="bg-white w-12 h-12 rounded-full flex items-center justify-center shadow-sm hover:bg-secondary hover:text-white transition duration-300">
<i data-feather="facebook" class="text-primary"></i>
</a>
<a href="#" class="bg-white w-12 h-12 rounded-full flex items-center justify-center shadow-sm hover:bg-secondary hover:text-white transition duration-300">
<i data-feather="twitter" class="text-primary"></i>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- Map Section -->
<section class="px-6 pb-16">
<div class="container mx-auto">
<div class="bg-white p-6 rounded-lg shadow-sm">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.215209056354!2d-73.9883076845938!3d40.74798597932796!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259a9b3117469%3A0xd134e199a405a163!2sEmpire%20State%20Building!5e0!3m2!1sen!2sus!4v1623868310609!5m2!1sen!2sus"
width="100%"
height="400"
style="border:0;"
allowfullscreen=""
loading="lazy"
class="rounded-lg"
data-aos="fade-up"></iframe>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-primary text-white py-12 px-6">
<div class="container mx-auto">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="text-xl font-bold mb-4">The Roll Joint</h3>
<p class="text-secondary">Artisan bakery specializing in handcrafted rolls since 2010.</p>
</div>
<div>
<h4 class="font-bold mb-4">Hours</h4>
<p class="mb-1">Monday - Friday: 7am - 6pm</p>
<p class="mb-1">Saturday: 8am - 5pm</p>
<p>Sunday: 9am - 3pm</p>
</div>
<div>
<h4 class="font-bold mb-4">Contact</h4>
<p class="mb-1">123 Baker Street</p>
<p class="mb-1">Rollington, CA 90210</p>
<p class="mb-1">(555) 123-4567</p>
<p>hello@rolljoint.com</p>
</div>
<div>
<h4 class="font-bold mb-4">Follow Us</h4>
<div class="flex space-x-4">
<a href="#" class="hover:text-secondary"><i data-feather="instagram"></i></a>
<a href="#" class="hover:text-secondary"><i data-feather="facebook"></i></a>
<a href="#" class="hover:text-secondary"><i data-feather="twitter"></i></a>
</div>
</div>
</div>
<div class="border-t border-teal-700 mt-8 pt-8 text-center text-secondary">
<p>© 2023 The Roll Joint Bakery. All rights reserved.</p>
</div>
</div>
</footer>
<script>
AOS.init({
duration: 800,
easing: 'ease-in-out',
once: true
});
feather.replace();
</script>
</body>
</html> |