张翔
91 lines
2.7 KiB
TypeScript
91 lines
2.7 KiB
TypeScript
'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="challenges"
|
||
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>
|
||
);
|
||
}
|