beifan/company-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: beifan:cb1490d5a28ef5ff206dca228712df56be29c3b4
Branches Tags
beifan:main
...
compare: beifan:169b8f929f21051481413cdb1e23fed935e69901
Branches Tags
beifan:main

2 Commits
cb1490d5a2 ... 169b8f929f

Author SHA1 Message Date
ZHENG XIAOYI
169b8f929f refactor: overhaul UI architecture 2026-02-11 18:44:07 +08:00
ZHENG XIAOYI
e26b2c7d9c feat: add count-up animation for homepage statistics 2026-02-11 14:16:07 +08:00
19 changed files with 340 additions and 444 deletions
Expand all files Collapse all files

1
.astro/types.d.ts vendored
View File

@@ -1 +1,2 @@
/// <reference types="astro/client" /> /// <reference types="astro/client" />
/// <reference path="content.d.ts" />

BIN
public/img/cooperation-process.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

BIN
public/img/official-traceability.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

BIN
public/img/official-xiaohongshu.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 54 KiB

BIN
public/img/partner-search.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 54 KiB

BIN
public/img/shake-hands.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 82 KiB

6
src/components/sections/AIModel.astro
View File

@@ -318,8 +318,8 @@
技术对比：从固定规则到深度理解 技术对比：从固定规则到深度理解
</h3> </h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16"> <div class="grid grid-cols-1 md:grid-cols-2 mb-16">
<div class="space-y-6"> <div class="space-y-6 bg-orange-50 p-6">
<div class="flex items-center gap-3 mb-6"> <div class="flex items-center gap-3 mb-6">
<div class="w-10 h-10 bg-orange-500 rounded-xl flex items-center justify-center"> <div class="w-10 h-10 bg-orange-500 rounded-xl flex items-center justify-center">
<i class="fa fa-times text-white text-lg"></i> <i class="fa fa-times text-white text-lg"></i>
@@ -349,7 +349,7 @@
</div> </div>
</div> </div>
<div class="space-y-6"> <div class="space-y-6 bg-blue-50 p-6">
<div class="flex items-center gap-3 mb-6"> <div class="flex items-center gap-3 mb-6">
<div class="w-10 h-10 bg-blue-600 rounded-xl flex items-center justify-center"> <div class="w-10 h-10 bg-blue-600 rounded-xl flex items-center justify-center">
<i class="fa fa-check text-white text-lg"></i> <i class="fa fa-check text-white text-lg"></i>

2
src/components/sections/AccidentCases.astro
View File

@@ -1,6 +1,6 @@
--- ---
--- ---
<section class="py-0 md:py-16 bg-slate-50 overflow-hidden"> <section class="pt-0 md:pt-16 bg-slate-50 overflow-hidden">
<div class="max-w-7xl mx-auto relative"> <div class="max-w-7xl mx-auto relative">
<div class="text-center mb-12 relative"> <div class="text-center mb-12 relative">

50
src/components/sections/CompanyIntro.astro
View File

@@ -1,13 +1,12 @@
<section id="about-us" class="bg-slate-50"> <section id="about-us" class="bg-slate-50">
<div class="relative pb-20"> <div class="relative pt-16 pb-0">
<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="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 mb-12"> <div class="text-center mb-12">
<h3 class="text-3xl md:text-5xl font-black text-gray-900 tracking-tight"> <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> <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600">公司介绍</span>
</h3> </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 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="max-w-7xl mx-auto px-4 lg:px-0"> <div class="max-w-7xl mx-auto px-4 lg:px-0">
<div class="relative mb-16"> <div class="relative mb-16">
<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="absolute inset-0 bg-gradient-to-r from-blue-400 via-blue-400 to-blue-400 rounded-3xl blur-3xl opacity-30"></div>
@@ -35,51 +34,6 @@
</div> </div>
</div> </div>
<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 class="grid grid-cols-2 md:grid-cols-4 gap-6">
<div class="relative group">
<div class="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-blue-600/5 rounded-2xl blur-xl group-hover:blur-2xl transition-all duration-300"></div>
<div class="relative bg-gradient-to-br from-white to-blue-50/30 rounded-2xl p-6 border border-blue-100/50 shadow-lg group-hover:shadow-blue-500/20 group-hover:scale-[1.02] transition-all duration-300">
<div class="text-center">
<div class="text-4xl md:text-5xl lg:text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-blue-700 mb-3 group-hover:scale-110 transition-transform duration-300">700+</div>
<div class="text-gray-700 text-sm md:text-base font-medium">视觉理解大模型</div>
</div>
</div>
</div>
<div class="relative group">
<div class="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-blue-600/5 rounded-2xl blur-xl group-hover:blur-2xl transition-all duration-300"></div>
<div class="relative bg-gradient-to-br from-white to-blue-50/30 rounded-2xl p-6 border border-blue-100/50 shadow-lg group-hover:shadow-blue-500/20 group-hover:scale-[1.02] transition-all duration-300">
<div class="text-center">
<div class="text-4xl md:text-5xl lg:text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-blue-700 mb-3 group-hover:scale-110 transition-transform duration-300">99.9%</div>
<div class="text-gray-700 text-sm md:text-base font-medium">SLA 可用性</div>
</div>
</div>
</div>
<div class="relative group">
<div class="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-blue-600/5 rounded-2xl blur-xl group-hover:blur-2xl transition-all duration-300"></div>
<div class="relative bg-gradient-to-br from-white to-blue-50/30 rounded-2xl p-6 border border-blue-100/50 shadow-lg group-hover:shadow-blue-500/20 group-hover:scale-[1.02] transition-all duration-300">
<div class="text-center">
<div class="text-4xl md:text-5xl lg:text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-blue-700 mb-3 group-hover:scale-110 transition-transform duration-300">15+</div>
<div class="text-gray-700 text-sm md:text-base font:medium">合作伙伴</div>
</div>
</div>
</div>
<div class="relative group">
<div class="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-blue-600/5 rounded-2xl blur-xl group-hover:blur-2xl transition-all duration-300"></div>
<div class="relative bg-gradient-to-br from-white to-blue-50/30 rounded-2xl p-6 border border-blue-100/50 shadow-lg group-hover:shadow-blue-500/20 group-hover:scale-[1.02] transition-all duration-300">
<div class="text-center">
<div class="text-4xl md:text-5xl lg:text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-blue-700 mb-3 group-hover:scale-110 transition-transform duration-300">40+</div>
<div class="text-gray-700 text-sm md:text-base font-medium">软著专利</div>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</section> </section>

4
src/components/sections/Customization.astro
View File

@@ -257,8 +257,8 @@
<span class="text-indigo-600 text-sm font-black tracking-[0.2em] uppercase">Industry Scale</span> <span class="text-indigo-600 text-sm font-black tracking-[0.2em] uppercase">Industry Scale</span>
</div> </div>
<h4 class="text-4xl md:text-5xl font-black text-gray-900 tracking-tighter leading-tight"> <h4 class="text-4xl md:text-5xl font-black text-gray-900 tracking-tighter leading-tight">
全场景<br /> 定制覆盖<br />
<span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-blue-600">定制覆盖</span> <span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-blue-600">更多场景</span>
</h4> </h4>
</div> </div>

97
src/components/sections/DataVisualization.astro Normal file
View File

@@ -0,0 +1,97 @@
<section id="data-visualization" class="bg-slate-50">
<div class="max-w-7xl mx-auto px-4 lg:px-0 py-20">
<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 class="grid grid-cols-2 md:grid-cols-4 gap-6">
<div class="relative group">
<div class="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-blue-600/5 rounded-2xl blur-xl group-hover:blur-2xl transition-all duration-300"></div>
<div class="relative bg-gradient-to-br from-white to-blue-50/30 rounded-2xl p-6 border border-blue-100/50 shadow-lg group-hover:shadow-blue-500/20 group-hover:scale-[1.02] transition-all duration-300">
<div class="text-center">
<div class="text-4xl md:text-5xl lg:text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-blue-700 mb-3 group-hover:scale-110 transition-transform duration-300 counter" data-target="700" data-suffix="+">0+</div>
<div class="text-gray-700 text-sm md:text-base font-medium">视觉理解大模型</div>
</div>
</div>
</div>
<div class="relative group">
<div class="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-blue-600/5 rounded-2xl blur-xl group-hover:blur-2xl transition-all duration-300"></div>
<div class="relative bg-gradient-to-br from-white to-blue-50/30 rounded-2xl p-6 border border-blue-100/50 shadow-lg group-hover:shadow-blue-500/20 group-hover:scale-[1.02] transition-all duration-300">
<div class="text-center">
<div class="text-4xl md:text-5xl lg:text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-blue-700 mb-3 group-hover:scale-110 transition-transform duration-300 counter" data-target="99.9" data-suffix="%">0%</div>
<div class="text-gray-700 text-sm md:text-base font-medium">SLA 可用性</div>
</div>
</div>
</div>
<div class="relative group">
<div class="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-blue-600/5 rounded-2xl blur-xl group-hover:blur-2xl transition-all duration-300"></div>
<div class="relative bg-gradient-to-br from-white to-blue-50/30 rounded-2xl p-6 border border-blue-100/50 shadow-lg group-hover:shadow-blue-500/20 group-hover:scale-[1.02] transition-all duration-300">
<div class="text-center">
<div class="text-4xl md:text-5xl lg:text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-blue-700 mb-3 group-hover:scale-110 transition-transform duration-300 counter" data-target="15" data-suffix="+">0+</div>
<div class="text-gray-700 text-sm md:text-base font:medium">合作伙伴</div>
</div>
</div>
</div>
<div class="relative group">
<div class="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-blue-600/5 rounded-2xl blur-xl group-hover:blur-2xl transition-all duration-300"></div>
<div class="relative bg-gradient-to-br from-white to-blue-50/30 rounded-2xl p-6 border border-blue-100/50 shadow-lg group-hover:shadow-blue-500/20 group-hover:scale-[1.02] transition-all duration-300">
<div class="text-center">
<div class="text-4xl md:text-5xl lg:text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-blue-700 mb-3 group-hover:scale-110 transition-transform duration-300 counter" data-target="40" data-suffix="+">0+</div>
<div class="text-gray-700 text-sm md:text-base font-medium">软著专利</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script>
(function() {
const counters = document.querySelectorAll('.counter');
const duration = 2000;
let animated = false;
function animateCounter(counter: Element) {
const target = parseFloat(counter.getAttribute('data-target') || '0');
const suffix = counter.getAttribute('data-suffix') || '';
const isDecimal = target % 1 !== 0;
const startTime = performance.now();
const startValue = 0;
function update(currentTime: number) {
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1);
const easeOutQuart = 1 - Math.pow(1 - progress, 4);
const currentValue = startValue + (target - startValue) * easeOutQuart;
if (isDecimal) {
counter.textContent = currentValue.toFixed(1) + suffix;
} else {
counter.textContent = Math.floor(currentValue) + suffix;
}
if (progress < 1) {
requestAnimationFrame(update);
}
}
requestAnimationFrame(update);
}
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting && !animated) {
animated = true;
counters.forEach(animateCounter);
}
});
}, { threshold: 0.3 });
counters.forEach((counter) => {
observer.observe(counter);
});
})();
</script>

2
src/components/sections/DevelopmentHistory.astro
View File

@@ -1,5 +1,5 @@
<section id="timeline" class="bg-slate-50"> <section id="timeline" class="bg-slate-50">
<div class="max-w-7xl mx-auto px-4 lg:px-0 py-20"> <div class="max-w-7xl mx-auto px-4 lg:px-0 pb-0">
<div class="text-center mb-16"> <div class="text-center mb-16">
<h3 class="text-3xl md:text-5xl font-black text-gray-900 tracking-tight"> <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> <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600">发展历程</span>

7
src/components/sections/Footer.astro
View File

@@ -39,17 +39,18 @@
<div class="group relative flex flex-col items-center space-y-2 cursor-pointer"> <div class="group relative flex flex-col items-center space-y-2 cursor-pointer">
<div class="bg-white p-1 rounded-lg inline-block shadow-lg transition-transform duration-300 group-hover:scale-110"> <div class="bg-white p-1 rounded-lg inline-block shadow-lg transition-transform duration-300 group-hover:scale-110">
<img src="/img/official-xiaohongshu.jpg" alt="企业小红书" class="w-16 h-16 rounded-md"> <img src="/img/official-traceability.jpg" alt="企业溯源码" class="w-16 h-16 rounded-md">
</div> </div>
<p class="text-sm text-gray-400">企业小红书</p> <p class="text-sm text-gray-400">企业溯源码</p>
<div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-4 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50"> <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-4 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50">
<div class="bg-white p-3 rounded-xl shadow-[0_10px_30px_rgba(0,0,0,0.5)] border-2 border-blue-500 w-48 text-center"> <div class="bg-white p-3 rounded-xl shadow-[0_10px_30px_rgba(0,0,0,0.5)] border-2 border-blue-500 w-48 text-center">
<img src="/img/official-xiaohongshu.jpg" alt="企业小红书大图" class="w-full h-auto rounded-lg mb-2"> <img src="/img/official-traceability.jpg" alt="企业溯源码大图" class="w-full h-auto rounded-lg mb-2">
<div class="absolute top-full left-1/2 -translate-x-1/2 w-0 h-0 border-l-[8px] border-l-transparent border-r-[8px] border-r-transparent border-t-[8px] border-t-white"></div> <div class="absolute top-full left-1/2 -translate-x-1/2 w-0 h-0 border-l-[8px] border-l-transparent border-r-[8px] border-r-transparent border-t-[8px] border-t-white"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>

26
src/components/sections/Honors.astro
View File

@@ -4,7 +4,7 @@
<div class="max-w-7xl mx-auto px-4 lg:px-0"> <div class="max-w-7xl mx-auto px-4 lg:px-0">
<div> <div>
<div class="mb-16 relative"> <div class="mb-16 relative">
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-64 h-64 bg-blue-200/30 blur-3xl rounded-full -z-10"></div> <div class="absolute top-0 left-1/2 -translate-x-1/2 w-64 h-64 bg-blue-200/30 blur-3xl rounded-full -z-10"></div>
<div class="text-center"> <div class="text-center">
<h3 class="text-3xl md:text-5xl font-black text-gray-900 tracking-tight"> <h3 class="text-3xl md:text-5xl font-black text-gray-900 tracking-tight">
@@ -16,51 +16,51 @@
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6 items-center"> <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6 items-center">
<div class="p-4 bg-white rounded-lg shadow-md flex flex-col justify-center items-center h-32 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 space-y-3 border border-blue-100/50"> <div class="p-4 bg-white rounded-lg shadow-md flex flex-col justify-center items-center h-32 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 space-y-3 border border-blue-100/50">
<img src="/img/partner-cmcc.webp" alt="中国移动 logo" class="max-h-12 w-auto"> <img src="/img/partner-cmcc.webp" alt="中国移动 logo" class="max-h-12 w-auto">
<p class="text-sm font-semibold text-gray-700">中国移动</p> <p class="text-base font-semibold text-gray-700">中国移动</p>
</div> </div>
<div class="p-4 bg-white rounded-lg shadow-md flex flex-col justify-center items-center h-32 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 space-y-3 border border-blue-100/50"> <div class="p-4 bg-white rounded-lg shadow-md flex flex-col justify-center items-center h-32 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 space-y-3 border border-blue-100/50">
<img src="/img/partner-ct.webp" alt="中国电信 logo" class="max-h-12 w-auto"> <img src="/img/partner-ct.webp" alt="中国电信 logo" class="max-h-12 w-auto">
<p class="text-sm font-semibold text-gray-700">中国电信</p> <p class="text-base font-semibold text-gray-700">中国电信</p>
</div> </div>
<div class="p-4 bg-white rounded-lg shadow-md flex flex-col justify-center items-center h-32 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 space-y-3 border border-blue-100/50"> <div class="p-4 bg-white rounded-lg shadow-md flex flex-col justify-center items-center h-32 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 space-y-3 border border-blue-100/50">
<img src="/img/partner-inspur.webp" alt="浪潮 inspur logo" class="max-h-12 w-auto"> <img src="/img/partner-inspur.webp" alt="浪潮 inspur logo" class="max-h-12 w-auto">
<p class="text-sm font-semibold text-gray-700">浪潮 inspur</p> <p class="text-base font-semibold text-gray-700">浪潮 inspur</p>
</div> </div>
<div class="p-4 bg-white rounded-lg shadow-md flex flex-col justify-center items-center h-32 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 space-y-3 border border-blue-100/50"> <div class="p-4 bg-white rounded-lg shadow-md flex flex-col justify-center items-center h-32 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 space-y-3 border border-blue-100/50">
<img src="/img/partner-hikvision.webp" alt="海康威视 logo" class="max-h-12 w-auto"> <img src="/img/partner-hikvision.webp" alt="海康威视 logo" class="max-h-12 w-auto">
<p class="text-sm font-semibold text-gray-700">海康威视</p> <p class="text-base font-semibold text-gray-700">海康威视</p>
</div> </div>
<div class="p-4 bg-white rounded-lg shadow-md flex flex-col justify-center items-center h-32 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 space-y-3 border border-blue-100/50"> <div class="p-4 bg-white rounded-lg shadow-md flex flex-col justify-center items-center h-32 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 space-y-3 border border-blue-100/50">
<img src="/img/grid.webp" alt="国家电网 logo" class="max-h-12 w-auto"> <img src="/img/grid.webp" alt="国家电网 logo" class="max-h-12 w-auto">
<p class="text-sm font-semibold text-gray-700">国家电网</p> <p class="text-base font-semibold text-gray-700">国家电网</p>
</div> </div>
<div class="p-4 bg-white rounded-lg shadow-md flex flex-col justify-center items-center h-32 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 space-y-3 border border-blue-100/50"> <div class="p-4 bg-white rounded-lg shadow-md flex flex-col justify-center items-center h-32 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 space-y-3 border border-blue-100/50">
<img src="/img/partner-aliyun.webp" alt="阿里云 logo" class="max-h-12 w-auto"> <img src="/img/partner-aliyun.webp" alt="阿里云 logo" class="max-h-12 w-auto">
<p class="text-sm font-semibold text-gray-700">阿里云</p> <p class="text-base font-semibold text-gray-700">阿里云</p>
</div> </div>
<div class="p-4 bg-white rounded-lg shadow-md flex flex-col justify-center items-center h-32 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 space-y-3 border border-blue-100/50"> <div class="p-4 bg-white rounded-lg shadow-md flex flex-col justify-center items-center h-32 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 space-y-3 border border-blue-100/50">
<img src="/img/partner-amap.webp" alt="高德地图 logo" class="max-h-12 w-auto"> <img src="/img/partner-amap.webp" alt="高德地图 logo" class="max-h-12 w-auto">
<p class="text-sm font-semibold text-gray-700">高德地图</p> <p class="text-base font-semibold text-gray-700">高德地图</p>
</div> </div>
<div class="p-4 bg-white rounded-lg shadow-md flex flex-col justify-center items-center h-32 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 space-y-3 border border-blue-100/50"> <div class="p-4 bg-white rounded-lg shadow-md flex flex-col justify-center items-center h-32 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 space-y-3 border border-blue-100/50">
<img src="/img/partner-zjtd.webp" alt="字节跳动 logo" class="max-h-12 w-auto"> <img src="/img/partner-zjtd.webp" alt="字节跳动 logo" class="max-h-12 w-auto">
<p class="text-sm font-semibold text-gray-700">字节跳动</p> <p class="text-base font-semibold text-gray-700">字节跳动</p>
</div> </div>
<div class="p-4 bg-white rounded-lg shadow-md flex flex-col justify-center items-center h-32 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 space-y-3 border border-blue-100/50"> <div class="p-4 bg-white rounded-lg shadow-md flex flex-col justify-center items-center h-32 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 space-y-3 border border-blue-100/50">
<img src="/img/partner-cu.webp" alt="中国联通 logo" class="max-h-12 w-auto"> <img src="/img/partner-cu.webp" alt="中国联通 logo" class="max-h-12 w-auto">
<p class="text-sm font-semibold text-gray-700">中国联通</p> <p class="text-base font-semibold text-gray-700">中国联通</p>
</div> </div>
<div class="p-4 bg-white rounded-lg shadow-md flex flex-col justify-center items-center h-32 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 space-y-3 border border-blue-100/50"> <div class="p-4 bg-white rounded-lg shadow-md flex flex-col justify-center items-center h-32 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 space-y-3 border border-blue-100/50">
<img src="/img/hr.webp" alt="虹润 logo" class="max-h-12 w-auto"> <img src="/img/hr.webp" alt="虹润 logo" class="max-h-12 w-auto">
<p class="text-sm font-semibold text-gray-700">虹润</p> <p class="text-base font-semibold text-gray-700">虹润</p>
</div> </div>
<div class="p-4 bg-white rounded-lg shadow-md flex flex-col justify-center items-center h-32 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 space-y-3 border border-blue-100/50"> <div class="p-4 bg-white rounded-lg shadow-md flex flex-col justify-center items-center h-32 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 space-y-3 border border-blue-100/50">
<img src="/img/partner-tencent.webp" alt="腾讯 logo" class="max-h-12 w-auto"> <img src="/img/partner-tencent.webp" alt="腾讯 logo" class="max-h-12 w-auto">
<p class="text-sm font-semibold text-gray-700">腾讯</p> <p class="text-base font-semibold text-gray-700">腾讯</p>
</div> </div>
<div class="p-4 bg-white rounded-lg shadow-md flex flex-col justify-center items-center h-32 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 space-y-3 border border-blue-100/50"> <div class="p-4 bg-white rounded-lg shadow-md flex flex-col justify-center items-center h-32 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 space-y-3 border border-blue-100/50">
<img src="/img/partner-doubao.webp" alt="豆包 logo" class="max-h-12 w-auto"> <img src="/img/partner-doubao.webp" alt="豆包 logo" class="max-h-12 w-auto">
<p class="text-sm font-semibold text-gray-700">豆包</p> <p class="text-base font-semibold text-gray-700">豆包</p>
</div> </div>
</div> </div>
</div> </div>

391
src/components/sections/Partnership.astro
View File

@@ -6,208 +6,231 @@
<div class="space-y-16"> <div class="space-y-16">
<!-- 合作优势 -->
<div class="bg-gradient-to-br from-white to-blue-50 rounded-3xl shadow-xl border border-blue-100 transition-all duration-300 hover:shadow-2xl">
<!-- 图片部分 -->
<div class="relative">
<div class="absolute inset-0 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-t-3xl blur-xl"></div>
<div class="relative bg-white rounded-t-3xl overflow-hidden">
<div class="h-48 md:h-64 overflow-hidden">
<img src="/img/shake-hands.webp" alt="携手合作，共创未来，共享市场红利" class="w-full h-full object-cover transform hover:scale-110 transition-transform duration-700">
</div>
<div class="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent"></div>
<div class="absolute bottom-0 left-0 right-0 p-8 text-white">
<h4 class="text-2xl md:text-3xl font-bold mb-2">携手合作，共创未来，共享市场红利</h4>
</div>
</div>
</div>
<!-- 内容部分 -->
<div class="p-8 md:p-12">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-white rounded-2xl p-6 border border-blue-100 shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mb-5">
<i class="fa fa-map-marker text-blue-600 text-xl"></i>
</div>
<h4 class="text-xl font-bold text-gray-900 mb-3">城市独家</h4>
<p class="text-gray-600 text-base">每个城市仅设一家合作伙伴，确保市场空间和利润最大化</p>
</div>
<!-- 合作优势 --> <div class="bg-white rounded-2xl p-6 border border-blue-100 shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
<div class="bg-gradient-to-br from-white to-blue-50 rounded-3xl shadow-xl p-8 md:p-12 border border-blue-100 transition-all duration-300 hover:shadow-2xl"> <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mb-5">
<div class="text-center mb-12"> <i class="fa fa-bullhorn text-blue-600 text-xl"></i>
<div class="w-20 h-20 mx-auto bg-gradient-to-r from-blue-600 to-indigo-600 rounded-full flex items-center justify-center mb-6 shadow-lg"> </div>
<i class="fa fa-star text-white text-4xl"></i> <h4 class="text-xl font-bold text-gray-900 mb-3">政策风口</h4>
</div> <p class="text-gray-600 text-base">紧跟国家数字化转型政策，抓住安全产业发展机遇</p>
<h3 class="text-3xl font-extrabold text-gray-900 mb-4">合作优势</h3> </div>
<p class="text-gray-600 text-lg max-w-2xl mx-auto">与我们携手，共筑安全数字化新篇章，共享万亿级市场红利</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> <div class="bg-white rounded-2xl p-6 border border-blue-100 shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
<div class="bg-white rounded-2xl p-6 border border-blue-100 shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1"> <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mb-5">
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mb-5"> <i class="fa fa-line-chart text-blue-600 text-xl"></i>
<i class="fa fa-map-marker text-blue-600 text-xl"></i> </div>
</div> <h4 class="text-xl font-bold text-gray-900 mb-3">市场蓝海</h4>
<h4 class="text-xl font-bold text-gray-900 mb-3">城市独家</h4> <p class="text-gray-600 text-base">安全数字化市场仍处于蓝海阶段，增长空间巨大</p>
<p class="text-gray-600 text-base">每个城市仅设一家合作伙伴，确保市场空间和利润最大化</p> </div>
</div>
<div class="bg-white rounded-2xl p-6 border border-blue-100 shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1"> <div class="bg-white rounded-2xl p-6 border border-blue-100 shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mb-5"> <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mb-5">
<i class="fa fa-bullhorn text-blue-600 text-xl"></i> <i class="fa fa-lightbulb-o text-blue-600 text-xl"></i>
</div> </div>
<h4 class="text-xl font-bold text-gray-900 mb-3">政策风口</h4> <h4 class="text-xl font-bold text-gray-900 mb-3">轻资产运营</h4>
<p class="text-gray-600 text-base">紧跟国家数字化转型政策，抓住安全产业发展机遇</p> <p class="text-gray-600 text-base">无需大量固定资产投入，低风险高回报的商业模式</p>
</div> </div>
<div class="bg-white rounded-2xl p-6 border border-blue-100 shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1"> <div class="bg-white rounded-2xl p-6 border border-blue-100 shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mb-5"> <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mb-5">
<i class="fa fa-line-chart text-blue-600 text-xl"></i> <i class="fa fa-sitemap text-blue-600 text-xl"></i>
</div> </div>
<h4 class="text-xl font-bold text-gray-900 mb-3">市场蓝海</h4> <h4 class="text-xl font-bold text-gray-900 mb-3">无边界客群池</h4>
<p class="text-gray-600 text-base">安全数字化市场仍处于蓝海阶段，增长空间巨大</p> <p class="text-gray-600 text-base">覆盖全行业企业客户，客群无边界，市场潜力无限</p>
</div> </div>
<div class="bg-white rounded-2xl p-6 border border-blue-100 shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1"> <div class="bg-white rounded-2xl p-6 border border-blue-100 shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mb-5"> <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mb-5">
<i class="fa fa-lightbulb-o text-blue-600 text-xl"></i> <i class="fa fa-cubes text-blue-600 text-xl"></i>
</div> </div>
<h4 class="text-xl font-bold text-gray-900 mb-3">轻资产运营</h4> <h4 class="text-xl font-bold text-gray-900 mb-3">全链路赋能</h4>
<p class="text-gray-600 text-base">无需大量固定资产投入，低风险高回报的商业模式</p> <p class="text-gray-600 text-base">提供产品培训、技术支持、营销指导等全方位赋能</p>
</div> </div>
<div class="bg-white rounded-2xl p-6 border border-blue-100 shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1"> <div class="bg-white rounded-2xl p-6 border border-blue-100 shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mb-5"> <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mb-5">
<i class="fa fa-sitemap text-blue-600 text-xl"></i> <i class="fa fa-diamond text-blue-600 text-xl"></i>
</div> </div>
<h4 class="text-xl font-bold text-gray-900 mb-3">无边界客群池</h4> <h4 class="text-xl font-bold text-gray-900 mb-3">管道收益</h4>
<p class="text-gray-600 text-base">覆盖全行业企业客户，客群无边界，市场潜力无限</p> <p class="text-gray-600 text-base">享受长期管道收益，一次开发客户，持续受益</p>
</div> </div>
<div class="bg-white rounded-2xl p-6 border border-blue-100 shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1"> <div class="bg-white rounded-2xl p-6 border border-blue-100 shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mb-5"> <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mb-5">
<i class="fa fa-cubes text-blue-600 text-xl"></i> <i class="fa fa-shield text-blue-600 text-xl"></i>
</div> </div>
<h4 class="text-xl font-bold text-gray-900 mb-3">全链路赋能</h4> <h4 class="text-xl font-bold text-gray-900 mb-3">持续迭代</h4>
<p class="text-gray-600 text-base">提供产品培训、技术支持、营销指导等全方位赋能</p> <p class="text-gray-600 text-base">产品持续迭代升级，紧跟市场需求变化，保持核心竞争力</p>
</div> </div>
</div>
<div class="bg-white rounded-2xl p-6 border border-blue-100 shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1"> </div>
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mb-5"> </div>
<i class="fa fa-diamond text-blue-600 text-xl"></i>
</div>
<h4 class="text-xl font-bold text-gray-900 mb-3">管道收益</h4>
<p class="text-gray-600 text-base">享受长期管道收益，一次开发客户，持续受益</p>
</div>
<div class="bg-white rounded-2xl p-6 border border-blue-100 shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mb-5">
<i class="fa fa-shield text-blue-600 text-xl"></i>
</div>
<h4 class="text-xl font-bold text-gray-900 mb-3">技术领先</h4>
<p class="text-gray-600 text-base">依托AI视觉大模型技术，产品竞争力强，市场认可度高</p>
</div>
</div>
</div>
<!-- 目标招商对象 --> <!-- 目标招商对象 -->
<div class="bg-gradient-to-br from-white to-indigo-50 rounded-3xl shadow-xl p-8 md:p-12 border border-indigo-100 transition-all duration-300 hover:shadow-2xl"> <div class="bg-gradient-to-br from-white to-blue-50 rounded-3xl shadow-xl border border-blue-100 transition-all duration-300 hover:shadow-2xl">
<div class="text-center mb-12"> <!-- 图片部分 -->
<div class="w-20 h-20 mx-auto bg-gradient-to-r from-indigo-600 to-purple-600 rounded-full flex items-center justify-center mb-6 shadow-lg"> <div class="relative">
<i class="fa fa-handshake-o text-white text-4xl"></i> <div class="absolute inset-0 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-t-3xl blur-xl"></div>
</div> <div class="relative bg-white rounded-t-3xl overflow-hidden">
<h3 class="text-3xl font-extrabold text-gray-900 mb-4">我们需要找的合作伙伴</h3> <div class="h-48 md:h-64 overflow-hidden">
<p class="text-gray-600 text-lg max-w-2xl mx-auto">寻找志同道合的合作伙伴，共同开创安全数字化新时代</p> <img src="/img/partner-search.webp" alt="我们需要找的合作伙伴" class="w-full h-full object-cover transform hover:scale-110 transition-transform duration-700">
</div> </div>
<div class="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent"></div>
<div class="absolute bottom-0 left-0 right-0 p-8 text-white">
<h4 class="text-2xl md:text-3xl font-bold mb-2">我们需要找的合作伙伴</h4>
</div>
</div>
</div>
<!-- 内容部分 -->
<div class="p-8 md:p-12">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="bg-white rounded-2xl p-7 border border-blue-100 shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
<div class="flex items-start gap-4 mb-5">
<div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
<span class="text-blue-600 font-bold text-xl">1</span>
</div>
<h4 class="text-xl font-bold text-gray-900">本地资源代理商</h4>
</div>
<div class="flex flex-wrap gap-2 mb-4">
<span class="text-base font-medium px-3 py-1 rounded-full bg-blue-200 text-blue-800">区域代理商</span>
<span class="text-base font-medium px-3 py-1 rounded-full bg-blue-200 text-blue-800">渠道合作伙伴</span>
<span class="text-base font-medium px-3 py-1 rounded-full bg-blue-200 text-blue-800">本地资源商</span>
<span class="text-base font-medium px-3 py-1 rounded-full bg-blue-200 text-blue-800">行业协会</span>
</div>
<p class="text-gray-600 text-base">手握本地企业资源，熟悉当地市场，可以通过代理商加盟模式与我们合作，共同推广产品。</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8"> <div class="bg-white rounded-2xl p-7 border border-blue-100 shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
<div class="bg-white rounded-2xl p-7 border border-indigo-100 shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1"> <div class="flex items-start gap-4 mb-5">
<div class="flex items-start gap-4 mb-5"> <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
<div class="w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center flex-shrink-0"> <span class="text-blue-600 font-bold text-xl">2</span>
<span class="text-indigo-600 font-bold text-xl">1</span> </div>
</div> <h4 class="text-xl font-bold text-gray-900">行业领域专家</h4>
<h4 class="text-xl font-bold text-gray-900">本地资源代理商</h4> </div>
</div> <div class="flex flex-wrap gap-2 mb-4">
<div class="flex flex-wrap gap-2 mb-4"> <span class="text-base font-medium px-3 py-1 rounded-full bg-blue-200 text-blue-800">化工行业专家</span>
<span class="text-xs font-medium px-3 py-1 rounded-full bg-indigo-200 text-indigo-800">区域代理商</span> <span class="text-base font-medium px-3 py-1 rounded-full bg-blue-200 text-blue-800">制造业顾问</span>
<span class="text-xs font-medium px-3 py-1 rounded-full bg-indigo-200 text-indigo-800">渠道合作伙伴</span> <span class="text-base font-medium px-3 py-1 rounded-full bg-blue-200 text-blue-800">行业分析师</span>
<span class="text-xs font-medium px-3 py-1 rounded-full bg-indigo-200 text-indigo-800">本地资源商</span> <span class="text-base font-medium px-3 py-1 rounded-full bg-blue-200 text-blue-800">技术顾问</span>
<span class="text-xs font-medium px-3 py-1 rounded-full bg-indigo-200 text-indigo-800">行业协会</span> </div>
</div> <p class="text-gray-600 text-base">了解特定行业领域，如化工、制造等，具备专业知识和行业经验，能够在细分领域推广我们的产品。</p>
<p class="text-gray-600 text-base">手握本地企业资源，熟悉当地市场，可以通过代理商加盟模式与我们合作，共同推广产品。</p> </div>
</div>
<div class="bg-white rounded-2xl p-7 border border-indigo-100 shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1"> <div class="bg-white rounded-2xl p-7 border border-blue-100 shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
<div class="flex items-start gap-4 mb-5"> <div class="flex items-start gap-4 mb-5">
<div class="w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center flex-shrink-0"> <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
<span class="text-indigo-600 font-bold text-xl">2</span> <span class="text-blue-600 font-bold text-xl">3</span>
</div> </div>
<h4 class="text-xl font-bold text-gray-900">行业领域专家</h4> <h4 class="text-xl font-bold text-gray-900">园区企业负责人</h4>
</div> </div>
<div class="flex flex-wrap gap-2 mb-4"> <div class="flex flex-wrap gap-2 mb-4">
<span class="text-xs font-medium px-3 py-1 rounded-full bg-indigo-200 text-indigo-800">化工行业专家</span> <span class="text-base font-medium px-3 py-1 rounded-full bg-blue-200 text-blue-800">工厂老板</span>
<span class="text-xs font-medium px-3 py-1 rounded-full bg-indigo-200 text-indigo-800">制造业顾问</span> <span class="text-base font-medium px-3 py-1 rounded-full bg-blue-200 text-blue-800">园区负责人</span>
<span class="text-xs font-medium px-3 py-1 rounded-full bg-indigo-200 text-indigo-800">行业分析师</span> <span class="text-base font-medium px-3 py-1 rounded-full bg-blue-200 text-blue-800">企业高管</span>
<span class="text-xs font-medium px-3 py-1 rounded-full bg-indigo-200 text-indigo-800">技术顾问</span> <span class="text-base font-medium px-3 py-1 rounded-full bg-blue-200 text-blue-800">安全负责人</span>
</div> </div>
<p class="text-gray-600 text-base">了解特定行业领域，如化工、制造等，具备专业知识和行业经验，能够在细分领域推广我们的产品。</p> <p class="text-gray-600 text-base">产业园区、工厂的负责人，对安全管理有高度重视，希望通过数字化手段提升安全管理水平。</p>
</div> </div>
<div class="bg-white rounded-2xl p-7 border border-indigo-100 shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1"> <div class="bg-white rounded-2xl p-7 border border-blue-100 shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
<div class="flex items-start gap-4 mb-5"> <div class="flex items-start gap-4 mb-5">
<div class="w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center flex-shrink-0"> <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
<span class="text-indigo-600 font-bold text-xl">3</span> <span class="text-blue-600 font-bold text-xl">4</span>
</div> </div>
<h4 class="text-xl font-bold text-gray-900">园区企业负责人</h4> <h4 class="text-xl font-bold text-gray-900">数字化转型服务商</h4>
</div> </div>
<div class="flex flex-wrap gap-2 mb-4"> <div class="flex flex-wrap gap-2 mb-4">
<span class="text-xs font-medium px-3 py-1 rounded-full bg-indigo-200 text-indigo-800">工厂老板</span> <span class="text-base font-medium px-3 py-1 rounded-full bg-blue-200 text-blue-800">SaaS 服务商</span>
<span class="text-xs font-medium px-3 py-1 rounded-full bg-indigo-200 text-indigo-800">园区负责人</span> <span class="text-base font-medium px-3 py-1 rounded-full bg-blue-200 text-blue-800">软件开发商</span>
<span class="text-xs font-medium px-3 py-1 rounded-full bg-indigo-200 text-indigo-800">企业高管</span> <span class="text-base font-medium px-3 py-1 rounded-full bg-blue-200 text-blue-800">系统集成商</span>
<span class="text-xs font-medium px-3 py-1 rounded-full bg-indigo-200 text-indigo-800">安全负责人</span> <span class="text-base font-medium px-3 py-1 rounded-full bg-blue-200 text-blue-800">IT 服务商</span>
</div> </div>
<p class="text-gray-600 text-base">产业园区、工厂的负责人，对安全管理有高度重视，希望通过数字化手段提升安全管理水平。</p> <p class="text-gray-600 text-base">从事过 SaaS 化或本地化定制转型，有成熟的项目经验和方案能力，能够与我们的产品形成互补。</p>
</div> </div>
</div>
<div class="bg-white rounded-2xl p-7 border border-indigo-100 shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1"> </div>
<div class="flex items-start gap-4 mb-5"> </div>
<div class="w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center flex-shrink-0">
<span class="text-indigo-600 font-bold text-xl">4</span>
</div>
<h4 class="text-xl font-bold text-gray-900">数字化转型服务商</h4>
</div>
<div class="flex flex-wrap gap-2 mb-4">
<span class="text-xs font-medium px-3 py-1 rounded-full bg-indigo-200 text-indigo-800">SaaS 服务商</span>
<span class="text-xs font-medium px-3 py-1 rounded-full bg-indigo-200 text-indigo-800">软件开发商</span>
<span class="text-xs font-medium px-3 py-1 rounded-full bg-indigo-200 text-indigo-800">系统集成商</span>
<span class="text-xs font-medium px-3 py-1 rounded-full bg-indigo-200 text-indigo-800">IT 服务商</span>
</div>
<p class="text-gray-600 text-base">从事过 SaaS 化或本地化定制转型，有成熟的项目经验和方案能力，能够与我们的产品形成互补。</p>
</div>
</div>
</div>
<!-- 合作流程 --> <!-- 合作流程 -->
<div class="bg-gradient-to-br from-white to-purple-50 rounded-3xl shadow-xl p-8 md:p-12 border border-purple-100 transition-all duration-300 hover:shadow-2xl"> <div class="bg-gradient-to-br from-white to-blue-50 rounded-3xl shadow-xl border border-blue-100 transition-all duration-300 hover:shadow-2xl">
<div class="text-center mb-12"> <!-- 图片部分 -->
<div class="w-20 h-20 mx-auto bg-gradient-to-r from-purple-600 to-pink-600 rounded-full flex items-center justify-center mb-6 shadow-lg"> <div class="relative">
<i class="fa fa-sitemap text-white text-4xl"></i> <div class="absolute inset-0 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-t-3xl blur-xl"></div>
</div> <div class="relative bg-white rounded-t-3xl overflow-hidden">
<h3 class="text-3xl font-extrabold text-gray-900 mb-4">合作流程</h3> <div class="h-48 md:h-64 overflow-hidden">
<p class="text-gray-600 text-lg max-w-2xl mx-auto">简单高效的合作流程，快速启动您的安全数字化事业</p> <img src="/img/cooperation-process.webp" alt="合作流程" class="w-full h-full object-cover transform hover:scale-110 transition-transform duration-700">
</div> </div>
<div class="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent"></div>
<div class="absolute bottom-0 left-0 right-0 p-8 text-white">
<h4 class="text-2xl md:text-3xl font-bold mb-2">合作流程</h4>
</div>
</div>
</div>
<!-- 内容部分 -->
<div class="p-8 md:p-12">
<div class="relative">
<div class="hidden md:block absolute top-1/2 left-0 right-0 h-1 bg-blue-200 -translate-y-1/2 z-0"></div>
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 relative z-10">
<div class="flex flex-col items-center text-center bg-white rounded-2xl p-6 border border-blue-100 shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
<div class="w-16 h-16 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold text-2xl mb-5 shadow-lg">1</div>
<h4 class="text-xl font-bold text-gray-900 mb-3">咨询沟通</h4>
<p class="text-gray-600 text-base">通过电话或在线咨询，了解合作详情和条件</p>
</div>
<div class="relative"> <div class="flex flex-col items-center text-center bg-white rounded-2xl p-6 border border-blue-100 shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
<div class="hidden md:block absolute top-1/2 left-0 right-0 h-1 bg-purple-200 -translate-y-1/2 z-0"></div> <div class="w-16 h-16 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold text-2xl mb-5 shadow-lg">2</div>
<h4 class="text-xl font-bold text-gray-900 mb-3">资质审核</h4>
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 relative z-10"> <p class="text-gray-600 text-base">提交合作申请，总部对资质进行审核评估</p>
<div class="flex flex-col items-center text-center bg-white rounded-2xl p-6 border border-purple-100 shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1"> </div>
<div class="w-16 h-16 bg-purple-600 text-white rounded-full flex items-center justify-center font-bold text-2xl mb-5 shadow-lg">1</div>
<h4 class="text-xl font-bold text-gray-900 mb-3">咨询沟通</h4>
<p class="text-gray-600 text-base">通过电话或在线咨询，了解合作详情和条件</p>
</div>
<div class="flex flex-col items-center text-center bg-white rounded-2xl p-6 border border-purple-100 shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1"> <div class="flex flex-col items-center text-center bg-white rounded-2xl p-6 border border-blue-100 shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
<div class="w-16 h-16 bg-purple-600 text-white rounded-full flex items-center justify-center font-bold text-2xl mb-5 shadow-lg">2</div> <div class="w-16 h-16 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold text-2xl mb-5 shadow-lg">3</div>
<h4 class="text-xl font-bold text-gray-900 mb-3">资质审核</h4> <h4 class="text-xl font-bold text-gray-900 mb-3">签约合作</h4>
<p class="text-gray-600 text-base">提交合作申请，总部对资质进行审核评估</p> <p class="text-gray-600 text-base">双方达成一致，签署正式合作协议</p>
</div> </div>
<div class="flex flex-col items-center text-center bg-white rounded-2xl p-6 border border-purple-100 shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1"> <div class="flex flex-col items-center text-center bg-white rounded-2xl p-6 border border-blue-100 shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
<div class="w-16 h-16 bg-purple-600 text-white rounded-full flex items-center justify-center font-bold text-2xl mb-5 shadow-lg">3</div> <div class="w-16 h-16 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold text-2xl mb-5 shadow-lg">4</div>
<h4 class="text-xl font-bold text-gray-900 mb-3">签约合作</h4> <h4 class="text-xl font-bold text-gray-900 mb-3">培训启动</h4>
<p class="text-gray-600 text-base">双方达成一致，签署正式合作协议</p> <p class="text-gray-600 text-base">接受产品培训和技术指导，正式启动业务</p>
</div> </div>
</div>
</div>
<div class="flex flex-col items-center text-center bg-white rounded-2xl p-6 border border-purple-100 shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1"> <div class="text-center mt-16">
<div class="w-16 h-16 bg-purple-600 text-white rounded-full flex items-center justify-center font-bold text-2xl mb-5 shadow-lg">4</div> <div class="inline-flex items-center gap-3 px-8 py-4 bg-blue-600 text-white rounded-full font-bold text-xl shadow-lg hover:bg-blue-700 hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
<h4 class="text-xl font-bold text-gray-900 mb-3">培训启动</h4> <i class="fa fa-phone"></i>
<p class="text-gray-600 text-base">接受产品培训和技术指导，正式启动业务</p> <a href="tel:400-998-5710" class="text-white hover:text-white">立即拨打 400-998-5710</a>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="text-center mt-16">
<div class="inline-flex items-center gap-3 px-8 py-4 bg-purple-600 text-white rounded-full font-bold text-xl shadow-lg hover:bg-purple-700 hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
<i class="fa fa-phone"></i>
<a href="tel:400-998-5710" class="text-white hover:text-white">立即拨打 400-998-5710</a>
</div>
</div>
</div>
</div> </div>
</div> </div>

2
src/components/sections/Policy.astro
View File

@@ -66,7 +66,7 @@
</div> </div>
</div> </div>
<div id="policy-container" class="flex md:grid md:grid-cols-3 lg:grid-cols-5 gap-6 overflow-x-auto pb-12 snap-x no-scrollbar"> <div id="policy-container" class="flex md:grid md:grid-cols-3 lg:grid-cols-5 gap-6 overflow-x-auto snap-x no-scrollbar">
<div class="min-w-[280px] md:min-w-0 snap-center group"> <div class="min-w-[280px] md:min-w-0 snap-center group">
<div class="bg-white rounded-[1.8rem] p-4 border border-slate-100 shadow-sm hover:shadow-xl hover:border-red-200 transition-all duration-300 flex flex-col h-full"> <div class="bg-white rounded-[1.8rem] p-4 border border-slate-100 shadow-sm hover:shadow-xl hover:border-red-200 transition-all duration-300 flex flex-col h-full">

5
src/components/sections/SaaS.astro
View File

@@ -45,7 +45,10 @@
</div> </div>
<p class="text-sm md:text-base text-gray-500 mb-6 border-b border-gray-100 pb-4 inline-block">由浙江贝凡网络科技提供云和AI服务</p> <p class="text-sm md:text-base text-gray-500 mb-6 border-b border-gray-100 pb-4 inline-block">由浙江贝凡网络科技提供云和AI服务</p>
<p class="text-gray-700 text-lg md:text-xl leading-relaxed"> <p class="text-gray-700 text-lg md:text-xl leading-relaxed">
<strong class="text-blue-600 font-extrabold">企安智控</strong>是浙江贝凡自主研发的全场景智能安全管理 SaaS 系统，专注为全国生产制造型企业、产业园区、酒店餐饮、物业楼宇、仓储物流等场景，提供<strong class="text-blue-600 font-extrabold">数字化安全管理解决方案</strong>。 <strong class="text-blue-600 font-extrabold">企安智控</strong>是浙江贝凡自主研发的全场景智能安全管理 SaaS 系统，专注为全国工贸企业、产业园区、酒店餐饮、物业楼宇、仓储物流等场景，提供<strong class="text-blue-600 font-extrabold">数字化安全管理解决方案</strong>。
</p>
<p class="text-gray-700 text-lg md:text-xl leading-relaxed mt-4">
系统采用 SaaS 化部署模式，具有<span class="text-blue-600 font-extrabold">无需重复定制、节省成本、部署快速</span>等优势，让企业能够快速实现安全管理数字化转型。
</p> </p>
</div> </div>
</div> </div>

185
src/components/sections/Timeline.astro
View File

@@ -1,185 +0,0 @@
<section id="timeline" class="bg-slate-50">
<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 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 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-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>的高科技企业，总部坐落于美丽的西子湖畔 · 杭州。
</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="grid grid-cols-2 md:grid-cols-4 gap-6 mb-20">
<div class="text-center group">
<div class="text-4xl md:text-5xl lg: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-xs md:text-sm font-medium">成立年份</div>
</div>
<div class="text-center group">
<div class="text-4xl md:text-5xl lg: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-xs md:text-sm font-medium">视觉理解模型</div>
</div>
<div class="text-center group">
<div class="text-4xl md:text-5xl lg: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-xs md:text-sm font-medium">SLA可用性</div>
</div>
<div class="text-center group">
<div class="text-4xl md:text-5xl lg: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-xs md: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">
<h3 class="text-2xl md:text-3xl font-bold text-gray-900">发展历程</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="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="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>
</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-200 to-transparent z-0"></div>
<div class="space-y-8 md:space-y-10">
<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/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>
</div>
</div>
</div>
</section>

6
src/pages/index.astro
View File

@@ -1,8 +1,9 @@
--- ---
import Layout from '../layouts/Layout.astro'; import Layout from '../layouts/Layout.astro';
import Hero from '../components/sections/Hero.astro'; import Hero from '../components/sections/Hero.astro';
import DevelopmentHistory from '../components/sections/DevelopmentHistory.astro';
import CompanyIntro from '../components/sections/CompanyIntro.astro'; import CompanyIntro from '../components/sections/CompanyIntro.astro';
import DevelopmentHistory from '../components/sections/DevelopmentHistory.astro';
import DataVisualization from '../components/sections/DataVisualization.astro';
import Honors from '../components/sections/Honors.astro'; import Honors from '../components/sections/Honors.astro';
import Contact from '../components/sections/Contact.astro'; import Contact from '../components/sections/Contact.astro';
--- ---
@@ -10,8 +11,9 @@ import Contact from '../components/sections/Contact.astro';
<Layout title="浙江贝凡网络科技 - 全场景 ‧ 产业数字化转型服务商" activeNav="home"> <Layout title="浙江贝凡网络科技 - 全场景 ‧ 产业数字化转型服务商" activeNav="home">
<main> <main>
<Hero /> <Hero />
<DevelopmentHistory />
<CompanyIntro /> <CompanyIntro />
<DevelopmentHistory />
<DataVisualization />
<Honors /> <Honors />
<Contact /> <Contact />
</main> </main>