@@ -1,183 +1,155 @@
<section id="timeline" class="bg-slate-50">
<div class="mb-16 relative mt-20">
<div class="relative mt-20">
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-80 h-80 bg-blue-100/50 blur-[100px] rounded-full -z-10"></div>
<div class="text-center">
<div class="text-center mb-12 ">
<h3 class="text-3xl md:text-5xl font-black text-gray-900 tracking-tight">
<span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600">公司介绍</span>
</h3>
<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>
<div class="flex flex-col md:flex-row items-stretch gap-6 md:gap-20 max-w-7xl mx-auto px-4 lg:px-0">
<div class="w-full md:w-5/12 order-1 relative">
<div class="md:sticky md:top-20 h-fit">
<div class="grid grid-cols-2 gap-x-4 md:gap-x-5 gap-y-4 md:gap-y-5">
<div class="col-span-2 flex flex-col rounded-2xl overflow-hidden border border-gray-100 bg-white group transition-all duration-300 shadow-sm">
<div class="relative aspect-[3/1] md:aspect-[3/1.2] overflow-hidden">
<img src="/img/company-hangzhou.jpg" alt="杭州" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105">
</div>
<div class="relative p-3 md:p-4">
<div class="absolute inset-0 bg-gradient-to-br from-blue-50/50 to-white/80 backdrop-blur-md z-0"></div>
<div class="relative z-10">
<span class="text-blue-600/70 font-bold text-[10px] tracking-widest uppercase">Location</span>
<h4 class="text-gray-800 font-bold text-sm md:text-base mt-0.5">总部坐落于</h4>
<h4 class="text-gray-800 font-bold text-sm md:text-base mt-0.5">美丽的西子湖畔 · 杭州</h4>
</div>
</div>
</div>
<div class="flex flex-col rounded-2xl overflow-hidden border border-gray-100 bg-white group transition-all duration-300 shadow-sm">
<div class="relative aspect-[16/10] overflow-hidden">
<img src="/img/company-building.jpg" alt="大楼" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105">
</div>
<div class="relative p-3 md:p-4">
<div class="absolute inset-0 bg-gradient-to-br from-slate-100/50 to-white/80 backdrop-blur-md z-0"></div>
<div class="relative z-10">
<span class="text-blue-600/70 font-bold text-[10px] tracking-widest uppercase">R&D Center</span>
<h4 class="text-gray-800 font-bold text-sm md:text-base mt-0.5">立足杭城CBD</h4>
<h4 class="text-gray-800 font-bold text-sm md:text-base mt-0.5">驱动数字研发新引擎</h4>
</div>
</div>
</div>
<div class="flex flex-col rounded-2xl overflow-hidden border border-gray-100 bg-white group transition-all duration-300 shadow-sm">
<div class="relative aspect-[16/10] overflow-hidden">
<img src="/img/company-showroom.jpg" alt="展示" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105">
</div>
<div class="relative p-3 md:p-4">
<div class="absolute inset-0 bg-gradient-to-br from-blue-50/50 to-white/80 backdrop-blur-md z-0"></div>
<div class="relative z-10">
<span class="text-blue-600/70 font-bold text-[10px] tracking-widest uppercase">Solutions</span>
<h4 class="text-gray-800 font-bold text-sm md:text-base mt-0.5">AI场景赋能</h4>
<h4 class="text-gray-800 font-bold text-sm md:text-base mt-0.5">面向未来的数字展厅</h4>
</div>
</div>
</div>
<div class="max-w-5xl mx-auto px-4 lg:px-0 mb-20">
<div class="relative group">
<div class="absolute -inset-1 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-3xl blur opacity-20 group-hover:opacity-30 transition-opacity duration-300"></div>
<div class="relative bg-white/80 backdrop-blur-sm rounded-3xl p-8 md:p-12 border border-gray-100">
<p class="text-gray-700 text-lg md:text-xl leading-relaxed">
浙江贝凡网络科技有限公司是一家专注于<span class="text-blue-600 font-bold">产业</span><span class="text-indigo-600 font-bold">数字化转型</span>的高科技企业,总部坐落于美丽的<span class="text-blue-600 font-bold">西子湖畔 · 杭州</span>。我们依托<span class="text-blue-600 font-bold">AI大模型</span>、<span class="text-indigo-600 font-bold">物联网IoT</span>、<span class="text-blue-600 font-bold">融合开发DevOps</span>等技术优势,致力于通过技术创新赋能各行业数字化升级,为政府和企业提供<span class="text-indigo-600 font-bold">全场景的数字化解决方案</span>。
</p>
</div>
</div>
</div>
<div class="w-full md:w-7/12 order -2">
<div class="relative ">
<div class="absolute top-0 bottom-0 left-3 md:left-6 w-px bg-gradient-to-b from-blue-600/40 via -gray-2 00 to-transparent z-0"></div >
<div class="max-w-7xl mx-auto px-4 lg:px-0 pb -20 ">
<div class="text-center mb-16 ">
<h3 class="text-2xl md:text-3xl font-bold text -gray-9 00">发展历程</h3 >
<div class="w-16 h-1 bg-gradient-to-r from-blue-600 to-indigo-600 mx-auto mt-4 rounded-full"></div>
</div>
<div class="space-y-8 md:space-y-12 ">
<div class="flex flex-col md:flex-row items-stretch gap-8 md:gap-20 ">
<div class="w-full md:w-5/12 order-1 relative">
<div class="md:sticky md:top-20 h-fit">
<div class="grid grid-cols-2 gap-x-4 md:gap-x-5 gap-y-4 md:gap-y-5">
<div class="col-span-2 flex flex-col rounded-2xl overflow-hidden border border-gray-100 bg-white group transition-all duration-300 shadow-sm">
<div class="relative aspect-[3/1] md:aspect-[3/1.2] overflow-hidden">
<img src="/img/company-hangzhou.jpg" alt="杭州" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105">
</div>
<div class="relative p-3 md:p-4">
<div class="absolute inset-0 bg-gradient-to-br from-blue-50/50 to-white/80 backdrop-blur-md z-0"></div>
<div class="relative z-10">
<span class="text-blue-600/70 font-bold text-[10px] tracking-widest uppercase">Location</span>
<h4 class="text-gray-800 font-bold text-sm md:text-base mt-0.5">总部坐落于</h4>
<h4 class="text-gray-800 font-bold text-sm md:text-base mt-0.5">美丽的西子湖畔 · 杭州</h4>
</div>
</div>
</div>
<div class="relati ve flex z-10 ">
<span class="absolute top-6 left-3 md:left-6 -translate-x-1/2 w-4 h-4 rounded-full bg-blue-600/30 z-20 border-2 border-white"></span >
<div class="w-full pl-10 md:pl-16 ">
<div class="relative z-10 rounded-xl p-6 bg-white border border-gray-200 shadow-sm" >
<span class="text-blue-600 font-bold tracking-wider text-sm uppercase">2019 公司成立</span >
<h4 class="text-xl font-bold mt-3 mb-2 flex items-center gap-3 text-blue-600" >
<img src="/img/timeline-2019-icon.webp" alt="icon" class="w-7 h-7 object-contain ">
自研系统上线
</h4>
<p class="text-gray-6 00 text-base leading-relaxed">自主研发"车险分期"系统平台,为全国商用车领域业务赋能</p >
<div class="flex flex-col rounded-2xl o ver flow-hidden border border-gray-100 bg-white group transition-all duration-300 shadow-sm ">
<div class="relative aspect-[16/10] overflow-hidden" >
<img src="/img/company-building.jpg" alt="大楼" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105 ">
</div >
<div class="relative p-3 md:p-4" >
<div class="absolute inset-0 bg-gradient-to-br from-slate-100/50 to-white/80 backdrop-blur-md z-0"></div >
<div class="relative z-10 ">
<span class="text-blue-600/70 font-bold text-[10px] tracking-widest uppercase">R&D Center</span>
<h4 class="text-gray-800 font-bold text-sm md:text-base mt-0.5">立足杭城CBD </h4>
<h4 class="text-gray-8 00 font-bold text-sm md:text-base mt-0.5">驱动数字研发新引擎</h4 >
</div>
</div>
</div>
<div class="flex flex-col rounded-2xl overflow-hidden border border-gray-100 bg-white group transition-all duration-300 shadow-sm">
<div class="relative aspect-[16/10] overflow-hidden">
<img src="/img/company-showroom.jpg" alt="展示" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105">
</div>
<div class="relative p-3 md:p-4">
<div class="absolute inset-0 bg-gradient-to-br from-blue-50/50 to-white/80 backdrop-blur-md z-0"></div>
<div class="relative z-10">
<span class="text-blue-600/70 font-bold text-[10px] tracking-widest uppercase">Solutions</span>
<h4 class="text-gray-800 font-bold text-sm md:text-base mt-0.5">AI场景赋能</h4>
<h4 class="text-gray-800 font-bold text-sm md:text-base mt-0.5">面向未来的数字展厅</h4>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="relative flex z-10 ">
<span class="absolute top-6 left-3 md:left-6 -translate-x-1/2 w-4 h-4 rounded-full bg-blue-600/40 z-20 border-2 border-white"></span >
<div class="w-full pl-10 md:pl-16" >
<div class="relative z-10 rounded-xl p-6 bg-white border border-gray-200 shadow-sm">
<span class="text-blue-600 font-bold tracking-wider text-sm uppercase">2020-2022 规模化增长</span >
<h4 class="text-xl font-bold mt-3 mb-2 flex items-center gap-3 text-blue-60 0">
<img src="/img/timeline-2022-icon.webp" alt="icon" class=" w-7 h-7 object-contain" >
全国市场布局
</h4 >
<p class="text-gray -600 text-base leading-relaxed">业务规模化增长阶段,实现全国市场布局,同步优化运营体系与技术架构</p >
<div class="w-full md:w-7/12 order-2 ">
<div class="relative" >
<div class="absolute top-0 bottom-0 left-3 md:left-6 w-px bg bg-gradient-to-b from-blue-600/40 via-gray-200 to-transparent z-0"></div >
<div class="space-y-8 md:space-y-10" >
<div class="relative flex z-1 0">
<span class="absolute top-6 left-3 md:left-6 -translate-x-1/2 w-4 h-4 rounded-full bg-blue-600/30 z-20 border-2 border-white"></span >
<div class="w-full pl-10 md:pl-16">
<div class="relative z-10 rounded-xl p-6 bg-white border border-gray-200 shadow-sm" >
<span class="text-blue -600 font-bold tracking-wider text-sm uppercase">2019</span >
<h4 class="text-xl font-bold mt-3 mb-2 flex items-center gap-3 text-blue-600">
<img src="/img/timeline-2019-icon.webp" alt="icon" class="w-7 h-7 object-contain">
公司成立
</h4>
<p class="text-gray-600 text-base leading-relaxed">自主研发"车险分期"系统平台,为全国商用车领域业务赋能</p>
</div>
</div>
</div>
<div class="relative flex z-10">
<span class="absolute top-6 left-3 md:left-6 -translate-x-1/2 w-4 h-4 rounded-full bg-blue-600/40 z-20 border-2 border-white"></span>
<div class="w-full pl-10 md:pl-16">
<div class="relative z-10 rounded-xl p-6 bg-white border border-gray-200 shadow-sm">
<span class="text-blue-600 font-bold tracking-wider text-sm uppercase">2020-2022</span>
<h4 class="text-xl font-bold mt-3 mb-2 flex items-center gap-3 text-blue-600">
<img src="/img/timeline-2022-icon.webp" alt="icon" class="w-7 h-7 object-contain">
规模化增长
</h4>
<p class="text-gray-600 text-base leading-relaxed">业务规模化增长阶段,实现全国市场布局,同步优化运营体系与技术架构</p>
</div>
</div>
</div>
<div class="relative flex z-10">
<span class="absolute top-6 left-3 md:left-6 -translate-x-1/2 w-4 h-4 rounded-full bg-blue-600/50 z-20 border-2 border-white"></span>
<div class="w-full pl-10 md:pl-16">
<div class="relative z-10 rounded-xl p-6 bg-white border border-gray-100 shadow-sm">
<span class="text-blue-600 font-bold tracking-wider text-sm uppercase">2023-2024</span>
<h4 class="text-xl font-bold mt-3 mb-2 flex items-center gap-3 text-blue-600">
<img src="/img/timeline-2024-icon.webp" alt="icon" class="w-7 h-7 object-contain">
技术升级
</h4>
<p class="text-gray-600 text-base leading-relaxed">技术研发转向工业互联网解决方案, 企安智控1.0上线</p>
</div>
</div>
</div>
<div class="relative flex z-10">
<span class="absolute top-6 left-3 md:left-6 -translate-x-1/2 w-4 h-4 rounded-full bg-blue-600/60 z-20 border-2 border-white"></span>
<div class="w-full pl-10 md:pl-16">
<div class="relative z-10 rounded-xl p-6 bg-white border border-gray-100 shadow-sm">
<span class="text-blue-600 font-bold tracking-wider text-sm uppercase">2025</span>
<h4 class="text-xl font-bold mt-3 mb-2 flex items-center gap-3 text-blue-600">
<img src="/img/timeline-2025-icon.webp" alt="icon" class="w-7 h-7 object-contain">
双赛道启航
</h4>
<p class="text-gray-600 text-base leading-relaxed">SaaS系统交叉融合, 构建业务生态, ToB、ToG多模块场景研发定制</p>
</div>
</div>
</div>
<div class="relative flex z-10">
<span class="absolute top-6 left-3 md:left-6 -translate-x-1/2 w-4 h-4 rounded-full bg-blue-600 shadow-[0_0_0_6px_rgba(37,99,235,0.15)] z-20 border-2 border-white"></span>
<div class="w-full pl-10 md:pl-16">
<div class="relative z-10 rounded-xl p-6 bg-gradient-to-br from-blue-600/10 to-transparent border border-blue-600/20 shadow-lg backdrop-blur-sm">
<span class="text-blue-600 font-bold tracking-wider text-sm uppercase">2026</span>
<h4 class="text-xl font-bold mt-3 mb-2 flex items-center gap-3 text-blue-600">
<img src="/img/timeline-2026-icon.webp" alt="icon" class="w-7 h-7 object-contain">
核心聚焦
</h4>
<p class="text-gray-600 text-base leading-relaxed">AI大模型、物联网IOT、融合开发DevOps, 标准SaaS部署及行业应用, 全场景产业数字化转型服务商</p>
</div>
</div>
</div>
</div>
</div>
<div class="relative flex z-10">
<span class="absolute top-6 left-3 md:left-6 -translate-x-1/2 w-4 h-4 rounded-full bg-blue-600/50 z-20 border-2 border-white"></span>
<div class="w-full pl-10 md:pl-16">
<div class="relative z-10 rounded-xl p-6 bg-white border border-gray-100 shadow-sm">
<span class="text-blue-600 font-bold tracking-wider text-sm uppercase">2023– 2024 技术升级</span>
<h4 class="text-xl font-bold mt-3 mb-2 flex items-center gap-3 text-blue-600">
<img src="/img/timeline-2024-icon.webp" alt="icon" class="w-7 h-7 object-contain">
企安智控1.0上线
</h4>
<p class="text-gray-600 text-base leading-relaxed">技术研发转向工业互联网解决方案</p>
</div>
</div>
</div>
<div class="relative flex z-10">
<span class="absolute top-6 left-3 md:left-6 -translate-x-1/2 w-4 h-4 rounded-full bg-blue-600/60 z-20 border-2 border-white"></span>
<div class="w-full pl-10 md:pl-16">
<div class="relative z-10 rounded-xl p-6 bg-white border border-gray-100 shadow-sm">
<span class="text-blue-600 font-bold tracking-wider text-sm uppercase">2025 双赛道启航</span>
<h4 class="text-xl font-bold mt-3 mb-2 flex items-center gap-3 text-blue-600">
<img src="/img/timeline-2025-icon.webp" alt="icon" class="w-7 h-7 object-contain">
业务生态构建
</h4>
<p class="text-gray-600 text-base leading-relaxed">SaaS系统交叉融合, 构建业务生态, ToB、ToG多模块场景研发定制</p>
</div>
</div>
</div>
<div class="relative flex z-10">
<span class="absolute top-6 left-3 md:left-6 -translate-x-1/2 w-4 h-4 rounded-full bg-blue-600/70 z-20 border-2 border-white"></span>
<div class="w-full pl-10 md:pl-16">
<div class="relative z-10 rounded-xl p-6 bg-white border border-gray-100 shadow-sm">
<span class="text-blue-600 font-bold tracking-wider text-sm uppercase">2026 核心聚焦</span>
<h4 class="text-xl font-bold mt-3 mb-2 flex items-center gap-3 text-blue-600">
<img src="/img/timeline-2026-icon.webp" alt="icon" class="w-7 h-7 object-contain">
AI大模型与工业应用
</h4>
<p class="text-gray-600 text-base leading-relaxed">AI大模型、物联网IOT、融合开发DevOps, 标准SaaS部署及行业应用</p>
</div>
</div>
</div>
<div class="relative flex z-10">
<span class="absolute top-6 left-3 md:left-6 -translate-x-1/2 w-4 h-4 rounded-full bg-blue-600/75 z-20 border-2 border-white"></span>
<div class="w-full pl-10 md:pl-16">
<div class="relative z-10 rounded-xl p-6 bg-white border border-gray-100 shadow-sm">
<span class="text-blue-600 font-bold tracking-wider text-sm uppercase">Innovation 本地化定制</span>
<h4 class="text-xl font-bold mt-3 mb-2 flex items-center gap-3 text-blue-600">
<img src="/img/timeline-innovation-icon.webp" alt="icon" class="w-7 h-7 object-contain">
多模态软件系统研发
</h4>
<p class="text-gray-600 text-base leading-relaxed">场景覆盖多个重点行业,核心集中在化工能源、生产制造、金融零售、城市政务、交通运输、景区文旅等领域提供从需求、方案设计、系统开发、运维交付的全周期定制化服务,助力产业数字化转型提质增效</p>
</div>
</div>
</div>
<div class="relative flex z-10">
<span class="absolute top-6 left-3 md:left-6 -translate-x-1/2 w-4 h-4 rounded-full bg-blue-600/80 z-20 border-2 border-white"></span>
<div class="w-full pl-10 md:pl-16">
<div class="relative z-10 rounded-xl p-6 bg-white border border-gray-100 shadow-sm">
<span class="text-blue-600 font-bold tracking-wider text-sm uppercase">Ecology 生态聚力</span>
<h4 class="text-xl font-bold mt-3 mb-2 flex items-center gap-3 text-blue-600">
<img src="img/timeline-ecology-icon.webp" alt="icon" class="w-7 h-7 object-contain">
头部伙伴深度融合
</h4>
<p class="text-gray-600 text-base leading-relaxed">与浪潮集团、移动通讯、海康威视、阿里云、字节跳动等头部行业深度融合合作</p>
</div>
</div>
</div>
<div class="relative flex z-10">
<span class="absolute top-6 left-3 md:left-6 -translate-x-1/2 w-4 h-4 rounded-full bg-blue-600 shadow-[0_0_0_6px_rgba(37,99,235,0.15)] z-20 border-2 border-white"></span>
<div class="w-full pl-10 md:pl-16">
<div class="relative z-10 rounded-xl p-6 bg-gradient-to-br from-blue-600/10 to-transparent border border-blue-600/20 shadow-lg backdrop-blur-sm">
<span class="text-blue-600 font-bold tracking-wider text-sm uppercase">Vision 愿景领航</span>
<h4 class="text-xl font-bold mt-3 mb-2 flex items-center gap-3 text-blue-600">
<img src="img/timeline-vision-icon.webp" alt="icon" class="w-7 h-7 object-contain">
全场景产业数字化转型服务商
</h4>
<p class="text-gray-600 text-base leading-relaxed">以技术驱动产业数字化升级,以平台构建多模态安全场景赋能</p>
</div>
</div>
</div>
</div>
</div>
</div>