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,116 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { motion } from 'framer-motion';
+import dynamic from 'next/dynamic';
+import { ChevronDown } from 'lucide-react';
+import { InkReveal, SealStamp, FloatingElement } from '@/lib/animations';
+import type { Product } from '@/lib/constants/products';
+
+const InkBackground = dynamic(
+  () => import('@/components/ui/ink-decoration').then(mod => ({ default: mod.InkBackground })),
+  { ssr: false }
+);
+
+const DataParticleFlow = dynamic(
+  () => import('@/components/effects/data-particle-flow').then(mod => ({ default: mod.DataParticleFlow })),
+  { ssr: false }
+);
+
+interface ProductHeroSectionProps {
+  product: Product;
+}
+
+export function ProductHeroSection({ product }: ProductHeroSectionProps) {
+  const [isVisible, setIsVisible] = useState(false);
+  const sectionRef = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry?.isIntersecting) {
+          setIsVisible(true);
+        }
+      },
+      { threshold: 0.1 }
+    );
+
+    if (sectionRef.current) {
+      observer.observe(sectionRef.current);
+    }
+
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <section
+      ref={sectionRef}
+      className="relative min-h-screen flex items-center justify-center overflow-hidden bg-gradient-to-b from-white to-[#F8F8F8]"
+    >
+      {/* 背景特效 */}
+      <InkBackground />
+      <DataParticleFlow
+        particleCount={80}
+        color="#C41E3A"
+        intensity="subtle"
+        shape="square"
+        effect="pulse"
+      />
+
+      {/* 内容 */}
+      <div className="container-wide relative z-10 py-32 md:py-40">
+        <div className="max-w-4xl mx-auto text-center">
+          {/* 分类标签 - 印章按压效果 */}
+          <SealStamp
+            delay={0.1}
+            className="inline-block px-4 py-2 bg-[#C41E3A]/20 rounded-full text-[#C41E3A] text-sm mb-6"
+          >
+            即将上市
+          </SealStamp>
+
+          {/* 产品名称 - 模糊揭示入场 */}
+          <InkReveal delay={0.2}>
+            <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold text-[#1C1C1C] mb-6">
+              {product.title}
+            </h1>
+          </InkReveal>
+
+          {/* 价值主张 - 模糊揭示入场 */}
+          <InkReveal delay={0.4}>
+            <p className="text-lg md:text-xl text-[#5C5C5C] leading-relaxed mb-10 max-w-2xl mx-auto">
+              {product.description}
+            </p>
+          </InkReveal>
+
+          {/* CTA 按钮 */}
+          <InkReveal delay={0.6}>
+            <div className="flex flex-col sm:flex-row gap-4 justify-center">
+              <span className="border-2 border-[#D9D9D9] text-[#999999] px-8 py-4 rounded-lg text-lg font-semibold inline-flex items-center justify-center cursor-not-allowed select-none">
+                敬请期待
+              </span>
+            </div>
+          </InkReveal>
+
+        </div>
+      </div>
+
+      {/* 滚动指示器 - 浮动元素包裹 */}
+      <FloatingElement
+        amplitude={10}
+        duration={1.5}
+        delay={1}
+        className="absolute bottom-8 left-1/2 -translate-x-1/2"
+      >
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={isVisible ? { opacity: 1 } : {}}
+          transition={{ duration: 0.6, delay: 1 }}
+        >
+          <div className="text-[#999999]">
+            <ChevronDown className="w-8 h-8" />
+          </div>
+        </motion.div>
+      </FloatingElement>
+    </section>
+  );
+}