张翔
829d83522c
- 重构 About、Contact、Team 等静态营销页面 - 重构 News 新闻列表与详情页 - 重构 Products 产品目录、详情与独立产品页面 - 重构 Services 与 Solutions 服务/解决方案页面 - 重构 Detail 四层叙事组件 (Hero → Value → Trust → CTA) - 重构 Sections 页面区块组件 (Hero, CTA, SocialProof, WhyUs 等) - 新增 SectionHeader、ServiceCard、CaseCard 等可复用组件
39 lines
1.3 KiB
TypeScript
39 lines
1.3 KiB
TypeScript
'use client';
|
|
|
|
import { motion } from 'framer-motion';
|
|
import type { CaseStudy } from '@/lib/constants/products';
|
|
|
|
interface CaseStudyCardProps {
|
|
study: CaseStudy;
|
|
index: number;
|
|
}
|
|
|
|
export function CaseStudyCard({ study, index }: CaseStudyCardProps) {
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true, margin: '-50px' }}
|
|
transition={{ duration: 0.5, delay: index * 0.1 }}
|
|
className="rounded-xl border border-gray-200 bg-white p-6 shadow-sm transition-shadow hover:shadow-md"
|
|
>
|
|
<div className="mb-3 flex items-center gap-2">
|
|
<span className="rounded-full bg-red-50 px-2.5 py-1 text-xs font-medium text-brand">
|
|
{study.industry}
|
|
</span>
|
|
<span className="text-sm text-gray-500">{study.client}</span>
|
|
</div>
|
|
|
|
<h4 className="mb-2 text-sm font-semibold text-gray-900">挑战</h4>
|
|
<p className="mb-4 text-sm leading-relaxed text-gray-600">{study.challenge}</p>
|
|
|
|
<h4 className="mb-2 text-sm font-semibold text-gray-900">解决方案</h4>
|
|
<p className="mb-4 text-sm leading-relaxed text-gray-600">{study.solution}</p>
|
|
|
|
<div className="rounded-lg bg-green-50 p-3">
|
|
<p className="text-sm font-medium text-green-800">{study.result}</p>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
}
|