164 lines
8.7 KiB
TypeScript
164 lines
8.7 KiB
TypeScript
import Link from "next/link"
|
|
|
|
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 — Beta Access
|
|
</Link>
|
|
<Link
|
|
href="/autojobs/demo"
|
|
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
|
|
</Link>
|
|
</div>
|
|
<p className="mt-6 text-slate-500 text-sm">No credit card required. Beta is free.</p>
|
|
</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>
|
|
<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 and LinkedIn. Tell us what jobs you want — keywords, location, salary range. Add your own API keys for job search engines."
|
|
},
|
|
{
|
|
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."
|
|
},
|
|
{
|
|
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."
|
|
}
|
|
].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>
|
|
|
|
{/* Features Grid */}
|
|
<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: "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: "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-3xl 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>
|
|
</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>
|
|
)
|
|
}
|