each button should be responsive and when click then smothhly open dynamically comprehensive description and details and more like professional website
65931c3 verified | <html lang="en" class="scroll-smooth"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Pricing | VisionQuantech</title> | |
| <meta name="description" content="Explore pricing options for VisionQuantech's AI products and solutions"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| </head> | |
| <body class="bg-gray-50 text-gray-900 font-sans antialiased"> | |
| <custom-navbar></custom-navbar> | |
| <!-- Pricing Hero --> | |
| <section class="relative bg-gradient-to-br from-primary to-gray-900 text-white py-28"> | |
| <div class="container mx-auto px-6"> | |
| <div class="max-w-3xl mx-auto text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight"> | |
| Simple, Transparent <span class="text-accent">Pricing</span> | |
| </h1> | |
| <p class="text-xl md:text-2xl mb-10"> | |
| Choose the plan that fits your needs. Volume discounts available for enterprise customers. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-gray-50 to-transparent"></div> | |
| </section> | |
| <!-- Pricing Plans --> | |
| <section class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex justify-center mb-12"> | |
| <div class="inline-flex rounded-lg bg-gray-100 p-1"> | |
| <button class="px-6 py-2 rounded-lg font-medium bg-white shadow">Monthly</button> | |
| <button class="px-6 py-2 rounded-lg font-medium text-gray-600 hover:text-gray-900">Annual (Save 20%)</button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto"> | |
| <!-- Basic Plan --> | |
| <div class="bg-gray-50 rounded-xl p-8 border border-gray-200 hover:border-accent transition"> | |
| <div class="mb-6"> | |
| <h3 class="text-xl font-bold mb-2">Basic</h3> | |
| <p class="text-gray-600">For individuals and small teams</p> | |
| </div> | |
| <div class="mb-8"> | |
| <div class="text-4xl font-bold mb-2">₹4,999<span class="text-lg font-normal text-gray-600">/mo</span></div> | |
| <p class="text-gray-600">Or ₹49,999 annually</p> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-start"> | |
| <i data-feather="check" class="text-green-500 mr-2"></i> | |
| <span>Access to core AI features</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check" class="text-green-500 mr-2"></i> | |
| <span>10,000 API calls/month</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check" class="text-green-500 mr-2"></i> | |
| <span>Standard support</span> | |
| </li> | |
| </ul> | |
| <a href="/contact" class="block text-center bg-white text-accent border border-accent px-6 py-3 rounded-lg font-medium hover:bg-accent hover:text-white transition duration-300"> | |
| Get Started | |
| </a> | |
| </div> | |
| <!-- Pro Plan (Featured) --> | |
| <div class="bg-gradient-to-br from-primary to-secondary text-white rounded-xl p-8 shadow-lg transform scale-105"> | |
| <div class="mb-6"> | |
| <div class="inline-block bg-white/20 px-3 py-1 rounded-full text-sm font-medium mb-3">Most Popular</div> | |
| <h3 class="text-xl font-bold mb-2">Pro</h3> | |
| <p>For growing businesses</p> | |
| </div> | |
| <div class="mb-8"> | |
| <div class="text-4xl font-bold mb-2">₹14,999<span class="text-lg font-normal opacity-80">/mo</span></div> | |
| <p class="opacity-80">Or ₹149,999 annually</p> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-start"> | |
| <i data-feather="check" class="text-white mr-2"></i> | |
| <span>All Basic features plus:</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check" class="text-white mr-2"></i> | |
| <span>50,000 API calls/month</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check" class="text-white mr-2"></i> | |
| <span>Priority support</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check" class="text-white mr-2"></i> | |
| <span>Advanced analytics</span> | |
| </li> | |
| </ul> | |
| <a href="/contact" class="block text-center bg-white text-primary px-6 py-3 rounded-lg font-medium hover:bg-gray-100 transition duration-300"> | |
| Get Started | |
| </a> | |
| </div> | |
| <!-- Enterprise Plan --> | |
| <div class="bg-gray-50 rounded-xl p-8 border border-gray-200 hover:border-accent transition"> | |
| <div class="mb-6"> | |
| <h3 class="text-xl font-bold mb-2">Enterprise</h3> | |
| <p class="text-gray-600">For large organizations</p> | |
| </div> | |
| <div class="mb-8"> | |
| <div class="text-4xl font-bold mb-2">Custom</div> | |
| <p class="text-gray-600">Volume pricing available</p> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-start"> | |
| <i data-feather="check" class="text-green-500 mr-2"></i> | |
| <span>All Pro features plus:</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check" class="text-green-500 mr-2"></i> | |
| <span>Unlimited API calls</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check" class="text-green-500 mr-2"></i> | |
| <span>Dedicated account manager</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check" class="text-green-500 mr-2"></i> | |
| <span>Custom AI model training</span> | |
| </li> | |
| </ul> | |
| <a href="/contact" class="block text-center bg-white text-accent border border-accent px-6 py-3 rounded-lg font-medium hover:bg-accent hover:text-white transition duration-300"> | |
| Contact Sales | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ --> | |
| <section class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-6 max-w-4xl"> | |
| <h2 class="text-3xl font-bold text-center mb-16">Frequently Asked Questions</h2> | |
| <div class="space-y-6"> | |
| <!-- FAQ Item 1 --> | |
| <div class="bg-white rounded-xl p-6 shadow-sm"> | |
| <button class="flex justify-between items-center w-full text-left font-medium"> | |
| <span>What payment methods do you accept?</span> | |
| <i data-feather="chevron-down" class="text-accent"></i> | |
| </button> | |
| <div class="mt-4 hidden"> | |
| <p class="text-gray-600">We accept all major credit cards (Visa, MasterCard, American Express), bank transfers, UPI payments, and corporate purchase orders.</p> | |
| </div> | |
| </div> | |
| <!-- FAQ Item 2 --> | |
| <div class="bg-white rounded-xl p-6 shadow-sm"> | |
| <button class="flex justify-between items-center w-full text-left font-medium"> | |
| <span>Can I switch plans later?</span> | |
| <i data-feather="chevron-down" class="text-accent"></i> | |
| </button> | |
| <div class="mt-4 hidden"> | |
| <p class="text-gray-600">Yes, you can upgrade or downgrade your plan at any time. Any remaining balance will be prorated and applied to your new plan.</p> | |
| </div> | |
| </div> | |
| <!-- FAQ Item 3 --> | |
| <div class="bg-white rounded-xl p-6 shadow-sm"> | |
| <button class="flex justify-between items-center w-full text-left font-medium"> | |
| <span>Do you offer discounts for non-profits?</span> | |
| <i data-feather="chevron-down" class="text-accent"></i> | |
| </button> | |
| <div class="mt-4 hidden"> | |
| <p class="text-gray-600">Yes, we offer special pricing for registered non-profit organizations and educational institutions. Please contact our sales team for details.</p> | |
| </div> | |
| </div> | |
| <!-- FAQ Item 4 --> | |
| <div class="bg-white rounded-xl p-6 shadow-sm"> | |
| <button class="expandable-button flex justify-between items-center w-full text-left font-medium" | |
| data-target="faq-4" | |
| aria-expanded="false"> | |
| <span>Is there a free trial available?</span> | |
| <i data-feather="chevron-down" class="text-accent"></i> | |
| </button> | |
| <div id="faq-4" class="expandable-content"> | |
| <div class="mt-4"> | |
| <p class="text-gray-600 mb-4">We offer a 14-day free trial for our Basic and Pro plans. Enterprise customers can request a custom demo.</p> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h4 class="font-bold mb-2 text-sm">Trial Details:</h4> | |
| <ul class="text-sm text-gray-600 space-y-1"> | |
| <li>Full access to all Basic/Pro features</li> | |
| <li>No credit card required</li> | |
| <li>5,000 free API calls</li> | |
| <li>Email support during trial</li> | |
| </ul> | |
| <div class="mt-3"> | |
| <a href="/signup" class="text-accent text-sm font-medium hover:underline"> | |
| Start your free trial now → | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA --> | |
| <section class="py-16 bg-gradient-to-r from-primary to-secondary text-white"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h2 class="text-3xl font-bold mb-6">Still have questions?</h2> | |
| <p class="text-xl max-w-2xl mx-auto mb-8">Our team is ready to help you choose the right plan for your needs.</p> | |
| <a href="/contact" class="inline-block bg-white text-primary px-8 py-3 rounded-lg font-medium hover:bg-gray-100 transition duration-300"> | |
| Contact Sales | |
| </a> | |
| </div> | |
| </section> | |
| <custom-footer></custom-footer> | |
| <script> | |
| feather.replace(); | |
| // FAQ toggle functionality | |
| document.querySelectorAll('[data-feather="chevron-down"]').forEach(icon => { | |
| const button = icon.parentElement; | |
| const content = button.nextElementSibling; | |
| button.addEventListener('click', () => { | |
| const isExpanded = content.classList.toggle('hidden'); | |
| if (isExpanded) { | |
| icon.setAttribute('data-feather', 'chevron-down'); | |
| } else { | |
| icon.setAttribute('data-feather', 'chevron-up'); | |
| } | |
| feather.replace(); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |