Spaces:
Running
Running
| ```html | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Pricing - Emergent.sh</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .card-hover { | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .popular-plan { | |
| border: 2px solid #667eea; | |
| position: relative; | |
| } | |
| .popular-badge { | |
| position: absolute; | |
| top: -12px; | |
| right: 20px; | |
| background: #667eea; | |
| color: white; | |
| padding: 4px 12px; | |
| border-radius: 20px; | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <a href="index.html" class="text-xl font-bold text-purple-600">Emergent.sh</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <a href="features.html" class="text-gray-600 hover:text-purple-600">Features</a> | |
| <a href="pricing.html" class="text-purple-600 font-semibold">Pricing</a> | |
| <a href="documentation.html" class="text-gray-600 hover:text-purple-600">Documentation</a> | |
| <a href="signup.html" class="bg-purple-600 text-white px-4 py-2 rounded-md hover:bg-purple-700">Sign Up</a> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="gradient-bg text-white py-20"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6">Simple, Transparent Pricing</h1> | |
| <p class="text-xl mb-8 max-w-3xl mx-auto">Choose the plan that works best for your team and scale as you grow</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing Plans --> | |
| <section class="py-20"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Free Plan --> | |
| <div class="bg-white p-8 rounded-lg shadow-md card-hover"> | |
| <h3 class="text-2xl font-semibold mb-4">Free</h3> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold">$0</span> | |
| <span class="text-gray-600">/month</span> | |
| </div> | |
| <p class="text-gray-600 mb-6">Perfect for getting started and small projects</p> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="w-5 h-5 text-green-500 mr-3"></i> | |
| <span>5,000 API calls/month</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="w-5 h-5 text-green-500 mr-3"></i> | |
| <span>Basic AI models</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="w-5 h-5 text-green-500 mr-3"></i> | |
| <span>Community support</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="w-5 h-5 text-green-500 mr-3"></i> | |
| <span>1 project</span> | |
| </li> | |
| </ul> | |
| <a href="signup.html" class="w-full bg-gray-100 text-gray-800 py-3 rounded-md font-semibold text-center block hover:bg-gray-200">Get Started</a> | |
| </div> | |
| <!-- Pro Plan --> | |
| <div class="bg-white p-8 rounded-lg shadow-md card-hover popular-plan"> | |
| <div class="popular-badge">Most Popular</div> | |
| <h3 class="text-2xl font-semibold mb-4">Pro</h3> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold">$49</span> | |
| <span class="text-gray-600">/month</span> | |
| </div> | |
| <p class="text-gray-600 mb-6">For growing teams and serious projects</p> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="w-5 h-5 text-green-500 mr-3"></i> | |
| <span>50,000 API calls/month</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="w-5 h-5 text-green-500 mr-3"></i> | |
| <span>Advanced AI models</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="w-5 h-5 text-green-500 mr-3"></i> | |
| <span>Priority support</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="w-5 h-5 text-green-500 mr-3"></i> | |
| <span>5 projects</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="w-5 h-5 text-green-500 mr-3"></i> | |
| <span>Team collaboration</span> | |
| </li> | |
| </ul> | |
| <a href="signup.html" class="w-full bg-purple-600 text-white py-3 rounded-md font-semibold text-center block hover:bg-purple-700">Start Free Trial</a> | |
| </div> | |
| <!-- Enterprise Plan --> | |
| <div class="bg-white p-8 rounded-lg shadow-md card-hover"> | |
| <h3 class="text-2xl font-semibold mb-4">Enterprise</h3> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold">Custom</span> | |
| </div> | |
| <p class="text-gray-600 mb-6">For large organizations with complex needs</p> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="w-5 h-5 text-green-500 mr-3"></i> | |
| <span>Unlimited API calls</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="w-5 h-5 text-green-500 mr-3"></i> | |
| <span>All AI models + custom</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="w-5 h-5 text-green-500 mr-3"></i> | |
| <span>24/7 dedicated support</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="w-5 h-5 text-green-500 mr-3"></i> | |
| <span>Unlimited projects</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="w-5 h-5 text-green-500 mr-3"></i> | |
| <span>SLA guarantee</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="w-5 h-5 text-green-500 mr-3"></i> | |
| <span>On-premise deployment</span> | |
| </li> | |
| </ul> | |
| <a href="contact.html" class="w-full bg-gray-100 text-gray-800 py-3 rounded-md font-semibold text-center block hover:bg-gray-200">Contact Sales</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ Section --> | |
| <section class="bg-gray-100 py-20"> | |
| <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Frequently Asked Questions</h2> | |
| <div class="space-y-6"> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-2">Can I change plans anytime?</h3> | |
| <p class="text-gray-600">Yes, you can upgrade, downgrade, or cancel your plan at any time. Changes take effect immediately.</p> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-2">Do you offer discounts for startups?</h3> | |
| <p class="text-gray-600">We offer special discounts for startups and educational institutions. Contact our sales team for more information.</p> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-2">Is there a free trial?</h3> | |
| <p class="text-gray-600">Yes, all paid plans come with a 14-day free trial. No credit card required to start.</p> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-2">What payment methods do you accept?</h3> | |
| <p class="text-gray-600">We accept all major credit cards, PayPal, and bank transfers for enterprise plans.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid md极速 |