731 lines
38 KiB
HTML
731 lines
38 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="Discover Plugin Compass AI builder features. Build custom WordPress plugins with AI to replace expensive subscriptions.">
|
|
<meta name="keywords"
|
|
content="WordPress plugin builder features, AI plugin generator features, custom WordPress plugins, replace expensive plugins, WordPress automation features">
|
|
<meta name="robots" content="index, follow">
|
|
<meta property="og:title" content="Plugin Compass Features - AI WordPress Plugin Builder">
|
|
<meta property="og:description"
|
|
content="Discover how Plugin Compass AI builder helps you create custom WordPress plugins to replace expensive subscriptions.">
|
|
<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 Features - AI WordPress Plugin Builder">
|
|
<meta name="twitter:description"
|
|
content="Discover how Plugin Compass AI builder helps you create custom WordPress plugins to replace expensive subscriptions.">
|
|
<link rel="canonical" href="">
|
|
<title>Plugin Compass Features - AI WordPress Plugin Builder</title>
|
|
<link rel="icon" type="image/png" href="/assets/Plugin.png">
|
|
<script>
|
|
(function () {
|
|
var url = window.location.origin + '/features';
|
|
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;
|
|
-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);
|
|
}
|
|
</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-green-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-green-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">
|
|
<h1 class="text-5xl md:text-7xl font-bold tracking-tight mb-6 leading-tight text-gray-900">
|
|
AI-Powered Plugin Builder
|
|
</h1>
|
|
|
|
<p class="mt-4 text-xl text-gray-700 max-w-3xl mx-auto mb-10 leading-relaxed">
|
|
Discover how Plugin Compass AI builder creates custom WordPress plugins that replace expensive
|
|
subscriptions. Build exactly what your business needs and own it forever.
|
|
</p>
|
|
|
|
<div class="flex flex-col sm:flex-row justify-center items-center gap-4 mb-16">
|
|
<a href="/signup"
|
|
class="w-full sm:w-auto px-8 py-4 bg-green-700 text-white rounded-full font-bold hover:bg-green-600 transition-colors shadow-[0_0_20px_rgba(22,163,74,0.3)]">
|
|
Start Building Free
|
|
</a>
|
|
<a href="/apps"
|
|
class="w-full sm:w-auto px-8 py-4 border-2 border-green-700 text-green-700 rounded-full font-bold hover:bg-green-50 transition-colors">
|
|
View Dashboard
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- AI Builder Features -->
|
|
<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">
|
|
<p class="text-sm font-medium text-gray-600 mb-3 uppercase tracking-wider">AI Builder</p>
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-gray-900">Build Custom Plugins with AI</h2>
|
|
<p class="text-gray-700 max-w-3xl mx-auto">Our AI-powered builder creates production-ready WordPress
|
|
plugins tailored to your exact needs. Replace expensive subscriptions with custom solutions you own
|
|
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 feature-card">
|
|
<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-robot text-xl"></i>
|
|
</div>
|
|
<h3 class="text-xl font-semibold mb-3 text-gray-900">AI-Powered Generation</h3>
|
|
<p class="text-gray-700 leading-relaxed">Describe your plugin in plain English and watch as our AI
|
|
generates production-ready code. No coding skills required.</p>
|
|
</div>
|
|
|
|
<!-- Feature 2 -->
|
|
<div
|
|
class="p-8 rounded-2xl bg-white border border-green-200 hover:border-green-400 transition-colors feature-card">
|
|
<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-code text-xl"></i>
|
|
</div>
|
|
<h3 class="text-xl font-semibold mb-3 text-gray-900">Production-Ready Code</h3>
|
|
<p class="text-gray-700 leading-relaxed">Get clean, well-structured PHP and JavaScript code that
|
|
follows WordPress best practices. Ready to install and use immediately.</p>
|
|
</div>
|
|
|
|
<!-- Feature 3 -->
|
|
<div
|
|
class="p-8 rounded-2xl bg-white border border-green-200 hover:border-green-400 transition-colors feature-card">
|
|
<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">One-Click Export</h3>
|
|
<p class="text-gray-700 leading-relaxed">Download your complete plugin as a ZIP file. Install it on
|
|
any WordPress site and keep full control of your code.</p>
|
|
</div>
|
|
|
|
<!-- Feature 4 -->
|
|
<div
|
|
class="p-8 rounded-2xl bg-white border border-green-200 hover:border-green-400 transition-colors feature-card">
|
|
<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-cogs text-xl"></i>
|
|
</div>
|
|
<h3 class="text-xl font-semibold mb-3 text-gray-900">Custom Functionality</h3>
|
|
<p class="text-gray-700 leading-relaxed">Build plugins with custom post types, admin interfaces,
|
|
REST API endpoints, and integrations tailored to your workflow.</p>
|
|
</div>
|
|
|
|
<!-- Feature 5 -->
|
|
<div
|
|
class="p-8 rounded-2xl bg-white border border-green-200 hover:border-green-400 transition-colors feature-card">
|
|
<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-palette text-xl"></i>
|
|
</div>
|
|
<h3 class="text-xl font-semibold mb-3 text-gray-900">Custom UI Components</h3>
|
|
<p class="text-gray-700 leading-relaxed">Create custom admin interfaces, settings pages, and
|
|
frontend components that match your brand and workflow.</p>
|
|
</div>
|
|
|
|
<!-- Feature 6 -->
|
|
<div
|
|
class="p-8 rounded-2xl bg-white border border-green-200 hover:border-green-400 transition-colors feature-card">
|
|
<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-database text-xl"></i>
|
|
</div>
|
|
<h3 class="text-xl font-semibold mb-3 text-gray-900">Database Integration</h3>
|
|
<p class="text-gray-700 leading-relaxed">Automatically generate custom database tables,
|
|
relationships, and data structures for your plugin's specific needs.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Cost Savings Section -->
|
|
<section class="py-20 bg-white">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
|
<div>
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-6 text-gray-900">Save Thousands Monthly</h2>
|
|
<p class="text-xl text-gray-700 mb-8">Replace multiple expensive plugin subscriptions with a single
|
|
custom solution.</p>
|
|
|
|
<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">Eliminate Recurring Costs</h4>
|
|
<p class="text-gray-700">Stop paying $50-$500/month for off-the-shelf plugins. Build
|
|
once, own forever.</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-chart-line text-green-700"></i>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-semibold text-gray-900 mb-1">Consolidate Multiple Plugins</h4>
|
|
<p class="text-gray-700">Combine functionality from multiple plugins into one
|
|
streamlined solution.</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. No licensing fees, no usage limits,
|
|
no restrictions.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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>
|
|
</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>
|
|
|
|
<!-- Advanced Features -->
|
|
<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">Advanced Capabilities</p>
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-gray-900">Powerful Features for Professional
|
|
Developers</h2>
|
|
<p class="text-gray-700 max-w-3xl mx-auto">Plugin Compass isn't just for beginners. Advanced users can
|
|
leverage powerful features to build complex, production-ready applications.</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
<div class="p-8 rounded-2xl bg-green-50 border border-green-200">
|
|
<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-shield-alt text-xl"></i>
|
|
</div>
|
|
<h3 class="text-xl font-semibold mb-3 text-gray-900">Security Best Practices</h3>
|
|
<p class="text-gray-700 leading-relaxed mb-4">Built-in security features to protect your plugins and
|
|
user data.</p>
|
|
<ul class="space-y-2 text-sm text-gray-600">
|
|
<li class="flex items-center gap-2">
|
|
<i class="fa-solid fa-check text-green-600"></i>
|
|
CSRF protection
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<i class="fa-solid fa-check text-green-600"></i>
|
|
Input validation
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<i class="fa-solid fa-check text-green-600"></i>
|
|
Secure authentication
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="p-8 rounded-2xl bg-green-50 border border-green-200">
|
|
<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-cubes text-xl"></i>
|
|
</div>
|
|
<h3 class="text-xl font-semibold mb-3 text-gray-900">Modular Architecture</h3>
|
|
<p class="text-gray-700 leading-relaxed mb-4">Build plugins with clean, modular architecture for
|
|
easy maintenance and scalability.</p>
|
|
<ul class="space-y-2 text-sm text-gray-600">
|
|
<li class="flex items-center gap-2">
|
|
<i class="fa-solid fa-check text-green-600"></i>
|
|
Separation of concerns
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<i class="fa-solid fa-check text-green-600"></i>
|
|
Reusable components
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<i class="fa-solid fa-check text-green-600"></i>
|
|
Easy to extend
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Testimonials -->
|
|
<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-12">
|
|
<p class="text-sm font-medium text-gray-600 mb-3 uppercase tracking-wider">Success Stories</p>
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-gray-900">What Our Users Are Building</h2>
|
|
<p class="text-gray-700 max-w-3xl mx-auto">See how businesses are using Plugin Compass to replace
|
|
expensive subscriptions and build custom solutions.</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-1 gap-8 max-w-2xl mx-auto">
|
|
<div class="bg-white p-8 rounded-2xl border border-green-200 shadow-sm">
|
|
<div class="flex items-center gap-4 mb-6">
|
|
<div
|
|
class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-700 font-bold">
|
|
EC
|
|
</div>
|
|
<div>
|
|
<h4 class="font-semibold text-gray-900">E-commerce Store</h4>
|
|
<p class="text-sm text-gray-600">Replaced 5 premium plugins</p>
|
|
</div>
|
|
</div>
|
|
<p class="text-gray-700 mb-6">"We replaced $450/month in plugin subscriptions with a single custom
|
|
plugin that does exactly what we need. The AI builder made it incredibly easy."</p>
|
|
<div class="flex items-center gap-2 text-sm text-gray-600">
|
|
<i class="fa-solid fa-check text-green-600"></i>
|
|
<span>Saved $5,400/year</span>
|
|
</div>
|
|
</div>
|
|
</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 Build Your Custom Plugin?</h2>
|
|
<p class="text-xl text-green-100 mb-10 max-w-3xl mx-auto">
|
|
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">
|
|
Start Building Free
|
|
</a>
|
|
<a href="/apps"
|
|
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">
|
|
View Dashboard
|
|
</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 in Hours</h4>
|
|
<p class="text-green-200 text-sm">Build and deploy custom plugins faster than ever before.</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-dollar-sign text-white"></i>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-semibold mb-1">Save Thousands</h4>
|
|
<p class="text-green-200 text-sm">Replace expensive plugin subscriptions with affordable custom
|
|
solutions.</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-lock text-white"></i>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-semibold mb-1">Own Your Code</h4>
|
|
<p class="text-green-200 text-sm">Full control over your plugins with no vendor lock-in or
|
|
restrictions.</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="#" 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. Built for
|
|
WordPress.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
|
|
const mobileMenu = document.getElementById('mobile-menu');
|
|
|
|
mobileMenuBtn.addEventListener('click', () => {
|
|
mobileMenu.classList.toggle('hidden');
|
|
});
|
|
|
|
// Smooth scroll for 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'
|
|
});
|
|
// Close mobile menu if open
|
|
mobileMenu.classList.add('hidden');
|
|
}
|
|
});
|
|
});
|
|
|
|
// Navbar scroll effect
|
|
window.addEventListener('scroll', () => {
|
|
const navbar = document.getElementById('navbar');
|
|
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');
|
|
}
|
|
});
|
|
|
|
// 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> |