refactor: split single-page landing into three separate pages

README.md

@@ -16,14 +16,18 @@ beifan.cn/
 │   ├── layouts/
 │   │   └── Layout.astro          # 主布局组件（包含导航栏、页脚等）
 │   ├── pages/
-│   │   ├── index.astro            # 首页
+│   │   ├── index.astro            # 首页（公司介绍）
-│   │   └── intro/
+│   │   ├── core-business/         # 核心业务页面
+│   │   │   └── index.astro
+│   │   ├── partnership/           # 生态合作页面
+│   │   │   └── index.astro
+│   │   └── intro/                 # 独立产品页面
 │   │       ├── qazk/              # 企安智控详情页
 │   │       ├── hardware/          # 硬件物联详情页
 │   │       ├── customized-deployment/  # 本地化定制详情页
 │   │       └── miniapp-manual/    # 小程序手册页
 │   ├── components/
-│   │   └── sections/             # 首页各功能区块组件
+│   │   └── sections/             # 各功能区块组件
 │   │       ├── Hero.astro
 │   │       ├── Timeline.astro
 │   │       ├── SaaS.astro
@@ -36,9 +40,9 @@ beifan.cn/
 │   │       ├── Contact.astro
 │   │       ├── Partnership.astro
 │   │       └── Footer.astro
-│   ├── styles/
+│   └── styles/
-│   │   └── global.css            # 全局样式
+│       └── global.css            # 全局样式
-文件├── public/                       # 静态资源
+├── public/                       # 静态资源
 │   ├── img/                       # 图片资源
 │   ├── js/                        # JavaScript 文件
 │   ├── docs/                      # 文档资源
@@ -53,6 +57,42 @@ beifan.cn/
 └── pnpm-lock.yaml                # pnpm 锁文件
 ```
 
+## 页面结构
+
+### 1. 首页（公司介绍）- `/`
+
+包含以下内容区块：
+- **Hero 区域**：全场景产业数字化转型服务介绍
+- **公司介绍**：浙江贝凡发展历程时间轴
+- **核心业务 1 - SaaS化系统**：企安智控智能安全管理解决方案
+- **核心业务 2 - 本地化定制**：多行业全场景定制服务
+- **公司荣誉资质**：企业资质展示
+- **联系我们**：联系方式展示
+- **页脚**：版权信息、ICP备案等
+
+### 2. 核心业务页面 - `/core-business`
+
+包含以下内容区块：
+- **最新政策导向**：安全生产相关政策法规
+- **典型事故案例**：重大事故案例分析
+- **核心业务 3 - 硬件物联**：12个物联网应用场景
+- **AI大模型**：15个AI应用场景
+
+### 3. 生态合作页面 - `/partnership`
+
+包含以下内容区块：
+- **生态合作**：合作伙伴信息
+- **页脚**：版权信息、ICP备案等
+
+### 4. 独立产品页面（Intro）
+
+这些页面使用独立的导航栏和样式：
+
+- **企安智控**：智能安全管理平台详细介绍
+- **硬件物联**：27种智能硬件产品展示
+- **本地化定制**：全场景产业数字化定制方案
+- **小程序手册**：企安智控小程序使用指南
+
 ## 快速开始
 
 ### 安装依赖
@@ -89,38 +129,6 @@ pnpm build
 pnpm preview
 ```
 
-## 功能特性
-
-- 响应式设计，支持桌面端和移动端
-- 基于 Astro 的静态站点生成，加载速度快
-- Tailwind CSS 提供丰富的实用样式类
-- 模块化组件设计，便于维护和扩展
-- 支持 Type checking（通过 Astro Check）
-
-## 站点内容
-
-### 主页
-
-- **Hero 区域**：全场景产业数字化转型服务介绍
-- **公司介绍**：浙江贝凡发展历程时间轴
-- **核心业务 1 - SaaS化系统**：企安智控智能安全管理解决方案
-- **核心业务 2 - 本地化定制**：多行业全场景定制服务
-- **最新政策导向**：安全生产相关政策法规
-- **典型事故案例**：重大事故案例分析
-- **核心业务 3 - 硬件物联**：12个物联网应用场景
-- **AI大模型**：15个AI应用场景
-- **公司荣誉资质**：企业资质展示
-- **联系我们**：联系方式展示
-- **生态合作**：合作伙伴信息
-- **页脚**：版权信息、ICP备案等
-
-### Intro 子页面
-
-- **企安智控**：智能安全管理平台详细介绍
-- **硬件物联**：27种智能硬件产品展示
-- **本地化定制**：全场景产业数字化定制方案
-- **小程序手册**：企安智控小程序使用指南
-
 ## 配置说明
 
 ### Astro 配置
@@ -160,6 +168,41 @@ export default {
 }
 ```
 
+### 导航栏配置
+
+导航栏在 `src/layouts/Layout.astro` 中统一管理，采用**单行紧凑设计**，支持导航高亮：
+
+**桌面端：**
+- 单行布局，三个板块并排显示
+- 胶囊式按钮设计，每个板块包含**图标 + 标题**
+- 当前页面：**蓝色填充背景 + 白色文字**高亮显示
+- 非当前页面：灰色文字，悬停显示淡蓝色背景
+
+**移动端：**
+- 卡片式设计，包含图标容器和标题
+- 当前页面蓝色高亮并显示对勾标记
+
+```astro
+---
+const { title = "浙江贝凡网络科技", activeNav = "home" } = Astro.props;
+
+const navItems = [
+  { id: 'home', label: '公司介绍', href: '/', icon: 'fa-building' },
+  { id: 'core-business', label: '核心业务', href: '/core-business', icon: 'fa-cogs' },
+  { id: 'partnership', label: '生态合作', href: '/partnership', icon: 'fa-handshake-o' },
+];
+---
+```
+
+## 功能特性
+
+- 响应式设计，支持桌面端和移动端
+- 基于 Astro 的静态站点生成，加载速度快
+- Tailwind CSS 提供丰富的实用样式类
+- 模块化组件设计，便于维护和扩展
+- 导航栏自动高亮当前页面
+- 支持类型检查（通过 Astro Check）
+
 ## 部署
 
 ### 静态部署

src/components/sections/Customization.astro

@@ -1,7 +1,7 @@
 ---
 ---
 <section class="bg-slate-50 overflow-hidden">
-	<div class="max-w-7xl mx-auto space-y-24">
+	<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>

src/components/sections/Partnership.astro

@@ -3,10 +3,17 @@
 		<section id="recruitment" class="py-16 md:py-24 bg-white">
 
 			<div class="max-w-7xl mx-auto px-4 lg:px-0">
-
+				<div class="mb-16 relative">
-				<div class="text-center mb-16">
+					<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>
-					<span class="text-blue-600 font-medium text-lg tracking-widest block mb-2">生态合作</span>
+					<div class="text-center">
-					<h2 class="text-[clamp(1.8rem,4vw,3rem)] font-extrabold text-gray-900 mt-2 mb-4">生态合作，共享蓝海</h2>
+						<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>
 
 				<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">

src/components/sections/SaaS.astro

@@ -1,5 +1,5 @@
 <section class="py-16 md:py-24 bg-slate-50 overflow-hidden">
-	<div class="max-w-7xl mx-auto space-y-24">
+	<div class="max-w-7xl mx-auto space-y-24 px-4 lg:px-0">
 
 		<style>
 			@keyframes float {

src/components/sections/Timeline.astro

@@ -9,7 +9,7 @@
 		</div>
 	</div>
 
-	<div class="flex flex-col md:flex-row items-stretch gap-6 md:gap-20 max-w-7xl mx-auto">
+	<div class="flex flex-col md:flex-row items-stretch gap-6 md:gap-20 max-w-7xl mx-auto px-4 lg:px-0">
 
 		<div class="w-full md:w-5/12 order-1 relative">
 			<div class="md:sticky md:top-20 h-fit">

src/layouts/Layout.astro

@@ -1,5 +1,19 @@
 ---
-const { title = "浙江贝凡网络科技" } = Astro.props;
+const { title = "浙江贝凡网络科技", activeNav = "home" } = Astro.props;
+
+const navItems = [
+	{ id: 'home', label: '公司介绍', href: '/', icon: 'fa-building' },
+	{ id: 'core-business', label: '核心业务', href: '/core-business', icon: 'fa-cogs' },
+	{ id: 'partnership', label: '生态合作', href: '/partnership', icon: 'fa-handshake-o' },
+];
+
+function getNavLinkClass(itemId: string) {
+	const baseClass = 'flex items-center gap-2 px-4 py-2.5 rounded-full font-medium transition-all duration-300';
+	if (itemId === activeNav) {
+		return `${baseClass} bg-primary text-white shadow-md`;
+	}
+	return `${baseClass} text-gray-600 hover:text-primary hover:bg-primary/10`;
+}
 ---
 
 <html lang="zh-CN">
@@ -16,29 +30,46 @@ const { title = "浙江贝凡网络科技" } = Astro.props;
 		<a href="/" class="flex items-center space-x-3">
 			<img src="/img/logo.png" alt="浙江贝凡 Logo" class="h-10 w-auto"> 
 		</a>
-		<nav class="hidden lg:flex items-center space-x-6 lg:space-x-8"> 
+		<nav class="hidden lg:flex items-center gap-3"> 
-			<a href="/#home" class="font-bold text-primary transition duration-300 relative hover:text-blue-600">首页</a>
+			{
-			<a href="/#core-business" class="font-medium text-gray-700 hover:text-primary transition duration-300 relative">核心业务</a>
+				navItems.map(item => (
-			<a href="/#ai-model" class="font-medium text-gray-700 hover:text-primary transition duration-300 relative">AI大模型</a>
+					<a href={item.href} class={getNavLinkClass(item.id)}>
-			<a href="/#about-us" class="font-medium text-gray-700 hover:text-primary transition duration-300 relative">关于我们</a>
+						<i class={`fa ${item.icon}`}></i>
-			<a href="/#recruitment" class="font-medium text-gray-700 hover:text-primary transition duration-300 relative">生态合作</a>
+						<span>{item.label}</span>
-		</nav>
-		<a href="/#contact-info" class="hidden lg:block bg-primary hover:bg-blue-600 text-white px-6 py-2 rounded-full font-bold transition-all duration-300 shadow-xl hover:shadow-2xl hover:-translate-y-0.5">
-			立即咨询
 					</a>
-		<button id="menu-toggle" class="lg:hidden text-gray-800 focus:outline-none p-2 rounded-lg hover:bg-gray-100"> 
+				))
+			}
+		</nav>
+		<a href="/#contact-info" class="hidden lg:flex items-center gap-2 bg-primary hover:bg-blue-600 text-white px-5 py-2.5 rounded-full font-bold transition-all duration-300 shadow-lg hover:shadow-xl">
+			<i class="fa fa-phone"></i>
+			<span>立即咨询</span>
+		</a>
+		<button id="menu-toggle" class="lg:hidden text-gray-800 focus:outline-none p-3 rounded-xl hover:bg-gray-100 border border-gray-200"> 
 			<i class="fa fa-bars text-xl"></i>
 		</button>
 	</div>
-	<div id="mobile-menu" class="hidden lg:hidden bg-white border-t border-gray-200 shadow-xl">
+	
-		<div class="max-w-7xl mx-auto px-4 py-3 flex flex-col space-y-2">
+	<div id="mobile-menu" class="hidden lg:hidden bg-white border-t border-gray-200 shadow-xl pb-4">
-			<a href="/#home" class="font-medium text-primary py-2 px-4 rounded-lg hover:bg-primary/10 transition">首页</a>
+		<div class="max-w-7xl mx-auto px-4 pt-4 space-y-2">
-			<a href="/#core-business" class="font-medium text-gray-800 py-2 px-4 rounded-lg hover:bg-primary/10 transition">核心业务</a>
+			{
-			<a href="/#ai-model" class="font-medium text-gray-800 py-2 px-4 rounded-lg hover:bg-primary/10 transition">AI大模型</a>
+				navItems.map(item => (
-			<a href="/#about-us" class="font-medium text-gray-800 py-2 px-4 rounded-lg hover:bg-primary/10 transition">关于我们</a>
+					<a href={item.href} class={`flex items-center gap-4 p-4 rounded-xl transition-all ${item.id === activeNav ? 'bg-primary/10 border-2 border-primary' : 'hover:bg-gray-50 border-2 border-transparent'}`}>
-			<a href="/#recruitment" class="font-medium text-gray-800 py-2 px-4 rounded-lg hover:bg-primary/10 transition">生态合作</a>
+						<div class={`w-12 h-12 rounded-xl flex items-center justify-center ${item.id === activeNav ? 'bg-primary' : 'bg-gray-100'}`}>
-			<a href="/#contact-info" class="bg-primary hover:bg-blue-600 text-white px-6 py-2.5 rounded-full font-bold text-center mt-3 transition shadow-lg">
+							<i class={`fa ${item.icon} text-xl ${item.id === activeNav ? 'text-white' : 'text-gray-600'}`}></i>
-				立即咨询
+						</div>
+						<div class="flex-1">
+							<span class={`text-base font-bold block ${item.id === activeNav ? 'text-primary' : 'text-gray-800'}`}>{item.label}</span>
+						</div>
+						{
+							item.id === activeNav && <i class="fa fa-check-circle text-primary text-xl"></i>
+						}
+					</a>
+				))
+			}
+			<a href="/#contact-info" class="flex items-center gap-4 p-4 rounded-xl bg-primary text-white mt-4">
+				<i class="fa fa-phone text-xl"></i>
+				<span class="text-base font-bold">立即咨询</span>
+				<i class="fa fa-arrow-right ml-auto"></i>
 			</a>
 		</div>
 	</div>

src/pages/core-business/index.astro

@@ -0,0 +1,16 @@
+---
+import Layout from '../../layouts/Layout.astro';
+import Policy from '../../components/sections/Policy.astro';
+import AccidentCases from '../../components/sections/AccidentCases.astro';
+import Hardware from '../../components/sections/Hardware.astro';
+import AIModel from '../../components/sections/AIModel.astro';
+---
+
+<Layout title="核心业务 - 浙江贝凡网络科技" activeNav="core-business">
+	<main class="pt-20">
+		<Policy />
+		<AccidentCases />
+		<Hardware />
+		<AIModel />
+	</main>
+</Layout>

src/pages/index.astro

@@ -4,29 +4,19 @@ import Hero from '../components/sections/Hero.astro';
 import Timeline from '../components/sections/Timeline.astro';
 import SaaS from '../components/sections/SaaS.astro';
 import Customization from '../components/sections/Customization.astro';
-import Policy from '../components/sections/Policy.astro';
-import AccidentCases from '../components/sections/AccidentCases.astro';
-import Hardware from '../components/sections/Hardware.astro';
-import AIModel from '../components/sections/AIModel.astro';
 import Honors from '../components/sections/Honors.astro';
 import Contact from '../components/sections/Contact.astro';
-import Partnership from '../components/sections/Partnership.astro';
 import Footer from '../components/sections/Footer.astro';
 ---
 
-<Layout>
+<Layout title="浙江贝凡网络科技 - 全场景 ‧ 产业数字化转型服务商" activeNav="home">
 	<main>
 		<Hero />
 		<Timeline />
 		<SaaS />
 		<Customization />
-		<Policy />
-		<AccidentCases />
-		<Hardware />
-		<AIModel />
 		<Honors />
 		<Contact />
-		<Partnership />
 	</main>
 	<Footer />
 </Layout>

src/pages/partnership/index.astro

@@ -0,0 +1,10 @@
+---
+import Layout from '../../layouts/Layout.astro';
+import Partnership from '../../components/sections/Partnership.astro';
+---
+
+<Layout title="生态合作 - 浙江贝凡网络科技" activeNav="partnership">
+	<main class="pt-20">
+		<Partnership />
+	</main>
+</Layout>