Product

<section class="relative bg-gradient-to-br from-gray-900 via-blue-900 to-gray-900 text-white pt-32 pb-24 overflow-hidden"> <div class="absolute inset-0 opacity-10"> <div class="absolute inset-0" style="background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0); background-size: 40px 40px;"></div> </div> <div class="container mx-auto px-6 relative z-10"> <div class="max-w-4xl mx-auto text-center"> <div class="mb-8"> <span class="text-8xl inline-block animate-float">🤖</span> </div> <h1 class="text-5xl md:text-7xl font-black mb-6 leading-tight"> Meet Your New<br/> <span class="bg-gradient-to-r from-blue-400 to-blue-600 bg-clip-text text-transparent">AI Desktop Companion</span> </h1> <p class="text-xl md:text-2xl text-gray-300 mb-10 max-w-3xl mx-auto"> The intelligent assistant that understands your workflow, boosts productivity, and lives right on your desktop. </p> <div class="flex flex-col sm:flex-row gap-4 justify-center items-center"> <a href="/product" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-lg font-bold text-lg transition-all transform hover:scale-105 shadow-xl hover:shadow-2xl inline-flex items-center space-x-2"> <span>Get Started</span> <i class="fas fa-arrow-right"></i> </a> <a href="#features" class="border-2 border-white hover:bg-white hover:text-gray-900 text-white px-8 py-4 rounded-lg font-bold text-lg transition-all inline-flex items-center space-x-2"> <span>Learn More</span> <i class="fas fa-chevron-down"></i> </a> </div> <div class="mt-12 flex items-center justify-center space-x-6 text-sm text-gray-400"> <div class="flex items-center space-x-2"> <i class="fas fa-star text-yellow-400"></i> <span>4.9/5 Rating</span> </div> <div class="flex items-center space-x-2"> <i class="fas fa-users"></i> <span>10,000+ Users</span> </div> <div class="flex items-center space-x-2"> <i class="fas fa-shield-alt"></i> <span>100% Secure</span> </div> </div> </div> </div> </section>  <section id="features" class="py-24 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 max-w-2xl mx-auto"> Everything you need to supercharge your productivity </p> </div> <div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto"> <div class="bg-white border-2 border-gray-100 rounded-xl p-8 hover:border-blue-500 hover:shadow-xl transition-all"> <div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center mb-4"> <i class="fas fa-brain text-3xl text-blue-600"></i> </div> <h3 class="text-2xl font-bold text-gray-900 mb-3">Advanced AI</h3> <p class="text-gray-600"> Powered by GPT-4 level intelligence for natural conversations and smart assistance. </p> </div> <div class="bg-white border-2 border-gray-100 rounded-xl p-8 hover:border-blue-500 hover:shadow-xl transition-all"> <div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center mb-4"> <i class="fas fa-bolt text-3xl text-blue-600"></i> </div> <h3 class="text-2xl font-bold text-gray-900 mb-3">Lightning Fast</h3> <p class="text-gray-600"> Instant responses with seamless integration into your daily workflow. </p> </div> <div class="bg-white border-2 border-gray-100 rounded-xl p-8 hover:border-blue-500 hover:shadow-xl transition-all"> <div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center mb-4"> <i class="fas fa-lock text-3xl text-blue-600"></i> </div> <h3 class="text-2xl font-bold text-gray-900 mb-3">Privacy First</h3> <p class="text-gray-600"> Your data stays on your device. We never sell or share your information. </p> </div> <div class="bg-white border-2 border-gray-100 rounded-xl p-8 hover:border-blue-500 hover:shadow-xl transition-all"> <div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center mb-4"> <i class="fas fa-microphone text-3xl text-blue-600"></i> </div> <h3 class="text-2xl font-bold text-gray-900 mb-3">Voice Control</h3> <p class="text-gray-600"> Natural voice conversations with advanced speech recognition. </p> </div> <div class="bg-white border-2 border-gray-100 rounded-xl p-8 hover:border-blue-500 hover:shadow-xl transition-all"> <div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center mb-4"> <i class="fas fa-tasks text-3xl text-blue-600"></i> </div> <h3 class="text-2xl font-bold text-gray-900 mb-3">Task Management</h3> <p class="text-gray-600"> Organize tasks, set reminders, and manage your calendar effortlessly. </p> </div> <div class="bg-white border-2 border-gray-100 rounded-xl p-8 hover:border-blue-500 hover:shadow-xl transition-all"> <div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center mb-4"> <i class="fas fa-palette text-3xl text-blue-600"></i> </div> <h3 class="text-2xl font-bold text-gray-900 mb-3">Customizable</h3> <p class="text-gray-600"> Personalize appearance and personality to match your style. </p> </div> </div> </div> </section>  <section class="py-24 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"> Perfect For Everyone </h2> <p class="text-xl text-gray-600"> From professionals to students, BotCompanion adapts to your needs </p> </div> <div class="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto"> <div class="bg-white rounded-xl p-8 shadow-lg hover:shadow-xl transition-all"> <div class="text-5xl mb-4">💼</div> <h3 class="text-2xl font-bold text-gray-900 mb-3">For Professionals</h3> <p class="text-gray-600 mb-4"> Automate emails, schedule meetings, generate reports, and boost productivity with AI-powered efficiency. </p> </div> <div class="bg-white rounded-xl p-8 shadow-lg hover:shadow-xl transition-all"> <div class="text-5xl mb-4">🎓</div> <h3 class="text-2xl font-bold text-gray-900 mb-3">For Students</h3> <p class="text-gray-600 mb-4"> Get homework help, research assistance, essay writing support, and smart study scheduling. </p> </div> <div class="bg-white rounded-xl p-8 shadow-lg hover:shadow-xl transition-all"> <div class="text-5xl mb-4">🎨</div> <h3 class="text-2xl font-bold text-gray-900 mb-3">For Creators</h3> <p class="text-gray-600 mb-4"> Generate ideas, write content, plan projects, and unleash creativity with AI support. </p> </div> <div class="bg-white rounded-xl p-8 shadow-lg hover:shadow-xl transition-all"> <div class="text-5xl mb-4">🏠</div> <h3 class="text-2xl font-bold text-gray-900 mb-3">For Personal Use</h3> <p class="text-gray-600 mb-4"> Daily reminders, entertainment recommendations, and personal organization made simple. </p> </div> </div> </div> </section>  <section class="py-20 bg-white border-t border-gray-200"> <div class="container mx-auto px-6"> <div class="grid md:grid-cols-4 gap-8 text-center max-w-5xl mx-auto"> <div> <div class="text-5xl font-black text-gray-900 mb-2">10K+</div> <div class="text-lg text-gray-600">Active Users</div> </div> <div> <div class="text-5xl font-black text-gray-900 mb-2">4.9★</div> <div class="text-lg text-gray-600">User Rating</div> </div> <div> <div class="text-5xl font-black text-gray-900 mb-2">24/7</div> <div class="text-lg text-gray-600">Support</div> </div> <div> <div class="text-5xl font-black text-gray-900 mb-2">100%</div> <div class="text-lg text-gray-600">Privacy</div> </div> </div> </div> </section>  <section class="py-24 bg-gradient-to-br from-gray-900 via-blue-900 to-gray-900 text-white"> <div class="container mx-auto px-6"> <div class="max-w-3xl mx-auto text-center"> <h2 class="text-4xl md:text-5xl font-black mb-6"> Ready to Transform Your Productivity? </h2> <p class="text-xl text-gray-300 mb-10"> Join thousands of users who've already upgraded their desktop experience. </p> <a href="/product" class="bg-blue-600 hover:bg-blue-700 text-white px-10 py-4 rounded-lg font-bold text-lg transition-all transform hover:scale-105 shadow-xl hover:shadow-2xl inline-flex items-center space-x-2"> <span>Get Started Today</span> <i class="fas fa-arrow-right"></i> </a> <p class="text-gray-400 mt-8 text-sm"> 30-day money-back guarantee • Free shipping • Lifetime updates </p> </div> </div> </section>