305 lines
12 KiB
TypeScript
305 lines
12 KiB
TypeScript
import Link from "next/link"
|
|
|
|
const jobseekerPlans = [
|
|
{
|
|
name: "Free",
|
|
price: "$0",
|
|
period: "forever",
|
|
apps: "5",
|
|
badge: "",
|
|
highlight: false,
|
|
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: "/mo",
|
|
apps: "50",
|
|
badge: "",
|
|
highlight: false,
|
|
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: "/mo",
|
|
apps: "100",
|
|
badge: "Popular",
|
|
highlight: true,
|
|
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: "/mo",
|
|
apps: "200",
|
|
badge: "",
|
|
highlight: false,
|
|
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">
|
|
{/* 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-6">
|
|
<Link href="/autojobs/login" className="text-slate-300 hover:text-white transition">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-24 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">
|
|
Your Personal AI Job Agent
|
|
</div>
|
|
<h1 className="text-5xl md:text-6xl font-bold text-white mb-6 leading-tight">
|
|
Stop Applying to Jobs.
|
|
<br />
|
|
<span className="text-blue-400">Let AI Do It For You.</span>
|
|
</h1>
|
|
<p className="text-xl text-slate-300 mb-10 max-w-2xl mx-auto leading-relaxed">
|
|
Upload your resume once. Set your keywords. Our AI finds every matching job,
|
|
rewrites your resume + cover letter for each one, and applies automatically —
|
|
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>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* How It Works */}
|
|
<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>
|
|
<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."
|
|
},
|
|
{
|
|
step: "02",
|
|
title: "AI Finds & Customizes",
|
|
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 — 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">
|
|
<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 leading-relaxed">{item.desc}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Jobseeker Pricing */}
|
|
<section className="py-20 px-6">
|
|
<div className="max-w-6xl mx-auto text-center">
|
|
<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">
|
|
{jobseekerPlans.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-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">
|
|
<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>
|
|
</section>
|
|
|
|
{/* 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>
|
|
|
|
{/* 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"><$0.01</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 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>
|
|
|
|
{/* Footer */}
|
|
<footer className="py-8 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>
|
|
</footer>
|
|
</div>
|
|
)
|
|
} |