张翔
a272e58aaa
- 新增 InkGlowCard 墨韵流光卡片组件，统一全站卡片交互风格 - 新增 PageNav 面包屑组件，统一全站页面导航 - 统一色彩体系、排版层级、间距节奏和动画风格 - 修复 CTA 区品牌名称错误（诺瓦隆→睿新致遠） - 修复 ERP 产品卖点与年费制定价矛盾 - 导航下拉补充 SDS 和 OA 产品 - 统一全站数据指标为 12+年核心团队经验、6自研产品、10+团队成员 - 移除不可靠的 100%客户满意度和 30+行业专家指标 - 修复新闻时间线不合理问题，调整里程碑节奏 - 统一响应承诺为工作日快速响应 - 服务第4项重命名为行业方案实施，厘清概念 - 服务详情页效果数据改为定性描述 - 删除 cases 模块，精简代码库
91 lines
2.8 KiB
TypeScript
91 lines
2.8 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#consulting',
|
||
},
|
||
{
|
||
id: 'growth-bottleneck',
|
||
title: '增长瓶颈',
|
||
description: '业务规模扩大但管理手段滞后，流程效率低下，难以支撑持续增长的业务需求。',
|
||
scenario: 'growth' as const,
|
||
href: '/solutions#tech',
|
||
},
|
||
{
|
||
id: 'compliance-risk',
|
||
title: '合规风险',
|
||
description: '行业监管日趋严格，传统手工操作难以满足合规要求，数据安全和审计面临挑战。',
|
||
scenario: 'compliance' as const,
|
||
href: '/solutions#accompany',
|
||
},
|
||
];
|
||
|
||
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="py-20 md:py-28 bg-[#FAFAFA]"
|
||
>
|
||
<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 max-w-3xl mx-auto mb-14"
|
||
>
|
||
<h2 className="text-3xl sm:text-4xl font-semibold text-[#1C1C1C] mb-4">
|
||
您的挑战，我们的<span className="text-[#C41E3A] font-calligraphy">使命</span>
|
||
</h2>
|
||
<p className="text-base text-[#595959]">
|
||
深入理解企业数字化进程中的核心痛点，提供针对性解决方案
|
||
</p>
|
||
</motion.div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
|
||
{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>
|
||
);
|
||
}
|