File size: 12,287 Bytes
d219551 62075a5 d219551 62075a5 d219551 | 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 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact | QuantumCart</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
}
.contact-card {
transition: all 0.3s ease;
}
.contact-card:hover {
transform: translateY(-5px);
}
</style>
</head>
<body class="bg-gray-50">
<!-- Navigation -->
<nav class="bg-white shadow-sm py-4 sticky top-0 z-50">
<div class="container mx-auto px-4 md:px-6 flex justify-between items-center">
<div class="flex items-center space-x-2">
<i data-feather="shopping-cart" class="text-purple-600 h-6 w-6"></i>
<span class="text-xl font-bold bg-gradient-to-r from-purple-600 to-indigo-600 bg-clip-text text-transparent">QuantumCart</span>
</div>
<div class="hidden md:flex space-x-8">
<a href="index.html" class="text-gray-600 hover:text-purple-600 transition">Home</a>
<a href="features.html" class="text-gray-600 hover:text-purple-600 transition">Features</a>
<a href="pricing.html" class="text-gray-600 hover:text-purple-600 transition">Pricing</a>
<a href="blog.html" class="text-gray-600 hover:text-purple-600 transition">Blog</a>
<a href="contact.html" class="text-purple-600 font-medium transition">Contact</a>
</div>
<button class="md:hidden text-gray-600">
<i data-feather="menu"></i>
</button>
</div>
</nav>
<!-- Hero Section -->
<section class="bg-gradient-to-r from-purple-600 to-indigo-600 text-white py-20">
<div class="container mx-auto px-4 md:px-6 text-center">
<h1 class="text-4xl md:text-5xl font-bold mb-6">Get In <span class="bg-white text-purple-600 px-2 rounded-lg">Touch</span></h1>
<p class="text-xl max-w-3xl mx-auto opacity-90">
Have questions or need support? Our team is here to help you with anything you need.
</p>
</div>
</section>
<!-- Contact Section -->
<section class="py-16">
<div class="container mx-auto px-4 md:px-6">
<div class="grid md:grid-cols-2 gap-12">
<!-- Contact Form -->
<div class="bg-white p-8 rounded-xl shadow-sm">
<h2 class="text-2xl font-bold mb-6">Send us a message</h2>
<form class="space-y-6">
<div>
<label for="name" class="block text-sm font-medium text-gray-700 mb-1">Name</label>
<input type="text" id="name" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
<input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
</div>
<div>
<label for="subject" class="block text-sm font-medium text-gray-700 mb-1">Subject</label>
<select id="subject" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
<option>General Inquiry</option>
<option>Sales Question</option>
<option>Technical Support</option>
<option>Billing Question</option>
</select>
</div>
<div>
<label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label>
<textarea id="message" rows="5" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-purple-500 focus:border-purple-500"></textarea>
</div>
<button type="submit" class="w-full bg-purple-600 hover:bg-purple-700 text-white py-3 rounded-lg font-medium transition">
Send Message
</button>
</form>
</div>
<!-- Contact Info -->
<div>
<div class="space-y-8">
<!-- Contact Card 1 -->
<div class="contact-card bg-white p-8 rounded-xl shadow-sm">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mr-4">
<i data-feather="mail" class="text-purple-600 w-5 h-5"></i>
</div>
<h3 class="text-xl font-bold">Email Us</h3>
</div>
<p class="text-gray-600 mb-2">For general inquiries:</p>
<a href="mailto:info@quantumcart.com" class="text-purple-600 font-medium">info@quantumcart.com</a>
<p class="text-gray-600 mt-4 mb-2">For support:</p>
<a href="mailto:support@quantumcart.com" class="text-purple-600 font-medium">support@quantumcart.com</a>
</div>
<!-- Contact Card 2 -->
<div class="contact-card bg-white p-8 rounded-xl shadow-sm">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mr-4">
<i data-feather="phone" class="text-purple-600 w-5 h-5"></i>
</div>
<h3 class="text-xl font-bold">Call Us</h3>
</div>
<p class="text-gray-600 mb-2">Monday to Friday, 9am to 5pm EST</p>
<a href="tel:+18005551234" class="text-purple-600 font-medium">+1 (800) 555-1234</a>
</div>
<!-- Contact Card 3 -->
<div class="contact-card bg-white p-8 rounded-xl shadow-sm">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mr-4">
<i data-feather="map-pin" class="text-purple-600 w-5 h-5"></i>
</div>
<h3 class="text-xl font-bold">Visit Us</h3>
</div>
<p class="text-gray-600 mb-2">Our headquarters:</p>
<address class="not-italic">
<p>123 Tech Park Drive</p>
<p>San Francisco, CA 94107</p>
<p>United States</p>
</address>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ Section -->
<section class="py-16 bg-white">
<div class="container mx-auto px-4 md:px-6">
<h2 class="text-3xl font-bold text-center mb-12">Need Help <span class="text-purple-600">Faster?</span></h2>
<div class="max-w-4xl mx-auto space-y-6">
<div class="border border-gray-200 rounded-lg p-6">
<h3 class="text-xl font-medium mb-2">Check our knowledge base</h3>
<p class="text-gray-600 mb-4">We've compiled answers to the most common questions in our comprehensive knowledge base.</p>
<a href="#" class="inline-flex items-center text-purple-600 font-medium">
Visit Help Center
<i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
</a>
</div>
<div class="border border-gray-200 rounded-lg p-6">
<h3 class="text-xl font-medium mb-2">Join our community</h3>
<p class="text-gray-600 mb-4">Connect with other QuantumCart users and get help from our active community.</p>
<a href="#" class="inline-flex items-center text-purple-600 font-medium">
Join Community Forum
<i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
</a>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-gray-400 py-12">
<div class="container mx-auto px-4 md:px-6">
<div class="grid md:grid-cols-4 gap-8">
<div>
<div class="flex items-center space-x-2 mb-6">
<i data-feather="shopping-cart" class="text-purple-400 h-6 w-6"></i>
<span class="text-xl font-bold text-white">QuantumCart</span>
</div>
<p class="mb-6">The future of e-commerce automation and AI-powered shopping experiences.</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="twitter"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="linkedin"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="github"></i></a>
</div>
</div>
<div>
<h4 class="text-white font-medium mb-4">Product</h4>
<ul class="space-y-2">
<li><a href="features.html" class="hover:text-white transition">Features</a></li>
<li><a href="pricing.html" class="hover:text-white transition">Pricing</a></li>
<li><a href="#" class="hover:text-white transition">Roadmap</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-medium mb-4">Resources</h4>
<ul class="space-y-2">
<li><a href="#" class="hover:text-white transition">Documentation</a></li>
<li><a href="#" class="hover:text-white transition">API</a></li>
<li><a href="#" class="hover:text-white transition">Blog</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-medium mb-4">Company</h4>
<ul class="space-y-2">
<li><a href="#" class="hover:text-white transition">About</a></li>
<li><a href="contact.html" class="hover:text-white transition">Contact</a></li>
<li><a href="#" class="hover:text-white transition">Careers</a></li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
<p>© 2023 QuantumCart. All rights reserved.</p>
<div class="flex space-x-6 mt-4 md:mt-0">
<a href="#" class="hover:text-white transition">Privacy</a>
<a href="#" class="hover:text-white transition">Terms</a>
</div>
</div>
</div>
</footer>
<script>
feather.replace();
</script>
</body>
</html> |