Compare commits
20 Commits
049ec90b9b
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
a126191f1d
|
|||
|
5a869df8f6
|
|||
|
0354c5e400
|
|||
|
f815664ca6
|
|||
|
9d591f123d
|
|||
|
027f9906a1
|
|||
|
b5ad85d899
|
|||
|
0f5cb55f27
|
|||
|
6fa2fa4c36
|
|||
|
169b8f929f
|
|||
|
e26b2c7d9c
|
|||
|
cb1490d5a2
|
|||
|
35b0630625
|
|||
|
5453a8f462
|
|||
|
9d5fa108e5
|
|||
|
6237a90ad3
|
|||
|
30464f718b
|
|||
|
893dc06a58
|
|||
|
9452d41781
|
|||
|
901af55cd9
|
1
.astro/types.d.ts
vendored
1
.astro/types.d.ts
vendored
@@ -1,2 +1 @@
|
||||
/// <reference types="astro/client" />
|
||||
/// <reference path="content.d.ts" />
|
||||
201
AGENTS.md
Normal file
201
AGENTS.md
Normal file
@@ -0,0 +1,201 @@
|
||||
# AGENTS.md
|
||||
|
||||
This file provides guidelines for agentic coding agents working in this repository.
|
||||
|
||||
## Tech Stack
|
||||
|
||||
- **Framework**: Astro 5.7.3 - Static site generator
|
||||
- **Styling**: Tailwind CSS 3.4.19 with custom theme
|
||||
- **Package Manager**: pnpm 10.29.2
|
||||
- **TypeScript**: 5.9.3 with @astrojs/check
|
||||
- **Icons**: FontAwesome 4.7.0 (CDN)
|
||||
|
||||
## Build & Development Commands
|
||||
|
||||
```bash
|
||||
# Development
|
||||
pnpm dev # Start dev server at http://localhost:4321
|
||||
pnpm start # Alias for pnpm dev
|
||||
|
||||
# Build & Quality
|
||||
pnpm build # Run astro check then build (production)
|
||||
pnpm preview # Preview production build locally
|
||||
|
||||
# Direct Astro commands
|
||||
pnpm astro <command> # Run any astro command directly
|
||||
```
|
||||
|
||||
**Note**: No test framework is currently configured. When adding tests, first check with the maintainers.
|
||||
|
||||
## Project Structure
|
||||
|
||||
```
|
||||
src/
|
||||
├── layouts/Layout.astro # Main layout with navigation
|
||||
├── pages/ # Route pages (use .astro files)
|
||||
│ ├── index.astro # Home page
|
||||
│ └── [route]/index.astro
|
||||
├── components/
|
||||
│ └── sections/ # Reusable section components
|
||||
└── styles/styles.css # Global styles
|
||||
```
|
||||
|
||||
## Code Style Guidelines
|
||||
|
||||
### Astro Components
|
||||
|
||||
- File extension: `.astro`
|
||||
- Frontmatter uses `---` delimiters
|
||||
- Import components at the top of the frontmatter section
|
||||
- Use TypeScript for type annotations in frontmatter and `<script>` tags
|
||||
|
||||
```astro
|
||||
---
|
||||
import { someComponent } from '../components/some-component.astro';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
activeNav?: string;
|
||||
}
|
||||
|
||||
const { title, activeNav = 'home' } = Astro.props;
|
||||
---
|
||||
```
|
||||
|
||||
### Imports
|
||||
|
||||
- Import Astro components with relative paths: `import Component from '../components/Component.astro'`
|
||||
- Import external libraries normally: `import { defineConfig } from 'astro/config'`
|
||||
- No default exports in components (Astro handles this)
|
||||
|
||||
### Styling with Tailwind CSS
|
||||
|
||||
- Use Tailwind utility classes for all styling
|
||||
- Custom colors available: `primary` (#165DFF), `secondary` (#36D399), `dark` (#1E293B), `light` (#F8FAFC)
|
||||
- Custom font family: `font-inter` (Inter, system-ui, sans-serif)
|
||||
- Responsive design: mobile-first approach with `md:`, `lg:` breakpoints
|
||||
- Hover states: `hover:`, `group-hover:`
|
||||
- Transitions: `transition-all duration-300` for consistent animation timing
|
||||
|
||||
### Naming Conventions
|
||||
|
||||
- **Components**: PascalCase (e.g., `Hero.astro`, `DataVisualization.astro`)
|
||||
- **Pages**: index.astro in route directories
|
||||
- **Props**: camelCase (e.g., `activeNav`, `title`)
|
||||
- **IDs for CSS/JS**: kebab-case (e.g., `data-visualization`, `contact-info`)
|
||||
- **CSS classes**: Tailwind utilities only (custom classes in `<style>` tags for animations)
|
||||
- **Functions**: camelCase (e.g., `getNavLinkClass`)
|
||||
|
||||
### Layout Pattern
|
||||
|
||||
- All pages use `<Layout>` component with `activeNav` prop for navigation highlighting
|
||||
- Navigation items defined in Layout.astro: home, qazk, customization, partnership
|
||||
- Main content wrapped in `<main>` tag
|
||||
|
||||
```astro
|
||||
<Layout title="Page Title" activeNav="nav-id">
|
||||
<main>
|
||||
<Content />
|
||||
</main>
|
||||
</Layout>
|
||||
```
|
||||
|
||||
### Scripts
|
||||
|
||||
- Inline scripts: use `<script is:inline>` for critical initialization
|
||||
- Regular scripts: use `<script>` tag without attributes
|
||||
- Wrap in IIFE to avoid global scope pollution: `(function() { ... })();`
|
||||
- Use TypeScript annotations in script tags
|
||||
- Event listeners: use `{ passive: true }` for scroll events where applicable
|
||||
|
||||
### TypeScript
|
||||
|
||||
- Enable type checking by running `astro check` before builds
|
||||
- Use interfaces for component props
|
||||
- Type DOM elements with assertions when needed: `(element as HTMLElement)`
|
||||
|
||||
### Accessibility
|
||||
|
||||
- Use semantic HTML: `<section>`, `<header>`, `<nav>`, `<main>`, `<footer>`
|
||||
- Include `alt` attributes on images
|
||||
- Use ARIA labels where needed
|
||||
- Ensure keyboard navigation works
|
||||
|
||||
### Images
|
||||
|
||||
- Prefer WebP format for images: `image.webp`
|
||||
- Place images in `public/img/` directory
|
||||
- Reference with absolute paths: `/img/image.webp`
|
||||
- Use responsive sizing classes: `w-full h-full object-cover`
|
||||
|
||||
### Color Usage
|
||||
|
||||
- Primary actions: `bg-primary` (#165DFF)
|
||||
- Secondary/success: `text-secondary` (#36D399)
|
||||
- Backgrounds: `bg-slate-50`, `bg-white`, `bg-dark`
|
||||
- Text: `text-gray-900`, `text-gray-600`, `text-white`
|
||||
- Gradients: `bg-gradient-to-r from-blue-600 to-indigo-600`
|
||||
|
||||
### Icons
|
||||
|
||||
- Use FontAwesome 4.7.0 via CDN
|
||||
- Class pattern: `fa fa-icon-name`
|
||||
- Size classes: `text-lg`, `text-xl`, `text-2xl`
|
||||
|
||||
### Animation Patterns
|
||||
|
||||
- Use Tailwind `transition-all duration-300` for consistent animations
|
||||
- Hover effects: `group-hover:scale-[1.02]`, `hover:shadow-lg`
|
||||
- Keyframe animations in `<style>` tags for complex animations
|
||||
- Fade/scale transforms common
|
||||
|
||||
### Responsive Design
|
||||
|
||||
- Mobile-first approach
|
||||
- Breakpoints: `sm:` (640px), `md:` (768px), `lg:` (1024px)
|
||||
- Hidden elements: `hidden lg:block` (hide on mobile)
|
||||
- Container: `max-w-7xl mx-auto px-4 lg:px-0`
|
||||
- Grid layouts: `grid-cols-1 md:grid-cols-2 lg:grid-cols-4`
|
||||
|
||||
### Error Handling
|
||||
|
||||
- Astro handles most errors at build time
|
||||
- Graceful degradation for optional features
|
||||
- Check for element existence before DOM manipulation: `if (element) { ... }`
|
||||
|
||||
### File Organization
|
||||
|
||||
- Keep components focused and single-purpose
|
||||
- Section components in `src/components/sections/`
|
||||
- Each page imports its required sections
|
||||
- Shared layout handles navigation and footer
|
||||
- Static assets in `public/` directory
|
||||
|
||||
## Adding New Pages
|
||||
|
||||
1. Create directory in `src/pages/[route]/`
|
||||
2. Create `index.astro` file
|
||||
3. Import `Layout` and use appropriate `activeNav` value
|
||||
4. Add navigation item to `Layout.astro`'s `navItems` array
|
||||
5. Import and render section components as needed
|
||||
|
||||
## Adding New Section Components
|
||||
|
||||
1. Create `.astro` file in `src/components/sections/`
|
||||
2. Use PascalCase naming
|
||||
3. Export component (Astro handles this automatically)
|
||||
4. Import in pages where needed
|
||||
5. Use semantic `<section>` tag with ID for navigation
|
||||
6. Follow Tailwind styling patterns
|
||||
|
||||
## Environment Variables
|
||||
|
||||
- Store in `.env` file
|
||||
- Access in Astro frontmatter: `import.meta.env.VARIABLE_NAME`
|
||||
- Commit `.env.example` if needed (currently not present)
|
||||
|
||||
## Deployment
|
||||
|
||||
- Build output: `dist/` directory
|
||||
- Static site generation - deploy to any static hosting
|
||||
- No server-side rendering requirements
|
||||
143
README.md
143
README.md
@@ -17,91 +17,60 @@ beifan.cn/
|
||||
│ │ └── Layout.astro # 主布局组件（包含导航栏、页脚等）
|
||||
│ ├── pages/
|
||||
│ │ ├── index.astro # 首页（公司介绍）
|
||||
│ │ ├── qazk/ # 企安智控页面
|
||||
│ │ │ └── index.astro
|
||||
│ │ ├── customization/ # 本地化定制页面
|
||||
│ │ │ └── index.astro
|
||||
│ │ ├── partnership/ # 生态合作页面
|
||||
│ │ │ └── index.astro
|
||||
│ │ ├── qazk/
|
||||
│ │ │ └── index.astro # 企安智控页面
|
||||
│ │ ├── customization/
|
||||
│ │ │ └── index.astro # 本地化定制页面
|
||||
│ │ ├── partnership/
|
||||
│ │ │ └── index.astro # 生态合作页面
|
||||
│ │ └── intro/ # 独立产品页面
|
||||
│ │ ├── qazk/ # 企安智控详情页
|
||||
│ │ ├── hardware/ # 硬件物联详情页
|
||||
│ │ ├── customized-deployment/ # 本地化定制详情页
|
||||
│ │ └── miniapp-manual/ # 小程序手册页
|
||||
│ │ ├── qazk/
|
||||
│ │ │ └── index.astro # 企安智控详情页
|
||||
│ │ ├── hardware/
|
||||
│ │ │ └── index.astro # 硬件物联详情页
|
||||
│ │ ├── customized-deployment/
|
||||
│ │ │ └── index.astro # 本地化定制详情页
|
||||
│ │ └── miniapp-manual/
|
||||
│ │ └── index.astro # 小程序手册页
|
||||
│ ├── components/
|
||||
│ │ └── sections/ # 各功能区块组件
|
||||
│ │ ├── Hero.astro
|
||||
│ │ ├── Timeline.astro
|
||||
│ │ ├── SaaS.astro
|
||||
│ │ ├── Customization.astro
|
||||
│ │ ├── Policy.astro
|
||||
│ │ ├── AccidentCases.astro
|
||||
│ │ ├── Hardware.astro
|
||||
│ │ ├── AIModel.astro
|
||||
│ │ ├── Honors.astro
|
||||
│ │ ├── Contact.astro
|
||||
│ │ ├── Partnership.astro
|
||||
│ │ └── Footer.astro
|
||||
│ │ ├── sections/
|
||||
│ │ │ ├── Hero.astro # Hero 区域组件
|
||||
│ │ │ ├── CompanyIntro.astro # 公司介绍组件
|
||||
│ │ │ ├── DevelopmentHistory.astro # 发展历程组件
|
||||
│ │ │ ├── DataVisualization.astro # 数据可视化组件
|
||||
│ │ │ ├── Honors.astro # 公司荣誉资质组件
|
||||
│ │ │ ├── Contact.astro # 联系方式组件
|
||||
│ │ │ ├── SaaS.astro # SaaS化系统组件
|
||||
│ │ │ ├── Policy.astro # 政策导向组件
|
||||
│ │ │ ├── AccidentCases.astro # 事故案例组件
|
||||
│ │ │ ├── Hardware.astro # 硬件物联组件
|
||||
│ │ │ ├── AIModel.astro # AI大模型组件
|
||||
│ │ │ ├── Customization.astro # 本地化定制组件
|
||||
│ │ │ ├── Partnership.astro # 生态合作组件
|
||||
│ │ │ └── Footer.astro # 页脚组件
|
||||
│ │ └── script.js # 组件脚本
|
||||
│ └── styles/
|
||||
│ └── global.css # 全局样式
|
||||
├── public/ # 静态资源
|
||||
│ ├── img/ # 图片资源
|
||||
│ ├── js/ # JavaScript 文件
|
||||
│ ├── docs/ # 文档资源
|
||||
│ └── intro/ # Intro 页面的静态资源
|
||||
│ ├── qazk/
|
||||
│ ├── hardware/
|
||||
│ ├── customized-deployment/
|
||||
│ └── miniapp-manual/
|
||||
├── astro.config.mjs # Astro 配置文件
|
||||
├── tailwind.config.mjs # Tailwind CSS 配置文件
|
||||
├── package.json # 项目依赖配置
|
||||
└── pnpm-lock.yaml # pnpm 锁文件
|
||||
```
|
||||
beifan.cn/
|
||||
├── src/
|
||||
│ ├── layouts/
|
||||
│ │ └── Layout.astro # 主布局组件（包含导航栏、页脚等）
|
||||
│ ├── pages/
|
||||
│ │ ├── index.astro # 首页（公司介绍）
|
||||
│ │ ├── core-business/ # 核心业务页面
|
||||
│ │ │ └── index.astro
|
||||
│ │ ├── partnership/ # 生态合作页面
|
||||
│ │ │ └── index.astro
|
||||
│ │ └── intro/ # 独立产品页面
|
||||
│ │ ├── qazk/ # 企安智控详情页
|
||||
│ │ ├── hardware/ # 硬件物联详情页
|
||||
│ │ ├── customized-deployment/ # 本地化定制详情页
|
||||
│ │ └── miniapp-manual/ # 小程序手册页
|
||||
│ ├── components/
|
||||
│ │ └── sections/ # 各功能区块组件
|
||||
│ │ ├── Hero.astro
|
||||
│ │ ├── Timeline.astro
|
||||
│ │ ├── SaaS.astro
|
||||
│ │ ├── Customization.astro
|
||||
│ │ ├── Policy.astro
|
||||
│ │ ├── AccidentCases.astro
|
||||
│ │ ├── Hardware.astro
|
||||
│ │ ├── AIModel.astro
|
||||
│ │ ├── Honors.astro
|
||||
│ │ ├── Contact.astro
|
||||
│ │ ├── Partnership.astro
|
||||
│ │ └── Footer.astro
|
||||
│ └── styles/
|
||||
│ └── global.css # 全局样式
|
||||
├── public/ # 静态资源
|
||||
│ ├── img/ # 图片资源
|
||||
│ ├── js/ # JavaScript 文件
|
||||
│ ├── docs/ # 文档资源
|
||||
│ └── intro/ # Intro 页面的静态资源
|
||||
│ ├── qazk/
|
||||
│ ├── hardware/
|
||||
│ ├── customized-deployment/
|
||||
│ └── miniapp-manual/
|
||||
├── astro.config.mjs # Astro 配置文件
|
||||
├── tailwind.config.mjs # Tailwind CSS 配置文件
|
||||
├── package.json # 项目依赖配置
|
||||
└── pnpm-lock.yaml # pnpm 锁文件
|
||||
│ └── styles.css # 全局样式
|
||||
├── public/ # 静态资源
|
||||
│ ├── img/ # 图片资源
|
||||
│ │ ├── partner-search.webp # 合作伙伴搜索图片
|
||||
│ │ ├── cooperation-process.webp # 合作流程图片
|
||||
│ │ └── shake-hands.webp # 握手合作图片
|
||||
│ ├── js/
|
||||
│ │ └── script.js # JavaScript 文件
|
||||
│ ├── docs/
|
||||
│ │ └── 合作申请表.xlsx # 文档资源
|
||||
│ ├── intro/ # Intro 页面的静态资源
|
||||
│ │ ├── qazk/ # 企安智控页面资源
|
||||
│ │ └── hardware/ # 硬件物联页面资源
|
||||
│ ├── favicon.ico # 网站图标
|
||||
│ ├── robots.txt # 爬虫规则
|
||||
│ └── sitemap.xml # 网站地图
|
||||
├── .env # 环境变量
|
||||
├── .gitignore # Git 忽略文件
|
||||
├── astro.config.mjs # Astro 配置文件
|
||||
├── tailwind.config.mjs # Tailwind CSS 配置文件
|
||||
└── package.json # 项目依赖配置
|
||||
```
|
||||
|
||||
## 页面结构
|
||||
@@ -110,8 +79,10 @@ beifan.cn/
|
||||
|
||||
包含以下内容区块：
|
||||
- **Hero 区域**：全场景产业数字化转型服务介绍
|
||||
- **公司介绍**：浙江贝凡发展历程时间轴
|
||||
- **公司荣誉资质**：企业资质展示
|
||||
- **公司介绍**：公司基本信息和发展理念
|
||||
- **发展历程**：浙江贝凡发展历程时间轴
|
||||
- **数据可视化**：企业关键数据展示（视觉理解大模型、SLA可用性、合作伙伴、软著专利）
|
||||
- **生态合作**：合作伙伴展示
|
||||
- **联系我们**：联系方式展示
|
||||
- **页脚**：版权信息、ICP备案等
|
||||
|
||||
@@ -134,7 +105,9 @@ beifan.cn/
|
||||
### 4. 生态合作页面 - `/partnership`
|
||||
|
||||
包含以下内容区块：
|
||||
- **生态合作**：合作伙伴信息
|
||||
- **携手合作，共创未来，共享市场红利**：合作优势卡片（包含8个合作优势）
|
||||
- **我们需要找的合作伙伴**：目标招商对象卡片（包含4类合作伙伴）
|
||||
- **合作流程**：合作流程卡片（包含4步合作流程）
|
||||
- **页脚**：版权信息、ICP备案等
|
||||
|
||||
### 4. 独立产品页面（Intro）
|
||||
|
||||
Binary file not shown.
BIN
public/img/cooperation-process.webp
Normal file
BIN
public/img/cooperation-process.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
BIN
public/img/industry-chemical.webp
Normal file
BIN
public/img/industry-chemical.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
BIN
public/img/industry-city-government.webp
Normal file
BIN
public/img/industry-city-government.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
BIN
public/img/industry-finance-retail.webp
Normal file
BIN
public/img/industry-finance-retail.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
BIN
public/img/industry-healthcare.webp
Normal file
BIN
public/img/industry-healthcare.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
BIN
public/img/industry-manufacturing.webp
Normal file
BIN
public/img/industry-manufacturing.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
BIN
public/img/industry-smart-care.webp
Normal file
BIN
public/img/industry-smart-care.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
BIN
public/img/industry-tourism.webp
Normal file
BIN
public/img/industry-tourism.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
BIN
public/img/industry-transportation.webp
Normal file
BIN
public/img/industry-transportation.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
BIN
public/img/mascot.webp
Normal file
BIN
public/img/mascot.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
public/img/official-traceability.jpg
Normal file
BIN
public/img/official-traceability.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 54 KiB |
BIN
public/img/partner-search.webp
Normal file
BIN
public/img/partner-search.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 14 KiB |
BIN
public/img/product-customization-3.webp
Normal file
BIN
public/img/product-customization-3.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 160 KiB |
BIN
public/img/product-customization-4.webp
Normal file
BIN
public/img/product-customization-4.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 129 KiB |
BIN
public/img/product-customization-5.webp
Normal file
BIN
public/img/product-customization-5.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
BIN
public/img/product-customization-6.webp
Normal file
BIN
public/img/product-customization-6.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
BIN
public/img/product-customization-7.webp
Normal file
BIN
public/img/product-customization-7.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
BIN
public/img/product-customization-8.webp
Normal file
BIN
public/img/product-customization-8.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
BIN
public/img/shake-hands.webp
Normal file
BIN
public/img/shake-hands.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
@@ -7,11 +7,12 @@
|
||||
<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">
|
||||
<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">AI 大模型</span> 应用场景
|
||||
系统平台应用场景<br>
|
||||
<span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600">AI大模型</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>
|
||||
<p class="text-gray-500 mt-6 max-w-2xl mx-auto text-lg leading-relaxed">
|
||||
无需替换硬件，即可为海量存量安防设备提供强大的<span class="text-blue-600 font-bold">视觉识别</span>和<span class="text-blue-600 font-bold">实时告警</span>能力
|
||||
<span class="text-blue-600 font-bold">700+ AI核心场景</span>，赋能产业数字化转型
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -261,15 +262,6 @@
|
||||
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-12">
|
||||
<a href="#contact-info" class="inline-flex items-center justify-center px-8 py-4 border border-transparent text-xl font-medium rounded-full shadow-lg text-white bg-primary hover:bg-blue-700 transition duration-300">
|
||||
700+ AI核心算法，赋能产业数字化全场景
|
||||
<svg class="ml-2 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="max-w-7xl mx-auto space-y-12 mt-12">
|
||||
|
||||
<div class="relative overflow-hidden bg-white rounded-[2.5rem] shadow-xl border border-blue-100 transition-all duration-500 hover:shadow-2xl group">
|
||||
@@ -320,149 +312,111 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 pt-4">
|
||||
<div class="bg-white p-8 md:p-10 rounded-[2.5rem] shadow-xl border border-slate-100">
|
||||
<h3 class="text-2xl md:text-3xl font-black text-gray-900 mb-10 flex items-center gap-3 text-center justify-center">
|
||||
<span class="w-1.5 h-8 bg-blue-600 rounded-full"></span>
|
||||
技术对比：从固定规则到深度理解
|
||||
</h3>
|
||||
|
||||
<div class="bg-white p-8 md:p-10 rounded-[2.5rem] shadow-xl border border-slate-100 flex flex-col">
|
||||
<h3 class="text-2xl font-black text-gray-900 mb-10 flex items-center gap-3">
|
||||
<span class="w-1.5 h-8 bg-blue-600 rounded-full"></span>
|
||||
技术对比：从固定规则到深度理解
|
||||
</h3>
|
||||
|
||||
<div class="space-y-10">
|
||||
<div class="relative pl-6 border-l-2 border-slate-100">
|
||||
<div class="absolute -left-[9px] top-0 w-4 h-4 bg-blue-600 rounded-full border-4 border-white shadow-sm"></div>
|
||||
<h4 class="text-lg font-bold text-gray-800 mb-4">1. 场景识别</h4>
|
||||
<div class="grid gap-4">
|
||||
<div class="bg-slate-50 p-5 rounded-2xl border border-slate-100 hover:bg-orange-50/50 hover:border-orange-200 transition-colors">
|
||||
<p class="text-base text-gray-700 leading-relaxed">
|
||||
<strong class="text-orange-600 font-bold">传统算法：</strong>
|
||||
依赖像素、颜色等固定特征，场景、光照一旦变化，识别能力便会失效，<span class="font-semibold text-orange-700">泛化能力弱</span>。
|
||||
</p>
|
||||
</div>
|
||||
<div class="bg-blue-600 p-5 rounded-2xl shadow-lg shadow-blue-100">
|
||||
<p class="text-base text-white leading-relaxed">
|
||||
<strong class="text-blue-100 font-bold">大模型方案：</strong>
|
||||
模拟人类视觉进行上下文理解，能<span class="font-semibold text-blue-100">自主适应复杂、多变的环境</span>，准确识别目标。
|
||||
</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 mb-16">
|
||||
<div class="space-y-6 bg-orange-50 p-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">
|
||||
<i class="fa fa-times text-white text-lg"></i>
|
||||
</div>
|
||||
<h4 class="text-xl font-bold text-orange-600">传统算法</h4>
|
||||
</div>
|
||||
|
||||
<div class="relative pl-6 border-l-2 border-slate-100">
|
||||
<div class="absolute -left-[9px] top-0 w-4 h-4 bg-blue-600 rounded-full border-4 border-white shadow-sm"></div>
|
||||
<h4 class="text-lg font-bold text-gray-800 mb-4">2. 误报警处理</h4>
|
||||
<div class="grid gap-4">
|
||||
<div class="bg-slate-50 p-5 rounded-2xl border border-slate-100 hover:bg-orange-50/50 hover:border-orange-200 transition-colors">
|
||||
<p class="text-base text-gray-700 leading-relaxed">
|
||||
<strong class="text-orange-600 font-bold">传统算法：</strong>
|
||||
无法区分真实威胁与环境干扰，<span class="font-semibold text-orange-700">误报率高</span>，耗费大量安保人力。
|
||||
</p>
|
||||
</div>
|
||||
<div class="bg-blue-600 p-5 rounded-2xl shadow-lg shadow-blue-100">
|
||||
<p class="text-base text-white leading-relaxed">
|
||||
<strong class="text-blue-100 font-bold">大模型方案：</strong>
|
||||
通过逻辑推理过滤无效信息，能识别“飘动的塑料袋”而非“火焰”，<span class="font-semibold text-blue-100">显著降低误报</span>。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-slate-50 p-6 rounded-2xl border-2 border-slate-300 shadow-sm">
|
||||
<h5 class="text-lg font-bold text-gray-800 mb-3">1. 场景识别</h5>
|
||||
<p class="text-gray-600 leading-relaxed">
|
||||
依赖固定特征，场景一旦变化，识别能力便会失效，<span class="font-semibold text-gray-700">泛化能力弱</span>。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-slate-50 p-6 rounded-2xl border-2 border-slate-300 shadow-sm">
|
||||
<h5 class="text-lg font-bold text-gray-800 mb-3">2. 误报警处理</h5>
|
||||
<p class="text-gray-600 leading-relaxed">
|
||||
无法区分真实威胁与环境干扰，<span class="font-semibold text-gray-700">误报率高</span>，耗费大量安保人力。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-slate-50 p-6 rounded-2xl border-2 border-slate-300 shadow-sm">
|
||||
<h5 class="text-lg font-bold text-gray-800 mb-3">3. 新任务部署</h5>
|
||||
<p class="text-gray-600 leading-relaxed">
|
||||
增加识别任务需重新编程和数周调试，且不能保证效果，<span class="font-semibold text-gray-700">成本高、周期长</span>。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative pl-6 border-l-2 border-slate-100">
|
||||
<div class="absolute -left-[9px] top-0 w-4 h-4 bg-blue-600 rounded-full border-4 border-white shadow-sm"></div>
|
||||
<h4 class="text-lg font-bold text-gray-800 mb-4">3. 新任务部署</h4>
|
||||
<div class="grid gap-4">
|
||||
<div class="bg-slate-50 p-5 rounded-2xl border border-slate-100 hover:bg-orange-50/50 hover:border-orange-200 transition-colors">
|
||||
<p class="text-base text-gray-700 leading-relaxed">
|
||||
<strong class="text-orange-600 font-bold">传统算法：</strong>
|
||||
增加识别任务需重新编程和数周模型训练，且不能保证训练效果，<span class="font-semibold text-orange-700">成本高、周期长</span>。
|
||||
</p>
|
||||
</div>
|
||||
<div class="bg-blue-600 p-5 rounded-2xl shadow-lg shadow-blue-100">
|
||||
<p class="text-base text-white leading-relaxed">
|
||||
<strong class="text-blue-100 font-bold">大模型方案：</strong>
|
||||
具备<span class="font-semibold text-blue-100">零样本/小样本学习能力</span>，仅需少量样本即可在短时间内完成部署。
|
||||
</p>
|
||||
</div>
|
||||
<div class="space-y-6 bg-blue-50 p-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">
|
||||
<i class="fa fa-check text-white text-lg"></i>
|
||||
</div>
|
||||
<h4 class="text-xl font-bold text-blue-600">AI大模型</h4>
|
||||
</div>
|
||||
|
||||
<div class="bg-blue-600 p-6 rounded-2xl border-2 border-blue-700 shadow-lg shadow-blue-100">
|
||||
<h5 class="text-lg font-bold text-white mb-3">1. 场景识别</h5>
|
||||
<p class="text-blue-100 leading-relaxed">
|
||||
模拟人类视觉理解，能<span class="font-semibold text-white">自主适应复杂、多变的环境</span>，准确识别目标。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-blue-600 p-6 rounded-2xl border-2 border-blue-700 shadow-lg shadow-blue-100">
|
||||
<h5 class="text-lg font-bold text-white mb-3">2. 误报警处理</h5>
|
||||
<p class="text-blue-100 leading-relaxed">
|
||||
通过逻辑推理过滤无效信息，准确识别目标特征，<span class="font-semibold text-white">显著降低误报</span>。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-blue-600 p-6 rounded-2xl border-2 border-blue-700 shadow-lg shadow-blue-100">
|
||||
<h5 class="text-lg font-bold text-white mb-3">3. 新任务部署</h5>
|
||||
<p class="text-blue-100 leading-relaxed">
|
||||
具备<span class="font-semibold text-white">零样本/小样本学习能力</span>，仅需少量样本即可在短时间内完成部署。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-8 md:p-10 rounded-[2.5rem] shadow-xl border border-slate-100 flex flex-col h-full">
|
||||
<h3 class="text-2xl font-black text-gray-900 mb-10 flex items-center gap-3">
|
||||
<div class="border-t border-slate-200 pt-10">
|
||||
<h3 class="text-2xl md:text-3xl font-black text-gray-900 mb-10 flex items-center gap-3 text-center justify-center">
|
||||
<span class="w-1.5 h-8 bg-blue-600 rounded-full"></span>
|
||||
核心优势：成本效益与部署模式
|
||||
</h3>
|
||||
|
||||
<div class="flex-grow space-y-8">
|
||||
<div class="flex gap-5 group">
|
||||
<div class="w-12 h-12 bg-blue-50 text-blue-600 rounded-2xl flex items-center justify-center shrink-0 group-hover:bg-blue-600 group-hover:text-white transition-all duration-300">
|
||||
<i class="fa fa-camera-retro text-lg"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-gray-900 text-lg mb-1 group-hover:text-blue-600 transition-colors">“利旧”原则，无需重新硬件部署</h4>
|
||||
<p class="text-gray-500 text-base leading-relaxed">支持对您现场已部署的<span class="text-blue-600 font-semibold italic">海康威视等主流品牌摄像头</span>进行直接利旧，无需采购昂贵的 AI 专用硬件。</p>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div class="flex flex-col items-center text-center p-4 bg-slate-50 rounded-2xl hover:bg-blue-50 transition-colors">
|
||||
<div class="w-14 h-14 bg-blue-50 text-blue-600 rounded-2xl flex items-center justify-center mb-3">
|
||||
<i class="fa fa-camera-retro text-xl"></i>
|
||||
</div>
|
||||
<h4 class="font-bold text-gray-900 mb-2">利旧原则</h4>
|
||||
<p class="text-gray-500 text-sm leading-relaxed">无需重新硬件部署，支持主流品牌摄像头直接利旧</p>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-5 group">
|
||||
<div class="w-12 h-12 bg-blue-50 text-blue-600 rounded-2xl flex items-center justify-center shrink-0 group-hover:bg-blue-600 group-hover:text-white transition-all duration-300">
|
||||
<i class="fa fa-puzzle-piece text-lg"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-gray-900 text-lg mb-1 group-hover:text-blue-600 transition-colors">高兼容性与平滑接入</h4>
|
||||
<p class="text-gray-500 text-base leading-relaxed">只要能提供稳定的视频流，即可通过我们的平台无缝接入<span class="text-blue-600 font-semibold">AI 大模型</span>，使其立即具备智慧识别能力。</p>
|
||||
<div class="flex flex-col items-center text-center p-4 bg-slate-50 rounded-2xl hover:bg-blue-50 transition-colors">
|
||||
<div class="w-14 h-14 bg-blue-50 text-blue-600 rounded-2xl flex items-center justify-center mb-3">
|
||||
<i class="fa fa-puzzle-piece text-xl"></i>
|
||||
</div>
|
||||
<h4 class="font-bold text-gray-900 mb-2">高兼容性</h4>
|
||||
<p class="text-gray-500 text-sm leading-relaxed">提供稳定视频流即可无缝接入，立即具备智慧识别能力</p>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-5 group">
|
||||
<div class="w-12 h-12 bg-blue-50 text-blue-600 rounded-2xl flex items-center justify-center shrink-0 group-hover:bg-blue-600 group-hover:text-white transition-all duration-300">
|
||||
<i class="fa fa-line-chart text-lg"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-gray-900 text-lg mb-1 group-hover:text-blue-600 transition-colors">显著的成本节约</h4>
|
||||
<p class="text-gray-500 text-base leading-relaxed">此方案可避免替换 AI 摄像头的巨额前期投入，将有限的预算更精准地用于<span class="text-blue-600 font-semibold">AI 算法订阅与数据应用服务</span>。</p>
|
||||
<div class="flex flex-col items-center text-center p-4 bg-slate-50 rounded-2xl hover:bg-blue-50 transition-colors">
|
||||
<div class="w-14 h-14 bg-blue-50 text-blue-600 rounded-2xl flex items-center justify-center mb-3">
|
||||
<i class="fa fa-rocket text-xl"></i>
|
||||
</div>
|
||||
<h4 class="font-bold text-gray-900 mb-2">快速部署</h4>
|
||||
<p class="text-gray-500 text-sm leading-relaxed">数日内完成指定摄像头AI赋能，快速进行效果验证</p>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-5 group">
|
||||
<div class="w-12 h-12 bg-blue-50 text-blue-600 rounded-2xl flex items-center justify-center shrink-0 group-hover:bg-blue-600 group-hover:text-white transition-all duration-300">
|
||||
<i class="fa fa-rocket text-lg"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-gray-900 text-lg mb-1 group-hover:text-blue-600 transition-colors">快速部署与验证</h4>
|
||||
<p class="text-gray-500 text-base leading-relaxed">方案基于软件部署，可在<span class="text-blue-600 font-semibold">数日内完成对指定摄像头的 AI 赋能</span>，并快速进行效果验证。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-5 group">
|
||||
<div class="w-12 h-12 bg-blue-50 text-blue-600 rounded-2xl flex items-center justify-center shrink-0 group-hover:bg-blue-600 group-hover:text-white transition-all duration-300">
|
||||
<i class="fa fa-sliders text-lg"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-gray-900 text-lg mb-1 group-hover:text-blue-600 transition-colors">弹性扩展与订阅</h4>
|
||||
<p class="text-gray-500 text-base leading-relaxed">您可以根据业务需求，随时增减需要 AI 分析的摄像头数量。灵活的算法订阅模式让支出与业务增长精准匹配。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-5 group">
|
||||
<div class="w-12 h-12 bg-blue-50 text-blue-600 rounded-2xl flex items-center justify-center shrink-0 group-hover:bg-blue-600 group-hover:text-white transition-all duration-300">
|
||||
<i class="fa fa-sitemap text-lg"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-gray-900 text-lg mb-1 group-hover:text-blue-600 transition-colors">统一平台与数据整合</h4>
|
||||
<p class="text-gray-500 text-base leading-relaxed">所有分析产生的结构化数据都将汇入<span class="text-blue-600 font-semibold">统一管理平台</span>，为后续深层次业务挖掘奠定基础。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-5 group">
|
||||
<div class="w-12 h-12 bg-blue-50 text-blue-600 rounded-2xl flex items-center justify-center shrink-0 group-hover:bg-blue-600 group-hover:text-white transition-all duration-300">
|
||||
<i class="fa fa-refresh text-lg"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-gray-900 text-lg mb-1 group-hover:text-blue-600 transition-colors">算法持续进化</h4>
|
||||
<p class="text-gray-500 text-base leading-relaxed">您接入的是一个<span class="text-blue-600 font-semibold">持续进化的算法生态</span>。大模型不断优化，无需操作即可在云端自动获取最新识别能力。</p>
|
||||
<div class="flex flex-col items-center text-center p-4 bg-slate-50 rounded-2xl hover:bg-blue-50 transition-colors">
|
||||
<div class="w-14 h-14 bg-blue-50 text-blue-600 rounded-2xl flex items-center justify-center mb-3">
|
||||
<i class="fa fa-refresh text-xl"></i>
|
||||
</div>
|
||||
<h4 class="font-bold text-gray-900 mb-2">持续进化</h4>
|
||||
<p class="text-gray-500 text-sm leading-relaxed">接入持续进化的算法生态，云端自动获取最新识别能力</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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="text-center mb-12 relative">
|
||||
@@ -135,7 +135,7 @@
|
||||
<div class="space-y-4 flex-grow">
|
||||
<div class="bg-blue-50/50 p-4 rounded-xl border border-blue-100">
|
||||
<h5 class="font-bold text-blue-600 text-sm mb-1 uppercase">事故原因 · ROOT CAUSE</h5>
|
||||
<p class="text-base text-gray-700 leading-relaxed">架空层停放的<span class="text-blue-600 font-semibold">违规改装电动自行车</span>热失控起火。</p>
|
||||
<p class="text-base text-gray-700 leading-relaxed">停放的<span class="text-blue-600 font-semibold">违规改装电动自行车</span>热失控起火。</p>
|
||||
</div>
|
||||
<div class="bg-red-50/50 p-4 rounded-xl border border-red-100">
|
||||
<h5 class="font-bold text-red-600 text-sm mb-1 uppercase">损失情况 · IMPACT</h5>
|
||||
@@ -156,7 +156,7 @@
|
||||
<div class="space-y-4 flex-grow">
|
||||
<div class="bg-blue-50/50 p-4 rounded-xl border border-blue-100">
|
||||
<h5 class="font-bold text-blue-600 text-sm mb-1 uppercase">事故原因 · ROOT CAUSE</h5>
|
||||
<p class="text-base text-gray-700 leading-relaxed">违规带压密封操作引发爆炸；设备安全管理<span class="text-blue-600 font-semibold">缺失</span>。</p>
|
||||
<p class="text-base text-gray-700 leading-relaxed">违规带压密封操作引发爆炸，安全管理<span class="text-blue-600 font-semibold">缺失</span>。</p>
|
||||
</div>
|
||||
<div class="bg-red-50/50 p-4 rounded-xl border border-red-100">
|
||||
<h5 class="font-bold text-red-600 text-sm mb-1 uppercase">损失情况 · IMPACT</h5>
|
||||
|
||||
39
src/components/sections/CompanyIntro.astro
Normal file
39
src/components/sections/CompanyIntro.astro
Normal file
@@ -0,0 +1,39 @@
|
||||
<section id="about-us" class="bg-slate-50">
|
||||
<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="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">
|
||||
<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-12 lg:p-16 border border-blue-100/50 shadow-2xl shadow-blue-200/20">
|
||||
<div class="flex flex-col md:flex-row gap-8 md:gap-12 items-center">
|
||||
<div class="flex-1">
|
||||
<div class="inline-flex items-center gap-2 px-4 py-2 bg-blue-500/10 rounded-full mb-6">
|
||||
<span class="w-2 h-2 bg-blue-500 rounded-full animate-pulse"></span>
|
||||
<span class="text-blue-600 text-sm font-semibold tracking-wider uppercase">About Us</span>
|
||||
</div>
|
||||
<p class="text-gray-700 text-base md:text-lg leading-relaxed mb-6">
|
||||
浙江贝凡 2019 年 2 月成立，总部坐落于美丽的西子湖畔 · 杭州，贝凡二字源于<span class="text-blue-600 font-bold">"赢"</span>字之精髓，<span class="text-blue-600 font-bold">"贝"</span>象征取财有道，坚守商业本质，<span class="text-blue-600 font-bold">"凡"</span>代表匠心守拙，深耕技术创新。
|
||||
</p>
|
||||
<p class="text-gray-600 text-base md:text-lg leading-relaxed">
|
||||
依托自主研发，聚焦<span class="text-blue-600 font-bold">系统研发定制</span>及<span class="text-blue-600 font-bold">自研SaaS系统</span>两大核心板块。依托多模态系统集成、AI视觉大模型等前沿技术，构建智能化、数字化、信息化服务体系；业务覆盖企业数字化转型、政企协同治理、本地化项目交付。
|
||||
</p>
|
||||
<p class="text-gray-600 text-base md:text-lg leading-relaxed mt-6">
|
||||
公司始终以<span class="text-blue-600 font-bold">"应用为导向，以系统为核心"</span>筑牢技术根基，未来将持续系统迭代与多场景融合，为推动行业数字化转型赋能。
|
||||
</p>
|
||||
</div>
|
||||
<div class="md:w-1/3 relative flex items-center justify-center">
|
||||
<img src="/img/mascot.webp" alt="公司吉祥物" class="w-2/3 h-auto object-contain transform hover:scale-105 transition-transform duration-500">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -1,16 +1,13 @@
|
||||
---
|
||||
---
|
||||
<section id="contact-info" class="py-8 mb-16 bg-gray-50">
|
||||
<section id="contact-info" class="pb-24 bg-gray-50">
|
||||
<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="text-center">
|
||||
<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-blue-600 mx-auto mt-6 rounded-full"></div>
|
||||
<p class="text-gray-500 mt-6 max-w-2xl mx-auto text-lg leading-relaxed">
|
||||
让我们一起开启数字化之旅
|
||||
</p>
|
||||
<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>
|
||||
|
||||
@@ -18,32 +15,37 @@
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
|
||||
<div class="bg-white p-8 rounded-2xl shadow-xl border border-gray-100 flex flex-col items-center text-center
|
||||
transition-all duration-500 hover:shadow-2xl hover:scale-[1.02] hover:-translate-y-2">
|
||||
<div class="flex-shrink-0 w-16 h-16 border-2 border-primary rounded-full flex items-center justify-center mb-4 bg-primary/10">
|
||||
<i class="fa fa-phone text-primary text-2xl"></i>
|
||||
<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-8 border border-blue-100/50 shadow-lg group-hover:shadow-blue-500/20 group-hover:scale-[1.02] group-hover:-translate-y-2 transition-all duration-300">
|
||||
<div class="relative z-10 flex-shrink-0 w-16 h-16 border-2 border-primary rounded-full flex items-center justify-center mb-4 bg-gradient-to-br from-blue-500/10 to-blue-600/5 shadow-lg">
|
||||
<i class="fa fa-phone text-primary text-2xl"></i>
|
||||
</div>
|
||||
<h4 class="font-extrabold text-xl mb-1 text-gray-800">合作咨询</h4>
|
||||
<a href="tel:4009985710" class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-blue-700 hover:scale-110 transition text-lg font-extrabold inline-block">400-998-5710</a>
|
||||
</div>
|
||||
<h4 class="font-extrabold text-xl mb-1 text-gray-800">合作咨询</h4>
|
||||
<a href="tel:4009985710" class="text-primary hover:text-blue-600 transition text-lg font-extrabold">400-998-5710</a>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-8 rounded-2xl shadow-xl border border-gray-100 flex flex-col items-center text-center
|
||||
transition-all duration-500 hover:shadow-2xl hover:scale-[1.02] hover:-translate-y-2">
|
||||
<div class="flex-shrink-0 w-16 h-16 border-2 border-primary rounded-full flex items-center justify-center mb-4 bg-primary/10">
|
||||
<i class="fa fa-envelope text-primary text-2xl"></i>
|
||||
<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-8 border border-blue-100/50 shadow-lg group-hover:shadow-blue-500/20 group-hover:scale-[1.02] group-hover:-translate-y-2 transition-all duration-300">
|
||||
<div class="relative z-10 flex-shrink-0 w-16 h-16 border-2 border-primary rounded-full flex items-center justify-center mb-4 bg-gradient-to-br from-blue-500/10 to-blue-600/5 shadow-lg">
|
||||
<i class="fa fa-envelope text-primary text-2xl"></i>
|
||||
</div>
|
||||
<h4 class="font-extrabold text-xl mb-1 text-gray-800">电子邮箱</h4>
|
||||
<a href="mailto:zjbeifan@126.com" class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-blue-700 hover:scale-110 transition text-lg font-medium break-all inline-block">zjbeifan@126.com</a>
|
||||
</div>
|
||||
<h4 class="font-extrabold text-xl mb-1 text-gray-800">电子邮箱</h4>
|
||||
<a href="mailto:zjbeifan@126.com" class="text-primary hover:text-blue-600 transition text-lg font-medium break-all">zjbeifan@126.com</a>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-8 rounded-2xl shadow-xl border border-gray-100 flex flex-col items-center text-center
|
||||
transition-all duration-500 hover:shadow-2xl hover:scale-[1.02] hover:-translate-y-2">
|
||||
<div class="flex-shrink-0 w-16 h-16 border-2 border-primary rounded-full flex items-center justify-center mb-4 bg-primary/10">
|
||||
<i class="fa fa-map-marker text-primary text-2xl"></i>
|
||||
<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-8 border border-blue-100/50 shadow-lg group-hover:shadow-blue-500/20 group-hover:scale-[1.02] group-hover:-translate-y-2 transition-all duration-300">
|
||||
<div class="relative z-10 flex-shrink-0 w-16 h-16 border-2 border-primary rounded-full flex items-center justify-center mb-4 bg-gradient-to-br from-blue-500/10 to-blue-600/5 shadow-lg">
|
||||
<i class="fa fa-map-marker text-primary text-2xl"></i>
|
||||
</div>
|
||||
<h4 class="font-extrabold text-xl mb-1 text-gray-800">公司地址</h4>
|
||||
<p class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-blue-700 text-base font-medium">浙江省杭州市余杭区润珹置地中心1幢</p>
|
||||
</div>
|
||||
<h4 class="font-extrabold text-xl mb-1 text-gray-800">公司地址</h4>
|
||||
<p class="text-gray-600 text-base">浙江省杭州市余杭区杭行路1499号润珹置地中心</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,283 +2,367 @@
|
||||
---
|
||||
<section class="bg-slate-50 overflow-hidden">
|
||||
<div class="max-w-7xl mx-auto space-y-24 px-4 lg:px-0">
|
||||
<div class="relative">
|
||||
<div class="relative flex flex-col md:flex-row md:items-center mb-10 md:mb-14 px-3 md:px-0">
|
||||
<div class="absolute left-0 w-full h-16 md:h-14 bg-indigo-50/50 -z-10 rounded-r-full"></div>
|
||||
|
||||
<div class="flex items-start md:items-center">
|
||||
<div class="w-2.5 h-12 md:h-12 bg-indigo-600 rounded-full shadow-[4px_0_12px_rgba(79,70,229,0.4)] flex-shrink-0 mt-1 md:mt-0"></div>
|
||||
<style>
|
||||
</style>
|
||||
|
||||
<div class="ml-4 flex flex-col md:flex-row md:items-center gap-2 md:gap-6">
|
||||
|
||||
<div class="flex items-center">
|
||||
<div class="relative flex items-center justify-center">
|
||||
<span class="absolute -top-4 -left-2 text-5xl md:text-5xl font-black text-indigo-600/10 select-none">02</span>
|
||||
|
||||
<div class="flex items-center">
|
||||
<span class="text-indigo-600 font-black text-xl md:text-2xl tracking-tight">核心业务</span>
|
||||
<span class="flex items-center justify-center bg-indigo-600 text-white w-9 h-9 md:w-10 md:h-10 rounded-xl shadow-md shadow-indigo-200 text-xl md:text-2xl font-black mx-2">
|
||||
2
|
||||
</span>
|
||||
<span class="text-indigo-600 font-black text-xl md:text-2xl tracking-tight">：</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col justify-center">
|
||||
<h3 class="text-2xl md:text-3xl font-black text-gray-900 tracking-tight leading-none">
|
||||
本地化定制
|
||||
</h3>
|
||||
<div class="flex items-center gap-2 mt-1.5">
|
||||
<span class="h-1 w-5 bg-indigo-600 rounded-full"></span>
|
||||
<span class="text-xs md:text-xs text-indigo-500 font-bold uppercase tracking-[0.1em] md:tracking-[0.2em] leading-none">
|
||||
Local Customization Service
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="bg-white p-4 md:p-10 rounded-3xl shadow-2xl border border-indigo-100 transition-all duration-500">
|
||||
|
||||
<div class="flex flex-col md:flex-row items-center gap-8 md:gap-16 mb-12">
|
||||
<div class="md:w-5/12 w-[85%] relative">
|
||||
<div class="absolute -inset-4 bg-indigo-400/10 blur-3xl"></div>
|
||||
<div class="relative overflow-hidden rounded-2xl shadow-[0_20px_50px_rgba(79,70,229,0.2)] border border-white aspect-video">
|
||||
<img id="slider-image" src="/img/product-customization-1.webp" alt="园区IOC" class="w-full h-full object-cover transition-opacity duration-500">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-gray-900/70 via-transparent to-transparent"></div>
|
||||
<div class="absolute bottom-4 left-6 text-white">
|
||||
<p id="slider-text" class="text-sm font-bold tracking-widest opacity-80 uppercase">园区IOC</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="max-w-7xl mx-auto space-y-6">
|
||||
<div class="grid lg:grid-cols-12 gap-8 lg:gap-16 items-stretch">
|
||||
|
||||
<div class="lg:col-span-4 flex flex-col">
|
||||
<div class="bg-slate-50/90 pb-4 rounded-3xl">
|
||||
<h2 class="text-4xl font-black text-gray-900 leading-[1.1] mb-6">
|
||||
全场景<span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600">产业数字化</span>
|
||||
</h2>
|
||||
<p class="text-gray-600 text-lg md:text-xl leading-[1.8] mb-8">
|
||||
<span class="text-indigo-600 font-extrabold">多模态软件系统研发</span>，
|
||||
场景覆盖多个重点行业，核心集中在
|
||||
<span class="text-gray-900 font-bold">化工能源、生产制造、金融零售、城市政务、交通运输、景区文旅</span>
|
||||
等领域，提供从需求、方案设计、系统开发、运维交付的
|
||||
<span class="relative inline-block">
|
||||
<span class="text-indigo-600 font-bold">全周期定制化服务</span>
|
||||
<span class="absolute bottom-0.5 left-0 w-full h-[2px] bg-indigo-200"></span>
|
||||
</span>，
|
||||
助力产业数字化转型
|
||||
<span class="text-indigo-600 font-black tracking-tight underline decoration-indigo-200 decoration-4 underline-offset-8">提质增效</span>。
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4 mb-8">
|
||||
<div class="bg-indigo-50/50 p-4 rounded-2xl border border-indigo-100">
|
||||
<div class="text-indigo-600 font-bold text-2xl mb-1">700+</div>
|
||||
<div class="text-gray-500 text-[10px] sm:text-xs tracking-wider font-bold uppercase">自研核心算法</div>
|
||||
</div>
|
||||
<div class="bg-blue-50/50 p-4 rounded-2xl border border-blue-100">
|
||||
<div class="text-blue-600 font-bold text-2xl mb-1">99.99%+</div>
|
||||
<div class="text-gray-500 text-[10px] sm:text-xs tracking-wider font-bold uppercase">SLA 服务可用性</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:w-7/12 w-full text-center md:text-left">
|
||||
<h2 class="text-3xl md:text-4xl font-extrabold text-gray-900 tracking-tight mb-4">
|
||||
多模态<span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600">软件系统研发</span>
|
||||
</h2>
|
||||
<p class="text-gray-700 text-lg md:text-xl leading-relaxed mb-6">
|
||||
场景覆盖多个重点行业，核心集中在化工能源、生产制造、金融零售、城市政务、交通运输、景区文旅等领域，提供从需求、方案设计、系统开发、运维交付的
|
||||
<span class="relative inline-block">
|
||||
<span class="text-indigo-600 font-bold">全周期定制化服务</span>
|
||||
<span class="absolute bottom-0.5 left-0 w-full h-[2px] bg-indigo-200"></span>
|
||||
</span>，
|
||||
助力产业数字化转型提质增效。
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4 mb-6">
|
||||
<div class="bg-indigo-50/50 p-4 rounded-2xl border border-indigo-100 flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-indigo-100 rounded-xl flex items-center justify-center text-indigo-600">
|
||||
<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="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 flex flex-col gap-4">
|
||||
<div class="flex-1 relative group overflow-hidden rounded-3xl border border-slate-100 shadow-md">
|
||||
<img src="/img/product-customization-1.webp" alt="AI定制技术" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-gray-900/70 via-transparent to-transparent"></div>
|
||||
<div class="absolute bottom-4 left-6 text-white">
|
||||
<p class="text-sm font-bold tracking-widest opacity-80 uppercase">园区IOC</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 relative group overflow-hidden rounded-3xl border border-slate-100 shadow-md">
|
||||
<img src="/img/product-customization-2.webp" alt="数字化应用" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-gray-900/70 via-transparent to-transparent"></div>
|
||||
<div class="absolute bottom-4 left-6 text-white">
|
||||
<p class="text-sm font-bold tracking-widest opacity-80 uppercase">数字孪生</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-indigo-600 font-bold text-2xl mb-1">100+</div>
|
||||
<div class="text-gray-500 text-[10px] sm:text-xs tracking-wider font-bold uppercase">成功案例</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="lg:col-span-8 grid grid-cols-1 md:grid-cols-2 gap-5 relative z-10">
|
||||
|
||||
<div class="group bg-white p-7 rounded-[2rem] border border-slate-100 shadow-sm hover:shadow-xl hover:border-indigo-200 transition-all duration-500 flex flex-col">
|
||||
<div class="flex items-center gap-4 mb-5">
|
||||
<div class="w-16 h-16 bg-indigo-50 rounded-2xl flex items-center justify-center text-indigo-600 group-hover:bg-indigo-600 group-hover:text-white transition-all">
|
||||
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="text-2xl font-black text-gray-900">化工能源</h4>
|
||||
</div>
|
||||
<p class="text-lg text-gray-700 leading-relaxed font-semibold">深耕危化品全流程管控体系，研发<span class="text-indigo-600 bg-indigo-50 px-1.5 py-0.5 rounded-md">储罐区动态风险评价、人员定位与安全预警平台</span>。</p>
|
||||
<div class="bg-blue-50/50 p-4 rounded-2xl border border-blue-100 flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center text-blue-600">
|
||||
<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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white p-7 rounded-[2rem] border border-slate-100 shadow-sm hover:shadow-xl hover:border-indigo-200 transition-all duration-500 flex flex-col">
|
||||
<div class="flex items-center gap-4 mb-5">
|
||||
<div class="w-16 h-16 bg-indigo-50 rounded-2xl flex items-center justify-center text-indigo-600 group-hover:bg-indigo-600 group-hover:text-white transition-all">
|
||||
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="text-2xl font-black text-gray-900">生产制造</h4>
|
||||
</div>
|
||||
<p class="text-lg text-gray-700 leading-relaxed font-semibold">聚焦核心生产管控，提供<span class="text-indigo-600 bg-indigo-50 px-1.5 py-0.5 rounded-md">MES执行系统、EAP设备自动化及AMHS物料搬运系统</span>。</p>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white p-7 rounded-[2rem] border border-slate-100 shadow-sm hover:shadow-xl hover:border-indigo-200 transition-all duration-500 flex flex-col">
|
||||
<div class="flex items-center gap-4 mb-5">
|
||||
<div class="w-16 h-16 bg-indigo-50 rounded-2xl flex items-center justify-center text-indigo-600 group-hover:bg-indigo-600 group-hover:text-white transition-all">
|
||||
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="text-2xl font-black text-gray-900">金融零售</h4>
|
||||
</div>
|
||||
<p class="text-lg text-gray-700 leading-relaxed font-semibold">研发高并发<span class="text-indigo-600 bg-indigo-50 px-1.5 py-0.5 rounded-md">大数据智能风控模型、反洗钱稽查及投资组合监控平台</span>。</p>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white p-7 rounded-[2rem] border border-slate-100 shadow-sm hover:shadow-xl hover:border-indigo-200 transition-all duration-500 flex flex-col">
|
||||
<div class="flex items-center gap-4 mb-5">
|
||||
<div class="w-16 h-16 bg-indigo-50 rounded-2xl flex items-center justify-center text-indigo-600 group-hover:bg-indigo-600 group-hover:text-white transition-all">
|
||||
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="text-2xl font-black text-gray-900">智慧养老</h4>
|
||||
</div>
|
||||
<p class="text-lg text-gray-700 leading-relaxed font-semibold">打造<span class="text-indigo-600 bg-indigo-50 px-1.5 py-0.5 rounded-md">智慧康养大脑</span>，集成毫米波雷达跌倒监测与居家健康实时预警。</p>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white p-7 rounded-[2rem] border border-slate-100 shadow-sm hover:shadow-xl hover:border-indigo-200 transition-all duration-500 flex flex-col">
|
||||
<div class="flex items-center gap-4 mb-5">
|
||||
<div class="w-16 h-16 bg-indigo-50 rounded-2xl flex items-center justify-center text-indigo-600 group-hover:bg-indigo-600 group-hover:text-white transition-all">
|
||||
<svg class="w-8 h-8" 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 1v5" />
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="text-2xl font-black text-gray-900">城市政务</h4>
|
||||
</div>
|
||||
<p class="text-lg text-gray-700 leading-relaxed font-semibold">主打治理中台，研发<span class="text-indigo-600 bg-indigo-50 px-1.5 py-0.5 rounded-md">超级智能体、一网统管及智能秒批审批系统</span>。</p>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white p-7 rounded-[2rem] border border-slate-100 shadow-sm hover:shadow-xl hover:border-indigo-200 transition-all duration-500 flex flex-col">
|
||||
<div class="flex items-center gap-4 mb-5">
|
||||
<div class="w-16 h-16 bg-indigo-50 rounded-2xl flex items-center justify-center text-indigo-600 group-hover:bg-indigo-600 group-hover:text-white transition-all">
|
||||
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h8a1 1 0 001-1zm0 0l5 4V12l-5 4z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="text-2xl font-black text-gray-900">交通运输</h4>
|
||||
</div>
|
||||
<p class="text-lg text-gray-700 leading-relaxed font-semibold">研发调度体系，包括<span class="text-indigo-600 bg-indigo-50 px-1.5 py-0.5 rounded-md">无人集卡调度、高铁/航空票务流量预测模型</span>。</p>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white p-7 rounded-[2rem] border border-slate-100 shadow-sm hover:shadow-xl hover:border-indigo-200 transition-all duration-500 flex flex-col">
|
||||
<div class="flex items-center gap-4 mb-5">
|
||||
<div class="w-16 h-16 bg-indigo-50 rounded-2xl flex items-center justify-center text-indigo-600 group-hover:bg-indigo-600 group-hover:text-white transition-all">
|
||||
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064" />
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="text-2xl font-black text-gray-900">景区文旅</h4>
|
||||
</div>
|
||||
<p class="text-lg text-gray-700 leading-relaxed font-semibold">提供全域数字化方案，研发<span class="text-indigo-600 bg-indigo-50 px-1.5 py-0.5 rounded-md">AR导览、客流预警及分销风控平台</span>。</p>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white p-7 rounded-[2rem] border border-slate-100 shadow-sm hover:shadow-xl hover:border-indigo-200 transition-all duration-500 flex flex-col">
|
||||
<div class="flex items-center gap-4 mb-5">
|
||||
<div class="w-16 h-16 bg-indigo-50 rounded-2xl flex items-center justify-center text-indigo-600 group-hover:bg-indigo-600 group-hover:text-white transition-all">
|
||||
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="text-2xl font-black text-gray-900">医疗健康</h4>
|
||||
</div>
|
||||
<p class="text-lg text-gray-700 leading-relaxed font-semibold">研发信息系统，涵盖<span class="text-indigo-600 bg-indigo-50 px-1.5 py-0.5 rounded-md">临床辅助决策(CDSS)、数字病人虚拟训练</span>。</p>
|
||||
<div>
|
||||
<div class="text-blue-600 font-bold text-2xl mb-1">7×24h</div>
|
||||
<div class="text-gray-500 text-[10px] sm:text-xs tracking-wider font-bold uppercase">响应支持</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative bg-white rounded-[3rem] p-10 md:p-14 shadow-[0_32px_64px_-16px_rgba(0,0,0,0.08)] border border-slate-100 overflow-hidden group">
|
||||
<div class="absolute -top-24 -right-24 w-96 h-96 bg-indigo-50 rounded-full blur-3xl opacity-60 transition-all duration-700 group-hover:scale-110"></div>
|
||||
<div class="absolute -bottom-24 -left-24 w-72 h-72 bg-blue-50 rounded-full blur-3xl opacity-60"></div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
|
||||
|
||||
<div class="group bg-white p-6 rounded-[2rem] border border-slate-100 shadow-sm hover:shadow-xl hover:border-indigo-200 transition-all duration-500 flex flex-col">
|
||||
<div class="relative overflow-hidden rounded-xl mb-5 aspect-video group-hover:scale-105 transition-transform duration-500">
|
||||
<img src="/img/industry-chemical.webp" alt="化工能源" class="w-full h-full object-cover">
|
||||
</div>
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-12 h-12 bg-indigo-50 rounded-xl flex items-center justify-center text-indigo-600 group-hover:bg-indigo-600 group-hover:text-white transition-all">
|
||||
<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="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="text-xl font-black text-gray-900">化工能源</h4>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 mb-3">
|
||||
<span class="text-indigo-600 border border-indigo-200 px-1.5 py-0.5 rounded-md">储罐区监控</span>
|
||||
<span class="text-indigo-600 border border-indigo-200 px-1.5 py-0.5 rounded-md">人员定位</span>
|
||||
<span class="text-indigo-600 border border-indigo-200 px-1.5 py-0.5 rounded-md">风险预警</span>
|
||||
<span class="text-indigo-600 border border-indigo-200 px-1.5 py-0.5 rounded-md">危化品管理</span>
|
||||
<span class="text-indigo-600 px-1.5 py-0.5 rounded-md">...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative z-10">
|
||||
<div class="flex flex-col lg:flex-row lg:items-center gap-10 lg:gap-16">
|
||||
<div class="group bg-white p-6 rounded-[2rem] border border-slate-100 shadow-sm hover:shadow-xl hover:border-indigo-200 transition-all duration-500 flex flex-col">
|
||||
<div class="relative overflow-hidden rounded-xl mb-5 aspect-video group-hover:scale-105 transition-transform duration-500">
|
||||
<img src="/img/industry-manufacturing.webp" alt="生产制造" class="w-full h-full object-cover">
|
||||
</div>
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-12 h-12 bg-indigo-50 rounded-xl flex items-center justify-center text-indigo-600 group-hover:bg-indigo-600 group-hover:text-white transition-all">
|
||||
<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="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="text-xl font-black text-gray-900">生产制造</h4>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 mb-3">
|
||||
<span class="text-indigo-600 border border-indigo-200 px-1.5 py-0.5 rounded-md">安全生产管理</span>
|
||||
<span class="text-indigo-600 border border-indigo-200 px-1.5 py-0.5 rounded-md">设备监控</span>
|
||||
<span class="text-indigo-600 border border-indigo-200 px-1.5 py-0.5 rounded-md">质量追溯</span>
|
||||
<span class="text-indigo-600 border border-indigo-200 px-1.5 py-0.5 rounded-md">工艺优化</span>
|
||||
<span class="text-indigo-600 px-1.5 py-0.5 rounded-md">...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-shrink-0">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<span class="w-3 h-3 rounded-full bg-indigo-600 shadow-[0_0_10px_rgba(79,70,229,0.4)]"></span>
|
||||
<span class="text-indigo-600 text-sm font-black tracking-[0.2em] uppercase">Industry Scale</span>
|
||||
</div>
|
||||
<h4 class="text-4xl md:text-5xl font-black text-gray-900 tracking-tighter leading-tight">
|
||||
全场景<br />
|
||||
<span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-blue-600">定制覆盖</span>
|
||||
</h4>
|
||||
<div class="group bg-white p-6 rounded-[2rem] border border-slate-100 shadow-sm hover:shadow-xl hover:border-indigo-200 transition-all duration-500 flex flex-col">
|
||||
<div class="relative overflow-hidden rounded-xl mb-5 aspect-video group-hover:scale-105 transition-transform duration-500">
|
||||
<img src="/img/industry-finance-retail.webp" alt="金融零售" class="w-full h-full object-cover">
|
||||
</div>
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-12 h-12 bg-indigo-50 rounded-xl flex items-center justify-center text-indigo-600 group-hover:bg-indigo-600 group-hover:text-white transition-all">
|
||||
<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="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="text-xl font-black text-gray-900">金融零售</h4>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 mb-3">
|
||||
<span class="text-indigo-600 border border-indigo-200 px-1.5 py-0.5 rounded-md">风险防控</span>
|
||||
<span class="text-indigo-600 border border-indigo-200 px-1.5 py-0.5 rounded-md">交易监控平台</span>
|
||||
<span class="text-indigo-600 border border-indigo-200 px-1.5 py-0.5 rounded-md">客户识别</span>
|
||||
<span class="text-indigo-600 border border-indigo-200 px-1.5 py-0.5 rounded-md">零售平台</span>
|
||||
<span class="text-indigo-600 px-1.5 py-0.5 rounded-md">...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white p-6 rounded-[2rem] border border-slate-100 shadow-sm hover:shadow-xl hover:border-indigo-200 transition-all duration-500 flex flex-col">
|
||||
<div class="relative overflow-hidden rounded-xl mb-5 aspect-video group-hover:scale-105 transition-transform duration-500">
|
||||
<img src="/img/industry-smart-care.webp" alt="智慧养老" class="w-full h-full object-cover">
|
||||
</div>
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-12 h-12 bg-indigo-50 rounded-xl flex items-center justify-center text-indigo-600 group-hover:bg-indigo-600 group-hover:text-white transition-all">
|
||||
<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.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="text-xl font-black text-gray-900">智慧养老</h4>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 mb-3">
|
||||
<span class="text-indigo-600 border border-indigo-200 px-1.5 py-0.5 rounded-md">养老监护系统</span>
|
||||
<span class="text-indigo-600 border border-indigo-200 px-1.5 py-0.5 rounded-md">健康监测</span>
|
||||
<span class="text-indigo-600 border border-indigo-200 px-1.5 py-0.5 rounded-md">紧急求助</span>
|
||||
<span class="text-indigo-600 border border-indigo-200 px-1.5 py-0.5 rounded-md">智能护理</span>
|
||||
<span class="text-indigo-600 px-1.5 py-0.5 rounded-md">...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white p-6 rounded-[2rem] border border-slate-100 shadow-sm hover:shadow-xl hover:border-indigo-200 transition-all duration-500 flex flex-col">
|
||||
<div class="relative overflow-hidden rounded-xl mb-5 aspect-video group-hover:scale-105 transition-transform duration-500">
|
||||
<img src="/img/industry-city-government.webp" alt="城市政务" class="w-full h-full object-cover">
|
||||
</div>
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-12 h-12 bg-indigo-50 rounded-xl flex items-center justify-center text-indigo-600 group-hover:bg-indigo-600 group-hover:text-white transition-all">
|
||||
<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="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 1v5" />
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="text-xl font-black text-gray-900">城市政务</h4>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 mb-3">
|
||||
<span class="text-indigo-600 border border-indigo-200 px-1.5 py-0.5 rounded-md">城市安全系统</span>
|
||||
<span class="text-indigo-600 border border-indigo-200 px-1.5 py-0.5 rounded-md">应急管理</span>
|
||||
<span class="text-indigo-600 border border-indigo-200 px-1.5 py-0.5 rounded-md">智慧城市</span>
|
||||
<span class="text-indigo-600 border border-indigo-200 px-1.5 py-0.5 rounded-md">政务服务</span>
|
||||
<span class="text-indigo-600 px-1.5 py-0.5 rounded-md">...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white p-6 rounded-[2rem] border border-slate-100 shadow-sm hover:shadow-xl hover:border-indigo-200 transition-all duration-500 flex flex-col">
|
||||
<div class="relative overflow-hidden rounded-xl mb-5 aspect-video group-hover:scale-105 transition-transform duration-500">
|
||||
<img src="/img/industry-transportation.webp" alt="交通运输" class="w-full h-full object-cover">
|
||||
</div>
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-12 h-12 bg-indigo-50 rounded-xl flex items-center justify-center text-indigo-600 group-hover:bg-indigo-600 group-hover:text-white transition-all">
|
||||
<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="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h8a1 1 0 001-1zm0 0l5 4V12l-5 4z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="text-xl font-black text-gray-900">交通运输</h4>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 mb-3">
|
||||
<span class="text-indigo-600 border border-indigo-200 px-1.5 py-0.5 rounded-md">交通监控</span>
|
||||
<span class="text-indigo-600 border border-indigo-200 px-1.5 py-0.5 rounded-md">智能调度平台</span>
|
||||
<span class="text-indigo-600 border border-indigo-200 px-1.5 py-0.5 rounded-md">安全预警</span>
|
||||
<span class="text-indigo-600 border border-indigo-200 px-1.5 py-0.5 rounded-md">轨迹追踪</span>
|
||||
<span class="text-indigo-600 px-1.5 py-0.5 rounded-md">...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white p-6 rounded-[2rem] border border-slate-100 shadow-sm hover:shadow-xl hover:border-indigo-200 transition-all duration-500 flex flex-col">
|
||||
<div class="relative overflow-hidden rounded-xl mb-5 aspect-video group-hover:scale-105 transition-transform duration-500">
|
||||
<img src="/img/industry-tourism.webp" alt="景区文旅" class="w-full h-full object-cover">
|
||||
</div>
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-12 h-12 bg-indigo-50 rounded-xl flex items-center justify-center text-indigo-600 group-hover:bg-indigo-600 group-hover:text-white transition-all">
|
||||
<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="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 stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="text-xl font-black text-gray-900">景区文旅</h4>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 mb-3">
|
||||
<span class="text-indigo-600 border border-indigo-200 px-1.5 py-0.5 rounded-md">客流管理</span>
|
||||
<span class="text-indigo-600 border border-indigo-200 px-1.5 py-0.5 rounded-md">安全监控平台</span>
|
||||
<span class="text-indigo-600 border border-indigo-200 px-1.5 py-0.5 rounded-md">应急响应</span>
|
||||
<span class="text-indigo-600 border border-indigo-200 px-1.5 py-0.5 rounded-md">智能导览</span>
|
||||
<span class="text-indigo-600 px-1.5 py-0.5 rounded-md">...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white p-6 rounded-[2rem] border border-slate-100 shadow-sm hover:shadow-xl hover:border-indigo-200 transition-all duration-500 flex flex-col">
|
||||
<div class="relative overflow-hidden rounded-xl mb-5 aspect-video group-hover:scale-105 transition-transform duration-500">
|
||||
<img src="/img/industry-healthcare.webp" alt="医疗健康" class="w-full h-full object-cover">
|
||||
</div>
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-12 h-12 bg-indigo-50 rounded-xl flex items-center justify-center text-indigo-600 group-hover:bg-indigo-600 group-hover:text-white transition-all">
|
||||
<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="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="text-xl font-black text-gray-900">医疗健康</h4>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 mb-3">
|
||||
<span class="text-indigo-600 border border-indigo-200 px-1.5 py-0.5 rounded-md">医院管理系统</span>
|
||||
<span class="text-indigo-600 border border-indigo-200 px-1.5 py-0.5 rounded-md">患者安全</span>
|
||||
<span class="text-indigo-600 border border-indigo-200 px-1.5 py-0.5 rounded-md">医疗数据</span>
|
||||
<span class="text-indigo-600 border border-indigo-200 px-1.5 py-0.5 rounded-md">远程医疗</span>
|
||||
<span class="text-indigo-600 px-1.5 py-0.5 rounded-md">...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-16 relative bg-white rounded-[3rem] p-10 md:p-14 shadow-[0_32px_64px_-16px_rgba(0,0,0,0.08)] border border-slate-100 overflow-hidden group">
|
||||
<div class="absolute -top-24 -right-24 w-96 h-96 bg-indigo-50 rounded-full blur-3xl opacity-60 transition-all duration-700 group-hover:scale-110"></div>
|
||||
<div class="absolute -bottom-24 -left-24 w-72 h-72 bg-blue-50 rounded-full blur-3xl opacity-60"></div>
|
||||
|
||||
<div class="relative z-10">
|
||||
<div class="flex flex-col lg:flex-row lg:items-center gap-10 lg:gap-16">
|
||||
|
||||
<div class="flex-shrink-0">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<span class="w-3 h-3 rounded-full bg-indigo-600 shadow-[0_0_10px_rgba(79,70,229,0.4)]"></span>
|
||||
<span class="text-indigo-600 text-sm font-black tracking-[0.2em] uppercase">Industry Scale</span>
|
||||
</div>
|
||||
<h4 class="text-4xl md:text-5xl font-black text-gray-900 tracking-tighter leading-tight">
|
||||
定制覆盖<br />
|
||||
<span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-blue-600">更多场景</span>
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<div class="hidden lg:block w-[2px] h-24 bg-slate-100"></div>
|
||||
|
||||
<div class="flex-1 flex flex-wrap gap-3">
|
||||
<span class="flex items-center gap-2 px-4 py-2 rounded-xl bg-slate-50 border border-slate-200 text-gray-700 text-sm font-bold hover:bg-white hover:border-indigo-400 hover:text-indigo-600 hover:shadow-md transition-all cursor-default group/tag">
|
||||
<svg class="w-4 h-4 text-gray-400 group-hover/tag:text-indigo-500 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
司法监管
|
||||
</span>
|
||||
|
||||
<span class="flex items-center gap-2 px-4 py-2 rounded-xl bg-slate-50 border border-slate-200 text-gray-700 text-sm font-bold hover:bg-white hover:border-indigo-400 hover:text-indigo-600 hover:shadow-md transition-all cursor-default group/tag">
|
||||
<svg class="w-4 h-4 text-gray-400 group-hover/tag:text-indigo-500 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
|
||||
</svg>
|
||||
智慧教育
|
||||
</span>
|
||||
|
||||
<span class="flex items-center gap-2 px-4 py-2 rounded-xl bg-slate-50 border border-slate-200 text-gray-700 text-sm font-bold hover:bg-white hover:border-indigo-400 hover:text-indigo-600 hover:shadow-md transition-all cursor-default group/tag">
|
||||
<svg class="w-4 h-4 text-gray-400 group-hover/tag:text-indigo-500 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
电力巡检
|
||||
</span>
|
||||
|
||||
<span class="flex items-center gap-2 px-4 py-2 rounded-xl bg-slate-50 border border-slate-200 text-gray-700 text-sm font-bold hover:bg-white hover:border-indigo-400 hover:text-indigo-600 hover:shadow-md transition-all cursor-default group/tag">
|
||||
<svg class="w-4 h-4 text-gray-400 group-hover/tag:text-indigo-500 transition-colors" 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" />
|
||||
</svg>
|
||||
环境监测
|
||||
</span>
|
||||
|
||||
<span class="flex items-center gap-2 px-4 py-2 rounded-xl bg-slate-50 border border-slate-200 text-gray-700 text-sm font-bold hover:bg-white hover:border-indigo-400 hover:text-indigo-600 hover:shadow-md transition-all cursor-default group/tag">
|
||||
<svg class="w-4 h-4 text-gray-400 group-hover/tag:text-indigo-500 transition-colors" 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 1v5" />
|
||||
</svg>
|
||||
物业楼宇
|
||||
</span>
|
||||
|
||||
<span class="flex items-center gap-2 px-4 py-2 rounded-xl bg-slate-50 border border-slate-200 text-gray-700 text-sm font-bold hover:bg-white hover:border-indigo-400 hover:text-indigo-600 hover:shadow-md transition-all cursor-default group/tag">
|
||||
<svg class="w-4 h-4 text-gray-400 group-hover/tag:text-indigo-500 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||
</svg>
|
||||
梯次利用
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="lg:w-[40%] group/info">
|
||||
<div class="relative p-8 rounded-[2.5rem] bg-indigo-600 shadow-[0_20px_40px_-12px_rgba(79,70,229,0.3)] transition-all duration-500 group-hover/info:scale-[1.02]">
|
||||
<div class="absolute top-0 right-0 p-6 opacity-20">
|
||||
<svg class="w-20 h-20 text-white" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="hidden lg:block w-[2px] h-24 bg-slate-100"></div>
|
||||
|
||||
<div class="flex-1 grid grid-cols-2 lg:flex lg:flex-wrap gap-4">
|
||||
<span class="flex items-center gap-2 px-5 py-3 lg:px-6 lg:py-3 rounded-2xl bg-slate-50 border border-slate-200 text-gray-700 text-base lg:text-lg font-bold hover:bg-white hover:border-indigo-400 hover:text-indigo-600 hover:shadow-md transition-all cursor-default group/tag">
|
||||
<svg class="w-5 h-5 text-gray-400 group-hover/tag:text-indigo-500 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
司法监管
|
||||
</span>
|
||||
|
||||
<span class="flex items-center gap-2 px-5 py-3 lg:px-6 lg:py-3 rounded-2xl bg-slate-50 border border-slate-200 text-gray-700 text-base lg:text-lg font-bold hover:bg-white hover:border-indigo-400 hover:text-indigo-600 hover:shadow-md transition-all cursor-default group/tag">
|
||||
<svg class="w-5 h-5 text-gray-400 group-hover/tag:text-indigo-500 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
|
||||
</svg>
|
||||
智慧教育
|
||||
</span>
|
||||
|
||||
<span class="flex items-center gap-2 px-5 py-3 lg:px-6 lg:py-3 rounded-2xl bg-slate-50 border border-slate-200 text-gray-700 text-base lg:text-lg font-bold hover:bg-white hover:border-indigo-400 hover:text-indigo-600 hover:shadow-md transition-all cursor-default group/tag">
|
||||
<svg class="w-5 h-5 text-gray-400 group-hover/tag:text-indigo-500 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
电力巡检
|
||||
</span>
|
||||
|
||||
<span class="flex items-center gap-2 px-5 py-3 lg:px-6 lg:py-3 rounded-2xl bg-slate-50 border border-slate-200 text-gray-700 text-base lg:text-lg font-bold hover:bg-white hover:border-indigo-400 hover:text-indigo-600 hover:shadow-md transition-all cursor-default group/tag">
|
||||
<svg class="w-5 h-5 text-gray-400 group-hover/tag:text-indigo-500 transition-colors" 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" />
|
||||
</svg>
|
||||
环境监测
|
||||
</span>
|
||||
|
||||
<span class="flex items-center gap-2 px-5 py-3 lg:px-6 lg:py-3 rounded-2xl bg-slate-50 border border-slate-200 text-gray-700 text-base lg:text-lg font-bold hover:bg-white hover:border-indigo-400 hover:text-indigo-600 hover:shadow-md transition-all cursor-default group/tag">
|
||||
<svg class="w-5 h-5 text-gray-400 group-hover/tag:text-indigo-500 transition-colors" 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 1v5" />
|
||||
</svg>
|
||||
物业楼宇
|
||||
</span>
|
||||
|
||||
<span class="flex items-center gap-2 px-5 py-3 lg:px-6 lg:py-3 rounded-2xl bg-slate-50 border border-slate-200 text-gray-700 text-base lg:text-lg font-bold hover:bg-white hover:border-indigo-400 hover:text-indigo-600 hover:shadow-md transition-all cursor-default group/tag">
|
||||
<svg class="w-5 h-5 text-gray-400 group-hover/tag:text-indigo-500 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||
</svg>
|
||||
梯次利用
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="lg:w-[40%] group/info">
|
||||
<div class="relative p-8 rounded-[2.5rem] bg-indigo-600 shadow-[0_20px_40px_-12px_rgba(79,70,229,0.3)] transition-all duration-500 group-hover/info:scale-[1.02]">
|
||||
<div class="absolute top-0 right-0 p-6 opacity-20">
|
||||
<svg class="w-20 h-20 text-white" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
<div class="relative z-10 flex flex-col gap-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="bg-white/20 p-2 rounded-lg backdrop-blur-sm">
|
||||
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="relative z-10 flex flex-col gap-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="bg-white/20 p-2 rounded-lg backdrop-blur-sm">
|
||||
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</span>
|
||||
<p class="text-white font-black text-2xl tracking-tight">不限行业</p>
|
||||
</div>
|
||||
<p class="text-indigo-50 text-lg leading-relaxed font-medium">
|
||||
依托底层自研算法，将数字化转型延伸至每一个细分业务场景。
|
||||
</p>
|
||||
</div>
|
||||
</span>
|
||||
<p class="text-white font-black text-2xl tracking-tight">不限行业</p>
|
||||
</div>
|
||||
<p class="text-indigo-50 text-lg leading-relaxed font-medium">
|
||||
依托底层自研算法，将数字化转型延伸至每一个细分业务场景。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-24"></div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const sliderImage = document.getElementById('slider-image');
|
||||
const sliderText = document.getElementById('slider-text');
|
||||
let currentIndex = 0;
|
||||
const slides = [
|
||||
{ src: '/img/product-customization-1.webp', text: '园区IOC' },
|
||||
{ src: '/img/product-customization-2.webp', text: '数字孪生' },
|
||||
{ src: '/img/product-customization-3.webp', text: '智慧医院' },
|
||||
{ src: '/img/product-customization-4.webp', text: '智慧园区' },
|
||||
{ src: '/img/product-customization-5.webp', text: '智慧社区' },
|
||||
{ src: '/img/product-customization-6.webp', text: '智慧农业' },
|
||||
{ src: '/img/product-customization-7.webp', text: '智慧楼宇' },
|
||||
{ src: '/img/product-customization-8.webp', text: '智慧商业' }
|
||||
];
|
||||
|
||||
function updateSlide() {
|
||||
if (!sliderImage || !sliderText) return;
|
||||
|
||||
sliderImage.style.opacity = '0';
|
||||
|
||||
setTimeout(() => {
|
||||
currentIndex = (currentIndex + 1) % slides.length;
|
||||
sliderImage.src = slides[currentIndex].src;
|
||||
sliderText.textContent = slides[currentIndex].text;
|
||||
sliderImage.style.opacity = '1';
|
||||
}, 500);
|
||||
}
|
||||
|
||||
function startAutoSlide() {
|
||||
setInterval(updateSlide, 5000);
|
||||
}
|
||||
|
||||
if (sliderImage && sliderText) {
|
||||
startAutoSlide();
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
97
src/components/sections/DataVisualization.astro
Normal file
97
src/components/sections/DataVisualization.astro
Normal 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>
|
||||
138
src/components/sections/DevelopmentHistory.astro
Normal file
138
src/components/sections/DevelopmentHistory.astro
Normal file
@@ -0,0 +1,138 @@
|
||||
<section id="timeline" class="bg-slate-50">
|
||||
<div class="max-w-7xl mx-auto px-4 lg:px-0 pb-0">
|
||||
<div class="text-center mb-16">
|
||||
<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="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-wrider 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-wider 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 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-wider 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>
|
||||
</section>
|
||||
@@ -39,17 +39,18 @@
|
||||
|
||||
<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">
|
||||
<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>
|
||||
<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="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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -58,13 +59,12 @@
|
||||
<div class="w-full">
|
||||
<div class="grid grid-cols-2 gap-x-8">
|
||||
<ul class="space-y-4 text-base">
|
||||
<li><a href="#home" class="flex items-center gap-3 text-gray-400 hover:text-blue-400 transition-colors"><i class="fa fa-home w-4 text-center text-blue-500"></i><span>首页</span></a></li>
|
||||
<li><a href="#core-business" class="flex items-center gap-3 text-gray-400 hover:text-blue-400 transition-colors"><i class="fa fa-briefcase w-4 text-center text-blue-500"></i><span>核心业务</span></a></li>
|
||||
<li><a href="#ai-model" class="flex items-center gap-3 text-gray-400 hover:text-blue-400 transition-colors"><i class="fa fa-microchip w-4 text-center text-blue-500"></i><span>AI大模型</span></a></li>
|
||||
<li><a href="/" class="flex items-center gap-3 text-gray-400 hover:text-blue-400 transition-colors"><i class="fa fa-building w-4 text-center text-blue-500"></i><span>公司介绍</span></a></li>
|
||||
<li><a href="/qazk" class="flex items-center gap-3 text-gray-400 hover:text-blue-400 transition-colors"><i class="fa fa-cogs w-4 text-center text-blue-500"></i><span>企安智控</span></a></li>
|
||||
</ul>
|
||||
<ul class="space-y-4 text-base">
|
||||
<li><a href="#about-us" class="flex items-center gap-3 text-gray-400 hover:text-blue-400 transition-colors"><i class="fa fa-info-circle w-4 text-center text-blue-500"></i><span>关于我们</span></a></li>
|
||||
<li><a href="#recruitment" class="flex items-center gap-3 text-gray-400 hover:text-blue-400 transition-colors"><i class="fa fa-handshake-o w-4 text-center text-blue-500"></i><span>生态合作</span></a></li>
|
||||
<li><a href="/customization" class="flex items-center gap-3 text-gray-400 hover:text-blue-400 transition-colors"><i class="fa fa-wrench w-4 text-center text-blue-500"></i><span>本地化定制</span></a></li>
|
||||
<li><a href="/partnership" class="flex items-center gap-3 text-gray-400 hover:text-blue-400 transition-colors"><i class="fa fa-handshake-o w-4 text-center text-blue-500"></i><span>生态合作</span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -6,7 +6,8 @@
|
||||
<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">
|
||||
<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> 应用场景
|
||||
系统平台应用场景<br>
|
||||
<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-blue-600 mx-auto mt-6 rounded-full"></div>
|
||||
<p class="text-gray-500 mt-6 max-w-2xl mx-auto text-lg leading-relaxed">
|
||||
|
||||
@@ -1,69 +1,66 @@
|
||||
---
|
||||
---
|
||||
<section id="about-us" class="py-16 bg-slate-50">
|
||||
<section id="about-us" class="pb-20 bg-slate-50">
|
||||
<div class="max-w-7xl mx-auto px-4 lg:px-0">
|
||||
|
||||
<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="text-center">
|
||||
<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>
|
||||
<div class="w-20 h-1.5 bg-blue-600 mx-auto mt-6 rounded-full"></div>
|
||||
<p class="text-gray-500 mt-6 max-w-2xl mx-auto text-lg leading-relaxed">
|
||||
合作携手，共创价值
|
||||
</p>
|
||||
<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="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-500 hover:shadow-xl hover:-translate-y-1 space-y-3 border">
|
||||
<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">
|
||||
<p class="text-sm font-semibold text-gray-700">中国移动</p>
|
||||
<p class="text-base font-semibold text-gray-700">中国移动</p>
|
||||
</div>
|
||||
<div class="p-4 bg-white rounded-lg shadow-md flex flex-col justify-center items-center h-32 transition-all-500 hover:shadow-xl hover:-translate-y-1 space-y-3 border">
|
||||
<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">
|
||||
<p class="text-sm font-semibold text-gray-700">中国电信</p>
|
||||
<p class="text-base font-semibold text-gray-700">中国电信</p>
|
||||
</div>
|
||||
<div class="p-4 bg-white rounded-lg shadow-md flex flex-col justify-center items-center h-32 transition-all-500 hover:shadow-xl hover:-translate-y-1 space-y-3 border">
|
||||
<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">
|
||||
<p class="text-sm font-semibold text-gray-700">浪潮 inspur</p>
|
||||
<p class="text-base font-semibold text-gray-700">浪潮 inspur</p>
|
||||
</div>
|
||||
<div class="p-4 bg-white rounded-lg shadow-md flex flex-col justify-center items-center h-32 transition-all-500 hover:shadow-xl hover:-translate-y-1 space-y-3 border">
|
||||
<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">
|
||||
<p class="text-sm font-semibold text-gray-700">海康威视</p>
|
||||
<p class="text-base font-semibold text-gray-700">海康威视</p>
|
||||
</div>
|
||||
<div class="p-4 bg-white rounded-lg shadow-md flex flex-col justify-center items-center h-32 transition-all-500 hover:shadow-xl hover:-translate-y-1 space-y-3 border">
|
||||
<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">
|
||||
<p class="text-sm font-semibold text-gray-700">国家电网</p>
|
||||
<p class="text-base font-semibold text-gray-700">国家电网</p>
|
||||
</div>
|
||||
<div class="p-4 bg-white rounded-lg shadow-md flex flex-col justify-center items-center h-32 transition-all-500 hover:shadow-xl hover:-translate-y-1 space-y-3 border">
|
||||
<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">
|
||||
<p class="text-sm font-semibold text-gray-700">阿里云</p>
|
||||
<p class="text-base font-semibold text-gray-700">阿里云</p>
|
||||
</div>
|
||||
<div class="p-4 bg-white rounded-lg shadow-md flex flex-col justify-center items-center h-32 transition-all-500 hover:shadow-xl hover:-translate-y-1 space-y-3 border">
|
||||
<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">
|
||||
<p class="text-sm font-semibold text-gray-700">高德地图</p>
|
||||
<p class="text-base font-semibold text-gray-700">高德地图</p>
|
||||
</div>
|
||||
<div class="p-4 bg-white rounded-lg shadow-md flex flex-col justify-center items-center h-32 transition-all-500 hover:shadow-xl hover:-translate-y-1 space-y-3 border">
|
||||
<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">
|
||||
<p class="text-sm font-semibold text-gray-700">字节跳动</p>
|
||||
<p class="text-base font-semibold text-gray-700">字节跳动</p>
|
||||
</div>
|
||||
<div class="p-4 bg-white rounded-lg shadow-md flex flex-col justify-center items-center h-32 transition-all-500 hover:shadow-xl hover:-translate-y-1 space-y-3 border">
|
||||
<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">
|
||||
<p class="text-sm font-semibold text-gray-700">中国联通</p>
|
||||
<p class="text-base font-semibold text-gray-700">中国联通</p>
|
||||
</div>
|
||||
<div class="p-4 bg-white rounded-lg shadow-md flex flex-col justify-center items-center h-32 transition-all-500 hover:shadow-xl hover:-translate-y-1 space-y-3 border">
|
||||
<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">
|
||||
<p class="text-sm font-semibold text-gray-700">虹润</p>
|
||||
<p class="text-base font-semibold text-gray-700">虹润</p>
|
||||
</div>
|
||||
<div class="p-4 bg-white rounded-lg shadow-md flex flex-col justify-center items-center h-32 transition-all-500 hover:shadow-xl hover:-translate-y-1 space-y-3 border">
|
||||
<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">
|
||||
<p class="text-sm font-semibold text-gray-700">腾讯</p>
|
||||
<p class="text-base font-semibold text-gray-700">腾讯</p>
|
||||
</div>
|
||||
<div class="p-4 bg-white rounded-lg shadow-md flex flex-col justify-center items-center h-32 transition-all-500 hover:shadow-xl hover:-translate-y-1 space-y-3 border">
|
||||
<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">
|
||||
<p class="text-sm font-semibold text-gray-700">豆包</p>
|
||||
<p class="text-base font-semibold text-gray-700">豆包</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,177 +3,235 @@
|
||||
<section id="recruitment">
|
||||
|
||||
<div class="max-w-7xl mx-auto px-4 lg:px-0">
|
||||
<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="text-center">
|
||||
<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-blue-600 mx-auto mt-6 rounded-full"></div>
|
||||
<p class="text-gray-500 mt-6 max-w-2xl mx-auto text-lg leading-relaxed">
|
||||
生态合作，共享蓝海
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<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="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>
|
||||
</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-line-chart 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">各市平均约10-50万家企业、数百余家物业及园区，增量巨大</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-lightbulb-o 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-sitemap 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-cubes 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-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">平台不断升级优化，产品始终领先，长久稳占市场优势</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 目标招商对象 -->
|
||||
<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/partner-search.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 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-sm font-medium px-3 py-1 rounded-full bg-blue-200 text-blue-800">政企渠道商</span>
|
||||
<span class="text-sm font-medium px-3 py-1 rounded-full bg-blue-200 text-blue-800">政务服务商</span>
|
||||
<span class="text-sm font-medium px-3 py-1 rounded-full bg-blue-200 text-blue-800">地方产业运营商</span>
|
||||
<span class="text-sm 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="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">2</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-sm font-medium px-3 py-1 rounded-full bg-blue-200 text-blue-800">制造业服务商</span>
|
||||
<span class="text-sm font-medium px-3 py-1 rounded-full bg-blue-200 text-blue-800">化工行业运营商</span>
|
||||
<span class="text-sm font-medium px-3 py-1 rounded-full bg-blue-200 text-blue-800">产业园区服务商</span>
|
||||
<span class="text-sm 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="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">3</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-sm font-medium px-3 py-1 rounded-full bg-blue-200 text-blue-800">SaaS生态伙伴</span>
|
||||
<span class="text-sm font-medium px-3 py-1 rounded-full bg-blue-200 text-blue-800">系统集成商</span>
|
||||
<span class="text-sm font-medium px-3 py-1 rounded-full bg-blue-200 text-blue-800">IT解决方案商</span>
|
||||
<span class="text-sm 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="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">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-sm font-medium px-3 py-1 rounded-full bg-blue-200 text-blue-800">城市渠道运营商</span>
|
||||
<span class="text-sm font-medium px-3 py-1 rounded-full bg-blue-200 text-blue-800">本地创业带头人</span>
|
||||
<span class="text-sm font-medium px-3 py-1 rounded-full bg-blue-200 text-blue-800">区域市场服务商</span>
|
||||
<span class="text-sm 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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 合作流程 -->
|
||||
<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/cooperation-process.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="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-5 relative z-10">
|
||||
<div class="flex flex-col items-center text-center bg-white rounded-2xl p-5 border border-blue-100 shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
|
||||
<div class="w-14 h-14 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold text-xl mb-3 shadow)lg">1</div>
|
||||
<h4 class="text-xl font-bold text-gray-900 mb-2">合作咨询</h4>
|
||||
<p class="text-gray-600 text-base leading-snug">沟通意向，了解合作政策。</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-center text-center bg-white rounded-2xl p-5 border border-blue-100 shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
|
||||
<div class="w-14 h-14 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold text-xl mb-3 shadow-lg">2</div>
|
||||
<h4 class="text-xl font-bold text-gray-900 mb-2">实地考察</h4>
|
||||
<p class="text-gray-600 text-base leading-snug">考察总部产品与落地案例。</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-center text-center bg-white rounded-2xl p-5 border border-blue-100 shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
|
||||
<div class="w-14 h-14 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold text-xl mb-3 shadow-lg">3</div>
|
||||
<h4 class="text-xl font-bold text-gray-900 mb-2">签约授权</h4>
|
||||
<p class="text-gray-600 text-base leading-snug">签订合作协议，授予独家权限。</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-center text-center bg-white rounded-2xl p-5 border border-blue-100 shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
|
||||
<div class="w-14 h-14 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold text-xl mb-3 shadow-lg">4</div>
|
||||
<h4 class="text-xl font-bold text-gray-900 mb-2">赋能落地</h4>
|
||||
<p class="text-gray-600 text-base leading-snug">总部全程扶持，启动市场运营。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-16">
|
||||
<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">
|
||||
<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 class="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||
|
||||
<div class="bg-white rounded-2xl shadow-xl p-8 lg:p-10 border-t-8 border-blue-600 h-full flex flex-col transition-all duration-300 hover:shadow-2xl">
|
||||
<div class="text-center mb-10">
|
||||
<div class="w-16 h-16 mx-auto bg-gradient-to-r from-blue-600 to-blue-400 rounded-full flex items-center justify-center mb-4 shadow-md">
|
||||
<i class="fa fa-star text-white text-3xl"></i>
|
||||
</div>
|
||||
<h3 class="text-2xl font-extrabold text-gray-800">合作优势</h3>
|
||||
<p class="text-gray-500 mt-2">与我们携手，共筑安全数字化新篇章</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-5 flex-grow">
|
||||
|
||||
<div class="flex items-center py-4 px-4 bg-blue-50 rounded-xl border border-blue-200 transition-all duration-300 hover:shadow-lg">
|
||||
<i class="fa fa-map-marker text-blue-600 text-xl w-6 flex-shrink-0 mr-4"></i>
|
||||
<h4 class="font-bold text-gray-900 text-lg">城市独家</h4>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center py-4 px-4 bg-blue-50 rounded-xl border border-blue-200 transition-all duration-300 hover:shadow-lg">
|
||||
<i class="fa fa-bullhorn text-blue-600 text-xl w-6 flex-shrink-0 mr-4"></i>
|
||||
<h4 class="font-bold text-gray-900 text-lg">政策风口</h4>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center py-4 px-4 bg-blue-50 rounded-xl border border-blue-200 transition-all duration-300 hover:shadow-lg">
|
||||
<i class="fa fa-leaf text-blue-600 text-xl w-6 flex-shrink-0 mr-4"></i>
|
||||
<h4 class="font-bold text-gray-900 text-lg">市场蓝海</h4>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center py-4 px-4 bg-blue-50 rounded-xl border border-blue-200 transition-all duration-300 hover:shadow-lg">
|
||||
<i class="fa fa-diamond text-blue-600 text-xl w-6 flex-shrink-0 mr-4"></i>
|
||||
<h4 class="font-bold text-gray-900 text-lg">轻资产运营</h4>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center py-4 px-4 bg-blue-50 rounded-xl border border-blue-200 transition-all duration-300 hover:shadow-lg">
|
||||
<i class="fa fa-sitemap text-blue-600 text-xl w-6 flex-shrink-0 mr-4"></i>
|
||||
<h4 class="font-bold text-gray-900 text-lg">无边界客群池</h4>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center py-4 px-4 bg-blue-50 rounded-xl border border-blue-200 transition-all duration-300 hover:shadow-lg">
|
||||
<i class="fa fa-line-chart text-blue-600 text-xl w-6 flex-shrink-0 mr-4"></i>
|
||||
<h4 class="font-bold text-gray-900 text-lg">管道收益</h4>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center py-4 px-4 bg-blue-50 rounded-xl border border-blue-200 transition-all duration-300 hover:shadow-lg">
|
||||
<i class="fa fa-cubes text-blue-600 text-xl w-6 flex-shrink-0 mr-4"></i>
|
||||
<h4 class="font-bold text-gray-900 text-lg">全链路赋能</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-2xl shadow-xl p-8 lg:p-10 border h-full flex flex-col transition-all duration-300 hover:shadow-2xl">
|
||||
<div class="text-center mb-8">
|
||||
<i class="fa fa-handshake-o text-blue-600 text-5xl mb-4"></i>
|
||||
<h3 class="text-2xl font-extrabold text-gray-800">目标招商对象</h3>
|
||||
<p class="text-gray-500 mt-2">我们正在寻找以下类型的合作伙伴</p>
|
||||
</div>
|
||||
|
||||
<div class="flex-grow">
|
||||
|
||||
<div class="space-y-6 mb-6">
|
||||
<h4 class="font-bold text-xl text-gray-800 mb-4">目标招商对象</h4>
|
||||
|
||||
<div class="bg-blue-50 p-4 rounded-xl border border-blue-200 transition-all duration-300 hover:shadow-md">
|
||||
<h5 class="font-bold text-gray-900 mb-2 flex items-center gap-1 text-base">
|
||||
<span class="text-blue-600 font-extrabold">1.</span> 本地企业服务机构
|
||||
</h5>
|
||||
<div class="flex flex-wrap gap-1 mb-2">
|
||||
<span class="text-xs font-medium px-2 py-0.5 rounded-full bg-blue-200 text-blue-800">财税公司</span>
|
||||
<span class="text-xs font-medium px-2 py-0.5 rounded-full bg-blue-200 text-blue-800">人力资源服务商</span>
|
||||
<span class="text-xs font-medium px-2 py-0.5 rounded-full bg-blue-200 text-blue-800">产业园运营方</span>
|
||||
</div>
|
||||
<p class="text-base text-gray-600">可依托现有企业客群快速转化。</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-blue-50 p-4 rounded-xl border border-blue-200 transition-all duration-300 hover:shadow-md">
|
||||
<h5 class="font-bold text-gray-900 mb-2 flex items-center gap-1 text-base">
|
||||
<span class="text-blue-600 font-extrabold">2.</span> 安全领域从业者
|
||||
</h5>
|
||||
<div class="flex flex-wrap gap-1 mb-2">
|
||||
<span class="text-xs font-medium px-2 py-0.5 rounded-full bg-blue-200 text-blue-800">前安全监管人员</span>
|
||||
<span class="text-xs font-medium px-2 py-0.5 rounded-full bg-blue-200 text-blue-800">安全咨询顾问</span>
|
||||
<span class="text-xs font-medium px-2 py-0.5 rounded-full bg-blue-200 text-blue-800">消防工程商</span>
|
||||
</div>
|
||||
<p class="text-base text-gray-600">具备行业资源与专业认知。</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-blue-50 p-4 rounded-xl border border-blue-200 transition-all duration-300 hover:shadow-md">
|
||||
<h5 class="font-bold text-gray-900 mb-2 flex items-center gap-1 text-base">
|
||||
<span class="text-blue-600 font-extrabold">3.</span> 创业转型者
|
||||
</h5>
|
||||
<div class="flex flex-wrap gap-1 mb-2">
|
||||
<span class="text-xs font-medium px-2 py-0.5 rounded-full bg-blue-200 text-blue-800">个体创业者</span>
|
||||
<span class="text-xs font-medium px-2 py-0.5 rounded-full bg-blue-200 text-blue-800">传统行业经营者</span>
|
||||
</div>
|
||||
<p class="text-base text-gray-600">寻求低门槛、高潜力项目，或计划拓展新业务。</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-blue-50 p-4 rounded-xl border border-blue-200 transition-all duration-300 hover:shadow-md">
|
||||
<h5 class="font-bold text-gray-900 mb-2 flex items-center gap-1 text-base">
|
||||
<span class="text-blue-600 font-extrabold">4.</span> 异业渠道商
|
||||
</h5>
|
||||
<div class="flex flex-wrap gap-1 mb-2">
|
||||
<span class="text-xs font-medium px-2 py-0.5 rounded-full bg-blue-200 text-blue-800">办公软件代理商</span>
|
||||
<span class="text-xs font-medium px-2 py-0.5 rounded-full bg-blue-200 text-blue-800">工业设备供应商</span>
|
||||
</div>
|
||||
<p class="text-base text-gray-600">可通过产品捆绑实现客群互补。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-16">
|
||||
<div class="bg-white rounded-2xl shadow-xl p-8 lg:p-10 border h-full transition-all duration-300 hover:shadow-2xl">
|
||||
<div class="text-center mb-10">
|
||||
<h3 class="text-3xl font-extrabold text-gray-800 inline-block">合作流程</h3>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 relative">
|
||||
<div class="hidden md:block absolute top-[60px] left-[15%] right-[15%] h-1 bg-blue-300 z-0"></div>
|
||||
|
||||
<div class="relative flex flex-col items-center text-center p-4 pt-6 rounded-lg bg-blue-50 border border-blue-200 shadow-md transition-all duration-300 hover:shadow-lg z-10">
|
||||
<span class="w-10 h-10 rounded-full bg-blue-600 text-white flex items-center justify-center font-bold text-lg mb-3 shadow-lg">1</span>
|
||||
<p class="font-semibold text-gray-900 text-base">提交申请意向</p>
|
||||
<p class="text-sm text-gray-600 mt-1">通过官网或商务渠道<br>提交初步合作申请</p>
|
||||
</div>
|
||||
|
||||
<div class="relative flex flex-col items-center text-center p-4 pt-6 rounded-lg bg-blue-50 border border-blue-200 shadow-md transition-all duration-300 hover:shadow-lg z-10">
|
||||
<span class="w-10 h-10 rounded-full bg-blue-600 text-white flex items-center justify-center font-bold text-lg mb-3 shadow-lg">2</span>
|
||||
<p class="font-semibold text-gray-900 text-base">资质审核与洽谈</p>
|
||||
<p class="text-sm text-gray-600 mt-1">总部对资质、能力、规划<br>进行审核和洽谈</p>
|
||||
</div>
|
||||
|
||||
<div class="relative flex flex-col items-center text-center p-4 pt-6 rounded-lg bg-blue-50 border border-blue-200 shadow-md transition-all duration-300 hover:shadow-lg z-10">
|
||||
<span class="w-10 h-10 rounded-full bg-blue-600 text-white flex items-center justify-center font-bold text-lg mb-3 shadow-lg">3</span>
|
||||
<p class="font-semibold text-gray-900 text-base">签署合作协议</p>
|
||||
<p class="text-sm text-gray-600 mt-1">双方达成一致<br>签订正式的代理或合作协议</p>
|
||||
</div>
|
||||
|
||||
<div class="relative flex flex-col items-center text-center p-4 pt-6 rounded-lg bg-blue-50 border border-blue-200 shadow-md transition-all duration-300 hover:shadow-lg z-10">
|
||||
<span class="w-10 h-10 rounded-full bg-blue-600 text-white flex items-center justify-center font-bold text-lg mb-3 shadow-lg">4</span>
|
||||
<p class="font-semibold text-gray-900 text-base">授权与培训启动</p>
|
||||
<p class="text-sm text-gray-600 mt-1">提供独家区域授权<br>系统培训及全方位赋能</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-10">
|
||||
<div class="flex flex-col sm:flex-row justify-center items-center gap-6">
|
||||
<a href="docs/合作申请表.xlsx" download="合作申请表.xlsx" class="w-full sm:w-auto inline-flex items-center justify-center bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-full font-medium transition-all duration-300 shadow-xl hover:shadow-2xl">
|
||||
<i class="fa fa-download mr-2"></i> 下载申请表格
|
||||
</a>
|
||||
<div class="text-center text-sm">
|
||||
<span class="font-semibold text-gray-700 block sm:inline">发送至:</span>
|
||||
<a href="mailto:zjbeifan@126.com" class="text-blue-600 font-bold ml-1 hover:text-blue-700 transition">zjbeifan@126.com</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="mt-24"></div>
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<div class="text-center mt-10 mb-16 relative">
|
||||
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-64 h-64 bg-red-100/50 blur-3xl rounded-full -z-10"></div>
|
||||
<h3 class="text-3xl md:text-5xl font-black text-gray-900 tracking-tight">
|
||||
最新政策导向<br><span class="text-red-600">安全管理核心驱动力</span>
|
||||
<span class="text-red-600">系统平台紧跟政策导向</span>
|
||||
</h3>
|
||||
<div class="w-24 h-1.5 bg-red-600 mx-auto mt-8 rounded-full shadow-sm shadow-red-200"></div>
|
||||
</div>
|
||||
@@ -22,11 +22,11 @@
|
||||
<img src="/img/policy-1.webp" class="w-full h-full object-cover object-top group-hover:scale-110 transition-transform duration-1000" />
|
||||
</div>
|
||||
<div class="md:w-[55%] flex flex-col justify-center py-4">
|
||||
<h3 class="text-2xl font-bold text-gray-900 mb-4 group-hover:text-red-600 transition-colors leading-tight">企业安全生产标准化<br>基本规范</h3>
|
||||
<h3 class="text-2xl font-bold text-gray-900 mb-4 group-hover:text-red-600 transition-colors leading-tight">大中型企业安全生产标准化管理体系要求</h3>
|
||||
<p class="text-base text-gray-600 leading-relaxed bg-red-50/50 p-5 rounded-2xl border-red-600 mb-4">
|
||||
核心要求：全面建立并保持<span class="text-red-700 font-bold">标准化系统</span>，实现安全管理的系统化、岗位达标和规范化。
|
||||
企业应利用<span class="text-red-700 font-bold">数字化、信息化、智能化</span>等手段,提高安全生产台账管理、安全风险分级管控、事故隐患排查治理、应急管理等效能。
|
||||
</p>
|
||||
<div class="text-sm font-bold text-red-600">GB/T 33000-2016</div>
|
||||
<div class="text-sm font-bold text-red-600">GB/T 33000-2025</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group bg-white rounded-[2.5rem] p-6 border border-red-100 shadow-sm hover:shadow-2xl hover:shadow-red-500/10 transition-all duration-500 flex flex-col md:flex-row gap-8">
|
||||
@@ -34,11 +34,11 @@
|
||||
<img src="/img/policy-2.webp" class="w-full h-full object-cover object-top group-hover:scale-110 transition-transform duration-1000" />
|
||||
</div>
|
||||
<div class="md:w-[55%] flex flex-col justify-center py-4">
|
||||
<h3 class="text-2xl font-bold text-gray-900 mb-4 group-hover:text-red-600 transition-colors leading-tight">重大火灾隐患<br>判定规则</h3>
|
||||
<h3 class="text-2xl font-bold text-gray-900 mb-4 group-hover:text-red-600 transition-colors leading-tight">工业互联网平台<br />安全生产数字化管理</h3>
|
||||
<p class="text-base text-gray-600 leading-relaxed bg-red-50/50 p-5 rounded-2xl border-red-600 mb-4">
|
||||
确立标准：统一了重大火灾隐患的<span class="text-red-700 font-bold">判定基准</span>，适用于各类建筑及公共场所的隐患界定。
|
||||
企业应基于工业互联网平台开展<span class="text-red-700 font-bold">安全风险管控</span>,包括安全风险辨识、安全风险分级管控和风险预警。
|
||||
</p>
|
||||
<div class="text-sm font-bold text-red-600">GB 35181-2017</div>
|
||||
<div class="text-sm font-bold text-red-600">GB/T46884.1—2025</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -66,7 +66,7 @@
|
||||
</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="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">
|
||||
|
||||
@@ -28,43 +28,6 @@
|
||||
</style>
|
||||
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="relative flex flex-col md:flex-row md:items-center mb-10 md:mb-14 px-3 md:px-0">
|
||||
<div class="absolute left-0 w-full h-16 md:h-14 bg-blue-50/50 -z-10 rounded-r-full"></div>
|
||||
|
||||
<div class="flex items-start md:items-center">
|
||||
<div class="w-2.5 h-12 md:h-12 bg-blue-600 rounded-full shadow-[4px_0_12px_rgba(37,99,235,0.4)] flex-shrink-0 mt-1 md:mt-0"></div>
|
||||
|
||||
<div class="ml-4 flex flex-col md:flex-row md:items-center gap-2 md:gap-6">
|
||||
|
||||
<div class="flex items-center">
|
||||
<div class="relative flex items-center justify-center">
|
||||
<span class="absolute -top-4 -left-2 text-5xl md:text-5xl font-black text-blue-600/10 select-none">01</span>
|
||||
|
||||
<div class="flex items-center">
|
||||
<span class="text-blue-600 font-black text-xl md:text-2xl tracking-tight">核心业务</span>
|
||||
<span class="flex items-center justify-center bg-blue-600 text-white w-9 h-9 md:w-10 md:h-10 rounded-xl shadow-md shadow-blue-200 text-xl md:text-2xl font-black mx-2">
|
||||
1
|
||||
</span>
|
||||
<span class="text-blue-600 font-black text-xl md:text-2xl tracking-tight">：</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col justify-center">
|
||||
<h3 class="text-2xl md:text-3xl font-black text-gray-900 tracking-tight leading-none">
|
||||
SaaS化系统
|
||||
</h3>
|
||||
<div class="flex items-center gap-2 mt-1.5">
|
||||
<span class="h-1 w-5 bg-blue-600 rounded-full"></span>
|
||||
<span class="text-xs md:text-xs text-blue-500 font-bold uppercase tracking-[0.1em] md:tracking-[0.2em] leading-none">
|
||||
Cloud Intelligence System
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white p-4 md:p-10 rounded-3xl shadow-2xl border border-blue-100 transition-all duration-500">
|
||||
|
||||
<div class="flex flex-col md:flex-row items-center gap-8 md:gap-16 mb-12">
|
||||
@@ -82,7 +45,10 @@
|
||||
</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-gray-700 text-lg md:text-xl leading-relaxed">
|
||||
<strong class="text-blue-600 font-extrabold">企安智控</strong>由浙江贝凡科技自主研发，专注于为全国生产工贸型企业、园区楼宇、酒店餐饮等场景提供<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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -92,7 +58,7 @@
|
||||
<div class="flex-1">
|
||||
<p class="text-base md:text-lg text-gray-900 font-bold mb-4 flex items-center gap-2">
|
||||
<span class="w-1.5 h-5 bg-blue-600 rounded-full"></span>
|
||||
系统为企业赋能：
|
||||
系统平台为企业赋能：
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-4 gap-3 mb-6">
|
||||
@@ -103,14 +69,14 @@
|
||||
<line x1="9" y1="1" x2="9" y2="4"></line>
|
||||
<line x1="15" y1="1" x2="15" y2="4"></line>
|
||||
</svg>
|
||||
<span class="text-sm font-bold text-white">AI算法</span>
|
||||
<span class="text-sm font-bold text-white">AI多场景</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center py-4 bg-indigo-600 rounded-xl shadow-md border border-indigo-700">
|
||||
<svg class="w-6 h-6 text-white mb-2" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect>
|
||||
<line x1="12" y1="18" x2="12.01" y2="18"></line>
|
||||
</svg>
|
||||
<span class="text-sm font-bold text-white">多端联动</span>
|
||||
<span class="text-sm font-bold text-white">多方联动</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center py-4 bg-indigo-600 rounded-xl shadow-md border border-indigo-700">
|
||||
<svg class="w-6 h-6 text-white mb-2" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
@@ -132,7 +98,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-[14px] md:text-base text-blue-900 leading-relaxed border-t border-blue-100 pt-4 font-bold text-center md:text-left min-h-[4.5rem] flex items-center">
|
||||
实现隐患排查自动化、履职考核标准化，全面提升企业安全水平
|
||||
构建安全风险管控、隐患排查治理、应急处置三道防线
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -140,18 +106,18 @@
|
||||
<div class="flex-1">
|
||||
<p class="text-base md:text-lg text-gray-900 font-bold mb-4 flex items-center gap-2">
|
||||
<span class="w-1.5 h-5 bg-red-600 rounded-full"></span>
|
||||
系统辅助各监管部门构建：
|
||||
系统平台为监管部门构建：
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-2 gap-3 mb-6">
|
||||
<div class="flex flex-col items-center justify-center py-4 bg-red-500 text-white rounded-xl shadow-md border border-red-800 transition-all">
|
||||
<div class="flex flex-col items-center justify-center py-4 bg-red-700 text-white rounded-xl shadow-md border border-red-800 transition-all">
|
||||
<svg class="w-6 h-6 text-white mb-2" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
|
||||
<path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path>
|
||||
<path d="M22 12A10 10 0 0 0 12 2v10z"></path>
|
||||
</svg>
|
||||
<span class="text-sm font-bold tracking-wider">数据驱动</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center py-4 bg-red-500 text-white rounded-xl shadow-md border border-red-800 transition-all">
|
||||
<div class="flex flex-col items-center justify-center py-4 bg-red-700 text-white rounded-xl shadow-md border border-red-800 transition-all">
|
||||
<svg class="w-6 h-6 text-white mb-2" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
|
||||
<path d="M23 7l-7 5 7 5V7z"></path>
|
||||
<rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
|
||||
|
||||
@@ -1,310 +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-20">
|
||||
<div class="relative mb-16">
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-blue-400 via-indigo-400 to-purple-400 rounded-3xl blur-3xl opacity-30"></div>
|
||||
<div class="relative bg-gradient-to-br from-white via-blue-50/50 to-indigo-50/50 backdrop-blur-xl rounded-[2.5rem] p-8 md:p-16 border border-blue-100/50 shadow-2xl shadow-blue-200/20">
|
||||
<div class="flex flex-col lg:flex-row gap-12 items-center">
|
||||
<div class="flex-1">
|
||||
<div class="inline-flex items-center gap-2 px-4 py-2 bg-blue-500/10 rounded-full mb-6">
|
||||
<span class="w-2 h-2 bg-blue-500 rounded-full animate-pulse"></span>
|
||||
<span class="text-blue-600 text-sm font-semibold tracking-wider uppercase">About Us</</span>
|
||||
</div>
|
||||
<p class="text-gray-700 text-lg md:text-xl leading-relaxed mb-6">
|
||||
浙江贝凡网络科技有限公司是一家专注于<span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600 font-bold">产业数字化转型</span>的高科技企业，总部坐落于美丽的<span class="text-blue-600 font-bold">西子湖畔 · 杭州</span>。
|
||||
</p>
|
||||
<p class="text-gray-600 text-base md:text-lg leading-relaxed mb-6">
|
||||
依托<span class="text-indigo-600 font-semibold">AI大模型</span>、<span class="text-blue-600 font-semibold">物联网IoT</span>、<span class="text-indigo-600 font-semibold">融合开发DevOps</span>等技术优势，为政府和企业提供<span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600 font-semibold">全场景的数字化解决方案</span>。与<span class="text-blue-600 font-semibold">浪潮集团</span>、<span class="text-indigo-600 font-semibold">中国移动</span>、<span class="text-purple-600 font-semibold">海康威视</span>、<span class="text-cyan-600 font-semibold">阿里云</span>、<span class="text-blue-600 font-semibold">字节跳动</span>等头部企业深度融合合作，构建强大的业务生态体系。
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex-shrink-0 w-full lg:w-auto">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="group relative p-6 bg-white/80 backdrop-blur-sm rounded-2xl border border-blue-100 hover:bg-white hover:shadow-xl hover:shadow-blue-200/50 hover:scale-105 transition-all duration-300">
|
||||
<div class="absolute -top-1 -right-1 w-3 h-3 bg-blue-500 rounded-full animate-pulse"></div>
|
||||
<div class="text-3xl md:text-4xl font-black text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600 mb-1">2019</div>
|
||||
<div class="text-gray-600 text-sm font-medium">成立年份</div>
|
||||
</div>
|
||||
<div class="group relative p-6 bg-white/80 backdrop-blur-sm rounded-2xl border border-indigo-100 hover:bg-white hover:shadow-xl hover:shadow-indigo-200/50 hover:scale-105 transition-all duration-300">
|
||||
<div class="absolute -top-1 -right-1 w-3 h-3 bg-indigo-500 rounded-full animate-pulse" style="animation-delay: 0.2s"></div>
|
||||
<div class="text-3xl md:text-4xl font-black text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-purple-600 mb-1">700+</div>
|
||||
<div class="text-gray-600 text-sm font-medium">视觉理解算法</div>
|
||||
</div>
|
||||
<div class="group relative p-6 bg-white/80 backdrop-blur-sm rounded-2xl border border-blue-100 hover:bg-white hover:shadow-xl hover:shadow-blue-200/50 hover:scale-105 transition-all duration-300">
|
||||
<div class="absolute -top-1 -right-1 w-3 h-3 bg-blue-500 rounded-full animate-pulse" style="animation-delay: 0.4s"></div>
|
||||
<div class="text-3xl md:text-4xl font-black text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-cyan-600 mb-1">99.9%</div>
|
||||
<div class="text-gray-600 text-sm font-medium">SLA可用性</div>
|
||||
</div>
|
||||
<div class="group relative p-6 bg-white/80 backdrop-blur-sm rounded-2xl border border-purple-100 hover:bg-white hover:shadow-xl hover:shadow-purple-200/50 hover:scale-105 transition-all duration-300">
|
||||
<div class="absolute -top-1 -right-1 w-3 h-3 bg-purple-500 rounded-full animate-pulse" style="animation-delay: 0.6s"></div>
|
||||
<div class="text-3xl md:text-4xl font-black text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-pink-600 mb-1">15+</div>
|
||||
<div class="text-gray-600 text-sm font-medium">合作伙伴</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-16">
|
||||
<div class="flex items-center justify-center gap-4 mb-10">
|
||||
<div class="h-[1px] w-20 bg-gradient-to-r from-transparent to-blue-600"></div>
|
||||
<h4 class="text-2xl md:text-3xl font-bold text-gray-900">核心技术引擎</h4>
|
||||
<div class="h-[1px] w-20 bg-gradient-to-l from-transparent to-blue-600"></div>
|
||||
</div>
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div class="group relative bg-white rounded-3xl p-1 shadow-xl shadow-gray-200/50 hover:shadow-2xl hover:shadow-blue-500/10 transition-all duration-500">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-blue-600 to-cyan-600 rounded-[1.3rem] opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
||||
<div class="relative h-full bg-white rounded-[1.2rem] p-6 group-hover:bg-transparent transition-colors duration-500">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-2xl flex items-center justify-center mb-5 group-hover:scale-110 group-hover:rotate-3 transition-transform duration-500 shadow-lg shadow-blue-500/30">
|
||||
<i class="fa fa-cogs text-white text-2xl"></i>
|
||||
</div>
|
||||
<h5 class="text-xl font-bold text-gray-900 group-hover:text-white mb-3 transition-colors">AI大模型</h5>
|
||||
<p class="text-gray-500 text-sm leading-relaxed group-hover:text-white/80 transition-colors">多模态人工智能技术<br>提供智能决策与分析能力</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group relative bg-white rounded-3xl p-1 shadow-xl shadow-gray-200/50 hover:shadow-2xl hover:shadow-indigo-500/10 transition-all duration-500">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-indigo-600 to-purple-600 rounded-[1.3rem] opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
||||
<div class="relative h-full bg-white rounded-[1.2rem] p-6 group-hover:bg-transparent transition-colors duration-500">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-2xl flex items-center justify-center mb-5 group-hover:scale-110 group-hover:rotate-3 transition-transform duration-500 shadow-lg shadow-indigo-500/30">
|
||||
<i class="fa fa-globe text-white text-2xl"></i>
|
||||
</div>
|
||||
<h5 class="text-xl font-bold text-gray-900 group-hover:text-white mb-3 transition-colors">物联网IoT</h5>
|
||||
<p class="text-gray-500 text-sm leading-relaxed group-hover:text-white/80 transition-colors">海量设备接入与汇总，实现万物互联</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group relative bg-white rounded-3xl p-1 shadow-xl shadow-gray-200/50 hover:shadow-2xl hover:shadow-purple-500/10 transition-all duration-500">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-purple-600 to-pink-600 rounded-[1.3rem] opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
||||
<div class="relative h-full bg-white rounded-[1.2rem] p-6 group-hover:bg-transparent transition-colors duration-500">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-pink-500 rounded-2xl flex items-center justify-center mb-5 group-hover:scale-110 group-hover:rotate-3 transition-transform duration-500 shadow-lg shadow-purple-500/30">
|
||||
<i class="fa fa-code text-white text-2xl"></i>
|
||||
</div>
|
||||
<h5 class="text-xl font-bold text-gray-900 group-hover:text-white mb-3 transition-colors">融合开发DevOps</h5>
|
||||
<p class="text-gray-500 text-sm leading-relaxed group-hover:text-white/80 transition-colors">全流程自动化开发运维，提升交付效率</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group relative bg-white rounded-3xl p-1 shadow-xl shadow-gray-200/50 hover:shadow-2xl hover:shadow-cyan-500/10 transition-all duration-500">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-cyan-600 to-blue-600 rounded-[1.3rem] opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
||||
<div class="relative h-full bg-white rounded-[1.2rem] p-6 group-hover:bg-transparent transition-colors duration-500">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-cyan-500 to-blue-500 rounded-2xl flex items-center justify-center mb-5 group-hover:scale-110 group-hover:rotate-3 transition-transform duration-500 shadow-lg shadow-cyan-500/30">
|
||||
<i class="fa fa-shield text-white text-2xl"></i>
|
||||
</div>
|
||||
<h5 class="text-xl font-bold text-gray-900 group-hover:text-white mb-3 transition-colors">安全可信</h5>
|
||||
<p class="text-gray-500 text-sm leading-relaxed group-hover:text-white/80 transition-colors">企业级安全防护体系，保障数据安全</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-12">
|
||||
<div class="flex items-center justify-center gap-4 mb-10">
|
||||
<div class="h-[1px] w-20 bg-gradient-to-r from-transparent to-indigo-600"></div>
|
||||
<h4 class="text-2xl md:text-3xl font-bold text-gray-900">服务生态</h4>
|
||||
<div class="h-[1px] w-20 bg-gradient-to-l from-transparent to-indigo-600"></div>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-blue-600/10 via-indigo-600/10 to-purple-600/10 blur-3xl rounded-full"></div>
|
||||
<div class="relative flex flex-wrap gap-4 justify-center p-4">
|
||||
<span class="group relative px-6 py-3 bg-white/70 backdrop-blur-sm rounded-full text-gray-700 font-semibold shadow-lg border border-white/30 hover:bg-gradient-to-r hover:from-blue-600 hover:to-indigo-600 hover:text-white hover:border-transparent hover:shadow-blue-500/30 transition-all duration-300 cursor-default">
|
||||
<div class="absolute inset-0 rounded-full bg-gradient-to-r from-blue-600 to-indigo-600 opacity-0 group-hover:opacity-100 blur-xl transition-opacity duration-300"></div>
|
||||
<span class="relative flex items-center gap-2">
|
||||
<i class="fa fa-flask text-sm"></i>
|
||||
化工能源
|
||||
</span>
|
||||
</span>
|
||||
<span class="group relative px-6 py-3 bg-white/70 backdrop-blur-sm rounded-full text-gray-700 font-semibold shadow-lg border border-white/30 hover:bg-gradient-to-r hover:from-indigo-600 hover:to-purple-600 hover:text-white hover:border-transparent hover:shadow-indigo-500/30 transition-all duration-300 cursor-default">
|
||||
<div class="absolute inset-0 rounded-full bg-gradient-to-r from-indigo-600 to-purple-600 opacity-0 group-hover:opacity-100 blur-xl transition-opacity duration-300"></div>
|
||||
<span class="relative flex items-center gap-2">
|
||||
<i class="fa fa-cogs text-sm"></i>
|
||||
生产制造
|
||||
</span>
|
||||
</span>
|
||||
<span class="group relative px-6 py-3 bg-white/70 backdrop-blur-sm rounded-full text-gray-700 font-semibold shadow-lg border border-white/30 hover:bg-gradient-to-r hover:from-purple-600 hover:to-pink-600 hover:text-white hover:border-transparent hover:shadow-purple-500/30 transition-all duration-300 cursor-default">
|
||||
<div class="absolute inset-0 rounded-full bg-gradient-to-r from-purple-600 to-pink-600 opacity-0 group-hover:opacity-100 blur-xl transition-opacity duration-300"></div>
|
||||
<span class="relative flex items-center gap-2">
|
||||
<i class="fa fa-line-chart text-sm"></i>
|
||||
金融零售
|
||||
</span>
|
||||
</span>
|
||||
<span class="group relative px-6 py-3 bg-white/70 backdrop-blur-sm rounded-full text-gray-700 font-semibold shadow-lg border border-white/30 hover:bg-gradient-to-r hover:from-cyan-600 hover:to-blue-600 hover:text-white hover:border-transparent hover:shadow-cyan-500/30 transition-all duration-300 cursor-default">
|
||||
<div class="absolute inset-0 rounded-full bg-gradient-to-r from-cyan-600 to-blue-600 opacity-0 group-hover:opacity-100 blur-xl transition-opacity duration-300"></div>
|
||||
<span class="relative flex items-center gap-2">
|
||||
<i class="fa fa-building text-sm"></i>
|
||||
城市政务
|
||||
</span>
|
||||
</span>
|
||||
<span class="group relative px-6 py-3 bg-white/70 backdrop-blur-sm rounded-full text-gray-700 font-semibold shadow-lg border border-white/30 hover:bg-gradient-to-r hover:from-blue-600 hover:to-indigo-600 hover:text-white hover:border-transparent hover:shadow-blue-500/30 transition-all duration-300 cursor-default">
|
||||
<div class="absolute inset-0 rounded-full bg-gradient-to-r from-blue-600 to-indigo-600 opacity-0 group-hover:opacity-100 blur-xl transition-opacity duration-300"></div>
|
||||
<span class="relative flex items-center gap-2">
|
||||
<i class="fa fa-truck text-sm"></i>
|
||||
交通运输
|
||||
</span>
|
||||
</span>
|
||||
<span class="group relative px-6 py-3 bg-white/70 backdrop-blur-sm rounded-full text-gray-700 font-semibold shadow-lg border border-white/30 hover:bg-gradient-to-r hover:from-indigo-600 hover:to-purple-600 hover:text-white hover:border-transparent hover:shadow-indigo-500/30 transition-all duration-300 cursor-default">
|
||||
<div class="absolute inset-0 rounded-full bg-gradient-to-r from-indigo-600 to-purple-600 opacity-0 group-hover:opacity-100 blur-xl transition-opacity duration-300"></div>
|
||||
<span class="relative flex items-center gap-2">
|
||||
<i class="fa fa-camera text-sm"></i>
|
||||
景区文旅
|
||||
</span>
|
||||
</span>
|
||||
<span class="group relative px-6 py-3 bg-white/70 backdrop-blur-sm rounded-full text-gray-700 font-semibold shadow-lg border border-white/30 hover:bg-gradient-to-r hover:from-purple-600 hover:to-pink-600 hover:text-white hover:border-transparent hover:shadow-purple-500/30 transition-all duration-300 cursor-default">
|
||||
<div class="absolute inset-0 rounded-full bg-gradient-to-r from-purple-600 to-pink-600 opacity-0 group-hover:opacity-100 blur-xl transition-opacity duration-300"></div>
|
||||
<span class="relative flex items-center gap-2">
|
||||
<i class="fa fa-heart text-sm"></i>
|
||||
智慧养老
|
||||
</span>
|
||||
</span>
|
||||
<span class="group relative px-6 py-3 bg-white/70 backdrop-blur-sm rounded-full text-gray-700 font-semibold shadow-lg border border-white/30 hover:bg-gradient-to-r hover:from-cyan-600 hover:to-blue-600 hover:text-white hover:border-transparent hover:shadow-cyan-500/30 transition-all duration-300 cursor-default">
|
||||
<div class="absolute inset-0 rounded-full bg-gradient-to-r from-cyan-600 to-blue-600 opacity-0 group-hover:opacity-100 blur-xl transition-opacity duration-300"></div>
|
||||
<span class="relative flex items-center gap-2">
|
||||
<i class="fa fa-medkit text-sm"></i>
|
||||
医疗健康
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</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 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>
|
||||
@@ -39,7 +39,7 @@ function getMobileNavLinkClass(itemId: string) {
|
||||
<header id="navbar" class="fixed w-full top-0 z-50 transition-all duration-300 bg-white/95 backdrop-blur-md shadow-lg border-b border-gray-100">
|
||||
<div class="max-w-7xl mx-auto px-4 lg:px-0 py-3 flex items-center justify-between hidden lg:flex">
|
||||
<a href="/" class="flex items-center space-x-3">
|
||||
<img src="/img/logo.png" alt="浙江贝凡 Logo" class="h-10 w-auto">
|
||||
<img src="/img/logo.png" alt="浙江贝凡 Logo" class="h-8 w-auto">
|
||||
</a>
|
||||
<nav class="hidden lg:flex items-center gap-3">
|
||||
{
|
||||
@@ -60,7 +60,7 @@ function getMobileNavLinkClass(itemId: string) {
|
||||
<!-- Mobile Header - First Row -->
|
||||
<div id="mobile-header-row" class="lg:hidden flex items-center justify-between px-4 py-3 bg-white border-b border-gray-100">
|
||||
<a href="/" class="flex items-center space-x-2">
|
||||
<img src="/img/logo.png" alt="浙江贝凡 Logo" class="h-8 w-auto">
|
||||
<img src="/img/logo.png" alt="浙江贝凡 Logo" class="h-6 w-auto">
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import Hero from '../components/sections/Hero.astro';
|
||||
import Timeline from '../components/sections/Timeline.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 Contact from '../components/sections/Contact.astro';
|
||||
---
|
||||
@@ -9,7 +11,9 @@ import Contact from '../components/sections/Contact.astro';
|
||||
<Layout title="浙江贝凡网络科技 - 全场景 ‧ 产业数字化转型服务商" activeNav="home">
|
||||
<main>
|
||||
<Hero />
|
||||
<Timeline />
|
||||
<CompanyIntro />
|
||||
<DevelopmentHistory />
|
||||
<DataVisualization />
|
||||
<Honors />
|
||||
<Contact />
|
||||
</main>
|
||||
|
||||
Reference in New Issue
Block a user