feat(methodology): add CMS-driven methodology page skeleton

- 新增 methodology 内容模型（content-types + seed），内容由 CMS 后台可编辑 - 新建 /methodology 页面：Hero / 四阶段 Cards / 空态占位 / 轻量 CTA - 首页「了解我们的方法论」CTA 改指向 /methodology；sitemap 收录 - 单元测试 4/4 + 视觉基线通过，type-check / lint 0 errors
2026-08-19 15:28:15 +08:00
parent c195768281
commit 6573ab449e
9 changed files with 421 additions and 3 deletions
@@ -0,0 +1,171 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal';
+import { EASE_OUT } from '@/components/ui/page-decoration';
+import { Button } from '@/components/ui/button';
+import { ArrowRight, CheckCircle2 } from 'lucide-react';
+
+interface MethodologyPhase {
+  number?: number;
+  title: string;
+  subtitle?: string;
+  description?: string;
+  activities?: string[];
+  deliverables?: string[];
+}
+
+interface MethodologyContentProps {
+  data: Record<string, any> | null;
+}
+
+export function MethodologyContent({ data }: MethodologyContentProps) {
+  const heroSubtitle = data?.heroSubtitle || '方法论';
+  const heroTitle = data?.heroTitle || '从诊断到优化\n四阶段推进数字化转型';
+  const heroDescription = data?.heroDescription || '';
+  const phases: MethodologyPhase[] = Array.isArray(data?.phases) ? data.phases : [];
+
+  return (
+    <main>
+      {/* Hero：品牌化定位，轻量 CTA */}
+      <section className="relative min-h-[60vh] flex items-center overflow-hidden bg-white">
+        <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10 w-full py-24 sm:py-28 lg:py-32">
+          <div className="max-w-4xl">
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.8, delay: 0.1, ease: EASE_OUT }}
+              className="inline-flex items-center gap-2 px-3 py-1.5 text-xs font-bold text-brand bg-brand/10 mb-8"
+            >
+              {heroSubtitle}
+            </motion.div>
+            <motion.h1
+              initial={{ opacity: 0, y: 40 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.9, delay: 0.2, ease: EASE_OUT }}
+              className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-ink leading-[1.05] tracking-tight mb-8 whitespace-pre-line"
+            >
+              {heroTitle}
+            </motion.h1>
+            <motion.p
+              initial={{ opacity: 0, y: 30 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.8, delay: 0.35, ease: EASE_OUT }}
+              className="text-lg sm:text-xl text-text-secondary max-w-2xl leading-relaxed"
+            >
+              {heroDescription}
+            </motion.p>
+          </div>
+        </div>
+      </section>
+
+      {/* 阶段骨架：四阶段 Cards，空态占位 */}
+      <section className="relative py-20 sm:py-28 lg:py-32 overflow-hidden bg-bg-secondary">
+        <div className="absolute top-0 left-0 right-0 h-px bg-border-primary" />
+        <div className="absolute bottom-0 left-0 right-0 h-px bg-border-primary" />
+        <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
+          <ScrollReveal className="max-w-3xl mb-14 sm:mb-16">
+            <h2 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-ink tracking-tight leading-tight">
+              四阶段推进，<span className="text-brand">步步可衡量</span>
+            </h2>
+            <p className="text-text-secondary text-lg mt-6 leading-relaxed">
+              每个阶段都有明确的交付物与验证标准，确保转型过程可控、结果可量化。
+            </p>
+          </ScrollReveal>
+
+          {phases.length > 0 ? (
+            <div className="relative">
+              <div className="hidden lg:block absolute top-16 left-[12.5%] right-[12.5%] h-px bg-border-primary" />
+              <StaggerReveal
+                className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8"
+                staggerDelay={0.08}
+                delayChildren={0.05}
+              >
+                {phases.map((phase, idx) => (
+                  <motion.div
+                    key={phase.title || idx}
+                    className="relative overflow-hidden bg-white border border-border-primary transition-all duration-300 hover:-translate-y-1 hover:shadow-lg"
+                  >
+                    <div className="p-7 md:p-8">
+                      <div className="w-11 h-11 rounded-full flex items-center justify-center mb-5 text-base font-bold bg-brand/10 text-brand">
+                        {phase.number ?? idx + 1}
+                      </div>
+                      <h3 className="text-lg font-bold text-ink mb-1">{phase.title}</h3>
+                      {phase.subtitle && (
+                        <p className="text-xs text-brand font-medium mb-3">{phase.subtitle}</p>
+                      )}
+                      {phase.description && (
+                        <p className="text-sm text-text-secondary leading-relaxed mb-5">{phase.description}</p>
+                      )}
+
+                      {phase.activities?.length ? (
+                        <div className="mb-4">
+                          <p className="text-xs font-semibold text-ink mb-2 tracking-wide">核心活动</p>
+                          <ul className="space-y-1.5">
+                            {phase.activities.map((activity, i) => (
+                              <li key={i} className="flex items-start gap-2 text-xs text-text-secondary">
+                                <CheckCircle2 className="w-3.5 h-3.5 text-brand mt-0.5 shrink-0" />
+                                {activity}
+                              </li>
+                            ))}
+                          </ul>
+                        </div>
+                      ) : null}
+
+                      {phase.deliverables?.length ? (
+                        <div>
+                          <p className="text-xs font-semibold text-ink mb-2 tracking-wide">交付物</p>
+                          <ul className="space-y-1.5">
+                            {phase.deliverables.map((deliverable, i) => (
+                              <li key={i} className="flex items-start gap-2 text-xs text-text-muted">
+                                <span className="w-1.5 h-1.5 bg-brand/40 rounded-full mt-1.5 shrink-0" />
+                                {deliverable}
+                              </li>
+                            ))}
+                          </ul>
+                        </div>
+                      ) : null}
+                    </div>
+                  </motion.div>
+                ))}
+              </StaggerReveal>
+            </div>
+          ) : (
+            <div className="bg-white border border-border-primary p-10 sm:p-16 text-center">
+              <h3 className="text-xl font-bold text-ink mb-3">方法论内容即将发布</h3>
+              <p className="text-text-secondary max-w-xl mx-auto leading-relaxed">
+                我们正在沉淀与首批客户共创过程中的方法论实践，完成后将在此呈现完整框架。
+              </p>
+            </div>
+          )}
+        </div>
+      </section>
+
+      {/* CTA：轻量导向服务与联系 */}
+      <section className="relative py-20 sm:py-28 lg:py-32 overflow-hidden bg-white">
+        <div className="absolute top-0 left-0 right-0 h-px bg-border-primary" />
+        <div className="max-w-container mx-auto px-6 lg:px-10">
+          <ScrollReveal className="text-center max-w-3xl mx-auto">
+            <h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-ink tracking-tight leading-tight mb-6 sm:mb-8">
+              与方法论匹配的<span className="text-brand">专业服务</span>
+            </h2>
+            <p className="text-xl text-text-secondary mb-12 max-w-2xl mx-auto leading-relaxed">
+              我们的咨询服务贯穿方法论的每个阶段，从战略规划到落地实施全程陪伴。
+            </p>
+            <div className="flex flex-wrap justify-center gap-6">
+              <Button size="xl" asChild>
+                <a href="/services">
+                  了解我们的服务
+                  <ArrowRight className="w-5 h-5 ml-2" />
+                </a>
+              </Button>
+              <Button size="xl" variant="outline" asChild>
+                <a href="/contact">联系我们</a>
+              </Button>
+            </div>
+          </ScrollReveal>
+        </div>
+      </section>
+    </main>
+  );
+}