feat(site): refocus portfolio for personal brand and AI full-stack profile

src/pages/hire.astro

@@ -3,85 +3,18 @@ import Layout from '@/layouts/Layout.astro';
 import GlassHeader from '@/components/GlassHeader';
 import Footer from '@/components/Footer';
 import Container from '@/components/ui/Container.astro';
+import ContactCard from '@/components/ContactCard.astro';
+import {
+  collaborationModels,
+  collaborationFitSignals,
+  collaborationProcess,
+  collaborationFaq,
+} from '@/lib/data';
 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'}>
@@ -93,18 +26,18 @@ const faqItems = isZh
         <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.'}
+            ? '这个页面只做一件事：帮助你快速判断我们是否匹配。'
+            : 'This page does one thing: help you quickly evaluate whether we are a good fit.'}
         </p>
       </section>
 
       <section class="page-content-main mt-10">
-        <h2 class="text-2xl font-bold tracking-tight">{isZh ? '合作方式' : 'Collaboration Models'}</h2>
+        <h2 class="text-2xl font-bold tracking-tight">{isZh ? '合作模型（Mock）' : 'Collaboration Models (Mock)'}</h2>
         <div class="mt-4 grid gap-4 md:grid-cols-3">
-          {models.map((model) => (
+          {collaborationModels.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>
+              <h3 class="text-lg font-bold">{model.title[lang]}</h3>
+              <p class="mt-2 text-sm text-muted-foreground">{model.description[lang]}</p>
             </article>
           ))}
         </div>
@@ -112,44 +45,36 @@ const faqItems = isZh
 
       <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>
+          <h2 class="text-xl font-bold">{isZh ? '匹配信号' : 'Good Fit Signals'}</h2>
           <ul class="mt-4 space-y-2 text-sm text-muted-foreground">
-            {paymentOptions.map((item) => <li>• {item}</li>)}
+            {collaborationFitSignals.map((item) => <li>• {item[lang]}</li>)}
           </ul>
         </article>
 
         <article class="page-surface p-6">
-          <h2 class="text-xl font-bold">{isZh ? '交付流程' : 'Delivery Process'}</h2>
+          <h2 class="text-xl font-bold">{isZh ? '合作流程' : 'Collaboration Process'}</h2>
           <ol class="mt-4 space-y-2 text-sm text-muted-foreground list-decimal pl-5">
-            {process.map((item) => <li>{item}</li>)}
+            {collaborationProcess.map((item) => <li>{item[lang]}</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>
+        <h2 class="text-xl font-bold">{isZh ? '默认协作约定' : 'Default Working Agreement'}</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>)}
+          <li>• {isZh ? '以清晰目标和边界为前提，不做无定义范围的推进。' : 'We start with clear outcomes and boundaries, not ambiguous execution.'}</li>
+          <li>• {isZh ? '同步节奏可按周设置，关键节点保持可见状态更新。' : 'Cadence is usually weekly, with visible updates at key checkpoints.'}</li>
+          <li>• {isZh ? '文档和决策记录优先，降低沟通成本与返工风险。' : 'Documentation and decision logs are prioritized to reduce rework.'}</li>
         </ul>
       </section>
 
       <section class="page-content-main mt-6 page-surface p-6">
-        <h2 class="text-xl font-bold">{isZh ? '常见问题' : 'FAQ'}</h2>
+        <h2 class="text-xl font-bold">{isZh ? '常见问题（Mock）' : 'FAQ (Mock)'}</h2>
         <div class="mt-4 space-y-4">
-          {faqItems.map((item) => (
+          {collaborationFaq.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>
+              <p class="text-sm font-semibold">{item.question[lang]}</p>
+              <p class="mt-2 text-sm text-muted-foreground">{item.answer[lang]}</p>
             </div>
           ))}
         </div>
@@ -159,18 +84,20 @@ const faqItems = isZh
         <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.'}
+            ? '如果你觉得方向匹配，直接在本页下方联系卡片里选择你习惯的方式联系我。'
+            : 'If this direction fits, use the contact card below and send a short context brief.'}
         </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 href="#contact-card" class="inline-flex h-10 items-center rounded-lg bg-primary px-5 text-sm font-semibold text-primary-foreground">
+            {isZh ? '查看联系卡片' : 'Open Contact Card'}
           </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 href={isZh ? '/zh/projects' : '/projects'} class="inline-flex h-10 items-center rounded-lg border border-border px-5 text-sm font-semibold hover:bg-muted">
+            {isZh ? '先看案例' : 'View Cases First'}
           </a>
         </div>
       </section>
+
+      <ContactCard lang={lang} showIntents={false} />
     </Container>
   </main>