275 lines
13 KiB
TypeScript
275 lines
13 KiB
TypeScript
import { useState } from 'react';
|
||
import { ArrowRight, TrendingUp, Users, Clock, CheckCircle, Star } from 'lucide-react';
|
||
|
||
type Case = {
|
||
id: string;
|
||
name: string;
|
||
company: string;
|
||
industry: string;
|
||
image: string;
|
||
description: string;
|
||
challenge: string;
|
||
solution: string;
|
||
results: {
|
||
metric: string;
|
||
value: string;
|
||
improvement: string;
|
||
}[];
|
||
testimonial: {
|
||
quote: string;
|
||
author: string;
|
||
position: string;
|
||
};
|
||
tags: string[];
|
||
};
|
||
|
||
export default function CaseList() {
|
||
const [selectedCase, setSelectedCase] = useState<string | null>(null);
|
||
|
||
const cases: Case[] = [
|
||
{
|
||
id: '1',
|
||
name: '电商平台全球加速',
|
||
company: '某大型电商平台',
|
||
industry: '电商零售',
|
||
image: '/hero-graphic.png',
|
||
description: '为全球领先的电商平台提供CDN加速服务，显著提升用户体验和转化率。',
|
||
challenge: '该电商平台面临全球用户访问速度慢、页面加载时间长的问题，特别是在海外用户访问时，导致用户流失和转化率下降。',
|
||
solution: '部署全球CDN网络，优化图片和静态资源加载，实施智能路由和缓存策略，提供多层次的加速解决方案。',
|
||
results: [
|
||
{ metric: '页面加载速度', value: '2.1秒', improvement: '提升 65%' },
|
||
{ metric: '全球访问延迟', value: '45ms', improvement: '降低 70%' },
|
||
{ metric: '转化率', value: '12.5%', improvement: '提升 28%' },
|
||
{ metric: '用户满意度', value: '98%', improvement: '提升 15%' }
|
||
],
|
||
testimonial: {
|
||
quote: 'Pinnovate Cloud 的加速服务帮助我们显著提升了全球用户的访问体验，转化率提升了近30%，这对我们的业务增长起到了关键作用。',
|
||
author: '张总',
|
||
position: '技术总监'
|
||
},
|
||
tags: ['CDN加速', '全球部署', '性能优化', '电商']
|
||
},
|
||
{
|
||
id: '2',
|
||
name: '在线游戏低延迟优化',
|
||
company: '知名游戏公司',
|
||
industry: '在线游戏',
|
||
image: '/hero-graphic.png',
|
||
description: '为多人在线游戏提供全球低延迟网络优化，确保玩家获得流畅的游戏体验。',
|
||
challenge: '游戏公司需要为全球玩家提供低延迟、高稳定的网络连接，确保实时对战和多人协作的流畅性。',
|
||
solution: '部署专用游戏加速节点，优化网络路由，实施智能负载均衡，提供专线级别的网络质量保障。',
|
||
results: [
|
||
{ metric: '游戏延迟', value: '35ms', improvement: '降低 60%' },
|
||
{ metric: '连接稳定性', value: '99.9%', improvement: '提升 25%' },
|
||
{ metric: '玩家留存率', value: '85%', improvement: '提升 20%' },
|
||
{ metric: '服务器负载', value: '优化', improvement: '降低 40%' }
|
||
],
|
||
testimonial: {
|
||
quote: '通过 Pinnovate Cloud 的游戏加速服务，我们的玩家在全球范围内都能享受到流畅的游戏体验，玩家满意度大幅提升。',
|
||
author: '李经理',
|
||
position: '运营总监'
|
||
},
|
||
tags: ['游戏加速', '低延迟', '全球节点', '实时优化']
|
||
},
|
||
{
|
||
id: '3',
|
||
name: '金融平台安全加速',
|
||
company: '大型金融机构',
|
||
industry: '金融服务',
|
||
image: '/hero-graphic.png',
|
||
description: '为金融机构提供安全可靠的网络加速服务，确保交易系统的稳定性和安全性。',
|
||
challenge: '金融机构需要处理大量实时交易数据，对网络稳定性和安全性要求极高，同时需要全球用户能够快速访问。',
|
||
solution: '部署企业级安全防护，实施端到端加密，提供高可用性保障，结合智能路由和负载均衡技术。',
|
||
results: [
|
||
{ metric: '系统可用性', value: '99.99%', improvement: '提升 0.1%' },
|
||
{ metric: '交易响应时间', value: '120ms', improvement: '降低 50%' },
|
||
{ metric: '安全事件', value: '0', improvement: '100% 防护' },
|
||
{ metric: '用户满意度', value: '99.5%', improvement: '提升 8%' }
|
||
],
|
||
testimonial: {
|
||
quote: 'Pinnovate Cloud 不仅提供了卓越的性能优化，更重要的是保证了我们金融系统的安全性和稳定性，完全符合我们的合规要求。',
|
||
author: '王总',
|
||
position: 'CTO'
|
||
},
|
||
tags: ['金融安全', '高可用', '合规认证', '实时交易']
|
||
},
|
||
{
|
||
id: '4',
|
||
name: '在线教育平台优化',
|
||
company: '知名教育机构',
|
||
industry: '教育培训',
|
||
image: '/hero-graphic.png',
|
||
description: '为在线教育平台提供视频流媒体加速，确保全球学生能够流畅观看课程内容。',
|
||
challenge: '教育平台需要为全球学生提供高质量的视频流媒体服务，支持大规模并发访问，确保学习体验不受网络影响。',
|
||
solution: '部署视频CDN网络，优化视频编码和传输，实施智能缓存策略，提供多码率自适应服务。',
|
||
results: [
|
||
{ metric: '视频加载时间', value: '1.2秒', improvement: '提升 75%' },
|
||
{ metric: '缓冲时间', value: '0.5秒', improvement: '降低 80%' },
|
||
{ metric: '学生满意度', value: '96%', improvement: '提升 22%' },
|
||
{ metric: '并发支持', value: '10万+', improvement: '提升 300%' }
|
||
],
|
||
testimonial: {
|
||
quote: 'Pinnovate Cloud 的视频加速服务让我们的在线课程在全球范围内都能流畅播放，学生的学习体验得到了显著改善。',
|
||
author: '陈教授',
|
||
position: '技术负责人'
|
||
},
|
||
tags: ['视频加速', '流媒体', '教育', '大规模并发']
|
||
}
|
||
];
|
||
|
||
return (
|
||
<section className="px-6 py-16 bg-gray-50">
|
||
<div className="max-w-screen-xl mx-auto">
|
||
<div className="text-center mb-12">
|
||
<h2 className="text-3xl font-bold text-primary mb-4">成功案例详情</h2>
|
||
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
||
深入了解我们如何帮助不同行业的客户实现业务目标，提升用户体验和运营效率。
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||
{cases.map((caseItem, index) => (
|
||
<div
|
||
key={caseItem.id}
|
||
className="group bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden border border-gray-100"
|
||
>
|
||
{/* 案例头部 */}
|
||
<div className="relative">
|
||
<div className="h-48 bg-gradient-to-br from-accent/10 to-blue-100 flex items-center justify-center">
|
||
<div className="text-center">
|
||
<div className="w-16 h-16 bg-accent rounded-full flex items-center justify-center mx-auto mb-3">
|
||
<TrendingUp className="w-8 h-8 text-white" />
|
||
</div>
|
||
<h3 className="text-lg font-semibold text-primary">{caseItem.company}</h3>
|
||
<p className="text-sm text-gray-600">{caseItem.industry}</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 行业标签 */}
|
||
<div className="absolute top-4 left-4">
|
||
<span className="bg-accent text-white text-xs font-semibold px-3 py-1 rounded-full">
|
||
{caseItem.industry}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 案例内容 */}
|
||
<div className="p-6">
|
||
<h4 className="text-xl font-bold text-primary mb-3 group-hover:text-accent transition-colors">
|
||
{caseItem.name}
|
||
</h4>
|
||
|
||
<p className="text-gray-600 mb-4 leading-relaxed">
|
||
{caseItem.description}
|
||
</p>
|
||
|
||
{/* 关键指标 */}
|
||
<div className="grid grid-cols-2 gap-4 mb-6">
|
||
{caseItem.results.slice(0, 2).map((result, idx) => (
|
||
<div key={idx} className="bg-gray-50 rounded-lg p-3 text-center">
|
||
<div className="text-lg font-bold text-accent">{result.value}</div>
|
||
<div className="text-xs text-gray-600 mb-1">{result.metric}</div>
|
||
<div className="text-xs text-green-600 font-medium">{result.improvement}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* 标签 */}
|
||
<div className="flex flex-wrap gap-2 mb-4">
|
||
{caseItem.tags.slice(0, 3).map((tag, idx) => (
|
||
<span key={idx} className="px-2 py-1 text-xs bg-gray-100 text-gray-600 rounded-full">
|
||
{tag}
|
||
</span>
|
||
))}
|
||
</div>
|
||
|
||
{/* 客户证言 */}
|
||
<div className="bg-blue-50 rounded-lg p-4 mb-4">
|
||
<div className="flex items-start gap-3">
|
||
<div className="w-8 h-8 bg-accent rounded-full flex items-center justify-center flex-shrink-0">
|
||
<Star className="w-4 h-4 text-white" />
|
||
</div>
|
||
<div>
|
||
<p className="text-sm text-gray-700 italic mb-2 line-clamp-2">
|
||
"{caseItem.testimonial.quote}"
|
||
</p>
|
||
<div className="text-xs text-gray-600">
|
||
<div className="font-semibold">{caseItem.testimonial.author}</div>
|
||
<div>{caseItem.testimonial.position}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 查看详情按钮 */}
|
||
<button
|
||
onClick={() => setSelectedCase(selectedCase === caseItem.id ? null : caseItem.id)}
|
||
className="w-full flex items-center justify-center gap-2 py-3 px-4 bg-accent text-white rounded-xl hover:bg-blue-700 transition-colors font-medium"
|
||
>
|
||
{selectedCase === caseItem.id ? '收起详情' : '查看详情'}
|
||
<ArrowRight className={`w-4 h-4 transition-transform ${selectedCase === caseItem.id ? 'rotate-90' : ''}`} />
|
||
</button>
|
||
</div>
|
||
|
||
{/* 展开的详细信息 */}
|
||
{selectedCase === caseItem.id && (
|
||
<div className="px-6 pb-6 border-t border-gray-100">
|
||
<div className="pt-6 space-y-6">
|
||
{/* 挑战与解决方案 */}
|
||
<div>
|
||
<h5 className="font-semibold text-primary mb-2">面临的挑战</h5>
|
||
<p className="text-sm text-gray-600 leading-relaxed">{caseItem.challenge}</p>
|
||
</div>
|
||
|
||
<div>
|
||
<h5 className="font-semibold text-primary mb-2">我们的解决方案</h5>
|
||
<p className="text-sm text-gray-600 leading-relaxed">{caseItem.solution}</p>
|
||
</div>
|
||
|
||
{/* 完整结果 */}
|
||
<div>
|
||
<h5 className="font-semibold text-primary mb-3">取得的成果</h5>
|
||
<div className="grid grid-cols-2 gap-3">
|
||
{caseItem.results.map((result, idx) => (
|
||
<div key={idx} className="bg-gray-50 rounded-lg p-3 text-center">
|
||
<div className="text-lg font-bold text-accent">{result.value}</div>
|
||
<div className="text-xs text-gray-600 mb-1">{result.metric}</div>
|
||
<div className="text-xs text-green-600 font-medium">{result.improvement}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* 联系我们 */}
|
||
<div className="mt-16 text-center">
|
||
<div className="bg-gradient-to-r from-accent to-blue-600 rounded-2xl p-8 text-white">
|
||
<h3 className="text-2xl font-bold mb-4">想要了解您的行业案例？</h3>
|
||
<p className="text-blue-100 mb-6 max-w-2xl mx-auto">
|
||
我们为各行各业提供定制化的云加速解决方案。联系我们的专家团队，了解如何为您的业务量身定制最佳方案。
|
||
</p>
|
||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||
<a
|
||
href="/contact"
|
||
className="px-8 py-3 bg-white text-accent rounded-xl font-semibold hover:bg-gray-100 transition-colors"
|
||
>
|
||
立即咨询
|
||
</a>
|
||
<a
|
||
href="/pricing"
|
||
className="px-8 py-3 border-2 border-white text-white rounded-xl font-semibold hover:bg-white hover:text-accent transition-colors"
|
||
>
|
||
查看定价
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
} |