1285 lines
69 KiB
HTML
1285 lines
69 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>超脑智子 | 全栈技术解决方案合作伙伴</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link
|
||
href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&family=Inter:wght@300;400;500;600;700&display=swap"
|
||
rel="stylesheet">
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Inter', 'Noto Sans SC', sans-serif;
|
||
background-color: #020617;
|
||
color: #e2e8f0;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
/* 自定义滚动条 */
|
||
::-webkit-scrollbar {
|
||
width: 8px;
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
background: #0f172a;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
background: #3b82f6;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
/* 玻璃拟态 */
|
||
.glass {
|
||
background: rgba(15, 23, 42, 0.6);
|
||
backdrop-filter: blur(12px);
|
||
-webkit-backdrop-filter: blur(12px);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
.glass-card {
|
||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
|
||
backdrop-filter: blur(10px);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.glass-card:hover {
|
||
border-color: #3b82f6;
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 20px 40px -15px rgba(59, 130, 246, 0.3);
|
||
}
|
||
|
||
/* 渐变文字 */
|
||
.gradient-text {
|
||
background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #f472b6 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
|
||
.gradient-border {
|
||
position: relative;
|
||
background: rgba(15, 23, 42, 0.8);
|
||
z-index: 1;
|
||
}
|
||
|
||
.gradient-border::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: -2px;
|
||
background: linear-gradient(135deg, #3b82f6, #8b5cf6, #ec4899);
|
||
border-radius: inherit;
|
||
z-index: -1;
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
|
||
.gradient-border:hover::before {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* 粒子画布 */
|
||
#particles-canvas {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 0;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* 导航栏 */
|
||
.nav-hidden {
|
||
transform: translateY(-100%);
|
||
}
|
||
|
||
.nav-visible {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
/* 无限滚动动画 */
|
||
@keyframes scroll {
|
||
0% {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
100% {
|
||
transform: translateX(-50%);
|
||
}
|
||
}
|
||
|
||
.animate-scroll {
|
||
animation: scroll 30s linear infinite;
|
||
}
|
||
|
||
/* 技术标签悬停效果 */
|
||
.tech-tag {
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.tech-tag:hover {
|
||
background: rgba(59, 130, 246, 0.3);
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
/* 案例研究卡片 */
|
||
.case-card {
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.case-card::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(to top, rgba(2, 6, 23, 0.9) 0%, transparent 100%);
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
|
||
.case-card:hover::after {
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* 流程步骤连线 */
|
||
.process-line {
|
||
background: linear-gradient(to right, #3b82f6, #8b5cf6);
|
||
height: 2px;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 0;
|
||
width: 100%;
|
||
transform: scaleX(0);
|
||
transform-origin: left;
|
||
z-index: 0;
|
||
}
|
||
|
||
/* 数字计数器动画 */
|
||
.counter-value {
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
/* 响应式调整 */
|
||
@media (max-width: 768px) {
|
||
.hero-title {
|
||
font-size: 2.5rem;
|
||
}
|
||
}
|
||
|
||
/* 加载动画 */
|
||
.fade-in-up {
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
}
|
||
|
||
/* 光晕效果 */
|
||
.glow {
|
||
position: absolute;
|
||
width: 300px;
|
||
height: 300px;
|
||
background: radial-gradient(circle, rgba(59, 130, 246, 0.3) 0%, transparent 70%);
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* 服务图标动画 */
|
||
.service-icon {
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.service-card:hover .service-icon {
|
||
transform: rotate(360deg);
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body class="antialiased">
|
||
|
||
<!-- 粒子背景 -->
|
||
<canvas id="particles-canvas"></canvas>
|
||
|
||
<!-- 导航栏 -->
|
||
<nav id="navbar" class="fixed w-full z-50 transition-all duration-300 nav-hidden">
|
||
<div class="glass border-b border-white/10">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="flex justify-between items-center h-20">
|
||
<div class="flex-shrink-0 flex items-center gap-3">
|
||
<div
|
||
class="w-10 h-10 rounded-lg bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
|
||
<span class="text-white font-bold text-xl">智</span>
|
||
</div>
|
||
<span class="font-bold text-2xl tracking-tight text-white">超脑智子</span>
|
||
</div>
|
||
|
||
<div class="hidden md:flex space-x-8 items-center">
|
||
<a href="#services"
|
||
class="text-gray-300 hover:text-white transition-colors text-sm font-medium">服务领域</a>
|
||
<a href="#cases"
|
||
class="text-gray-300 hover:text-white transition-colors text-sm font-medium">成功案例</a>
|
||
<a href="#process"
|
||
class="text-gray-300 hover:text-white transition-colors text-sm font-medium">工作流程</a>
|
||
<a href="#tech"
|
||
class="text-gray-300 hover:text-white transition-colors text-sm font-medium">技术栈</a>
|
||
<button onclick="handleNavigate()" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2.5 rounded-full text-sm font-semibold transition-all hover:scale-105 hover:shadow-lg hover:shadow-blue-500/30">
|
||
预约咨询
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 移动端菜单按钮 -->
|
||
<div class="md:hidden">
|
||
<button id="mobile-menu-btn" class="text-gray-300 hover:text-white p-2">
|
||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
d="M4 6h16M4 12h16M4 18h16"></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Hero Section -->
|
||
<section class="relative min-h-screen flex items-center justify-center pt-20 overflow-hidden">
|
||
<!-- 背景光晕 -->
|
||
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-blue-500/20 rounded-full blur-3xl animate-pulse"></div>
|
||
<div
|
||
class="absolute bottom-1/4 right-1/4 w-96 h-96 bg-purple-500/20 rounded-full blur-3xl animate-pulse delay-1000">
|
||
</div>
|
||
|
||
<div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||
<div class="fade-in-up">
|
||
<div
|
||
class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 mb-8 backdrop-blur-sm">
|
||
<span class="flex h-2 w-2 rounded-full bg-green-400 animate-pulse"></span>
|
||
<span class="text-sm text-gray-300">现已开放2026年Q1项目合作档期</span>
|
||
</div>
|
||
</div>
|
||
|
||
<h1 class="fade-in-up hero-title text-5xl md:text-7xl font-black mb-6 leading-tight tracking-tight">
|
||
全栈技术伙伴<br>
|
||
<span class="gradient-text">AI 驱动的数智化转型</span>
|
||
</h1>
|
||
|
||
<p class="fade-in-up mt-6 max-w-2xl mx-auto text-xl text-gray-400 mb-10 leading-relaxed">
|
||
我们是一支完备的技术团队，从前沿 AI 大模型应用到企业级系统架构，
|
||
为您提供端到端的数智化解决方案，助力业务增长与技术创新。
|
||
</p>
|
||
|
||
<div class="fade-in-up flex flex-col sm:flex-row gap-4 justify-center items-center">
|
||
<button
|
||
class="group relative px-8 py-4 bg-blue-600 rounded-full text-white font-semibold text-lg overflow-hidden transition-all hover:scale-105 hover:shadow-2xl hover:shadow-blue-500/25">
|
||
<!-- <span class="relative z-10">查看成功案例</span> -->
|
||
<span class="relative z-10">AI核心驱动力</span>
|
||
<div
|
||
class="absolute inset-0 bg-gradient-to-r from-blue-600 to-purple-600 opacity-0 group-hover:opacity-100 transition-opacity">
|
||
</div>
|
||
</button>
|
||
<!-- <button class="px-8 py-4 rounded-full text-white font-semibold text-lg border border-white/20 hover:bg-white/10 transition-all hover:scale-105 flex items-center gap-2">
|
||
下载团队介绍
|
||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
|
||
</svg>
|
||
</button> -->
|
||
<button
|
||
class="group relative px-8 py-4 bg-blue-600 rounded-full text-white font-semibold text-lg overflow-hidden transition-all hover:scale-105 hover:shadow-2xl hover:shadow-blue-500/25">
|
||
<span class="relative z-10">数智化解决方案</span>
|
||
<div
|
||
class="absolute inset-0 bg-gradient-to-r from-blue-600 to-purple-600 opacity-0 group-hover:opacity-100 transition-opacity">
|
||
</div>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 信任标识 -->
|
||
<div class="fade-in-up mt-20 pt-10 border-t border-white/10">
|
||
<p class="text-sm text-gray-500 mb-6 uppercase tracking-widest">信赖我们的合作伙伴</p>
|
||
<div class="relative overflow-hidden">
|
||
<div class="flex animate-scroll space-x-12 opacity-50">
|
||
<span class="text-2xl font-bold text-gray-400 whitespace-nowrap">FORTUNE 500 企业</span>
|
||
<span class="text-2xl font-bold text-gray-400 whitespace-nowrap">独角兽初创公司</span>
|
||
<span class="text-2xl font-bold text-gray-400 whitespace-nowrap">上市公司</span>
|
||
<!-- <span class="text-2xl font-bold text-gray-400 whitespace-nowrap">政府机构</span> -->
|
||
<span class="text-2xl font-bold text-gray-400 whitespace-nowrap">知名互联网平台</span>
|
||
<span class="text-2xl font-bold text-gray-400 whitespace-nowrap">金融科技领军者</span>
|
||
<!-- 重复以实现无缝滚动 -->
|
||
<span class="text-2xl font-bold text-gray-400 whitespace-nowrap">FORTUNE 500 企业</span>
|
||
<span class="text-2xl font-bold text-gray-400 whitespace-nowrap">独角兽初创公司</span>
|
||
<span class="text-2xl font-bold text-gray-400 whitespace-nowrap">上市公司</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 滚动提示 -->
|
||
<div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
|
||
<svg class="w-6 h-6 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3">
|
||
</path>
|
||
</svg>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 数据统计 -->
|
||
<section class="relative py-20 bg-gradient-to-b from-transparent to-blue-900/10">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
|
||
<div class="text-center fade-in-up">
|
||
<div class="text-4xl md:text-5xl font-bold gradient-text mb-2 counter-value" data-target="10">10+
|
||
</div>
|
||
<div class="text-gray-400">成功交付项目</div>
|
||
</div>
|
||
<div class="text-center fade-in-up" style="transition-delay: 100ms;">
|
||
<div class="text-4xl md:text-5xl font-bold gradient-text mb-2 counter-value" data-target="100">0
|
||
</div>
|
||
<div class="text-gray-400">% 客户满意度</div>
|
||
</div>
|
||
<div class="text-center fade-in-up" style="transition-delay: 200ms;">
|
||
<div class="text-4xl md:text-5xl font-bold gradient-text mb-2 counter-value" data-target="7">0</div>
|
||
<div class="text-gray-400">大核心职能领域</div>
|
||
</div>
|
||
<div class="text-center fade-in-up" style="transition-delay: 300ms;">
|
||
<div class="text-4xl md:text-5xl font-bold gradient-text mb-2 counter-value" data-target="100">0
|
||
</div>
|
||
<div class="text-gray-400">% 交付准时率</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 服务领域 -->
|
||
<section id="services" class="relative py-32">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-20 fade-in-up">
|
||
<h2 class="text-4xl md:text-5xl font-bold mb-6">全栈式技术能力</h2>
|
||
<p class="text-xl text-gray-400 max-w-3xl mx-auto">
|
||
从概念到落地，我们提供完整的技术闭环，一站式解决您的数智化需求。
|
||
</p>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
<!-- AI 大模型 -->
|
||
<div class="service-card glass-card rounded-2xl p-8 fade-in-up group cursor-pointer">
|
||
<div
|
||
class="service-icon w-14 h-14 rounded-xl bg-purple-500/20 flex items-center justify-center mb-6 text-purple-400 group-hover:bg-purple-500 group-hover:text-white transition-all duration-500">
|
||
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z">
|
||
</path>
|
||
</svg>
|
||
</div>
|
||
<h3 class="text-2xl font-bold mb-3 text-white">AI 大模型应用</h3>
|
||
<p class="text-gray-400 mb-4 leading-relaxed">
|
||
基于 GPT、Claude、Llama 等主流大模型的应用开发，RAG 知识库构建，AI Agent 智能体开发，模型微调与私有化部署。
|
||
</p>
|
||
<div class="flex flex-wrap gap-2">
|
||
<span
|
||
class="px-3 py-1 text-xs rounded-full bg-white/5 text-gray-300 border border-white/10">LangChain</span>
|
||
<span
|
||
class="px-3 py-1 text-xs rounded-full bg-white/5 text-gray-300 border border-white/10">RAG</span>
|
||
<span
|
||
class="px-3 py-1 text-xs rounded-full bg-white/5 text-gray-300 border border-white/10">Fine-tuning</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 前端技术 -->
|
||
<div class="service-card glass-card rounded-2xl p-8 fade-in-up group cursor-pointer"
|
||
style="transition-delay: 100ms;">
|
||
<div
|
||
class="service-icon w-14 h-14 rounded-xl bg-blue-500/20 flex items-center justify-center mb-6 text-blue-400 group-hover:bg-blue-500 group-hover:text-white transition-all duration-500">
|
||
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z">
|
||
</path>
|
||
</svg>
|
||
</div>
|
||
<h3 class="text-2xl font-bold mb-3 text-white">现代化前端</h3>
|
||
<p class="text-gray-400 mb-4 leading-relaxed">
|
||
响应式 Web 应用、跨平台移动端开发、小程序生态、3D 可视化大屏、低代码平台定制，打造极致用户体验。
|
||
</p>
|
||
<div class="flex flex-wrap gap-2">
|
||
<span
|
||
class="px-3 py-1 text-xs rounded-full bg-white/5 text-gray-300 border border-white/10">React/Vue</span>
|
||
<span
|
||
class="px-3 py-1 text-xs rounded-full bg-white/5 text-gray-300 border border-white/10">Flutter</span>
|
||
<span
|
||
class="px-3 py-1 text-xs rounded-full bg-white/5 text-gray-300 border border-white/10">WebGL</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 后端架构 -->
|
||
<div class="service-card glass-card rounded-2xl p-8 fade-in-up group cursor-pointer"
|
||
style="transition-delay: 200ms;">
|
||
<div
|
||
class="service-icon w-14 h-14 rounded-xl bg-green-500/20 flex items-center justify-center mb-6 text-green-400 group-hover:bg-green-500 group-hover:text-white transition-all duration-500">
|
||
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01">
|
||
</path>
|
||
</svg>
|
||
</div>
|
||
<h3 class="text-2xl font-bold mb-3 text-white">高并发后端</h3>
|
||
<p class="text-gray-400 mb-4 leading-relaxed">
|
||
微服务架构设计、分布式系统开发、高性能 API 网关、实时通信系统，保障业务高可用与数据安全。
|
||
</p>
|
||
<div class="flex flex-wrap gap-2">
|
||
<span
|
||
class="px-3 py-1 text-xs rounded-full bg-white/5 text-gray-300 border border-white/10">Go/Java</span>
|
||
<span
|
||
class="px-3 py-1 text-xs rounded-full bg-white/5 text-gray-300 border border-white/10">Kubernetes</span>
|
||
<span
|
||
class="px-3 py-1 text-xs rounded-full bg-white/5 text-gray-300 border border-white/10">Microservices</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 运维与云原生 -->
|
||
<div class="service-card glass-card rounded-2xl p-8 fade-in-up group cursor-pointer">
|
||
<div
|
||
class="service-icon w-14 h-14 rounded-xl bg-orange-500/20 flex items-center justify-center mb-6 text-orange-400 group-hover:bg-orange-500 group-hover:text-white transition-all duration-500">
|
||
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z">
|
||
</path>
|
||
</svg>
|
||
</div>
|
||
<h3 class="text-2xl font-bold mb-3 text-white">云原生与 DevOps</h3>
|
||
<p class="text-gray-400 mb-4 leading-relaxed">
|
||
容器化部署、CI/CD 自动化流水线、多云架构管理、监控告警体系，实现一站式运维支撑。
|
||
</p>
|
||
<div class="flex flex-wrap gap-2">
|
||
<span
|
||
class="px-3 py-1 text-xs rounded-full bg-white/5 text-gray-300 border border-white/10">Docker</span>
|
||
<span
|
||
class="px-3 py-1 text-xs rounded-full bg-white/5 text-gray-300 border border-white/10">AWS/阿里云</span>
|
||
<span
|
||
class="px-3 py-1 text-xs rounded-full bg-white/5 text-gray-300 border border-white/10">Terraform</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- UI/UX设计 -->
|
||
<div class="service-card glass-card rounded-2xl p-8 fade-in-up group cursor-pointer"
|
||
style="transition-delay: 100ms;">
|
||
<div
|
||
class="service-icon w-14 h-14 rounded-xl bg-pink-500/20 flex items-center justify-center mb-6 text-pink-400 group-hover:bg-pink-500 group-hover:text-white transition-all duration-500">
|
||
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01">
|
||
</path>
|
||
</svg>
|
||
</div>
|
||
<h3 class="text-2xl font-bold mb-3 text-white">产品设计与体验</h3>
|
||
<p class="text-gray-400 mb-4 leading-relaxed">
|
||
用户研究、交互设计、视觉设计系统（Design System）、品牌数字化设计，让技术与美学完美融合。
|
||
</p>
|
||
<div class="flex flex-wrap gap-2">
|
||
<span
|
||
class="px-3 py-1 text-xs rounded-full bg-white/5 text-gray-300 border border-white/10">Figma</span>
|
||
<span
|
||
class="px-3 py-1 text-xs rounded-full bg-white/5 text-gray-300 border border-white/10">UI/UX</span>
|
||
<span
|
||
class="px-3 py-1 text-xs rounded-full bg-white/5 text-gray-300 border border-white/10">Design
|
||
System</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 产品与项目 -->
|
||
<div class="service-card glass-card rounded-2xl p-8 fade-in-up group cursor-pointer"
|
||
style="transition-delay: 200ms;">
|
||
<div
|
||
class="service-icon w-14 h-14 rounded-xl bg-indigo-500/20 flex items-center justify-center mb-6 text-indigo-400 group-hover:bg-indigo-500 group-hover:text-white transition-all duration-500">
|
||
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01">
|
||
</path>
|
||
</svg>
|
||
</div>
|
||
<h3 class="text-2xl font-bold mb-3 text-white">产品与项目管理</h3>
|
||
<p class="text-gray-400 mb-4 leading-relaxed">
|
||
产品规划与路线图、敏捷开发管理、跨部门协作、质量保障体系，确保项目按时高质量交付。
|
||
</p>
|
||
<div class="flex flex-wrap gap-2">
|
||
<span
|
||
class="px-3 py-1 text-xs rounded-full bg-white/5 text-gray-300 border border-white/10">敏捷开发</span>
|
||
<span
|
||
class="px-3 py-1 text-xs rounded-full bg-white/5 text-gray-300 border border-white/10">PMP</span>
|
||
<span
|
||
class="px-3 py-1 text-xs rounded-full bg-white/5 text-gray-300 border border-white/10">质量管控</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 成功案例 -->
|
||
<section id="cases" class="relative py-32 bg-gradient-to-b from-blue-900/10 to-transparent">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="flex flex-col md:flex-row justify-between items-end mb-16 fade-in-up">
|
||
<div>
|
||
<h2 class="text-4xl md:text-5xl font-bold mb-4">成功案例</h2>
|
||
<p class="text-xl text-gray-400">深度产业赋能，见证技术创新价值</p>
|
||
</div>
|
||
<button
|
||
class="mt-6 md:mt-0 text-blue-400 hover:text-blue-300 flex items-center gap-2 transition-colors">
|
||
查看全部案例
|
||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||
<!-- 案例 1 -->
|
||
<div class="case-card glass-card rounded-3xl overflow-hidden group cursor-pointer fade-in-up">
|
||
<div class="relative h-80 overflow-hidden">
|
||
<div
|
||
class="absolute inset-0 bg-gradient-to-br from-blue-600/20 to-purple-600/20 group-hover:scale-110 transition-transform duration-700">
|
||
</div>
|
||
<div class="absolute inset-0 flex items-center justify-center">
|
||
<div class="text-center p-8">
|
||
<div
|
||
class="w-20 h-20 mx-auto mb-4 rounded-2xl bg-white/10 backdrop-blur flex items-center justify-center">
|
||
<svg class="w-10 h-10 text-white" fill="none" stroke="currentColor"
|
||
viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4">
|
||
</path>
|
||
</svg>
|
||
</div>
|
||
<h3 class="text-3xl font-bold text-white mb-2">某头部金融机构</h3>
|
||
<p class="text-gray-300">智能风控与合规审查系统</p>
|
||
</div>
|
||
</div>
|
||
<div class="absolute top-4 right-4 flex gap-2">
|
||
<span
|
||
class="px-3 py-1 text-xs rounded-full bg-blue-500/80 text-white backdrop-blur">金融科技</span>
|
||
<span class="px-3 py-1 text-xs rounded-full bg-purple-500/80 text-white backdrop-blur">AI
|
||
大模型</span>
|
||
</div>
|
||
</div>
|
||
<div class="relative z-10 p-8 bg-gradient-to-t from-slate-900 to-transparent">
|
||
<div class="flex items-center justify-between mb-4">
|
||
<div class="text-3xl font-bold text-white">40%</div>
|
||
<div class="text-green-400 text-sm flex items-center gap-1">
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
|
||
</svg>
|
||
效率提升
|
||
</div>
|
||
</div>
|
||
<p class="text-gray-300 mb-4 line-clamp-2">
|
||
基于 RAG 技术构建的智能合规审查系统，实现合同自动审核、风险点智能识别，审查准确率提升至 98.5%，人工审查工作量减少 40%。
|
||
</p>
|
||
<div class="flex gap-2 text-sm text-gray-400">
|
||
<span class="bg-white/5 px-3 py-1 rounded">LangChain</span>
|
||
<span class="bg-white/5 px-3 py-1 rounded">Python</span>
|
||
<span class="bg-white/5 px-3 py-1 rounded">React</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 案例 2 -->
|
||
<div class="case-card glass-card rounded-3xl overflow-hidden group cursor-pointer fade-in-up"
|
||
style="transition-delay: 100ms;">
|
||
<div class="relative h-80 overflow-hidden">
|
||
<div
|
||
class="absolute inset-0 bg-gradient-to-br from-green-600/20 to-teal-600/20 group-hover:scale-110 transition-transform duration-700">
|
||
</div>
|
||
<div class="absolute inset-0 flex items-center justify-center">
|
||
<div class="text-center p-8">
|
||
<div
|
||
class="w-20 h-20 mx-auto mb-4 rounded-2xl bg-white/10 backdrop-blur flex items-center justify-center">
|
||
<svg class="w-10 h-10 text-white" fill="none" stroke="currentColor"
|
||
viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||
</svg>
|
||
</div>
|
||
<h3 class="text-3xl font-bold text-white mb-2">智能制造平台</h3>
|
||
<p class="text-gray-300">工业互联网数据中台</p>
|
||
</div>
|
||
</div>
|
||
<div class="absolute top-4 right-4 flex gap-2">
|
||
<span
|
||
class="px-3 py-1 text-xs rounded-full bg-green-500/80 text-white backdrop-blur">工业互联网</span>
|
||
<span
|
||
class="px-3 py-1 text-xs rounded-full bg-blue-500/80 text-white backdrop-blur">大数据</span>
|
||
</div>
|
||
</div>
|
||
<div class="relative z-10 p-8 bg-gradient-to-t from-slate-900 to-transparent">
|
||
<div class="flex items-center justify-between mb-4">
|
||
<div class="text-3xl font-bold text-white">10x</div>
|
||
<div class="text-green-400 text-sm flex items-center gap-1">
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
|
||
</svg>
|
||
数据处理速度
|
||
</div>
|
||
</div>
|
||
<p class="text-gray-300 mb-4 line-clamp-2">
|
||
为大型制造集团打造的工业互联网平台，实现 10 万+ 设备实时接入，秒级数据分析，赋能生产决策智能化，年节省成本超千万。
|
||
</p>
|
||
<div class="flex gap-2 text-sm text-gray-400">
|
||
<span class="bg-white/5 px-3 py-1 rounded">Go</span>
|
||
<span class="bg-white/5 px-3 py-1 rounded">Kafka</span>
|
||
<span class="bg-white/5 px-3 py-1 rounded">Vue3</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 案例 3 -->
|
||
<div class="case-card glass-card rounded-3xl overflow-hidden group cursor-pointer fade-in-up">
|
||
<div class="relative h-80 overflow-hidden">
|
||
<div
|
||
class="absolute inset-0 bg-gradient-to-br from-pink-600/20 to-orange-600/20 group-hover:scale-110 transition-transform duration-700">
|
||
</div>
|
||
<div class="absolute inset-0 flex items-center justify-center">
|
||
<div class="text-center p-8">
|
||
<div
|
||
class="w-20 h-20 mx-auto mb-4 rounded-2xl bg-white/10 backdrop-blur flex items-center justify-center">
|
||
<svg class="w-10 h-10 text-white" fill="none" stroke="currentColor"
|
||
viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9">
|
||
</path>
|
||
</svg>
|
||
</div>
|
||
<h3 class="text-3xl font-bold text-white mb-2">跨境电商平台</h3>
|
||
<p class="text-gray-300">全渠道零售中台系统</p>
|
||
</div>
|
||
</div>
|
||
<div class="absolute top-4 right-4 flex gap-2">
|
||
<span
|
||
class="px-3 py-1 text-xs rounded-full bg-pink-500/80 text-white backdrop-blur">电商</span>
|
||
<span
|
||
class="px-3 py-1 text-xs rounded-full bg-orange-500/80 text-white backdrop-blur">高并发</span>
|
||
</div>
|
||
</div>
|
||
<div class="relative z-10 p-8 bg-gradient-to-t from-slate-900 to-transparent">
|
||
<div class="flex items-center justify-between mb-4">
|
||
<div class="text-3xl font-bold text-white">50万+</div>
|
||
<div class="text-green-400 text-sm flex items-center gap-1">
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
|
||
</svg>
|
||
日活用户
|
||
</div>
|
||
</div>
|
||
<p class="text-gray-300 mb-4 line-clamp-2">
|
||
支持全球化部署的跨境电商中台，日均处理订单 100 万+，秒杀场景下系统稳定性达 99.99%，助力客户业务快速扩张至东南亚及欧美市场。
|
||
</p>
|
||
<div class="flex gap-2 text-sm text-gray-400">
|
||
<span class="bg-white/5 px-3 py-1 rounded">Spring Cloud</span>
|
||
<span class="bg-white/5 px-3 py-1 rounded">Redis</span>
|
||
<span class="bg-white/5 px-3 py-1 rounded">Next.js</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 案例 4 -->
|
||
<div class="case-card glass-card rounded-3xl overflow-hidden group cursor-pointer fade-in-up"
|
||
style="transition-delay: 100ms;">
|
||
<div class="relative h-80 overflow-hidden">
|
||
<div
|
||
class="absolute inset-0 bg-gradient-to-br from-indigo-600/20 to-cyan-600/20 group-hover:scale-110 transition-transform duration-700">
|
||
</div>
|
||
<div class="absolute inset-0 flex items-center justify-center">
|
||
<div class="text-center p-8">
|
||
<div
|
||
class="w-20 h-20 mx-auto mb-4 rounded-2xl bg-white/10 backdrop-blur flex items-center justify-center">
|
||
<svg class="w-10 h-10 text-white" fill="none" stroke="currentColor"
|
||
viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">
|
||
</path>
|
||
</svg>
|
||
</div>
|
||
<h3 class="text-3xl font-bold text-white mb-2">智慧政务平台</h3>
|
||
<p class="text-gray-300">一网通办数字化升级</p>
|
||
</div>
|
||
</div>
|
||
<div class="absolute top-4 right-4 flex gap-2">
|
||
<span
|
||
class="px-3 py-1 text-xs rounded-full bg-indigo-500/80 text-white backdrop-blur">政务</span>
|
||
<span
|
||
class="px-3 py-1 text-xs rounded-full bg-cyan-500/80 text-white backdrop-blur">信创</span>
|
||
</div>
|
||
</div>
|
||
<div class="relative z-10 p-8 bg-gradient-to-t from-slate-900 to-transparent">
|
||
<div class="flex items-center justify-between mb-4">
|
||
<div class="text-3xl font-bold text-white">90%</div>
|
||
<div class="text-green-400 text-sm flex items-center gap-1">
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
|
||
</svg>
|
||
办事效率提升
|
||
</div>
|
||
</div>
|
||
<p class="text-gray-300 mb-4 line-clamp-2">
|
||
基于国产信创技术栈开发的政务服务平台，实现 2000+ 事项一网通办，数据多跑路、群众少跑腿，获评省级数字化改革示范项目。
|
||
</p>
|
||
<div class="flex gap-2 text-sm text-gray-400">
|
||
<span class="bg-white/5 px-3 py-1 rounded">国产化适配</span>
|
||
<span class="bg-white/5 px-3 py-1 rounded">微服务</span>
|
||
<span class="bg-white/5 px-3 py-1 rounded">低代码</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 工作流程 -->
|
||
<section id="process" class="relative py-32">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-20 fade-in-up">
|
||
<h2 class="text-4xl md:text-5xl font-bold mb-6">专业交付流程</h2>
|
||
<p class="text-xl text-gray-400 max-w-3xl mx-auto">
|
||
标准化的敏捷交付体系，确保项目进度透明可控，质量可追溯
|
||
</p>
|
||
</div>
|
||
|
||
<div class="relative">
|
||
<!-- 连接线 -->
|
||
<div class="hidden md:block absolute top-1/2 left-0 w-full h-0.5 bg-gray-800 -translate-y-1/2"></div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||
<!-- 步骤 1 -->
|
||
<div class="relative fade-in-up group">
|
||
<div
|
||
class="relative z-10 glass-card rounded-2xl p-6 text-center group-hover:border-blue-500 transition-colors">
|
||
<div
|
||
class="w-16 h-16 mx-auto mb-4 rounded-full bg-blue-500/20 flex items-center justify-center text-blue-400 font-bold text-2xl group-hover:bg-blue-500 group-hover:text-white transition-all">
|
||
1</div>
|
||
<h3 class="text-xl font-bold mb-2">需求分析</h3>
|
||
<p class="text-sm text-gray-400">深度业务调研、技术可行性分析、架构蓝图设计</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 步骤 2 -->
|
||
<div class="relative fade-in-up group" style="transition-delay: 100ms;">
|
||
<div
|
||
class="relative z-10 glass-card rounded-2xl p-6 text-center group-hover:border-purple-500 transition-colors">
|
||
<div
|
||
class="w-16 h-16 mx-auto mb-4 rounded-full bg-purple-500/20 flex items-center justify-center text-purple-400 font-bold text-2xl group-hover:bg-purple-500 group-hover:text-white transition-all">
|
||
2</div>
|
||
<h3 class="text-xl font-bold mb-2">产品设计</h3>
|
||
<p class="text-sm text-gray-400">原型设计、UI 视觉设计、技术方案评审、迭代计划制定</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 步骤 3 -->
|
||
<div class="relative fade-in-up group" style="transition-delay: 200ms;">
|
||
<div
|
||
class="relative z-10 glass-card rounded-2xl p-6 text-center group-hover:border-pink-500 transition-colors">
|
||
<div
|
||
class="w-16 h-16 mx-auto mb-4 rounded-full bg-pink-500/20 flex items-center justify-center text-pink-400 font-bold text-2xl group-hover:bg-pink-500 group-hover:text-white transition-all">
|
||
3</div>
|
||
<h3 class="text-xl font-bold mb-2">敏捷开发</h3>
|
||
<p class="text-sm text-gray-400">两周迭代、每日站会、持续集成、自动化测试保障</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 步骤 4 -->
|
||
<div class="relative fade-in-up group" style="transition-delay: 300ms;">
|
||
<div
|
||
class="relative z-10 glass-card rounded-2xl p-6 text-center group-hover:border-green-500 transition-colors">
|
||
<div
|
||
class="w-16 h-16 mx-auto mb-4 rounded-full bg-green-500/20 flex items-center justify-center text-green-400 font-bold text-2xl group-hover:bg-green-500 group-hover:text-white transition-all">
|
||
4</div>
|
||
<h3 class="text-xl font-bold mb-2">交付运维</h3>
|
||
<p class="text-sm text-gray-400">生产部署、灰度发布、监控告警、长期技术支持</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 技术栈展示 -->
|
||
<section id="tech" class="relative py-32 bg-gradient-to-b from-transparent to-blue-900/10">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-16 fade-in-up">
|
||
<h2 class="text-4xl md:text-5xl font-bold mb-6">核心技术栈</h2>
|
||
<p class="text-xl text-gray-400">紧跟技术前沿，选择最适合业务场景的技术方案</p>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 fade-in-up">
|
||
<!-- AI/ML -->
|
||
<div class="tech-tag glass-card rounded-xl p-4 text-center cursor-pointer">
|
||
<div class="text-2xl mb-2">🤖</div>
|
||
<div class="text-sm font-medium">GPT-4/Claude</div>
|
||
</div>
|
||
<div class="tech-tag glass-card rounded-xl p-4 text-center cursor-pointer">
|
||
<div class="text-2xl mb-2">🦜</div>
|
||
<div class="text-sm font-medium">LangChain</div>
|
||
</div>
|
||
<div class="tech-tag glass-card rounded-xl p-4 text-center cursor-pointer">
|
||
<div class="text-2xl mb-2">🔮</div>
|
||
<div class="text-sm font-medium">PyTorch</div>
|
||
</div>
|
||
|
||
<!-- 前端 -->
|
||
<div class="tech-tag glass-card rounded-xl p-4 text-center cursor-pointer">
|
||
<div class="text-2xl mb-2">⚛️</div>
|
||
<div class="text-sm font-medium">React/Next.js</div>
|
||
</div>
|
||
<div class="tech-tag glass-card rounded-xl p-4 text-center cursor-pointer">
|
||
<div class="text-2xl mb-2">💚</div>
|
||
<div class="text-sm font-medium">Vue/Nuxt</div>
|
||
</div>
|
||
<div class="tech-tag glass-card rounded-xl p-4 text-center cursor-pointer">
|
||
<div class="text-2xl mb-2">📱</div>
|
||
<div class="text-sm font-medium">Flutter</div>
|
||
</div>
|
||
|
||
<!-- 后端 -->
|
||
<div class="tech-tag glass-card rounded-xl p-4 text-center cursor-pointer">
|
||
<div class="text-2xl mb-2">🐹</div>
|
||
<div class="text-sm font-medium">Go</div>
|
||
</div>
|
||
<div class="tech-tag glass-card rounded-xl p-4 text-center cursor-pointer">
|
||
<div class="text-2xl mb-2">☕</div>
|
||
<div class="text-sm font-medium">Spring Boot</div>
|
||
</div>
|
||
<div class="tech-tag glass-card rounded-xl p-4 text-center cursor-pointer">
|
||
<div class="text-2xl mb-2">🐍</div>
|
||
<div class="text-sm font-medium">Python/FastAPI</div>
|
||
</div>
|
||
|
||
<!-- 数据与中间件 -->
|
||
<div class="tech-tag glass-card rounded-xl p-4 text-center cursor-pointer">
|
||
<div class="text-2xl mb-2">🐘</div>
|
||
<div class="text-sm font-medium">PostgreSQL</div>
|
||
</div>
|
||
<div class="tech-tag glass-card rounded-xl p-4 text-center cursor-pointer">
|
||
<div class="text-2xl mb-2">⚡</div>
|
||
<div class="text-sm font-medium">Redis</div>
|
||
</div>
|
||
<div class="tech-tag glass-card rounded-xl p-4 text-center cursor-pointer">
|
||
<div class="text-2xl mb-2">🚀</div>
|
||
<div class="text-sm font-medium">Kafka</div>
|
||
</div>
|
||
|
||
<!-- 云原生 -->
|
||
<div class="tech-tag glass-card rounded-xl p-4 text-center cursor-pointer">
|
||
<div class="text-2xl mb-2">☸️</div>
|
||
<div class="text-sm font-medium">Kubernetes</div>
|
||
</div>
|
||
<div class="tech-tag glass-card rounded-xl p-4 text-center cursor-pointer">
|
||
<div class="text-2xl mb-2">🐳</div>
|
||
<div class="text-sm font-medium">Docker</div>
|
||
</div>
|
||
<div class="tech-tag glass-card rounded-xl p-4 text-center cursor-pointer">
|
||
<div class="text-2xl mb-2">☁️</div>
|
||
<div class="text-sm font-medium">AWS/阿里云</div>
|
||
</div>
|
||
|
||
<!-- 工具 -->
|
||
<div class="tech-tag glass-card rounded-xl p-4 text-center cursor-pointer">
|
||
<div class="text-2xl mb-2">🎨</div>
|
||
<div class="text-sm font-medium">Figma</div>
|
||
</div>
|
||
<div class="tech-tag glass-card rounded-xl p-4 text-center cursor-pointer">
|
||
<div class="text-2xl mb-2">🦊</div>
|
||
<div class="text-sm font-medium">GitLab CI</div>
|
||
</div>
|
||
<div class="tech-tag glass-card rounded-xl p-4 text-center cursor-pointer">
|
||
<div class="text-2xl mb-2">📊</div>
|
||
<div class="text-sm font-medium">Prometheus</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CTA 区域 -->
|
||
<section class="relative py-32 overflow-hidden">
|
||
<div class="absolute inset-0 bg-gradient-to-r from-blue-600/20 to-purple-600/20"></div>
|
||
<div
|
||
class="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg%20width%3D%2260%22%20height%3D%2260%22%20viewBox%3D%220%200%2060%2060%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20fill%3D%22%239C92AC%22%20fill-opacity%3D%220.05%22%3E%3Cpath%20d%3D%22M36%2034v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6%2034v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6%204V0H4v4H0v2h4v4h2V6h4V4H6z%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')] opacity-20">
|
||
</div>
|
||
|
||
<div class="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center fade-in-up">
|
||
<h2 class="text-4xl md:text-6xl font-bold mb-6">准备好开始您的项目了吗？</h2>
|
||
<p class="text-xl text-gray-300 mb-10 max-w-2xl mx-auto">
|
||
无论是 AI 创新应用还是企业级系统建设，
|
||
我们都将用专业的技术能力和项目管理经验，为您交付超出预期的解决方案。
|
||
</p>
|
||
|
||
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
|
||
<button
|
||
class="w-full sm:w-auto px-10 py-5 bg-white text-slate-900 rounded-full font-bold text-lg hover:bg-gray-100 transition-all hover:scale-105 shadow-2xl">
|
||
立即预约技术咨询
|
||
</button>
|
||
<button
|
||
class="w-full sm:w-auto px-10 py-5 bg-transparent border-2 border-white/30 text-white rounded-full font-bold text-lg hover:bg-white/10 transition-all">
|
||
查看详细技术白皮书
|
||
</button>
|
||
</div>
|
||
|
||
<div class="mt-12 flex flex-col sm:flex-row justify-center items-center gap-8 text-sm text-gray-400">
|
||
<div class="flex items-center gap-2">
|
||
<svg class="w-5 h-5 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||
</svg>
|
||
免费需求评估与方案咨询
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<svg class="w-5 h-5 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||
</svg>
|
||
签署 NDA 保护商业机密
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<svg class="w-5 h-5 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||
</svg>
|
||
灵活的合作模式（项目制/驻场/远程）
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer class="relative bg-slate-950 border-t border-white/10 pt-16 pb-8">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="grid grid-cols-1 md:grid-cols-4 gap-12 mb-12">
|
||
<div class="col-span-1 md:col-span-2">
|
||
<div class="flex items-center gap-3 mb-6">
|
||
<div
|
||
class="w-10 h-10 rounded-lg bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
|
||
<span class="text-white font-bold text-xl">智</span>
|
||
</div>
|
||
<span class="font-bold text-2xl text-white">超脑智子（北京）科技有限公司</span>
|
||
</div>
|
||
<p class="text-gray-400 mb-6 max-w-md">
|
||
专注于企业数智化转型与AI应用创新的技术团队。
|
||
我们以AI为核心驱动力的全栈技术能力和严谨的工程态度，成为客户信赖的长期技术合作伙伴。
|
||
</p>
|
||
<div class="flex gap-4">
|
||
<a href="#"
|
||
class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center hover:bg-blue-600 transition-colors">
|
||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||
<path
|
||
d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
|
||
</svg>
|
||
</a>
|
||
<a href="#"
|
||
class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center hover:bg-blue-600 transition-colors">
|
||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||
<path
|
||
d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
|
||
</svg>
|
||
</a>
|
||
<a href="#"
|
||
class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center hover:bg-blue-600 transition-colors">
|
||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||
<path
|
||
d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h4 class="text-white font-bold mb-4">服务领域</h4>
|
||
<ul class="space-y-2 text-gray-400">
|
||
<li><a href="#" class="hover:text-white transition-colors">AI 大模型应用</a></li>
|
||
<li><a href="#" class="hover:text-white transition-colors">企业数智化转型</a></li>
|
||
<li><a href="#" class="hover:text-white transition-colors">工业互联网平台</a></li>
|
||
<li><a href="#" class="hover:text-white transition-colors">金融科技系统</a></li>
|
||
<li><a href="#" class="hover:text-white transition-colors">跨境电商平台</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div>
|
||
<h4 id="contactUS" class="text-white font-bold mb-4">联系我们</h4>
|
||
<ul class="space-y-3 text-gray-400">
|
||
<li class="flex items-start gap-3">
|
||
<svg class="w-5 h-5 text-blue-500 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor"
|
||
viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z">
|
||
</path>
|
||
</svg>
|
||
<span>hypermind@ashai.com.cn</span>
|
||
</li>
|
||
<li class="flex items-start gap-3">
|
||
<svg class="w-5 h-5 text-blue-500 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor"
|
||
viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z">
|
||
</path>
|
||
</svg>
|
||
<span>151-2927-0145</span>
|
||
</li>
|
||
<li class="flex items-start gap-3">
|
||
<svg class="w-5 h-5 text-blue-500 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor"
|
||
viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z">
|
||
</path>
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||
</svg>
|
||
<span>北京市北京经济开发区（通州）环科中路17号25幢1层102-755</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="border-t border-white/10 pt-8 flex flex-col items-center gap-4">
|
||
<div class="flex flex-wrap justify-center items-center gap-4 text-sm text-gray-500">
|
||
<span>超脑智子（北京）科技有限公司</span>
|
||
<a href="https://beian.miit.gov.cn/#/Integrated/index" class="hover:text-white transition-colors">京ICP备2024060551号-1</a>
|
||
<div class="flex items-center gap-1">
|
||
<span class="flex-shrink-0"><img src="assets/badge.png" alt="分隔符" class="w-4 h-4 object-contain"></span>
|
||
<a href="https://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11011202100620" class="hover:text-white transition-colors">京公网安备11011202100620</a>
|
||
</div>
|
||
</div>
|
||
<p class="text-sm text-gray-500">Copyright © 2024 超脑智子（北京）科技有限公司. All Rights Reserved</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- JavaScript -->
|
||
<script>
|
||
// 注册 GSAP 插件
|
||
gsap.registerPlugin(ScrollTrigger);
|
||
|
||
// 粒子背景效果
|
||
const canvas = document.getElementById('particles-canvas');
|
||
const ctx = canvas.getContext('2d');
|
||
|
||
let width, height;
|
||
let particles = [];
|
||
const particleCount = 50;
|
||
const connectionDistance = 150;
|
||
|
||
function resize() {
|
||
width = canvas.width = window.innerWidth;
|
||
height = canvas.height = window.innerHeight;
|
||
}
|
||
|
||
class Particle {
|
||
constructor() {
|
||
this.x = Math.random() * width;
|
||
this.y = Math.random() * height;
|
||
this.vx = (Math.random() - 0.5) * 0.5;
|
||
this.vy = (Math.random() - 0.5) * 0.5;
|
||
this.size = Math.random() * 2 + 1;
|
||
}
|
||
|
||
update() {
|
||
this.x += this.vx;
|
||
this.y += this.vy;
|
||
|
||
if (this.x < 0 || this.x > width) this.vx *= -1;
|
||
if (this.y < 0 || this.y > height) this.vy *= -1;
|
||
}
|
||
|
||
draw() {
|
||
ctx.fillStyle = 'rgba(59, 130, 246, 0.3)';
|
||
ctx.beginPath();
|
||
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
}
|
||
}
|
||
|
||
function initParticles() {
|
||
particles = [];
|
||
for (let i = 0; i < particleCount; i++) {
|
||
particles.push(new Particle());
|
||
}
|
||
}
|
||
|
||
function animateParticles() {
|
||
ctx.clearRect(0, 0, width, height);
|
||
|
||
particles.forEach((particle, i) => {
|
||
particle.update();
|
||
particle.draw();
|
||
|
||
// 绘制连线
|
||
for (let j = i + 1; j < particles.length; j++) {
|
||
const dx = particle.x - particles[j].x;
|
||
const dy = particle.y - particles[j].y;
|
||
const distance = Math.sqrt(dx * dx + dy * dy);
|
||
|
||
if (distance < connectionDistance) {
|
||
ctx.strokeStyle = `rgba(59, 130, 246, ${0.2 * (1 - distance / connectionDistance)})`;
|
||
ctx.lineWidth = 1;
|
||
ctx.beginPath();
|
||
ctx.moveTo(particle.x, particle.y);
|
||
ctx.lineTo(particles[j].x, particles[j].y);
|
||
ctx.stroke();
|
||
}
|
||
}
|
||
});
|
||
|
||
requestAnimationFrame(animateParticles);
|
||
}
|
||
|
||
window.addEventListener('resize', () => {
|
||
resize();
|
||
initParticles();
|
||
});
|
||
|
||
resize();
|
||
initParticles();
|
||
animateParticles();
|
||
|
||
// 导航栏滚动效果
|
||
let lastScroll = 0;
|
||
const navbar = document.getElementById('navbar');
|
||
|
||
window.addEventListener('scroll', () => {
|
||
const currentScroll = window.pageYOffset;
|
||
|
||
if (currentScroll > 100) {
|
||
if (currentScroll > lastScroll) {
|
||
navbar.classList.add('nav-hidden');
|
||
navbar.classList.remove('nav-visible');
|
||
} else {
|
||
navbar.classList.remove('nav-hidden');
|
||
navbar.classList.add('nav-visible');
|
||
}
|
||
} else {
|
||
navbar.classList.add('nav-hidden');
|
||
navbar.classList.remove('nav-visible');
|
||
}
|
||
|
||
lastScroll = currentScroll;
|
||
});
|
||
|
||
// 渐入动画
|
||
const fadeElements = document.querySelectorAll('.fade-in-up');
|
||
|
||
const observerOptions = {
|
||
threshold: 0.1,
|
||
rootMargin: '0px 0px -50px 0px'
|
||
};
|
||
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
gsap.to(entry.target, {
|
||
opacity: 1,
|
||
y: 0,
|
||
duration: 0.8,
|
||
ease: 'power3.out'
|
||
});
|
||
observer.unobserve(entry.target);
|
||
}
|
||
});
|
||
}, observerOptions);
|
||
|
||
fadeElements.forEach(el => {
|
||
el.style.opacity = '0';
|
||
el.style.transform = 'translateY(30px)';
|
||
observer.observe(el);
|
||
});
|
||
|
||
// 数字增长动画
|
||
const counters = document.querySelectorAll('.counter-value');
|
||
|
||
const counterObserver = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
const target = parseInt(entry.target.getAttribute('data-target'));
|
||
const duration = 2000;
|
||
const step = target / (duration / 16);
|
||
let current = 0;
|
||
|
||
const updateCounter = () => {
|
||
current += step;
|
||
if (current < target) {
|
||
entry.target.textContent = Math.floor(current) + (entry.target.getAttribute('data-target') === '100' ? '' : '+');
|
||
requestAnimationFrame(updateCounter);
|
||
} else {
|
||
entry.target.textContent = target + (entry.target.getAttribute('data-target') === '100' ? '%' : '+');
|
||
}
|
||
};
|
||
|
||
updateCounter();
|
||
counterObserver.unobserve(entry.target);
|
||
}
|
||
});
|
||
}, { threshold: 0.5 });
|
||
|
||
counters.forEach(counter => counterObserver.observe(counter));
|
||
|
||
// 平滑滚动
|
||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||
anchor.addEventListener('click', function (e) {
|
||
e.preventDefault();
|
||
const target = document.querySelector(this.getAttribute('href'));
|
||
if (target) {
|
||
target.scrollIntoView({
|
||
behavior: 'smooth',
|
||
block: 'start'
|
||
});
|
||
}
|
||
});
|
||
});
|
||
|
||
// 移动端菜单切换
|
||
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
|
||
let mobileMenuOpen = false;
|
||
|
||
mobileMenuBtn.addEventListener('click', () => {
|
||
mobileMenuOpen = !mobileMenuOpen;
|
||
// 这里可以添加移动端菜单的展开逻辑
|
||
if (mobileMenuOpen) {
|
||
navbar.classList.remove('nav-hidden');
|
||
navbar.classList.add('nav-visible');
|
||
}
|
||
});
|
||
|
||
// 案例卡片 3D 倾斜效果
|
||
document.querySelectorAll('.case-card').forEach(card => {
|
||
card.addEventListener('mousemove', (e) => {
|
||
const rect = card.getBoundingClientRect();
|
||
const x = e.clientX - rect.left;
|
||
const y = e.clientY - rect.top;
|
||
|
||
const centerX = rect.width / 2;
|
||
const centerY = rect.height / 2;
|
||
|
||
const rotateX = (y - centerY) / 20;
|
||
const rotateY = (centerX - x) / 20;
|
||
|
||
card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
|
||
});
|
||
|
||
card.addEventListener('mouseleave', () => {
|
||
card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0)';
|
||
});
|
||
});
|
||
|
||
/* 预约咨询按钮点击事件 */
|
||
function handleNavigate() {
|
||
window.location.href = '#contactUS';
|
||
}
|
||
</script>
|
||
</body>
|
||
|
||
</html> |