feat(site): optimize full-stack positioning and collaboration conversion pages

src/pages/hire.astro

@@ -1,3 +1,178 @@
 ---
-return Astro.redirect('/contact', 301);
+import Layout from '@/layouts/Layout.astro';
+import GlassHeader from '@/components/GlassHeader';
+import Footer from '@/components/Footer';
+import Container from '@/components/ui/Container.astro';
+import type { Lang } from '@/types/i18n';
+import { defaultLang } from '@/i18n/ui';
+
+const lang = (Astro.currentLocale as Lang) || defaultLang;
+const isZh = lang === 'zh';
+
+const models = isZh
+  ? [
+      {
+        title: '远程岗位合作',
+        desc: '适合长期加入团队，以资深前端/全栈角色参与核心产品建设。',
+      },
+      {
+        title: '项目制交付',
+        desc: '适合目标明确的系统建设、重构与性能优化项目，按阶段交付。',
+      },
+      {
+        title: '技术咨询/顾问',
+        desc: '适合架构评审、工程治理、复杂问题诊断与实施建议。',
+      },
+    ]
+  : [
+      {
+        title: 'Remote Role',
+        desc: 'Long-term collaboration as a senior frontend/full-stack engineer on core products.',
+      },
+      {
+        title: 'Project Delivery',
+        desc: 'Milestone-based delivery for scoped system builds, refactors, and performance optimization.',
+      },
+      {
+        title: 'Technical Consulting',
+        desc: 'Architecture reviews, engineering governance, complex issue diagnosis, and execution guidance.',
+      },
+    ];
+
+const paymentOptions = isZh
+  ? ['里程碑付款（推荐）', '月度结算（长期合作）', '咨询按小时或按天计费']
+  : ['Milestone-based payments (recommended)', 'Monthly settlement (for long-term collaboration)', 'Hourly or daily consulting billing'];
+
+const startingPackages = isZh
+  ? [
+      'Bug 修复：¥800 起（按问题复杂度评估）',
+      '小型定制页面/落地页：¥3000 起',
+      '后台模块开发：¥6000 起（按里程碑）',
+    ]
+  : [
+      'Bug fixing: from $120 (scoped by issue complexity)',
+      'Small custom page/landing page: from $450',
+      'Admin module delivery: from $850 (milestone-based)',
+    ];
+
+const process = isZh
+  ? ['需求沟通与目标确认', '方案评估与范围定义', '里程碑排期与执行', '阶段验收与交付总结']
+  : ['Discovery and goal alignment', 'Solution assessment and scope definition', 'Milestone planning and execution', 'Stage acceptance and delivery summary'];
+
+const boundaries = isZh
+  ? [
+      '默认不承接违法或高风险灰色业务。',
+      '需求变更超出范围时，会先同步影响与补充报价。',
+      '交付文档、代码与协作记录会保持透明可追踪。',
+    ]
+  : [
+      'No illegal or high-risk gray-area business engagements.',
+      'Out-of-scope changes are assessed first with impact and updated pricing.',
+      'Delivery docs, code, and collaboration records remain transparent and traceable.',
+    ];
+
+const faqItems = isZh
+  ? [
+      { q: '多久回复？', a: '默认 24 小时内给出初步回复，紧急问题可优先处理。' },
+      { q: '如何开始合作？', a: '先在联系页提交背景与目标，我会给出范围评估与合作建议。' },
+      { q: '需求变更多怎么办？', a: '超出原范围会先同步影响、排期和补充报价，再继续执行。' },
+    ]
+  : [
+      { q: 'Response time?', a: 'Initial response is usually within 24 hours, with priority handling for urgent issues.' },
+      { q: 'How do we start?', a: 'Submit your context and goals on the contact page, then I provide scope assessment and recommendations.' },
+      { q: 'What about scope changes?', a: 'Out-of-scope changes are reviewed with impact and revised pricing before execution.' },
+    ];
 ---
+
+<Layout title={isZh ? '合作' : 'Hire'}>
+  <GlassHeader lang={lang} client:load transition:persist="header" />
+
+  <main class="min-h-screen pt-24 pb-20">
+    <Container>
+      <section class="page-content-main">
+        <h1 class="text-4xl font-bold tracking-tight sm:text-5xl">{isZh ? '合作方式' : 'Work With Me'}</h1>
+        <p class="mt-4 text-lg leading-relaxed text-muted-foreground">
+          {isZh
+            ? '这个页面用于明确合作方式、付款方式、交付流程与边界，方便你快速判断是否匹配。'
+            : 'This page outlines collaboration models, payment methods, delivery process, and boundaries to quickly assess fit.'}
+        </p>
+      </section>
+
+      <section class="page-content-main mt-10">
+        <h2 class="text-2xl font-bold tracking-tight">{isZh ? '合作方式' : 'Collaboration Models'}</h2>
+        <div class="mt-4 grid gap-4 md:grid-cols-3">
+          {models.map((model) => (
+            <article class="page-surface p-5">
+              <h3 class="text-lg font-bold">{model.title}</h3>
+              <p class="mt-2 text-sm text-muted-foreground">{model.desc}</p>
+            </article>
+          ))}
+        </div>
+      </section>
+
+      <section class="page-content-main mt-6 grid gap-6 md:grid-cols-2">
+        <article class="page-surface p-6">
+          <h2 class="text-xl font-bold">{isZh ? '付款方式' : 'Payment Terms'}</h2>
+          <ul class="mt-4 space-y-2 text-sm text-muted-foreground">
+            {paymentOptions.map((item) => <li>• {item}</li>)}
+          </ul>
+        </article>
+
+        <article class="page-surface p-6">
+          <h2 class="text-xl font-bold">{isZh ? '交付流程' : 'Delivery Process'}</h2>
+          <ol class="mt-4 space-y-2 text-sm text-muted-foreground list-decimal pl-5">
+            {process.map((item) => <li>{item}</li>)}
+          </ol>
+        </article>
+      </section>
+
+      <section class="page-content-main mt-6 page-surface p-6">
+        <h2 class="text-xl font-bold">{isZh ? '参考起步价' : 'Starting Packages'}</h2>
+        <ul class="mt-4 space-y-2 text-sm text-muted-foreground">
+          {startingPackages.map((item) => <li>• {item}</li>)}
+        </ul>
+        <p class="mt-3 text-xs text-muted-foreground">
+          {isZh ? '说明：最终报价会根据需求复杂度、时间窗口与交付范围确认。' : 'Note: final pricing depends on complexity, timeline, and agreed delivery scope.'}
+        </p>
+      </section>
+
+      <section class="page-content-main mt-6 page-surface p-6">
+        <h2 class="text-xl font-bold">{isZh ? '合作边界与说明' : 'Engagement Boundaries'}</h2>
+        <ul class="mt-4 space-y-2 text-sm text-muted-foreground">
+          {boundaries.map((item) => <li>• {item}</li>)}
+        </ul>
+      </section>
+
+      <section class="page-content-main mt-6 page-surface p-6">
+        <h2 class="text-xl font-bold">{isZh ? '常见问题' : 'FAQ'}</h2>
+        <div class="mt-4 space-y-4">
+          {faqItems.map((item) => (
+            <div class="rounded-md border border-border/70 p-4">
+              <p class="text-sm font-semibold">{item.q}</p>
+              <p class="mt-2 text-sm text-muted-foreground">{item.a}</p>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      <section class="page-content-main mt-6 page-surface p-6">
+        <h2 class="text-xl font-bold">{isZh ? '下一步' : 'Next Step'}</h2>
+        <p class="mt-3 text-sm text-muted-foreground">
+          {isZh
+            ? '如果你已经有明确岗位或项目需求，请进入联系页提交背景、目标、时间与预算信息。'
+            : 'If you already have a role or project in mind, continue to the contact page with context, goals, timeline, and budget.'}
+        </p>
+        <div class="mt-5 flex flex-wrap gap-3">
+          <a href={isZh ? '/zh/contact' : '/contact'} class="inline-flex h-10 items-center rounded-lg bg-primary px-5 text-sm font-semibold text-primary-foreground">
+            {isZh ? '进入联系页' : 'Go to Contact'}
+          </a>
+          <a href={isZh ? '/zh/contact#project-collaboration' : '/contact#project-collaboration'} class="inline-flex h-10 items-center rounded-lg border border-border px-5 text-sm font-semibold hover:bg-muted">
+            {isZh ? '项目合作入口' : 'Project Collaboration'}
+          </a>
+        </div>
+      </section>
+    </Container>
+  </main>
+
+  <Footer lang={lang} client:load />
+</Layout>