91 lines
4.2 KiB
TypeScript
91 lines
4.2 KiB
TypeScript
import Navbar from '../components/Navbar';
|
||
import CaseList from '../components/CaseList';
|
||
import Footer from '../components/Footer';
|
||
import { Users, Award, TrendingUp, Globe } from 'lucide-react';
|
||
|
||
export default function CasesPage() {
|
||
return (
|
||
<div className="pt-16 bg-background">
|
||
<Navbar />
|
||
<main>
|
||
{/* 页面标题部分 */}
|
||
<section className="px-6 py-16 bg-gradient-to-br from-purple-50 to-blue-100">
|
||
<div className="max-w-screen-xl mx-auto text-center">
|
||
<h1 className="text-4xl md:text-5xl font-bold text-primary mb-6">
|
||
客户成功案例
|
||
</h1>
|
||
<p className="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed mb-8">
|
||
看看我们如何帮助全球企业提升网络性能，实现业务增长。
|
||
从初创公司到大型企业，我们为各种规模的客户提供定制化解决方案。
|
||
</p>
|
||
|
||
{/* 成功统计 */}
|
||
<div className="grid grid-cols-1 md:grid-cols-4 gap-6 max-w-4xl mx-auto">
|
||
<div className="bg-white/80 backdrop-blur-sm rounded-lg p-4 shadow-sm">
|
||
<div className="flex items-center justify-center mb-2">
|
||
<Users className="w-6 h-6 text-accent mr-2" />
|
||
<span className="text-2xl font-bold text-primary">500+</span>
|
||
</div>
|
||
<p className="text-sm text-gray-600">服务客户</p>
|
||
</div>
|
||
|
||
<div className="bg-white/80 backdrop-blur-sm rounded-lg p-4 shadow-sm">
|
||
<div className="flex items-center justify-center mb-2">
|
||
<Award className="w-6 h-6 text-green-500 mr-2" />
|
||
<span className="text-2xl font-bold text-primary">99.9%</span>
|
||
</div>
|
||
<p className="text-sm text-gray-600">客户满意度</p>
|
||
</div>
|
||
|
||
<div className="bg-white/80 backdrop-blur-sm rounded-lg p-4 shadow-sm">
|
||
<div className="flex items-center justify-center mb-2">
|
||
<TrendingUp className="w-6 h-6 text-purple-500 mr-2" />
|
||
<span className="text-2xl font-bold text-primary">50%</span>
|
||
</div>
|
||
<p className="text-sm text-gray-600">平均性能提升</p>
|
||
</div>
|
||
|
||
<div className="bg-white/80 backdrop-blur-sm rounded-lg p-4 shadow-sm">
|
||
<div className="flex items-center justify-center mb-2">
|
||
<Globe className="w-6 h-6 text-orange-500 mr-2" />
|
||
<span className="text-2xl font-bold text-primary">50+</span>
|
||
</div>
|
||
<p className="text-sm text-gray-600">覆盖国家</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* 行业覆盖 */}
|
||
<section className="px-6 py-12 bg-white">
|
||
<div className="max-w-screen-xl mx-auto">
|
||
<h2 className="text-2xl font-bold text-primary mb-8 text-center">服务行业</h2>
|
||
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6">
|
||
{[
|
||
{ name: '电商零售', icon: '🛒' },
|
||
{ name: '在线游戏', icon: '🎮' },
|
||
{ name: '金融服务', icon: '💳' },
|
||
{ name: '教育培训', icon: '🎓' },
|
||
{ name: '医疗健康', icon: '🏥' },
|
||
{ name: '媒体娱乐', icon: '🎬' }
|
||
].map((industry, index) => (
|
||
<div key={index} className="text-center group">
|
||
<div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-3 group-hover:bg-accent group-hover:text-white transition-colors">
|
||
<span className="text-2xl">{industry.icon}</span>
|
||
</div>
|
||
<p className="text-sm font-medium text-gray-700 group-hover:text-accent transition-colors">
|
||
{industry.name}
|
||
</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* 客户案例列表 */}
|
||
<CaseList />
|
||
</main>
|
||
<Footer />
|
||
</div>
|
||
);
|
||
} |