| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Plans - ChemiCorr AI</title> |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.birds.min.js"></script> |
| </head> |
| <body class="bg-gray-50 font-sans"> |
| <div id="vanta-bg" class="fixed inset-0 z-0"></div> |
| <div class="relative z-10 min-h-screen flex flex-col"> |
| |
| <header class="bg-gradient-to-r from-blue-600 to-blue-800 text-white shadow-lg relative"> |
| <div class="container mx-auto px-4 py-6 flex justify-between items-center"> |
| <div class="flex items-center space-x-3"> |
| <i data-feather="flask" class="w-8 h-8 text-blue-200"></i> |
| <h1 class="text-2xl font-bold">ChemiCorr AI</h1> |
| </div> |
| <nav class="hidden md:flex space-x-6"> |
| <a href="index.html" class="hover:text-blue-200 transition">Home</a> |
| <a href="features.html" class="hover:text-blue-200 transition">Features</a> |
| <a href="about.html" class="hover:text-blue-200 transition">About</a> |
| <a href="contact.html" class="hover:text-blue-200 transition">Contact & Support</a> |
| <a href="plans.html" class="text-blue-200 font-medium">Plans</a> |
| <a href="login.html" class="hover:text-blue-200 transition">Login/Signup</a> |
| </nav> |
| <button id="mobile-menu-button" class="md:hidden text-white"> |
| <i data-feather="menu"></i> |
| </button> |
| |
| <div id="mobile-menu" class="hidden md:hidden absolute top-full left-0 right-0 bg-blue-700 shadow-lg"> |
| <nav class="flex flex-col p-4 space-y-2"> |
| <a href="index.html" class="hover:text-blue-200 transition py-2">Home</a> |
| <a href="features.html" class="hover:text-blue-200 transition py-2">Features</a> |
| <a href="about.html" class="hover:text-blue-200 transition py-2">About</a> |
| <a href="contact.html" class="hover:text-blue-200 transition py-2">Contact & Support</a> |
| <a href="plans.html" class="text-blue-200 font-medium py-2">Plans</a> |
| <a href="login.html" class="hover:text-blue-200 transition py-2">Login/Signup</a> |
| </nav> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="flex-grow container mx-auto px-4 py-12"> |
| <div class="max-w-6xl mx-auto"> |
| |
| <section class="text-center mb-16"> |
| <h2 class="text-4xl font-bold text-gray-800 mb-4">Choose Your Plan</h2> |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto"> |
| Select the perfect plan for your corrosion analysis needs. All plans include our core AI-powered features. |
| </p> |
| </section> |
|
|
| |
| <div class="grid md:grid-cols-3 gap-8 mb-16"> |
| |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden transform hover:scale-105 transition"> |
| <div class="bg-gray-100 p-6 text-center"> |
| <h3 class="text-2xl font-bold text-gray-800 mb-2">Starter</h3> |
| <p class="text-gray-600 mb-4">Perfect for small projects</p> |
| <div class="text-4xl font-bold text-gray-800 mb-2">$29<span class="text-lg text-gray-600">/month</span></div> |
| </div> |
| <div class="p-6"> |
| <ul class="space-y-3 mb-6"> |
| <li class="flex items-start"> |
| <i data-feather="check" class="w-5 h-5 text-green-500 mr-2 mt-0.5"></i> |
| <span>100 analysis requests/month</span> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="check" class="w-5 h-5 text-green-500 mr-2 mt-0.5"></i> |
| <span>Basic file formats (CSV, Excel)</span> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="check" class="w-5 h-5 text-green-500 mr-2 mt-0.5"></i> |
| <span>Email support</span> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="check" class="w-5 h-5 text-green-500 mr-2 mt-0.5"></i> |
| <span>Standard reports</span> |
| </li> |
| <li class="flex items-start text-gray-400"> |
| <i data-feather="x" class="w-5 h-5 text-gray-400 mr-2 mt-0.5"></i> |
| <span>API access</span> |
| </li> |
| <li class="flex items-start text-gray-400"> |
| <i data-feather="x" class="w-5 h-5 text-gray-400 mr-2 mt-0.5"></i> |
| <span>Priority support</span> |
| </li> |
| </ul> |
| <button class="w-full bg-gray-200 hover:bg-gray-300 text-gray-800 py-3 rounded-lg font-semibold transition"> |
| Choose Starter |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-blue-600 text-white rounded-xl shadow-xl overflow-hidden transform hover:scale-105 transition relative"> |
| <div class="absolute top-0 right-0 bg-yellow-400 text-gray-800 px-3 py-1 text-sm font-semibold"> |
| POPULAR |
| </div> |
| <div class="p-6 text-center"> |
| <h3 class="text-2xl font-bold mb-2">Professional</h3> |
| <p class="text-blue-100 mb-4">Most popular for teams</p> |
| <div class="text-4xl font-bold mb-2">$99<span class="text-lg text-blue-100">/month</span></div> |
| </div> |
| <div class="bg-white text-gray-800 p-6"> |
| <ul class="space-y-3 mb-6"> |
| <li class="flex items-start"> |
| <i data-feather="check" class="w-5 h-5 text-green-500 mr-2 mt-0.5"></i> |
| <span>Unlimited analysis requests</span> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="check" class="w-5 h-5 text-green-500 mr-2 mt-0.5"></i> |
| <span>All file formats (PDF, images, JSON)</span> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="check" class="w-5 h-5 text-green-500 mr-2 mt-0.5"></i> |
| <span>Priority email & chat support</span> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="check" class="w-5 h-5 text-green-500 mr-2 mt-0.5"></i> |
| <span>Advanced reports & visualizations</span> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="check" class="w-5 h-5 text-green-500 mr-2 mt-0.5"></i> |
| <span>API access</span> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="check" class="w-5 h-5 text-green-500 mr-2 mt-0.5"></i> |
| <span>Custom integrations</span> |
| </li> |
| </ul> |
| <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg font-semibold transition"> |
| Choose Professional |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden transform hover:scale-105 transition"> |
| <div class="bg-gray-800 text-white p-6 text-center"> |
| <h3 class="text-2xl font-bold mb-2">Enterprise</h3> |
| <p class="text-gray-300 mb-4">For large organizations</p> |
| <div class="text-4xl font-bold mb-2">Custom</div> |
| </div> |
| <div class="p-6"> |
| <ul class="space-y-3 mb-6"> |
| <li class="flex items-start"> |
| <i data-feather="check" class="w-5 h-5 text-green-500 mr-2 mt-0.5"></i> |
| <span>Everything in Professional</span> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="check" class="w-5 h-5 text-green-500 mr-2 mt-0.5"></i> |
| <span>Dedicated account manager</span> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="check" class="w-5 h-5 text-green-500 mr-2 mt-0.5"></i> |
| <span>24/7 phone support</span> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="check" class="w-5 h-5 text-green-500 mr-2 mt-0.5"></i> |
| <span>Custom training & onboarding</span> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="check" class="w-5 h-5 text-green-500 mr-2 mt-0.5"></i> |
| <span>SLA guarantee</span> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="check" class="w-5 h-5 text-green-500 mr-2 mt-0.5"></i> |
| <span>On-premise deployment option</span> |
| </li> |
| </ul> |
| <button class="w-full bg-gray-800 hover:bg-gray-900 text-white py-3 rounded-lg font-semibold transition"> |
| Contact Sales |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <section class="bg-white rounded-xl shadow-lg p-8 mb-12"> |
| <h3 class="text-2xl font-bold text-gray-800 mb-6 text-center">Frequently Asked Questions</h3> |
| <div class="max-w-3xl mx-auto space-y-4"> |
| <div class="border-b border-gray-200 pb-4"> |
| <h4 class="font-semibold text-gray-800 mb-2">Can I change plans anytime?</h4> |
| <p class="text-gray-600">Yes, you can upgrade or downgrade your plan at any time. Changes will be reflected in your next billing cycle.</p> |
| </div> |
| <div class="border-b border-gray-200 pb-4"> |
| <h4 class="font-semibold text-gray-800 mb-2">Do you offer a free trial?</h4> |
| <p class="text-gray-600">Yes, we offer a 14-day free trial for our Professional plan with full access to all features.</p> |
| </div> |
| <div class="border-b border-gray-200 pb-4"> |
| <h4 class="font-semibold text-gray-800 mb-2">What payment methods do you accept?</h4> |
| <p class="text-gray-600">We accept all major credit cards, PayPal, and wire transfers for enterprise accounts.</p> |
| </div> |
| <div class="pb-4"> |
| <h4 class="font-semibold text-gray-800 mb-2">Is my data secure?</h4> |
| <p class="text-gray-600">Absolutely. We use industry-standard encryption and comply with GDPR, SOC 2, and ISO 27001 standards.</p> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="bg-gradient-to-r from-blue-600 to-blue-700 rounded-xl p-8 text-white text-center"> |
| <h3 class="text-2xl font-bold mb-4">Ready to get started?</h3> |
| <p class="max-w-2xl mx-auto mb-6 text-blue-100"> |
| Join thousands of engineers and organizations already using ChemiCorr AI for intelligent corrosion analysis. |
| </p> |
| <div class="space-x-4"> |
| <button class="bg-white text-blue-700 hover:bg-blue-50 px-8 py-3 rounded-lg font-semibold transition"> |
| Start Free Trial |
| </button> |
| <button class="bg-blue-800 hover:bg-blue-900 text-white px-8 py-3 rounded-lg font-semibold transition"> |
| Schedule Demo |
| </button> |
| </div> |
| </section> |
| </div> |
| </main> |
|
|
| |
| <footer class="bg-gray-800 text-white py-8"> |
| <div class="container mx-auto px-4"> |
| <div class="grid md:grid-cols-4 gap-8"> |
| <div> |
| <h4 class="text-lg font-semibold mb-4">ChemiCorr AI</h4> |
| <p class="text-gray-400"> |
| Advanced corrosion analysis powered by AI for engineers and maintenance professionals. |
| </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="features.html" class="text-gray-400 hover:text-white transition">Features</a></li> |
| <li><a href="about.html" class="text-gray-400 hover:text-white transition">About</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="text-lg font-semibold mb-4">Resources</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li> |
| <li><a href="contact.html" class="text-gray-400 hover:text-white transition">Support</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="text-lg font-semibold mb-4">Contact</h4> |
| <ul class="space-y-2"> |
| <li class="flex items-center text-gray-400"><i data-feather="mail" class="mr-2 w-4 h-4"></i> support@chemicorr.ai</li> |
| <li class="flex items-center text-gray-400"><i data-feather="phone" class="mr-2 w-4 h-4"></i> +1 (555) 123-4567</li> |
| </ul> |
| </div> |
| </div> |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> |
| <p>© 2023 ChemiCorr AI. All rights reserved.</p> |
| </div> |
| </div> |
| </footer> |
| </div> |
|
|
| <script> |
| |
| VANTA.BIRDS({ |
| el: "#vanta-bg", |
| mouseControls: true, |
| touchControls: true, |
| gyroControls: false, |
| minHeight: 200.00, |
| minWidth: 200.00, |
| scale: 1.00, |
| scaleMobile: 1.00, |
| backgroundColor: 0xf8fafc, |
| color1: 0x3b82f6, |
| color2: 0x60a5fa, |
| birdSize: 1.00, |
| wingSpan: 30.00, |
| speedLimit: 3.00, |
| separation: 50.00, |
| alignment: 20.00, |
| cohesion: 20.00, |
| quantity: 3.00 |
| }); |
| |
| |
| feather.replace(); |
| |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); |
| const mobileMenu = document.getElementById('mobile-menu'); |
| |
| if (mobileMenuButton && mobileMenu) { |
| mobileMenuButton.addEventListener('click', (e) => { |
| e.preventDefault(); |
| e.stopPropagation(); |
| mobileMenu.classList.toggle('hidden'); |
| const icon = mobileMenuButton.querySelector('i'); |
| if (mobileMenu.classList.contains('hidden')) { |
| icon.setAttribute('data-feather', 'menu'); |
| } else { |
| icon.setAttribute('data-feather', 'x'); |
| } |
| feather.replace(); |
| }); |
| |
| |
| document.addEventListener('click', (e) => { |
| if (!mobileMenuButton.contains(e.target) && !mobileMenu.contains(e.target)) { |
| mobileMenu.classList.add('hidden'); |
| const icon = mobileMenuButton.querySelector('i'); |
| icon.setAttribute('data-feather', 'menu'); |
| feather.replace(); |
| } |
| }); |
| } |
| </script> |
| </body> |
| </html> |
