262 lines
16 KiB
HTML
262 lines
16 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>AWS云服务专家 - 客户案例</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
|
||
<link rel="stylesheet" href="src/css/styles.css">
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap');
|
||
body {
|
||
font-family: 'Roboto', sans-serif;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-white">
|
||
<!-- 导航栏 -->
|
||
<nav class="bg-[#232F3E] shadow-md fixed w-full z-50">
|
||
<div class="container mx-auto px-4 py-4">
|
||
<div class="flex items-center justify-between">
|
||
<a href="index.html" class="flex items-center text-white">
|
||
<i class="fas fa-cloud text-2xl mr-2"></i>
|
||
<span class="text-xl font-bold">云服务专家</span>
|
||
</a>
|
||
<!-- 移动端菜单按钮 -->
|
||
<button class="md:hidden text-white mobile-menu-button" aria-label="打开菜单">
|
||
<i class="fas fa-bars text-2xl"></i>
|
||
</button>
|
||
<!-- 桌面端导航 -->
|
||
<div class="hidden md:flex space-x-6">
|
||
<a href="index.html" class="text-white/85 hover:text-gray-300">首页</a>
|
||
<a href="products.html" class="text-white/85 hover:text-gray-300">AWS产品</a>
|
||
<a href="solutions.html" class="text-white/85 hover:text-gray-300">解决方案</a>
|
||
<a href="cases.html" class="text-white hover:text-gray-300">客户案例</a>
|
||
<a href="about.html" class="text-white/85 hover:text-gray-300">关于我们</a>
|
||
<a href="contact.html" class="text-white/85 hover:text-gray-300">联系我们</a>
|
||
</div>
|
||
</div>
|
||
<!-- 移动端菜单 -->
|
||
<div class="md:hidden hidden mobile-menu">
|
||
<div class="flex flex-col space-y-4 mt-4">
|
||
<a href="index.html" class="text-white hover:text-gray-300">首页</a>
|
||
<a href="products.html" class="text-white/85 hover:text-gray-300">AWS产品</a>
|
||
<a href="solutions.html" class="text-white/85 hover:text-gray-300">解决方案</a>
|
||
<a href="cases.html" class="text-white hover:text-gray-300">客户案例</a>
|
||
<a href="about.html" class="text-white/85 hover:text-gray-300">关于我们</a>
|
||
<a href="contact.html" class="text-white/85 hover:text-gray-300">联系我们</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 页面标题 -->
|
||
<section class="relative bg-gradient-to-b from-[#232F3E]/80 to-[#232F3E]/90 text-white py-24 md:py-32">
|
||
<div class="container mx-auto px-4 text-center">
|
||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">成功案例</h1>
|
||
<p class="text-xl md:text-2xl text-white/90 mb-8 leading-relaxed">了解我们的客户如何通过AWS云服务实现业务增长</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 案例筛选 -->
|
||
<section class="section">
|
||
<div class="container">
|
||
<div class="max-w-4xl mx-auto text-center mb-16">
|
||
<h2 class="text-4xl font-bold text-[#333333] mb-4">精选案例</h2>
|
||
<p class="text-xl text-gray-600 leading-relaxed">探索不同行业的成功实践</p>
|
||
</div>
|
||
|
||
<div class="flex flex-wrap justify-center gap-4 mb-16">
|
||
<button class="px-6 py-3 rounded-full bg-[#FF9900] text-white hover:bg-[#FF9900]/90 transition-colors duration-300">全部</button>
|
||
<button class="px-6 py-3 rounded-full bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors duration-300">金融</button>
|
||
<button class="px-6 py-3 rounded-full bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors duration-300">电商</button>
|
||
<button class="px-6 py-3 rounded-full bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors duration-300">教育</button>
|
||
<button class="px-6 py-3 rounded-full bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors duration-300">医疗</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 案例展示 -->
|
||
<section class="section bg-gray-50">
|
||
<div class="container">
|
||
<div class="grid md:grid-cols-2 gap-12">
|
||
<!-- 案例1 -->
|
||
<div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
|
||
<div class="h-64 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 flex items-center justify-center">
|
||
<i class="fas fa-building text-6xl text-[#FF9900]"></i>
|
||
</div>
|
||
<div class="p-8">
|
||
<div class="flex items-center mb-4">
|
||
<span class="px-4 py-1 bg-[#FF9900]/10 text-[#FF9900] rounded-full text-sm">金融行业</span>
|
||
<span class="ml-4 text-gray-500">2023年12月</span>
|
||
</div>
|
||
<h3 class="text-2xl font-semibold mb-4">某大型银行数字化转型</h3>
|
||
<p class="text-gray-600 leading-relaxed mb-6">通过AWS云服务实现核心业务系统上云，提升系统性能和安全性，降低运维成本</p>
|
||
<div class="flex flex-wrap gap-2 mb-6">
|
||
<span class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">EC2</span>
|
||
<span class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">RDS</span>
|
||
<span class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">S3</span>
|
||
</div>
|
||
<a href="#" class="inline-flex items-center text-[#FF9900] hover:text-[#FF9900]/90">
|
||
查看详情
|
||
<i class="fas fa-arrow-right ml-2"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 案例2 -->
|
||
<div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
|
||
<div class="h-64 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 flex items-center justify-center">
|
||
<i class="fas fa-shopping-cart text-6xl text-[#FF9900]"></i>
|
||
</div>
|
||
<div class="p-8">
|
||
<div class="flex items-center mb-4">
|
||
<span class="px-4 py-1 bg-[#FF9900]/10 text-[#FF9900] rounded-full text-sm">电商行业</span>
|
||
<span class="ml-4 text-gray-500">2023年10月</span>
|
||
</div>
|
||
<h3 class="text-2xl font-semibold mb-4">某知名电商平台架构优化</h3>
|
||
<p class="text-gray-600 leading-relaxed mb-6">利用AWS云服务实现弹性扩展，应对大促期间流量高峰，提升用户体验</p>
|
||
<div class="flex flex-wrap gap-2 mb-6">
|
||
<span class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">ECS</span>
|
||
<span class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">DynamoDB</span>
|
||
<span class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">CloudFront</span>
|
||
</div>
|
||
<a href="#" class="inline-flex items-center text-[#FF9900] hover:text-[#FF9900]/90">
|
||
查看详情
|
||
<i class="fas fa-arrow-right ml-2"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 案例3 -->
|
||
<div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
|
||
<div class="h-64 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 flex items-center justify-center">
|
||
<i class="fas fa-graduation-cap text-6xl text-[#FF9900]"></i>
|
||
</div>
|
||
<div class="p-8">
|
||
<div class="flex items-center mb-4">
|
||
<span class="px-4 py-1 bg-[#FF9900]/10 text-[#FF9900] rounded-full text-sm">教育行业</span>
|
||
<span class="ml-4 text-gray-500">2023年8月</span>
|
||
</div>
|
||
<h3 class="text-2xl font-semibold mb-4">某高校在线教育平台建设</h3>
|
||
<p class="text-gray-600 leading-relaxed mb-6">基于AWS云服务构建在线教育平台，支持大规模在线课程和直播教学</p>
|
||
<div class="flex flex-wrap gap-2 mb-6">
|
||
<span class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">Lambda</span>
|
||
<span class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">S3</span>
|
||
<span class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">CloudFront</span>
|
||
</div>
|
||
<a href="#" class="inline-flex items-center text-[#FF9900] hover:text-[#FF9900]/90">
|
||
查看详情
|
||
<i class="fas fa-arrow-right ml-2"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 案例4 -->
|
||
<div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
|
||
<div class="h-64 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 flex items-center justify-center">
|
||
<i class="fas fa-hospital text-6xl text-[#FF9900]"></i>
|
||
</div>
|
||
<div class="p-8">
|
||
<div class="flex items-center mb-4">
|
||
<span class="px-4 py-1 bg-[#FF9900]/10 text-[#FF9900] rounded-full text-sm">医疗行业</span>
|
||
<span class="ml-4 text-gray-500">2023年6月</span>
|
||
</div>
|
||
<h3 class="text-2xl font-semibold mb-4">某三甲医院医疗云平台</h3>
|
||
<p class="text-gray-600 leading-relaxed mb-6">利用AWS云服务构建医疗云平台，实现医疗数据安全存储和共享</p>
|
||
<div class="flex flex-wrap gap-2 mb-6">
|
||
<span class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">RDS</span>
|
||
<span class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">S3</span>
|
||
<span class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">KMS</span>
|
||
</div>
|
||
<a href="#" class="inline-flex items-center text-[#FF9900] hover:text-[#FF9900]/90">
|
||
查看详情
|
||
<i class="fas fa-arrow-right ml-2"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 联系我们 -->
|
||
<section class="section bg-[#232F3E] text-white">
|
||
<div class="container text-center">
|
||
<h2 class="text-4xl font-bold mb-6">想了解更多成功案例?</h2>
|
||
<p class="text-xl mb-8 max-w-2xl mx-auto">联系我们的解决方案专家，获取更多行业案例和定制化方案</p>
|
||
<a href="contact.html" class="inline-block bg-white text-black px-8 py-4 rounded hover:bg-gray-100 transition-colors duration-300">
|
||
免费咨询
|
||
<i class="fas fa-headset ml-2"></i>
|
||
</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 页脚 -->
|
||
<footer class="bg-[#232F3E] text-white py-12">
|
||
<div class="container">
|
||
<div class="grid md:grid-cols-4 gap-8">
|
||
<div>
|
||
<h5 class="text-lg font-semibold mb-4">云服务专家</h5>
|
||
<p class="text-white/50 mb-4">专业的AWS云服务解决方案提供商，致力于帮助企业实现数字化转型</p>
|
||
<div class="flex space-x-4">
|
||
<a href="#" class="text-white/50 hover:text-white"><i class="fab fa-weixin"></i></a>
|
||
<a href="#" class="text-white/50 hover:text-white"><i class="fab fa-weibo"></i></a>
|
||
<a href="#" class="text-white/50 hover:text-white"><i class="fab fa-linkedin"></i></a>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h5 class="text-lg font-semibold mb-4">AWS产品</h5>
|
||
<ul class="space-y-2">
|
||
<li><a href="products.html" class="text-white/70 hover:text-white">EC2 云服务器</a></li>
|
||
<li><a href="products.html" class="text-white/70 hover:text-white">S3 对象存储</a></li>
|
||
<li><a href="products.html" class="text-white/70 hover:text-white">RDS 数据库服务</a></li>
|
||
<li><a href="products.html" class="text-white/70 hover:text-white">Lambda 无服务器</a></li>
|
||
<li><a href="products.html" class="text-white/70 hover:text-white">更多产品...</a></li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h5 class="text-lg font-semibold mb-4">解决方案</h5>
|
||
<ul class="space-y-2">
|
||
<li><a href="solutions.html" class="text-white/70 hover:text-white">网站托管</a></li>
|
||
<li><a href="solutions.html" class="text-white/70 hover:text-white">企业上云</a></li>
|
||
<li><a href="solutions.html" class="text-white/70 hover:text-white">灾备方案</a></li>
|
||
<li><a href="solutions.html" class="text-white/70 hover:text-white">大数据分析</a></li>
|
||
<li><a href="solutions.html" class="text-white/70 hover:text-white">微服务架构</a></li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h5 class="text-lg font-semibold mb-4">联系我们</h5>
|
||
<ul class="space-y-2">
|
||
<li class="flex items-center">
|
||
<i class="fas fa-map-marker-alt mr-2 text-white/50"></i>
|
||
<span class="text-white/50">北京市朝阳区某某大厦</span>
|
||
</li>
|
||
<li class="flex items-center">
|
||
<i class="fas fa-phone mr-2 text-white/50"></i>
|
||
<span class="text-white/50">400-123-4567</span>
|
||
</li>
|
||
<li class="flex items-center">
|
||
<i class="fas fa-envelope mr-2 text-white/50"></i>
|
||
<span class="text-white/50">contact@example.com</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="border-t border-white/25 mt-12 pt-8">
|
||
<div class="flex flex-col md:flex-row justify-between items-center">
|
||
<p class="text-white/50">© 2023 云服务专家. 保留所有权利</p>
|
||
<div class="flex space-x-6 mt-4 md:mt-0">
|
||
<a href="#" class="text-white/50 hover:text-white">隐私政策</a>
|
||
<a href="#" class="text-white/50 hover:text-white">服务条款</a>
|
||
<a href="#" class="text-white/50 hover:text-white">网站地图</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="src/js/main.js"></script>
|
||
</body>
|
||
</html> |