nike/website-init
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
nike_zhiyun 2025-04-22 15:41:11 +08:00
parent 34b1dda423
commit f793e1a9e6
8 changed files with 2325 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

283
about.html Normal file
View File

@ -0,0 +1,283 @@
<!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/85 hover:text-gray-300">客户案例</a>
<a href="about.html" class="text-white 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/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/85 hover:text-gray-300">客户案例</a>
<a href="about.html" class="text-white 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="grid md:grid-cols-2 gap-12 items-center">
<div>
<h2 class="text-4xl font-bold text-[#333333] mb-8 mt-24">公司简介</h2>
<p class="text-gray-600 mb-4 text-lg leading-relaxed">云服务专家成立于2018年，是AWS授权的云服务解决方案提供商。我们致力于为企业提供专业的云计算咨询、迁移、运维和优化服务。</p>
<p class="text-gray-600 mb-8 text-lg leading-relaxed">作为AWS高级合作伙伴，我们拥有丰富的云服务实施经验和专业的技术团队，已成功帮助数百家企业完成云上转型。</p>
<ul class="space-y-4">
<li class="flex items-center text-lg">
<i class="fas fa-check-circle text-green-500 mr-3"></i>
<span class="text-gray-700">AWS高级合作伙伴认证</span>
</li>
<li class="flex items-center text-lg">
<i class="fas fa-check-circle text-green-500 mr-3"></i>
<span class="text-gray-700">100+成功案例</span>
</li>
<li class="flex items-center text-lg">
<i class="fas fa-check-circle text-green-500 mr-3"></i>
<span class="text-gray-700">50+AWS认证工程师</span>
</li>
</ul>
</div>
<div class="bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 h-80 rounded-lg flex items-center justify-center">
<i class="fas fa-building text-8xl text-[#FF9900]"></i>
</div>
</div>
</div>
</section>
<!-- 我们的优势 -->
<section class="section bg-gray-50">
<div class="container">
<div class="max-w-4xl mx-auto text-center mb-16">
<h2 class="text-4xl font-bold text-[#333333] mb-4 mt-24">我们的优势</h2>
<p class="text-xl text-gray-600 leading-relaxed">专业技术团队，丰富项目经验</p>
</div>
<div class="grid md:grid-cols-4 gap-8">
<div class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 text-center">
<div class="w-20 h-20 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 rounded-full flex items-center justify-center mx-auto mb-6">
<i class="fas fa-award text-[#FF9900] text-3xl"></i>
</div>
<h3 class="text-xl font-semibold mb-4">专业认证</h3>
<p class="text-gray-600 leading-relaxed">AWS官方认证的高级合作伙伴，拥有多项专业认证</p>
</div>
<div class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 text-center">
<div class="w-20 h-20 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 rounded-full flex items-center justify-center mx-auto mb-6">
<i class="fas fa-users text-[#FF9900] text-3xl"></i>
</div>
<h3 class="text-xl font-semibold mb-4">专业团队</h3>
<p class="text-gray-600 leading-relaxed">50+位AWS认证工程师，平均5年以上云服务经验</p>
</div>
<div class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 text-center">
<div class="w-20 h-20 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 rounded-full flex items-center justify-center mx-auto mb-6">
<i class="fas fa-tools text-[#FF9900] text-3xl"></i>
</div>
<h3 class="text-xl font-semibold mb-4">技术实力</h3>
<p class="text-gray-600 leading-relaxed">掌握AWS全线产品，具备丰富的实施和运维经验</p>
</div>
<div class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 text-center">
<div class="w-20 h-20 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 rounded-full flex items-center justify-center mx-auto mb-6">
<i class="fas fa-headset text-[#FF9900] text-3xl"></i>
</div>
<h3 class="text-xl font-semibold mb-4">服务保障</h3>
<p class="text-gray-600 leading-relaxed">7x24小时技术支持，确保客户业务稳定运行</p>
</div>
</div>
</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 mt-24">企业文化</h2>
<p class="text-xl text-gray-600 leading-relaxed">以客户为中心，追求卓越服务</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
<div class="w-20 h-20 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 rounded-full flex items-center justify-center mx-auto mb-6">
<i class="fas fa-bullseye text-[#FF9900] text-3xl"></i>
</div>
<h3 class="text-xl font-semibold mb-4 text-center">企业使命</h3>
<p class="text-gray-600 leading-relaxed text-center">助力企业数字化转型，提供专业可靠的云计算服务</p>
</div>
<div class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
<div class="w-20 h-20 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 rounded-full flex items-center justify-center mx-auto mb-6">
<i class="fas fa-eye text-[#FF9900] text-3xl"></i>
</div>
<h3 class="text-xl font-semibold mb-4 text-center">企业愿景</h3>
<p class="text-gray-600 leading-relaxed text-center">成为中国最值得信赖的云服务解决方案提供商</p>
</div>
<div class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
<div class="w-20 h-20 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 rounded-full flex items-center justify-center mx-auto mb-6">
<i class="fas fa-heart text-[#FF9900] text-3xl"></i>
</div>
<h3 class="text-xl font-semibold mb-4 text-center">核心价值观</h3>
<p class="text-gray-600 leading-relaxed text-center">专业、创新、诚信、共赢</p>
</div>
</div>
</div>
</section>
<!-- 发展历程 -->
<section class="section bg-gray-50">
<div class="container">
<div class="max-w-4xl mx-auto text-center mb-16">
<h2 class="text-4xl font-bold text-[#333333] mb-4 mt-24">发展历程</h2>
<p class="text-xl text-gray-600 leading-relaxed">见证我们的成长与进步</p>
</div>
<div class="space-y-8">
<div class="flex flex-col md:flex-row items-center gap-8">
<div class="w-full md:w-1/4 text-right">
<h3 class="text-2xl font-semibold text-[#FF9900]">2023年</h3>
</div>
<div class="w-px h-16 bg-[#FF9900] hidden md:block"></div>
<div class="w-full md:w-3/4">
<p class="text-gray-600 text-lg leading-relaxed">成为AWS高级合作伙伴，服务客户数量突破500家</p>
</div>
</div>
<div class="flex flex-col md:flex-row items-center gap-8">
<div class="w-full md:w-1/4 text-right">
<h3 class="text-2xl font-semibold text-[#FF9900]">2021年</h3>
</div>
<div class="w-px h-16 bg-[#FF9900] hidden md:block"></div>
<div class="w-full md:w-3/4">
<p class="text-gray-600 text-lg leading-relaxed">获得AWS标准合作伙伴认证，团队规模扩大到50人</p>
</div>
</div>
<div class="flex flex-col md:flex-row items-center gap-8">
<div class="w-full md:w-1/4 text-right">
<h3 class="text-2xl font-semibold text-[#FF9900]">2018年</h3>
</div>
<div class="w-px h-16 bg-[#FF9900] hidden md:block"></div>
<div class="w-full md:w-3/4">
<p class="text-gray-600 text-lg leading-relaxed">公司成立，开始提供AWS云服务解决方案</p>
</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 leading-relaxed">欢迎联系我们，了解更多公司信息和服务详情</p>
<a href="contact.html" class="inline-flex items-center bg-white text-black px-8 py-4 rounded-lg hover:bg-gray-100 transition-colors duration-300 text-lg font-semibold">
联系我们
<i class="fas fa-arrow-right 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>

262
cases.html Normal file
View File

@ -0,0 +1,262 @@
<!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>

361
contact.html Normal file
View File

@ -0,0 +1,361 @@
<!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>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=YOUR_AMAP_KEY"></script>
</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/85 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 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/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/85 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 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">随时欢迎您的咨询，我们将为您提供专业的云服务解决方案</p>
</div>
</section>
<!-- 联系方式 -->
<section class="section">
<div class="container">
<div class="grid md:grid-cols-3 gap-8 mb-16">
<div class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
<div class="w-20 h-20 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 rounded-full flex items-center justify-center mx-auto mb-6">
<i class="fas fa-phone text-[#FF9900] text-3xl"></i>
</div>
<h3 class="text-2xl font-semibold mb-4 text-center">电话咨询</h3>
<p class="text-gray-600 mb-2 text-center">周一至周日 9:00-21:00</p>
<p class="text-2xl font-semibold text-[#FF9900] text-center">400-123-4567</p>
</div>
<div class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
<div class="w-20 h-20 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 rounded-full flex items-center justify-center mx-auto mb-6">
<i class="fas fa-envelope text-[#FF9900] text-3xl"></i>
</div>
<h3 class="text-2xl font-semibold mb-4 text-center">邮件咨询</h3>
<p class="text-gray-600 mb-2 text-center">7*24小时邮件支持</p>
<p class="text-2xl font-semibold text-[#FF9900] text-center">contact@example.com</p>
</div>
<div class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
<div class="w-20 h-20 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 rounded-full flex items-center justify-center mx-auto mb-6">
<i class="fab fa-weixin text-[#FF9900] text-3xl"></i>
</div>
<h3 class="text-2xl font-semibold mb-4 text-center">微信咨询</h3>
<p class="text-gray-600 mb-4 text-center">扫描下方二维码</p>
<div class="w-32 h-32 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 rounded-lg mx-auto flex items-center justify-center">
<i class="fas fa-qrcode text-6xl text-[#FF9900]"></i>
</div>
</div>
</div>
<div class="grid md:grid-cols-2 gap-12">
<!-- 联系表单 -->
<div class="bg-white p-8 rounded-lg shadow-lg">
<h2 class="text-3xl font-bold mb-8 text-center">在线咨询</h2>
<form action="#" method="POST" class="space-y-6">
<div class="grid md:grid-cols-2 gap-6">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2" for="name">
姓名 <span class="text-red-500">*</span>
</label>
<input type="text" id="name" name="name" required
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#FF9900] focus:border-transparent transition-colors duration-300">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2" for="company">
公司名称 <span class="text-red-500">*</span>
</label>
<input type="text" id="company" name="company" required
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#FF9900] focus:border-transparent transition-colors duration-300">
</div>
</div>
<div class="grid md:grid-cols-2 gap-6">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2" for="email">
邮箱 <span class="text-red-500">*</span>
</label>
<input type="email" id="email" name="email" required
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#FF9900] focus:border-transparent transition-colors duration-300">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2" for="phone">
电话 <span class="text-red-500">*</span>
</label>
<input type="tel" id="phone" name="phone" required
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#FF9900] focus:border-transparent transition-colors duration-300">
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2" for="service">
咨询服务 <span class="text-red-500">*</span>
</label>
<select id="service" name="service" required
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#FF9900] focus:border-transparent transition-colors duration-300">
<option value="">请选择咨询服务</option>
<option value="cloud">云服务咨询</option>
<option value="migration">上云迁移</option>
<option value="solution">解决方案咨询</option>
<option value="price">价格咨询</option>
<option value="other">其他</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2" for="message">
咨询内容 <span class="text-red-500">*</span>
</label>
<textarea id="message" name="message" rows="4" required
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#FF9900] focus:border-transparent transition-colors duration-300"></textarea>
</div>
<button type="submit"
class="w-full bg-[#FF9900] text-white py-4 px-6 rounded-lg hover:bg-[#FF9900]/90 transition-colors duration-300 text-lg font-semibold">
提交咨询
</button>
</form>
</div>
<!-- 公司地址 -->
<div>
<div class="bg-white p-8 rounded-lg shadow-lg mb-8">
<h2 class="text-3xl font-bold mb-8 text-center">公司地址</h2>
<div class="space-y-6">
<div class="flex items-start">
<div class="w-12 h-12 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 rounded-full flex items-center justify-center mr-4">
<i class="fas fa-map-marker-alt text-[#FF9900] text-xl"></i>
</div>
<div>
<h4 class="text-xl font-semibold mb-2">北京总部</h4>
<p class="text-gray-600">北京市朝阳区某某大厦10层</p>
</div>
</div>
<div class="flex items-start">
<div class="w-12 h-12 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 rounded-full flex items-center justify-center mr-4">
<i class="fas fa-subway text-[#FF9900] text-xl"></i>
</div>
<div>
<h4 class="text-xl font-semibold mb-2">交通方式</h4>
<p class="text-gray-600">地铁6号线某某站A出口步行5分钟</p>
</div>
</div>
<div class="flex items-start">
<div class="w-12 h-12 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 rounded-full flex items-center justify-center mr-4">
<i class="far fa-clock text-[#FF9900] text-xl"></i>
</div>
<div>
<h4 class="text-xl font-semibold mb-2">办公时间</h4>
<p class="text-gray-600">周一至周五: 9:00-18:00</p>
</div>
</div>
</div>
</div>
<!-- 地图 -->
<div id="map-container" class="w-full h-96 rounded-lg shadow-lg overflow-hidden"></div>
</div>
</div>
</div>
</section>
<!-- 常见问题 -->
<section class="section bg-gray-50">
<div class="container">
<h2 class="text-4xl font-bold text-center mb-6">常见问题</h2>
<p class="text-xl text-center text-gray-600 mb-12">解答您最关心的问题</p>
<div class="grid md:grid-cols-2 gap-8">
<div class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
<h3 class="text-2xl font-semibold mb-4">如何开始使用AWS云服务？</h3>
<p class="text-gray-600 leading-relaxed">您可以通过我们的咨询服务，获取专业的AWS云服务解决方案建议。我们的团队将根据您的具体需求，为您提供最适合的云服务方案。</p>
</div>
<div class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
<h3 class="text-2xl font-semibold mb-4">如何获取技术支持？</h3>
<p class="text-gray-600 leading-relaxed">我们提供7*24小时技术支持服务，您可以通过电话、邮件或在线咨询等方式联系我们的技术支持团队。</p>
</div>
<div class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
<h3 class="text-2xl font-semibold mb-4">如何计算使用成本？</h3>
<p class="text-gray-600 leading-relaxed">我们提供详细的成本评估服务，可以根据您的具体使用场景和需求，为您提供准确的成本预估和优化建议。</p>
</div>
<div class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
<h3 class="text-2xl font-semibold mb-4">如何申请试用服务？</h3>
<p class="text-gray-600 leading-relaxed">您可以通过在线咨询或直接联系我们的销售团队，申请AWS云服务的试用。我们将为您提供专业的试用方案和技术支持。</p>
</div>
</div>
</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>
<script>
window.onload = function() {
// 初始化地图
var map = new AMap.Map('map-container', {
zoom: 15,
center: [116.397428, 39.90923],
viewMode: '3D',
mapStyle: 'amap://styles/fresh',
pitch: 35
});
// 添加控件
map.addControl(new AMap.ToolBar({
position: 'RB'
}));
map.addControl(new AMap.Scale());
// 创建标记
var marker = new AMap.Marker({
position: [116.397428, 39.90923],
animation: 'AMAP_ANIMATION_BOUNCE',
title: '我们的办公室'
});
// 创建信息窗体
var infoWindow = new AMap.InfoWindow({
isCustom: true,
content: `
<div class="bg-white p-4 rounded-lg shadow-lg">
<h3 class="text-xl font-bold mb-2">AWS云服务专家</h3>
<p class="text-gray-600 mb-2">
<i class="fas fa-map-marker-alt mr-2"></i>
北京市朝阳区xxx街道xxx号
</p>
<p class="text-gray-600 mb-2">
<i class="fas fa-phone mr-2"></i>
010-xxxxxxxx
</p>
<p class="text-gray-600">
<i class="fas fa-envelope mr-2"></i>
contact@example.com
</p>
</div>
`,
offset: new AMap.Pixel(0, -30)
});
// 添加标记到地图
marker.setMap(map);
// 点击标记时打开信息窗体
marker.on('click', function() {
infoWindow.open(map, marker.getPosition());
});
// 添加鼠标悬停效果
marker.on('mouseover', function() {
marker.setAnimation('AMAP_ANIMATION_BOUNCE');
});
marker.on('mouseout', function() {
marker.setAnimation(null);
});
// 自适应缩放
map.setFitView();
}
</script>
</body>
</html>

356
index.html Normal file
View File

@ -0,0 +1,356 @@
<!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">
<div class="flex items-center justify-between h-16">
<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>
<!-- 桌面端导航 -->
<div class="hidden md:flex items-center space-x-8">
<a href="index.html" class="text-white hover:text-[#FF9900] transition-colors duration-300">首页</a>
<a href="products.html" class="text-white/85 hover:text-[#FF9900] transition-colors duration-300">AWS产品</a>
<a href="solutions.html" class="text-white/85 hover:text-[#FF9900] transition-colors duration-300">解决方案</a>
<a href="cases.html" class="text-white/85 hover:text-[#FF9900] transition-colors duration-300">客户案例</a>
<a href="about.html" class="text-white/85 hover:text-[#FF9900] transition-colors duration-300">关于我们</a>
<a href="contact.html" class="text-white/85 hover:text-[#FF9900] transition-colors duration-300">联系我们</a>
</div>
<!-- 移动端菜单按钮 -->
<button class="md:hidden text-white p-2 rounded-lg hover:bg-white/10 transition-colors duration-300 mobile-menu-button" aria-label="打开菜单">
<i class="fas fa-bars text-xl"></i>
</button>
</div>
<!-- 移动端菜单 -->
<div class="md:hidden hidden mobile-menu bg-[#232F3E] absolute top-16 left-0 right-0 shadow-lg">
<div class="container py-4">
<div class="flex flex-col space-y-4">
<a href="index.html" class="text-white hover:text-[#FF9900] transition-colors duration-300 py-2">首页</a>
<a href="products.html" class="text-white/85 hover:text-[#FF9900] transition-colors duration-300 py-2">AWS产品</a>
<a href="solutions.html" class="text-white/85 hover:text-[#FF9900] transition-colors duration-300 py-2">解决方案</a>
<a href="cases.html" class="text-white/85 hover:text-[#FF9900] transition-colors duration-300 py-2">客户案例</a>
<a href="about.html" class="text-white/85 hover:text-[#FF9900] transition-colors duration-300 py-2">关于我们</a>
<a href="contact.html" class="text-white/85 hover:text-[#FF9900] transition-colors duration-300 py-2">联系我们</a>
</div>
</div>
</div>
</div>
</nav>
<!-- 添加导航栏占位 -->
<div class="h-16"></div>
<!-- 英雄区域 -->
<section class="relative bg-gradient-to-b from-[#232F3E]/80 to-[#232F3E]/90 text-white py-24 md:py-32">
<div class="container">
<div class="max-w-3xl mx-auto text-center">
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">AWS云服务器专业代理商</h1>
<p class="text-xl md:text-2xl text-white/90 mb-8 leading-relaxed">为您的企业提供专业的AWS云服务解决方案，助力数字化转型</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<a href="#features" class="btn-primary inline-flex items-center justify-center px-8 py-3 text-lg">了解AWS优势</a>
<a href="#contact" class="btn-secondary inline-flex items-center justify-center px-8 py-3 text-lg">联系顾问</a>
</div>
</div>
</div>
</section>
<!-- 为什么选择AWS -->
<section id="features" class="bg-[#F8F9FA] py-20">
<div class="container">
<div class="max-w-4xl mx-auto text-center mb-16">
<h2 class="text-4xl md:text-[40px] font-bold text-[#333333] mb-6 leading-tight">AWS产品与服务</h2>
<p class="text-xl md:text-[20px] font-light text-[#333333] mb-4 leading-relaxed">全面的云计算产品线，满足您的各种业务需求</p>
<p class="text-base md:text-[16px] text-[#333333] leading-relaxed">作为AWS授权代理商，我们提供全系列AWS产品和服务，并为您提供专业的咨询<br>和支持，帮助您选择最适合的产品组合。</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
<div class="w-16 h-16 bg-[#FF9900]/10 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-shield-alt text-[#FF9900] text-2xl"></i>
</div>
<h3 class="text-xl font-semibold mb-4">安全可靠</h3>
<p class="text-gray-600 leading-relaxed">AWS提供业界领先的安全服务，包括加密、防火墙和身份验证，保障您的数据安全</p>
</div>
<div class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
<div class="w-16 h-16 bg-[#FF9900]/10 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-bolt text-[#FF9900] text-2xl"></i>
</div>
<h3 class="text-xl font-semibold mb-4">高性能</h3>
<p class="text-gray-600 leading-relaxed">全球数据中心网络，低延迟高带宽，确保您的应用程序高效运行</p>
</div>
<div class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
<div class="w-16 h-16 bg-[#FF9900]/10 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-dollar-sign text-[#FF9900] text-2xl"></i>
</div>
<h3 class="text-xl font-semibold mb-4">成本优化</h3>
<p class="text-gray-600 leading-relaxed">按需付费模式，无需前期投资，降低IT运营成本</p>
</div>
</div>
</div>
</section>
<!-- 服务优势 -->
<section class="py-20 bg-gray-50">
<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">作为AWS授权合作伙伴，我们提供全方位的专业服务</p>
</div>
<div class="grid md:grid-cols-2 gap-8">
<div class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
<div class="flex items-start">
<div class="w-12 h-12 bg-[#0D6EFD]/10 rounded-full flex items-center justify-center mr-4">
<i class="fas fa-check-circle text-[#0D6EFD] text-xl"></i>
</div>
<div>
<h3 class="text-xl font-semibold mb-3">官方授权</h3>
<p class="text-gray-600 leading-relaxed">我们是AWS官方授权的合作伙伴，可提供正规授权和发票</p>
</div>
</div>
</div>
<div class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
<div class="flex items-start">
<div class="w-12 h-12 bg-[#0D6EFD]/10 rounded-full flex items-center justify-center mr-4">
<i class="fas fa-percentage text-[#0D6EFD] text-xl"></i>
</div>
<div>
<h3 class="text-xl font-semibold mb-3">价格优势</h3>
<p class="text-gray-600 leading-relaxed">相比直接采购，我们能提供更具竞争力的价格和灵活的付款方式</p>
</div>
</div>
</div>
<div class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
<div class="flex items-start">
<div class="w-12 h-12 bg-[#0D6EFD]/10 rounded-full flex items-center justify-center mr-4">
<i class="fas fa-headset text-[#0D6EFD] text-xl"></i>
</div>
<div>
<h3 class="text-xl font-semibold mb-3">技术支持</h3>
<p class="text-gray-600 leading-relaxed">专业的技术团队提供咨询、部署和运维服务，解决您的技术难题</p>
</div>
</div>
</div>
<div class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
<div class="flex items-start">
<div class="w-12 h-12 bg-[#0D6EFD]/10 rounded-full flex items-center justify-center mr-4">
<i class="fas fa-graduation-cap text-[#0D6EFD] text-xl"></i>
</div>
<div>
<h3 class="text-xl font-semibold mb-3">培训服务</h3>
<p class="text-gray-600 leading-relaxed">为您的团队提供专业的AWS技术培训，提升技术能力</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 核心产品 -->
<section class="py-20">
<div class="container">
<div class="max-w-4xl mx-auto text-center mb-16">
<h2 class="text-4xl font-bold text-[#333333] mb-4">AWS核心产品服务</h2>
<p class="text-xl text-gray-600 leading-relaxed">全面的云服务产品线，满足各种业务需求</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<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-48 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 flex items-center justify-center">
<i class="fas fa-server text-6xl text-[#FF9900]"></i>
</div>
<div class="p-8">
<h3 class="text-2xl font-semibold mb-4">EC2 云服务器</h3>
<p class="text-gray-600 leading-relaxed mb-6">可扩展的计算能力，适用于各种工作负载，从小型网站到企业级应用</p>
<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 class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
<div class="h-48 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 flex items-center justify-center">
<i class="fas fa-database text-6xl text-[#FF9900]"></i>
</div>
<div class="p-8">
<h3 class="text-2xl font-semibold mb-4">S3 对象存储</h3>
<p class="text-gray-600 leading-relaxed mb-6">安全、可靠的对象存储服务，适用于备份、归档和数据湖等场景</p>
<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 class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
<div class="h-48 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 flex items-center justify-center">
<i class="fas fa-network-wired text-6xl text-[#FF9900]"></i>
</div>
<div class="p-8">
<h3 class="text-2xl font-semibold mb-4">RDS 关系型数据库</h3>
<p class="text-gray-600 leading-relaxed mb-6">易于部署和管理的关系型数据库服务，支持多种主流数据库引擎</p>
<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 class="text-center mt-12">
<a href="#" class="inline-flex items-center text-[#FF9900] hover:text-[#FF9900]/90 text-lg">
查看全部AWS产品
<i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
</section>
<!-- 客户案例 -->
<section class="py-16 bg-gray-50">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-medium text-center mb-4">成功客户案例</h2>
<p class="text-xl text-center text-gray-600 mb-12">看看其他企业如何利用AWS云服务提升业务价值</p>
<div class="grid md:grid-cols-2 gap-8">
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<div class="h-48 bg-gray-200"></div>
<div class="p-6">
<h3 class="text-2xl font-semibold mb-2">某金融科技公司</h3>
<p class="text-gray-600 mb-4">通过迁移到AWS云服务，该公司将应用响应时间缩短了40%，并节省了30%的IT运营成本</p>
<a href="#" class="inline-block text-[#FF9900] hover:text-[#FF9900]/90">阅读详情</a>
</div>
</div>
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<div class="h-48 bg-gray-200"></div>
<div class="p-6">
<h3 class="text-2xl font-semibold mb-2">某大型电商平台</h3>
<p class="text-gray-600 mb-4">利用AWS弹性伸缩功能，该平台在促销活动期间轻松应对流量激增，确保了平台稳定性</p>
<a href="#" class="inline-block text-[#FF9900] hover:text-[#FF9900]/90">阅读详情</a>
</div>
</div>
</div>
<div class="text-center mt-8">
<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>
</section>
<!-- 联系我们 -->
<section id="contact" class="section bg-[#232F3E] text-white">
<div class="container text-center">
<h2 class="heading-2 py-6 text-3xl">准备开启您的云计算之旅?</h2>
<p class="text-xl mb-8 max-w-2xl mx-auto">联系我们的顾问，获取专业的AWS云服务方案和优惠报价</p>
<a href="contact.html" class="inline-block bg-white text-black px-8 py-4 rounded hover:bg-gray-100">
免费咨询
<i class="fas fa-headset ml-2"></i>
</a>
</div>
</section>
<!-- 页脚 -->
<footer class="bg-[#232F3E] text-white py-16">
<div class="container">
<div class="grid md:grid-cols-4 gap-12">
<div>
<h5 class="text-xl font-semibold mb-6">云服务专家</h5>
<p class="text-white/70 mb-6 leading-relaxed">专业的AWS云服务解决方案提供商，致力于帮助企业实现数字化转型</p>
<div class="flex space-x-4">
<a href="#" class="w-10 h-10 bg-white/10 rounded-full flex items-center justify-center hover:bg-white/20 transition-colors duration-300">
<i class="fab fa-weixin text-lg"></i>
</a>
<a href="#" class="w-10 h-10 bg-white/10 rounded-full flex items-center justify-center hover:bg-white/20 transition-colors duration-300">
<i class="fab fa-weibo text-lg"></i>
</a>
<a href="#" class="w-10 h-10 bg-white/10 rounded-full flex items-center justify-center hover:bg-white/20 transition-colors duration-300">
<i class="fab fa-linkedin text-lg"></i>
</a>
</div>
</div>
<div>
<h5 class="text-xl font-semibold mb-6">AWS产品</h5>
<ul class="space-y-3">
<li><a href="products.html" class="text-white/70 hover:text-[#FF9900] transition-colors duration-300">EC2 云服务器</a></li>
<li><a href="products.html" class="text-white/70 hover:text-[#FF9900] transition-colors duration-300">S3 对象存储</a></li>
<li><a href="products.html" class="text-white/70 hover:text-[#FF9900] transition-colors duration-300">RDS 数据库服务</a></li>
<li><a href="products.html" class="text-white/70 hover:text-[#FF9900] transition-colors duration-300">Lambda 无服务器</a></li>
<li><a href="products.html" class="text-white/70 hover:text-[#FF9900] transition-colors duration-300">更多产品...</a></li>
</ul>
</div>
<div>
<h5 class="text-xl font-semibold mb-6">解决方案</h5>
<ul class="space-y-3">
<li><a href="solutions.html" class="text-white/70 hover:text-[#FF9900] transition-colors duration-300">网站托管</a></li>
<li><a href="solutions.html" class="text-white/70 hover:text-[#FF9900] transition-colors duration-300">企业上云</a></li>
<li><a href="solutions.html" class="text-white/70 hover:text-[#FF9900] transition-colors duration-300">灾备方案</a></li>
<li><a href="solutions.html" class="text-white/70 hover:text-[#FF9900] transition-colors duration-300">大数据分析</a></li>
<li><a href="solutions.html" class="text-white/70 hover:text-[#FF9900] transition-colors duration-300">微服务架构</a></li>
</ul>
</div>
<div>
<h5 class="text-xl font-semibold mb-6">联系我们</h5>
<ul class="space-y-4">
<li class="flex items-start">
<i class="fas fa-map-marker-alt mt-1 mr-4 text-[#FF9900]"></i>
<span class="text-white/70">北京市朝阳区某某大厦</span>
</li>
<li class="flex items-start">
<i class="fas fa-phone mt-1 mr-4 text-[#FF9900]"></i>
<span class="text-white/70">400-123-4567</span>
</li>
<li class="flex items-start">
<i class="fas fa-envelope mt-1 mr-4 text-[#FF9900]"></i>
<span class="text-white/70">contact@example.com</span>
</li>
</ul>
</div>
</div>
<div class="border-t border-white/10 mt-12 pt-8">
<div class="flex flex-col md:flex-row justify-between items-center">
<p class="text-white/50 mb-4 md:mb-0">© 2023 云服务专家. 保留所有权利</p>
<div class="flex space-x-6">
<a href="#" class="text-white/50 hover:text-[#FF9900] transition-colors duration-300">隐私政策</a>
<a href="#" class="text-white/50 hover:text-[#FF9900] transition-colors duration-300">服务条款</a>
<a href="#" class="text-white/50 hover:text-[#FF9900] transition-colors duration-300">网站地图</a>
</div>
</div>
</div>
</div>
</footer>
<script src="src/js/main.js"></script>
</body>
</html>

393
products.html Normal file
View File

@ -0,0 +1,393 @@
<!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 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/85 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 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/85 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">AWS产品服务</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="grid md:grid-cols-3 gap-8">
<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-48 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 flex items-center justify-center">
<i class="fas fa-server text-6xl text-[#FF9900]"></i>
</div>
<div class="p-8">
<h3 class="text-2xl font-semibold mb-4">EC2 云服务器</h3>
<p class="text-gray-600 leading-relaxed mb-4">可扩展的计算能力，适用于各种工作负载，从小型网站到企业级应用</p>
<ul class="space-y-2 mb-6">
<li class="flex items-start">
<i class="fas fa-check text-[#FF9900] mt-1 mr-2"></i>
<span class="text-gray-600">多种实例类型选择</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-[#FF9900] mt-1 mr-2"></i>
<span class="text-gray-600">按需付费模式</span>
</li>
</ul>
<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 class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
<div class="h-48 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 flex items-center justify-center">
<i class="fas fa-cube text-6xl text-[#FF9900]"></i>
</div>
<div class="p-8">
<h3 class="text-2xl font-semibold mb-4">ECS 容器服务</h3>
<p class="text-gray-600 leading-relaxed mb-4">高度可扩展的容器管理服务，支持Docker容器部署和管理</p>
<ul class="space-y-2 mb-6">
<li class="flex items-start">
<i class="fas fa-check text-[#FF9900] mt-1 mr-2"></i>
<span class="text-gray-600">完全托管的容器服务</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-[#FF9900] mt-1 mr-2"></i>
<span class="text-gray-600">自动扩展和负载均衡</span>
</li>
</ul>
<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 class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
<div class="h-48 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 flex items-center justify-center">
<i class="fas fa-bolt text-6xl text-[#FF9900]"></i>
</div>
<div class="p-8">
<h3 class="text-2xl font-semibold mb-4">Lambda 无服务器</h3>
<p class="text-gray-600 leading-relaxed mb-4">无需管理服务器即可运行代码，按实际使用量付费</p>
<ul class="space-y-2 mb-6">
<li class="flex items-start">
<i class="fas fa-check text-[#FF9900] mt-1 mr-2"></i>
<span class="text-gray-600">自动扩展和负载均衡</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-[#FF9900] mt-1 mr-2"></i>
<span class="text-gray-600">按使用量计费</span>
</li>
</ul>
<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-gray-50">
<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="grid md:grid-cols-3 gap-8">
<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-48 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 flex items-center justify-center">
<i class="fas fa-database text-6xl text-[#FF9900]"></i>
</div>
<div class="p-8">
<h3 class="text-2xl font-semibold mb-4">S3 对象存储</h3>
<p class="text-gray-600 leading-relaxed mb-4">安全、可靠的对象存储服务，适用于备份、归档和数据湖等场景</p>
<ul class="space-y-2 mb-6">
<li class="flex items-start">
<i class="fas fa-check text-[#FF9900] mt-1 mr-2"></i>
<span class="text-gray-600">99.999999999%的持久性</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-[#FF9900] mt-1 mr-2"></i>
<span class="text-gray-600">无限扩展的存储空间</span>
</li>
</ul>
<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 class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
<div class="h-48 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 flex items-center justify-center">
<i class="fas fa-hdd text-6xl text-[#FF9900]"></i>
</div>
<div class="p-8">
<h3 class="text-2xl font-semibold mb-4">EBS 块存储</h3>
<p class="text-gray-600 leading-relaxed mb-4">高性能的块存储服务，为EC2实例提供持久化存储</p>
<ul class="space-y-2 mb-6">
<li class="flex items-start">
<i class="fas fa-check text-[#FF9900] mt-1 mr-2"></i>
<span class="text-gray-600">多种存储类型选择</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-[#FF9900] mt-1 mr-2"></i>
<span class="text-gray-600">支持快照备份</span>
</li>
</ul>
<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 class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
<div class="h-48 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 flex items-center justify-center">
<i class="fas fa-archive text-6xl text-[#FF9900]"></i>
</div>
<div class="p-8">
<h3 class="text-2xl font-semibold mb-4">Glacier 归档存储</h3>
<p class="text-gray-600 leading-relaxed mb-4">经济高效的归档存储服务，适合长期数据保存</p>
<ul class="space-y-2 mb-6">
<li class="flex items-start">
<i class="fas fa-check text-[#FF9900] mt-1 mr-2"></i>
<span class="text-gray-600">极低的存储成本</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-[#FF9900] mt-1 mr-2"></i>
<span class="text-gray-600">安全的数据归档</span>
</li>
</ul>
<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">
<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="grid md:grid-cols-3 gap-8">
<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-48 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 flex items-center justify-center">
<i class="fas fa-network-wired text-6xl text-[#FF9900]"></i>
</div>
<div class="p-8">
<h3 class="text-2xl font-semibold mb-4">RDS 关系型数据库</h3>
<p class="text-gray-600 leading-relaxed mb-4">易于部署和管理的关系型数据库服务，支持多种主流数据库引擎</p>
<ul class="space-y-2 mb-6">
<li class="flex items-start">
<i class="fas fa-check text-[#FF9900] mt-1 mr-2"></i>
<span class="text-gray-600">支持多种数据库引擎</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-[#FF9900] mt-1 mr-2"></i>
<span class="text-gray-600">自动备份和恢复</span>
</li>
</ul>
<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 class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
<div class="h-48 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 flex items-center justify-center">
<i class="fas fa-database text-6xl text-[#FF9900]"></i>
</div>
<div class="p-8">
<h3 class="text-2xl font-semibold mb-4">DynamoDB NoSQL数据库</h3>
<p class="text-gray-600 leading-relaxed mb-4">完全托管的NoSQL数据库服务，提供毫秒级延迟</p>
<ul class="space-y-2 mb-6">
<li class="flex items-start">
<i class="fas fa-check text-[#FF9900] mt-1 mr-2"></i>
<span class="text-gray-600">自动扩展和负载均衡</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-[#FF9900] mt-1 mr-2"></i>
<span class="text-gray-600">毫秒级延迟</span>
</li>
</ul>
<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 class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
<div class="h-48 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 flex items-center justify-center">
<i class="fas fa-search text-6xl text-[#FF9900]"></i>
</div>
<div class="p-8">
<h3 class="text-2xl font-semibold mb-4">Elasticache 缓存服务</h3>
<p class="text-gray-600 leading-relaxed mb-4">全托管的缓存服务，支持Redis和Memcached</p>
<ul class="space-y-2 mb-6">
<li class="flex items-start">
<i class="fas fa-check text-[#FF9900] mt-1 mr-2"></i>
<span class="text-gray-600">支持Redis和Memcached</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-[#FF9900] mt-1 mr-2"></i>
<span class="text-gray-600">自动扩展和备份</span>
</li>
</ul>
<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">需要了解更多AWS产品?</h2>
<p class="text-xl mb-8 max-w-2xl mx-auto">联系我们的产品专家，获取专业的AWS产品咨询和方案建议</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>

367
solutions.html Normal file
View File

@ -0,0 +1,367 @@
<!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 hover:text-gray-300">解决方案</a>
<a href="cases.html" class="text-white/85 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 hover:text-gray-300">解决方案</a>
<a href="cases.html" class="text-white/85 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">AWS解决方案</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 mt-24">计算服务</h2>
<p class="text-xl text-gray-600 leading-relaxed">灵活、可扩展的计算能力，支持各种工作负载</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- 网站托管 -->
<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-48 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 flex items-center justify-center">
<i class="fas fa-server text-6xl text-[#FF9900]"></i>
</div>
<div class="p-8">
<h3 class="text-2xl font-semibold mb-4">网站托管解决方案</h3>
<p class="text-gray-600 leading-relaxed mb-6">基于AWS构建高可用、可扩展、安全的网站托管平台，支持静态和动态网站。</p>
<ul class="space-y-3 mb-6">
<li class="flex items-start">
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
<span class="text-gray-600">高可用架构，保证业务连续性</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
<span class="text-gray-600">弹性伸缩，轻松应对流量高峰</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
<span class="text-gray-600">全球CDN加速，提升访问速度</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
<span class="text-gray-600">WAF防火墙，增强网站安全性</span>
</li>
</ul>
<a href="#" class="inline-flex items-center text-[#FF9900] hover:text-[#FF9900]/90 font-semibold">
了解详情
<i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
<!-- 企业上云 -->
<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-48 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 flex items-center justify-center">
<i class="fas fa-cloud-upload-alt text-6xl text-[#FF9900]"></i>
</div>
<div class="p-8">
<h3 class="text-2xl font-semibold mb-4">企业上云迁移方案</h3>
<p class="text-gray-600 leading-relaxed mb-6">为企业提供平滑、安全的上云迁移服务，包括评估、规划、实施和优化。</p>
<ul class="space-y-3 mb-6">
<li class="flex items-start">
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
<span class="text-gray-600">全面的迁移评估与规划</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
<span class="text-gray-600">多种迁移策略选择</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
<span class="text-gray-600">专业的迁移实施与数据同步</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
<span class="text-gray-600">迁移后的性能优化与成本管理</span>
</li>
</ul>
<a href="#" class="inline-flex items-center text-[#FF9900] hover:text-[#FF9900]/90 font-semibold">
了解详情
<i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
<!-- 灾备方案 -->
<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-48 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 flex items-center justify-center">
<i class="fas fa-shield-alt text-6xl text-[#FF9900]"></i>
</div>
<div class="p-8">
<h3 class="text-2xl font-semibold mb-4">云上灾备解决方案</h3>
<p class="text-gray-600 leading-relaxed mb-6">利用AWS构建经济高效、可靠的灾难恢复解决方案，保障业务连续性。</p>
<ul class="space-y-3 mb-6">
<li class="flex items-start">
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
<span class="text-gray-600">多种灾备模式选择</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
<span class="text-gray-600">低RPO/RTO目标，快速恢复业务</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
<span class="text-gray-600">跨区域/跨可用区部署</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
<span class="text-gray-600">自动化灾备演练</span>
</li>
</ul>
<a href="#" class="inline-flex items-center text-[#FF9900] hover:text-[#FF9900]/90 font-semibold">
了解详情
<i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
<!-- 大数据分析 -->
<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-48 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 flex items-center justify-center">
<i class="fas fa-database text-6xl text-[#FF9900]"></i>
</div>
<div class="p-8">
<h3 class="text-2xl font-semibold mb-4">大数据分析平台</h3>
<p class="text-gray-600 leading-relaxed mb-6">基于AWS构建可扩展、高性能的大数据处理与分析平台，挖掘数据价值。</p>
<ul class="space-y-3 mb-6">
<li class="flex items-start">
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
<span class="text-gray-600">构建数据湖与数据仓库</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
<span class="text-gray-600">使用EMR进行大数据处理</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
<span class="text-gray-600">实时数据流处理</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
<span class="text-gray-600">机器学习与AI服务</span>
</li>
</ul>
<a href="#" class="inline-flex items-center text-[#FF9900] hover:text-[#FF9900]/90 font-semibold">
了解详情
<i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
<!-- 微服务架构 -->
<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-48 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 flex items-center justify-center">
<i class="fas fa-cubes text-6xl text-[#FF9900]"></i>
</div>
<div class="p-8">
<h3 class="text-2xl font-semibold mb-4">微服务架构方案</h3>
<p class="text-gray-600 leading-relaxed mb-6">利用AWS容器服务和无服务器构建现代化的微服务架构。</p>
<ul class="space-y-3 mb-6">
<li class="flex items-start">
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
<span class="text-gray-600">容器化部署与编排</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
<span class="text-gray-600">API网关管理服务接口</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
<span class="text-gray-600">服务发现与负载均衡</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
<span class="text-gray-600">DevOps与CI/CD集成</span>
</li>
</ul>
<a href="#" class="inline-flex items-center text-[#FF9900] hover:text-[#FF9900]/90 font-semibold">
了解详情
<i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
<!-- 更多解决方案 -->
<div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 border-2 border-dashed border-gray-300">
<div class="h-48 bg-gradient-to-br from-[#FF9900]/10 to-[#FF9900]/5 flex items-center justify-center">
<i class="fas fa-ellipsis-h text-6xl text-gray-400"></i>
</div>
<div class="p-8 text-center">
<h3 class="text-2xl font-semibold mb-4">更多定制化方案</h3>
<p class="text-gray-600 leading-relaxed mb-6">我们还可根据您的具体需求，提供更多行业的定制化解决方案。</p>
<a href="contact.html" class="inline-flex items-center text-[#FF9900] hover:text-[#FF9900]/90 font-semibold">
立即咨询
<i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- 为什么选择我们 -->
<section class="section bg-gray-50">
<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">结合AWS最佳实践和我们的专业经验，为您打造最优方案</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 text-center">
<div class="w-20 h-20 bg-gradient-to-br from-[#0D6EFD]/20 to-[#0D6EFD]/10 rounded-full flex items-center justify-center mx-auto mb-6">
<i class="fas fa-certificate text-[#0D6EFD] text-3xl"></i>
</div>
<h3 class="text-2xl font-semibold mb-4">AWS官方认证</h3>
<p class="text-gray-600 leading-relaxed">拥有多名AWS认证专家，具备深厚的技术实力和项目经验</p>
</div>
<div class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 text-center">
<div class="w-20 h-20 bg-gradient-to-br from-[#0D6EFD]/20 to-[#0D6EFD]/10 rounded-full flex items-center justify-center mx-auto mb-6">
<i class="fas fa-users-cog text-[#0D6EFD] text-3xl"></i>
</div>
<h3 class="text-2xl font-semibold mb-4">客户成功导向</h3>
<p class="text-gray-600 leading-relaxed">深入理解客户业务需求，提供最适合的解决方案，助力客户成功</p>
</div>
<div class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 text-center">
<div class="w-20 h-20 bg-gradient-to-br from-[#0D6EFD]/20 to-[#0D6EFD]/10 rounded-full flex items-center justify-center mx-auto mb-6">
<i class="fas fa-handshake text-[#0D6EFD] text-3xl"></i>
</div>
<h3 class="text-2xl font-semibold mb-4">全程专业服务</h3>
<p class="text-gray-600 leading-relaxed">提供从咨询、设计、实施到运维的全生命周期服务支持</p>
</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 leading-relaxed">立即联系我们的解决方案架构师，获取免费咨询和方案设计</p>
<a href="contact.html" class="inline-flex items-center bg-white text-black px-8 py-4 rounded-lg hover:bg-gray-100 transition-colors duration-300 text-lg font-semibold">
免费咨询
<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>

202
src/css/styles.css Normal file
View File

@ -0,0 +1,202 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap');
:root {
--primary-color: #232F3E;
--secondary-color: #FF9900;
--accent-color: #0D6EFD;
--text-color: #333333;
--light-gray: #F8F9FA;
--white: #FFFFFF;
}
body {
font-family: 'Roboto', sans-serif;
color: var(--text-color);
}
/* 通用样式 */
.container {
@apply max-w-7xl mx-auto px-6 lg:px-8;
margin-left: auto;
margin-right: auto;
width: 100%;
}
.section {
@apply py-16;
}
.heading-1 {
@apply text-5xl font-bold mb-6;
}
.heading-2 {
@apply text-3xl font-medium mb-4;
}
.heading-3 {
@apply text-2xl font-medium mb-2;
}
.btn-primary {
@apply inline-block bg-[#FF9900] text-white px-6 py-3 rounded hover:bg-[#FF9900]/90;
}
.btn-secondary {
@apply inline-block border border-white text-white px-6 py-3 rounded hover:bg-white/10;
}
/* 响应式布局 */
@media (max-width: 768px) {
.container {
@apply px-4;
margin-left: auto;
margin-right: auto;
width: 100%;
}
.heading-1 {
@apply text-4xl;
}
.heading-2 {
@apply text-2xl;
}
.heading-3 {
@apply text-xl;
}
}
/* 页面加载动画 */
.page-loader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
transition: opacity 0.5s;
}
.loader-spinner {
width: 50px;
height: 50px;
border: 4px solid #f3f3f3;
border-top: 4px solid #FF9900;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* 导航栏样式 */
.nav-scrolled {
background-color: rgba(35, 47, 62, 0.95);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* 响应式优化 */
@media (max-width: 768px) {
.container {
padding-left: 1rem;
padding-right: 1rem;
}
.heading-1 {
font-size: 2rem;
line-height: 1.2;
}
.heading-2 {
font-size: 1.75rem;
line-height: 1.2;
}
.section {
padding: 3rem 0;
}
}
/* 表单样式优化 */
.form-input:focus {
outline: none;
border-color: #FF9900;
box-shadow: 0 0 0 2px rgba(255, 153, 0, 0.2);
}
/* 动画效果 */
.hover-scale {
transition: transform 0.3s ease;
}
.hover-scale:hover {
transform: scale(1.02);
}
/* 卡片悬浮效果 */
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
/* 按钮动画 */
.btn-primary {
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.btn-primary:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255,255,255,0.2);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.6s ease, height 0.6s ease;
}
.btn-primary:hover:after {
width: 300%;
height: 300%;
}
/* 地图容器样式 */
#map-container {
transition: all 0.3s ease;
border: 1px solid #e5e7eb;
}
#map-container:hover {
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
/* 信息窗体样式 */
.amap-info-content {
padding: 1rem !important;
border-radius: 0.5rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.amap-info-close {
color: #4B5563 !important;
top: 0.5rem !important;
right: 0.5rem !important;
}

101
src/js/main.js Normal file
View File

@ -0,0 +1,101 @@
// 表单提交处理
document.addEventListener('DOMContentLoaded', function() {
const contactForm = document.querySelector('form');
if (contactForm) {
contactForm.addEventListener('submit', async function(e) {
e.preventDefault();
// 显示加载状态
const submitButton = this.querySelector('button[type="submit"]');
const originalText = submitButton.textContent;
submitButton.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>提交中...';
submitButton.disabled = true;
// 收集表单数据
const formData = new FormData(this);
const data = Object.fromEntries(formData.entries());
try {
// 这里替换为您的实际API端点
const response = await fetch('/api/contact', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data)
});
if (response.ok) {
showNotification('提交成功！我们会尽快与您联系。', 'success');
contactForm.reset();
} else {
throw new Error('提交失败');
}
} catch (error) {
showNotification('抱歉，提交失败，请稍后重试。', 'error');
} finally {
submitButton.innerHTML = originalText;
submitButton.disabled = false;
}
});
}
});
// 页面加载动画
window.addEventListener('load', function() {
const loader = document.querySelector('.page-loader');
if (loader) {
loader.style.opacity = '0';
setTimeout(() => {
loader.style.display = 'none';
}, 500);
}
});
// 导航栏交互
const mobileMenuButton = document.querySelector('.mobile-menu-button');
const mobileMenu = document.querySelector('.mobile-menu');
if (mobileMenuButton && mobileMenu) {
mobileMenuButton.addEventListener('click', function() {
mobileMenu.classList.toggle('hidden');
});
}
// 滚动效果
window.addEventListener('scroll', function() {
const nav = document.querySelector('nav');
if (window.scrollY > 100) {
nav.classList.add('nav-scrolled');
} else {
nav.classList.remove('nav-scrolled');
}
});
// 通知提示框
function showNotification(message, type = 'success') {
const notification = document.createElement('div');
notification.className = `fixed top-4 right-4 p-4 rounded-lg shadow-lg ${
type === 'success' ? 'bg-green-500' : 'bg-red-500'
} text-white z-50 transform transition-all duration-300 translate-y-0`;
notification.textContent = message;
document.body.appendChild(notification);
setTimeout(() => {
notification.style.transform = 'translateY(-100%)';
setTimeout(() => {
document.body.removeChild(notification);
}, 300);
}, 3000);
}
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});