业务网站设计方案
根据您的需求,我设计了一个专业现代的业务网站，采用深蓝色作为主色调（代表信任与专业），搭配灰色与白色形成简洁清晰的视觉层次，网站包含完整的业务展示模块、响应式设计和流畅的交互效果，符合Awwwards级别的UI标准。
以下是完整的代码实现：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">专业业务解决方案 | 驱动企业增长</title>
<!-- 引入外部资源 -->
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
<!-- Tailwind配置 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#165DFF',
secondary: '#36CFC9',
dark: '#1D2939',
light: '#F9FAFB'
},
fontFamily: {
inter: ['Inter', 'system-ui', 'sans-serif'],
},
},
}
}
</script>
<!-- 自定义工具类 -->
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.text-shadow {
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.transition-custom {
transition: all 0.3s ease-in-out;
}
}
</style>
<style>
/* 基础样式 */
body {
font-family: 'Inter', sans-serif;
}
/* 滚动动画 */
.animate-on-scroll {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.animate-on-scroll.visible {
opacity: 1;
transform: translateY(0);
}
/* 平滑滚动 */
html {
scroll-behavior: smooth;
}
</style>
</head>
<body class="font-inter bg-light text-dark">
<!-- 导航栏 -->
<header id="navbar" class="fixed w-full top-0 z-50 transition-custom bg-transparent">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center py-4">
<!-- Logo -->
<a href="#" class="flex items-center space-x-2">
<span class="text-primary text-2xl"><i class="fa fa-line-chart"></i></span>
<span class="text-xl font-bold text-white text-shadow">BizPro</span>
</a>
<!-- 桌面导航 -->
<nav class="hidden md:flex space-x-8">
<a href="#home" class="text-white hover:text-secondary transition-custom">首页</a>
<a href="#services" class="text-white hover:text-secondary transition-custom">服务</a>
<a href="#cases" class="text-white hover:text-secondary transition-custom">案例</a>
<a href="#about" class="text-white hover:text-secondary transition-custom">关于我们</a>
<a href="#contact" class="text-white hover:text-secondary transition-custom">联系我们</a>
</nav>
<!-- 联系按钮 -->
<a href="#contact" class="hidden md:block bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-full transition-custom shadow-lg hover:shadow-xl">
立即咨询
</a>
<!-- 移动端汉堡菜单 -->
<button id="menu-toggle" class="md:hidden text-white text-2xl">
<i class="fa fa-bars"></i>
</button>
</div>
</div>
<!-- 移动端导航菜单 -->
<div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg absolute w-full">
<div class="container mx-auto px-4 py-3 space-y-3">
<a href="#home" class="block text-dark hover:text-primary transition-custom">首页</a>
<a href="#services" class="block text-dark hover:text-primary transition-custom">服务</a>
<a href="#cases" class="block text-dark hover:text-primary transition-custom">案例</a>
<a href="#about" class="block text-dark hover:text-primary transition-custom">关于我们</a>
<a href="#contact" class="block text-dark hover:text-primary transition-custom">联系我们</a>
<a href="#contact" class="block bg-primary text-white text-center px-6 py-2 rounded-full transition-custom">
立即咨询
</a>
</div>
</div>
</header>
<!-- Hero区域 -->
<section id="home" class="relative min-h-screen flex items-center justify-center bg-gradient-to-r from-dark to-primary/90 overflow-hidden">
<!-- 背景装饰 -->
<div class="absolute inset-0 z-0">
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-secondary/20 rounded-full blur-3xl"></div>
<div class="absolute bottom-1/4 right-1/4 w-96 h-96 bg-primary/30 rounded-full blur-3xl"></div>
</div>
<div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="max-w-3xl mx-auto text-center">
<h1 class="text-[clamp(2.5rem,5vw,4rem)] font-bold text-white leading-tight text-shadow mb-6 animate-on-scroll">
专业业务解决方案<br>驱动企业数字化增长
</h1>
<p class="text-[clamp(1rem,2vw,1.25rem)] text-white/80 mb-8 max-w-2xl mx-auto animate-on-scroll" style="transition-delay: 0.2s;">
我们提供定制化的业务咨询、技术开发和数字化转型服务，帮助企业在竞争激烈的市场中脱颖而出。
</p>
<div class="flex flex-col sm:flex-row justify-center gap-4 animate-on-scroll" style="transition-delay: 0.4s;">
<a href="#services" class="bg-secondary hover:bg-secondary/90 text-white font-medium px-8 py-3 rounded-full transition-custom shadow-lg hover:shadow-xl">
探索服务
</a>
<a href="#contact" class="bg-white/10 backdrop-blur-sm hover:bg-white/20 text-white font-medium px-8 py-3 rounded-full transition-custom border border-white/30">
联系我们
</a>
</div>
</div>
</div>
<!-- 滚动指示 -->
<div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
<a href="#services" class="text-white/70 hover:text-white transition-custom">
<i class="fa fa-chevron-down text-2xl"></i>
</a>
</div>
</section>
<!-- 核心优势 -->
<section class="py-20 bg-white">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16 animate-on-scroll">
<h2 class="text-[clamp(1.75rem,3vw,2.5rem)] font-bold text-dark mb-4">为什么选择我们</h2>
<p class="text-gray-600 max-w-2xl mx-auto">我们凭借专业的团队、丰富的经验和创新的解决方案，帮助众多企业实现业务目标</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- 优势1 -->
<div class="bg-light p-8 rounded-2xl shadow-md hover:shadow-xl transition-custom animate-on-scroll">
<div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-6">
<i class="fa fa-rocket text-primary text-2xl"></i>
</div>
<h3 class="text-xl font-semibold mb-3">高效执行</h3>
<p class="text-gray-600">我们以结果为导向，确保项目按时交付并超出客户期望</p>
</div>
<!-- 优势2 -->
<div class="bg-light p-8 rounded-2xl shadow-md hover:shadow-xl transition-custom animate-on-scroll" style="transition-delay: 0.1s;">
<div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-6">
<i class="fa fa-cogs text-primary text-2xl"></i>
</div>
<h3 class="text-xl font-semibold mb-3">定制方案</h3>
<p class="text-gray-600">根据企业实际需求，提供个性化的解决方案和服务</p>
</div>
<!-- 优势3 -->
<div class="bg-light p-8 rounded-2xl shadow-md hover:shadow-xl transition-custom animate-on-scroll" style="transition-delay: 0.2s;">
<div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-6">
<i class="fa fa-users text-primary text-2xl"></i>
</div>
<h3 class="text-xl font-semibold mb-3">专业团队</h3>
<p class="text-gray-600">由行业专家组成的团队，拥有丰富的实战经验和专业知识</p>
</div>
<!-- 优势4 -->
<div class="bg-light p-8 rounded-2xl shadow-md hover:shadow-xl transition-custom animate-on-scroll" style="transition-delay: 0.3s;">
<div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-6">
<i class="fa fa-handshake-o text-primary text-2xl"></i>
</div>
<h3 class="text-xl font-semibold mb-3">客户至上</h3>
<p class="text-gray-600">始终将客户需求放在首位，提供全方位的支持和服务</p>
</div>
</div>
</div>
</section>
<!-- 服务项目 -->
<section id="services" class="py-20 bg-light">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16 animate-on-scroll">
<h2 class="text-[clamp(1.75rem,3vw,2.5rem)] font-bold text-dark mb-4">我们的服务</h2>
<p class="text-gray-600 max-w-2xl mx-auto">我们提供全方位的业务解决方案，满足不同企业的需求</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- 服务1 -->
<div class="bg-white rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition-custom group animate-on-scroll">
<div class="h-48 overflow-hidden">
<img src="https://picsum.photos/id/26/800/600" alt="业务咨询" class="w-full h-full object-cover group-hover:scale-105 transition-custom duration-500">
</div>
<div class="p-8">
<h3 class="text-xl font-semibold mb-3">业务咨询</h3>
<p class="text-gray-600 mb-6">提供专业的业务分析和战略规划，帮助企业优化运营流程，提升效率</p>
<a href="#contact" class="inline-flex items-center text-primary font-medium hover:text-primary/80 transition-custom">
了解更多 <i class="fa fa-arrow-right ml-2"></i>
</a>
</div>
</div>
<!-- 服务2 -->
<div class="bg-white rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition-custom group animate-on-scroll" style="transition-delay: 0.1s;">
<div class="h-48 overflow-hidden">
<img src="https://picsum.photos/id/48/800/600" alt="技术开发" class="w-full h-full object-cover group-hover:scale-105 transition-custom duration-500">
</div>
<div class="p-8">
<h3 class="text-xl font-semibold mb-3">技术开发</h3>
<p class="text-gray-600 mb-6">定制化软件开发、网站建设和移动应用开发，助力企业数字化转型</p>
<a href="#contact" class="inline-flex items-center text-primary font-medium hover:text-primary/80 transition-custom">
了解更多 <i class="fa fa-arrow-right ml-2"></i>
</a>
</div>
</div>
<!-- 服务3 -->
<div class="bg-white rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition-custom group animate-on-scroll" style="transition-delay: 0.2s;">
<div class="h-48 overflow-hidden">
<img src="https://picsum.photos/id/20/800/600" alt="数字营销" class="w-full h-full object-cover group-hover:scale-105 transition-custom duration-500">
</div>
<div class="p-8">
<h3 class="text-xl font-semibold mb-3">数字营销</h3>
<p class="text-gray-600 mb-6">全方位的数字营销服务，包括SEO、社交媒体营销、内容营销等</p>
<a href="#contact" class="inline-flex items-center text-primary font-medium hover:text-primary/80 transition-custom">
了解更多 <i class="fa fa-arrow-right ml-2"></i>
</a>
</div>
</div>
<!-- 服务4 -->
<div class="bg-white rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition-custom group animate-on-scroll" style="transition-delay: 0.3s;">
<div class="h-48 overflow-hidden">
<img src="https://picsum.photos/id/180/800/600" alt="数据分析" class="w-full h-full object-cover group-hover:scale-105 transition-custom duration-500">
</div>
<div class="p-8">
<h3 class="text-xl font-semibold mb-3">数据分析</h3>
<p class="text-gray-600 mb-6">通过数据分析帮助企业发现市场机会，优化决策过程</p>
<a href="#contact" class="inline-flex items-center text-primary font-medium hover:text-primary/80 transition-custom">
了解更多 <i class="fa fa-arrow-right ml-2"></i>
</a>
</div>
</div>
<!-- 服务5 -->
<div class="bg-white rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition-custom group animate-on-scroll" style="transition-delay: 0.4s;">
<div class="h-48 overflow-hidden">
<img src="https://picsum.photos/id/42/800/600" alt="云计算" class="w-full h-full object-cover group-hover:scale-105 transition-custom duration-500">
</div>
<div class="p-8">
<h3 class="text-xl font-semibold mb-3">云计算</h3>
<p class="text-gray-600 mb-6">提供云计算解决方案，帮助企业降低IT成本，提高灵活性</p>
<a href="#contact" class="inline-flex items-center text-primary font-medium hover:text-primary/80 transition-custom">
了解更多 <i class="fa fa-arrow-right ml-2"></i>
</a>
</div>
</div>
<!-- 服务6 -->
<div class="bg-white rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition-custom group animate-on-scroll" style="transition-delay: 0.5s;">
<div class="h-48 overflow-hidden">
<img src="https://picsum.photos/id/60/800/600" alt="培训服务" class="w-full h-full object-
