website-init/index.html

356 lines
22 KiB
HTML
Raw Normal View History

2025-04-22 15:41:11 +08:00
<!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>