feat: add ProductCard, ProductMatrixSection, ChallengeCard, and ChallengeSection components

2026-04-30 19:18:07 +08:00
parent 84501fda14
commit a6e1761b3d
4 changed files with 261 additions and 0 deletions
@@ -0,0 +1,90 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { motion } from 'framer-motion';
+import { ChallengeCard } from '@/components/ui/challenge-card';
+import { useReducedMotion } from '@/hooks/use-reduced-motion';
+
+const CHALLENGES = [
+  {
+    id: 'data-isolation',
+    title: '数据孤岛',
+    description: '各部门系统独立运行，数据无法互通共享，导致决策信息碎片化，影响整体运营效率。',
+    scenario: 'isolation' as const,
+    href: '/solutions/data-integration',
+  },
+  {
+    id: 'growth-bottleneck',
+    title: '增长瓶颈',
+    description: '业务规模扩大但管理手段滞后，流程效率低下，难以支撑持续增长的业务需求。',
+    scenario: 'growth' as const,
+    href: '/solutions/growth-enablement',
+  },
+  {
+    id: 'compliance-risk',
+    title: '合规风险',
+    description: '行业监管日趋严格，传统手工操作难以满足合规要求，数据安全和审计面临挑战。',
+    scenario: 'compliance' as const,
+    href: '/solutions/compliance-management',
+  },
+];
+
+export function ChallengeSection() {
+  const [isVisible, setIsVisible] = useState(false);
+  const sectionRef = useRef<HTMLElement>(null);
+  const shouldReduceMotion = useReducedMotion();
+
+  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
+      id="solutions"
+      ref={sectionRef}
+      className="bg-white py-16 md:py-24"
+    >
+      <div className="container-wide">
+        <motion.div
+          initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
+          animate={isVisible ? { opacity: 1, y: 0 } : {}}
+          transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
+          className="mb-12"
+        >
+          <h2 className="text-3xl sm:text-4xl font-semibold text-[#1C1C1C] mb-4">
+            您的挑战，我们的使命
+          </h2>
+          <p className="text-lg text-[#595959] max-w-2xl">
+            深入理解企业数字化进程中的核心痛点，提供针对性解决方案
+          </p>
+        </motion.div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          {CHALLENGES.map((challenge, index) => (
+            <ChallengeCard
+              key={challenge.id}
+              title={challenge.title}
+              description={challenge.description}
+              scenario={challenge.scenario}
+              href={challenge.href}
+              index={index}
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}