🤖
BotCompanion
Home
Product
About
Support
Buy Now
Home
Product
About
Support
Buy Now
<!-- Hero Section --> <section class="section-dark text-white py-32"> <div class="container mx-auto px-6 text-center"> <span class="text-8xl animate-float inline-block mb-8">🤖</span> <h1 class="text-5xl md:text-6xl font-black mb-6"> BotCompanion Gen 4 </h1> <p class="text-xl text-gray-300 mb-8 max-w-3xl mx-auto"> The most advanced AI desktop companion ever created. Experience the future of personal AI assistance. </p> <div class="flex items-center justify-center space-x-4"> <div class="flex items-center space-x-1"> <i class="fas fa-star text-yellow-400"></i> <i class="fas fa-star text-yellow-400"></i> <i class="fas fa-star text-yellow-400"></i> <i class="fas fa-star text-yellow-400"></i> <i class="fas fa-star text-yellow-400"></i> </div> <span class="text-gray-400">4.9/5 from 2,500+ reviews</span> </div> </div> </section> <!-- Pricing Section --> <section id="pricing" class="py-20 bg-gray-50"> <div class="container mx-auto px-6"> <div class="text-center mb-16"> <h2 class="text-4xl md:text-5xl font-black text-gray-900 mb-4"> Choose Your Plan </h2> <p class="text-xl text-gray-600"> One-time purchase. Lifetime access. No subscriptions. </p> </div> <div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto"> <!-- Starter Plan --> <div class="card rounded-2xl p-8"> <div class="text-center mb-6"> <div class="text-5xl mb-4">🌟</div> <h3 class="text-2xl font-bold text-gray-900 mb-2">Starter</h3> <div class="text-4xl font-black text-gray-900 mb-2">$199</div> <p class="text-gray-600">One-time payment</p> </div> <ul class="space-y-3 mb-8"> <li class="flex items-start space-x-2 text-gray-700"> <i class="fas fa-check text-blue-600 mt-1"></i> <span>Basic AI assistant</span> </li> <li class="flex items-start space-x-2 text-gray-700"> <i class="fas fa-check text-blue-600 mt-1"></i> <span>Text conversations</span> </li> <li class="flex items-start space-x-2 text-gray-700"> <i class="fas fa-check text-blue-600 mt-1"></i> <span>Task management</span> </li> <li class="flex items-start space-x-2 text-gray-700"> <i class="fas fa-check text-blue-600 mt-1"></i> <span>Calendar integration</span> </li> <li class="flex items-start space-x-2 text-gray-700"> <i class="fas fa-check text-blue-600 mt-1"></i> <span>Email support</span> </li> </ul> <button onclick="handleOrder('starter')" class="w-full btn-outline text-gray-900 py-3 rounded-lg font-bold hover:text-white"> Get Starter </button> </div> <!-- Pro Plan (Featured) --> <div class="relative card rounded-2xl p-8 border-2 border-blue-600 shadow-xl"> <div class="absolute -top-4 left-1/2 transform -translate-x-1/2 bg-blue-600 text-white px-6 py-1 rounded-full font-bold text-sm"> MOST POPULAR </div> <div class="text-center mb-6"> <div class="text-5xl mb-4">⭐</div> <h3 class="text-2xl font-bold text-gray-900 mb-2">Pro</h3> <div class="text-4xl font-black text-gray-900 mb-2">$299</div> <p class="text-gray-600">One-time payment</p> </div> <ul class="space-y-3 mb-8"> <li class="flex items-start space-x-2 text-gray-700"> <i class="fas fa-check text-blue-600 mt-1"></i> <span><strong>Everything in Starter, plus:</strong></span> </li> <li class="flex items-start space-x-2 text-gray-700"> <i class="fas fa-check text-blue-600 mt-1"></i> <span>Advanced AI models</span> </li> <li class="flex items-start space-x-2 text-gray-700"> <i class="fas fa-check text-blue-600 mt-1"></i> <span>Voice conversations</span> </li> <li class="flex items-start space-x-2 text-gray-700"> <i class="fas fa-check text-blue-600 mt-1"></i> <span>Custom personalities</span> </li> <li class="flex items-start space-x-2 text-gray-700"> <i class="fas fa-check text-blue-600 mt-1"></i> <span>Screen awareness</span> </li> <li class="flex items-start space-x-2 text-gray-700"> <i class="fas fa-check text-blue-600 mt-1"></i> <span>Priority support</span> </li> <li class="flex items-start space-x-2 text-gray-700"> <i class="fas fa-check text-blue-600 mt-1"></i> <span>Lifetime updates</span> </li> </ul> <button onclick="handleOrder('pro')" class="w-full btn-primary text-white py-3 rounded-lg font-bold"> Get Pro </button> </div> <!-- Enterprise Plan --> <div class="card rounded-2xl p-8"> <div class="text-center mb-6"> <div class="text-5xl mb-4">🚀</div> <h3 class="text-2xl font-bold text-gray-900 mb-2">Enterprise</h3> <div class="text-4xl font-black text-gray-900 mb-2">$499</div> <p class="text-gray-600">One-time payment</p> </div> <ul class="space-y-3 mb-8"> <li class="flex items-start space-x-2 text-gray-700"> <i class="fas fa-check text-blue-600 mt-1"></i> <span><strong>Everything in Pro, plus:</strong></span> </li> <li class="flex items-start space-x-2 text-gray-700"> <i class="fas fa-check text-blue-600 mt-1"></i> <span>Team collaboration</span> </li> <li class="flex items-start space-x-2 text-gray-700"> <i class="fas fa-check text-blue-600 mt-1"></i> <span>API access</span> </li> <li class="flex items-start space-x-2 text-gray-700"> <i class="fas fa-check text-blue-600 mt-1"></i> <span>Custom integrations</span> </li> <li class="flex items-start space-x-2 text-gray-700"> <i class="fas fa-check text-blue-600 mt-1"></i> <span>White-label option</span> </li> <li class="flex items-start space-x-2 text-gray-700"> <i class="fas fa-check text-blue-600 mt-1"></i> <span>Dedicated support</span> </li> </ul> <button onclick="handleOrder('enterprise')" class="w-full btn-outline text-gray-900 py-3 rounded-lg font-bold hover:text-white"> Get Enterprise </button> </div> </div> <div class="text-center mt-12"> <p class="text-gray-600"> ✓ 30-day money-back guarantee • ✓ Free shipping worldwide • ✓ Lifetime updates included </p> </div> </div> </section> <!-- Features Detail Section --> <section id="features" class="py-20 bg-white"> <div class="container mx-auto px-6"> <div class="text-center mb-16"> <h2 class="text-4xl md:text-5xl font-black text-gray-900 mb-4"> Powerful Features </h2> <p class="text-xl text-gray-600"> Everything you need in one intelligent companion </p> </div> <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> <div class="card rounded-2xl p-6"> <div class="text-4xl mb-3 text-blue-600">🎤</div> <h3 class="text-xl font-bold text-gray-900 mb-2">Voice Interaction</h3> <p class="text-gray-600">Natural voice conversations with advanced speech recognition and text-to-speech.</p> </div> <div class="card rounded-2xl p-6"> <div class="text-4xl mb-3 text-blue-600">👁️</div> <h3 class="text-xl font-bold text-gray-900 mb-2">Screen Awareness</h3> <p class="text-gray-600">Understands what's on your screen to provide context-aware assistance.</p> </div> <div class="card rounded-2xl p-6"> <div class="text-4xl mb-3 text-blue-600">📝</div> <h3 class="text-xl font-bold text-gray-900 mb-2">Smart Writing</h3> <p class="text-gray-600">Draft emails, documents, and content with AI-powered writing assistance.</p> </div> <div class="card rounded-2xl p-6"> <div class="text-4xl mb-3 text-blue-600">📅</div> <h3 class="text-xl font-bold text-gray-900 mb-2">Calendar Sync</h3> <p class="text-gray-600">Manage your schedule, set reminders, and never miss important events.</p> </div> <div class="card rounded-2xl p-6"> <div class="text-4xl mb-3 text-blue-600">🔍</div> <h3 class="text-xl font-bold text-gray-900 mb-2">Smart Search</h3> <p class="text-gray-600">Find files, information, and answers instantly across your system.</p> </div> <div class="card rounded-2xl p-6"> <div class="text-4xl mb-3 text-blue-600">🎨</div> <h3 class="text-xl font-bold text-gray-900 mb-2">Customizable</h3> <p class="text-gray-600">Choose from multiple themes, personalities, and interaction styles.</p> </div> </div> </div> </section> <!-- Technical Specs --> <section id="specs" class="py-20 bg-gray-50"> <div class="container mx-auto px-6"> <div class="text-center mb-16"> <h2 class="text-4xl md:text-5xl font-black text-gray-900 mb-4"> Technical Specifications </h2> </div> <div class="max-w-4xl mx-auto card rounded-2xl p-8"> <div class="grid md:grid-cols-2 gap-8"> <div> <h3 class="text-xl font-bold text-gray-900 mb-4">System Requirements</h3> <ul class="space-y-2 text-gray-700"> <li>• Windows 10/11, macOS 12+, or Linux</li> <li>• 8GB RAM minimum (16GB recommended)</li> <li>• 2GB free disk space</li> <li>• Internet connection for online features</li> <li>• Microphone for voice features</li> </ul> </div> <div> <h3 class="text-xl font-bold text-gray-900 mb-4">AI Capabilities</h3> <ul class="space-y-2 text-gray-700"> <li>• GPT-4 level language understanding</li> <li>• Multi-language support (50+ languages)</li> <li>• Context memory up to 100K tokens</li> <li>• Real-time response generation</li> <li>• Continuous learning from interactions</li> </ul> </div> </div> </div> </div> </section> <!-- Order Modal --> <div id="orderModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"> <div class="bg-white rounded-2xl p-8 max-w-md w-full"> <div class="text-center mb-6"> <div class="text-6xl mb-4">🎉</div> <h3 class="text-3xl font-bold text-gray-900 mb-2">Complete Your Order</h3> <p class="text-gray-600">Fill in your details to proceed</p> </div> <form id="orderForm" class="space-y-4"> <input type="hidden" id="orderPlan" name="plan"> <div> <label class="block text-gray-900 font-medium mb-2">Full Name</label> <input type="text" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="John Doe"> </div> <div> <label class="block text-gray-900 font-medium mb-2">Email</label> <input type="email" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="john@example.com"> </div> <div> <label class="block text-gray-900 font-medium mb-2">Phone (optional)</label> <input type="tel" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="+1 234 567 8900"> </div> <div class="pt-4"> <button type="submit" class="w-full btn-primary text-white py-3 rounded-lg font-bold mb-3"> Continue to Payment </button> <button type="button" onclick="closeOrderModal()" class="w-full bg-gray-200 text-gray-700 py-3 rounded-lg font-bold hover:bg-gray-300 transition"> Cancel </button> </div> </form> </div> </div> <script> function handleOrder(plan) { const prices = { starter: '$199', pro: '$299', enterprise: '$499' }; document.getElementById('orderPlan').value = plan + ' - ' + prices[plan]; document.getElementById('orderModal').classList.remove('hidden'); } function closeOrderModal() { document.getElementById('orderModal').classList.add('hidden'); } document.getElementById('orderForm').addEventListener('submit', async (e) => { e.preventDefault(); const formData = new FormData(e.target); const data = Object.fromEntries(formData); try { const response = await axios.post('/api/order', data); if (response.data.success) { alert(response.data.message + '\n\nOrder ID: ' + response.data.orderId + '\n\nWe will send payment instructions to your email shortly.'); closeOrderModal(); e.target.reset(); } } catch (error) { alert('Error submitting order. Please try again.'); } }); document.getElementById('orderModal').addEventListener('click', (e) => { if (e.target.id === 'orderModal') { closeOrderModal(); } }); </script>