105 lines
4.7 KiB
TypeScript
105 lines
4.7 KiB
TypeScript
import Footer from "@/app/components/Footer";
|
||
import { jobs } from "@/app/data/mock";
|
||
|
||
export const metadata = {
|
||
title: "加入我们 | 游牧中国",
|
||
description: "加入游牧中国团队，一起打造中国最好的数字游民社区。",
|
||
};
|
||
|
||
export default function CareersPage() {
|
||
return (
|
||
<>
|
||
<main className="min-h-screen bg-[#fafafa] dark:bg-gray-950">
|
||
<section className="max-w-4xl mx-auto px-4 sm:px-6 py-12 sm:py-20">
|
||
<h1 className="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-gray-100 mb-6 flex items-center gap-2">
|
||
<span className="w-1 h-10 bg-[#ff4d4f] rounded-full" />
|
||
加入我们
|
||
</h1>
|
||
<p className="text-lg text-gray-600 dark:text-gray-400 leading-relaxed mb-10">
|
||
游牧中国正在寻找志同道合的伙伴，一起打造中国最好的数字游民社区。
|
||
我们鼓励远程工作，支持灵活的工作时间，欢迎热爱旅行和自由生活的你。
|
||
</p>
|
||
|
||
{/* Benefits */}
|
||
<div className="bg-white dark:bg-gray-900 rounded-2xl p-6 sm:p-8 mb-10 border border-gray-100 dark:border-gray-800">
|
||
<h2 className="text-xl font-bold text-gray-900 dark:text-gray-100 mb-6">为什么加入我们</h2>
|
||
<div className="grid sm:grid-cols-2 gap-4">
|
||
<div className="flex items-start gap-3">
|
||
<span className="text-2xl">🏝️</span>
|
||
<div>
|
||
<h3 className="font-medium text-gray-900 dark:text-gray-100">远程工作</h3>
|
||
<p className="text-sm text-gray-500">支持全远程，可在大理、泰国等地办公</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-start gap-3">
|
||
<span className="text-2xl">⏰</span>
|
||
<div>
|
||
<h3 className="font-medium text-gray-900 dark:text-gray-100">弹性时间</h3>
|
||
<p className="text-sm text-gray-500">核心时间外，自由安排工作时间</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-start gap-3">
|
||
<span className="text-2xl">🎉</span>
|
||
<div>
|
||
<h3 className="font-medium text-gray-900 dark:text-gray-100">有趣同事</h3>
|
||
<p className="text-sm text-gray-500">团队成员都是数字游民，志同道合</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-start gap-3">
|
||
<span className="text-2xl">📈</span>
|
||
<div>
|
||
<h3 className="font-medium text-gray-900 dark:text-gray-100">成长空间</h3>
|
||
<p className="text-sm text-gray-500">快速发展的创业团队，机会多多</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Job Openings */}
|
||
<h2 className="text-xl font-bold text-gray-900 dark:text-gray-100 mb-6">热招职位</h2>
|
||
<div className="space-y-4">
|
||
{jobs.map((job) => (
|
||
<div
|
||
key={job.id}
|
||
className="bg-white dark:bg-gray-900 rounded-xl p-5 border border-gray-100 dark:border-gray-800 hover:shadow-md transition-shadow"
|
||
>
|
||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-3">
|
||
<div>
|
||
<h3 className="text-lg font-bold text-gray-900 dark:text-gray-100">{job.title}</h3>
|
||
<p className="text-sm text-gray-500">
|
||
{job.department} · {job.location} · {job.type}
|
||
</p>
|
||
</div>
|
||
<span className="text-[#ff4d4f] font-medium">{job.salary}</span>
|
||
</div>
|
||
<p className="text-gray-600 dark:text-gray-400 text-sm mb-4">{job.description}</p>
|
||
<div className="flex flex-wrap gap-2">
|
||
{job.requirements.slice(0, 3).map((req, index) => (
|
||
<span
|
||
key={index}
|
||
className="px-2 py-1 bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 text-xs rounded-md"
|
||
>
|
||
{req}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Contact */}
|
||
<div className="mt-10 text-center">
|
||
<p className="text-gray-600 dark:text-gray-400">
|
||
没有看到合适的职位？请发送简历至{" "}
|
||
<a href="mailto:hello@nomadcna.com" className="text-[#ff4d4f] hover:underline">
|
||
hello@nomadcna.com
|
||
</a>
|
||
</p>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
<Footer />
|
||
</>
|
||
);
|
||
}
|