From 74871ae05cb33a0031f707386e26ef84723b4493 Mon Sep 17 00:00:00 2001
From: southseact-3d <hetheringtonliam7@gmail.com>
Date: Mon, 9 Feb 2026 17:54:49 +0000
Subject: [PATCH] Update contact page header to match home.html design

- 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
---
 chat/public/contact.html | 209 +++++++++++++++++++++++++++++++--------
 1 file changed, 170 insertions(+), 39 deletions(-)
diff --git a/chat/public/contact.html b/chat/public/contact.html
index c94cb20..afbb33e 100644
--- a/chat/public/contact.html
+++ b/chat/public/contact.html
@@ -1,20 +1,97 @@
 <!DOCTYPE html>
-<html lang="en">
+<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">
-    <link rel="stylesheet" href="styles.css">
+    <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@400;500;600&family=Space+Grotesk:wght@500;700&display=swap"
-        rel="stylesheet">
+    <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: #f6f6f7;
+            background-color: #fdf6ed;
             color: #202223;
             font-family: 'Inter', sans-serif;
             margin: 0;
@@ -23,31 +100,6 @@
             min-height: 100vh;
         }
 
-        .header {
-            background: white;
-            padding: 1rem 2rem;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            border-bottom: 1px solid #e1e3e5;
-        }
-
-        .logo {
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            text-decoration: none;
-            color: #008060;
-            font-family: 'Space Grotesk', sans-serif;
-            font-weight: 700;
-            font-size: 1.25rem;
-        }
-
-        .logo img {
-            height: 32px;
-            width: auto;
-        }
-
         .container {
             flex: 1;
             display: flex;
@@ -311,15 +363,71 @@
     <script src="/posthog.js"></script>
 </head>
 
-<body>
-    <header class="header">
-        <a href="/" class="logo">
-            <img src="/assets/Plugin.png" alt="Plugin Compass Logo">
-            <span>Plugin Compass</span>
-        </a>
-    </header>
+<body class="bg-amber-50 text-gray-900 font-sans antialiased overflow-x-hidden">
 
-    <main class="container">
+    <!-- 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>
@@ -481,6 +589,29 @@
                 }
             });
         }
+
+        // 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>
 
