Add plan system: Free(5) Starter(50) Pro(100) Ultra(200) Business(500) Unlimited(99999)

frontend/app/page.tsx

@@ -1,5 +1,56 @@
 import Link from "next/link"
 
+const plans = [
+  {
+    name: "Free",
+    price: "$0",
+    period: "forever",
+    apps: "5",
+    ai: "5",
+    badge: "Start Here",
+    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",
+    ctaStyle: "bg-white/10 hover:bg-white/20"
+  },
+  {
+    name: "Starter",
+    price: "$9",
+    period: "/month",
+    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"],
+    cta: "Start Applying",
+    ctaStyle: "bg-blue-500 hover:bg-blue-600"
+  },
+  {
+    name: "Pro",
+    price: "$39",
+    period: "/month",
+    apps: "100",
+    ai: "100",
+    badge: "Most 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"],
+    cta: "Go Pro",
+    ctaStyle: "bg-blue-500 hover:bg-blue-600"
+  },
+  {
+    name: "Ultra",
+    price: "$69",
+    period: "/month",
+    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"],
+    cta: "Go Ultra",
+    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">
@@ -37,16 +88,15 @@ export default function LandingPage() {
               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 — Beta Access
+              Start Free — 5 Applications
             </Link>
             <Link 
-              href="/autojobs/demo"
+              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"
             >
-              See How It Works
+              View All Plans
             </Link>
           </div>
-          <p className="mt-6 text-slate-500 text-sm">No credit card required. Beta is free.</p>
         </div>
       </section>
 
@@ -60,7 +110,7 @@ export default function LandingPage() {
               {
                 step: "01",
                 title: "Create Your Profile",
-                desc: "Upload your resume and LinkedIn. 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. Add your own API keys for job search engines."
               },
               {
                 step: "02", 
@@ -69,8 +119,8 @@ export default function LandingPage() {
               },
               {
                 step: "03",
-                title: "Auto-Apply 24/7",
-                desc: "AI applies on your behalf where possible. You review and approve the rest. Dashboard tracks every application and its status."
+                title: "Apply & Track",
+                desc: "Apply with one click. Track every application status — applied, interviewing, offer, rejected. Land more interviews."
               }
             ].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">
@@ -95,8 +145,8 @@ export default function LandingPage() {
               { 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: "Multi-User", desc: "Separate accounts for you, your friends, your clients" },
-              { icon: "📈", title: "Admin Dashboard", desc: "See all users, applications, and platform analytics" },
+              { 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">
@@ -111,43 +161,72 @@ export default function LandingPage() {
 
       {/* Pricing */}
       <section className="py-20 px-6 bg-slate-800/40">
-        <div className="max-w-3xl mx-auto text-center">
+        <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-10">Start free during beta. Scale when you're landing interviews.</p>
-          <div className="grid md:grid-cols-2 gap-6 max-w-2xl mx-auto">
-            <div className="bg-slate-700/60 rounded-2xl p-8 border border-slate-600">
-              <h3 className="text-xl font-semibold text-white mb-2">Beta</h3>
-              <div className="text-4xl font-bold text-white mb-1">Free</div>
-              <p className="text-slate-400 mb-6 text-sm">While we build</p>
-              <ul className="text-slate-300 text-left space-y-2 mb-8">
-                <li>✓ Unlimited applications</li>
-                <li>✓ AI resume tailoring</li>
-                <li>✓ AI cover letters</li>
-                <li>✓ Application tracking</li>
-                <li>✓ Add your own API keys</li>
-                <li>✓ Multi-user support</li>
-              </ul>
-              <Link href="/autojobs/signup" className="block text-center px-6 py-3 bg-white/10 hover:bg-white/20 text-white rounded-lg font-medium transition">
-                Join Beta — Free
-              </Link>
-            </div>
-            <div className="bg-gradient-to-br from-blue-600/20 to-purple-600/20 rounded-2xl p-8 border border-blue-500/30">
-              <div className="text-sm text-blue-400 font-medium mb-1">Coming Soon</div>
-              <h3 className="text-xl font-semibold text-white mb-2">Pro</h3>
-              <div className="text-4xl font-bold text-white mb-1">€19<span className="text-lg font-normal text-slate-400">/mo</span></div>
-              <p className="text-slate-400 mb-6 text-sm">When we launch publicly</p>
-              <ul className="text-slate-300 text-left space-y-2 mb-8">
-                <li>✓ Everything in Beta</li>
-                <li>✓ We provide API keys</li>
-                <li>✓ Auto-apply everywhere</li>
-                <li>✓ Email notifications</li>
-                <li>✓ Interview prep tips</li>
-                <li>✓ Priority support</li>
-              </ul>
-              <button className="w-full px-6 py-3 bg-blue-500/50 text-white rounded-lg font-medium cursor-not-allowed" disabled>
-                Join Waitlist
-              </button>
-            </div>
+          <p className="text-slate-400 mb-12">Pick the plan that fits your job search. No hidden fees.</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 
+                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>
+                  </div>
+                )}
+                <div className="text-sm text-slate-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.apps} applications + {plan.ai} AI customizations/month
+                </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-green-400">✓</span> {f}
+                    </li>
+                  ))}
+                </ul>
+                <Link 
+                  href="/autojobs/signup"
+                  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-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>
+          </div>
+        </div>
+      </section>
+
+      {/* 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>
+          <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>
         </div>
       </section>
@@ -160,4 +239,4 @@ export default function LandingPage() {
       </footer>
     </div>
   )
-}
+}

frontend/ecosystem.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  apps: [{
+    name: 'autojobs-frontend',
+    script: 'npx',
+    args: 'next start -p 3001',
+    cwd: '/var/www/autojobs/frontend',
+    interpreter: 'none',
+    env: {
+      NODE_ENV: 'production',
+      PORT: '3001'
+    },
+    autorestart: true,
+    watch: false
+  }]
+};

frontend/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

frontend/tailwind.config.ts

@@ -0,0 +1,8 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  content: ["./app/**/*.{js,ts,jsx,tsx,mdx}"],
+  theme: { extend: {} },
+  plugins: [],
+};
+export default config;

frontend/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "paths": { "@/*": ["./*"] }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}