refactor: 优化网站页面结构和数据展示

- 增强服务数据模型，添加 challenges 和 outcomes 字段 - 简化统计数据配置，改为静态定义 - 重构多个页面组件，优化代码结构 - 新增产品、服务、解决方案相关的布局和组件 - 更新样式和动画配置 - 优化测试用例和类型定义 - 修复 ESLint 错误：移除不必要的 useEffect 和未使用的导入
2026-04-25 08:44:23 +08:00
parent 9650e56dcf
commit 40384ec024
77 changed files with 3751 additions and 1226 deletions
@@ -0,0 +1,137 @@
+'use client';
+
+import { useRef, Fragment } from 'react';
+import { InkReveal, FadeUp, InkCard, PulseElement } from '@/lib/animations';
+import { RippleButton } from '@/lib/animations';
+import { ScrollReveal, inkRevealVariants, slideInLeftVariants } from '@/components/ui/scroll-animations';
+import type { Product } from '@/lib/constants/products';
+
+interface ProductFeaturesSectionProps {
+  product: Product;
+}
+
+function FeatureItem({
+  feature,
+  index,
+}: {
+  feature: string;
+  index: number;
+}) {
+  // 解析功能标题和描述（中文冒号分隔）
+  const colonIndex = feature.indexOf('：');
+  const title = colonIndex > -1 ? feature.substring(0, colonIndex) : feature;
+  const description = colonIndex > -1 ? feature.substring(colonIndex + 1) : '';
+
+  // 编号格式化
+  const number = String(index + 1).padStart(2, '0');
+
+  return (
+    <div className="min-h-[50vh] flex items-center py-16">
+      <div className="container-wide">
+        <div className="max-w-6xl mx-auto grid md:grid-cols-2 gap-12 items-center">
+          {/* 左侧：编号和文字 */}
+          <div className="order-2 md:order-1">
+            {/* 编号 - InkReveal 模糊揭示 */}
+            <InkReveal delay={0}>
+              <span className="block text-7xl md:text-8xl font-mono text-[#C41E3A]/10 mb-4">
+                {number}
+              </span>
+            </InkReveal>
+
+            {/* 功能标题 - ScrollReveal + slideInLeft */}
+            <ScrollReveal variants={slideInLeftVariants} delay={0.1}>
+              <h3 className="text-2xl md:text-3xl font-bold text-[#1C1C1C] mb-4">
+                {title}
+              </h3>
+            </ScrollReveal>
+
+            {/* 功能描述 - FadeUp */}
+            {description && (
+              <FadeUp delay={0.2}>
+                <p className="text-lg text-[#5C5C5C] leading-relaxed">
+                  {description}
+                </p>
+              </FadeUp>
+            )}
+          </div>
+
+          {/* 右侧：InkCard 弹簧物理悬浮 + PulseElement 脉冲同心圆 */}
+          <div className="order-1 md:order-2">
+            <InkCard
+              className="aspect-square rounded-2xl bg-white border border-[#E5E5E5] shadow-lg flex items-center justify-center"
+              hoverScale={1.03}
+              hoverShadow="0 25px 50px rgba(196, 30, 58, 0.15)"
+            >
+              <PulseElement scale={1.08} duration={2.5}>
+                <div className="w-24 h-24 rounded-full bg-[#C41E3A]/10 flex items-center justify-center">
+                  <div className="w-12 h-12 rounded-full bg-[#C41E3A]/20" />
+                </div>
+              </PulseElement>
+            </InkCard>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function ProductFeaturesSection({ product }: ProductFeaturesSectionProps) {
+  const sectionRef = useRef<HTMLElement>(null);
+
+  return (
+    <section id="features" ref={sectionRef} className="relative bg-[#F8F8F8] overflow-hidden">
+      {/* 标题 - ScrollReveal + inkRevealVariants 模糊揭示 */}
+      <div className="pt-32 md:pt-40 pb-16">
+        <div className="container-wide">
+          <ScrollReveal variants={inkRevealVariants} delay={0}>
+            <h2 className="text-3xl md:text-4xl font-bold text-[#1C1C1C] text-center mb-4">
+              核心功能
+            </h2>
+          </ScrollReveal>
+          <ScrollReveal variants={inkRevealVariants} delay={0.1}>
+            <p className="text-lg text-[#5C5C5C] text-center max-w-2xl mx-auto">
+              全方位覆盖企业核心业务场景
+            </p>
+          </ScrollReveal>
+        </div>
+      </div>
+
+      {/* 功能列表 */}
+      {product.features.map((feature, index) => (
+        <Fragment key={index}>
+          <FeatureItem feature={feature} index={index} />
+          {(index === 1 || index === 3) && (
+            <div className="py-8">
+              <div className="container-wide">
+                <div className="max-w-2xl mx-auto bg-white rounded-2xl border border-[#E5E5E5] p-6 md:p-8 text-center shadow-sm">
+                  <p className="text-[#1C1C1C] font-semibold text-lg mb-4">
+                    想了解更多功能细节？
+                  </p>
+                  <p className="text-[#5C5C5C] mb-6">
+                    预约一次 30 分钟在线演示，了解产品如何适配您的业务
+                  </p>
+                  <div className="flex flex-col sm:flex-row gap-3 justify-center">
+                    <RippleButton
+                      href="/contact"
+                      rippleColor="rgba(196, 30, 58, 0.3)"
+                      className="bg-[#C41E3A] hover:bg-[#A01830] text-white px-6 py-3 rounded-lg font-semibold inline-flex items-center justify-center"
+                    >
+                      预约演示
+                    </RippleButton>
+                    <RippleButton
+                      href="/contact"
+                      rippleColor="rgba(196, 30, 58, 0.2)"
+                      className="border border-[#E5E5E5] text-[#5C5C5C] hover:text-[#C41E3A] hover:border-[#C41E3A]/30 px-6 py-3 rounded-lg font-semibold inline-flex items-center justify-center"
+                    >
+                      获取方案
+                    </RippleButton>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+        </Fragment>
+      ))}
+    </section>
+  );
+}