From cb7687f7fcd035afc3a37dc1a6e768989ff30c4e Mon Sep 17 00:00:00 2001
From: Horus AI <horus@hostpioneers.com>
Date: Tue, 14 Apr 2026 13:51:21 +0200
Subject: [PATCH] Mobile responsive: hamburger menu, stacked plans on phone,
 touch-friendly forms, compact cards

---
 frontend/app/contact/page.tsx |  80 ++++++-------
 frontend/app/login/page.tsx   |  57 +++++----
 frontend/app/page.tsx         | 218 ++++++++++++----------------------
 frontend/app/signup/page.tsx  |  49 ++++----
 4 files changed, 163 insertions(+), 241 deletions(-)

diff --git a/frontend/app/contact/page.tsx b/frontend/app/contact/page.tsx
index ac83c30..f424463 100644
--- a/frontend/app/contact/page.tsx
+++ b/frontend/app/contact/page.tsx
@@ -16,7 +16,6 @@ export default function ContactPage() {
     setError("")
     
     try {
-      // In production, this would send to a backend/API
       await new Promise(resolve => setTimeout(resolve, 1500))
       setSuccess(true)
     } catch {
@@ -27,100 +26,99 @@ export default function ContactPage() {
 
   return (
     <div className="min-h-screen bg-slate-900">
-      <nav className="flex justify-between items-center px-6 py-5 max-w-4xl mx-auto">
-        <Link href="/autojobs" className="text-2xl font-bold text-white">
+      <nav className="flex justify-between items-center px-4 py-4 max-w-2xl mx-auto">
+        <Link href="/autojobs" className="text-xl font-bold text-white">
           Auto<span className="text-blue-400">Jobs</span>
         </Link>
-        <Link href="/autojobs" className="text-slate-400 hover:text-white transition text-sm">
-          ← Back to Home
+        <Link href="/autojobs" className="text-slate-400 hover:text-white transition text-xs">
+          ← Back
         </Link>
       </nav>
       
-      <main className="max-w-2xl mx-auto px-6 py-12">
-        <div className="text-center mb-10">
-          <div className="inline-block px-4 py-1.5 rounded-full bg-purple-500/20 border border-purple-500/30 text-purple-300 text-sm mb-4">
+      <main className="max-w-xl mx-auto px-4 py-8">
+        <div className="text-center mb-8">
+          <div className="inline-block px-3 py-1 rounded-full bg-purple-500/20 border border-purple-500/30 text-purple-300 text-xs mb-3">
             Enterprise Solutions
           </div>
-          <h1 className="text-3xl font-bold text-white mb-3">Contact Us</h1>
-          <p className="text-slate-400">Ready for unlimited job applications? Let's build a custom plan for your agency.</p>
+          <h1 className="text-2xl font-bold text-white mb-2">Contact Us</h1>
+          <p className="text-slate-400 text-sm">Ready for unlimited job applications? Let's build a custom plan for your agency.</p>
         </div>
         
         {success ? (
           <div className="bg-green-500/20 border border-green-500/30 rounded-2xl p-8 text-center">
-            <div className="text-5xl mb-4">✓</div>
-            <h2 className="text-2xl font-bold text-white mb-2">Message Sent!</h2>
-            <p className="text-slate-300 mb-4">Our enterprise team will respond within 24 hours.</p>
-            <Link href="/autojobs" className="text-blue-400 hover:underline">← Back to AutoJobs</Link>
+            <div className="text-4xl mb-3">✓</div>
+            <h2 className="text-xl font-bold text-white mb-2">Message Sent!</h2>
+            <p className="text-slate-300 mb-4 text-sm">Our enterprise team will respond within 24 hours.</p>
+            <Link href="/autojobs" className="text-blue-400 hover:underline text-sm">← Back to AutoJobs</Link>
           </div>
         ) : (
-          <form onSubmit={handleSubmit} className="bg-slate-800 rounded-2xl p-8 border border-slate-700">
+          <form onSubmit={handleSubmit} className="bg-slate-800 rounded-2xl p-5 border border-slate-700">
             {error && (
-              <div className="mb-6 p-4 bg-red-500/20 border border-red-500/30 rounded-xl text-red-400 text-sm">
+              <div className="mb-4 p-3 bg-red-500/20 border border-red-500/30 rounded-xl text-red-400 text-xs">
                 {error}
               </div>
             )}
             
-            <div className="space-y-5">
-              <div className="grid grid-cols-2 gap-5">
+            <div className="space-y-4">
+              <div className="grid grid-cols-2 gap-3">
                 <div>
-                  <label className="block text-sm text-slate-400 mb-1.5">Full Name *</label>
+                  <label className="block text-xs text-slate-400 mb-1">Full Name *</label>
                   <input required type="text" value={form.name} onChange={e => setForm({...form, name: e.target.value})}
-                    className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-blue-500"
+                    className="w-full px-3 py-2.5 bg-slate-700 border border-slate-600 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-blue-500 text-sm"
                     placeholder="Sarah Johnson" />
                 </div>
                 <div>
-                  <label className="block text-sm text-slate-400 mb-1.5">Company *</label>
+                  <label className="block text-xs text-slate-400 mb-1">Company *</label>
                   <input required type="text" value={form.company} onChange={e => setForm({...form, company: e.target.value})}
-                    className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-blue-500"
+                    className="w-full px-3 py-2.5 bg-slate-700 border border-slate-600 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-blue-500 text-sm"
                     placeholder="Acme Recruiting" />
                 </div>
               </div>
               
-              <div className="grid grid-cols-2 gap-5">
+              <div className="grid grid-cols-2 gap-3">
                 <div>
-                  <label className="block text-sm text-slate-400 mb-1.5">Email *</label>
+                  <label className="block text-xs text-slate-400 mb-1">Email *</label>
                   <input required type="email" value={form.email} onChange={e => setForm({...form, email: e.target.value})}
-                    className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-blue-500"
-                    placeholder="sarah@acme-recruiting.com" />
+                    className="w-full px-3 py-2.5 bg-slate-700 border border-slate-600 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-blue-500 text-sm"
+                    placeholder="sarah@acme.com" />
                 </div>
                 <div>
-                  <label className="block text-sm text-slate-400 mb-1.5">Phone</label>
+                  <label className="block text-xs text-slate-400 mb-1">Phone</label>
                   <input type="tel" value={form.phone} onChange={e => setForm({...form, phone: e.target.value})}
-                    className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-blue-500"
-                    placeholder="+1 555 123 4567" />
+                    className="w-full px-3 py-2.5 bg-slate-700 border border-slate-600 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-blue-500 text-sm"
+                    placeholder="+1 555 123" />
                 </div>
               </div>
               
               <div>
-                <label className="block text-sm text-slate-400 mb-1.5">Interest</label>
+                <label className="block text-xs text-slate-400 mb-1">Interest</label>
                 <select value={form.type} onChange={e => setForm({...form, type: e.target.value})}
-                  className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-xl text-white focus:outline-none focus:border-blue-500">
-                  <option value="enterprise">Enterprise Plan — Unlimited</option>
-                  <option value="agency">Agency Plan — High Volume</option>
+                  className="w-full px-3 py-2.5 bg-slate-700 border border-slate-600 rounded-xl text-white focus:outline-none focus:border-blue-500 text-sm">
+                  <option value="enterprise">Enterprise — Unlimited</option>
+                  <option value="agency">Agency — High Volume</option>
                   <option value="partnership">Partnership / Reseller</option>
                   <option value="custom">Custom Integration</option>
-                  <option value="other">Other</option>
                 </select>
               </div>
               
               <div>
-                <label className="block text-sm text-slate-400 mb-1.5">Tell us about your needs *</label>
-                <textarea required rows={4} value={form.message} onChange={e => setForm({...form, message: e.target.value})}
-                  className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-blue-500 resize-none"
-                  placeholder="We're a recruiting agency with 50+ clients. We need to handle 10,000+ applications/month with white-label options..." />
+                <label className="block text-xs text-slate-400 mb-1">Message *</label>
+                <textarea required rows={3} value={form.message} onChange={e => setForm({...form, message: e.target.value})}
+                  className="w-full px-3 py-2.5 bg-slate-700 border border-slate-600 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-blue-500 resize-none text-sm"
+                  placeholder="Tell us about your needs..." />
               </div>
               
               <button type="submit" disabled={loading}
-                className="w-full py-3.5 bg-purple-500 hover:bg-purple-600 disabled:bg-slate-600 text-white rounded-xl font-semibold transition">
+                className="w-full py-3 bg-purple-500 hover:bg-purple-600 disabled:bg-slate-600 text-white rounded-xl font-semibold transition text-sm">
                 {loading ? "Sending..." : "Send Message"}
               </button>
             </div>
           </form>
         )}
         
-        <div className="mt-8 text-center text-slate-500 text-sm">
+        <div className="mt-6 text-center text-slate-500 text-xs">
           <p>Prefer email? <a href="mailto:enterprise@hostpioneers.com" className="text-blue-400 hover:underline">enterprise@hostpioneers.com</a></p>
-          <p className="mt-2">Typical response time: &lt;24 hours</p>
+          <p className="mt-1">Response time: &lt;24 hours</p>
         </div>
       </main>
     </div>
diff --git a/frontend/app/login/page.tsx b/frontend/app/login/page.tsx
index a5e0405..2e77857 100644
--- a/frontend/app/login/page.tsx
+++ b/frontend/app/login/page.tsx
@@ -32,61 +32,58 @@ export default function LoginPage() {
   }
 
   return (
-    <div className="min-h-screen bg-slate-900 flex items-center justify-center px-4">
-      <div className="w-full max-w-md">
+    <div className="min-h-screen bg-slate-900 flex items-center justify-center px-4 py-8">
+      <div className="w-full max-w-sm">
         <div className="text-center mb-8">
           <Link href="/autojobs" className="text-2xl font-bold text-white">
             Auto<span className="text-blue-400">Jobs</span>
           </Link>
-          <p className="text-slate-400 mt-2">Welcome back</p>
+          <p className="text-slate-400 mt-2 text-sm">Welcome back</p>
         </div>
         
-        <form onSubmit={handleSubmit} className="bg-slate-800 rounded-2xl p-8 border border-slate-700">
+        <form onSubmit={handleSubmit} className="bg-slate-800 rounded-2xl p-6 border border-slate-700">
           {error && (
-            <div className="mb-4 p-3 bg-red-500/20 border border-red-500/30 rounded-lg text-red-400 text-sm">
+            <div className="mb-4 p-3 bg-red-500/20 border border-red-500/30 rounded-xl text-red-400 text-xs">
               {error}
             </div>
           )}
           
           <div className="space-y-4">
             <div>
-              <label className="block text-sm text-slate-400 mb-1">Email</label>
-              <input
-                required
-                type="email"
-                value={form.email}
-                onChange={e => setForm({...form, email: e.target.value})}
-                className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-blue-500"
-                placeholder="you@example.com"
-              />
+              <label className="block text-xs text-slate-400 mb-1">Email</label>
+              <input required type="email" value={form.email} onChange={e => setForm({...form, email: e.target.value})}
+                className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-blue-500 text-sm"
+                placeholder="you@example.com" />
             </div>
             
             <div>
-              <label className="block text-sm text-slate-400 mb-1">Password</label>
-              <input
-                required
-                type="password"
-                value={form.password}
-                onChange={e => setForm({...form, password: e.target.value})}
-                className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-blue-500"
-                placeholder="••••••••"
-              />
+              <label className="block text-xs text-slate-400 mb-1">Password</label>
+              <input required type="password" value={form.password} onChange={e => setForm({...form, password: e.target.value})}
+                className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-blue-500 text-sm"
+                placeholder="••••••••" />
             </div>
           </div>
           
-          <button
-            type="submit"
-            disabled={loading}
-            className="w-full mt-6 py-3 bg-blue-500 hover:bg-blue-600 disabled:bg-slate-600 text-white rounded-xl font-semibold transition"
-          >
+          <button type="submit" disabled={loading}
+            className="w-full mt-5 py-3 bg-blue-500 hover:bg-blue-600 disabled:bg-slate-600 text-white rounded-xl font-semibold transition text-sm">
             {loading ? "Signing in..." : "Sign In"}
           </button>
+          
+          <div className="mt-4 pt-4 border-t border-slate-700">
+            <button type="button"
+              className="w-full py-2.5 bg-white/10 hover:bg-white/20 text-white rounded-xl font-medium transition flex items-center justify-center gap-2 text-sm">
+              <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.79M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z"/>
+              </svg>
+              Continue with LinkedIn
+            </button>
+          </div>
         </form>
         
-        <p className="text-center text-slate-400 mt-6 text-sm">
+        <p className="text-center text-slate-400 mt-5 text-xs">
           Don't have an account? <Link href="/autojobs/signup" className="text-blue-400 hover:underline">Sign up free</Link>
         </p>
       </div>
     </div>
   )
-}
+}
\ No newline at end of file
diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
index fc8c596..a9a8d09 100644
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -147,7 +147,7 @@ function PlanCard({ plan, type }: { plan: any, type: string }) {
   const badgeBg = type === "private" ? "bg-blue-500" : "bg-purple-500"
   
   return (
-    <div className={`rounded-2xl p-4 border flex flex-col relative h-full ${plan.highlight ? highlightBg : "bg-slate-700/50 border-slate-600"}`}>
+    <div className={`rounded-2xl p-4 border flex flex-col relative ${plan.highlight ? highlightBg : "bg-slate-700/50 border-slate-600"}`}>
       {plan.badge && (
         <div className="absolute -top-2.5 left-1/2 -translate-x-1/2 z-10">
           <span className={`px-2.5 py-0.5 ${badgeBg} text-white text-[10px] font-bold rounded-full whitespace-nowrap`}>{plan.badge}</span>
@@ -162,7 +162,7 @@ function PlanCard({ plan, type }: { plan: any, type: string }) {
         <div className="text-[10px] text-blue-400/80 mt-0.5">
           {type === "private" 
             ? `${plan.apps} apps • ${plan.coverLetters} letters`
-            : `${plan.submissions} subs • ${plan.clients} clients`
+            : `${plan.submissions} • ${plan.clients} clients`
           }
         </div>
       </div>
@@ -183,7 +183,6 @@ function PlanCard({ plan, type }: { plan: any, type: string }) {
   )
 }
 
-// JSON-LD Structured Data for SEO
 const jsonLd = {
   "@context": "https://schema.org",
   "@type": "SoftwareApplication",
@@ -213,77 +212,70 @@ const jsonLd = {
   }
 }
 
-const privatePlansJsonLd = {
-  "@context": "https://schema.org",
-  "@type": "ItemList",
-  "name": "AutoJobs Private Plans",
-  "itemListElement": privatePlans.map((plan, index) => ({
-    "@type": "Offer",
-    "position": index + 1,
-    "name": plan.name,
-    "price": plan.price.replace("$", ""),
-    "priceCurrency": "USD",
-    "description": plan.features.join(", "),
-    "url": `https://hostpioneers.com/autojobs/signup?plan=${plan.id}&type=private`
-  }))
-}
-
 export default function LandingPage() {
   const [activeTab, setActiveTab] = useState<"private" | "agency">("private")
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
 
   return (
     <div className="min-h-screen bg-gradient-to-br from-slate-900 via-blue-950 to-slate-900">
-      {/* SEO JSON-LD */}
-      <script
-        type="application/ld+json"
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
-      />
-      <script
-        type="application/ld+json"
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(privatePlansJsonLd) }}
-      />
+      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
+
+      {/* Mobile Menu Button */}
+      <button 
+        onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+        className="md:hidden fixed top-4 right-4 z-50 p-2 bg-slate-800 rounded-lg border border-slate-700"
+        aria-label="Toggle menu"
+      >
+        <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          {mobileMenuOpen ? (
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+          ) : (
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+          )}
+        </svg>
+      </button>
 
       {/* Nav */}
-      <nav className="flex justify-between items-center px-6 py-5 max-w-6xl mx-auto" role="navigation" aria-label="Main navigation">
-        <div className="text-2xl font-bold text-white">
+      <nav className={`${mobileMenuOpen ? 'flex' : 'hidden'} md:flex fixed inset-0 md:relative md:inset-auto flex-col md:flex-row justify-between items-center px-6 py-4 md:py-5 max-w-6xl mx-auto bg-slate-900 md:bg-transparent z-40 gap-4`}>
+        <Link href="/autojobs" className="text-2xl font-bold text-white">
           Auto<span className="text-blue-400">Jobs</span>
-        </div>
-        <div className="flex gap-4 items-center">
+        </Link>
+        <div className="flex flex-col md:flex-row gap-3 md:gap-4 items-center">
           <button className="text-slate-300 hover:text-white transition flex items-center gap-2 text-sm">
-            <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
               <path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.79M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z"/>
             </svg>
             Login with LinkedIn
           </button>
-          <Link href="/autojobs/signup" className="px-5 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg font-medium transition text-sm">
+          <Link href="/autojobs/signup" className="px-5 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg font-medium transition text-sm w-full md:w-auto text-center">
             Get Started
           </Link>
         </div>
       </nav>
 
       {/* Hero */}
-      <header className="py-14 px-6 text-center">
+      <header className="pt-12 md:pt-16 pb-8 md:pb-12 px-4 md:px-6 text-center">
         <div className="max-w-4xl mx-auto">
-          <div className="inline-block px-4 py-1.5 rounded-full bg-blue-500/20 border border-blue-500/30 text-blue-300 text-sm mb-5">
+          <div className="inline-block px-3 py-1 rounded-full bg-blue-500/20 border border-blue-500/30 text-blue-300 text-xs md:text-sm mb-4">
             AI-Powered Job Application Automation
           </div>
-          <h1 className="text-4xl md:text-5xl font-bold text-white mb-5 leading-tight">
+          <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-4 leading-tight px-2">
             Stop Manually Applying.
             <br />
             <span className="text-blue-400">Let AI Handle It.</span>
           </h1>
-          <p className="text-lg text-slate-300 mb-7 max-w-2xl mx-auto">
-            Upload your resume. Connect LinkedIn. AI finds matching jobs, rewrites your resume + cover letter for each one, and applies automatically while you sleep.
+          <p className="text-base md:text-lg text-slate-300 mb-6 px-4 max-w-2xl mx-auto">
+            Upload your resume. Connect LinkedIn. AI finds matching jobs, rewrites your resume + cover letter, and applies automatically.
           </p>
-          <div className="flex flex-col sm:flex-row gap-3 justify-center">
+          <div className="flex flex-col sm:flex-row gap-3 justify-center px-4">
             <Link 
               href="/autojobs/signup?plan=free"
-              className="px-8 py-3 bg-blue-500 hover:bg-blue-600 text-white rounded-xl font-semibold transition shadow-lg shadow-blue-500/25"
+              className="px-6 py-3 bg-blue-500 hover:bg-blue-600 text-white rounded-xl font-semibold transition shadow-lg shadow-blue-500/25 text-sm md:text-base"
             >
               Start Free — 5 Applications
             </Link>
-            <button className="px-8 py-3 bg-white/10 hover:bg-white/20 text-white rounded-xl font-semibold border border-white/20 transition flex items-center justify-center gap-2">
-              <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <button className="px-6 py-3 bg-white/10 hover:bg-white/20 text-white rounded-xl font-semibold border border-white/20 transition flex items-center justify-center gap-2 text-sm md:text-base">
+              <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                 <path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.79M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z"/>
               </svg>
               Sign up with LinkedIn
@@ -293,63 +285,54 @@ export default function LandingPage() {
       </header>
 
       {/* How It Works */}
-      <section className="py-10 px-6 bg-slate-800/40" aria-labelledby="how-it-works-heading">
+      <section className="py-8 md:py-12 px-4 md:px-6 bg-slate-800/40">
         <div className="max-w-5xl mx-auto">
-          <h2 id="how-it-works-heading" className="text-2xl font-bold text-white text-center mb-6">How It Works</h2>
-          <div className="grid md:grid-cols-3 gap-5">
+          <h2 className="text-xl md:text-2xl font-bold text-white text-center mb-4 md:mb-6">How It Works</h2>
+          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
             {[
-              { step: "01", title: "Create Profile", desc: "Upload resume. Connect LinkedIn. Set job preferences — keywords, location, salary range." },
-              { step: "02", title: "AI Customizes", desc: "We search 100+ job boards. For each match, AI rewrites your resume and writes a personalized cover letter." },
-              { step: "03", title: "Apply & Track", desc: "Apply with one click or let AI apply automatically. Track every application status in your dashboard." }
+              { step: "01", title: "Create Profile", desc: "Upload resume. Connect LinkedIn. Set job preferences." },
+              { step: "02", title: "AI Customizes", desc: "AI rewrites your resume + cover letter for each job." },
+              { step: "03", title: "Apply & Track", desc: "Apply in one click. Track every application status." }
             ].map((item) => (
-              <article key={item.step} className="bg-slate-700/50 rounded-xl p-5 border border-slate-600 text-center">
-                <div className="text-4xl font-bold text-blue-500/20 mb-2">{item.step}</div>
-                <h3 className="text-lg font-semibold text-white mb-1">{item.title}</h3>
-                <p className="text-slate-400 text-sm">{item.desc}</p>
+              <article key={item.step} className="bg-slate-700/50 rounded-xl p-4 md:p-5 border border-slate-600 text-center">
+                <div className="text-3xl md:text-4xl font-bold text-blue-500/20 mb-2">{item.step}</div>
+                <h3 className="text-base md:text-lg font-semibold text-white mb-1">{item.title}</h3>
+                <p className="text-slate-400 text-xs md:text-sm">{item.desc}</p>
               </article>
             ))}
           </div>
         </div>
       </section>
 
-      {/* Pricing Toggle + Plans */}
-      <section className="py-14 px-6" aria-labelledby="pricing-heading">
+      {/* Pricing */}
+      <section className="py-10 md:py-14 px-4 md:px-6">
         <div className="max-w-6xl mx-auto text-center">
-          <h2 id="pricing-heading" className="text-3xl font-bold text-white mb-5">Choose Your Plan</h2>
+          <h2 className="text-2xl md:text-3xl font-bold text-white mb-4 md:mb-6">Choose Your Plan</h2>
           
-          {/* Toggle Switch */}
-          <div className="inline-flex items-center gap-0 bg-slate-800 rounded-full p-1 mb-8 border border-slate-700" role="tablist">
+          {/* Toggle */}
+          <div className="inline-flex flex-col sm:flex-row items-center gap-1 bg-slate-800 rounded-full p-1 mb-6 md:mb-8 border border-slate-700 w-full sm:w-auto max-w-xs mx-auto">
             <button
               onClick={() => setActiveTab("private")}
-              role="tab"
-              aria-selected={activeTab === "private"}
-              className={`px-6 py-2.5 rounded-full font-semibold text-sm transition-all ${
-                activeTab === "private"
-                  ? "bg-blue-500 text-white shadow-lg"
-                  : "text-slate-400 hover:text-white"
+              className={`w-full sm:flex-1 px-4 py-2.5 rounded-full font-semibold text-xs md:text-sm transition-all ${
+                activeTab === "private" ? "bg-blue-500 text-white" : "text-slate-400 hover:text-white"
               }`}
             >
               👤 Job Seeker
             </button>
             <button
               onClick={() => setActiveTab("agency")}
-              role="tab"
-              aria-selected={activeTab === "agency"}
-              className={`px-6 py-2.5 rounded-full font-semibold text-sm transition-all ${
-                activeTab === "agency"
-                  ? "bg-purple-500 text-white shadow-lg"
-                  : "text-slate-400 hover:text-white"
+              className={`w-full sm:flex-1 px-4 py-2.5 rounded-full font-semibold text-xs md:text-sm transition-all ${
+                activeTab === "agency" ? "bg-purple-500 text-white" : "text-slate-400 hover:text-white"
               }`}
             >
               🏢 Recruiting Agency
             </button>
           </div>
 
-          {/* Private Plans */}
           {activeTab === "private" && (
-            <div role="tabpanel" aria-label="Job Seeker Plans">
-              <p className="text-slate-400 mb-5 text-sm">Every plan includes AI resume tailoring + AI cover letter generation</p>
-              <div className="grid grid-cols-2 md:grid-cols-5 gap-3 max-w-5xl mx-auto items-stretch">
+            <div>
+              <p className="text-slate-400 mb-4 text-xs md:text-sm">Every plan includes AI resume tailoring + AI cover letter generation</p>
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-3 max-w-5xl mx-auto">
                 {privatePlans.map((plan) => (
                   <PlanCard key={plan.id} plan={plan} type="private" />
                 ))}
@@ -357,99 +340,48 @@ export default function LandingPage() {
             </div>
           )}
 
-          {/* Agency Plans - 5 columns */}
           {activeTab === "agency" && (
-            <div role="tabpanel" aria-label="Recruiting Agency Plans">
-              <p className="text-slate-400 mb-5 text-sm">Manage multiple clients. Hard caps — no unlimited.</p>
-              <div className="grid grid-cols-2 md:grid-cols-5 gap-3 max-w-5xl mx-auto items-stretch">
+            <div>
+              <p className="text-slate-400 mb-4 text-xs md:text-sm">Manage multiple clients. Hard caps — no unlimited.</p>
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-3 max-w-5xl mx-auto">
                 {agencyPlans.map((plan) => (
                   <PlanCard key={plan.id} plan={plan} type="agency" />
                 ))}
               </div>
-              <p className="text-slate-500 text-xs mt-3">All plans have hard submission caps. No unlimited access for agencies.</p>
+              <p className="text-slate-500 text-xs mt-3">All plans have hard submission caps.</p>
             </div>
           )}
         </div>
       </section>
 
       {/* Features */}
-      <section className="py-14 px-6 bg-slate-800/40" aria-labelledby="features-heading">
+      <section className="py-10 md:py-14 px-4 md:px-6 bg-slate-800/40">
         <div className="max-w-5xl mx-auto">
-          <h2 id="features-heading" className="text-2xl font-bold text-white text-center mb-6">Everything You Need</h2>
-          <div className="grid md:grid-cols-3 gap-4">
+          <h2 className="text-xl md:text-2xl font-bold text-white text-center mb-4 md:mb-6">Everything You Need</h2>
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 md:gap-4">
             {[
-              { icon: "🎯", title: "AI Resume Tailoring", desc: "Every resume rewritten to match job description keywords for maximum relevance" },
-              { icon: "✉️", title: "AI Cover Letters", desc: "Personalized cover letter generated for each company and position" },
-              { icon: "🔍", title: "Multi-Source Search", desc: "Jooble, JSearch aggregated and deduplicated — no duplicate applications" },
-              { icon: "📊", title: "Application Tracker", desc: "Dashboard tracks status from applied to offer stage" },
-              { icon: "🔑", title: "Your Own API Keys", desc: "You control your data and spending — bring your own keys" },
-              { icon: "💼", title: "LinkedIn Import", desc: "Import your saved LinkedIn resumes and profile automatically" },
+              { icon: "🎯", title: "AI Resume Tailoring", desc: "Every resume rewritten to match job description keywords" },
+              { icon: "✉️", title: "AI Cover Letters", desc: "Personalized cover letter for each company" },
+              { icon: "🔍", title: "Multi-Source Search", desc: "Jooble, JSearch aggregated and deduplicated" },
+              { icon: "📊", title: "Application Tracker", desc: "Dashboard tracks status from applied to offer" },
+              { icon: "🔑", title: "Your Own API Keys", desc: "You control your data and spending" },
+              { icon: "💼", title: "LinkedIn Import", desc: "Import your saved LinkedIn resumes automatically" },
             ].map((f) => (
               <article key={f.title} className="bg-slate-700/50 rounded-xl p-4 border border-slate-600">
-                <div className="text-xl mb-1.5" aria-hidden="true">{f.icon}</div>
-                <h3 className="font-semibold text-white mb-0.5">{f.title}</h3>
-                <p className="text-slate-400 text-sm">{f.desc}</p>
+                <div className="text-xl mb-1">{f.icon}</div>
+                <h3 className="font-semibold text-white text-sm md:text-base mb-0.5">{f.title}</h3>
+                <p className="text-slate-400 text-xs md:text-sm">{f.desc}</p>
               </article>
             ))}
           </div>
         </div>
       </section>
 
-      {/* FAQ Schema */}
-      <section className="py-14 px-6" aria-labelledby="faq-heading">
-        <div className="max-w-3xl mx-auto">
-          <h2 id="faq-heading" className="text-2xl font-bold text-white text-center mb-6">Frequently Asked Questions</h2>
-          <div className="space-y-4">
-            {[
-              { q: "How does AI resume tailoring work?", a: "Our AI analyzes the job description and rewrites your resume to highlight the skills and experience most relevant to that specific position, increasing your chances of getting noticed." },
-              { q: "What job boards does AutoJobs search?", a: "We search across multiple job boards including Jooble, JSearch, and other aggregators, then deduplicate results so you never apply to the same job twice." },
-              { q: "Can I use my own API keys?", a: "Yes! On Starter plans and above, you can add your own API keys for AI services, giving you more control over your data and spending." },
-              { q: "What happens when I hit my monthly limit?", a: "Your applications are paused until your next billing cycle. You can upgrade at any time for higher limits." },
-            ].map((faq, i) => (
-              <details key={i} className="bg-slate-700/50 rounded-xl border border-slate-600 p-4 group">
-                <summary className="font-semibold text-white cursor-pointer list-none flex justify-between items-center">
-                  {faq.q}
-                  <span className="text-blue-400 group-open:rotate-180 transition-transform">▼</span>
-                </summary>
-                <p className="text-slate-400 text-sm mt-2">{faq.a}</p>
-              </details>
-            ))}
-          </div>
-        </div>
-        <script
-          type="application/ld+json"
-          dangerouslySetInnerHTML={{
-            __html: JSON.stringify({
-              "@context": "https://schema.org",
-              "@type": "FAQPage",
-              "mainEntity": [
-                {
-                  "@type": "Question",
-                  "name": "How does AI resume tailoring work?",
-                  "acceptedAnswer": {
-                    "@type": "Answer",
-                    "text": "Our AI analyzes the job description and rewrites your resume to highlight the skills and experience most relevant to that specific position."
-                  }
-                },
-                {
-                  "@type": "Question", 
-                  "name": "What job boards does AutoJobs search?",
-                  "acceptedAnswer": {
-                    "@type": "Answer",
-                    "text": "We search across multiple job boards including Jooble, JSearch, and other aggregators, then deduplicate results."
-                  }
-                }
-              ]
-            })
-          }}
-        />
-      </section>
-
       {/* Footer */}
-      <footer className="py-6 px-6 border-t border-slate-700">
-        <div className="max-w-5xl mx-auto text-center text-slate-500 text-sm">
+      <footer className="py-6 px-4 md:px-6 border-t border-slate-700">
+        <div className="max-w-5xl mx-auto text-center text-slate-500 text-xs md:text-sm">
           <p>© 2026 AutoJobs — Built on <a href="https://hostpioneers.com" className="text-blue-400 hover:underline">HostPioneers</a></p>
-          <nav className="mt-3 flex justify-center gap-4 text-xs" aria-label="Footer navigation">
+          <nav className="mt-3 flex flex-wrap justify-center gap-3 md:gap-4 text-xs">
             <a href="/autojobs/privacy" className="hover:text-white transition">Privacy Policy</a>
             <a href="/autojobs/terms" className="hover:text-white transition">Terms of Service</a>
             <a href="/autojobs/gdpr" className="hover:text-white transition">GDPR</a>
diff --git a/frontend/app/signup/page.tsx b/frontend/app/signup/page.tsx
index 1e4bd89..a060f2c 100644
--- a/frontend/app/signup/page.tsx
+++ b/frontend/app/signup/page.tsx
@@ -54,12 +54,7 @@ function SignupForm() {
       if (res.ok) {
         const data = await res.json()
         
-        if (planId === "free") {
-          router.push("/autojobs/dashboard")
-          return
-        }
-        
-        if (planId === "agency_enterprise") {
+        if (planId === "free" || planId === "agency_enterprise") {
           router.push("/autojobs/dashboard")
           return
         }
@@ -94,24 +89,24 @@ function SignupForm() {
   }
 
   return (
-    <div className="min-h-screen bg-slate-900 flex items-center justify-center px-4 py-12">
-      <div className="w-full max-w-md">
+    <div className="min-h-screen bg-slate-900 flex items-center justify-center px-4 py-8">
+      <div className="w-full max-w-sm">
         <div className="text-center mb-6">
           <Link href="/autojobs" className="text-2xl font-bold text-white">
             Auto<span className="text-blue-400">Jobs</span>
           </Link>
-          <p className="text-slate-400 mt-2">Create your account</p>
+          <p className="text-slate-400 mt-2 text-sm">Create your account</p>
         </div>
 
-        <div className="bg-slate-800 rounded-2xl p-5 border border-blue-500/30 mb-6">
+        <div className="bg-slate-800 rounded-2xl p-5 border border-blue-500/30 mb-5">
           <div className="flex justify-between items-center">
             <div>
-              <div className="text-sm text-slate-400">Selected Plan</div>
-              <div className="text-xl font-bold text-white">{plan.name}</div>
+              <div className="text-xs text-slate-400">Selected Plan</div>
+              <div className="text-lg font-bold text-white">{plan.name}</div>
               <div className="text-xs text-slate-400">{plan.apps}/month</div>
             </div>
             <div className="text-right">
-              <div className="text-2xl font-bold text-blue-400">{plan.price}</div>
+              <div className="text-xl font-bold text-blue-400">{plan.price}</div>
               {planId !== "free" && planId !== "agency_enterprise" && (
                 <div className="text-xs text-slate-400">billed monthly</div>
               )}
@@ -119,47 +114,47 @@ function SignupForm() {
           </div>
         </div>
         
-        <form onSubmit={handleSubmit} className="bg-slate-800 rounded-2xl p-8 border border-slate-700">
+        <form onSubmit={handleSubmit} className="bg-slate-800 rounded-2xl p-6 border border-slate-700">
           {error && (
-            <div className="mb-4 p-3 bg-red-500/20 border border-red-500/30 rounded-lg text-red-400 text-sm">
+            <div className="mb-4 p-3 bg-red-500/20 border border-red-500/30 rounded-lg text-red-400 text-xs">
               {error}
             </div>
           )}
           
           <div className="space-y-4">
             <div>
-              <label className="block text-sm text-slate-400 mb-1">Full Name</label>
+              <label className="block text-xs text-slate-400 mb-1">Full Name</label>
               <input required type="text" value={form.name} onChange={e => setForm({...form, name: e.target.value})}
-                className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-blue-500" placeholder="John Smith" />
+                className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-blue-500 text-sm" placeholder="John Smith" />
             </div>
             <div>
-              <label className="block text-sm text-slate-400 mb-1">Email</label>
+              <label className="block text-xs text-slate-400 mb-1">Email</label>
               <input required type="email" value={form.email} onChange={e => setForm({...form, email: e.target.value})}
-                className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-blue-500" placeholder="you@example.com" />
+                className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-blue-500 text-sm" placeholder="you@example.com" />
             </div>
             <div>
-              <label className="block text-sm text-slate-400 mb-1">Password</label>
+              <label className="block text-xs text-slate-400 mb-1">Password</label>
               <input required type="password" value={form.password} onChange={e => setForm({...form, password: e.target.value})}
-                className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-blue-500" placeholder="••••••••" />
+                className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-blue-500 text-sm" placeholder="••••••••" />
             </div>
             <div>
-              <label className="block text-sm text-slate-400 mb-1">Confirm Password</label>
+              <label className="block text-xs text-slate-400 mb-1">Confirm Password</label>
               <input required type="password" value={form.confirmPassword} onChange={e => setForm({...form, confirmPassword: e.target.value})}
-                className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-blue-500" placeholder="••••••••" />
+                className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-blue-500 text-sm" placeholder="••••••••" />
             </div>
           </div>
           
           <button type="submit" disabled={loading}
-            className="w-full mt-6 py-3 bg-blue-500 hover:bg-blue-600 disabled:bg-slate-600 text-white rounded-xl font-semibold transition">
+            className="w-full mt-5 py-3 bg-blue-500 hover:bg-blue-600 disabled:bg-slate-600 text-white rounded-xl font-semibold transition text-sm">
             {loading ? "Creating account..." : planId === "free" ? "Create Free Account" : `Pay ${plan.price} & Subscribe`}
           </button>
         </form>
         
-        <p className="text-center text-slate-400 mt-6 text-sm">
+        <p className="text-center text-slate-400 mt-5 text-xs">
           Already have an account? <Link href="/autojobs/login" className="text-blue-400 hover:underline">Sign in</Link>
         </p>
-        <p className="text-center text-slate-500 mt-4 text-xs">
-          By signing up, you agree to our Terms of Service and Privacy Policy.
+        <p className="text-center text-slate-500 mt-3 text-xs">
+          By signing up, you agree to our <a href="/autojobs/terms" className="text-blue-400 hover:underline">Terms</a> and <a href="/autojobs/privacy" className="text-blue-400 hover:underline">Privacy Policy</a>.
         </p>
       </div>
     </div>