File size: 14,519 Bytes
c349726 e6c9053 e7ad23e a2cc257 c349726 a7f4191 edb588a c349726 cae20ba c349726 | 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 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Twinory | Amazon Seller Experts</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Montserrat:wght@700;800&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Poppins', sans-serif;
color: #FFFFFF;
background-color: #0D0D0D;
}
h1, h2, h3 {
font-family: 'Montserrat', sans-serif;
}
.hero-bg {
background: linear-gradient(135deg, #1A1A1A 0%, #0D0D0D 100%);
}
.input-field {
background-color: #1A1A1A;
border: 1px solid #333333;
}
.input-field:focus {
border-color: #FF9900;
box-shadow: 0 0 0 2px rgba(255, 153, 0, 0.2);
}
</style>
</head>
<body class="min-h-screen">
<!-- Navigation -->
<nav class="fixed w-full z-50 bg-black bg-opacity-90 border-b border-gray-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0 flex items-center">
<img src="https://huggingface.co/spaces/Twinory/undefined/resolve/main/images/TWINORY%20Logo%20-%20Edited.png" alt="Twinory Logo" class="h-8">
<span class="ml-2 text-sm text-[#FF9900]">Just list it, with perfection!</span>
</div>
</div>
<div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
<a href="index.html" class="text-gray-300 hover:text-white px-4 py-3 rounded-md text-base font-medium">Home</a>
<a href="about.html" class="text-gray-300 hover:text-white px-4 py-3 rounded-md text-base font-medium">About</a>
<a href="services.html" class="text-gray-300 hover:text-white px-4 py-3 rounded-md text-base font-medium">Services</a>
<a href="#" class="text-white px-4 py-3 rounded-md text-base font-medium hover:text-orange-400">Contact</a>
<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>
</div>
<div class="-mr-2 flex items-center md:hidden">
<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">
<span class="sr-only">Open main menu</span>
<i data-feather="menu"></i>
</button>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<div class="hero-bg pt-32 pb-20 md:pt-40 md:pb-32">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">
GET IN TOUCH
</h1>
<p class="text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto">
Ready to grow your Amazon business? Let's talk about how we can help.
</p>
</div>
</div>
<!-- Contact Form -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
<div class="bg-gray-900 rounded-xl p-8 lg:p-12">
<h2 class="text-2xl md:text-3xl font-bold mb-8">Send Us a Message</h2>
<form id="contactForm" class="space-y-6">
<div>
<label for="fullName" class="block text-sm font-medium text-gray-400 mb-2">Full Name</label>
<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]">
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-400 mb-2">Email Address</label>
<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]">
</div>
<div>
<label for="phone" class="block text-sm font-medium text-gray-400 mb-2">Phone Number (Optional)</label>
<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]">
</div>
<div>
<label for="business" class="block text-sm font-medium text-gray-400 mb-2">Business Name</label>
<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]">
</div>
<div>
<label for="message" class="block text-sm font-medium text-gray-400 mb-2">Your Message</label>
<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>
</div>
<div>
<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">
Send Message
</button>
</div>
</form>
<div id="formSuccess" class="hidden mt-6 p-4 bg-green-900 bg-opacity-50 rounded-md">
<div class="flex items-center">
<i data-feather="check-circle" class="text-green-400 mr-3"></i>
<p class="text-green-400">Thank you for your message! We'll get back to you shortly.</p>
</div>
</div>
</div>
<div class="bg-gray-900 rounded-xl p-8 lg:p-12">
<h2 class="text-2xl md:text-3xl font-bold mb-8">Contact Information</h2>
<div class="space-y-6">
<div class="flex items-start">
<div class="flex-shrink-0 bg-[#FF9900] bg-opacity-10 p-3 rounded-full">
<i data-feather="mail" class="text-[#FF9900] w-5 h-5"></i>
</div>
<div class="ml-4">
<h3 class="text-lg font-bold mb-1">Email Us</h3>
<p class="text-gray-400">info@twinory.com</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 bg-[#FF9900] bg-opacity-10 p-3 rounded-full">
<i data-feather="clock" class="text-[#FF9900] w-5 h-5"></i>
</div>
<div class="ml-4">
<h3 class="text-lg font-bold mb-1">Business Hours</h3>
<p class="text-gray-400">Monday - Saturday</p>
<p class="text-gray-400">9:00 AM - 6:00 PM EST</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 bg-[#FF9900] bg-opacity-10 p-3 rounded-full">
<i data-feather="message-square" class="text-[#FF9900] w-5 h-5"></i>
</div>
<div class="ml-4">
<h3 class="text-lg font-bold mb-1">Quick Chat</h3>
<p class="text-gray-400">Have a quick question?</p>
<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">
Start Live Chat
</button>
</div>
</div>
</div>
<div class="mt-12">
<h3 class="text-xl font-bold mb-4">Follow Us</h3>
<div class="flex space-x-4">
<a href="#" class="bg-gray-800 p-3 rounded-full hover:bg-[#FF9900] hover:text-black transition duration-300">
<i data-feather="facebook"></i>
</a>
<a href="#" class="bg-gray-800 p-3 rounded-full hover:bg-[#FF9900] hover:text-black transition duration-300">
<i data-feather="twitter"></i>
</a>
<a href="#" class="bg-gray-800 p-3 rounded-full hover:bg-[#FF9900] hover:text-black transition duration-300">
<i data-feather="linkedin"></i>
</a>
<a href="#" class="bg-gray-800 p-3 rounded-full hover:bg-[#FF9900] hover:text-black transition duration-300">
<i data-feather="instagram"></i>
</a>
</div>
</div>
<div class="mt-12 bg-black bg-opacity-50 p-6 rounded-xl">
<h3 class="text-lg font-bold mb-3">Looking for immediate help?</h3>
<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>
<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>
</div>
</div>
</div>
</div>
<!-- Map Section -->
<div class="bg-black py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-2xl md:text-3xl font-bold text-center mb-12">Our Location</h2>
<div class="bg-gray-900 rounded-xl overflow-hidden">
<!-- Placeholder for map -->
<div class="h-96 w-full flex items-center justify-center bg-gray-800">
<div class="text-center">
<i data-feather="map-pin" class="text-[#FF9900] w-12 h-12 mx-auto mb-4"></i>
<p class="text-gray-400">We serve Amazon sellers globally</p>
<p class="text-gray-400 mt-2">Headquarters: New York, NY</p>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-black py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div class="md:col-span-2">
<h3 class="text-2xl font-bold mb-4">TWINORY</h3>
<p class="text-gray-400">Amazon Seller Growth & Compliance Solutions.</p>
<div class="flex space-x-4 mt-4">
<a href="#" class="text-gray-400 hover:text-white">
<i data-feather="facebook"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i data-feather="twitter"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i data-feather="linkedin"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i data-feather="instagram"></i>
</a>
</div>
</div>
<div>
<h4 class="text-white font-bold mb-4">Quick Links</h4>
<ul class="space-y-2">
<li><a href="index.html" class="text-gray-400 hover:text-white">Home</a></li>
<li><a href="about.html" class="text-gray-400 hover:text-white">About</a></li>
<li><a href="services.html" class="text-gray-400 hover:text-white">Services</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-bold mb-4">Legal</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Terms of Service</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Cookie Policy</a></li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
<p>© 2023 TWINORY LLC. All rights reserved.</p>
</div>
</div>
</footer>
<script>
feather.replace();
// Simple form submission handler
document.getElementById('contactForm').addEventListener('submit', function(e) {
e.preventDefault();
// Here you would typically send the form data to a server
// For this example, we'll just show the success message
document.getElementById('formSuccess').classList.remove('hidden');
document.getElementById('contactForm').reset();
// Hide success message after 5 seconds
setTimeout(function() {
document.getElementById('formSuccess').classList.add('hidden');
}, 5000);
});
</script>
</body>
</html>
|