张翔
f08874f5c4
CTA Optimization: - Implement scenario-based CTA text across 6 key locations - Add responsive Header CTA with icon+compact design - Enhance CTA Section with vision-driven copy Bug Fixes: - Fix useSearchParams() build failure with dynamic import wrapper - Remove useSearchParams() from PageTransition component - Fix React 19 useEffect lint errors via useSyncExternalStore UI Enhancements: - Add ripple effects and gradient animations to Button - Enhance loading skeleton with branded pulse animation
80 lines
3.1 KiB
TypeScript
80 lines
3.1 KiB
TypeScript
'use client';
|
||
|
||
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 shouldReduceMotion = useReducedMotion();
|
||
|
||
return (
|
||
<section id="challenges" className="relative py-20 md:py-28 bg-[var(--color-bg-section)]">
|
||
<div className="container-wide">
|
||
<motion.div
|
||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true, margin: '-100px' }}
|
||
transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
|
||
className="mb-14"
|
||
>
|
||
<div className="flex items-center gap-4 mb-4">
|
||
<div className="h-px flex-1 bg-[var(--color-border-primary)]" />
|
||
<span className="text-xs font-mono tracking-widest text-[var(--color-text-subtle)]">CHALLENGES</span>
|
||
<div className="h-px flex-1 bg-[var(--color-border-primary)]" />
|
||
</div>
|
||
<h2 className="text-3xl sm:text-4xl font-semibold text-[var(--color-text-primary)] text-center">
|
||
您的挑战，我们的<span className="text-[var(--color-brand-primary)] font-calligraphy">使命</span>
|
||
</h2>
|
||
<p className="text-base text-[var(--color-text-muted)] text-center mt-4 max-w-xl mx-auto">
|
||
深入理解企业数字化进程中的核心痛点，提供针对性解决方案
|
||
</p>
|
||
</motion.div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
|
||
{CHALLENGES.map((challenge, index) => (
|
||
<motion.div
|
||
key={challenge.id}
|
||
initial={shouldReduceMotion ? {} : { opacity: 0, x: index === 0 ? -32 : index === 1 ? 0 : 32 }}
|
||
whileInView={{ opacity: 1, x: 0 }}
|
||
viewport={{ once: true, margin: '-80px' }}
|
||
transition={{ duration: 0.55, delay: index * 0.12, ease: [0.16, 1, 0.3, 1] }}
|
||
>
|
||
<ChallengeCard
|
||
title={challenge.title}
|
||
description={challenge.description}
|
||
scenario={challenge.scenario}
|
||
href={challenge.href}
|
||
index={index}
|
||
/>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|