Support - BotCompanion

<section class="py-20 bg-white"> <div class="container mx-auto px-6 py-20"> <div class="max-w-4xl mx-auto"> <div class="text-center mb-16"> <h1 class="text-5xl md:text-6xl font-black text-white mb-6"> How Can We Help? </h1> <p class="text-xl text-gray-700"> Get support from our team or explore our resources </p> </div>  <div class="grid md:grid-cols-3 gap-6 mb-16"> <a href="#faq" class="glass rounded-2xl p-6 text-center card-hover"> <div class="text-5xl mb-4">❓</div> <h3 class="text-xl font-bold text-gray-900 mb-2">FAQs</h3> <p class="text-gray-600">Find quick answers</p> </a> <a href="#guides" class="glass rounded-2xl p-6 text-center card-hover"> <div class="text-5xl mb-4">📚</div> <h3 class="text-xl font-bold text-gray-900 mb-2">Guides</h3> <p class="text-gray-600">Learn how to use</p> </a> <a href="#contact" class="glass rounded-2xl p-6 text-center card-hover"> <div class="text-5xl mb-4">💬</div> <h3 class="text-xl font-bold text-gray-900 mb-2">Contact Us</h3> <p class="text-gray-600">Get in touch</p> </a> </div>  <div id="faq" class="mb-16"> <h2 class="text-3xl font-bold text-gray-900 mb-8 text-center"> Frequently Asked Questions </h2> <div class="space-y-4"> <details class="glass rounded-2xl p-6"> <summary class="text-xl font-bold text-gray-900 cursor-pointer">How do I install BotCompanion?</summary> <p class="text-gray-600 mt-4">Download the installer from your account dashboard after purchase. Run the installer and follow the on-screen instructions. The setup takes about 2-3 minutes.</p> </details> <details class="glass rounded-2xl p-6"> <summary class="text-xl font-bold text-gray-900 cursor-pointer">How do I activate voice features?</summary> <p class="text-gray-600 mt-4">Go to Settings > Voice > Enable Voice Input. Make sure your microphone permissions are granted. You can customize voice settings including language and accent.</p> </details> <details class="glass rounded-2xl p-6"> <summary class="text-xl font-bold text-gray-900 cursor-pointer">Can I customize the bot's personality?</summary> <p class="text-gray-600 mt-4">Yes! Pro and Enterprise users can customize personality traits, communication style, and even give your bot a custom name in Settings > Personality.</p> </details> <details class="glass rounded-2xl p-6"> <summary class="text-xl font-bold text-gray-900 cursor-pointer">How do I reset my bot?</summary> <p class="text-gray-600 mt-4">Go to Settings > Advanced > Reset. You can choose to reset conversation history, settings, or perform a complete reset.</p> </details> <details class="glass rounded-2xl p-6"> <summary class="text-xl font-bold text-gray-900 cursor-pointer">What should I do if the bot isn't responding?</summary> <p class="text-gray-600 mt-4">First, check your internet connection if using online features. Try restarting the application. If the issue persists, contact support with your error logs.</p> </details> <details class="glass rounded-2xl p-6"> <summary class="text-xl font-bold text-gray-900 cursor-pointer">How do I update to the latest version?</summary> <p class="text-gray-600 mt-4">Updates are automatic by default. You'll receive a notification when an update is available. You can also check manually in Settings > About > Check for Updates.</p> </details> </div> </div>  <div id="guides" class="mb-16"> <h2 class="text-3xl font-bold text-gray-900 mb-8 text-center"> Getting Started Guides </h2> <div class="grid md:grid-cols-2 gap-6"> <div class="glass rounded-2xl p-6"> <h3 class="text-xl font-bold text-gray-900 mb-3"> <i class="fas fa-play-circle mr-2"></i> Quick Start Guide </h3> <p class="text-gray-600 mb-4"> Learn the basics and get up and running in 5 minutes. </p> <ul class="space-y-2 text-gray-600 text-sm"> <li>• Installation and setup</li> <li>• First conversation</li> <li>• Basic commands</li> <li>• Keyboard shortcuts</li> </ul> </div> <div class="glass rounded-2xl p-6"> <h3 class="text-xl font-bold text-gray-900 mb-3"> <i class="fas fa-microphone mr-2"></i> Voice Setup Guide </h3> <p class="text-gray-600 mb-4"> Configure voice input and output for hands-free operation. </p> <ul class="space-y-2 text-gray-600 text-sm"> <li>• Microphone configuration</li> <li>• Voice commands</li> <li>• Custom wake words</li> <li>• Troubleshooting audio</li> </ul> </div> <div class="glass rounded-2xl p-6"> <h3 class="text-xl font-bold text-gray-900 mb-3"> <i class="fas fa-cog mr-2"></i> Advanced Features </h3> <p class="text-gray-600 mb-4"> Unlock the full potential with advanced settings. </p> <ul class="space-y-2 text-gray-600 text-sm"> <li>• Custom integrations</li> <li>• API access</li> <li>• Automation workflows</li> <li>• Screen awareness setup</li> </ul> </div> <div class="glass rounded-2xl p-6"> <h3 class="text-xl font-bold text-gray-900 mb-3"> <i class="fas fa-shield-alt mr-2"></i> Privacy & Security </h3> <p class="text-gray-600 mb-4"> Understand how we protect your data and privacy. </p> <ul class="space-y-2 text-gray-600 text-sm"> <li>• Data encryption</li> <li>• Local vs cloud processing</li> <li>• Privacy settings</li> <li>• Data export & deletion</li> </ul> </div> </div> </div>  <div id="contact" class="card rounded-2xl p-8 md:p-12"> <div class="text-center mb-8"> <h2 class="text-3xl font-bold text-gray-900 mb-4"> Still Need Help? </h2> <p class="text-gray-600"> Send us a message and we'll get back to you within 24 hours </p> </div> <form id="contactForm" class="max-w-2xl mx-auto space-y-6"> <div class="grid md:grid-cols-2 gap-6"> <div> <label class="block text-white font-medium mb-2">Name</label> <input type="text" name="name" required class="w-full px-4 py-3 rounded-lg bg-white bg-opacity-20 border border-white border-opacity-30 text-white placeholder-white placeholder-opacity-50 focus:outline-none focus:ring-2 focus:ring-white" placeholder="Your name"> </div> <div> <label class="block text-white font-medium mb-2">Email</label> <input type="email" name="email" required class="w-full px-4 py-3 rounded-lg bg-white bg-opacity-20 border border-white border-opacity-30 text-white placeholder-white placeholder-opacity-50 focus:outline-none focus:ring-2 focus:ring-white" placeholder="your@email.com"> </div> </div> <div> <label class="block text-white font-medium mb-2">Subject</label> <select name="subject" required class="w-full px-4 py-3 rounded-lg bg-white bg-opacity-20 border border-white border-opacity-30 text-white focus:outline-none focus:ring-2 focus:ring-white"> <option value="">Select a topic</option> <option value="technical">Technical Support</option> <option value="billing">Billing & Payments</option> <option value="feature">Feature Request</option> <option value="bug">Bug Report</option> <option value="other">Other</option> </select> </div> <div> <label class="block text-white font-medium mb-2">Message</label> <textarea name="message" required rows="5" class="w-full px-4 py-3 rounded-lg bg-white bg-opacity-20 border border-white border-opacity-30 text-white placeholder-white placeholder-opacity-50 focus:outline-none focus:ring-2 focus:ring-white" placeholder="How can we help you?"></textarea> </div> <button type="submit" class="w-full btn-primary text-white py-4 rounded-lg font-bold text-lg"> Send Message </button> </form> </div>  <div class="grid md:grid-cols-3 gap-6 mt-16"> <div class="glass rounded-2xl p-6 text-center"> <i class="fas fa-envelope text-4xl text-white mb-3"></i> <h3 class="text-lg font-bold text-white mb-2">Email Support</h3> <p class="text-gray-600 text-sm mb-3">support@botcompanion.com</p> <p class="text-white opacity-60 text-xs">Response within 24 hours</p> </div> <div class="glass rounded-2xl p-6 text-center"> <i class="fas fa-comments text-4xl text-white mb-3"></i> <h3 class="text-lg font-bold text-white mb-2">Community Forum</h3> <p class="text-gray-600 text-sm mb-3">forum.botcompanion.com</p> <p class="text-white opacity-60 text-xs">Get help from the community</p> </div> <div class="glass rounded-2xl p-6 text-center"> <i class="fas fa-book text-4xl text-white mb-3"></i> <h3 class="text-lg font-bold text-white mb-2">Documentation</h3> <p class="text-gray-600 text-sm mb-3">docs.botcompanion.com</p> <p class="text-white opacity-60 text-xs">Detailed technical guides</p> </div> </div> </div> </div> </section> <script> document.getElementById('contactForm').addEventListener('submit', async (e) => { e.preventDefault(); const formData = new FormData(e.target); const data = Object.fromEntries(formData); try { const response = await axios.post('/api/contact', data); if (response.data.success) { alert(response.data.message); e.target.reset(); } } catch (error) { alert('Error sending message. Please try again or email us directly.'); } }); </script>