Add agency plans: Starter(1000/55) Growth(3000/99) Scale(5000/499) Enterprise(10000/222) - no unlimited for agencies

frontend/app/page.tsx

@@ -1,56 +1,103 @@
 import Link from "next/link"
 
-const plans = [
+const jobseekerPlans = [
   {
     name: "Free",
     price: "$0",
     period: "forever",
     apps: "5",
-    ai: "5",
-    badge: "Start Here",
+    badge: "",
     highlight: false,
-    features: ["5 AI job applications/month", "5 AI resume customizations/month", "Application tracker", "Add your own API keys", "Multi-source search"],
-    cta: "Get Started Free",
+    features: ["5 AI job applications/month", "5 AI resume customizations/month", "Application tracker", "Add your own API keys"],
+    cta: "Get Started",
     ctaStyle: "bg-white/10 hover:bg-white/20"
   },
   {
     name: "Starter",
     price: "$9",
-    period: "/month",
+    period: "/mo",
     apps: "50",
-    ai: "50",
     badge: "",
     highlight: false,
-    features: ["50 AI job applications/month", "50 AI resume customizations/month", "Application tracker", "Add your own API keys", "Email notifications"],
+    features: ["50 AI job applications/month", "50 AI resume customizations/month", "Application tracker", "Add your own API keys"],
     cta: "Start Applying",
     ctaStyle: "bg-blue-500 hover:bg-blue-600"
   },
   {
     name: "Pro",
     price: "$39",
-    period: "/month",
+    period: "/mo",
     apps: "100",
-    ai: "100",
-    badge: "Most Popular",
+    badge: "Popular",
     highlight: true,
-    features: ["100 AI job applications/month", "100 AI resume customizations/month", "Application tracker", "Add your own API keys", "Email notifications", "Interview prep tips"],
+    features: ["100 AI job applications/month", "100 AI resume customizations/month", "Application tracker", "Add your own API keys", "Email notifications"],
     cta: "Go Pro",
     ctaStyle: "bg-blue-500 hover:bg-blue-600"
   },
   {
     name: "Ultra",
     price: "$69",
-    period: "/month",
+    period: "/mo",
     apps: "200",
-    ai: "200",
     badge: "",
     highlight: false,
-    features: ["200 AI job applications/month", "200 AI resume customizations/month", "Priority processing", "Add your own API keys", "Email + SMS notifications"],
+    features: ["200 AI job applications/month", "200 AI resume customizations/month", "Priority processing", "Email + SMS notifications"],
     cta: "Go Ultra",
     ctaStyle: "bg-slate-600 hover:bg-slate-500"
   },
 ]
 
+const agencyPlans = [
+  {
+    name: "Starter",
+    price: "$555",
+    period: "/mo",
+    submissions: "1,000",
+    clients: "10",
+    badge: "",
+    highlight: false,
+    features: ["1,000 job submissions/month", "Up to 10 client profiles", "AI resume tailoring", "White-label dashboard", "Priority support"],
+    cta: "Start Agency",
+    ctaStyle: "bg-purple-600 hover:bg-purple-500"
+  },
+  {
+    name: "Growth",
+    price: "$999",
+    period: "/mo",
+    submissions: "3,000",
+    clients: "50",
+    badge: "",
+    highlight: true,
+    features: ["3,000 job submissions/month", "Up to 50 client profiles", "AI resume tailoring", "White-label dashboard", "Priority support"],
+    cta: "Grow Agency",
+    ctaStyle: "bg-purple-600 hover:bg-purple-500"
+  },
+  {
+    name: "Scale",
+    price: "$1,499",
+    period: "/mo",
+    submissions: "5,000",
+    clients: "150",
+    badge: "",
+    highlight: false,
+    features: ["5,000 job submissions/month", "Up to 150 client profiles", "AI resume tailoring", "White-label dashboard", "Dedicated account manager"],
+    cta: "Scale Up",
+    ctaStyle: "bg-slate-600 hover:bg-slate-500"
+  },
+  {
+    name: "Enterprise",
+    price: "$2,222",
+    period: "/mo",
+    submissions: "10,000",
+    clients: "500",
+    badge: "",
+    highlight: false,
+    features: ["10,000 job submissions/month", "Up to 500 client profiles", "AI resume tailoring", "White-label dashboard", "Dedicated account manager", "Custom integrations"],
+    cta: "Get Enterprise",
+    ctaStyle: "bg-slate-600 hover:bg-slate-500"
+  },
+]
+
 export default function LandingPage() {
   return (
     <div className="min-h-screen bg-gradient-to-br from-slate-900 via-blue-950 to-slate-900">
@@ -90,12 +137,6 @@ export default function LandingPage() {
             >
               Start Free — 5 Applications
             </Link>
-            <Link 
-              href="/autojobs/pricing"
-              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"
-            >
-              View All Plans
-            </Link>
           </div>
         </div>
       </section>
@@ -104,23 +145,22 @@ export default function LandingPage() {
       <section className="py-20 px-6 bg-slate-800/40">
         <div className="max-w-5xl mx-auto">
           <h2 className="text-3xl font-bold text-white text-center mb-4">How AutoJobs Works</h2>
-          <p className="text-slate-400 text-center mb-12 max-w-xl mx-auto">Three steps to never manually applying to a job again.</p>
           <div className="grid md:grid-cols-3 gap-8">
             {[
               {
                 step: "01",
                 title: "Create Your Profile",
-                desc: "Upload your resume. Tell us what jobs you want — keywords, location, salary range. Add your own API keys for job search engines."
+                desc: "Upload your resume. Tell us what jobs you want — keywords, location, salary range."
               },
               {
                 step: "02", 
                 title: "AI Finds & Customizes",
-                desc: "We search Jooble, JSearch, and more. For each match, AI rewrites your resume and writes a personalized cover letter targeting that company."
+                desc: "We search Jooble, JSearch, and more. AI rewrites your resume and writes cover letters."
               },
               {
                 step: "03",
                 title: "Apply & Track",
-                desc: "Apply with one click. Track every application status — applied, interviewing, offer, rejected. Land more interviews."
+                desc: "Apply with one click. Track every application status — from applied to offer."
               }
             ].map((item) => (
               <div key={item.step} className="relative bg-slate-700/50 rounded-2xl p-8 border border-slate-600 hover:border-blue-500/50 transition">
@@ -133,40 +173,14 @@ export default function LandingPage() {
         </div>
       </section>
 
-      {/* Features Grid */}
+      {/* Jobseeker Pricing */}
       <section className="py-20 px-6">
-        <div className="max-w-5xl mx-auto">
-          <h2 className="text-3xl font-bold text-white text-center mb-12">Everything You Need to Land the Job</h2>
-          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {[
-              { icon: "🎯", title: "AI Resume Tailoring", desc: "Every resume is rewritten to match the exact job description and keywords" },
-              { icon: "✉️", title: "AI Cover Letters", desc: "Personalized for each company — their mission, news, and your fit" },
-              { icon: "🔍", title: "Multi-Source Search", desc: "Jooble, JSearch, and more — aggregated and deduplicated" },
-              { icon: "📊", title: "Application Tracker", desc: "Dashboard shows every application, status, interview invites" },
-              { icon: "🔑", title: "Your Own API Keys", desc: "Add your own keys — you control your data and spending" },
-              { icon: "⚡", title: "Apply While You Sleep", desc: "AI works 24/7. Wake up to new opportunities submitted" },
-              { icon: "📱", title: "Mobile Dashboard", desc: "Track your applications from anywhere — phone, tablet, desktop" },
-              { icon: "📈", title: "Usage Analytics", desc: "See how many applications you've sent this month" },
-              { icon: "🔒", title: "Private & Secure", desc: "Your data stays yours. API keys are encrypted." },
-            ].map((f) => (
-              <div key={f.title} className="bg-slate-800/50 rounded-xl p-5 border border-slate-700 hover:border-slate-500 transition">
-                <div className="text-2xl mb-3">{f.icon}</div>
-                <h3 className="text-lg font-semibold text-white mb-1">{f.title}</h3>
-                <p className="text-slate-400 text-sm">{f.desc}</p>
-              </div>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      {/* Pricing */}
-      <section className="py-20 px-6 bg-slate-800/40">
         <div className="max-w-6xl mx-auto text-center">
-          <h2 className="text-3xl font-bold text-white mb-4">Simple, Transparent Pricing</h2>
-          <p className="text-slate-400 mb-12">Pick the plan that fits your job search. No hidden fees.</p>
+          <h2 className="text-3xl font-bold text-white mb-4">For Job Seekers</h2>
+          <p className="text-slate-400 mb-12">Pick the plan that fits your job search.</p>
           
-          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-5xl mx-auto" style={{gridTemplateColumns: 'repeat(4, 1fr)'}}>
-            {plans.map((plan) => (
+          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-5xl mx-auto">
+            {jobseekerPlans.map((plan) => (
               <div 
                 key={plan.name}
                 className={`rounded-2xl p-6 border text-left relative ${
@@ -187,9 +201,7 @@ 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-slate-500 mb-4">
-                  {plan.apps} applications + {plan.ai} AI customizations/month
-                </div>
+                <div className="text-xs text-blue-400 mb-4">{plan.apps} apps + AI customizations/mo</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">
@@ -206,9 +218,60 @@ export default function LandingPage() {
               </div>
             ))}
           </div>
+        </div>
+      </section>
 
-          <div className="mt-8 text-slate-400 text-sm">
-            <p>Need more? <span className="text-blue-400">Business</span> (500/mo) = $119 &nbsp;|&nbsp; <span className="text-blue-400">Unlimited</span> = $319/month</p>
+      {/* Agency Pricing */}
+      <section className="py-20 px-6 bg-slate-800/40">
+        <div className="max-w-6xl mx-auto text-center">
+          <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">
+            For Recruiting Agencies
+          </div>
+          <h2 className="text-3xl font-bold text-white mb-4">Agency Plans — Manage Multiple Clients</h2>
+          <p className="text-slate-400 mb-12">Run job applications for your entire client roster. Each plan includes client profile management and submission limits.</p>
+          
+          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-5xl mx-auto">
+            {agencyPlans.map((plan) => (
+              <div 
+                key={plan.name}
+                className={`rounded-2xl p-6 border text-left relative ${
+                  plan.highlight 
+                    ? 'bg-gradient-to-br from-purple-600/30 to-pink-600/30 border-purple-500/50 shadow-lg shadow-purple-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-purple-500 text-white text-xs font-bold rounded-full">
+                      {plan.badge}
+                    </span>
+                  </div>
+                )}
+                <div className="text-sm text-purple-400 font-medium mb-1">{plan.name}</div>
+                <div className="flex items-baseline gap-1 mb-1">
+                  <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-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}
+                </Link>
+              </div>
+            ))}
+          </div>
+          
+          <div className="mt-8 text-slate-500 text-sm">
+            <p>No unlimited agency plan — all submissions are capped to prevent abuse.</p>
           </div>
         </div>
       </section>
@@ -216,17 +279,17 @@ export default function LandingPage() {
       {/* Stats */}
       <section className="py-16 px-6">
         <div className="max-w-4xl mx-auto grid grid-cols-3 gap-8 text-center">
-          <div>
-            <div className="text-3xl font-bold text-white mb-1">5</div>
-            <div className="text-slate-400 text-sm">Free applications/month</div>
-          </div>
           <div>
             <div className="text-3xl font-bold text-white mb-1">&lt;$0.01</div>
-            <div className="text-slate-400 text-sm">Cost per AI customization</div>
+            <div className="text-slate-400 text-sm">Cost per application</div>
           </div>
           <div>
             <div className="text-3xl font-bold text-white mb-1">15-25s</div>
-            <div className="text-slate-400 text-sm">AI time per application</div>
+            <div className="text-slate-400 text-sm">AI time per job customization</div>
+          </div>
+          <div>
+            <div className="text-3xl font-bold text-white mb-1">500+</div>
+            <div className="text-slate-400 text-sm">Jobs found per search</div>
           </div>
         </div>
       </section>