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,66 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { motion } from 'framer-motion';
+import { ProductCard } from '@/components/ui/product-card';
+import { PRODUCTS } from '@/lib/constants';
+import { useReducedMotion } from '@/hooks/use-reduced-motion';
+
+export function ProductMatrixSection() {
+  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="products"
+      ref={sectionRef}
+      className="bg-[#FFFBF5] 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 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+          {PRODUCTS.map((product, index) => (
+            <ProductCard
+              key={product.id}
+              title={product.title}
+              description={product.description}
+              href={`/products/${product.id}`}
+              index={index}
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}