cfd8d9c706
Add dual-source blog system with Editor.js integration: - Blog storage supporting repo-based (JSON) and database sources - Admin panel with rich text editor using Editor.js - Public news page with infinite scroll - Individual blog post viewer page - Categories management in admin - Image upload functionality - 4 SEO blog posts about WordPress with PluginCompass promotion - 3 News blog posts about Plugin Compass - API endpoints for CRUD operations - Security and validation for admin operations Closes blog feature request
1102 lines
57 KiB
HTML
1102 lines
57 KiB
HTML
<!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="Build custom WordPress plugins with AI. Replace recurring plugin subscriptions with tailored solutions you can own and customize.">
|
|
<meta name="keywords"
|
|
content="WordPress plugin builder, AI plugin generator, custom WordPress plugins, replace expensive plugins, WordPress automation, no-code plugin builder">
|
|
<meta name="robots" content="index, follow">
|
|
<meta property="og:title" content="Plugin Compass - AI WordPress Plugin Builder">
|
|
<meta property="og:description"
|
|
content="Build custom WordPress plugins with AI. Replace recurring plugin subscriptions with tailored solutions. No coding required.">
|
|
<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 - AI WordPress Plugin Builder">
|
|
<meta name="twitter:description"
|
|
content="Build custom WordPress plugins with AI. Replace recurring plugin subscriptions with tailored solutions. No coding required.">
|
|
<link rel="canonical" href="">
|
|
<title>Plugin Compass - AI WordPress Plugin Builder | Create Custom Plugins Fast</title>
|
|
<link rel="icon" type="image/png" href="/assets/Plugin.png">
|
|
<script>
|
|
(function () {
|
|
var url = window.location.origin + '/';
|
|
document.querySelector('link[rel="canonical"]').setAttribute('href', url);
|
|
document.querySelector('meta[property="og:url"]').setAttribute('content', url);
|
|
})();
|
|
</script>
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "SoftwareApplication",
|
|
"name": "Plugin Compass",
|
|
"description": "AI-powered WordPress plugin builder that helps you create custom plugins to replace expensive subscriptions.",
|
|
"url": "{{BASE_URL}}",
|
|
"applicationCategory": "DeveloperApplication",
|
|
"operatingSystem": "WordPress",
|
|
"offers": {
|
|
"@type": "Offer",
|
|
"price": "0",
|
|
"priceCurrency": "USD",
|
|
"availability": "https://schema.org/InStock"
|
|
},
|
|
"author": {
|
|
"@type": "Organization",
|
|
"name": "Plugin Compass"
|
|
}
|
|
}
|
|
</script>
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "WebSite",
|
|
"name": "Plugin Compass",
|
|
"url": "{{BASE_URL}}",
|
|
"potentialAction": {
|
|
"@type": "SearchAction",
|
|
"target": {
|
|
"@type": "EntryPoint",
|
|
"urlTemplate": "{{BASE_URL}}/signup"
|
|
},
|
|
"query-input": "required name=plugin-description"
|
|
}
|
|
}
|
|
</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>
|
|
(function applyTailwindConfig(cfg, attempts = 0) {
|
|
try {
|
|
if (typeof window.tailwind !== 'undefined') {
|
|
window.tailwind.config = cfg;
|
|
return;
|
|
}
|
|
} catch (e) {
|
|
// ignore
|
|
}
|
|
|
|
if (attempts >= 20) {
|
|
console.warn('Tailwind not available after multiple attempts; config not applied.');
|
|
return;
|
|
}
|
|
|
|
setTimeout(() => applyTailwindConfig(cfg, attempts + 1), 100);
|
|
})({
|
|
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;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
</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-gray-700 hover:text-gray-900 transition-colors text-sm font-medium">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-gray-700 hover:text-gray-900 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>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden">
|
|
<!-- Background Blobs -->
|
|
<div
|
|
class="absolute top-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 top-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 lg:text-left">
|
|
<!-- Two-column hero — heading moved into left column -->
|
|
|
|
<!-- Dashboard Preview with Text -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center max-w-7xl mx-auto">
|
|
<!-- Left: Text Content (MailPilot-inspired) -->
|
|
<div class="lg:col-span-7 text-left space-y-6">
|
|
<h2 class="text-5xl md:text-6xl font-extrabold tracking-tight leading-tight text-gray-900">
|
|
Replace Expensive App Subscriptions
|
|
<br>
|
|
<span class="hero-gradient-text">With Custom WordPress Plugins</span>
|
|
</h2>
|
|
<p class="text-lg text-gray-700 leading-relaxed max-w-2xl">
|
|
Watch your custom WordPress plugin come to life in real-time. Our AI-powered builder creates
|
|
production-ready plugins tailored exactly to your needs.
|
|
</p>
|
|
|
|
<div class="flex items-center gap-4 mt-4">
|
|
<a href="/apps" class="inline-flex items-center px-6 py-3 bg-green-700 hover:bg-green-600 text-white rounded-full font-semibold shadow-md">
|
|
Get started <i class="fa-solid fa-arrow-right ml-2"></i>
|
|
</a>
|
|
<a href="/features" class="inline-flex items-center px-6 py-3 border border-gray-300 bg-white rounded-full font-medium hover:bg-gray-50">
|
|
Explore features <i class="fa-solid fa-circle-play ml-2"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right: Screenshot Card replaced by Builder Mockup -->
|
|
<div class="lg:col-span-5">
|
|
<div class="relative rounded-3xl bg-white p-6 shadow-2xl ring-1 ring-amber-100">
|
|
<div class="rounded-xl bg-amber-50 overflow-hidden aspect-[16/9] border border-green-700/20 relative">
|
|
<div class="absolute inset-0 flex">
|
|
<!-- Sidebar -->
|
|
<div class="w-64 border-r border-green-200 bg-amber-100 hidden md:block p-4 space-y-4">
|
|
<div class="h-8 w-3/4 bg-green-700 rounded animate-pulse"></div>
|
|
<div class="h-4 w-1/2 bg-green-600 rounded animate-pulse opacity-50"></div>
|
|
<div class="h-4 w-2/3 bg-green-600 rounded animate-pulse opacity-50"></div>
|
|
<div class="h-4 w-1/2 bg-green-600 rounded animate-pulse opacity-50"></div>
|
|
<div class="mt-8 h-32 bg-green-700/20 rounded border border-dashed border-green-300"></div>
|
|
</div>
|
|
<!-- Main Content -->
|
|
<div class="flex-1 p-8 text-left">
|
|
<div class="flex items-center gap-4 mb-8">
|
|
<div class="w-12 h-12 rounded-full bg-green-700/20 flex items-center justify-center text-green-700">
|
|
<i class="fa-solid fa-robot text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<div class="h-2 w-16 bg-gray-400 rounded mb-2"></div>
|
|
<div id="typewriter-text" class="text-xl font-mono text-gray-800 font-bold min-h-[28px]">Building features...</div>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-3">
|
|
<div class="h-24 bg-amber-100 rounded-lg border border-green-300 w-full flex items-center p-4 gap-4">
|
|
<div class="w-12 h-12 bg-gray-400 rounded"></div>
|
|
<div class="flex-1 space-y-2">
|
|
<div class="h-3 w-1/3 bg-gray-600 rounded"></div>
|
|
<div class="h-2 w-2/3 bg-gray-500 rounded"></div>
|
|
</div>
|
|
</div>
|
|
<div class="h-24 bg-amber-100 rounded-lg border border-green-300 w-full flex items-center p-4 gap-4 opacity-50">
|
|
<div class="w-12 h-12 bg-gray-400 rounded"></div>
|
|
<div class="flex-1 space-y-2">
|
|
<div class="h-3 w-1/4 bg-gray-600 rounded"></div>
|
|
<div class="h-2 w-1/2 bg-gray-500 rounded"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Restored Builder Preview Section (animated) -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mt-12">
|
|
<!-- Left Text -->
|
|
<div class="text-left space-y-6">
|
|
<h2 class="text-4xl md:text-5xl font-bold tracking-tight text-gray-900">Plugin Compass</h2>
|
|
<p class="text-xl text-gray-700 leading-relaxed">Watch your custom WordPress plugin come to life in real-time. Our AI-powered builder creates production-ready plugins tailored exactly to your needs.</p>
|
|
<div class="space-y-4">
|
|
<div class="flex items-start gap-3">
|
|
<div class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0 mt-1">
|
|
<i class="fa-solid fa-check text-green-700 text-sm"></i>
|
|
</div>
|
|
<p class="text-gray-700"><strong class="text-gray-900">Save thousands monthly</strong> by replacing expensive plugin subscriptions with custom solutions</p>
|
|
</div>
|
|
<div class="flex items-start gap-3">
|
|
<div class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0 mt-1">
|
|
<i class="fa-solid fa-check text-green-700 text-sm"></i>
|
|
</div>
|
|
<p class="text-gray-700"><strong class="text-gray-900">Built for your exact workflow</strong> - no compromises, no workarounds, no bloated features</p>
|
|
</div>
|
|
<div class="flex items-start gap-3">
|
|
<div class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0 mt-1">
|
|
<i class="fa-solid fa-check text-green-700 text-sm"></i>
|
|
</div>
|
|
<p class="text-gray-700"><strong class="text-gray-900">Own your code forever</strong> - download, customize, and deploy without vendor lock-in</p>
|
|
</div>
|
|
</div>
|
|
<div class="pt-4">
|
|
<a href="/signup" class="inline-flex items-center justify-center px-8 py-4 bg-green-700 text-white rounded-full font-bold hover:bg-green-600 transition-all shadow-lg shadow-green-700/30 hover:shadow-green-700/40 transform hover:-translate-y-0.5">Start Building Now <i class="fa-solid fa-arrow-right ml-2"></i></a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right: Animated Preview (lazy, connection-aware) -->
|
|
<div class="relative rounded-3xl bg-white p-6 shadow-2xl ring-1 ring-amber-100">
|
|
<div class="rounded-xl bg-amber-50 overflow-hidden aspect-[16/9] border border-green-700/20 relative">
|
|
<img class="lazy-animate w-full h-full object-cover" data-src="/assets/animation.webp" data-poster="/assets/Plugin.png" alt="Builder animation preview" width="900" height="506" loading="lazy" decoding="async" style="display:block">
|
|
<noscript><img src="/assets/animation.webp" alt="Builder animation preview" class="w-full h-full object-cover"></noscript>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- How It Works -->
|
|
<section class="py-16 border-y border-green-300 bg-amber-100/50">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-12">
|
|
<p class="text-sm font-medium text-gray-600 mb-3 uppercase tracking-wider">How it works</p>
|
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-900">Build a custom plugin in three simple steps
|
|
</h2>
|
|
<p class="mt-4 text-gray-700 max-w-2xl mx-auto">
|
|
Describe what you want, iterate with AI, then download a ready-to-install WordPress plugin you can
|
|
own and modify.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
<div class="p-8 rounded-2xl bg-white border border-green-200 hover:border-green-400 transition-colors">
|
|
<div class="w-12 h-12 rounded-lg bg-green-100 flex items-center justify-center text-green-700 mb-6">
|
|
<i class="fa-solid fa-pen-to-square text-xl"></i>
|
|
</div>
|
|
<h3 class="text-xl font-semibold mb-3 text-gray-900">1) Describe your idea</h3>
|
|
<p class="text-gray-700 leading-relaxed">
|
|
Explain the workflow you need in plain English—pages, forms, admin screens, rules, permissions,
|
|
and integrations.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="p-8 rounded-2xl bg-white border border-green-200 hover:border-green-400 transition-colors">
|
|
<div class="w-12 h-12 rounded-lg bg-green-100 flex items-center justify-center text-green-700 mb-6">
|
|
<i class="fa-solid fa-wand-magic-sparkles text-xl"></i>
|
|
</div>
|
|
<h3 class="text-xl font-semibold mb-3 text-gray-900">2) Build & refine</h3>
|
|
<p class="text-gray-700 leading-relaxed">
|
|
Add features, adjust behavior, and fix edge cases by chatting. The builder updates the code as
|
|
you go.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="p-8 rounded-2xl bg-white border border-green-200 hover:border-green-400 transition-colors">
|
|
<div class="w-12 h-12 rounded-lg bg-green-100 flex items-center justify-center text-green-700 mb-6">
|
|
<i class="fa-solid fa-download text-xl"></i>
|
|
</div>
|
|
<h3 class="text-xl font-semibold mb-3 text-gray-900">3) Download & install</h3>
|
|
<p class="text-gray-700 leading-relaxed">
|
|
Export your plugin as a ZIP, install it on your WordPress site, and keep full control of the
|
|
source code.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Pricing Section -->
|
|
<section id="pricing" class="py-24 bg-amber-50">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-16">
|
|
<h2 class="text-4xl font-bold text-gray-900 mb-4">Simple, transparent pricing</h2>
|
|
<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">-20%</span></button>
|
|
</div>
|
|
|
|
<div class="relative">
|
|
<select id="currency-selector"
|
|
class="appearance-none 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 focus:outline-none focus:ring-2 focus:ring-green-700/20 cursor-pointer">
|
|
<option value="USD">USD ($)</option>
|
|
<option value="GBP">GBP (£)</option>
|
|
<option value="EUR">EUR (€)</option>
|
|
</select>
|
|
<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"></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"
|
|
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"
|
|
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"
|
|
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 class="mt-16 text-center">
|
|
<a href="/pricing"
|
|
class="inline-flex items-center justify-center px-8 py-3 bg-green-700 text-white rounded-full font-bold hover:bg-green-600 transition-all shadow-lg shadow-green-700/20">
|
|
View Full Pricing Details <i class="fa-solid fa-arrow-right ml-2"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features Grid -->
|
|
<section id="features" 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">
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-gray-900">Replace Expensive Apps & Save Thousands
|
|
</h2>
|
|
<p class="text-gray-700 max-w-2xl mx-auto">Stop paying monthly fees for apps that don't quite fit. Build
|
|
exactly what your business needs and own it forever.</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
<!-- Feature 1 -->
|
|
<div
|
|
class="p-8 rounded-2xl bg-white border border-green-200 hover:border-green-400 transition-colors group">
|
|
<div
|
|
class="w-12 h-12 rounded-lg bg-green-100 flex items-center justify-center text-green-700 mb-6 group-hover:scale-110 transition-transform">
|
|
<i class="fa-solid fa-dollar-sign text-xl"></i>
|
|
</div>
|
|
<h3 class="text-xl font-semibold mb-3 text-gray-900">Slash Your Plugin Costs</h3>
|
|
<p class="text-gray-700 leading-relaxed">Replace recurring plugin subscriptions with custom-built
|
|
solutions tailored to your workflow. Consolidate multiple tools into a plugin you own.</p>
|
|
</div>
|
|
|
|
<!-- Feature 2 -->
|
|
<div
|
|
class="p-8 rounded-2xl bg-white border border-green-200 hover:border-green-400 transition-colors group">
|
|
<div
|
|
class="w-12 h-12 rounded-lg bg-green-100 flex items-center justify-center text-green-700 mb-6 group-hover:scale-110 transition-transform">
|
|
<i class="fa-solid fa-puzzle-piece text-xl"></i>
|
|
</div>
|
|
<h3 class="text-xl font-semibold mb-3 text-gray-900">Perfect Fit Solutions</h3>
|
|
<p class="text-gray-700 leading-relaxed">Off-the-shelf apps never quite match your workflow. Build
|
|
exactly what you need—no compromises, no workarounds, no feature bloat.</p>
|
|
</div>
|
|
|
|
<!-- Feature 3 -->
|
|
<div
|
|
class="p-8 rounded-2xl bg-white border border-green-200 hover:border-green-400 transition-colors group">
|
|
<div
|
|
class="w-12 h-12 rounded-lg bg-green-100 flex items-center justify-center text-green-700 mb-6 group-hover:scale-110 transition-transform">
|
|
<i class="fa-solid fa-rocket text-xl"></i>
|
|
</div>
|
|
<h3 class="text-xl font-semibold mb-3 text-gray-900">Launch in Hours, Not Months</h3>
|
|
<p class="text-gray-700 leading-relaxed">No coding skills required. Describe what you want in plain
|
|
English and get a working app in hours. Zero technical complexity.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Why Build Your Own -->
|
|
<section class="py-20 bg-green-900 text-white">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-12">
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Why build your own plugins?</h2>
|
|
<p class="text-green-200 max-w-2xl mx-auto">
|
|
Skip generic solutions, licensing limitations, and recurring payments—own your code and keep every
|
|
dollar you save.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
<div class="p-6 bg-white/10 backdrop-blur-sm rounded-xl border border-white/20">
|
|
<div class="w-10 h-10 rounded-lg bg-green-600 flex items-center justify-center text-white mb-4">
|
|
<i class="fa-solid fa-lock-open text-lg"></i>
|
|
</div>
|
|
<h3 class="text-lg font-bold mb-2">Own it forever</h3>
|
|
<p class="text-green-200 text-sm leading-relaxed">
|
|
Full access to source code. No vendor lock-in, no license fees, no usage limits.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="p-6 bg-white/10 backdrop-blur-sm rounded-xl border border-white/20">
|
|
<div class="w-10 h-10 rounded-lg bg-green-600 flex items-center justify-center text-white mb-4">
|
|
<i class="fa-solid fa-piggy-bank text-lg"></i>
|
|
</div>
|
|
<h3 class="text-lg font-bold mb-2">Pay once, use forever</h3>
|
|
<p class="text-green-200 text-sm leading-relaxed">
|
|
Instead of paying monthly, build it once and keep it running as long as you want.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="p-6 bg-white/10 backdrop-blur-sm rounded-xl border border-white/20">
|
|
<div class="w-10 h-10 rounded-lg bg-green-600 flex items-center justify-center text-white mb-4">
|
|
<i class="fa-solid fa-sliders text-lg"></i>
|
|
</div>
|
|
<h3 class="text-lg font-bold mb-2">Perfect fit, every time</h3>
|
|
<p class="text-green-200 text-sm leading-relaxed">
|
|
Built for your exact workflow. No bloated features or clunky workarounds.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="p-6 bg-white/10 backdrop-blur-sm rounded-xl border border-white/20">
|
|
<div class="w-10 h-10 rounded-lg bg-green-600 flex items-center justify-center text-white mb-4">
|
|
<i class="fa-solid fa-bolt text-lg"></i>
|
|
</div>
|
|
<h3 class="text-lg font-bold mb-2">Fast iteration</h3>
|
|
<p class="text-green-200 text-sm leading-relaxed">
|
|
Need changes? Update and rebuild in minutes instead of waiting on vendor support.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA Footer -->
|
|
<section class="py-24 bg-amber-50">
|
|
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<h2 class="text-4xl font-bold mb-8 text-gray-900">Build Your Custom Plugin Today</h2>
|
|
<p class="text-xl text-gray-700 mb-10">Start building WordPress plugins that fit your exact needs. No coding
|
|
experience required.</p>
|
|
<a href="/signup"
|
|
class="inline-flex items-center justify-center px-8 py-4 bg-green-700 text-white rounded-full font-bold hover:bg-green-600 transition-all shadow-xl shadow-green-700/20">
|
|
Get Started Free <i class="fa-solid fa-arrow-right ml-2"></i>
|
|
</a>
|
|
</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>
|
|
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
|
|
const mobileMenu = document.getElementById('mobile-menu');
|
|
|
|
if (mobileMenuBtn && mobileMenu) {
|
|
mobileMenuBtn.addEventListener('click', () => {
|
|
mobileMenu.classList.toggle('hidden');
|
|
});
|
|
}
|
|
|
|
// Smooth scroll for in-page anchor links
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
anchor.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
const target = document.querySelector(this.getAttribute('href'));
|
|
if (target) {
|
|
target.scrollIntoView({ behavior: 'smooth' });
|
|
if (mobileMenu) mobileMenu.classList.add('hidden');
|
|
}
|
|
});
|
|
});
|
|
|
|
// Navbar scroll effect
|
|
window.addEventListener('scroll', () => {
|
|
const navbar = document.getElementById('navbar');
|
|
if (!navbar) return;
|
|
if (window.scrollY > 20) {
|
|
navbar.classList.add('shadow-md', 'h-16');
|
|
navbar.classList.remove('h-20');
|
|
} else {
|
|
navbar.classList.remove('shadow-md', 'h-16');
|
|
navbar.classList.add('h-20');
|
|
}
|
|
});
|
|
|
|
// Currency and Pricing Logic
|
|
const monthlyToggle = document.getElementById('monthly-toggle');
|
|
const yearlyToggle = document.getElementById('yearly-toggle');
|
|
const currencySelector = document.getElementById('currency-selector');
|
|
const hobbyPrice = document.getElementById('hobby-price');
|
|
const starterPrice = document.getElementById('starter-price');
|
|
const proPrice = document.getElementById('pro-price');
|
|
const enterprisePrice = document.getElementById('enterprise-price');
|
|
const durations = document.querySelectorAll('.price-duration');
|
|
|
|
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 guessCurrency() {
|
|
try {
|
|
const stored = localStorage.getItem('pc_currency');
|
|
if (stored && currencyConfig[stored]) return stored;
|
|
} catch (_) {
|
|
// ignore
|
|
}
|
|
|
|
const lang = (navigator.languages && navigator.languages[0]) || navigator.language || '';
|
|
const region = (lang.split('-')[1] || '').toUpperCase();
|
|
|
|
if (region === 'GB') return 'GBP';
|
|
|
|
const eurRegions = new Set([
|
|
'AT', 'BE', 'BG', 'HR', 'CY', 'CZ', 'DK', 'EE', 'FI', 'FR', 'DE', 'GR', 'HU', 'IE', 'IT', 'LV', 'LT', 'LU', 'MT', 'NL', 'PL', 'PT', 'RO', 'SK', 'SI', 'ES', 'SE',
|
|
'IS', 'LI', 'NO', 'CH'
|
|
]);
|
|
if (eurRegions.has(region)) return 'EUR';
|
|
|
|
try {
|
|
const tz = Intl.DateTimeFormat().resolvedOptions().timeZone || '';
|
|
if (tz === 'Europe/London') return 'GBP';
|
|
if (tz.startsWith('Europe/')) return 'EUR';
|
|
} catch (_) {
|
|
// ignore
|
|
}
|
|
|
|
return 'USD';
|
|
}
|
|
|
|
let currentMode = 'monthly';
|
|
let currentCurrency = guessCurrency();
|
|
|
|
function formatPrice(basePrice) {
|
|
const config = currencyConfig[currentCurrency];
|
|
const isYearly = currentMode === 'yearly';
|
|
|
|
// 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';
|
|
}
|
|
}
|
|
|
|
const multiplier = isYearly ? 10 : 1;
|
|
let finalPrice = basePrice * config.rate * multiplier;
|
|
|
|
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);
|
|
}
|
|
|
|
if (currentCurrency === 'USD' && basePrice === 7.5 && !isYearly) return '$7.50';
|
|
|
|
return config.symbol + finalPrice;
|
|
}
|
|
|
|
function renderPrices() {
|
|
if (currencySelector) currencySelector.value = currentCurrency;
|
|
if (hobbyPrice) hobbyPrice.textContent = formatPrice(baseMonthlyPrices.hobby);
|
|
if (starterPrice) starterPrice.textContent = formatPrice(baseMonthlyPrices.starter);
|
|
if (proPrice) proPrice.textContent = formatPrice(baseMonthlyPrices.pro);
|
|
if (enterprisePrice) enterprisePrice.textContent = formatPrice(baseMonthlyPrices.enterprise);
|
|
|
|
const duration = currentMode === 'yearly' ? '/yr' : '/mo';
|
|
durations.forEach(d => d.textContent = duration);
|
|
|
|
try {
|
|
localStorage.setItem('pc_currency', currentCurrency);
|
|
} catch (_) {
|
|
// ignore
|
|
}
|
|
}
|
|
|
|
function setMode(mode) {
|
|
currentMode = mode === 'yearly' ? 'yearly' : 'monthly';
|
|
|
|
if (monthlyToggle && yearlyToggle) {
|
|
if (currentMode === 'yearly') {
|
|
yearlyToggle.classList.add('bg-green-700', 'text-white', 'shadow-sm');
|
|
yearlyToggle.classList.remove('text-gray-600', 'hover:text-gray-900');
|
|
monthlyToggle.classList.remove('bg-green-700', 'text-white', 'shadow-sm');
|
|
monthlyToggle.classList.add('text-gray-600', 'hover:text-gray-900');
|
|
} else {
|
|
monthlyToggle.classList.add('bg-green-700', 'text-white', 'shadow-sm');
|
|
monthlyToggle.classList.remove('text-gray-600', 'hover:text-gray-900');
|
|
yearlyToggle.classList.remove('bg-green-700', 'text-white', 'shadow-sm');
|
|
yearlyToggle.classList.add('text-gray-600', 'hover:text-gray-900');
|
|
}
|
|
}
|
|
|
|
renderPrices();
|
|
}
|
|
|
|
if (monthlyToggle) monthlyToggle.addEventListener('click', () => setMode('monthly'));
|
|
if (yearlyToggle) yearlyToggle.addEventListener('click', () => setMode('yearly'));
|
|
|
|
if (currencySelector) {
|
|
currencySelector.addEventListener('change', (e) => {
|
|
const next = e.target.value;
|
|
if (!currencyConfig[next]) return;
|
|
currentCurrency = next;
|
|
renderPrices();
|
|
});
|
|
}
|
|
|
|
renderPrices();
|
|
|
|
// Typewriter Effect
|
|
const typeWriterElement = document.getElementById('typewriter-text');
|
|
const typeWriterSteps = [
|
|
"Analyzing requests...",
|
|
"Designing interface...",
|
|
"Building features...",
|
|
"Optimizing code...",
|
|
"Plugin Ready!"
|
|
];
|
|
|
|
let stepIndex = 0;
|
|
let charIndex = 0;
|
|
let isDeleting = false;
|
|
let typeSpeed = 100;
|
|
|
|
function typeWriter() {
|
|
if (!typeWriterElement) return;
|
|
const currentStep = typeWriterSteps[stepIndex];
|
|
|
|
if (isDeleting) {
|
|
typeWriterElement.textContent = currentStep.substring(0, charIndex - 1);
|
|
charIndex--;
|
|
typeSpeed = 50;
|
|
} else {
|
|
typeWriterElement.textContent = currentStep.substring(0, charIndex + 1);
|
|
charIndex++;
|
|
typeSpeed = 100;
|
|
}
|
|
|
|
if (!isDeleting && charIndex === currentStep.length) {
|
|
isDeleting = true;
|
|
typeSpeed = stepIndex === typeWriterSteps.length - 1 ? 3000 : 2000;
|
|
} else if (isDeleting && charIndex === 0) {
|
|
isDeleting = false;
|
|
stepIndex = (stepIndex + 1) % typeWriterSteps.length;
|
|
typeSpeed = 500;
|
|
}
|
|
|
|
setTimeout(typeWriter, typeSpeed);
|
|
}
|
|
|
|
if (typeWriterElement) {
|
|
typeWriter();
|
|
}
|
|
|
|
// 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);
|
|
}
|
|
});
|
|
}
|
|
// Lazy load animated/webp preview with connection checks (reduces server load) 🔧
|
|
(function () {
|
|
const lazyImages = document.querySelectorAll('.lazy-animate');
|
|
|
|
function shouldLoadFull() {
|
|
try {
|
|
const conn = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
|
|
if (!conn) return true;
|
|
if (conn.saveData) return false;
|
|
const type = (conn.effectiveType || '').toLowerCase();
|
|
if (type.includes('2g') || type === 'slow-2g') return false;
|
|
return true;
|
|
} catch (e) {
|
|
return true;
|
|
}
|
|
}
|
|
|
|
function loadImg(el) {
|
|
const loadFull = shouldLoadFull();
|
|
const src = loadFull ? el.dataset.src : (el.dataset.poster || '/assets/Plugin.png');
|
|
if (src) {
|
|
el.src = src;
|
|
el.removeAttribute('data-src');
|
|
}
|
|
el.addEventListener('error', () => {
|
|
if (el.dataset.poster) el.src = el.dataset.poster;
|
|
});
|
|
}
|
|
|
|
if ('IntersectionObserver' in window) {
|
|
const io = new IntersectionObserver((entries, obs) => {
|
|
entries.forEach(e => {
|
|
if (e.isIntersecting) {
|
|
loadImg(e.target);
|
|
obs.unobserve(e.target);
|
|
}
|
|
});
|
|
}, {rootMargin: '200px'});
|
|
lazyImages.forEach(img => io.observe(img));
|
|
} else {
|
|
lazyImages.forEach(loadImg);
|
|
}
|
|
|
|
// Respect reduced-motion preference: prefer poster when motion reduced
|
|
try {
|
|
const prefersReduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
if (prefersReduced) {
|
|
document.querySelectorAll('.lazy-animate').forEach(img => {
|
|
img.dataset.src = img.dataset.poster || img.dataset.src;
|
|
});
|
|
}
|
|
} catch (e) {}
|
|
})();
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|