Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Pricing - SEO Wizards Unleashed</title> | |
| <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="https://unpkg.com/feather-icons"></script> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <custom-navbar></custom-navbar> | |
| <main class="container mx-auto px-4 py-12"> | |
| <div class="text-center mb-16"> | |
| <h1 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Choose Your Wizardry Level</h1> | |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto">Unlock more powerful SEO magic with our paid plans</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto"> | |
| <!-- Free Tier --> | |
| <div class="bg-white p-6 rounded-xl shadow-md border border-gray-200"> | |
| <div class="mb-6"> | |
| <h3 class="text-xl font-semibold mb-1">Apprentice</h3> | |
| <p class="text-gray-600">Perfect for beginners</p> | |
| </div> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold">Free</span> | |
| <span class="text-gray-500">/forever</span> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="text-primary mr-2"></i> | |
| <span>Basic content generation</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="text-primary mr-2"></i> | |
| <span>Limited configs (3 max)</span> | |
| </li> | |
| <li class="flex items-center text-gray-400"> | |
| <i data-feather="x" class="mr-2"></i> | |
| <span>Advanced analytics</span> | |
| </li> | |
| <li class="flex items-center text-gray-400"> | |
| <i data-feather="x" class="mr-2"></i> | |
| <span>Priority support</span> | |
| </li> | |
| <li class="flex items-center text-gray-400"> | |
| <i data-feather="x" class="mr-2"></i> | |
| <span>No ads</span> | |
| </li> | |
| </ul> | |
| <a href="/signup.html" class="block w-full bg-white border border-primary text-primary font-medium py-2 px-4 rounded-lg shadow-sm text-center hover:bg-primary-50 transition-all"> | |
| Get Started | |
| </a> | |
| </div> | |
| <!-- Pro Tier --> | |
| <div class="bg-white p-6 rounded-xl shadow-lg border-2 border-primary transform scale-105 z-10"> | |
| <div class="mb-6"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-1">Wizard</h3> | |
| <p class="text-gray-600">For serious SEO magic</p> | |
| </div> | |
| <span class="bg-primary text-white text-xs font-medium px-2 py-1 rounded">POPULAR</span> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold">$29</span> | |
| <span class="text-gray-500">/month</span> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="text-primary mr-2"></i> | |
| <span>Advanced content generation</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="text-primary mr-2"></i> | |
| <span>Unlimited configs</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="text-primary mr-2"></i> | |
| <span>Detailed analytics</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="text-primary mr-2"></i> | |
| <span>Priority support</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="text-primary mr-2"></i> | |
| <span>Limited ads</span> | |
| </li> | |
| </ul> | |
| <a href="/signup.html?plan=wizard" class="block w-full bg-primary hover:bg-primary-600 text-white font-medium py-2 px-4 rounded-lg shadow-md text-center transition-all"> | |
| Upgrade Now | |
| </a> | |
| </div> | |
| <!-- Enterprise Tier --> | |
| <div class="bg-white p-6 rounded-xl shadow-md border border-gray-200"> | |
| <div class="mb-6"> | |
| <h3 class="text-xl font-semibold mb-1">Archmage</h3> | |
| <p class="text-gray-600">For agencies & enterprises</p> | |
| </div> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold">$99</span> | |
| <span class="text-gray-500">/month</span> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="text-primary mr-2"></i> | |
| <span>Premium content generation</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="text-primary mr-2"></i> | |
| <span>Unlimited configs & users</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="text-primary mr-2"></i> | |
| <span>Advanced analytics & reports</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="text-primary mr-2"></i> | |
| <span>24/7 VIP support</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="text-primary mr-2"></i> | |
| <span>Ad-free experience</span> | |
| </li> | |
| </ul> | |
| <a href="/signup.html?plan=archmage" class="block w-full bg-white border border-primary text-primary font-medium py-2 px-4 rounded-lg shadow-sm text-center hover:bg-primary-50 transition-all"> | |
| Contact Sales | |
| </a> | |
| </div> | |
| </div> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| </body> | |
| </html> |