'新增招聘

app/[locale]/jobs/JobsContent.tsx

@@ -0,0 +1,291 @@
+"use client";
+
+import { useState, useRef, type FormEvent, type ChangeEvent } from "react";
+import { Link, useLocale, useTranslation } from "@/i18n/navigation";
+
+const positionOptions = [
+  { value: "content", labelZh: "内容运营", labelEn: "Content Operations" },
+  { value: "dev", labelZh: "前端/全栈开发", labelEn: "Frontend / Full-stack Dev" },
+  { value: "design", labelZh: "UI/UX 设计", labelEn: "UI/UX Design" },
+  { value: "marketing", labelZh: "市场推广", labelEn: "Marketing" },
+  { value: "other", labelZh: "其他", labelEn: "Other" },
+];
+
+interface FormData {
+  position: string;
+  name: string;
+  email: string;
+  phone: string;
+  intro: string;
+}
+
+function Field({
+  label,
+  children,
+}: {
+  label: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="relative flex items-center gap-3 py-3.5 sm:flex-col sm:items-stretch sm:gap-0 sm:py-4 border-b border-slate-100 sm:border-b-0">
+      <label className="w-[90px] shrink-0 text-[15px] font-bold text-slate-700 sm:mb-2 sm:w-auto sm:text-[17px]">
+        {label}
+      </label>
+      <div className="relative min-w-0 flex-1">{children}</div>
+    </div>
+  );
+}
+
+function ChevronDown() {
+  return (
+    <svg
+      className="pointer-events-none absolute top-1/2 right-2 h-4 w-4 -translate-y-1/2 text-slate-400 sm:right-3"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+    >
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+    </svg>
+  );
+}
+
+export default function JobsContent() {
+  const { t } = useTranslation("jobs");
+  const locale = useLocale();
+  const [form, setForm] = useState<FormData>({
+    position: "",
+    name: "",
+    email: "",
+    phone: "",
+    intro: "",
+  });
+  const [resume, setResume] = useState<File | null>(null);
+  const [resumeError, setResumeError] = useState<string | null>(null);
+  const fileRef = useRef<HTMLInputElement>(null);
+
+  const set = (key: keyof FormData, value: string) =>
+    setForm((prev) => ({ ...prev, [key]: value }));
+
+  const handleSubmit = (e: FormEvent) => {
+    e.preventDefault();
+    setResumeError(null);
+    if (!resume) {
+      setResumeError(locale === "zh" ? "请上传简历（PDF 或 Word）" : "Please upload your resume (PDF or Word)");
+      return;
+    }
+    // 暂不提交，无业务逻辑
+    if (locale === "zh") {
+      alert("表单已填写完成，提交功能即将上线。");
+    } else {
+      alert("Form completed. Submit feature coming soon.");
+    }
+  };
+
+  const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const ext = file.name.split(".").pop()?.toLowerCase();
+    const allowed = ["pdf", "doc", "docx"];
+    if (!ext || !allowed.includes(ext)) {
+      setResumeError(locale === "zh" ? "请上传 PDF、DOC 或 DOCX 格式" : "Please upload PDF, DOC or DOCX");
+      return;
+    }
+    if (file.size > 10 * 1024 * 1024) {
+      setResumeError(locale === "zh" ? "文件大小不能超过 10MB" : "File size must be under 10MB");
+      return;
+    }
+    setResumeError(null);
+    setResume(file);
+  };
+
+  const removeResume = () => {
+    setResume(null);
+    setResumeError(null);
+    if (fileRef.current) fileRef.current.value = "";
+  };
+
+  const getLabel = (opt: (typeof positionOptions)[0]) =>
+    locale === "zh" ? opt.labelZh : opt.labelEn;
+
+  return (
+    <div className="min-h-screen bg-[#f0f4f8]">
+      <div className="mx-auto max-w-2xl px-0 py-0 sm:px-6 sm:py-10 lg:py-14">
+        {/* Banner */}
+        <div className="overflow-hidden bg-white shadow-sm sm:rounded-t-2xl">
+          <div className="relative h-40 overflow-hidden bg-gradient-to-br from-amber-400 via-orange-500 to-rose-500 sm:h-52">
+            <div className="absolute inset-0 flex flex-col items-center justify-center text-white">
+              <div className="text-6xl sm:text-7xl">💼</div>
+              <div className="mt-2 text-sm font-medium opacity-90">
+                {locale === "zh" ? "加入我们" : "Join Us"}
+              </div>
+            </div>
+            <div className="absolute -top-10 -left-10 h-40 w-40 rounded-full bg-white/10 blur-2xl" />
+            <div className="absolute -right-10 -bottom-10 h-48 w-48 rounded-full bg-white/10 blur-2xl" />
+          </div>
+          <div className="px-5 py-5 text-center sm:px-8 sm:py-7">
+            <h1 className="text-xl font-bold text-slate-800 sm:text-2xl">
+              {t("title")}
+            </h1>
+            <p className="mt-3 text-sm leading-relaxed text-slate-500 sm:text-base">
+              {t("subtitle")}
+            </p>
+          </div>
+        </div>
+
+        {/* Form */}
+        <form
+          onSubmit={handleSubmit}
+          className="mt-0 bg-white px-5 pb-8 pt-2 shadow-sm sm:mt-5 sm:rounded-2xl sm:px-8 sm:py-8 sm:shadow-md"
+        >
+          <div className="grid gap-0 sm:grid-cols-2 sm:gap-6">
+            <Field label={t("position")}>
+              <select
+                value={form.position}
+                onChange={(e) => set("position", e.target.value)}
+                required
+                className={`form-input appearance-none ${
+                  form.position ? "text-slate-800" : "text-slate-400"
+                }`}
+              >
+                <option value="" disabled>
+                  {locale === "zh" ? "请选择职位" : "Select position"}
+                </option>
+                {positionOptions.map((opt) => (
+                  <option key={opt.value} value={opt.value}>
+                    {getLabel(opt)}
+                  </option>
+                ))}
+              </select>
+              <ChevronDown />
+            </Field>
+
+            <Field label={t("name")}>
+              <input
+                type="text"
+                maxLength={80}
+                placeholder={locale === "zh" ? "您的姓名" : "Your name"}
+                value={form.name}
+                onChange={(e) => set("name", e.target.value)}
+                required
+                className="form-input"
+              />
+            </Field>
+          </div>
+
+          <div className="grid gap-0 sm:grid-cols-2 sm:gap-6">
+            <Field label={t("email")}>
+              <input
+                type="email"
+                placeholder="your@email.com"
+                value={form.email}
+                onChange={(e) => set("email", e.target.value)}
+                required
+                className="form-input"
+              />
+            </Field>
+
+            <Field label={t("phone")}>
+              <input
+                type="tel"
+                placeholder={locale === "zh" ? "手机号（选填）" : "Phone (optional)"}
+                value={form.phone}
+                onChange={(e) => set("phone", e.target.value)}
+                className="form-input"
+              />
+            </Field>
+          </div>
+
+          <div className="border-b border-slate-100 py-4 sm:border-b-0 sm:py-5">
+            <label className="mb-2 block text-base font-bold text-slate-700 sm:text-[17px]">
+              {t("intro")}
+            </label>
+            <div className="relative">
+              <textarea
+                maxLength={800}
+                rows={5}
+                placeholder={t("introPlaceholder")}
+                value={form.intro}
+                onChange={(e) => set("intro", e.target.value)}
+                className="form-input min-h-[120px] resize-none sm:min-h-[140px]"
+              />
+              <span className="absolute right-3 bottom-3 text-xs text-slate-300">
+                {form.intro.length}/800
+              </span>
+            </div>
+          </div>
+
+          {/* Resume upload (required) */}
+          <div className="py-4 sm:py-5">
+            <label className="mb-1 block text-[15px] font-bold text-slate-700 sm:text-[17px]">
+              📄 {t("resume")} <span className="ml-1 text-red-500">*</span>
+            </label>
+            <p className="mb-3 text-xs text-slate-500">
+              {t("resumeHint")}
+            </p>
+
+            <input
+              ref={fileRef}
+              type="file"
+              accept=".pdf,.doc,.docx,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+              className="hidden"
+              onChange={handleFileChange}
+            />
+
+            {resumeError && (
+              <p className="mb-2 text-sm text-red-500">{resumeError}</p>
+            )}
+
+            {resume ? (
+              <div className="flex items-center gap-3 rounded-xl border border-slate-200 bg-slate-50 px-4 py-3">
+                <span className="text-lg">📎</span>
+                <span className="flex-1 truncate text-sm font-medium text-slate-700">
+                  {resume.name}
+                </span>
+                <span className="text-xs text-slate-400">
+                  ({(resume.size / 1024).toFixed(1)} KB)
+                </span>
+                <button
+                  type="button"
+                  onClick={removeResume}
+                  className="rounded p-1 text-slate-400 transition-colors hover:bg-slate-200 hover:text-slate-600"
+                  aria-label="Remove"
+                >
+                  ✕
+                </button>
+              </div>
+            ) : (
+              <button
+                type="button"
+                onClick={() => fileRef.current?.click()}
+                className="flex w-full flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed border-slate-200 py-8 text-slate-400 transition-colors hover:border-amber-300 hover:text-amber-600"
+              >
+                <svg className="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
+                </svg>
+                <span className="text-sm">{t("resumeUpload")}</span>
+              </button>
+            )}
+          </div>
+
+          <div className="mt-8 sm:mt-10">
+            <button
+              type="submit"
+              className="w-full rounded-full bg-amber-500 px-8 py-4 text-base font-semibold text-white transition-colors hover:bg-amber-600"
+            >
+              {t("submit")}
+            </button>
+          </div>
+        </form>
+
+        <div className="mt-6 text-center">
+          <Link
+            href="/"
+            className="text-sm font-medium text-slate-500 transition-colors hover:text-slate-700"
+          >
+            ← {locale === "zh" ? "返回首页" : "Back to Home"}
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}

app/[locale]/jobs/page.tsx

@@ -0,0 +1,21 @@
+import type { Metadata } from "next";
+import Header from "../../components/Header";
+import Footer from "../../components/Footer";
+import JobsContent from "./JobsContent";
+
+export const metadata: Metadata = {
+  title: "招聘 | Careers",
+  description: "加入数字游民指南团队，我们正在招聘。",
+};
+
+export default function JobsPage() {
+  return (
+    <>
+      <Header />
+      <main>
+        <JobsContent />
+      </main>
+      <Footer />
+    </>
+  );
+}

app/components/Footer.tsx

@@ -33,7 +33,7 @@ const footerSections = [
     titleKey: "about" as const,
     links: [
       { labelKey: "aboutUs" as const, href: "/about", internal: true },
-      { labelKey: "contribute" as const, href: "#" },
+      { labelKey: "recruit" as const, href: "/jobs", internal: true, openInNewTab: true },
       { labelKey: "privacy" as const, href: "/privacy", internal: true, openInNewTab: true },
       { labelKey: "contact" as const, href: "#" },
     ],

content/themes/digital-nomad/messages/en.json

@@ -139,7 +139,7 @@
       "jike": "Jike",
       "github": "GitHub",
       "aboutUs": "About Us",
-      "contribute": "Contribute",
+      "recruit": "Careers",
       "privacy": "Privacy",
       "contact": "Contact"
     },
@@ -164,6 +164,20 @@
     "teamTitle": "Team Members",
     "teamDesc": "We are digital nomads who love remote work"
   },
+  "jobs": {
+    "title": "Careers",
+    "subtitle": "Join the Digital Nomad Guide team. Remote work, location freedom.",
+    "position": "Position",
+    "name": "Name",
+    "email": "Email",
+    "phone": "Phone",
+    "intro": "Introduction",
+    "introPlaceholder": "Briefly introduce your experience, skills and motivation",
+    "resume": "Resume",
+    "resumeHint": "PDF, DOC or DOCX, max 10MB",
+    "resumeUpload": "Click to upload resume",
+    "submit": "Submit Application"
+  },
   "auth": {
     "title": "Login / Sign up",
     "email": "Email",

content/themes/digital-nomad/messages/zh.json

@@ -139,7 +139,7 @@
       "jike": "即刻",
       "github": "GitHub",
       "aboutUs": "关于我们",
-      "contribute": "贡献指南",
+      "recruit": "招聘",
       "privacy": "隐私政策",
       "contact": "联系我们"
     },
@@ -164,6 +164,20 @@
     "teamTitle": "团队成员",
     "teamDesc": "我们是一群热爱自由工作的数字游民"
   },
+  "jobs": {
+    "title": "招聘",
+    "subtitle": "加入数字游民指南团队，远程工作，地点自由",
+    "position": "应聘职位",
+    "name": "姓名",
+    "email": "邮箱",
+    "phone": "手机",
+    "intro": "自我介绍",
+    "introPlaceholder": "请简要介绍您的经历、技能及应聘理由",
+    "resume": "简历",
+    "resumeHint": "支持 PDF、DOC、DOCX，最大 10MB",
+    "resumeUpload": "点击上传简历",
+    "submit": "提交申请"
+  },
   "auth": {
     "title": "登录 / 注册",
     "email": "邮箱",