199 lines
10 KiB
HTML
199 lines
10 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">
|
|
<title>404 - Page Not Found | Plugin Compass</title>
|
|
<link rel="icon" type="image/png" href="/assets/Plugin.png">
|
|
<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&family=Space+Grotesk:wght@300;400;500;600;700&display=swap"
|
|
rel="stylesheet">
|
|
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ['Inter', 'sans-serif'],
|
|
display: ['Space Grotesk', 'sans-serif'],
|
|
},
|
|
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>
|
|
.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 min-h-screen flex flex-col">
|
|
|
|
<!-- Navigation -->
|
|
<nav class="fixed w-full z-50 glass-nav transition-all duration-300">
|
|
<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 rounded-lg">
|
|
<span class="font-bold text-xl tracking-tight text-gray-800">Plugin<span
|
|
class="text-green-700">Compass</span></span>
|
|
</a>
|
|
|
|
<div class="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>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Main Content -->
|
|
<main class="flex-grow flex items-center justify-center relative pt-20 overflow-hidden">
|
|
<!-- Background Blobs -->
|
|
<div
|
|
class="absolute top-1/2 left-1/4 -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-1/2 right-1/4 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">
|
|
<div class="mb-8">
|
|
<span class="text-9xl font-extrabold text-green-700/10 select-none font-display">404</span>
|
|
</div>
|
|
|
|
<h1 class="text-4xl md:text-6xl font-bold tracking-tight mb-6 leading-tight text-gray-900 font-display">
|
|
Oops! Looks like you're <br>
|
|
<span class="hero-gradient-text">lost in the boilerplate</span>
|
|
</h1>
|
|
|
|
<p class="mt-4 text-xl text-gray-700 max-w-2xl mx-auto mb-10 leading-relaxed">
|
|
The page you're looking for doesn't exist. Let's get you back on track to building your Wordpress
|
|
plugin.
|
|
</p>
|
|
|
|
<div class="flex flex-col sm:flex-row justify-center items-center gap-4 mb-16">
|
|
<a href="/apps"
|
|
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)]">
|
|
Go to Dashboard
|
|
</a>
|
|
<a href="/"
|
|
class="w-full sm:w-auto px-8 py-4 bg-amber-100 text-gray-900 border border-amber-300 rounded-full font-semibold hover:bg-amber-200 transition-colors backdrop-blur-sm flex items-center justify-center gap-2">
|
|
Back to Home
|
|
</a>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto text-left">
|
|
<a href="/pricing"
|
|
class="p-6 rounded-2xl bg-white border border-green-100 hover:border-green-400 transition-all group">
|
|
<div
|
|
class="w-10 h-10 rounded-lg bg-green-50 flex items-center justify-center text-green-700 mb-4 group-hover:scale-110 transition-transform">
|
|
<i class="fa-solid fa-tag"></i>
|
|
</div>
|
|
<h3 class="font-bold text-gray-900 mb-1">Check Pricing</h3>
|
|
<p class="text-sm text-gray-600">Find the perfect plan for your app.</p>
|
|
</a>
|
|
<a href="/apps"
|
|
class="p-6 rounded-2xl bg-white border border-green-100 hover:border-green-400 transition-all group">
|
|
<div
|
|
class="w-10 h-10 rounded-lg bg-green-50 flex items-center justify-center text-green-700 mb-4 group-hover:scale-110 transition-transform">
|
|
<i class="fa-solid fa-rocket"></i>
|
|
</div>
|
|
<h3 class="font-bold text-gray-900 mb-1">Start Building</h3>
|
|
<p class="text-sm text-gray-600">Create a new WordPress plugin in minutes.</p>
|
|
</a>
|
|
<a href="#"
|
|
class="p-6 rounded-2xl bg-white border border-green-100 hover:border-green-400 transition-all group">
|
|
<div
|
|
class="w-10 h-10 rounded-lg bg-green-50 flex items-center justify-center text-green-700 mb-4 group-hover:scale-110 transition-transform">
|
|
<i class="fa-solid fa-book"></i>
|
|
</div>
|
|
<h3 class="font-bold text-gray-900 mb-1">Documentation</h3>
|
|
<p class="text-sm text-gray-600">Learn how to make the most of AI.</p>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- 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 md:grid-cols-4 gap-12 mb-16">
|
|
<div class="col-span-2 md: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>
|
|
<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>
|
|
|
|
</body>
|
|
|
|
</html> |