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>
+  );
+}
@@ -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>
+  );
+}
@@ -0,0 +1,64 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { StaticLink } from '@/components/ui/static-link';
+import { ArrowRight } from 'lucide-react';
+
+interface ChallengeCardProps {
+  title: string;
+  description: string;
+  scenario: 'isolation' | 'growth' | 'compliance';
+  href: string;
+  index: number;
+}
+
+const scenarioStyles = {
+  isolation: {
+    bg: 'bg-[var(--color-challenge-isolation)]',
+    hoverBg: 'hover:bg-[var(--color-challenge-isolation-hover)]',
+    accent: 'border-l-[#C41E3A]',
+    icon: '🔒',
+  },
+  growth: {
+    bg: 'bg-[var(--color-challenge-growth)]',
+    hoverBg: 'hover:bg-[var(--color-challenge-growth-hover)]',
+    accent: 'border-l-[#D97706]',
+    icon: '📈',
+  },
+  compliance: {
+    bg: 'bg-[var(--color-challenge-compliance)]',
+    hoverBg: 'hover:bg-[var(--color-challenge-compliance-hover)]',
+    accent: 'border-l-[#16A34A]',
+    icon: '🛡️',
+  },
+};
+
+export function ChallengeCard({ title, description, scenario, href, index }: ChallengeCardProps) {
+  const style = scenarioStyles[scenario];
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true }}
+      transition={{ duration: 0.4, delay: index * 0.1, ease: [0.16, 1, 0.3, 1] }}
+    >
+      <StaticLink
+        href={href}
+        className={`group block p-6 rounded-xl border-l-4 ${style.accent} ${style.bg} ${style.hoverBg} transition-all duration-300 hover:shadow-md h-full`}
+      >
+        <div className="text-2xl mb-3">{style.icon}</div>
+        <h3 className="text-lg font-semibold text-[#1C1C1C] mb-2 group-hover:text-[#C41E3A] transition-colors">
+          {title}
+        </h3>
+        <p className="text-sm text-[#595959] leading-relaxed mb-4">
+          {description}
+        </p>
+        <span className="inline-flex items-center gap-1 text-sm font-medium text-[#C41E3A] group-hover:gap-2 transition-all">
+          了解方案
+          <ArrowRight className="w-4 h-4" />
+        </span>
+      </StaticLink>
+    </motion.div>
+  );
+}
@@ -0,0 +1,41 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { StaticLink } from '@/components/ui/static-link';
+import { ArrowUpRight } from 'lucide-react';
+
+interface ProductCardProps {
+  title: string;
+  description: string;
+  href: string;
+  index: number;
+}
+
+export function ProductCard({ title, description, href, index }: ProductCardProps) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true }}
+      transition={{ duration: 0.4, delay: index * 0.1, ease: [0.16, 1, 0.3, 1] }}
+    >
+      <StaticLink
+        href={href}
+        className="group block p-6 rounded-xl border border-[#E5E5E5] bg-white hover:border-[#C41E3A]/40 hover:shadow-lg transition-all duration-300 h-full"
+      >
+        <div className="flex items-start justify-between mb-4">
+          <span className="inline-flex items-center justify-center w-10 h-10 rounded-lg bg-[#FEF2F4] text-[#C41E3A] text-sm font-bold">
+            {String(index + 1).padStart(2, '0')}
+          </span>
+          <ArrowUpRight className="w-5 h-5 text-[#595959] group-hover:text-[#C41E3A] transition-colors" />
+        </div>
+        <h3 className="text-lg font-semibold text-[#1C1C1C] mb-2 group-hover:text-[#C41E3A] transition-colors">
+          {title}
+        </h3>
+        <p className="text-sm text-[#595959] leading-relaxed">
+          {description}
+        </p>
+      </StaticLink>
+    </motion.div>
+  );
+}