feat: add SocialProofSection with stats cards and scroll animation

2026-04-30 19:13:45 +08:00
parent 06a9d33556
commit 84501fda14
1 changed files with 73 additions and 0 deletions
@@ -0,0 +1,73 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { motion } from 'framer-motion';
+import { STATS } from '@/lib/constants';
+import { useReducedMotion } from '@/hooks/use-reduced-motion';
+
+export function SocialProofSection() {
+  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.2 }
+    );
+
+    if (sectionRef.current) {
+      observer.observe(sectionRef.current);
+    }
+
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <section
+      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="text-center 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 mx-auto">
+            深耕企业数字化领域，以专业实力赢得客户信赖
+          </p>
+        </motion.div>
+
+        <motion.div
+          initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
+          animate={isVisible ? { opacity: 1, y: 0 } : {}}
+          transition={{ duration: 0.5, delay: 0.2, ease: [0.16, 1, 0.3, 1] }}
+          className="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12"
+        >
+          {STATS.map((stat) => (
+            <div
+              key={stat.label}
+              className="text-center p-6 rounded-xl bg-[#FFFBF5] border border-[#E5E5E5] hover:border-[#C41E3A]/30 hover:shadow-md transition-all duration-300"
+            >
+              <div className="text-4xl sm:text-5xl font-bold text-[#C41E3A] mb-2">
+                {stat.value}
+              </div>
+              <div className="text-sm text-[#595959] font-medium">
+                {stat.label}
+              </div>
+            </div>
+          ))}
+        </motion.div>
+      </div>
+    </section>
+  );
+}