File size: 10,406 Bytes
c46f0fa | 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 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us - SMM Panel</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.contact-card {
transition: all 0.3s ease;
}
.contact-card:hover {
transform: translateY(-3px);
}
</style>
</head>
<body class="bg-gray-100">
<!-- Navigation -->
<nav class="bg-indigo-700 text-white p-4 shadow-lg">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center space-x-2">
<i class="fas fa-rocket text-2xl"></i>
<h1 class="text-2xl font-bold">SMM Panel</h1>
</div>
<div class="hidden md:flex space-x-6">
<a href="index.html" class="hover:text-indigo-200 font-medium">Home</a>
<a href="services.html" class="hover:text-indigo-200 font-medium">Services</a>
<a href="pricing.html" class="hover:text-indigo-200 font-medium">Pricing</a>
<a href="api.html" class="hover:text-indigo-200 font-medium">API</a>
<a href="#" class="hover:text-indigo-200 font-medium">Contact</a>
</div>
<div class="flex items-center space-x-4">
<a href="login.html" class="bg-white text-indigo-700 px-4 py-2 rounded font-medium hover:bg-indigo-100 transition">Login</a>
<a href="register.html" class="bg-indigo-600 text-white px-4 py-2 rounded font-medium hover:bg-indigo-800 transition">Register</a>
</div>
</div>
</nav>
<!-- Contact Header -->
<section class="bg-gradient-to-r from-indigo-700 to-purple-600 text-white py-16">
<div class="container mx-auto px-4 text-center">
<h1 class="text-4xl font-bold mb-4">Contact Us</h1>
<p class="text-xl max-w-3xl mx-auto">We're here to help with any questions or issues you may have</p>
</div>
</section>
<!-- Contact Methods -->
<section class="container mx-auto px-4 py-16">
<div class="grid md:grid-cols-3 gap-8">
<div class="contact-card bg-white p-8 rounded-lg shadow-sm text-center">
<div class="bg-indigo-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">
<i class="fas fa-envelope text-indigo-700 text-2xl"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Email Support</h3>
<p class="text-gray-600 mb-4">For general inquiries and support</p>
<a href="mailto:support@smmpanel.com" class="text-indigo-700 font-medium hover:text-indigo-900">support@smmpanel.com</a>
</div>
<div class="contact-card bg-white p-8 rounded-lg shadow-sm text-center">
<div class="bg-indigo-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">
<i class="fas fa-headset text-indigo-700 text-2xl"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Live Chat</h3>
<p class="text-gray-600 mb-4">Available 24/7 for immediate assistance</p>
<button class="bg-indigo-700 text-white px-6 py-2 rounded font-medium hover:bg-indigo-800 transition">Start Chat</button>
</div>
<div class="contact-card bg-white p-8 rounded-lg shadow-sm text-center">
<div class="bg-indigo-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">
<i class="fas fa-file-alt text-indigo-700 text-2xl"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Help Center</h3>
<p class="text-gray-600 mb-4">Browse our documentation and FAQs</p>
<a href="#" class="text-indigo-700 font-medium hover:text-indigo-900">Visit Help Center</a>
</div>
</div>
</section>
<!-- Contact Form -->
<section class="bg-white py-16">
<div class="container mx-auto px-4 max-w-4xl">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-gray-800 mb-4">Send Us a Message</h2>
<p class="text-gray-600 max-w-2xl mx-auto">Fill out the form below and we'll get back to you as soon as possible</p>
</div>
<form class="space-y-6">
<div class="grid md:grid-cols-2 gap-6">
<div>
<label for="name" class="block text-sm font-medium text-gray-700 mb-1">Your Name</label>
<input type="text" id="name" name="name" class="w-full px-4 py-2 border border-gray-300 rounded focus:ring-indigo-500 focus:border-indigo-500">
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
<input type="email" id="email" name="email" class="w-full px-4 py-2 border border-gray-300 rounded focus:ring-indigo-500 focus:border-indigo-500">
</div>
</div>
<div>
<label for="subject" class="block text-sm font-medium text-gray-700 mb-1">Subject</label>
<input type="text" id="subject" name="subject" class="w-full px-4 py-2 border border-gray-300 rounded focus:ring-indigo-500 focus:border-indigo-500">
</div>
<div>
<label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label>
<textarea id="message" name="message" rows="5" class="w-full px-4 py-2 border border-gray-300 rounded focus:ring-indigo-500 focus:border-indigo-500"></textarea>
</div>
<div>
<button type="submit" class="w-full bg-indigo-700 text-white py-3 rounded font-medium hover:bg-indigo-800 transition">Send Message</button>
</div>
</form>
</div>
</section>
<!-- FAQ Section -->
<section class="bg-gray-50 py-16">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-gray-800 mb-4">Frequently Asked Questions</h2>
<p class="text-gray-600 max-w-2xl mx-auto">Common questions and answers about our services</p>
</div>
<div class="max-w-3xl mx-auto space-y-4">
<div class="bg-white p-6 rounded-lg shadow-sm">
<h3 class="text-lg font-semibold mb-2">How long does it take to receive support?</h3>
<p class="text-gray-600">Our support team typically responds within 1-2 hours during business hours. For urgent issues, we recommend using our live chat feature.</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm">
<h3 class="text-lg font-semibold mb-2">What payment methods do you accept?</h3>
<p class="text-gray-600">We accept all major credit cards, PayPal, and cryptocurrencies (Bitcoin, Ethereum, USDT).</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm">
<h3 class="text-lg font-semibold mb-2">Can I cancel my order?</h3>
<p class="text-gray-600">Orders can be cancelled within 1 hour of placement if they haven't started processing yet. Please contact support immediately if you need to cancel.</p>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-12">
<div class="container mx-auto px-4">
<div class="grid md:grid-cols-4 gap-8">
<div>
<h3 class="text-xl font-bold mb-4">SMM Panel</h3>
<p class="text-gray-400">The best social media marketing services for growing your online presence.</p>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Quick Links</h4>
<ul class="space-y-2">
<li><a href="index.html" class="text-gray-400 hover:text-white transition">Home</a></li>
<li><a href="services.html" class="text-gray-400 hover:text-white transition">Services</a></li>
<li><a href="pricing.html" class="text-gray-400 hover:text-white transition">Pricing</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Legal</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Refund Policy</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Connect With Us</h4>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-telegram"></i></a>
</div>
</div>
</div>
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
<p>© 2023 SMM Panel. All rights reserved.</p>
</div>
</div>
</footer>
</body>
</html> |