356 lines
22 KiB
HTML
356 lines
22 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>AWS云服务专家 - 首页</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
|
||
<link rel="stylesheet" href="src/css/styles.css">
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap');
|
||
body {
|
||
font-family: 'Roboto', sans-serif;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-white">
|
||
<!-- 导航栏 -->
|
||
<nav class="bg-[#232F3E] shadow-md fixed w-full z-50">
|
||
<div class="container">
|
||
<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> |