Restore to commit 74e578279624c6045ca440a3459ebfa1f8d54191
This commit is contained in:
southseact-3d
910
chat/public/pricing.html
Normal file
910
chat/public/pricing.html
Normal file
@@ -0,0 +1,910 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="scroll-smooth">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description"
|
||||
content="Plugin Compass pricing plans. Affordable AI WordPress plugin builder to replace expensive subscriptions.">
|
||||
<meta name="keywords"
|
||||
content="WordPress plugin builder pricing, AI plugin generator cost, custom WordPress plugins pricing, affordable plugin builder">
|
||||
<meta name="robots" content="index, follow">
|
||||
<meta property="og:title" content="Plugin Compass Pricing - Affordable AI WordPress Plugin Builder">
|
||||
<meta property="og:description"
|
||||
content="Choose from flexible pricing plans to build custom WordPress plugins with AI and save thousands monthly.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="">
|
||||
<meta property="og:site_name" content="Plugin Compass">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="Plugin Compass Pricing - Affordable AI WordPress Plugin Builder">
|
||||
<meta name="twitter:description"
|
||||
content="Choose from flexible pricing plans to build custom WordPress plugins with AI and save thousands monthly.">
|
||||
<link rel="canonical" href="">
|
||||
<title>Pricing | Plugin Compass</title>
|
||||
<link rel="icon" type="image/png" href="/assets/Plugin.png">
|
||||
<script>
|
||||
(function () {
|
||||
var url = window.location.origin + '/pricing';
|
||||
document.querySelector('link[rel="canonical"]').setAttribute('href', url);
|
||||
document.querySelector('meta[property="og:url"]').setAttribute('content', url);
|
||||
})();
|
||||
</script>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'sans-serif'],
|
||||
},
|
||||
colors: {
|
||||
brand: {
|
||||
50: '#eef2ff',
|
||||
100: '#e0e7ff',
|
||||
200: '#c7d2fe',
|
||||
300: '#a5b4fc',
|
||||
400: '#818cf8',
|
||||
500: '#6366f1',
|
||||
600: '#4f46e5',
|
||||
700: '#4338ca',
|
||||
800: '#3730a3',
|
||||
900: '#312e81',
|
||||
950: '#1e1b4b',
|
||||
}
|
||||
},
|
||||
animation: {
|
||||
'blob': 'blob 7s infinite',
|
||||
},
|
||||
keyframes: {
|
||||
blob: {
|
||||
'0%': { transform: 'translate(0px, 0px) scale(1)' },
|
||||
'33%': { transform: 'translate(30px, -50px) scale(1.1)' },
|
||||
'66%': { transform: 'translate(-20px, 20px) scale(0.9)' },
|
||||
'100%': { transform: 'translate(0px, 0px) scale(1)' },
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #fdf6ed;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #d1d5db;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #9ca3af;
|
||||
}
|
||||
|
||||
.glass-nav {
|
||||
background: rgba(251, 246, 239, 0.9);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid rgba(0, 66, 37, 0.1);
|
||||
}
|
||||
|
||||
.hero-gradient-text {
|
||||
background: linear-gradient(to right, #004225, #006B3D, #057857);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 20px 40px rgba(0, 66, 37, 0.1);
|
||||
}
|
||||
|
||||
.gradient-bg {
|
||||
background: linear-gradient(135deg, #004225, #006B3D);
|
||||
}
|
||||
|
||||
.currency-dropdown.open #currency-btn {
|
||||
border-color: #057857;
|
||||
box-shadow: 0 0 0 3px rgba(5, 120, 87, 0.1);
|
||||
}
|
||||
|
||||
.currency-option {
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.currency-option:hover {
|
||||
background-color: #d1fae5;
|
||||
color: #065f46;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- PostHog Analytics -->
|
||||
<script src="/posthog.js"></script>
|
||||
</head>
|
||||
|
||||
<body class="bg-amber-50 text-gray-900 font-sans antialiased overflow-x-hidden">
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="fixed w-full z-50 glass-nav transition-all duration-300" id="navbar">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between items-center h-20">
|
||||
<!-- Logo -->
|
||||
<a href="/" class="flex-shrink-0 flex items-center gap-2 cursor-pointer">
|
||||
<img src="/assets/Plugin.png" alt="Plugin Compass" class="w-8 h-8">
|
||||
<span class="font-bold text-xl tracking-tight text-gray-800">Plugin<span
|
||||
class="text-green-700">Compass</span></span>
|
||||
</a>
|
||||
|
||||
<!-- Desktop Menu -->
|
||||
<div class="hidden md:flex items-center space-x-8">
|
||||
<a href="/features"
|
||||
class="text-gray-700 hover:text-gray-900 transition-colors text-sm font-medium">Features</a>
|
||||
<a href="/pricing" class="text-green-700 font-bold text-sm">Pricing</a>
|
||||
<a href="/docs"
|
||||
class="text-gray-700 hover:text-gray-900 transition-colors text-sm font-medium">Docs</a>
|
||||
<a href="/faq"
|
||||
class="text-gray-700 hover:text-gray-900 transition-colors text-sm font-medium">FAQ</a>
|
||||
</div>
|
||||
|
||||
<!-- CTA Buttons -->
|
||||
<div class="hidden md:flex items-center gap-4">
|
||||
<a href="/login"
|
||||
class="text-gray-700 hover:text-gray-900 font-medium text-sm transition-colors">Sign In</a>
|
||||
<a href="/signup"
|
||||
class="bg-green-700 hover:bg-green-600 text-white px-5 py-2.5 rounded-full font-medium text-sm transition-all shadow-lg shadow-green-700/20 hover:shadow-green-700/40 transform hover:-translate-y-0.5">
|
||||
Get Started
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu Button -->
|
||||
<div class="md:hidden flex items-center">
|
||||
<button id="mobile-menu-btn" class="text-gray-700 hover:text-gray-900 focus:outline-none">
|
||||
<i class="fa-solid fa-bars text-xl"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu Panel -->
|
||||
<div id="mobile-menu" class="hidden md:hidden bg-amber-50 border-b border-amber-200">
|
||||
<div class="px-4 pt-2 pb-6 space-y-1">
|
||||
<a href="/features"
|
||||
class="block px-3 py-3 text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-amber-100 rounded-md">Features</a>
|
||||
<a href="/pricing"
|
||||
class="block px-3 py-3 text-base font-medium text-green-700 font-bold hover:bg-amber-100 rounded-md">Pricing</a>
|
||||
<a href="/docs"
|
||||
class="block px-3 py-3 text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-amber-100 rounded-md">Docs</a>
|
||||
<a href="/faq"
|
||||
class="block px-3 py-3 text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-amber-100 rounded-md">FAQ</a>
|
||||
<div class="pt-4 flex flex-col gap-3">
|
||||
<a href="/login" class="w-full text-center py-2 text-gray-700 font-medium">Sign In</a>
|
||||
<a href="/signup" class="w-full bg-green-700 text-white text-center py-3 rounded-lg font-medium">Get
|
||||
Started</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Pricing Plans -->
|
||||
<section class="py-24 bg-amber-50 relative">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-16">
|
||||
<h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4">Simple, transparent pricing</h1>
|
||||
<p class="text-xl text-gray-700">Choose the plan that's right for your business.</p>
|
||||
|
||||
<div class="mt-8 flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||
<div class="inline-flex items-center bg-white p-1 rounded-full border border-gray-200">
|
||||
<button id="monthly-toggle"
|
||||
class="px-6 py-2 rounded-full text-sm font-medium bg-green-700 text-white shadow-sm transition-all">Monthly</button>
|
||||
<button id="yearly-toggle"
|
||||
class="px-6 py-2 rounded-full text-sm font-medium text-gray-600 hover:text-gray-900 transition-all">Yearly
|
||||
<span class="text-green-600 font-bold">2 months free</span></button>
|
||||
</div>
|
||||
|
||||
<div class="relative currency-dropdown" id="currency-dropdown">
|
||||
<button id="currency-btn" class="bg-white border border-gray-200 rounded-full px-4 py-2 pr-10 text-sm font-medium text-gray-700 hover:border-green-700 hover:bg-gray-50 transition-all cursor-pointer flex items-center gap-2">
|
||||
<span id="currency-flag">🇺🇸</span>
|
||||
<span id="currency-code">USD</span>
|
||||
</button>
|
||||
<div id="currency-options" class="hidden absolute top-full left-0 mt-1 w-full bg-white border border-gray-200 rounded-xl shadow-lg z-50 overflow-hidden">
|
||||
<button class="currency-option w-full px-4 py-2 text-sm text-gray-700 hover:bg-green-50 hover:text-gray-900 font-medium text-left flex items-center gap-2" data-value="USD">
|
||||
🇺🇸 $<span class="ml-1">USD</span>
|
||||
</button>
|
||||
<button class="currency-option w-full px-4 py-2 text-sm text-gray-700 hover:bg-green-50 hover:text-gray-900 font-medium text-left flex items-center gap-2" data-value="GBP">
|
||||
🇬🇧 £<span class="ml-1">GBP</span>
|
||||
</button>
|
||||
<button class="currency-option w-full px-4 py-2 text-sm text-gray-700 hover:bg-green-50 hover:text-gray-900 font-medium text-left flex items-center gap-2" data-value="EUR">
|
||||
🇪🇺 €<span class="ml-1">EUR</span>
|
||||
</button>
|
||||
</div>
|
||||
<i class="fa-solid fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 pointer-events-none text-xs transition-transform" id="currency-chevron"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-7xl mx-auto">
|
||||
<!-- Hobby Plan -->
|
||||
<div class="bg-white rounded-3xl p-8 border border-gray-100 shadow-xl shadow-gray-200/50 flex flex-col">
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-2">Hobby</h3>
|
||||
<p class="text-gray-600 text-sm mb-6">For personal projects and exploration.</p>
|
||||
<div class="mb-6">
|
||||
<span id="hobby-price" class="text-4xl font-bold text-gray-900">$0</span>
|
||||
<span class="price-duration text-gray-500">/mo</span>
|
||||
</div>
|
||||
<ul class="space-y-4 mb-8 flex-grow">
|
||||
<li class="flex items-center text-sm text-gray-700">
|
||||
<i class="fa-solid fa-check text-green-600 mr-3"></i> Up to 3 apps
|
||||
</li>
|
||||
<li class="flex items-center text-sm text-gray-700">
|
||||
<i class="fa-solid fa-check text-green-600 mr-3"></i> No choice of ai models
|
||||
</li>
|
||||
<li class="flex items-center text-sm text-gray-700">
|
||||
<a href="/credits" target="_blank" class="flex items-center text-green-700 hover:text-green-600 mr-1" title="Learn more about AI credits">
|
||||
<i class="fa-solid fa-circle-question"></i>
|
||||
</a>
|
||||
<i class="fa-solid fa-check text-green-600 mr-3"></i> 50,000 monthly AI credits
|
||||
</li>
|
||||
<li class="flex items-center text-sm text-gray-700">
|
||||
<i class="fa-solid fa-check text-green-600 mr-3"></i> Standard queue
|
||||
</li>
|
||||
</ul>
|
||||
<a href="/signup"
|
||||
class="w-full py-3 px-6 rounded-xl border-2 border-green-700 text-green-700 font-bold hover:bg-green-50 transition-colors text-center">
|
||||
Start for Free
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Starter Plan -->
|
||||
<div class="bg-white rounded-3xl p-8 border border-gray-100 shadow-xl shadow-gray-200/50 flex flex-col">
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-2">Starter</h3>
|
||||
<p class="text-gray-600 text-sm mb-6">Great for small business needs.</p>
|
||||
<div class="mb-6">
|
||||
<span id="starter-price" class="text-4xl font-bold text-gray-900">$7.50</span>
|
||||
<span class="price-duration text-gray-500">/mo</span>
|
||||
</div>
|
||||
<ul class="space-y-4 mb-8 flex-grow">
|
||||
<li class="flex items-center text-sm text-gray-700">
|
||||
<i class="fa-solid fa-check text-green-600 mr-3"></i> Up to 10 apps
|
||||
</li>
|
||||
<li class="flex items-center text-sm text-gray-700">
|
||||
<a href="/credits" target="_blank" class="flex items-center text-green-700 hover:text-green-600 mr-1" title="Learn more about AI credits">
|
||||
<i class="fa-solid fa-circle-question"></i>
|
||||
</a>
|
||||
<i class="fa-solid fa-check text-green-600 mr-3"></i> 100,000 monthly AI credits
|
||||
</li>
|
||||
<li class="flex items-center text-sm text-gray-700">
|
||||
<i class="fa-solid fa-check text-green-600 mr-3"></i> Access to templates
|
||||
</li>
|
||||
<li class="flex items-center text-sm text-gray-700">
|
||||
<i class="fa-solid fa-check text-green-600 mr-3"></i> Faster queue than Hobby
|
||||
</li>
|
||||
</ul>
|
||||
<a href="/upgrade?source=pricing"
|
||||
class="w-full py-3 px-6 rounded-xl border-2 border-green-700 text-green-700 font-bold hover:bg-green-50 transition-colors text-center">
|
||||
Choose Starter
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Pro Plan -->
|
||||
<div
|
||||
class="bg-white rounded-3xl p-8 border-2 border-green-700 shadow-2xl shadow-green-900/10 flex flex-col relative">
|
||||
<div
|
||||
class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-green-700 text-white text-xs font-bold px-4 py-1 rounded-full uppercase tracking-wider">
|
||||
Most Popular
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-2">Professional</h3>
|
||||
<p class="text-gray-600 text-sm mb-6">For serious WordPress plugin developers.</p>
|
||||
<div class="mb-6">
|
||||
<span id="pro-price" class="text-4xl font-bold text-gray-900">$25</span>
|
||||
<span class="price-duration text-gray-500">/mo</span>
|
||||
</div>
|
||||
<ul class="space-y-4 mb-8 flex-grow">
|
||||
<li class="flex items-center text-sm text-gray-700">
|
||||
<i class="fa-solid fa-check text-green-600 mr-3"></i> Up to 20 apps
|
||||
</li>
|
||||
<li class="flex items-center text-sm text-gray-700">
|
||||
<i class="fa-solid fa-check text-green-600 mr-3"></i> Choice of AI models
|
||||
</li>
|
||||
<li class="flex items-center text-sm text-gray-700">
|
||||
<a href="/credits" target="_blank" class="flex items-center text-green-700 hover:text-green-600 mr-1" title="Learn more about AI credits">
|
||||
<i class="fa-solid fa-circle-question"></i>
|
||||
</a>
|
||||
<i class="fa-solid fa-check text-green-600 mr-3"></i> 5,000,000 Monthly AI credits
|
||||
</li>
|
||||
<li class="flex items-center text-sm text-gray-700">
|
||||
<i class="fa-solid fa-check text-green-600 mr-3"></i> Access to templates
|
||||
</li>
|
||||
<li class="flex items-center text-sm text-gray-700">
|
||||
<i class="fa-solid fa-check text-green-600 mr-3"></i> Priority queue (ahead of Hobby)
|
||||
</li>
|
||||
</ul>
|
||||
<a href="/upgrade?source=pricing"
|
||||
class="w-full py-3 px-6 rounded-xl bg-green-700 text-white font-bold hover:bg-green-600 transition-all shadow-lg shadow-green-700/20 text-center">
|
||||
Get Started
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Enterprise Plan -->
|
||||
<div class="bg-white rounded-3xl p-8 border border-gray-100 shadow-xl shadow-gray-200/50 flex flex-col">
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-2">Enterprise</h3>
|
||||
<p class="text-gray-600 text-sm mb-6">For teams and high-volume builders.</p>
|
||||
<div class="mb-6">
|
||||
<span id="enterprise-price" class="text-4xl font-bold text-gray-900">$75</span>
|
||||
<span class="price-duration text-gray-500">/mo</span>
|
||||
</div>
|
||||
<ul class="space-y-4 mb-8 flex-grow">
|
||||
<li class="flex items-center text-sm text-gray-700">
|
||||
<i class="fa-solid fa-check text-green-600 mr-3"></i> Unlimited apps
|
||||
</li>
|
||||
<li class="flex items-center text-sm text-gray-700">
|
||||
<i class="fa-solid fa-check text-green-600 mr-3"></i> Fastest queue priority
|
||||
</li>
|
||||
<li class="flex items-center text-sm text-gray-700">
|
||||
<a href="/credits" target="_blank" class="flex items-center text-green-700 hover:text-green-600 mr-1" title="Learn more about AI credits">
|
||||
<i class="fa-solid fa-circle-question"></i>
|
||||
</a>
|
||||
<i class="fa-solid fa-check text-green-600 mr-3"></i> 50,000,000 monthly AI credits
|
||||
</li>
|
||||
<li class="flex items-center text-sm text-gray-700">
|
||||
<i class="fa-solid fa-check text-green-600 mr-3"></i> Access to templates
|
||||
</li>
|
||||
</ul>
|
||||
<a href="/upgrade?source=pricing"
|
||||
class="w-full py-3 px-6 rounded-xl border-2 border-green-700 text-green-700 font-bold hover:bg-green-50 transition-colors text-center">
|
||||
Get Started
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-center text-sm text-gray-600 mt-6">Queue priority: Enterprise first, then Professional, then
|
||||
Hobby for faster responses.</p>
|
||||
<p class="text-center text-sm text-gray-600 mt-2">
|
||||
<a href="/credits" target="_blank" class="inline-flex items-center text-green-700 hover:text-green-600" title="Learn more about AI credits">
|
||||
<i class="fa-solid fa-circle-question mr-1"></i>
|
||||
</a>
|
||||
Usage multipliers: Standard models burn 1x credits,
|
||||
Advanced burn 2x, Premium burn 3x. Example: 2,500 tokens on a 2x model consume 5,000 credits.</p>
|
||||
<p class="text-center text-sm text-gray-600 mt-2">Need more runway? Grab discounted AI energy boosts —
|
||||
biggest breaks for Enterprise.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Cost Comparison -->
|
||||
<section class="py-20 bg-amber-50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-16">
|
||||
<p class="text-sm font-medium text-gray-600 mb-3 uppercase tracking-wider">Value Proposition</p>
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-gray-900">Why Plugin Compass Saves You Money</h2>
|
||||
<p class="text-gray-700 max-w-3xl mx-auto">Compare our pricing to traditional development costs and see
|
||||
the massive savings.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
<div class="bg-green-50 rounded-2xl p-8 border border-green-200">
|
||||
<h3 class="text-2xl font-bold text-gray-900 mb-6">Cost Comparison</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="flex justify-between items-center p-4 bg-white rounded-lg border border-green-100">
|
||||
<span class="font-medium text-gray-900">Premium Plugin Subscriptions</span>
|
||||
<span class="font-bold text-red-600">$200-$1000/month</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center p-4 bg-white rounded-lg border border-green-100">
|
||||
<span class="font-medium text-gray-900">Custom Development (Agency)</span>
|
||||
<span class="font-bold text-red-600">$5000-$20000+</span>
|
||||
</div>
|
||||
<div
|
||||
class="flex justify-between items-center p-4 bg-green-700 text-white rounded-lg border border-green-700">
|
||||
<span class="font-medium">Plugin Compass (Business Plan)</span>
|
||||
<span class="font-bold">$29/month</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-8 text-center">
|
||||
<p class="text-sm text-gray-600 mb-4">Build unlimited custom plugins</p>
|
||||
<a href="/signup"
|
||||
class="w-full bg-green-700 text-white py-3 px-6 rounded-lg font-semibold hover:bg-green-600 transition-colors">
|
||||
Start Saving Now
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-start gap-4">
|
||||
<div
|
||||
class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0 mt-1">
|
||||
<i class="fa-solid fa-dollar-sign text-green-700"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-gray-900 mb-1">90% Cost Reduction</h4>
|
||||
<p class="text-gray-700">Replace multiple $50-$100/month plugins with a single $29/month
|
||||
subscription.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-4">
|
||||
<div
|
||||
class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0 mt-1">
|
||||
<i class="fa-solid fa-clock text-green-700"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-gray-900 mb-1">Faster Development</h4>
|
||||
<p class="text-gray-700">Build plugins in hours instead of weeks. Launch projects faster and
|
||||
reduce time-to-market.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-4">
|
||||
<div
|
||||
class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0 mt-1">
|
||||
<i class="fa-solid fa-infinity text-green-700"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-gray-900 mb-1">No Vendor Lock-in</h4>
|
||||
<p class="text-gray-700">Own your code completely. Export anytime and use your plugins
|
||||
forever without recurring fees.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ Section -->
|
||||
<section class="py-24 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-16">
|
||||
<p class="text-sm font-medium text-gray-600 mb-3 uppercase tracking-wider">Support</p>
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-gray-900">Frequently Asked Questions</h2>
|
||||
<p class="text-gray-700 max-w-3xl mx-auto">Have questions about our pricing or plans? We've got answers.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="max-w-3xl mx-auto space-y-6">
|
||||
<div
|
||||
class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 hover:border-green-200 transition-colors">
|
||||
<h4 class="font-bold text-gray-900 mb-2">Can I cancel my subscription?</h4>
|
||||
<p class="text-gray-600">Yes, you can cancel at any time from your account settings. You'll keep
|
||||
access until the end of your billing period.</p>
|
||||
</div>
|
||||
<div
|
||||
class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 hover:border-green-200 transition-colors">
|
||||
<h4 class="font-bold text-gray-900 mb-2">Do you offer a free trial?</h4>
|
||||
<p class="text-gray-600">We have a generous free plan that lets you explore all the basic features
|
||||
of the platform.</p>
|
||||
</div>
|
||||
<div
|
||||
class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 hover:border-green-200 transition-colors">
|
||||
<h4 class="font-bold text-gray-900 mb-2">Can I export my code?</h4>
|
||||
<p class="text-gray-600">Absolutely! All plans allow you to export your generated WordPress plugin
|
||||
as a ZIP file.</p>
|
||||
</div>
|
||||
<div
|
||||
class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 hover:border-green-200 transition-colors">
|
||||
<h4 class="font-bold text-gray-900 mb-2">What happens if I exceed my plan limits?</h4>
|
||||
<p class="text-gray-600">You can upgrade your plan at any time. If you need additional capacity,
|
||||
contact our support team for custom solutions.</p>
|
||||
</div>
|
||||
<div
|
||||
class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 hover:border-green-200 transition-colors">
|
||||
<h4 class="font-bold text-gray-900 mb-2">Do you offer discounts for non-profits or educational
|
||||
institutions?</h4>
|
||||
<p class="text-gray-600">Yes, we offer special pricing for non-profits and educational institutions.
|
||||
Contact our sales team for details.</p>
|
||||
</div>
|
||||
<div
|
||||
class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 hover:border-green-200 transition-colors">
|
||||
<h4 class="font-bold text-gray-900 mb-2">Can I change plans later?</h4>
|
||||
<p class="text-gray-600">Yes, you can upgrade or downgrade your plan at any time from your account
|
||||
settings. Changes take effect immediately.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-12 text-center">
|
||||
<a href="/faq" class="inline-flex items-center gap-2 px-8 py-3 bg-white border-2 border-green-700 text-green-700 font-bold rounded-xl hover:bg-green-50 transition-all">
|
||||
View Full FAQs <i class="fa-solid fa-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Final CTA -->
|
||||
<section class="py-24 bg-green-900 text-white relative overflow-hidden">
|
||||
<!-- Background Blobs -->
|
||||
<div
|
||||
class="absolute bottom-0 left-0 -translate-x-1/2 translate-y-1/2 w-96 h-96 bg-green-600/20 rounded-full mix-blend-multiply filter blur-[100px] opacity-40 animate-blob">
|
||||
</div>
|
||||
<div
|
||||
class="absolute bottom-0 right-0 translate-x-1/2 translate-y-1/4 w-96 h-96 bg-green-500/20 rounded-full mix-blend-multiply filter blur-[100px] opacity-40 animate-blob animation-delay-2000">
|
||||
</div>
|
||||
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
|
||||
<h2 class="text-4xl md:text-5xl font-bold mb-6">Ready to Start Saving?</h2>
|
||||
<p class="text-xl text-green-100 mb-10 max-w-3xl mx-auto">
|
||||
Choose the perfect plan and start building custom WordPress plugins with AI today. Replace expensive
|
||||
subscriptions and take control of your website's functionality.
|
||||
</p>
|
||||
|
||||
<div class="flex flex-col sm:flex-row justify-center items-center gap-4 mb-12">
|
||||
<a href="/signup"
|
||||
class="w-full sm:w-auto px-8 py-4 bg-white text-green-900 rounded-full font-bold hover:bg-green-50 transition-colors shadow-lg">
|
||||
Get Started Free
|
||||
</a>
|
||||
<a href="/features"
|
||||
class="w-full sm:w-auto px-8 py-4 border-2 border-white text-white rounded-full font-bold hover:bg-white/10 transition-colors">
|
||||
See All Features
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-left">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center flex-shrink-0 mt-1">
|
||||
<i class="fa-solid fa-rocket text-white"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold mb-1">Launch Faster</h4>
|
||||
<p class="text-green-100">Build production-ready plugins in hours, not weeks.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center flex-shrink-0 mt-1">
|
||||
<i class="fa-solid fa-shield text-white"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold mb-1">100% Secure</h4>
|
||||
<p class="text-green-100">Your code stays private and secure with enterprise-grade protection.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center flex-shrink-0 mt-1">
|
||||
<i class="fa-solid fa-headset text-white"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold mb-1">Expert Support</h4>
|
||||
<p class="text-green-100">Get help from our WordPress and AI experts when you need it.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-white border-t border-green-200 pt-16 pb-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="grid grid-cols-2 lg:grid-cols-5 gap-12 mb-16">
|
||||
<div class="col-span-2 lg:col-span-1">
|
||||
<div class="flex items-center gap-2 mb-6">
|
||||
<img src="/assets/Plugin.png" alt="Plugin Compass" class="w-8 h-8">
|
||||
<span class="font-bold text-xl tracking-tight text-gray-800">Plugin<span
|
||||
class="text-green-700">Compass</span></span>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm leading-relaxed">
|
||||
The smart way for WordPress site owners to replace expensive plugin subscriptions with custom
|
||||
solutions. Save thousands monthly.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-gray-900 mb-6">Product</h4>
|
||||
<ul class="space-y-4 text-sm">
|
||||
<li><a href="/features" class="text-gray-600 hover:text-green-700">Features</a></li>
|
||||
<li><a href="/pricing" class="text-gray-600 hover:text-green-700">Pricing</a></li>
|
||||
<li><a href="/templates.html" class="text-gray-600 hover:text-green-700">Templates</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-gray-900 mb-6">Resources</h4>
|
||||
<ul class="space-y-4 text-sm">
|
||||
<li><a href="/docs" class="text-gray-600 hover:text-green-700">Documentation</a></li>
|
||||
<li><a href="/faq" class="text-gray-600 hover:text-green-700">FAQ</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-gray-900 mb-6">Legal</h4>
|
||||
<ul class="space-y-4 text-sm">
|
||||
<li><a href="/privacy.html" class="text-gray-600 hover:text-green-700">Privacy Policy</a></li>
|
||||
<li><a href="/terms" class="text-gray-600 hover:text-green-700">Terms of Service</a></li>
|
||||
<li><a href="/contact" class="text-gray-600 hover:text-green-700">Contact Us</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-span-2 lg:col-span-1">
|
||||
<h4 class="font-bold text-gray-900 mb-6">Stay Updated</h4>
|
||||
<p class="text-gray-600 text-sm mb-4">Get the latest updates and WordPress tips.</p>
|
||||
<form id="footer-signup-form" class="flex flex-col gap-2">
|
||||
<input type="email" name="email" placeholder="Your email" required
|
||||
class="px-4 py-2 border border-green-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-700/20 text-sm">
|
||||
<button type="submit"
|
||||
class="bg-green-700 hover:bg-green-600 text-white px-4 py-2 rounded-lg font-medium text-sm transition-colors shadow-lg shadow-green-700/10">
|
||||
Subscribe
|
||||
</button>
|
||||
</form>
|
||||
<div id="signup-message" class="mt-2 text-xs hidden"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-t border-gray-100 pt-8 flex justify-center">
|
||||
<p class="text-gray-500 text-xs text-center">© 2026 Plugin Compass. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// State
|
||||
let currentCurrency = 'USD';
|
||||
let currentBillingPeriod = 'monthly';
|
||||
|
||||
// Mobile menu toggle
|
||||
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
|
||||
const mobileMenu = document.getElementById('mobile-menu');
|
||||
|
||||
mobileMenuBtn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
mobileMenu.classList.toggle('hidden');
|
||||
const isOpen = !mobileMenu.classList.contains('hidden');
|
||||
mobileMenuBtn.innerHTML = isOpen ?
|
||||
'<i class="fa-solid fa-times text-xl"></i>' :
|
||||
'<i class="fa-solid fa-bars text-xl"></i>';
|
||||
});
|
||||
|
||||
// Close mobile menu when clicking outside
|
||||
document.addEventListener('click', (e) => {
|
||||
if (mobileMenuBtn && mobileMenu) {
|
||||
if (!mobileMenuBtn.contains(e.target) && !mobileMenu.contains(e.target)) {
|
||||
mobileMenu.classList.add('hidden');
|
||||
mobileMenuBtn.innerHTML = '<i class="fa-solid fa-bars text-xl"></i>';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Currency configuration
|
||||
const currencyConfig = {
|
||||
USD: { rate: 1, symbol: '$', flag: '🇺🇸' },
|
||||
GBP: { rate: 0.79, symbol: '£', flag: '🇬🇧' },
|
||||
EUR: { rate: 1, symbol: '€', flag: '🇪🇺' }
|
||||
};
|
||||
|
||||
const baseMonthlyPrices = {
|
||||
hobby: 0,
|
||||
starter: 7.5,
|
||||
pro: 25,
|
||||
enterprise: 75
|
||||
};
|
||||
|
||||
function updateDisplay() {
|
||||
const config = currencyConfig[currentCurrency];
|
||||
const isYearly = currentBillingPeriod === 'yearly';
|
||||
const multiplier = isYearly ? 10 : 1;
|
||||
const duration = isYearly ? '/yr' : '/mo';
|
||||
|
||||
// Helper to format price
|
||||
const formatPrice = (basePrice) => {
|
||||
// Specific GBP overrides
|
||||
if (currentCurrency === 'GBP') {
|
||||
if (basePrice === 25) {
|
||||
return isYearly ? '£200' : '£20';
|
||||
}
|
||||
if (basePrice === 75) {
|
||||
return isYearly ? '£600' : '£60';
|
||||
}
|
||||
}
|
||||
|
||||
// Specific EUR overrides (match USD prices)
|
||||
if (currentCurrency === 'EUR') {
|
||||
if (basePrice === 0) return '€0';
|
||||
if (basePrice === 7.5) {
|
||||
return isYearly ? '€75' : '€7.50';
|
||||
}
|
||||
if (basePrice === 25) {
|
||||
return isYearly ? '€250' : '€25';
|
||||
}
|
||||
if (basePrice === 75) {
|
||||
return isYearly ? '€750' : '€75';
|
||||
}
|
||||
}
|
||||
|
||||
let finalPrice = basePrice * config.rate * multiplier;
|
||||
|
||||
// Specific rounding/formatting rules
|
||||
if (basePrice === 0) return config.symbol + '0';
|
||||
|
||||
if (currentCurrency === 'GBP' && basePrice === 7.5) {
|
||||
finalPrice = (isYearly ? 50 : 5);
|
||||
} else if (currentCurrency === 'USD' && basePrice === 7.5) {
|
||||
finalPrice = (isYearly ? 75 : 7.5);
|
||||
} else {
|
||||
finalPrice = Math.round(finalPrice * 10) / 10;
|
||||
if (finalPrice % 1 === 0) finalPrice = Math.round(finalPrice);
|
||||
}
|
||||
|
||||
// Add .00 or .50 for aesthetic consistency on certain prices
|
||||
if (currentCurrency === 'USD' && basePrice === 7.5 && !isYearly) return '$7.50';
|
||||
|
||||
return config.symbol + finalPrice;
|
||||
};
|
||||
|
||||
// Update pricing cards
|
||||
const hobbyPriceEl = document.getElementById('hobby-price');
|
||||
const starterPriceEl = document.getElementById('starter-price');
|
||||
const proPriceEl = document.getElementById('pro-price');
|
||||
const enterprisePriceEl = document.getElementById('enterprise-price');
|
||||
|
||||
if (hobbyPriceEl) hobbyPriceEl.textContent = formatPrice(baseMonthlyPrices.hobby);
|
||||
if (starterPriceEl) starterPriceEl.textContent = formatPrice(baseMonthlyPrices.starter);
|
||||
if (proPriceEl) proPriceEl.textContent = formatPrice(baseMonthlyPrices.pro);
|
||||
if (enterprisePriceEl) enterprisePriceEl.textContent = formatPrice(baseMonthlyPrices.enterprise);
|
||||
|
||||
document.querySelectorAll('.price-duration').forEach(el => el.textContent = duration);
|
||||
|
||||
// Update cost comparison card
|
||||
const costComparisonPrice = document.querySelector('.bg-green-700 .font-bold');
|
||||
if (costComparisonPrice) {
|
||||
const comparisonBase = 29;
|
||||
const finalComparison = currentCurrency === 'EUR' ? comparisonBase : Math.round(comparisonBase * config.rate);
|
||||
costComparisonPrice.textContent = config.symbol + finalComparison + '/month';
|
||||
}
|
||||
|
||||
// Update toggle button styles
|
||||
const monthlyBtn = document.getElementById('monthly-toggle');
|
||||
const yearlyBtn = document.getElementById('yearly-toggle');
|
||||
if (monthlyBtn && yearlyBtn) {
|
||||
if (isYearly) {
|
||||
yearlyBtn.classList.add('bg-green-700', 'text-white');
|
||||
yearlyBtn.classList.remove('text-gray-600');
|
||||
monthlyBtn.classList.remove('bg-green-700', 'text-white');
|
||||
monthlyBtn.classList.add('text-gray-600');
|
||||
} else {
|
||||
monthlyBtn.classList.add('bg-green-700', 'text-white');
|
||||
monthlyBtn.classList.remove('text-gray-600');
|
||||
yearlyBtn.classList.remove('bg-green-700', 'text-white');
|
||||
yearlyBtn.classList.add('text-gray-600');
|
||||
}
|
||||
}
|
||||
|
||||
// Update currency dropdown button
|
||||
const flagEl = document.getElementById('currency-flag');
|
||||
const codeEl = document.getElementById('currency-code');
|
||||
if (flagEl) flagEl.textContent = config.flag;
|
||||
if (codeEl) codeEl.textContent = currentCurrency;
|
||||
}
|
||||
|
||||
// Detect Location and Set Currency
|
||||
async function autoDetectCurrency() {
|
||||
try {
|
||||
const response = await fetch('https://ipapi.co/json/');
|
||||
const data = await response.json();
|
||||
if (data.currency && currencyConfig[data.currency]) {
|
||||
currentCurrency = data.currency;
|
||||
updateDisplay();
|
||||
}
|
||||
} catch (err) {
|
||||
console.log('Currency detection failed, defaulting to USD');
|
||||
}
|
||||
}
|
||||
|
||||
// Monthly/Yearly Listeners
|
||||
document.getElementById('monthly-toggle')?.addEventListener('click', () => {
|
||||
currentBillingPeriod = 'monthly';
|
||||
updateDisplay();
|
||||
});
|
||||
|
||||
document.getElementById('yearly-toggle')?.addEventListener('click', () => {
|
||||
currentBillingPeriod = 'yearly';
|
||||
updateDisplay();
|
||||
});
|
||||
|
||||
// Currency Dropdown Listeners
|
||||
const currencyBtn = document.getElementById('currency-btn');
|
||||
const currencyOptions = document.getElementById('currency-options');
|
||||
const currencyChevron = document.getElementById('currency-chevron');
|
||||
const currencyDropdown = document.getElementById('currency-dropdown');
|
||||
|
||||
currencyBtn?.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
const isOpen = !currencyOptions.classList.contains('hidden');
|
||||
if (isOpen) {
|
||||
currencyOptions.classList.add('hidden');
|
||||
currencyChevron.style.transform = 'translateY(-50%) rotate(0deg)';
|
||||
currencyDropdown.classList.remove('open');
|
||||
} else {
|
||||
currencyOptions.classList.remove('hidden');
|
||||
currencyChevron.style.transform = 'translateY(-50%) rotate(180deg)';
|
||||
currencyDropdown.classList.add('open');
|
||||
}
|
||||
});
|
||||
|
||||
document.querySelectorAll('.currency-option').forEach(option => {
|
||||
option.addEventListener('click', (e) => {
|
||||
currentCurrency = e.currentTarget.getAttribute('data-value');
|
||||
updateDisplay();
|
||||
currencyOptions.classList.add('hidden');
|
||||
currencyChevron.style.transform = 'translateY(-50%) rotate(0deg)';
|
||||
currencyDropdown.classList.remove('open');
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener('click', () => {
|
||||
if (currencyOptions) {
|
||||
currencyOptions.classList.add('hidden');
|
||||
currencyChevron.style.transform = 'translateY(-50%) rotate(0deg)';
|
||||
currencyDropdown.classList.remove('open');
|
||||
}
|
||||
});
|
||||
|
||||
// Initialize display and detection
|
||||
updateDisplay();
|
||||
autoDetectCurrency();
|
||||
|
||||
// Ensure "2 months free" text is displayed correctly when using affiliate links
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
if (urlParams.get('aff')) {
|
||||
const yearlyBtn = document.getElementById('yearly-toggle');
|
||||
if (yearlyBtn) {
|
||||
const freeSpan = yearlyBtn.querySelector('span');
|
||||
if (freeSpan && freeSpan.textContent !== '2 months free') {
|
||||
freeSpan.textContent = '2 months free';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Email Signup Form Handler
|
||||
const signupForm = document.getElementById('footer-signup-form');
|
||||
const signupMessage = document.getElementById('signup-message');
|
||||
|
||||
if (signupForm) {
|
||||
signupForm.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const email = signupForm.querySelector('input[name="email"]').value;
|
||||
const button = signupForm.querySelector('button');
|
||||
|
||||
button.disabled = true;
|
||||
button.textContent = 'Subscribing...';
|
||||
|
||||
try {
|
||||
const response = await fetch('https://emailmarketing.modelrailway3d.co.uk/api/webhooks/incoming/wh_0Z49zi_DGj4-lKJMOPO8-g', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
email: email,
|
||||
source: 'plugin_compass_footer',
|
||||
timestamp: new Date().toISOString()
|
||||
})
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
signupMessage.textContent = 'Successfully subscribed!';
|
||||
signupMessage.className = 'mt-2 text-xs text-green-600';
|
||||
signupForm.reset();
|
||||
} else {
|
||||
throw new Error('Failed to subscribe');
|
||||
}
|
||||
} catch (error) {
|
||||
signupMessage.textContent = 'Failed to subscribe. Please try again.';
|
||||
signupMessage.className = 'mt-2 text-xs text-red-600';
|
||||
} finally {
|
||||
signupMessage.classList.remove('hidden');
|
||||
button.disabled = false;
|
||||
button.textContent = 'Subscribe';
|
||||
|
||||
setTimeout(() => {
|
||||
signupMessage.classList.add('hidden');
|
||||
}, 5000);
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user