Twinory/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 Twinory | Amazon Seller Experts</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <link rel="preconnect" href="https://fonts.googleapis.com">11 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>12 <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Montserrat:wght@700;800&display=swap" rel="stylesheet">13 <style>14 body {15 font-family: 'Poppins', sans-serif;16 color: #FFFFFF;17 background-color: #0D0D0D;18 }19 h1, h2, h3 {20 font-family: 'Montserrat', sans-serif;21 }22 .hero-bg {23 background: linear-gradient(135deg, #1A1A1A 0%, #0D0D0D 100%);24 }25 .input-field {26 background-color: #1A1A1A;27 border: 1px solid #333333;28 }29 .input-field:focus {30 border-color: #FF9900;31 box-shadow: 0 0 0 2px rgba(255, 153, 0, 0.2);32 }33 </style>34</head>35<body class="min-h-screen">36 <!-- Navigation -->37 <nav class="fixed w-full z-50 bg-black bg-opacity-90 border-b border-gray-800">38 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">39 <div class="flex justify-between h-16">40 <div class="flex items-center">41 <div class="flex-shrink-0 flex items-center">42 <img src="https://huggingface.co/spaces/Twinory/undefined/resolve/main/images/TWINORY%20Logo%20-%20Edited.png" alt="Twinory Logo" class="h-8">43 <span class="ml-2 text-sm text-[#FF9900]">Just list it, with perfection!</span>44</div>45</div>46 <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">47 <a href="index.html" class="text-gray-300 hover:text-white px-4 py-3 rounded-md text-base font-medium">Home</a>48 <a href="about.html" class="text-gray-300 hover:text-white px-4 py-3 rounded-md text-base font-medium">About</a>49 <a href="services.html" class="text-gray-300 hover:text-white px-4 py-3 rounded-md text-base font-medium">Services</a>50 <a href="#" class="text-white px-4 py-3 rounded-md text-base font-medium hover:text-orange-400">Contact</a>51<a href="#contactForm" class="ml-4 bg-[#FF9900] text-black px-6 py-2 rounded-md font-medium hover:bg-orange-600 transition duration-300">Get Started</a>52</div>53 <div class="-mr-2 flex items-center md:hidden">54 <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none" aria-controls="mobile-menu" aria-expanded="false">55 <span class="sr-only">Open main menu</span>56 <i data-feather="menu"></i>57 </button>58 </div>59 </div>60 </div>61 </nav>62 63 <!-- Hero Section -->64 <div class="hero-bg pt-32 pb-20 md:pt-40 md:pb-32">65 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">66 <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">67 GET IN TOUCH68 </h1>69 <p class="text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto">70 Ready to grow your Amazon business? Let's talk about how we can help.71 </p>72 </div>73 </div>74 75 <!-- Contact Form -->76 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">77 <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">78 <div class="bg-gray-900 rounded-xl p-8 lg:p-12">79 <h2 class="text-2xl md:text-3xl font-bold mb-8">Send Us a Message</h2>80 <form id="contactForm" class="space-y-6">81 <div>82 <label for="fullName" class="block text-sm font-medium text-gray-400 mb-2">Full Name</label>83 <input type="text" id="fullName" name="fullName" required class="input-field w-full px-4 py-3 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-[#FF9900]">84 </div>85 <div>86 <label for="email" class="block text-sm font-medium text-gray-400 mb-2">Email Address</label>87 <input type="email" id="email" name="email" required class="input-field w-full px-4 py-3 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-[#FF9900]">88 </div>89 <div>90 <label for="phone" class="block text-sm font-medium text-gray-400 mb-2">Phone Number (Optional)</label>91 <input type="tel" id="phone" name="phone" class="input-field w-full px-4 py-3 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-[#FF9900]">92 </div>93 <div>94 <label for="business" class="block text-sm font-medium text-gray-400 mb-2">Business Name</label>95 <input type="text" id="business" name="business" class="input-field w-full px-4 py-3 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-[#FF9900]">96 </div>97 <div>98 <label for="message" class="block text-sm font-medium text-gray-400 mb-2">Your Message</label>99 <textarea id="message" name="message" rows="5" required class="input-field w-full px-4 py-3 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-[#FF9900]"></textarea>100 </div>101 <div>102 <button type="submit" class="w-full bg-[#FF9900] text-black px-6 py-4 rounded-md font-bold text-lg hover:bg-orange-600 transition duration-300">103 Send Message104 </button>105 </div>106 </form>107 <div id="formSuccess" class="hidden mt-6 p-4 bg-green-900 bg-opacity-50 rounded-md">108 <div class="flex items-center">109 <i data-feather="check-circle" class="text-green-400 mr-3"></i>110 <p class="text-green-400">Thank you for your message! We'll get back to you shortly.</p>111 </div>112 </div>113 </div>114 <div class="bg-gray-900 rounded-xl p-8 lg:p-12">115 <h2 class="text-2xl md:text-3xl font-bold mb-8">Contact Information</h2>116 <div class="space-y-6">117 <div class="flex items-start">118 <div class="flex-shrink-0 bg-[#FF9900] bg-opacity-10 p-3 rounded-full">119 <i data-feather="mail" class="text-[#FF9900] w-5 h-5"></i>120 </div>121 <div class="ml-4">122 <h3 class="text-lg font-bold mb-1">Email Us</h3>123 <p class="text-gray-400">info@twinory.com</p>124 </div>125 </div>126 <div class="flex items-start">127 <div class="flex-shrink-0 bg-[#FF9900] bg-opacity-10 p-3 rounded-full">128 <i data-feather="clock" class="text-[#FF9900] w-5 h-5"></i>129 </div>130 <div class="ml-4">131 <h3 class="text-lg font-bold mb-1">Business Hours</h3>132 <p class="text-gray-400">Monday - Saturday</p>133 <p class="text-gray-400">9:00 AM - 6:00 PM EST</p>134 </div>135 </div>136 <div class="flex items-start">137 <div class="flex-shrink-0 bg-[#FF9900] bg-opacity-10 p-3 rounded-full">138 <i data-feather="message-square" class="text-[#FF9900] w-5 h-5"></i>139 </div>140 <div class="ml-4">141 <h3 class="text-lg font-bold mb-1">Quick Chat</h3>142 <p class="text-gray-400">Have a quick question?</p>143 <button class="mt-2 bg-[#FF9900] text-black px-4 py-2 rounded-md text-sm font-medium hover:bg-orange-600 transition duration-300">144 Start Live Chat145 </button>146 </div>147 </div>148 </div>149 150 <div class="mt-12">151 <h3 class="text-xl font-bold mb-4">Follow Us</h3>152 <div class="flex space-x-4">153 <a href="#" class="bg-gray-800 p-3 rounded-full hover:bg-[#FF9900] hover:text-black transition duration-300">154 <i data-feather="facebook"></i>155 </a>156 <a href="#" class="bg-gray-800 p-3 rounded-full hover:bg-[#FF9900] hover:text-black transition duration-300">157 <i data-feather="twitter"></i>158 </a>159 <a href="#" class="bg-gray-800 p-3 rounded-full hover:bg-[#FF9900] hover:text-black transition duration-300">160 <i data-feather="linkedin"></i>161 </a>162 <a href="#" class="bg-gray-800 p-3 rounded-full hover:bg-[#FF9900] hover:text-black transition duration-300">163 <i data-feather="instagram"></i>164 </a>165 </div>166 </div>167 168 <div class="mt-12 bg-black bg-opacity-50 p-6 rounded-xl">169 <h3 class="text-lg font-bold mb-3">Looking for immediate help?</h3>170 <p class="text-gray-400 mb-4">Check out our comprehensive <a href="services.html" class="text-[#FF9900] hover:underline">services page</a> for solutions to common Amazon seller challenges.</p>171 <a href="services.html" class="inline-block bg-[#FF9900] text-black px-6 py-2 rounded-md font-medium hover:bg-orange-600 transition duration-300">Explore Services</a>172 </div>173 </div>174 </div>175 </div>176 177 <!-- Map Section -->178 <div class="bg-black py-12">179 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">180 <h2 class="text-2xl md:text-3xl font-bold text-center mb-12">Our Location</h2>181 <div class="bg-gray-900 rounded-xl overflow-hidden">182 <!-- Placeholder for map -->183 <div class="h-96 w-full flex items-center justify-center bg-gray-800">184 <div class="text-center">185 <i data-feather="map-pin" class="text-[#FF9900] w-12 h-12 mx-auto mb-4"></i>186 <p class="text-gray-400">We serve Amazon sellers globally</p>187 <p class="text-gray-400 mt-2">Headquarters: New York, NY</p>188 </div>189 </div>190 </div>191 </div>192 </div>193 194 <!-- Footer -->195 <footer class="bg-black py-12">196 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">197 <div class="grid grid-cols-1 md:grid-cols-4 gap-8">198 <div class="md:col-span-2">199 <h3 class="text-2xl font-bold mb-4">TWINORY</h3>200 <p class="text-gray-400">Amazon Seller Growth & Compliance Solutions.</p>201 <div class="flex space-x-4 mt-4">202 <a href="#" class="text-gray-400 hover:text-white">203 <i data-feather="facebook"></i>204 </a>205 <a href="#" class="text-gray-400 hover:text-white">206 <i data-feather="twitter"></i>207 </a>208 <a href="#" class="text-gray-400 hover:text-white">209 <i data-feather="linkedin"></i>210 </a>211 <a href="#" class="text-gray-400 hover:text-white">212 <i data-feather="instagram"></i>213 </a>214 </div>215 </div>216 <div>217 <h4 class="text-white font-bold mb-4">Quick Links</h4>218 <ul class="space-y-2">219 <li><a href="index.html" class="text-gray-400 hover:text-white">Home</a></li>220 <li><a href="about.html" class="text-gray-400 hover:text-white">About</a></li>221 <li><a href="services.html" class="text-gray-400 hover:text-white">Services</a></li>222 <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>223</ul>224 </div>225 <div>226 <h4 class="text-white font-bold mb-4">Legal</h4>227 <ul class="space-y-2">228 <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li>229 <li><a href="#" class="text-gray-400 hover:text-white">Terms of Service</a></li>230 <li><a href="#" class="text-gray-400 hover:text-white">Cookie Policy</a></li>231 </ul>232 </div>233 </div>234 <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">235 <p>© 2023 TWINORY LLC. All rights reserved.</p>236 </div>237 </div>238 </footer>239 240 <script>241 feather.replace();242 243 // Simple form submission handler244 document.getElementById('contactForm').addEventListener('submit', function(e) {245 e.preventDefault();246 247 // Here you would typically send the form data to a server248 // For this example, we'll just show the success message249 document.getElementById('formSuccess').classList.remove('hidden');250 document.getElementById('contactForm').reset();251 252 // Hide success message after 5 seconds253 setTimeout(function() {254 document.getElementById('formSuccess').classList.add('hidden');255 }, 5000);256 });257 </script>258</body>259</html>260