From 901af55cd9f7d0225fe1e4e921fbd75b000d4a9b Mon Sep 17 00:00:00 2001
From: ZHENG XIAOYI <yxpqazkzxy@126.com>
Date: Mon, 9 Feb 2026 19:42:13 +0800
Subject: [PATCH] style: redesign company introduction layout

---
 src/components/sections/Timeline.astro | 183 ++++---------------------
 1 file changed, 29 insertions(+), 154 deletions(-)

diff --git a/src/components/sections/Timeline.astro b/src/components/sections/Timeline.astro
index 1c764e4..a22303d 100644
--- a/src/components/sections/Timeline.astro
+++ b/src/components/sections/Timeline.astro
@@ -8,169 +8,44 @@
 			<div class="w-20 h-1.5 bg-gradient-to-r from-blue-600 to-indigo-600 mx-auto mt-6 rounded-full"></div>
 		</div>
 
-		<div class="max-w-7xl mx-auto px-4 lg:px-0 mb-20">
+		<div class="max-w-7xl mx-auto px-4 lg:px-0 mb-8">
 			<div class="relative mb-16">
-				<div class="absolute inset-0 bg-gradient-to-r from-blue-400 via-indigo-400 to-purple-400 rounded-3xl blur-3xl opacity-30"></div>
-				<div class="relative bg-gradient-to-br from-white via-blue-50/50 to-indigo-50/50 backdrop-blur-xl rounded-[2.5rem] p-8 md:p-16 border border-blue-100/50 shadow-2xl shadow-blue-200/20">
-					<div class="flex flex-col lg:flex-row gap-12 items-center">
-						<div class="flex-1">
-							<div class="inline-flex items-center gap-2 px-4 py-2 bg-blue-500/10 rounded-full mb-6">
-								<span class="w-2 h-2 bg-blue-500 rounded-full animate-pulse"></span>
-								<span class="text-blue-600 text-sm font-semibold tracking-wider uppercase">About Us</</span>
-							</div>
-							<p class="text-gray-700 text-lg md:text-xl leading-relaxed mb-6">
-								浙江贝凡网络科技有限公司是一家专注于<span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600 font-bold">产业数字化转型</span>的高科技企业，总部坐落于美丽的<span class="text-blue-600 font-bold">西子湖畔 · 杭州</span>。
-							</p>
-							<p class="text-gray-600 text-base md:text-lg leading-relaxed mb-6">
-								依托<span class="text-indigo-600 font-semibold">AI大模型</span>、<span class="text-blue-600 font-semibold">物联网IoT</span>、<span class="text-indigo-600 font-semibold">融合开发DevOps</span>等技术优势，为政府和企业提供<span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600 font-semibold">全场景的数字化解决方案</span>。与<span class="text-blue-600 font-semibold">浪潮集团</span>、<span class="text-indigo-600 font-semibold">中国移动</span>、<span class="text-purple-600 font-semibold">海康威视</span>、<span class="text-cyan-600 font-semibold">阿里云</span>、<span class="text-blue-600 font-semibold">字节跳动</span>等头部企业深度融合合作，构建强大的业务生态体系。
-							</p>
-						</div>
-						<div class="flex-shrink-0 w-full lg:w-auto">
-							<div class="grid grid-cols-2 gap-4">
-								<div class="group relative p-6 bg-white/80 backdrop-blur-sm rounded-2xl border border-blue-100 hover:bg-white hover:shadow-xl hover:shadow-blue-200/50 hover:scale-105 transition-all duration-300">
-									<div class="absolute -top-1 -right-1 w-3 h-3 bg-blue-500 rounded-full animate-pulse"></div>
-									<div class="text-3xl md:text-4xl font-black text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600 mb-1">2019</div>
-									<div class="text-gray-600 text-sm font-medium">成立年份</div>
-								</div>
-								<div class="group relative p-6 bg-white/80 backdrop-blur-sm rounded-2xl border border-indigo-100 hover:bg-white hover:shadow-xl hover:shadow-indigo-200/50 hover:scale-105 transition-all duration-300">
-									<div class="absolute -top-1 -right-1 w-3 h-3 bg-indigo-500 rounded-full animate-pulse" style="animation-delay: 0.2s"></div>
-									<div class="text-3xl md:text-4xl font-black text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-purple-600 mb-1">700+</div>
-									<div class="text-gray-600 text-sm font-medium">视觉理解算法</div>
-								</div>
-								<div class="group relative p-6 bg-white/80 backdrop-blur-sm rounded-2xl border border-blue-100 hover:bg-white hover:shadow-xl hover:shadow-blue-200/50 hover:scale-105 transition-all duration-300">
-									<div class="absolute -top-1 -right-1 w-3 h-3 bg-blue-500 rounded-full animate-pulse" style="animation-delay: 0.4s"></div>
-									<div class="text-3xl md:text-4xl font-black text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-cyan-600 mb-1">99.9%</div>
-									<div class="text-gray-600 text-sm font-medium">SLA可用性</div>
-								</div>
-								<div class="group relative p-6 bg-white/80 backdrop-blur-sm rounded-2xl border border-purple-100 hover:bg-white hover:shadow-xl hover:shadow-purple-200/50 hover:scale-105 transition-all duration-300">
-									<div class="absolute -top-1 -right-1 w-3 h-3 bg-purple-500 rounded-full animate-pulse" style="animation-delay: 0.6s"></div>
-									<div class="text-3xl md:text-4xl font-black text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-pink-600 mb-1">15+</div>
-									<div class="text-gray-600 text-sm font-medium">合作伙伴</div>
-								</div>
-							</div>
+				<div class="absolute inset-0 bg-gradient-to-r from-blue-400 via-blue-400 to-blue-400 rounded-3xl blur-3xl opacity-30"></div>
+				<div class="relative bg-gradient-to-br from-white via-blue-50/50 to-blue-50/50 backdrop-blur-xl rounded-[2.5rem] p-8 md:p-16 border border-blue-100/50 shadow-2xl shadow-blue-200/20">
+					<div class="text-center">
+						<div class="inline-flex items-center gap-2 px-4 py-2 bg-blue-500/10 rounded-full mb-6 mx-auto">
+							<span class="w-2 h-2 bg-blue-500 rounded-full animate-pulse"></span>
+							<span class="text-blue-600 text-sm font-semibold tracking-wider uppercase">About Us</</span>
 						</div>
+						<p class="text-gray-700 text-lg md:text-xl leading-relaxed mb-6">
+							浙江贝凡网络科技有限公司是一家专注于<span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-blue-700 font-bold">产业数字化转型</span>的高科技企业，总部坐落于美丽的西子湖畔 · 杭州</span>。
+						</p>
+						<p class="text-gray-600 text-base md:text-lg leading-relaxed">
+							依托<span class="text-blue-600 font-semibold">风险全流程管控</span>、<span class="text-blue-600 font-semibold">中控可视化</span>、<span class="text-blue-600 font-semibold">系统秒级联动</span>、<span class="text-blue-600 font-semibold">全栈多模态协同</span>等技术优势，为政府和企业提供<span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-blue-700 font-semibold">全场景的数字化解决方案</span>。与<span class="text-blue-600 font-semibold">浪潮集团</span>、<span class="text-blue-600 font-semibold">中国移动</span>、<span class="text-blue-600 font-semibold">海康威视</span>、<span class="text-blue-600 font-semibold">阿里云</span>、<span class="text-blue-600 font-semibold">字节跳动</span>等头部企业深度融合合作，构建强大的业务生态体系。
+						</p>
 					</div>
 				</div>
 			</div>
 
-			<div class="mb-16">
-				<div class="flex items-center justify-center gap-4 mb-10">
-					<div class="h-[1px] w-20 bg-gradient-to-r from-transparent to-blue-600"></div>
-					<h4 class="text-2xl md:text-3xl font-bold text-gray-900">核心技术引擎</h4>
-					<div class="h-[1px] w-20 bg-gradient-to-l from-transparent to-blue-600"></div>
+			<div class="grid grid-cols-4 gap-6 mb-20">
+				<div class="text-center group">
+					<div class="text-5xl md:text-6xl font-black text-blue-600 mb-2 group-hover:scale-110 transition-transform duration-300">2019</div>
+					<div class="text-gray-600 text-sm font-medium">成立年份</div>
 				</div>
-				<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-					<div class="group relative bg-white rounded-3xl p-1 shadow-xl shadow-gray-200/50 hover:shadow-2xl hover:shadow-blue-500/10 transition-all duration-500">
-						<div class="absolute inset-0 bg-gradient-to-br from-blue-600 to-cyan-600 rounded-[1.3rem] opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
-						<div class="relative h-full bg-white rounded-[1.2rem] p-6 group-hover:bg-transparent transition-colors duration-500">
-							<div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-2xl flex items-center justify-center mb-5 group-hover:scale-110 group-hover:rotate-3 transition-transform duration-500 shadow-lg shadow-blue-500/30">
-								<i class="fa fa-cogs text-white text-2xl"></i>
-							</div>
-							<h5 class="text-xl font-bold text-gray-900 group-hover:text-white mb-3 transition-colors">AI大模型</h5>
-							<p class="text-gray-500 text-sm leading-relaxed group-hover:text-white/80 transition-colors">多模态人工智能技术<br>提供智能决策与分析能力</p>
-						</div>
-					</div>
-					<div class="group relative bg-white rounded-3xl p-1 shadow-xl shadow-gray-200/50 hover:shadow-2xl hover:shadow-indigo-500/10 transition-all duration-500">
-						<div class="absolute inset-0 bg-gradient-to-br from-indigo-600 to-purple-600 rounded-[1.3rem] opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
-						<div class="relative h-full bg-white rounded-[1.2rem] p-6 group-hover:bg-transparent transition-colors duration-500">
-							<div class="w-16 h-16 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-2xl flex items-center justify-center mb-5 group-hover:scale-110 group-hover:rotate-3 transition-transform duration-500 shadow-lg shadow-indigo-500/30">
-								<i class="fa fa-globe text-white text-2xl"></i>
-							</div>
-							<h5 class="text-xl font-bold text-gray-900 group-hover:text-white mb-3 transition-colors">物联网IoT</h5>
-							<p class="text-gray-500 text-sm leading-relaxed group-hover:text-white/80 transition-colors">海量设备接入与汇总，实现万物互联</p>
-						</div>
-					</div>
-					<div class="group relative bg-white rounded-3xl p-1 shadow-xl shadow-gray-200/50 hover:shadow-2xl hover:shadow-purple-500/10 transition-all duration-500">
-						<div class="absolute inset-0 bg-gradient-to-br from-purple-600 to-pink-600 rounded-[1.3rem] opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
-						<div class="relative h-full bg-white rounded-[1.2rem] p-6 group-hover:bg-transparent transition-colors duration-500">
-							<div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-pink-500 rounded-2xl flex items-center justify-center mb-5 group-hover:scale-110 group-hover:rotate-3 transition-transform duration-500 shadow-lg shadow-purple-500/30">
-								<i class="fa fa-code text-white text-2xl"></i>
-							</div>
-							<h5 class="text-xl font-bold text-gray-900 group-hover:text-white mb-3 transition-colors">融合开发DevOps</h5>
-							<p class="text-gray-500 text-sm leading-relaxed group-hover:text-white/80 transition-colors">全流程自动化开发运维，提升交付效率</p>
-						</div>
-					</div>
-					<div class="group relative bg-white rounded-3xl p-1 shadow-xl shadow-gray-200/50 hover:shadow-2xl hover:shadow-cyan-500/10 transition-all duration-500">
-						<div class="absolute inset-0 bg-gradient-to-br from-cyan-600 to-blue-600 rounded-[1.3rem] opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
-						<div class="relative h-full bg-white rounded-[1.2rem] p-6 group-hover:bg-transparent transition-colors duration-500">
-							<div class="w-16 h-16 bg-gradient-to-br from-cyan-500 to-blue-500 rounded-2xl flex items-center justify-center mb-5 group-hover:scale-110 group-hover:rotate-3 transition-transform duration-500 shadow-lg shadow-cyan-500/30">
-								<i class="fa fa-shield text-white text-2xl"></i>
-							</div>
-							<h5 class="text-xl font-bold text-gray-900 group-hover:text-white mb-3 transition-colors">安全可信</h5>
-							<p class="text-gray-500 text-sm leading-relaxed group-hover:text-white/80 transition-colors">企业级安全防护体系，保障数据安全</p>
-						</div>
-					</div>
-				</div>
-			</div>
-
-			<div class="mb-12">
-				<div class="flex items-center justify-center gap-4 mb-10">
-					<div class="h-[1px] w-20 bg-gradient-to-r from-transparent to-indigo-600"></div>
-					<h4 class="text-2xl md:text-3xl font-bold text-gray-900">服务生态</h4>
-					<div class="h-[1px] w-20 bg-gradient-to-l from-transparent to-indigo-600"></div>
-				</div>
-				<div class="relative">
-					<div class="absolute inset-0 bg-gradient-to-r from-blue-600/10 via-indigo-600/10 to-purple-600/10 blur-3xl rounded-full"></div>
-					<div class="relative flex flex-wrap gap-4 justify-center p-4">
-						<span class="group relative px-6 py-3 bg-white/70 backdrop-blur-sm rounded-full text-gray-700 font-semibold shadow-lg border border-white/30 hover:bg-gradient-to-r hover:from-blue-600 hover:to-indigo-600 hover:text-white hover:border-transparent hover:shadow-blue-500/30 transition-all duration-300 cursor-default">
-							<div class="absolute inset-0 rounded-full bg-gradient-to-r from-blue-600 to-indigo-600 opacity-0 group-hover:opacity-100 blur-xl transition-opacity duration-300"></div>
-							<span class="relative flex items-center gap-2">
-								<i class="fa fa-flask text-sm"></i>
-								化工能源
-							</span>
-						</span>
-						<span class="group relative px-6 py-3 bg-white/70 backdrop-blur-sm rounded-full text-gray-700 font-semibold shadow-lg border border-white/30 hover:bg-gradient-to-r hover:from-indigo-600 hover:to-purple-600 hover:text-white hover:border-transparent hover:shadow-indigo-500/30 transition-all duration-300 cursor-default">
-							<div class="absolute inset-0 rounded-full bg-gradient-to-r from-indigo-600 to-purple-600 opacity-0 group-hover:opacity-100 blur-xl transition-opacity duration-300"></div>
-							<span class="relative flex items-center gap-2">
-								<i class="fa fa-cogs text-sm"></i>
-								生产制造
-							</span>
-						</span>
-						<span class="group relative px-6 py-3 bg-white/70 backdrop-blur-sm rounded-full text-gray-700 font-semibold shadow-lg border border-white/30 hover:bg-gradient-to-r hover:from-purple-600 hover:to-pink-600 hover:text-white hover:border-transparent hover:shadow-purple-500/30 transition-all duration-300 cursor-default">
-							<div class="absolute inset-0 rounded-full bg-gradient-to-r from-purple-600 to-pink-600 opacity-0 group-hover:opacity-100 blur-xl transition-opacity duration-300"></div>
-							<span class="relative flex items-center gap-2">
-								<i class="fa fa-line-chart text-sm"></i>
-								金融零售
-							</span>
-						</span>
-						<span class="group relative px-6 py-3 bg-white/70 backdrop-blur-sm rounded-full text-gray-700 font-semibold shadow-lg border border-white/30 hover:bg-gradient-to-r hover:from-cyan-600 hover:to-blue-600 hover:text-white hover:border-transparent hover:shadow-cyan-500/30 transition-all duration-300 cursor-default">
-							<div class="absolute inset-0 rounded-full bg-gradient-to-r from-cyan-600 to-blue-600 opacity-0 group-hover:opacity-100 blur-xl transition-opacity duration-300"></div>
-							<span class="relative flex items-center gap-2">
-								<i class="fa fa-building text-sm"></i>
-								城市政务
-							</span>
-						</span>
-						<span class="group relative px-6 py-3 bg-white/70 backdrop-blur-sm rounded-full text-gray-700 font-semibold shadow-lg border border-white/30 hover:bg-gradient-to-r hover:from-blue-600 hover:to-indigo-600 hover:text-white hover:border-transparent hover:shadow-blue-500/30 transition-all duration-300 cursor-default">
-							<div class="absolute inset-0 rounded-full bg-gradient-to-r from-blue-600 to-indigo-600 opacity-0 group-hover:opacity-100 blur-xl transition-opacity duration-300"></div>
-							<span class="relative flex items-center gap-2">
-								<i class="fa fa-truck text-sm"></i>
-								交通运输
-							</span>
-						</span>
-						<span class="group relative px-6 py-3 bg-white/70 backdrop-blur-sm rounded-full text-gray-700 font-semibold shadow-lg border border-white/30 hover:bg-gradient-to-r hover:from-indigo-600 hover:to-purple-600 hover:text-white hover:border-transparent hover:shadow-indigo-500/30 transition-all duration-300 cursor-default">
-							<div class="absolute inset-0 rounded-full bg-gradient-to-r from-indigo-600 to-purple-600 opacity-0 group-hover:opacity-100 blur-xl transition-opacity duration-300"></div>
-							<span class="relative flex items-center gap-2">
-								<i class="fa fa-camera text-sm"></i>
-								景区文旅
-							</span>
-						</span>
-						<span class="group relative px-6 py-3 bg-white/70 backdrop-blur-sm rounded-full text-gray-700 font-semibold shadow-lg border border-white/30 hover:bg-gradient-to-r hover:from-purple-600 hover:to-pink-600 hover:text-white hover:border-transparent hover:shadow-purple-500/30 transition-all duration-300 cursor-default">
-							<div class="absolute inset-0 rounded-full bg-gradient-to-r from-purple-600 to-pink-600 opacity-0 group-hover:opacity-100 blur-xl transition-opacity duration-300"></div>
-							<span class="relative flex items-center gap-2">
-								<i class="fa fa-heart text-sm"></i>
-								智慧养老
-							</span>
-						</span>
-						<span class="group relative px-6 py-3 bg-white/70 backdrop-blur-sm rounded-full text-gray-700 font-semibold shadow-lg border border-white/30 hover:bg-gradient-to-r hover:from-cyan-600 hover:to-blue-600 hover:text-white hover:border-transparent hover:shadow-cyan-500/30 transition-all duration-300 cursor-default">
-							<div class="absolute inset-0 rounded-full bg-gradient-to-r from-cyan-600 to-blue-600 opacity-0 group-hover:opacity-100 blur-xl transition-opacity duration-300"></div>
-							<span class="relative flex items-center gap-2">
-								<i class="fa fa-medkit text-sm"></i>
-								医疗健康
-							</span>
-						</span>
-					</div>
+				<div class="text-center group">
+					<div class="text-5xl md:text-6xl font-black text-blue-600 mb-2 group-hover:scale-110 transition-transform duration-300" style="transition-delay: 0.1s">700+</div>
+					<div class="text-gray-600 text-sm font-medium">视觉理解算法</div>
+				</div>
+				<div class="text-center group">
+					<div class="text-5xl md:text-6xl font-black text-blue-600 mb-2 group-hover:scale-110 transition-transform duration-300" style="transition-delay: 0.2s">99.9%</div>
+					<div class="text-gray-600 text-sm font-medium">SLA可用性</div>
+				</div>
+				<div class="text-center group">
+					<div class="text-5xl md:text-6xl font-black text-blue-600 mb-2 group-hover:scale-110 transition-transform duration-300" style="transition-delay: 0.3s">15+</div>
+					<div class="text-gray-600 text-sm font-medium">合作伙伴</div>
 				</div>
 			</div>
+		</div>
 
 		<div class="max-w-7xl mx-auto px-4 lg:px-0 pb-20">
 			<div class="text-center mb-16">