张翔
724a00f582
- 新增detail-v2组件库(HeroV2/V3, TrustSectionV2, CTASectionV2等) - Hero组件水墨雅致改造:浅色宣纸底/深色墨色文字/墨韵纹理 - 方案卡片添加推荐组合徽标(Package图标) - 独立产品页从V1组件迁移到V2/V3 - 修复why-us-section未使用导入和ESLint引号转义错误
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-[#C41E3A]">
|
|
{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>
|
|
);
|
|
}
|