Toggle switch: Job Seeker vs Agency plans, new pricing: Free/Pro/Ultra/Unlimited (/usr/bin/bash/9/9/9), aligned cards, LinkedIn integrated

backend/main.py

@@ -19,10 +19,10 @@ router = APIRouter(prefix="/autojobs/api")
 # --- Plans & Pricing ---
 # Private User Plans (job seekers)
 PRIVATE_PLANS = {
-    "free": {"name": "Free", "applications": 5, "ai_customize": 5, "price": 0},
+    "free": {"name": "Free", "applications": 5, "ai_customize": 5, "cover_letters": 5, "price": 0},
-    "starter": {"name": "Starter", "applications": 50, "ai_customize": 50, "price": 9},
+    "pro": {"name": "Pro", "applications": 100, "ai_customize": 100, "cover_letters": 100, "price": 39},
-    "pro": {"name": "Pro", "applications": 100, "ai_customize": 100, "price": 39},
+    "ultra": {"name": "Ultra", "applications": 200, "ai_customize": 200, "cover_letters": 200, "price": 69},
-    "ultra": {"name": "Ultra", "applications": 200, "ai_customize": 200, "price": 69},
+    "unlimited": {"name": "Unlimited", "applications": 99999, "ai_customize": 99999, "cover_letters": 99999, "price": 99},
 }
 
 # Alias for backwards compatibility

frontend/app/page.tsx

@@ -1,3 +1,5 @@
+"use client"
+import { useState } from "react"
 import Link from "next/link"
 
 const privatePlans = [
@@ -6,27 +8,20 @@ const privatePlans = [
     price: "$0",
     period: "forever",
     apps: "5",
-    features: ["5 job applications/month", "5 AI resume customizations", "Basic application tracker"],
+    coverLetters: "5",
+    features: ["5 AI job applications/month", "5 AI resume customizations", "5 AI cover letters/month", "Application tracker"],
     cta: "Get Started",
     ctaStyle: "bg-white/10 hover:bg-white/20"
   },
-  {
-    name: "Starter",
-    price: "$9",
-    period: "/mo",
-    apps: "50",
-    features: ["50 job applications/month", "50 AI resume customizations", "Add your own API keys", "Email support"],
-    cta: "Start Now",
-    ctaStyle: "bg-blue-500 hover:bg-blue-600"
-  },
   {
     name: "Pro",
     price: "$39",
     period: "/mo",
     apps: "100",
+    coverLetters: "100",
     badge: "Most Popular",
     highlight: true,
-    features: ["100 job applications/month", "100 AI resume customizations", "Add your own API keys", "LinkedIn resume import", "Priority support"],
+    features: ["100 AI job applications/month", "100 AI resume customizations", "100 AI cover letters/month", "LinkedIn resume import", "Add your own API keys", "Priority support"],
     cta: "Go Pro",
     ctaStyle: "bg-blue-500 hover:bg-blue-600"
   },
@@ -35,10 +30,23 @@ const privatePlans = [
     price: "$69",
     period: "/mo",
     apps: "200",
-    features: ["200 job applications/month", "200 AI resume customizations", "Add your own API keys", "LinkedIn resume import", "SMS notifications"],
+    coverLetters: "200",
+    features: ["200 AI job applications/month", "200 AI resume customizations", "200 AI cover letters/month", "LinkedIn resume import", "Add your own API keys", "SMS notifications"],
     cta: "Go Ultra",
     ctaStyle: "bg-slate-600 hover:bg-slate-500"
   },
+  {
+    name: "Unlimited",
+    price: "$99",
+    period: "/mo",
+    apps: "Unlimited",
+    coverLetters: "Unlimited",
+    badge: "Best Value",
+    highlight: false,
+    features: ["Unlimited AI job applications", "Unlimited AI resume customizations", "Unlimited AI cover letters", "LinkedIn resume import", "Add your own API keys", "24/7 priority support"],
+    cta: "Go Unlimited",
+    ctaStyle: "bg-green-600 hover:bg-green-500"
+  },
 ]
 
 const agencyPlans = [
@@ -48,9 +56,8 @@ const agencyPlans = [
     period: "/mo",
     submissions: "1,000",
     clients: "10",
-    badge: "",
     highlight: false,
-    features: ["1,000 submissions/month", "10 client profiles", "White-label dashboard", "API access"],
+    features: ["1,000 job submissions/month", "Up to 10 client profiles", "AI resume tailoring", "White-label dashboard", "API access"],
     cta: "Start Agency",
     ctaStyle: "bg-purple-600 hover:bg-purple-500"
   },
@@ -60,10 +67,10 @@ const agencyPlans = [
     period: "/mo",
     submissions: "3,000",
     clients: "50",
-    badge: "",
+    badge: "Most Popular",
     highlight: true,
-    features: ["3,000 submissions/month", "50 client profiles", "White-label dashboard", "Priority support"],
+    features: ["3,000 job submissions/month", "Up to 50 client profiles", "AI resume tailoring", "White-label dashboard", "Priority support"],
-    cta: "Grow",
+    cta: "Grow Agency",
     ctaStyle: "bg-purple-600 hover:bg-purple-500"
   },
   {
@@ -72,10 +79,9 @@ const agencyPlans = [
     period: "/mo",
     submissions: "5,000",
     clients: "150",
-    badge: "",
     highlight: false,
-    features: ["5,000 submissions/month", "150 client profiles", "White-label dashboard", "Dedicated account manager"],
+    features: ["5,000 job submissions/month", "Up to 150 client profiles", "AI resume tailoring", "White-label dashboard", "Dedicated account manager"],
-    cta: "Scale",
+    cta: "Scale Up",
     ctaStyle: "bg-slate-600 hover:bg-slate-500"
   },
   {
@@ -84,117 +90,27 @@ const agencyPlans = [
     period: "/mo",
     submissions: "10,000",
     clients: "500",
-    badge: "",
+    badge: "Max Cap",
     highlight: false,
-    features: ["10,000 submissions/month", "500 client profiles", "White-label dashboard", "Dedicated account manager", "Custom integrations"],
+    features: ["10,000 job submissions/month", "Up to 500 client profiles", "AI resume tailoring", "White-label dashboard", "Dedicated account manager", "Custom integrations"],
-    cta: "Enterprise",
+    cta: "Get Enterprise",
     ctaStyle: "bg-slate-600 hover:bg-slate-500"
   },
 ]
 
-export default function LandingPage() {
+function PlanCard({ plan, type, color }: { plan: any, type: string, color: string }) {
+  const highlightBg = type === "private" 
+    ? "bg-gradient-to-br from-blue-600/30 to-purple-600/30 border-blue-500/50" 
+    : "bg-gradient-to-br from-purple-600/30 to-pink-600/30 border-purple-500/50"
+  
+  const checkColor = type === "private" ? "text-green-400" : "text-purple-400"
+  const badgeColor = type === "private" ? "bg-blue-500" : "bg-purple-500"
+  
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-blue-950 to-slate-900">
+    <div className={`rounded-2xl p-5 border flex flex-col h-full ${plan.highlight ? highlightBg : "bg-slate-700/50 border-slate-600"}`}>
-      {/* Nav */}
-      <nav className="flex justify-between items-center px-8 py-6 max-w-6xl mx-auto">
-        <div className="text-2xl font-bold text-white">
-          Auto<span className="text-blue-400">Jobs</span>
-        </div>
-        <div className="flex gap-4">
-          <Link href="/autojobs/login" className="text-slate-300 hover:text-white transition flex items-center gap-2">
-            Login
-          </Link>
-          <Link href="/autojobs/signup" className="px-5 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg font-medium transition">
-            Get Started
-          </Link>
-        </div>
-      </nav>
-
-      {/* Hero */}
-      <section className="py-20 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-6">
-            AI-Powered Job Application Automation
-          </div>
-          <h1 className="text-5xl md:text-6xl font-bold text-white mb-6 leading-tight">
-            Stop Manually Applying.
-            <br />
-            <span className="text-blue-400">Let AI Handle It.</span>
-          </h1>
-          <p className="text-xl text-slate-300 mb-10 max-w-2xl mx-auto leading-relaxed">
-            Upload your resume once. Set your preferences. AI finds matching jobs, rewrites your resume for each one, and applies — while you sleep.
-          </p>
-          <div className="flex flex-col sm:flex-row gap-4 justify-center">
-            <Link 
-              href="/autojobs/signup"
-              className="px-10 py-4 bg-blue-500 hover:bg-blue-600 text-white rounded-xl font-bold text-lg transition shadow-lg shadow-blue-500/25"
-            >
-              Start Free — 5 Applications
-            </Link>
-            <Link 
-              href="/autojobs/login"
-              className="px-10 py-4 bg-white/10 hover:bg-white/20 text-white rounded-xl font-semibold text-lg 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">
-                <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
-            </Link>
-          </div>
-        </div>
-      </section>
-
-      {/* How It Works */}
-      <section className="py-16 px-6 bg-slate-800/40">
-        <div className="max-w-5xl mx-auto">
-          <h2 className="text-3xl font-bold text-white text-center mb-12">How It Works</h2>
-          <div className="grid md:grid-cols-3 gap-8">
-            {[
-              {
-                step: "01",
-                title: "Create Your Profile",
-                desc: "Upload your resume. Connect your LinkedIn. Tell us what jobs you want — keywords, location, salary range."
-              },
-              {
-                step: "02", 
-                title: "AI Finds & Customizes",
-                desc: "We search across multiple 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."
-              }
-            ].map((item) => (
-              <div key={item.step} className="bg-slate-700/50 rounded-2xl p-8 border border-slate-600">
-                <div className="text-5xl font-bold text-blue-500/20 mb-4">{item.step}</div>
-                <h3 className="text-xl font-semibold text-white mb-3">{item.title}</h3>
-                <p className="text-slate-300">{item.desc}</p>
-              </div>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      {/* Private Plans */}
-      <section className="py-20 px-6">
-        <div className="max-w-6xl mx-auto text-center">
-          <h2 className="text-3xl font-bold text-white mb-2">For Job Seekers</h2>
-          <p className="text-slate-400 mb-12">Choose your monthly application limit</p>
-          
-          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-5xl mx-auto">
-            {privatePlans.map((plan) => (
-              <div 
-                key={plan.name}
-                className={`rounded-2xl p-6 border text-left relative ${
-                  plan.highlight 
-                    ? 'bg-gradient-to-br from-blue-600/30 to-purple-600/30 border-blue-500/50 shadow-lg shadow-blue-500/10' 
-                    : 'bg-slate-700/50 border-slate-600'
-                }`}
-              >
       {plan.badge && (
         <div className="absolute -top-3 left-1/2 -translate-x-1/2">
-                    <span className="px-3 py-1 bg-blue-500 text-white text-xs font-bold rounded-full">{plan.badge}</span>
+          <span className={`px-3 py-1 ${badgeColor} text-white text-xs font-bold rounded-full`}>{plan.badge}</span>
         </div>
       )}
       <div className="text-sm text-slate-400 font-medium mb-1">{plan.name}</div>
@@ -202,88 +118,184 @@ export default function LandingPage() {
         <span className="text-3xl font-bold text-white">{plan.price}</span>
         <span className="text-slate-400 text-sm">{plan.period}</span>
       </div>
-                <div className="text-xs text-blue-400 mb-4">{plan.apps} apps/month</div>
+      <div className="text-xs text-blue-400 mb-3">
-                <ul className="space-y-2 mb-6">
+        {type === "private" 
-                  {plan.features.map((f) => (
+          ? `${plan.apps} apps • ${plan.coverLetters} cover letters`
-                    <li key={f} className="text-slate-300 text-sm flex items-start gap-2">
+          : `${plan.submissions} submissions • ${plan.clients} clients`
-                      <span className="text-green-400">✓</span> {f}
+        }
+      </div>
+      <ul className="space-y-1.5 mb-4 flex-grow">
+        {plan.features.map((f: string) => (
+          <li key={f} className="text-slate-300 text-xs flex items-start gap-2">
+            <span className={checkColor}>✓</span> {f}
           </li>
         ))}
       </ul>
       <Link 
-                  href="/autojobs/signup?type=private"
+        href={`/autojobs/signup?type=${type}`}
-                  className={`block text-center px-4 py-2.5 rounded-lg font-medium text-white transition ${plan.ctaStyle}`}
+        className={`block text-center px-4 py-2.5 rounded-lg font-medium text-white text-sm transition mt-auto ${plan.ctaStyle}`}
       >
         {plan.cta}
       </Link>
     </div>
-            ))}
+  )
-          </div>
+}
 
-          <div className="mt-8 text-slate-500 text-sm flex items-center justify-center gap-2">
+export default function LandingPage() {
+  const [activeTab, setActiveTab] = useState<"private" | "agency">("private")
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-blue-950 to-slate-900">
+      {/* Nav */}
+      <nav className="flex justify-between items-center px-8 py-6 max-w-6xl mx-auto">
+        <div className="text-2xl font-bold text-white">
+          Auto<span className="text-blue-400">Jobs</span>
+        </div>
+        <div className="flex 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">
               <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 — import your saved resumes automatically
+            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">
+            Get Started
+          </Link>
+        </div>
+      </nav>
+
+      {/* Hero */}
+      <section className="py-16 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-6">
+            AI-Powered Job Application Automation
+          </div>
+          <h1 className="text-4xl md:text-5xl font-bold text-white mb-6 leading-tight">
+            Stop Manually Applying.
+            <br />
+            <span className="text-blue-400">Let AI Handle It.</span>
+          </h1>
+          <p className="text-lg text-slate-300 mb-8 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.
+          </p>
+          <div className="flex flex-col sm:flex-row gap-3 justify-center">
+            <Link 
+              href="/autojobs/signup"
+              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"
+            >
+              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">
+                <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
+            </button>
           </div>
         </div>
       </section>
 
-      {/* Agency Plans */}
+      {/* How It Works */}
-      <section className="py-20 px-6 bg-slate-800/40">
+      <section className="py-12 px-6 bg-slate-800/40">
-        <div className="max-w-6xl mx-auto text-center">
+        <div className="max-w-5xl mx-auto">
-          <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">
+          <h2 className="text-2xl font-bold text-white text-center mb-8">How It Works</h2>
-            For Recruiting Agencies
+          <div className="grid md:grid-cols-3 gap-6">
+            {[
+              { 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) => (
+              <div key={item.step} className="bg-slate-700/50 rounded-xl p-6 border border-slate-600 text-center">
+                <div className="text-4xl font-bold text-blue-500/20 mb-3">{item.step}</div>
+                <h3 className="text-lg font-semibold text-white mb-2">{item.title}</h3>
+                <p className="text-slate-400 text-sm">{item.desc}</p>
               </div>
-          <h2 className="text-3xl font-bold text-white mb-4">Agency Plans</h2>
+            ))}
-          <p className="text-slate-400 mb-12">Manage multiple clients. Each plan has a hard submission cap — no unlimited.</p>
+          </div>
+        </div>
+      </section>
 
-          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-5xl mx-auto">
+      {/* Pricing Toggle + Plans */}
-            {agencyPlans.map((plan) => (
+      <section className="py-16 px-6">
-              <div 
+        <div className="max-w-6xl mx-auto text-center">
-                key={plan.name}
+          <h2 className="text-3xl font-bold text-white mb-6">Choose Your Plan</h2>
-                className={`rounded-2xl p-6 border text-left relative ${
+          
-                  plan.highlight 
+          {/* Toggle Switch */}
-                    ? 'bg-gradient-to-br from-purple-600/30 to-pink-600/30 border-purple-500/50' 
+          <div className="inline-flex items-center gap-0 bg-slate-800 rounded-full p-1 mb-10 border border-slate-700">
-                    : 'bg-slate-700/50 border-slate-600'
+            <button
+              onClick={() => setActiveTab("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"
               }`}
             >
-                {plan.badge && (
+              👤 Job Seeker
-                  <div className="absolute -top-3 left-1/2 -translate-x-1/2">
+            </button>
-                    <span className="px-3 py-1 bg-purple-500 text-white text-xs font-bold rounded-full">{plan.badge}</span>
+            <button
-                  </div>
+              onClick={() => setActiveTab("agency")}
-                )}
+              className={`px-6 py-2.5 rounded-full font-semibold text-sm transition-all ${
-                <div className="text-sm text-purple-400 font-medium mb-1">Agency {plan.name}</div>
+                activeTab === "agency"
-                <div className="flex items-baseline gap-1 mb-1">
+                  ? "bg-purple-500 text-white shadow-lg"
-                  <span className="text-3xl font-bold text-white">{plan.price}</span>
+                  : "text-slate-400 hover:text-white"
-                  <span className="text-slate-400 text-sm">{plan.period}</span>
+              }`}
-                </div>
-                <div className="text-xs text-slate-500 mb-4">{plan.submissions} submissions • {plan.clients} clients</div>
-                <ul className="space-y-2 mb-6">
-                  {plan.features.map((f) => (
-                    <li key={f} className="text-slate-300 text-sm flex items-start gap-2">
-                      <span className="text-purple-400">✓</span> {f}
-                    </li>
-                  ))}
-                </ul>
-                <Link 
-                  href="/autojobs/signup?type=agency"
-                  className={`block text-center px-4 py-2.5 rounded-lg font-medium text-white transition ${plan.ctaStyle}`}
             >
-                  {plan.cta}
+              🏢 Recruiting Agency
-                </Link>
+            </button>
-              </div>
-            ))}
           </div>
 
-          <div className="mt-8 text-slate-500 text-sm">
+          {/* Private Plans */}
-            All plans have hard caps. No unlimited access for agencies.
+          {activeTab === "private" && (
+            <div className="space-y-6">
+              <p className="text-slate-400 mb-6">Every plan includes AI resume tailoring + AI cover letter generation</p>
+              <div className="grid grid-cols-2 md:grid-cols-4 gap-4 max-w-5xl mx-auto items-stretch">
+                {privatePlans.map((plan) => (
+                  <PlanCard key={plan.name} plan={plan} type="private" color="blue" />
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Agency Plans */}
+          {activeTab === "agency" && (
+            <div className="space-y-6">
+              <p className="text-slate-400 mb-6">Manage multiple clients. Hard caps — no unlimited.</p>
+              <div className="grid grid-cols-2 md:grid-cols-4 gap-4 max-w-5xl mx-auto items-stretch">
+                {agencyPlans.map((plan) => (
+                  <PlanCard key={plan.name} plan={plan} type="agency" color="purple" />
+                ))}
+              </div>
+              <p className="text-slate-500 text-sm mt-4">All plans have hard submission caps. No unlimited access for agencies.</p>
+            </div>
+          )}
+        </div>
+      </section>
+
+      {/* Features */}
+      <section className="py-16 px-6 bg-slate-800/40">
+        <div className="max-w-5xl mx-auto">
+          <h2 className="text-2xl font-bold text-white text-center mb-8">Everything You Need</h2>
+          <div className="grid md:grid-cols-3 gap-4">
+            {[
+              { 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) => (
+              <div key={f.title} className="bg-slate-700/50 rounded-xl p-4 border border-slate-600">
+                <div className="text-xl mb-2">{f.icon}</div>
+                <h3 className="font-semibold text-white mb-1">{f.title}</h3>
+                <p className="text-slate-400 text-sm">{f.desc}</p>
+              </div>
+            ))}
           </div>
         </div>
       </section>
 
       {/* Footer */}
-      <footer className="py-8 px-6 border-t border-slate-700">
+      <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">
           <p>© 2026 AutoJobs — Built on <a href="https://hostpioneers.com" className="text-blue-400 hover:underline">HostPioneers</a> infrastructure</p>
         </div>