74871ae05c
- Added Tailwind CSS and matching navigation from home.html - Implemented glass-morphism navigation with mobile menu - Added navbar scroll effects and responsive design - Verified backend contact form functionality exists and works correctly
618 lines
21 KiB
HTML
618 lines
21 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>Contact Us - 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&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);
|
|
}
|
|
|
|
body {
|
|
background-color: #fdf6ed;
|
|
color: #202223;
|
|
font-family: 'Inter', sans-serif;
|
|
margin: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.container {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 2rem;
|
|
}
|
|
|
|
.contact-card {
|
|
background: white;
|
|
padding: 3rem;
|
|
border-radius: 12px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
|
max-width: 500px;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
h1 {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-size: 2rem;
|
|
margin-bottom: 1.5rem;
|
|
color: #004c3f;
|
|
}
|
|
|
|
p {
|
|
line-height: 1.6;
|
|
color: #6d7175;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.email-link {
|
|
display: inline-block;
|
|
background: linear-gradient(135deg, #008060 0%, #004c3f 100%);
|
|
color: white;
|
|
text-decoration: none;
|
|
padding: 1rem 2rem;
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
.email-link:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.footer {
|
|
background: white;
|
|
padding: 2rem;
|
|
text-align: center;
|
|
border-top: 1px solid #e1e3e5;
|
|
color: #6d7175;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.footer a {
|
|
color: #008060;
|
|
text-decoration: none;
|
|
margin: 0 0.5rem;
|
|
}
|
|
|
|
.footer-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
|
gap: 2rem;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
text-align: left;
|
|
}
|
|
|
|
.footer-brand {
|
|
grid-column: span 2;
|
|
max-width: 280px;
|
|
}
|
|
|
|
.footer-brand .logo-text {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-bottom: 1rem;
|
|
font-weight: 700;
|
|
font-size: 1.25rem;
|
|
color: #1a1a1a;
|
|
}
|
|
|
|
.footer-brand .logo-text img {
|
|
height: 32px;
|
|
width: auto;
|
|
}
|
|
|
|
.footer-brand p {
|
|
color: #6b7280;
|
|
font-size: 0.875rem;
|
|
line-height: 1.6;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.footer h4 {
|
|
font-weight: 600;
|
|
color: #1a1a1a;
|
|
margin-bottom: 1rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.footer ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.footer li {
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.footer li a {
|
|
color: #6b7280;
|
|
font-size: 0.875rem;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.footer li a:hover {
|
|
color: #008060;
|
|
}
|
|
|
|
.footer-newsletter {
|
|
max-width: 280px;
|
|
}
|
|
|
|
.footer-newsletter p {
|
|
color: #6b7280;
|
|
font-size: 0.875rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.footer-newsletter form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.footer-newsletter input[type="email"] {
|
|
padding: 0.75rem 1rem;
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 8px;
|
|
font-size: 0.875rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.footer-newsletter button {
|
|
background: #008060;
|
|
color: white;
|
|
border: none;
|
|
padding: 0.75rem 1rem;
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
font-size: 0.875rem;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.footer-newsletter button:hover {
|
|
background: #006B3D;
|
|
}
|
|
|
|
.footer-bottom {
|
|
border-top: 1px solid #e5e7eb;
|
|
margin-top: 2rem;
|
|
padding-top: 1.5rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.footer-bottom p {
|
|
color: #9ca3af;
|
|
font-size: 0.75rem;
|
|
margin: 0;
|
|
}
|
|
|
|
.contact-form {
|
|
text-align: left;
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
.contact-form .form-group {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.contact-form label {
|
|
display: block;
|
|
font-weight: 500;
|
|
margin-bottom: 0.5rem;
|
|
color: #374151;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.contact-form input,
|
|
.contact-form textarea {
|
|
width: 100%;
|
|
padding: 0.75rem 1rem;
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 8px;
|
|
font-size: 0.875rem;
|
|
font-family: inherit;
|
|
transition: border-color 0.2s, box-shadow 0.2s;
|
|
}
|
|
|
|
.contact-form input:focus,
|
|
.contact-form textarea:focus {
|
|
outline: none;
|
|
border-color: #008060;
|
|
box-shadow: 0 0 0 3px rgba(0, 128, 96, 0.1);
|
|
}
|
|
|
|
.contact-form textarea {
|
|
min-height: 120px;
|
|
resize: vertical;
|
|
}
|
|
|
|
.contact-form button {
|
|
background: linear-gradient(135deg, #008060 0%, #004c3f 100%);
|
|
color: white;
|
|
border: none;
|
|
padding: 1rem 2rem;
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: opacity 0.2s;
|
|
width: 100%;
|
|
}
|
|
|
|
.contact-form button:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.contact-form button:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.form-message {
|
|
padding: 0.75rem 1rem;
|
|
border-radius: 8px;
|
|
margin-top: 1rem;
|
|
font-size: 0.875rem;
|
|
display: none;
|
|
}
|
|
|
|
.form-message.success {
|
|
background: #d1fae5;
|
|
color: #065f46;
|
|
display: block;
|
|
}
|
|
|
|
.form-message.error {
|
|
background: #fee2e2;
|
|
color: #991b1b;
|
|
display: block;
|
|
}
|
|
</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>
|
|
|
|
<main class="container" style="padding-top: 6rem;">
|
|
<div class="contact-card">
|
|
<h1>Get in Touch</h1>
|
|
<p>Have questions or need support? We're here to help you build the perfect WordPress Plugin.</p>
|
|
<p>Please fill out the form below and we'll get back to you as soon as possible.</p>
|
|
<form id="contact-form" class="contact-form">
|
|
<div class="form-group">
|
|
<label for="contact-name">Your Name</label>
|
|
<input type="text" id="contact-name" name="name" placeholder="John Doe" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="contact-email">Email Address</label>
|
|
<input type="email" id="contact-email" name="email" placeholder="john@example.com" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="contact-subject">Subject</label>
|
|
<input type="text" id="contact-subject" name="subject" placeholder="How can we help?" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="contact-message">Message</label>
|
|
<textarea id="contact-message" name="message" placeholder="Tell us more about your project..." required></textarea>
|
|
</div>
|
|
<button type="submit" id="contact-submit">Send Message</button>
|
|
<div id="contact-message-display" class="form-message"></div>
|
|
</form>
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="footer">
|
|
<div class="footer-grid">
|
|
<div class="footer-brand">
|
|
<div class="logo-text">
|
|
<img src="/assets/Plugin.png" alt="Plugin Compass">
|
|
<span>Plugin Compass</span>
|
|
</div>
|
|
<p>The smart way for WordPress site owners to replace expensive plugin subscriptions with custom solutions. Save thousands monthly.</p>
|
|
</div>
|
|
<div>
|
|
<h4>Product</h4>
|
|
<ul>
|
|
<li><a href="/features">Features</a></li>
|
|
<li><a href="/pricing">Pricing</a></li>
|
|
<li><a href="#">Templates</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4>Resources</h4>
|
|
<ul>
|
|
<li><a href="/docs">Documentation</a></li>
|
|
<li><a href="/faq">FAQ</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4>Legal</h4>
|
|
<ul>
|
|
<li><a href="/privacy.html">Privacy Policy</a></li>
|
|
<li><a href="/terms">Terms of Service</a></li>
|
|
<li><a href="/contact">Contact Us</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="footer-newsletter">
|
|
<h4>Stay Updated</h4>
|
|
<p>Get the latest updates and WordPress tips.</p>
|
|
<form id="footer-signup-form">
|
|
<input type="email" name="email" placeholder="Your email" required>
|
|
<button type="submit">Subscribe</button>
|
|
</form>
|
|
<div id="signup-message" class="form-message"></div>
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
<p>© 2026 Plugin Compass. All rights reserved.</p>
|
|
</div>
|
|
</footer>
|
|
<script>
|
|
const contactForm = document.getElementById('contact-form');
|
|
const contactSubmit = document.getElementById('contact-submit');
|
|
const contactMessage = document.getElementById('contact-message-display');
|
|
|
|
if (contactForm) {
|
|
contactForm.addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
|
|
contactSubmit.disabled = true;
|
|
contactSubmit.textContent = 'Sending...';
|
|
|
|
const formData = {
|
|
name: document.getElementById('contact-name').value,
|
|
email: document.getElementById('contact-email').value,
|
|
subject: document.getElementById('contact-subject').value,
|
|
message: document.getElementById('contact-message').value
|
|
};
|
|
|
|
try {
|
|
const response = await fetch('/api/contact', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(formData)
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (response.ok) {
|
|
contactMessage.textContent = 'Thank you for your message! We\'ll get back to you soon.';
|
|
contactMessage.className = 'form-message success';
|
|
contactForm.reset();
|
|
} else {
|
|
throw new Error(result.error || 'Failed to send message');
|
|
}
|
|
} catch (error) {
|
|
contactMessage.textContent = error.message || 'Failed to send message. Please try again.';
|
|
contactMessage.className = 'form-message error';
|
|
} finally {
|
|
contactSubmit.disabled = false;
|
|
contactSubmit.textContent = 'Send Message';
|
|
}
|
|
});
|
|
}
|
|
|
|
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 = 'form-message success';
|
|
signupForm.reset();
|
|
} else {
|
|
throw new Error('Failed to subscribe');
|
|
}
|
|
} catch (error) {
|
|
signupMessage.textContent = 'Failed to subscribe. Please try again.';
|
|
signupMessage.className = 'form-message error';
|
|
} finally {
|
|
button.disabled = false;
|
|
button.textContent = 'Subscribe';
|
|
}
|
|
});
|
|
}
|
|
|
|
// Mobile menu toggle
|
|
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
|
|
const mobileMenu = document.getElementById('mobile-menu');
|
|
|
|
if (mobileMenuBtn && mobileMenu) {
|
|
mobileMenuBtn.addEventListener('click', () => {
|
|
mobileMenu.classList.toggle('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');
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |