first commit
This commit is contained in:
commit
fa3733bfde
|
|
@ -0,0 +1,43 @@
|
||||||
|
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
/node_modules
|
||||||
|
/.pnp
|
||||||
|
.pnp.*
|
||||||
|
.yarn/*
|
||||||
|
!.yarn/patches
|
||||||
|
!.yarn/plugins
|
||||||
|
!.yarn/releases
|
||||||
|
!.yarn/versions
|
||||||
|
|
||||||
|
# testing
|
||||||
|
/coverage
|
||||||
|
|
||||||
|
# next.js
|
||||||
|
/.next/
|
||||||
|
/out/
|
||||||
|
|
||||||
|
# production
|
||||||
|
/build
|
||||||
|
|
||||||
|
# misc
|
||||||
|
.DS_Store
|
||||||
|
*.pem
|
||||||
|
|
||||||
|
# debug
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
.pnpm-debug.log*
|
||||||
|
|
||||||
|
# env files (can opt-in for committing if needed)
|
||||||
|
.env*
|
||||||
|
|
||||||
|
# vercel
|
||||||
|
.vercel
|
||||||
|
|
||||||
|
# typescript
|
||||||
|
*.tsbuildinfo
|
||||||
|
next-env.d.ts
|
||||||
|
|
||||||
|
/lib/generated/prisma
|
||||||
|
|
@ -0,0 +1,489 @@
|
||||||
|
# 白马家园官网 - 产品需求文档 (PRD)
|
||||||
|
|
||||||
|
## 📋 文档信息
|
||||||
|
|
||||||
|
- **项目名称**：白马家园官网
|
||||||
|
- **版本**：v3.3
|
||||||
|
- **更新日期**：2025年1月16日
|
||||||
|
- **状态**：开发完成，准备部署
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎯 项目概述
|
||||||
|
|
||||||
|
### 1.1 项目背景
|
||||||
|
|
||||||
|
白马家园是一家专注于数字经济和新质生产力产业集群的科技公司，致力于通过军工技术和人工智能赋能小微企业和实体商业。公司需要建设一个现代化、响应式的官方网站，用于：
|
||||||
|
|
||||||
|
- 品牌形象展示（中英文双语）
|
||||||
|
- 产品矩阵介绍
|
||||||
|
- 客户商机获取
|
||||||
|
- 行业资讯传播
|
||||||
|
- 合作加盟引流
|
||||||
|
|
||||||
|
### 1.2 项目目标
|
||||||
|
|
||||||
|
1. **品牌升级**：打造数字化、科技感的品牌形象（中英文双语）
|
||||||
|
2. **产品展示**：清晰展示四大核心产品线
|
||||||
|
3. **商机转化**：通过客服企业微信二维码引导潜在客户直接联系
|
||||||
|
4. **内容营销**：自动抓取行业资讯，保持网站活跃度
|
||||||
|
5. **用户体验**：支持手机、平板、桌面全设备响应式访问
|
||||||
|
6. **国际化**：支持中英文切换，服务全球用户
|
||||||
|
|
||||||
|
### 1.3 目标用户
|
||||||
|
|
||||||
|
- **潜在合作伙伴**：实体商家、创业者、投资人
|
||||||
|
- **C端消费者**：小微企业主、门店经营者
|
||||||
|
- **媒体和行业人士**：记者、分析师、行业专家
|
||||||
|
- **国际用户**：海外华人和全球商业伙伴
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🏗️ 系统架构
|
||||||
|
|
||||||
|
### 2.1 技术栈
|
||||||
|
|
||||||
|
```
|
||||||
|
前端：Next.js 16 + React 19 + TypeScript
|
||||||
|
UI框架：Tailwind CSS 4 + Radix UI
|
||||||
|
动画：Framer Motion
|
||||||
|
状态管理：React Hooks
|
||||||
|
后端：Next.js API Routes
|
||||||
|
部署：Vercel
|
||||||
|
国际化：Next.js i18n
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2.2 目录结构
|
||||||
|
|
||||||
|
```
|
||||||
|
baima-home/
|
||||||
|
├── app/
|
||||||
|
│ ├── page.tsx # 首页（中文）
|
||||||
|
│ ├── layout.tsx # 全局布局
|
||||||
|
│ ├── globals.css # 全局样式
|
||||||
|
│ ├── en/
|
||||||
|
│ │ └── page.tsx # 首页（英文）
|
||||||
|
│ ├── about/ # 关于我们
|
||||||
|
│ ├── products/ # 产品矩阵
|
||||||
|
│ ├── news/ # 新闻动态
|
||||||
|
│ ├── contact/ # 联系加盟
|
||||||
|
│ ├── admin/ # 后台管理
|
||||||
|
│ └── api/ # API接口
|
||||||
|
│ ├── news/ # 新闻API（静态数据）
|
||||||
|
│ └── auto-fetch/ # 自动抓取API（静态数据）
|
||||||
|
├── components/
|
||||||
|
│ ├── home/ # 首页组件
|
||||||
|
│ │ ├── Hero.tsx # 首屏区域
|
||||||
|
│ │ ├── ProductPreview.tsx # 产品矩阵
|
||||||
|
│ │ ├── MissionVision.tsx # 使命愿景价值观
|
||||||
|
│ │ ├── HonorSection.tsx # 资质荣誉
|
||||||
|
│ │ └── Infrastructure.tsx # 生态基础设施
|
||||||
|
│ ├── layout/ # 布局组件
|
||||||
|
│ │ ├── Navbar.tsx # 导航栏
|
||||||
|
│ │ └── Footer.tsx # 页脚
|
||||||
|
│ └── ui/ # 基础UI组件
|
||||||
|
├── lib/
|
||||||
|
│ └── utils.ts # 工具函数
|
||||||
|
└── public/ # 静态资源
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📱 页面规划
|
||||||
|
|
||||||
|
### 3.1 前台页面
|
||||||
|
|
||||||
|
#### 首页 (/ 和 /en)
|
||||||
|
**设计风格**：单页全景布局，沉浸式体验
|
||||||
|
|
||||||
|
**功能模块**：
|
||||||
|
1. **Hero首屏**
|
||||||
|
- 品牌Logo（大尺寸展示）
|
||||||
|
- 核心标签：军工技术、AI赋能、小微企业
|
||||||
|
- 价值主张：AI数智增长引擎
|
||||||
|
- 三大核心价值：支付即锁粉、让利即引流、跨界即分润
|
||||||
|
- CTA按钮：立即加入白马联盟 / Join Baima Alliance
|
||||||
|
- 背景：深蓝色科技感渐变 + 网格效果
|
||||||
|
|
||||||
|
2. **产品矩阵**
|
||||||
|
- 四大核心板块卡片布局
|
||||||
|
- 金融科技支撑（白马智付）
|
||||||
|
- 私域运营工具（AI拓客宝）【原名"爆客宝AI"】
|
||||||
|
- 异业联盟系统（商家联盟）
|
||||||
|
- 生态基础设施（智能硬件）
|
||||||
|
- 每张卡片包含：标题、描述、功能特性列表
|
||||||
|
- 【已移除】"深入了解"链接
|
||||||
|
|
||||||
|
3. **使命、愿景、价值观**【新增模块】
|
||||||
|
- 使命：军工技术赋能实体经济，人工智能驱动万商互联
|
||||||
|
- 愿景：天下白马是一家，一起赚钱一起花
|
||||||
|
- 价值观：共创、共享、共富
|
||||||
|
- 三大核心板块，渐变色背景，悬停动画效果
|
||||||
|
- 支持中英文双语显示
|
||||||
|
|
||||||
|
4. **权威认证与技术实力**
|
||||||
|
- 资质证书展示（ISO认证、高新技术企业等）
|
||||||
|
- 专利技术展示（专利数量、软著）
|
||||||
|
- 荣誉奖项展示（行业认可）
|
||||||
|
- 响应式网格布局
|
||||||
|
|
||||||
|
5. **生态基础设施**
|
||||||
|
- 会员系统
|
||||||
|
- 供应链资源
|
||||||
|
- 数字资产体系
|
||||||
|
- 【已移除】智能监控（移至智能设备）
|
||||||
|
- 【已移除】"为上市合规打造的底层架构"描述文字
|
||||||
|
|
||||||
|
6. **页脚**
|
||||||
|
- 客服企业微信二维码（替代电话和邮箱）
|
||||||
|
- 产品中心链接
|
||||||
|
- 解决方案链接
|
||||||
|
- 公司地址：天津市武清区京津产业新城海达商务大厦
|
||||||
|
- 公司信息：天津白马晶选科技有限公司 | 天津白马家园健康科技有限公司
|
||||||
|
- 版权信息
|
||||||
|
- 【已移除】隐私政策、服务条款链接
|
||||||
|
|
||||||
|
#### 关于我们 (/about)
|
||||||
|
- 公司介绍
|
||||||
|
- 团队介绍
|
||||||
|
- 发展历程
|
||||||
|
- 资质认证
|
||||||
|
|
||||||
|
#### 产品矩阵 (/products)
|
||||||
|
- 产品详情页
|
||||||
|
- 产品对比
|
||||||
|
- 定价方案
|
||||||
|
- 客户案例
|
||||||
|
|
||||||
|
#### 新闻动态 (/news)
|
||||||
|
- 新闻列表（静态数据展示）
|
||||||
|
- 新闻详情
|
||||||
|
- 分类筛选
|
||||||
|
- 搜索功能
|
||||||
|
|
||||||
|
#### 联系加盟 (/contact)
|
||||||
|
- 公司信息
|
||||||
|
- 地图定位
|
||||||
|
- 客服企业微信二维码（引导用户扫码联系）
|
||||||
|
|
||||||
|
### 3.2 后台管理 (/admin)
|
||||||
|
|
||||||
|
#### 登录验证
|
||||||
|
- 密码保护：固定密码 `admin123`
|
||||||
|
- 简洁的登录界面
|
||||||
|
|
||||||
|
#### 新闻动态管理
|
||||||
|
- 发布新闻（静态数据示例）
|
||||||
|
- 编辑新闻
|
||||||
|
- 删除新闻
|
||||||
|
- 分类管理
|
||||||
|
- 状态跟踪
|
||||||
|
|
||||||
|
#### 自动抓取管理
|
||||||
|
- 手动触发抓取（静态数据示例）
|
||||||
|
- 待审核列表
|
||||||
|
- 审核操作（通过/拒绝）
|
||||||
|
- 抓取历史记录
|
||||||
|
- 配置管理
|
||||||
|
|
||||||
|
### 3.3 语言切换
|
||||||
|
|
||||||
|
- 支持中英文双语
|
||||||
|
- 导航栏语言切换按钮
|
||||||
|
- 中文首页：`/`
|
||||||
|
- 英文首页：`/en`
|
||||||
|
- 页面内容自动切换
|
||||||
|
- 移动端支持滑出式菜单切换
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📡 API 接口
|
||||||
|
|
||||||
|
### 4.1 新闻接口（静态数据）
|
||||||
|
|
||||||
|
**GET** `/api/news`
|
||||||
|
|
||||||
|
返回静态新闻数据示例，无需数据库支持。
|
||||||
|
|
||||||
|
### 4.2 自动抓取接口（静态数据）
|
||||||
|
|
||||||
|
**GET** `/api/auto-fetch`
|
||||||
|
|
||||||
|
返回静态抓取数据示例，无需数据库支持。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🤖 自动抓取系统
|
||||||
|
|
||||||
|
### 5.1 抓取策略（静态示例）
|
||||||
|
|
||||||
|
- **主要来源**：搜狗微信搜索（示例）
|
||||||
|
- **目标账号/关键词**：白马精选、白马家园
|
||||||
|
- **抓取频率**：每6小时自动抓取
|
||||||
|
- **手动触发**：管理员可随时手动抓取
|
||||||
|
|
||||||
|
### 5.2 智能过滤规则
|
||||||
|
|
||||||
|
#### 必须包含的关键词
|
||||||
|
- `白马精选`（必须）
|
||||||
|
- `数字经济`、`AI`、`人工智能`、`金融科技`、`小微企业`（至少一个）
|
||||||
|
|
||||||
|
#### 排除的关键词（房地产相关）
|
||||||
|
```
|
||||||
|
房地产、楼盘、房价、房产、住宅、商业地产
|
||||||
|
购房、租房、地产投资、物业、开盘、预售证
|
||||||
|
样板间、户型图、买房、卖房、出租、二手房
|
||||||
|
白马家园、白马花园、白马苑、白马小区（小区名称）
|
||||||
|
万科白马家园、恒大白马家园、碧桂园白马家园
|
||||||
|
别墅、豪宅、精装房、毛坯房
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 分类规则
|
||||||
|
- `产品发布`：包含发布、上线、新品等关键词
|
||||||
|
- `荣誉获奖`：包含获奖、认证、荣誉等关键词
|
||||||
|
- `行业洞察`：包含趋势、分析、洞察等关键词
|
||||||
|
- `媒体报道`：包含报道、媒体等关键词
|
||||||
|
- 默认：`公司新闻`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎨 设计规范
|
||||||
|
|
||||||
|
### 6.1 视觉风格
|
||||||
|
|
||||||
|
#### 配色方案
|
||||||
|
- **主色调**：橙色 `#FF6600`
|
||||||
|
- 用途：CTA按钮、强调文字、图标、链接
|
||||||
|
- **辅助色**：深蓝色 `#0A1931`
|
||||||
|
- 用途：背景、导航栏、文字
|
||||||
|
- **点缀色**：`#185ADB`（浅蓝）
|
||||||
|
- **背景色**：`#050A14`（深黑）
|
||||||
|
|
||||||
|
#### 字体规范
|
||||||
|
- **标题**：加粗加黑，层级分明
|
||||||
|
- **正文字体**：17px基础字号
|
||||||
|
- **英文字体**：Geist Sans
|
||||||
|
- **中文字体**：系统默认无衬线字体
|
||||||
|
|
||||||
|
### 6.2 响应式断点
|
||||||
|
|
||||||
|
```
|
||||||
|
移动端：< 640px
|
||||||
|
平板端：640px - 1024px
|
||||||
|
桌面端：> 1024px
|
||||||
|
```
|
||||||
|
|
||||||
|
### 6.3 组件规范
|
||||||
|
|
||||||
|
- **按钮**：圆角矩形，阴影效果，悬停动画
|
||||||
|
- **卡片**：圆角边框，阴影，悬停效果
|
||||||
|
- **导航栏**：固定定位，滚动变色，语言切换
|
||||||
|
- **页脚**：多列布局，响应式堆叠，客服二维码
|
||||||
|
- **模块间距**：统一规范，保持视觉平衡
|
||||||
|
|
||||||
|
### 6.4 页面布局优化
|
||||||
|
|
||||||
|
#### Logo 尺寸
|
||||||
|
- 导航栏：56px（h-14）
|
||||||
|
- 首页Hero：64px - 112px（响应式）
|
||||||
|
- 页脚：56px（h-14）
|
||||||
|
|
||||||
|
#### 使命愿景价值观模块
|
||||||
|
- 深蓝渐变背景
|
||||||
|
- 三栏卡片布局
|
||||||
|
- 彩色图标（橙/蓝/绿渐变）
|
||||||
|
- 悬停动画效果
|
||||||
|
- 中英文双语内容
|
||||||
|
|
||||||
|
#### 新闻卡片
|
||||||
|
- 卡片可点击，支持跳转详情页
|
||||||
|
- 分类标签+日期展示
|
||||||
|
- 摘要截断（最多3行）
|
||||||
|
- 阅读更多链接
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🔧 功能实现
|
||||||
|
|
||||||
|
### 7.1 已完成功能
|
||||||
|
|
||||||
|
✅ **前台功能**
|
||||||
|
- 首页单页全景布局（中英文双语）
|
||||||
|
- 使命愿景价值观模块
|
||||||
|
- 响应式设计（全设备适配）
|
||||||
|
- 产品矩阵展示
|
||||||
|
- 资质荣誉展示
|
||||||
|
- 新闻动态模块（静态数据）
|
||||||
|
- 合作加盟表单
|
||||||
|
- 页脚优化（企微二维码）
|
||||||
|
|
||||||
|
✅ **技术功能**
|
||||||
|
- SEO优化
|
||||||
|
- 性能优化
|
||||||
|
- 错误处理
|
||||||
|
- 加载状态
|
||||||
|
- 中英文国际化
|
||||||
|
|
||||||
|
### 7.2 待实现功能
|
||||||
|
|
||||||
|
⏳ **内容功能**
|
||||||
|
- 新闻详情页完善
|
||||||
|
- 产品详情页
|
||||||
|
- 关于我们页面完善
|
||||||
|
|
||||||
|
⏳ **部署功能**
|
||||||
|
- Vercel部署
|
||||||
|
- 域名配置
|
||||||
|
- SSL证书
|
||||||
|
- 监控告警
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🧪 测试用例
|
||||||
|
|
||||||
|
### 8.1 前台测试
|
||||||
|
|
||||||
|
#### 首页测试
|
||||||
|
- [x] Hero区域加载正常
|
||||||
|
- [x] 产品卡片显示完整
|
||||||
|
- [x] 使命愿景价值观模块显示
|
||||||
|
- [x] 资质荣誉网格布局
|
||||||
|
- [x] 新闻动态展示（静态数据）
|
||||||
|
- [x] 移动端响应式布局
|
||||||
|
- [x] 页面滚动动画效果
|
||||||
|
- [x] 中英文切换功能
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 部署计划
|
||||||
|
|
||||||
|
### 9.1 部署环境
|
||||||
|
|
||||||
|
- **开发环境**：本地 `localhost:3000`
|
||||||
|
- **测试环境**：Vercel Preview
|
||||||
|
- **生产环境**：Vercel Production
|
||||||
|
|
||||||
|
### 9.2 部署步骤
|
||||||
|
|
||||||
|
1. **代码推送**
|
||||||
|
```
|
||||||
|
git push origin main
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **Vercel导入**
|
||||||
|
- 访问 https://vercel.com/new
|
||||||
|
- 导入 GitHub 仓库 `wygogogo19/baima-home`
|
||||||
|
|
||||||
|
3. **自动部署**
|
||||||
|
- Vercel自动检测并部署
|
||||||
|
- 预览环境生成
|
||||||
|
|
||||||
|
4. **生产发布**
|
||||||
|
- Vercel生产环境部署
|
||||||
|
- 域名绑定
|
||||||
|
- SSL证书配置
|
||||||
|
|
||||||
|
### 9.3 监控和维护
|
||||||
|
|
||||||
|
- **错误监控**：Vercel Error Tracking
|
||||||
|
- **性能监控**：Vercel Analytics
|
||||||
|
- **日志查看**：Vercel Logs
|
||||||
|
- **回滚机制**：Vercel Deployments
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📊 项目进度
|
||||||
|
|
||||||
|
### 9.1 当前进度
|
||||||
|
|
||||||
|
- ✅ **需求分析**：完成
|
||||||
|
- ✅ **UI设计**：完成
|
||||||
|
- ✅ **前端开发**：完成
|
||||||
|
- ✅ **后端开发**：完成
|
||||||
|
- ✅ **国际化（中英文）**：完成
|
||||||
|
- ✅ **测试调试**：完成
|
||||||
|
- ⏳ **部署上线**：进行中
|
||||||
|
|
||||||
|
### 9.2 下一步计划
|
||||||
|
|
||||||
|
1. **短期目标**
|
||||||
|
- [x] Vercel部署
|
||||||
|
- [x] 生产环境测试
|
||||||
|
|
||||||
|
2. **中期目标（1周内）**
|
||||||
|
- [ ] 完善前台页面
|
||||||
|
- [ ] 新闻详情页开发
|
||||||
|
- [ ] 绑定自定义域名
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📝 变更日志
|
||||||
|
|
||||||
|
### v3.3 (2025-01-16) - 当前版本
|
||||||
|
- 🔄 完全移除数据库依赖
|
||||||
|
- 删除 Prisma ORM 和所有数据库相关代码
|
||||||
|
- 所有 API 接口改为静态数据返回
|
||||||
|
- 删除 prisma/ 目录、lib/prisma.ts
|
||||||
|
- 从 package.json 移除 Prisma 依赖
|
||||||
|
- 不再需要 DATABASE_URL 环境变量
|
||||||
|
- 🔄 更新技术架构文档，移除数据库相关内容
|
||||||
|
- ✅ 简化部署流程，无需数据库配置
|
||||||
|
|
||||||
|
### v3.2 (2025-01-16)
|
||||||
|
- 🔄 更新资质认证描述
|
||||||
|
- "支付业务许可证" → "收单外包服务机构备案"
|
||||||
|
- 🔄 产品矩阵多项优化
|
||||||
|
- 支付能力："主扫被扫全支持" → "主扫、被扫模式全支持"
|
||||||
|
- AI数字人："7x24小时直播 / 数字员工导购" → "AI直播/AI导购/AI客服/AI私域"
|
||||||
|
- 企微私域（原消费券流转）："供应商进货 / 转赠他人使用" → "AI数字员工自动实现：社群运营/维护/导购/客服"
|
||||||
|
- 锁定客户："一次锁定，终身受益" → "扫码即锁定推荐关系，终身享受消费分佣"
|
||||||
|
- 数字资产 → 数字资产体系
|
||||||
|
- RWA资产描述："积分抵用券互转" → "积分、抵用券、金币等"
|
||||||
|
- 智能监控巡店移至智能设备
|
||||||
|
- 🔄 页面结构调整
|
||||||
|
- 删除首页"最新动态"模块
|
||||||
|
- 删除产品卡片"深入了解"链接
|
||||||
|
- ✅ 优化产品展示逻辑，提升用户体验
|
||||||
|
|
||||||
|
### v3.1 (2025-01-16)
|
||||||
|
- 🔄 删除"在线咨询留言"功能模块（Path A - 完全删除）
|
||||||
|
- 🗑️ 删除 Contact 数据模型及相关 API 路由
|
||||||
|
- 🗑️ 删除后台"客户留言管理"功能
|
||||||
|
- 🗑️ 删除前端"在线表单"提交功能
|
||||||
|
- ✅ 全站统一使用客服企业微信二维码作为对外联系入口
|
||||||
|
|
||||||
|
### v3.0 (2025-01-15)
|
||||||
|
- ✅ 新增使命愿景价值观模块
|
||||||
|
- ✅ 新增英文版首页 (/en)
|
||||||
|
- ✅ 新增中英文切换功能
|
||||||
|
- ✅ 新增自动抓取系统（搜狗微信）
|
||||||
|
- ✅ 新增智能过滤（排除房地产内容）
|
||||||
|
- ✅ 新闻卡片支持点击跳转详情页
|
||||||
|
- ✅ 页脚改为客服企业微信号码
|
||||||
|
- ✅ 移除"为上市合规打造的底层架构"
|
||||||
|
- ✅ 产品名称更新：爆客宝AI → AI拓客宝
|
||||||
|
- ✅ 移除页脚隐私政策、服务条款
|
||||||
|
- ✅ Logo尺寸优化放大
|
||||||
|
- ✅ 响应式设计优化
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 👥 团队
|
||||||
|
|
||||||
|
- **产品经理**：[待补充]
|
||||||
|
- **UI设计**：[待补充]
|
||||||
|
- **前端开发**：已完成
|
||||||
|
- **后端开发**：已完成
|
||||||
|
- **测试**：[待补充]
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📞 联系方式
|
||||||
|
|
||||||
|
- **项目负责人**：[待补充]
|
||||||
|
- **技术对接**：[待补充]
|
||||||
|
- **更新日期**：2025年1月16日
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
*本文档将持续更新，记录项目进展和需求变更。*
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
|
||||||
|
|
||||||
|
## Getting Started
|
||||||
|
|
||||||
|
First, run the development server:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run dev
|
||||||
|
# or
|
||||||
|
yarn dev
|
||||||
|
# or
|
||||||
|
pnpm dev
|
||||||
|
# or
|
||||||
|
bun dev
|
||||||
|
```
|
||||||
|
|
||||||
|
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||||
|
|
||||||
|
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
||||||
|
|
||||||
|
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
|
||||||
|
|
||||||
|
## Learn More
|
||||||
|
|
||||||
|
To learn more about Next.js, take a look at the following resources:
|
||||||
|
|
||||||
|
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||||
|
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||||
|
|
||||||
|
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
|
||||||
|
|
||||||
|
## Deploy on Vercel
|
||||||
|
|
||||||
|
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
||||||
|
|
||||||
|
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
|
||||||
|
|
@ -0,0 +1,60 @@
|
||||||
|
import { Team } from '@/components/about/Team'
|
||||||
|
import { Certifications } from '@/components/about/Certifications'
|
||||||
|
import { Badge } from '@/components/ui/badge'
|
||||||
|
|
||||||
|
export default function AboutPage() {
|
||||||
|
return (
|
||||||
|
<div className="pt-24 pb-20">
|
||||||
|
{/* Hero Section */}
|
||||||
|
<section className="container mx-auto px-4 md:px-6 mb-20">
|
||||||
|
<div className="max-w-4xl mx-auto text-center">
|
||||||
|
<Badge variant="outline" className="mb-4 border-primary text-primary bg-primary/5">
|
||||||
|
国资背景 · 军工技术
|
||||||
|
</Badge>
|
||||||
|
<h1 className="text-4xl md:text-5xl font-bold text-secondary mb-8">
|
||||||
|
相互成就 · 共创未来
|
||||||
|
</h1>
|
||||||
|
<p className="text-lg text-muted-foreground leading-relaxed mb-8">
|
||||||
|
白马家园（白马精选）是一家拥有国资背景的高新技术企业，已获五轮融资超 2 亿元。
|
||||||
|
我们致力于通过 AI 人工智能、大数据分析、区块链等前沿技术，解决实体商家"流量难、锁客难、变现难"的痛点，
|
||||||
|
构建万商互联的共享经济生态。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<Team />
|
||||||
|
<Certifications />
|
||||||
|
|
||||||
|
{/* Financing History */}
|
||||||
|
<section className="py-20 bg-secondary text-white">
|
||||||
|
<div className="container mx-auto px-4 md:px-6">
|
||||||
|
<h2 className="text-3xl font-bold text-center mb-16">资本历程</h2>
|
||||||
|
<div className="max-w-4xl mx-auto">
|
||||||
|
<div className="space-y-8 relative before:absolute before:inset-0 before:ml-5 before:-translate-x-px md:before:mx-auto md:before:translate-x-0 before:h-full before:w-0.5 before:bg-gradient-to-b before:from-transparent before:via-white/20 before:to-transparent">
|
||||||
|
{[
|
||||||
|
{ year: "B轮", title: "启迪之星投资", desc: "进一步夯实技术壁垒与市场版图" },
|
||||||
|
{ year: "A+轮", title: "沂景 / 创世伙伴 / 中测航天", desc: "多方资本加持，加速生态布局" },
|
||||||
|
{ year: "A轮", title: "创世伙伴 CCV 领投", desc: "获得知名风投机构青睐" },
|
||||||
|
{ year: "Pre-A", title: "中体基金领投", desc: "初步验证商业模式" },
|
||||||
|
{ year: "天使轮", title: "玖创 / 唯猎 / 天使湾", desc: "启动创业征程" }
|
||||||
|
].map((item, index) => (
|
||||||
|
<div key={index} className="relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active">
|
||||||
|
<div className="flex items-center justify-center w-10 h-10 rounded-full border border-white/20 bg-white/10 group-[.is-active]:bg-primary text-white shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2">
|
||||||
|
<div className="w-3 h-3 bg-current rounded-full"></div>
|
||||||
|
</div>
|
||||||
|
<div className="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] p-4 rounded border border-white/10 bg-white/5 shadow">
|
||||||
|
<div className="flex items-center justify-between space-x-2 mb-1">
|
||||||
|
<div className="font-bold text-white">{item.title}</div>
|
||||||
|
<time className="font-mono italic text-primary">{item.year}</time>
|
||||||
|
</div>
|
||||||
|
<div className="text-white/60 text-sm">{item.desc}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,571 @@
|
||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useState, useEffect } from 'react'
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||||
|
import { Input } from '@/components/ui/input'
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
import { Textarea } from '@/components/ui/textarea'
|
||||||
|
import {
|
||||||
|
RefreshCw,
|
||||||
|
Lock,
|
||||||
|
Newspaper,
|
||||||
|
Plus,
|
||||||
|
Trash2,
|
||||||
|
LogOut,
|
||||||
|
Rss,
|
||||||
|
Settings,
|
||||||
|
Check,
|
||||||
|
X,
|
||||||
|
Eye,
|
||||||
|
Globe
|
||||||
|
} from 'lucide-react'
|
||||||
|
|
||||||
|
type News = {
|
||||||
|
id: number
|
||||||
|
title: string
|
||||||
|
category: string
|
||||||
|
excerpt: string
|
||||||
|
createdAt: string
|
||||||
|
}
|
||||||
|
|
||||||
|
type AutoFetchedNews = {
|
||||||
|
id: number
|
||||||
|
title: string
|
||||||
|
source: string
|
||||||
|
url: string
|
||||||
|
imageUrl: string
|
||||||
|
excerpt: string
|
||||||
|
category: string
|
||||||
|
publishTime: string
|
||||||
|
status: string
|
||||||
|
isDigitalEconomy: boolean
|
||||||
|
createdAt: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function AdminPage() {
|
||||||
|
const [activeTab, setActiveTab] = useState<'news' | 'autofetch'>('news')
|
||||||
|
const [isAuthenticated, setIsAuthenticated] = useState(false)
|
||||||
|
const [password, setPassword] = useState('')
|
||||||
|
const [newsList, setNewsList] = useState<News[]>([])
|
||||||
|
const [autoFetchedNews, setAutoFetchedNews] = useState<AutoFetchedNews[]>([])
|
||||||
|
const [isLoading, setIsLoading] = useState(false)
|
||||||
|
|
||||||
|
// 新闻发布表单状态
|
||||||
|
const [showAddNews, setShowAddNews] = useState(false)
|
||||||
|
const [newNews, setNewNews] = useState({
|
||||||
|
title: '',
|
||||||
|
category: '公司新闻',
|
||||||
|
excerpt: '',
|
||||||
|
content: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
// 自动抓取状态
|
||||||
|
const [isAutoFetching, setIsAutoFetching] = useState(false)
|
||||||
|
const [fetchStatus, setFetchStatus] = useState<{
|
||||||
|
lastFetch: string | null
|
||||||
|
nextFetch: string | null
|
||||||
|
}>({
|
||||||
|
lastFetch: null,
|
||||||
|
nextFetch: null
|
||||||
|
})
|
||||||
|
|
||||||
|
const handleLogin = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault()
|
||||||
|
if (password === 'admin123') {
|
||||||
|
setIsAuthenticated(true)
|
||||||
|
fetchAllData()
|
||||||
|
} else {
|
||||||
|
alert('密码错误')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const fetchAllData = async () => {
|
||||||
|
setIsLoading(true)
|
||||||
|
try {
|
||||||
|
const [newsRes, autoFetchRes] = await Promise.all([
|
||||||
|
fetch('/api/news'),
|
||||||
|
fetch('/api/auto-fetch')
|
||||||
|
])
|
||||||
|
|
||||||
|
if (newsRes.ok) {
|
||||||
|
const data = await newsRes.json()
|
||||||
|
setNewsList(data.news || [])
|
||||||
|
}
|
||||||
|
if (autoFetchRes.ok) {
|
||||||
|
const data = await autoFetchRes.json()
|
||||||
|
// 合并待审核和已批准的内容
|
||||||
|
const allNews = [
|
||||||
|
...(data.pending || []),
|
||||||
|
...(data.approved || []).filter((a: AutoFetchedNews) =>
|
||||||
|
!data.pending?.some((p: AutoFetchedNews) => p.id === a.id)
|
||||||
|
)
|
||||||
|
]
|
||||||
|
setAutoFetchedNews(allNews)
|
||||||
|
setFetchStatus({
|
||||||
|
lastFetch: data.lastFetch,
|
||||||
|
nextFetch: data.nextFetch
|
||||||
|
})
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取数据失败', error)
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleAddNews = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault()
|
||||||
|
try {
|
||||||
|
const res = await fetch('/api/news', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify(newNews)
|
||||||
|
})
|
||||||
|
if (res.ok) {
|
||||||
|
setNewNews({ title: '', category: '公司新闻', excerpt: '', content: '' })
|
||||||
|
setShowAddNews(false)
|
||||||
|
fetchAllData()
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
alert('发布失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 自动抓取相关函数
|
||||||
|
const triggerAutoFetch = async () => {
|
||||||
|
setIsAutoFetching(true)
|
||||||
|
try {
|
||||||
|
const res = await fetch('/api/auto-fetch', { method: 'POST' })
|
||||||
|
const data = await res.json()
|
||||||
|
|
||||||
|
if (data.success) {
|
||||||
|
alert(`成功抓取 ${data.articles?.length || 0} 条资讯`)
|
||||||
|
fetchAllData()
|
||||||
|
} else {
|
||||||
|
alert('抓取失败：' + data.error)
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
alert('抓取失败，请稍后重试')
|
||||||
|
} finally {
|
||||||
|
setIsAutoFetching(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const approveArticle = async (id: number) => {
|
||||||
|
try {
|
||||||
|
const res = await fetch(`/api/auto-fetch/${id}/approve`, { method: 'POST' })
|
||||||
|
if (res.ok) {
|
||||||
|
fetchAllData()
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
alert('操作失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const rejectArticle = async (id: number) => {
|
||||||
|
const reason = prompt('请输入拒绝原因：')
|
||||||
|
if (reason === null) return
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await fetch(`/api/auto-fetch/${id}/reject`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ reason })
|
||||||
|
})
|
||||||
|
if (res.ok) {
|
||||||
|
fetchAllData()
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
alert('操作失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const deleteArticle = async (id: number) => {
|
||||||
|
if (!confirm('确定要删除这条资讯吗？')) return
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await fetch(`/api/auto-fetch/${id}`, { method: 'DELETE' })
|
||||||
|
if (res.ok) {
|
||||||
|
fetchAllData()
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
alert('删除失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!isAuthenticated) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center bg-[#0A1931]">
|
||||||
|
<Card className="w-[350px] shadow-2xl border-0">
|
||||||
|
<CardHeader className="text-center pb-8 pt-10">
|
||||||
|
<CardTitle className="text-2xl font-black text-[#0A1931] flex flex-col items-center gap-4">
|
||||||
|
<div className="w-16 h-16 bg-[#FF6600] rounded-2xl flex items-center justify-center text-white shadow-lg">
|
||||||
|
<Lock className="w-8 h-8" />
|
||||||
|
</div>
|
||||||
|
白马家园后台管理
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="pb-10 px-8">
|
||||||
|
<form onSubmit={handleLogin} className="space-y-6">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm font-bold text-gray-500">管理员密码</label>
|
||||||
|
<Input
|
||||||
|
type="password"
|
||||||
|
placeholder="请输入密码"
|
||||||
|
className="h-12 border-gray-200 focus:border-[#FF6600] focus:ring-[#FF6600]"
|
||||||
|
value={password}
|
||||||
|
onChange={(e) => setPassword(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Button type="submit" className="w-full h-12 bg-[#0A1931] hover:bg-[#185ADB] font-bold text-lg rounded-xl transition-all">
|
||||||
|
进入管理中心
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-50 flex">
|
||||||
|
{/* Sidebar */}
|
||||||
|
<aside className="w-64 bg-[#0A1931] text-white hidden md:flex flex-col">
|
||||||
|
<div className="p-8 border-b border-white/10">
|
||||||
|
<span className="text-xl font-black">管理中心</span>
|
||||||
|
</div>
|
||||||
|
<nav className="flex-grow p-4 space-y-2">
|
||||||
|
<button
|
||||||
|
onClick={() => setActiveTab('news')}
|
||||||
|
className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all font-bold ${activeTab === 'news' ? 'bg-[#FF6600] text-white shadow-lg' : 'hover:bg-white/5 text-gray-400'}`}
|
||||||
|
>
|
||||||
|
<Newspaper className="w-5 h-5" />
|
||||||
|
新闻动态
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setActiveTab('autofetch')}
|
||||||
|
className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all font-bold ${activeTab === 'autofetch' ? 'bg-[#FF6600] text-white shadow-lg' : 'hover:bg-white/5 text-gray-400'}`}
|
||||||
|
>
|
||||||
|
<Rss className="w-5 h-5" />
|
||||||
|
自动抓取
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
|
<div className="p-6">
|
||||||
|
<Button variant="ghost" className="w-full text-gray-400 hover:text-white" onClick={() => setIsAuthenticated(false)}>
|
||||||
|
<LogOut className="w-4 h-4 mr-2" /> 退出登录
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
{/* Main Content */}
|
||||||
|
<main className="flex-grow pt-24 pb-12 px-4 md:px-8 overflow-y-auto">
|
||||||
|
<div className="max-w-6xl mx-auto">
|
||||||
|
|
||||||
|
<div className="flex justify-between items-center mb-10">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-3xl font-black text-[#0A1931]">
|
||||||
|
{activeTab === 'news' && '公司/行业动态'}
|
||||||
|
{activeTab === 'autofetch' && '资讯自动抓取'}
|
||||||
|
</h1>
|
||||||
|
<p className="text-gray-500 mt-1">
|
||||||
|
{activeTab === 'news' && '发布和管理最新的公司动态与行业资讯'}
|
||||||
|
{activeTab === 'autofetch' && '自动抓取白马精选公众号等资讯，智能筛选后展示'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-3">
|
||||||
|
{activeTab === 'news' && (
|
||||||
|
<Button
|
||||||
|
onClick={() => setShowAddNews(!showAddNews)}
|
||||||
|
className="bg-[#FF6600] hover:bg-[#FF8C00] font-bold"
|
||||||
|
>
|
||||||
|
<Plus className="w-4 h-4 mr-2" /> 发布动态
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
{activeTab === 'autofetch' && (
|
||||||
|
<Button
|
||||||
|
onClick={triggerAutoFetch}
|
||||||
|
disabled={isAutoFetching}
|
||||||
|
className="bg-[#FF6600] hover:bg-[#FF8C00] font-bold"
|
||||||
|
>
|
||||||
|
<RefreshCw className={`w-4 h-4 mr-2 ${isAutoFetching ? 'animate-spin' : ''}`} />
|
||||||
|
{isAutoFetching ? '抓取中...' : '立即抓取'}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
<Button variant="outline" onClick={fetchAllData} disabled={isLoading} className="border-gray-200">
|
||||||
|
<RefreshCw className={`w-4 h-4 mr-2 ${isLoading ? 'animate-spin' : ''}`} /> 刷新
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 新闻发布表单 */}
|
||||||
|
{activeTab === 'news' && showAddNews && (
|
||||||
|
<Card className="mb-10 border-2 border-[#FF6600]/20 shadow-xl overflow-hidden">
|
||||||
|
<CardHeader className="bg-[#FF6600]/5 border-b">
|
||||||
|
<CardTitle className="text-lg">撰写新动态</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="pt-6">
|
||||||
|
<form onSubmit={handleAddNews} className="space-y-4">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm font-bold">标题</label>
|
||||||
|
<Input
|
||||||
|
placeholder="输入新闻标题"
|
||||||
|
required
|
||||||
|
onChange={(e) => setNewNews({...newNews, title: e.target.value})}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm font-bold">分类</label>
|
||||||
|
<select
|
||||||
|
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
|
||||||
|
value={newNews.category}
|
||||||
|
onChange={(e) => setNewNews({...newNews, category: e.target.value})}
|
||||||
|
>
|
||||||
|
<option>公司新闻</option>
|
||||||
|
<option>行业洞察</option>
|
||||||
|
<option>媒体报道</option>
|
||||||
|
<option>产品发布</option>
|
||||||
|
<option>荣誉获奖</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm font-bold">摘要</label>
|
||||||
|
<Input
|
||||||
|
placeholder="输入新闻简介"
|
||||||
|
value={newNews.excerpt}
|
||||||
|
onChange={(e) => setNewNews({...newNews, excerpt: e.target.value})}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm font-bold">详细内容</label>
|
||||||
|
<Textarea
|
||||||
|
placeholder="输入详细报道内容..."
|
||||||
|
className="min-h-[150px]"
|
||||||
|
value={newNews.content}
|
||||||
|
onChange={(e) => setNewNews({...newNews, content: e.target.value})}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-3 justify-end">
|
||||||
|
<Button variant="ghost" onClick={() => setShowAddNews(false)}>取消</Button>
|
||||||
|
<Button type="submit" className="bg-[#0A1931] hover:bg-[#185ADB] px-8">立即发布</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 自动抓取状态面板 */}
|
||||||
|
{activeTab === 'autofetch' && (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10">
|
||||||
|
<Card className="bg-gradient-to-br from-[#FF6600] to-[#FF8C00] text-white">
|
||||||
|
<CardContent className="pt-6">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center">
|
||||||
|
<Rss className="w-6 h-6" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm opacity-80">上次抓取时间</p>
|
||||||
|
<p className="text-lg font-bold">
|
||||||
|
{fetchStatus.lastFetch
|
||||||
|
? new Date(fetchStatus.lastFetch).toLocaleString('zh-CN')
|
||||||
|
: '尚未抓取'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="bg-gradient-to-br from-[#0A1931] to-[#185ADB] text-white">
|
||||||
|
<CardContent className="pt-6">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center">
|
||||||
|
<Settings className="w-6 h-6" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm opacity-80">下次抓取时间</p>
|
||||||
|
<p className="text-lg font-bold">
|
||||||
|
{fetchStatus.nextFetch
|
||||||
|
? new Date(fetchStatus.nextFetch).toLocaleString('zh-CN')
|
||||||
|
: '每6小时自动抓取'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="bg-gradient-to-br from-green-500 to-emerald-600 text-white">
|
||||||
|
<CardContent className="pt-6">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center">
|
||||||
|
<Check className="w-6 h-6" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm opacity-80">待审核资讯</p>
|
||||||
|
<p className="text-2xl font-bold">
|
||||||
|
{autoFetchedNews.filter(n => n.status === 'PENDING').length} 条
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 数据列表 */}
|
||||||
|
<div className="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
|
||||||
|
{activeTab === 'news' && (
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="w-full text-sm text-left">
|
||||||
|
<thead className="text-xs text-gray-400 uppercase bg-gray-50/50 border-b">
|
||||||
|
<tr>
|
||||||
|
<th className="px-6 py-4">发布时间</th>
|
||||||
|
<th className="px-6 py-4">标题</th>
|
||||||
|
<th className="px-6 py-4">分类</th>
|
||||||
|
<th className="px-6 py-4">摘要</th>
|
||||||
|
<th className="px-6 py-4 text-right">操作</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="divide-y">
|
||||||
|
{newsList.length === 0 ? (
|
||||||
|
<tr><td colSpan={5} className="text-center py-20 text-gray-400">暂无动态数据</td></tr>
|
||||||
|
) : (
|
||||||
|
newsList.map((n) => (
|
||||||
|
<tr key={n.id} className="hover:bg-gray-50 transition-colors">
|
||||||
|
<td className="px-6 py-4 text-xs text-gray-400 whitespace-nowrap">{new Date(n.createdAt).toLocaleDateString()}</td>
|
||||||
|
<td className="px-6 py-4 font-bold text-[#0A1931]">{n.title}</td>
|
||||||
|
<td className="px-6 py-4">
|
||||||
|
<span className="bg-orange-50 text-[#FF6600] px-2.5 py-1 rounded-full text-xs font-bold">{n.category}</span>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 text-gray-500 max-w-xs truncate">{n.excerpt}</td>
|
||||||
|
<td className="px-6 py-4 text-right">
|
||||||
|
<Button variant="ghost" size="icon" className="text-gray-300 hover:text-red-500">
|
||||||
|
<Trash2 className="w-4 h-4" />
|
||||||
|
</Button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{activeTab === 'autofetch' && (
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="w-full text-sm text-left">
|
||||||
|
<thead className="text-xs text-gray-400 uppercase bg-gray-50/50 border-b">
|
||||||
|
<tr>
|
||||||
|
<th className="px-6 py-4">发布时间</th>
|
||||||
|
<th className="px-6 py-4">标题</th>
|
||||||
|
<th className="px-6 py-4">来源</th>
|
||||||
|
<th className="px-6 py-4">分类</th>
|
||||||
|
<th className="px-6 py-4">状态</th>
|
||||||
|
<th className="px-6 py-4 text-right">操作</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="divide-y">
|
||||||
|
{autoFetchedNews.length === 0 ? (
|
||||||
|
<tr>
|
||||||
|
<td colSpan={6} className="text-center py-20">
|
||||||
|
<div className="flex flex-col items-center gap-4">
|
||||||
|
<Rss className="w-16 h-16 text-gray-300" />
|
||||||
|
<div>
|
||||||
|
<p className="text-gray-500 font-medium">暂无抓取数据</p>
|
||||||
|
<p className="text-gray-400 text-sm">点击"立即抓取"按钮开始抓取资讯</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
) : (
|
||||||
|
autoFetchedNews.map((news) => (
|
||||||
|
<tr key={news.id} className="hover:bg-gray-50 transition-colors">
|
||||||
|
<td className="px-6 py-4 text-xs text-gray-400 whitespace-nowrap">
|
||||||
|
{new Date(news.publishTime).toLocaleDateString()}
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4">
|
||||||
|
<div className="font-bold text-[#0A1931] max-w-xs truncate">{news.title}</div>
|
||||||
|
{news.excerpt && (
|
||||||
|
<div className="text-gray-400 text-xs mt-1 max-w-xs truncate">{news.excerpt}</div>
|
||||||
|
)}
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Globe className="w-4 h-4 text-[#FF6600]" />
|
||||||
|
<span className="text-gray-600">{news.source}</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4">
|
||||||
|
<span className="bg-blue-50 text-blue-600 px-2.5 py-1 rounded-full text-xs font-bold">
|
||||||
|
{news.category}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4">
|
||||||
|
<span className={`px-2.5 py-1 rounded-full text-xs font-bold ${
|
||||||
|
news.status === 'APPROVED' ? 'bg-green-50 text-green-600' :
|
||||||
|
news.status === 'REJECTED' ? 'bg-red-50 text-red-600' :
|
||||||
|
'bg-yellow-50 text-yellow-600'
|
||||||
|
}`}>
|
||||||
|
{news.status === 'APPROVED' ? '已发布' :
|
||||||
|
news.status === 'REJECTED' ? '已拒绝' : '待审核'}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 text-right">
|
||||||
|
<div className="flex justify-end gap-2">
|
||||||
|
{news.status === 'PENDING' && (
|
||||||
|
<>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="text-green-500 hover:text-green-600"
|
||||||
|
onClick={() => approveArticle(news.id)}
|
||||||
|
title="通过并发布"
|
||||||
|
>
|
||||||
|
<Check className="w-4 h-4" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="text-red-500 hover:text-red-600"
|
||||||
|
onClick={() => rejectArticle(news.id)}
|
||||||
|
title="拒绝"
|
||||||
|
>
|
||||||
|
<X className="w-4 h-4" />
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{news.url && (
|
||||||
|
<a
|
||||||
|
href={news.url}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-gray-400 hover:text-[#FF6600] p-2"
|
||||||
|
title="查看原文"
|
||||||
|
>
|
||||||
|
<Eye className="w-4 h-4" />
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="text-gray-300 hover:text-red-500"
|
||||||
|
onClick={() => deleteArticle(news.id)}
|
||||||
|
title="删除"
|
||||||
|
>
|
||||||
|
<Trash2 className="w-4 h-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
import { NextResponse } from 'next/server'
|
||||||
|
|
||||||
|
export const dynamic = "force-static"
|
||||||
|
|
||||||
|
// 自动抓取接口（静态数据）
|
||||||
|
export async function GET(request: Request) {
|
||||||
|
return NextResponse.json({
|
||||||
|
lastFetch: null,
|
||||||
|
nextFetch: null,
|
||||||
|
pending: [],
|
||||||
|
approved: []
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 手动触发抓取（禁用）
|
||||||
|
export async function POST(request: Request) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: '自动抓取功能已禁用' },
|
||||||
|
{ status: 403 }
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,66 @@
|
||||||
|
import { NextResponse } from 'next/server'
|
||||||
|
|
||||||
|
export const dynamic = "force-static"
|
||||||
|
|
||||||
|
// 获取新闻列表（静态数据）
|
||||||
|
export async function GET(request: Request) {
|
||||||
|
const { searchParams } = new URL(request.url)
|
||||||
|
const page = parseInt(searchParams.get('page') || '1')
|
||||||
|
const limit = parseInt(searchParams.get('limit') || '10')
|
||||||
|
const category = searchParams.get('category')
|
||||||
|
|
||||||
|
// 静态数据示例
|
||||||
|
const allNews = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
title: "白马家园荣获数字经济创新大奖",
|
||||||
|
category: "公司新闻",
|
||||||
|
excerpt: "白马家园在数字经济领域取得突破性进展，荣获行业创新大奖。",
|
||||||
|
createdAt: new Date().toISOString(),
|
||||||
|
source: '手动发布'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
title: "AI数字人技术引领新零售变革",
|
||||||
|
category: "行业洞察",
|
||||||
|
excerpt: "白马家园推出的AI数字人解决方案正在重塑新零售体验。",
|
||||||
|
createdAt: new Date(Date.now() - 86400000).toISOString(),
|
||||||
|
source: '白马精选'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
title: "收单外包服务机构备案正式获批",
|
||||||
|
category: "公司新闻",
|
||||||
|
excerpt: "白马家园成功获得收单外包服务机构备案，合规能力再上新台阶。",
|
||||||
|
createdAt: new Date(Date.now() - 172800000).toISOString(),
|
||||||
|
source: '手动发布'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
// 分类筛选
|
||||||
|
const filteredNews = category
|
||||||
|
? allNews.filter(item => item.category === category)
|
||||||
|
: allNews
|
||||||
|
|
||||||
|
// 分页
|
||||||
|
const total = filteredNews.length
|
||||||
|
const paginatedNews = filteredNews.slice((page - 1) * limit, page * limit)
|
||||||
|
|
||||||
|
return NextResponse.json({
|
||||||
|
news: paginatedNews,
|
||||||
|
pagination: {
|
||||||
|
page,
|
||||||
|
limit,
|
||||||
|
total,
|
||||||
|
totalPages: Math.ceil(total / limit),
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 创建新闻（禁用）
|
||||||
|
export async function POST(request: Request) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: '新闻发布功能已禁用，请通过后台手动更新' },
|
||||||
|
{ status: 403 }
|
||||||
|
)
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 178 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
|
|
@ -0,0 +1,109 @@
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||||
|
import { MapPin, UserPlus, Store, ArrowRight, MessageCircle, ScanQrCode } from 'lucide-react'
|
||||||
|
|
||||||
|
export default function ContactPage() {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="pt-24 pb-20 bg-white">
|
||||||
|
{/* Header */}
|
||||||
|
<section className="container mx-auto px-4 md:px-6 mb-16 text-center">
|
||||||
|
<h1 className="text-4xl font-bold text-secondary mb-4">合作加盟</h1>
|
||||||
|
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
|
||||||
|
无论您是希望成为区域合伙人，还是商家寻求数字化转型，我们都期待与您携手共赢。
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div className="container mx-auto px-4 md:px-6">
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||||
|
|
||||||
|
{/* Left: Partner Benefits & Info */}
|
||||||
|
<div className="space-y-8">
|
||||||
|
{/* Partner Benefits */}
|
||||||
|
<Card className="border-0 shadow-lg bg-accent">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-xl flex items-center gap-2">
|
||||||
|
<UserPlus className="w-5 h-5 text-primary" />
|
||||||
|
合伙人权益
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4">
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center shrink-0">
|
||||||
|
<Store className="w-5 h-5 text-primary" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold">区域独家保护</h3>
|
||||||
|
<p className="text-sm text-muted-foreground">享受区域内所有商家流水的分润，建立持久管道收益。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center shrink-0">
|
||||||
|
<ArrowRight className="w-5 h-5 text-primary" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold">全套运营支持</h3>
|
||||||
|
<p className="text-sm text-muted-foreground">提供技术培训、物料支持、招商会销支持，助您快速展业。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Contact Info */}
|
||||||
|
<div className="space-y-6">
|
||||||
|
<h2 className="text-2xl font-bold text-secondary">联系我们</h2>
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
|
||||||
|
<MapPin className="w-5 h-5 text-primary" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-muted-foreground">公司地址</p>
|
||||||
|
<p className="font-semibold text-lg">天津市武清区京津产业新城海达商务大厦</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<Card className="border-0 shadow-lg">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2">
|
||||||
|
<MessageCircle className="w-5 h-5 text-primary" />
|
||||||
|
扫码联系客服
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="text-center">
|
||||||
|
<div className="flex flex-col items-center space-y-6">
|
||||||
|
<div className="relative">
|
||||||
|
<img
|
||||||
|
src="/baima-qrcode.png"
|
||||||
|
alt="企业微信客服二维码"
|
||||||
|
className="w-64 h-64 object-contain rounded-2xl shadow-2xl border-4 border-primary/20"
|
||||||
|
/>
|
||||||
|
<div className="absolute -bottom-2 -right-2 w-12 h-12 bg-primary rounded-full flex items-center justify-center shadow-lg">
|
||||||
|
<ScanQrCode className="w-6 h-6 text-white" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
<h3 className="text-xl font-bold text-gray-900">
|
||||||
|
立即扫码，一对一沟通
|
||||||
|
</h3>
|
||||||
|
<p className="text-muted-foreground max-w-md">
|
||||||
|
我们的专业团队将为您提供详细的产品咨询和合作方案，期待与您携手共赢。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2 text-sm text-primary font-medium">
|
||||||
|
<div className="w-2 h-2 bg-primary rounded-full animate-pulse" />
|
||||||
|
客服在线中，快速响应
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,58 @@
|
||||||
|
import { Hero } from '@/components/home/Hero'
|
||||||
|
import { ProductPreview } from '@/components/home/ProductPreview'
|
||||||
|
import { MissionVisionEN } from '@/components/home/MissionVisionEN'
|
||||||
|
import { HonorSection } from '@/components/home/HonorSection'
|
||||||
|
import { Infrastructure } from '@/components/home/Infrastructure'
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
import Link from 'next/link'
|
||||||
|
|
||||||
|
export default function Home() {
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col w-full overflow-x-hidden">
|
||||||
|
{/* 1. Brand Positioning & Hero */}
|
||||||
|
<Hero />
|
||||||
|
|
||||||
|
{/* 2. Core Product Matrix */}
|
||||||
|
<div id="products" className="scroll-mt-20">
|
||||||
|
<ProductPreview />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 3. Mission, Vision & Values */}
|
||||||
|
<MissionVisionEN />
|
||||||
|
|
||||||
|
{/* 4. Authority Certifications & Technical Strength */}
|
||||||
|
<HonorSection />
|
||||||
|
|
||||||
|
{/* 5. Ecological Infrastructure */}
|
||||||
|
<Infrastructure />
|
||||||
|
|
||||||
|
{/* 7. Call to Action & Contact */}
|
||||||
|
<section id="contact" className="py-24 bg-gradient-to-br from-[#0A1931] to-[#185ADB] text-white text-center scroll-mt-20">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
<h2 className="text-3xl md:text-5xl font-black mb-8 leading-tight">
|
||||||
|
Connect with 120,000+ Merchants<br/>Create a New Business Ecosystem
|
||||||
|
</h2>
|
||||||
|
<p className="text-lg md:text-xl text-gray-300 max-w-3xl mx-auto mb-12 leading-relaxed">
|
||||||
|
Whether you're a brick-and-mortar business seeking transformation or an individual aspiring to entrepreneurship,
|
||||||
|
Baima Home provides a broad platform. Our ecosystem is fully open to the public -
|
||||||
|
click the button below to get in touch with us.
|
||||||
|
</p>
|
||||||
|
<div className="flex flex-col sm:flex-row gap-6 justify-center">
|
||||||
|
<Link
|
||||||
|
href="/contact#form"
|
||||||
|
className="inline-flex h-14 items-center justify-center rounded-full bg-[#FF6600] px-10 text-xl font-black shadow-2xl shadow-[#FF6600]/40 transition-all hover:bg-[#FF8C00] hover:scale-105"
|
||||||
|
>
|
||||||
|
Join Baima Alliance
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
href="/contact"
|
||||||
|
className="inline-flex h-14 items-center justify-center rounded-full border-2 border-white/30 px-10 text-lg font-bold transition-all hover:bg-white/10"
|
||||||
|
>
|
||||||
|
Learn More
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 257 KiB |
|
|
@ -0,0 +1,173 @@
|
||||||
|
@import "tailwindcss";
|
||||||
|
@import "tw-animate-css";
|
||||||
|
|
||||||
|
@custom-variant dark (&:is(.dark *));
|
||||||
|
|
||||||
|
@theme inline {
|
||||||
|
--color-background: var(--background);
|
||||||
|
--color-foreground: var(--foreground);
|
||||||
|
--font-sans: var(--font-geist-sans);
|
||||||
|
--font-mono: var(--font-geist-mono);
|
||||||
|
|
||||||
|
/* Brand Colors */
|
||||||
|
--color-primary-blue: var(--primary-blue);
|
||||||
|
--color-accent-blue: var(--accent-blue);
|
||||||
|
--color-primary-orange: var(--primary-orange);
|
||||||
|
--color-secondary-orange: var(--secondary-orange);
|
||||||
|
|
||||||
|
/* UI Colors */
|
||||||
|
--color-primary: var(--primary);
|
||||||
|
--color-primary-foreground: var(--primary-foreground);
|
||||||
|
--color-secondary: var(--secondary);
|
||||||
|
--color-secondary-foreground: var(--secondary-foreground);
|
||||||
|
--color-accent: var(--accent);
|
||||||
|
--color-accent-foreground: var(--accent-foreground);
|
||||||
|
--color-destructive: var(--destructive);
|
||||||
|
--color-destructive-foreground: var(--destructive-foreground);
|
||||||
|
--color-muted: var(--muted);
|
||||||
|
--color-muted-foreground: var(--muted-foreground);
|
||||||
|
--color-card: var(--card);
|
||||||
|
--color-card-foreground: var(--card-foreground);
|
||||||
|
--color-popover: var(--popover);
|
||||||
|
--color-popover-foreground: var(--popover-foreground);
|
||||||
|
--color-border: var(--border);
|
||||||
|
--color-input: var(--input);
|
||||||
|
--color-ring: var(--ring);
|
||||||
|
|
||||||
|
/* Radius */
|
||||||
|
--radius-sm: calc(var(--radius) - 4px);
|
||||||
|
--radius-md: calc(var(--radius) - 2px);
|
||||||
|
--radius-lg: var(--radius);
|
||||||
|
--radius-xl: calc(var(--radius) + 4px);
|
||||||
|
--radius-2xl: calc(var(--radius) + 8px);
|
||||||
|
--radius-3xl: calc(var(--radius) + 12px);
|
||||||
|
--radius-4xl: calc(var(--radius) + 16px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 融合配色方案 */
|
||||||
|
|
||||||
|
:root {
|
||||||
|
/* 品牌深蓝色调 */
|
||||||
|
--primary-blue: oklch(0.15 0.03 260);
|
||||||
|
--accent-blue: oklch(0.45 0.15 240);
|
||||||
|
|
||||||
|
/* 活力橙 */
|
||||||
|
--primary-orange: oklch(0.65 0.18 40);
|
||||||
|
--secondary-orange: oklch(0.7 0.18 45);
|
||||||
|
|
||||||
|
/* 基础色 */
|
||||||
|
--primary: var(--primary-orange);
|
||||||
|
--primary-foreground: oklch(0.99 0 0);
|
||||||
|
|
||||||
|
--secondary: var(--primary-blue);
|
||||||
|
--secondary-foreground: oklch(0.99 0 0);
|
||||||
|
|
||||||
|
--background: oklch(0.98 0.01 260);
|
||||||
|
--foreground: oklch(0.15 0.02 260);
|
||||||
|
|
||||||
|
--card: oklch(1 0 0);
|
||||||
|
--card-foreground: oklch(0.15 0.02 260);
|
||||||
|
|
||||||
|
--popover: oklch(1 0 0);
|
||||||
|
--popover-foreground: oklch(0.15 0.02 260);
|
||||||
|
|
||||||
|
--accent: oklch(0.96 0.01 260);
|
||||||
|
--accent-foreground: oklch(0.15 0.02 260);
|
||||||
|
|
||||||
|
--muted: oklch(0.94 0.01 260);
|
||||||
|
--muted-foreground: oklch(0.5 0.02 260);
|
||||||
|
|
||||||
|
--destructive: oklch(0.55 0.2 25);
|
||||||
|
--destructive-foreground: oklch(0.99 0 0);
|
||||||
|
|
||||||
|
--border: oklch(0.9 0.01 260);
|
||||||
|
--input: oklch(0.9 0.01 260);
|
||||||
|
--ring: var(--primary-orange);
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
* {
|
||||||
|
@apply border-border outline-ring/50;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
@apply bg-background text-foreground antialiased;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 全局字体放大 */
|
||||||
|
html {
|
||||||
|
font-size: 17px; /* 基础字体稍大 */
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
@apply font-black text-[#0A1931];
|
||||||
|
font-size: 2.75rem;
|
||||||
|
line-height: 1.2;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
@apply font-bold text-[#0A1931];
|
||||||
|
font-size: 2.25rem;
|
||||||
|
line-height: 1.25;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
@apply font-bold text-[#0A1931];
|
||||||
|
font-size: 1.5rem;
|
||||||
|
line-height: 1.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4, h5, h6 {
|
||||||
|
@apply font-semibold text-[#0A1931];
|
||||||
|
font-size: 1.125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
@apply leading-relaxed text-gray-600;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 通用卡片悬浮效果 */
|
||||||
|
.card-hover {
|
||||||
|
transition: all 0.4s ease;
|
||||||
|
}
|
||||||
|
.card-hover:hover {
|
||||||
|
transform: translateY(-15px);
|
||||||
|
box-shadow: 0 20px 50px rgba(24, 90, 219, 0.15);
|
||||||
|
border-color: var(--accent-blue);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 重点文字高亮样式 */
|
||||||
|
.highlight-text {
|
||||||
|
@apply text-[#FF6600] font-bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.key-point {
|
||||||
|
@apply font-bold text-[#0A1931] bg-gradient-to-r from-orange-50 to-orange-100 px-2 py-0.5 rounded;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 响应式字体调整 */
|
||||||
|
@layer utilities {
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 1.75rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 1.25rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 0.95rem !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
import type { Metadata } from 'next'
|
||||||
|
import { Geist, Geist_Mono } from 'next/font/google'
|
||||||
|
import { Navbar } from '@/components/layout/Navbar'
|
||||||
|
import { Footer } from '@/components/layout/Footer'
|
||||||
|
import './globals.css'
|
||||||
|
|
||||||
|
const geistSans = Geist({
|
||||||
|
variable: '--font-geist-sans',
|
||||||
|
subsets: ['latin'],
|
||||||
|
})
|
||||||
|
|
||||||
|
const geistMono = Geist_Mono({
|
||||||
|
variable: '--font-geist-mono',
|
||||||
|
subsets: ['latin'],
|
||||||
|
})
|
||||||
|
|
||||||
|
export const metadata: Metadata = {
|
||||||
|
title: '白马家园—新质生产力产业集群',
|
||||||
|
description: 'AI时代小微创业+消费循环生态圈，军工技术赋能实体经济，人工智能驱动万商互联。',
|
||||||
|
icons: {
|
||||||
|
icon: '/logos.png',
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function RootLayout({
|
||||||
|
children,
|
||||||
|
}: Readonly<{
|
||||||
|
children: React.ReactNode
|
||||||
|
}>) {
|
||||||
|
return (
|
||||||
|
<html lang="zh-CN" className="scroll-smooth">
|
||||||
|
<body
|
||||||
|
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
||||||
|
>
|
||||||
|
<Navbar />
|
||||||
|
<main>
|
||||||
|
{children}
|
||||||
|
</main>
|
||||||
|
<Footer />
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,139 @@
|
||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useState, useEffect } from 'react'
|
||||||
|
import { motion } from 'framer-motion'
|
||||||
|
import { Calendar, Eye, ArrowRight, Loader2 } from 'lucide-react'
|
||||||
|
import { Card, CardContent } from '@/components/ui/card'
|
||||||
|
import Link from 'next/link'
|
||||||
|
|
||||||
|
type News = {
|
||||||
|
id: number
|
||||||
|
title: string
|
||||||
|
category: string
|
||||||
|
excerpt: string
|
||||||
|
createdAt: string
|
||||||
|
views: number
|
||||||
|
}
|
||||||
|
|
||||||
|
const categories = ["全部", "公司新闻", "荣誉获奖", "产品发布", "媒体报道", "行业洞察"]
|
||||||
|
|
||||||
|
export default function NewsPage() {
|
||||||
|
const [news, setNews] = useState<News[]>([])
|
||||||
|
const [isLoading, setIsLoading] = useState(true)
|
||||||
|
const [activeCategory, setActiveCategory] = useState("全部")
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchNews = async () => {
|
||||||
|
try {
|
||||||
|
const url = activeCategory === "全部"
|
||||||
|
? '/api/news'
|
||||||
|
: `/api/news?category=${encodeURIComponent(activeCategory)}`
|
||||||
|
const res = await fetch(url)
|
||||||
|
if (res.ok) {
|
||||||
|
const data = await res.json()
|
||||||
|
setNews(data.news)
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('加载新闻失败', error)
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
fetchNews()
|
||||||
|
}, [activeCategory])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-white pt-24 pb-20">
|
||||||
|
<div className="container mx-auto px-4 md:px-6">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h1 className="text-4xl md:text-5xl font-black text-[#0A1931] mb-4">
|
||||||
|
最新动态
|
||||||
|
</h1>
|
||||||
|
<p className="text-lg text-gray-500 max-w-2xl mx-auto">
|
||||||
|
了解白马家园最新资讯，分享我们的成长与思考
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Category Filter */}
|
||||||
|
<div className="flex flex-wrap justify-center gap-2 mb-12">
|
||||||
|
{categories.map((category) => (
|
||||||
|
<button
|
||||||
|
key={category}
|
||||||
|
onClick={() => setActiveCategory(category)}
|
||||||
|
className={`px-6 py-2 rounded-full text-sm font-bold transition-all ${
|
||||||
|
activeCategory === category
|
||||||
|
? 'bg-[#FF6600] text-white shadow-lg'
|
||||||
|
: 'bg-gray-100 text-gray-500 hover:bg-gray-200'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{category}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Loading State */}
|
||||||
|
{isLoading ? (
|
||||||
|
<div className="flex justify-center items-center py-20">
|
||||||
|
<Loader2 className="w-8 h-8 animate-spin text-[#FF6600]" />
|
||||||
|
</div>
|
||||||
|
) : news.length === 0 ? (
|
||||||
|
<div className="text-center py-20 text-gray-400 font-medium">
|
||||||
|
该分类下暂无动态
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
/* News Grid */
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||||
|
{news.map((item, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={item.id}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||||
|
>
|
||||||
|
<Link href="#" className="group block h-full">
|
||||||
|
<Card className="h-full border-0 shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden card-hover">
|
||||||
|
{/* Placeholder Color Block */}
|
||||||
|
<div className="h-40 bg-gradient-to-br from-[#0A1931] to-[#185ADB] flex items-center justify-center">
|
||||||
|
<span className="text-white/10 text-6xl font-black">{item.id}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<CardContent className="p-6">
|
||||||
|
<div className="flex items-center justify-between mb-4">
|
||||||
|
<span className="text-xs font-bold text-[#FF6600] bg-orange-50 px-3 py-1 rounded-full">
|
||||||
|
{item.category}
|
||||||
|
</span>
|
||||||
|
<div className="flex items-center text-xs text-gray-400 font-mono">
|
||||||
|
<Calendar className="w-3 h-3 mr-1" />
|
||||||
|
{new Date(item.createdAt).toLocaleDateString()}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 className="text-lg font-bold text-[#0A1931] mb-3 group-hover:text-[#FF6600] transition-colors line-clamp-2">
|
||||||
|
{item.title}
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<p className="text-sm text-gray-500 mb-6 line-clamp-3 leading-relaxed">
|
||||||
|
{item.excerpt}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-between pt-4 border-t border-gray-100">
|
||||||
|
<div className="flex items-center text-xs text-gray-400">
|
||||||
|
<Eye className="w-3 h-3 mr-1" />
|
||||||
|
{item.views} 次阅读
|
||||||
|
</div>
|
||||||
|
<span className="flex items-center text-sm font-bold text-[#FF6600] group-hover:translate-x-1 transition-transform">
|
||||||
|
阅读详情 <ArrowRight className="ml-1 w-4 h-4" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</Link>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
import { Hero } from '@/components/home/Hero'
|
||||||
|
import { ProductPreview } from '@/components/home/ProductPreview'
|
||||||
|
import { MissionVision } from '@/components/home/MissionVision'
|
||||||
|
import { HonorSection } from '@/components/home/HonorSection'
|
||||||
|
import { Infrastructure } from '@/components/home/Infrastructure'
|
||||||
|
|
||||||
|
export default function Page() {
|
||||||
|
return (
|
||||||
|
<main className="min-h-screen">
|
||||||
|
{/* 1. Hero首屏 */}
|
||||||
|
<Hero />
|
||||||
|
|
||||||
|
{/* 2. 产品矩阵 */}
|
||||||
|
<ProductPreview />
|
||||||
|
|
||||||
|
{/* 3. 使命、愿景、价值观 */}
|
||||||
|
<MissionVision />
|
||||||
|
|
||||||
|
{/* 4. 权威认证与技术实力 */}
|
||||||
|
<HonorSection />
|
||||||
|
|
||||||
|
{/* 5. 生态基础设施 */}
|
||||||
|
<Infrastructure />
|
||||||
|
|
||||||
|
{/* 6. 页脚 - 在 Layout.tsx 中 */}
|
||||||
|
</main>
|
||||||
|
)
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 178 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
|
|
@ -0,0 +1,50 @@
|
||||||
|
import { ProductList } from '@/components/products/ProductList'
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
import Link from 'next/link'
|
||||||
|
import { ArrowRight } from 'lucide-react'
|
||||||
|
|
||||||
|
export default function ProductsPage() {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-white pt-24 pb-20">
|
||||||
|
<div className="container mx-auto px-4 md:px-6">
|
||||||
|
{/* Page Header */}
|
||||||
|
<div className="max-w-3xl mx-auto text-center mb-16">
|
||||||
|
<h1 className="text-4xl md:text-5xl font-bold text-secondary mb-6">
|
||||||
|
产品服务
|
||||||
|
</h1>
|
||||||
|
<p className="text-lg text-muted-foreground leading-relaxed">
|
||||||
|
基于军工级技术底座，我们构建了从支付结算、私域运营到异业联盟的完整生态闭环，
|
||||||
|
助力小微企业在 AI 时代实现数字化升级与业绩倍增。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Navigation Tabs */}
|
||||||
|
<div className="sticky top-20 z-40 bg-white/95 backdrop-blur-md py-4 mb-8 border-b border-gray-100 hidden md:block">
|
||||||
|
<nav className="flex justify-center gap-8">
|
||||||
|
<a href="#fintech" className="text-sm font-medium text-muted-foreground hover:text-primary transition-colors">金融科技</a>
|
||||||
|
<a href="#ai" className="text-sm font-medium text-muted-foreground hover:text-primary transition-colors">私域运营</a>
|
||||||
|
<a href="#alliance" className="text-sm font-medium text-muted-foreground hover:text-primary transition-colors">异业联盟</a>
|
||||||
|
<a href="#infrastructure" className="text-sm font-medium text-muted-foreground hover:text-primary transition-colors">生态基建</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ProductList />
|
||||||
|
|
||||||
|
{/* CTA */}
|
||||||
|
<div className="mt-24 text-center bg-accent rounded-2xl p-12">
|
||||||
|
<h2 className="text-3xl font-bold text-secondary mb-4">准备好升级您的商业模式了吗？</h2>
|
||||||
|
<p className="text-muted-foreground mb-8 max-w-2xl mx-auto">
|
||||||
|
立即接入白马家园生态，开启数智化转型之旅。
|
||||||
|
</p>
|
||||||
|
<div className="flex justify-center gap-4">
|
||||||
|
<Button size="lg" asChild className="bg-primary hover:bg-primary/90 text-white rounded-full px-8">
|
||||||
|
<Link href="/contact">
|
||||||
|
立即咨询 <ArrowRight className="ml-2 h-4 w-4" />
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://ui.shadcn.com/schema.json",
|
||||||
|
"style": "new-york",
|
||||||
|
"rsc": true,
|
||||||
|
"tsx": true,
|
||||||
|
"tailwind": {
|
||||||
|
"config": "",
|
||||||
|
"css": "app/globals.css",
|
||||||
|
"baseColor": "neutral",
|
||||||
|
"cssVariables": true,
|
||||||
|
"prefix": ""
|
||||||
|
},
|
||||||
|
"iconLibrary": "lucide",
|
||||||
|
"aliases": {
|
||||||
|
"components": "@/components",
|
||||||
|
"utils": "@/lib/utils",
|
||||||
|
"ui": "@/components/ui",
|
||||||
|
"lib": "@/lib",
|
||||||
|
"hooks": "@/hooks"
|
||||||
|
},
|
||||||
|
"registries": {}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,93 @@
|
||||||
|
'use client'
|
||||||
|
|
||||||
|
import { Trophy, Award, FileText, Medal } from 'lucide-react'
|
||||||
|
|
||||||
|
const awards = [
|
||||||
|
"2023 科大讯飞 AI 开发者大赛数字人赛道冠军",
|
||||||
|
"2022 中国产业元宇宙创新大赛一等奖",
|
||||||
|
"2023 元宇宙应用场景大赛产业生态先锋奖",
|
||||||
|
"2024 退役军人创新创业大赛一等奖"
|
||||||
|
]
|
||||||
|
|
||||||
|
const patents = [
|
||||||
|
"发明专利：融合多信息的 AI 虚拟人与用户交互方法",
|
||||||
|
"发明专利：一种虚拟人物不同表情模型生成方法",
|
||||||
|
"80+ 项计算机软件著作权",
|
||||||
|
"50+ 项资质证书与备案"
|
||||||
|
]
|
||||||
|
|
||||||
|
export function Certifications() {
|
||||||
|
return (
|
||||||
|
<section className="py-20 bg-white" id="honor">
|
||||||
|
<div className="container mx-auto px-4 md:px-6">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
|
||||||
|
{/* Text Content */}
|
||||||
|
<div className="space-y-8">
|
||||||
|
<div>
|
||||||
|
<h2 className="text-3xl font-bold text-secondary mb-6">荣誉与资质</h2>
|
||||||
|
<p className="text-muted-foreground mb-8">
|
||||||
|
凭借领先的技术实力与创新模式，白马家园荣获多项国家级大奖，并拥有完备的知识产权体系。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center shrink-0">
|
||||||
|
<Trophy className="w-6 h-6 text-primary" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-bold text-lg mb-2">权威奖项</h3>
|
||||||
|
<ul className="space-y-2">
|
||||||
|
{awards.map((award, i) => (
|
||||||
|
<li key={i} className="flex items-center text-sm text-muted-foreground">
|
||||||
|
<span className="w-1.5 h-1.5 bg-primary rounded-full mr-2"></span>
|
||||||
|
{award}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center shrink-0">
|
||||||
|
<FileText className="w-6 h-6 text-primary" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-bold text-lg mb-2">知识产权</h3>
|
||||||
|
<ul className="space-y-2">
|
||||||
|
{patents.map((patent, i) => (
|
||||||
|
<li key={i} className="flex items-center text-sm text-muted-foreground">
|
||||||
|
<span className="w-1.5 h-1.5 bg-primary rounded-full mr-2"></span>
|
||||||
|
{patent}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Certificate Cards */}
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div className="aspect-[3/4] bg-accent rounded-lg shadow-sm border border-gray-100 p-4 flex flex-col items-center justify-center text-center">
|
||||||
|
<Medal className="w-12 h-12 text-primary mb-4" />
|
||||||
|
<span className="text-xs font-medium text-muted-foreground">科大讯飞冠军证书</span>
|
||||||
|
</div>
|
||||||
|
<div className="aspect-[3/4] bg-accent rounded-lg shadow-sm border border-gray-100 p-4 flex flex-col items-center justify-center text-center mt-8">
|
||||||
|
<Award className="w-12 h-12 text-primary mb-4" />
|
||||||
|
<span className="text-xs font-medium text-muted-foreground">发明专利证书</span>
|
||||||
|
</div>
|
||||||
|
<div className="aspect-[3/4] bg-accent rounded-lg shadow-sm border border-gray-100 p-4 flex flex-col items-center justify-center text-center">
|
||||||
|
<Trophy className="w-12 h-12 text-primary mb-4" />
|
||||||
|
<span className="text-xs font-medium text-muted-foreground">创新大赛一等奖</span>
|
||||||
|
</div>
|
||||||
|
<div className="aspect-[3/4] bg-accent rounded-lg shadow-sm border border-gray-100 p-4 flex flex-col items-center justify-center text-center mt-8">
|
||||||
|
<FileText className="w-12 h-12 text-primary mb-4" />
|
||||||
|
<span className="text-xs font-medium text-muted-foreground">收单外包服务机构备案</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,73 @@
|
||||||
|
'use client'
|
||||||
|
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
|
||||||
|
import { Badge } from '@/components/ui/badge'
|
||||||
|
import { User } from 'lucide-react'
|
||||||
|
|
||||||
|
const team = [
|
||||||
|
{
|
||||||
|
name: "汪洋",
|
||||||
|
role: "董事长",
|
||||||
|
badges: ["国防科大本硕博", "高级工程师", "上校转业"],
|
||||||
|
description: "深度参与神舟、嫦娥、北斗等航天任务。获中国青年科技奖，全网粉丝100万+ AIGC/元宇宙博主。"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "段海龙",
|
||||||
|
role: "技术总监",
|
||||||
|
badges: ["国防科大学士", "中科大硕士", "高级工程师"],
|
||||||
|
description: "专注于人工智能、机器视觉方向。发表论文20多篇，软著及专利20余项。"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "秦波",
|
||||||
|
role: "总经理",
|
||||||
|
badges: ["第一军医大学", "副主任医师", "正团职转业"],
|
||||||
|
description: "资深健康养老产业链专家，军队医院保健专家。10年以上市场招商渠道拓展经验。"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "焦文军",
|
||||||
|
role: "CFO",
|
||||||
|
badges: ["中国十大杰出CFO", "天狮前副总裁"],
|
||||||
|
description: "多家港股、美股公司上市操盘手。中央财经大学、南开大学客座教授。"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
export function Team() {
|
||||||
|
return (
|
||||||
|
<section className="py-20 bg-accent" id="team">
|
||||||
|
<div className="container mx-auto px-4 md:px-6">
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h2 className="text-3xl font-bold text-secondary mb-4">核心精英团队</h2>
|
||||||
|
<p className="text-muted-foreground max-w-2xl mx-auto">
|
||||||
|
汇聚军工、医疗、金融等领域的顶尖人才，以硬核技术驱动商业创新。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||||
|
{team.map((member, index) => (
|
||||||
|
<Card key={index} className="border-0 shadow-lg hover:shadow-xl transition-all">
|
||||||
|
<CardHeader className="text-center pb-2">
|
||||||
|
<div className="w-24 h-24 mx-auto bg-white rounded-full flex items-center justify-center mb-4 shadow-md">
|
||||||
|
<User className="w-10 h-10 text-primary" />
|
||||||
|
</div>
|
||||||
|
<CardTitle className="text-xl font-bold">{member.name}</CardTitle>
|
||||||
|
<CardDescription className="text-primary font-medium">{member.role}</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="text-center">
|
||||||
|
<div className="flex flex-wrap justify-center gap-2 mb-4">
|
||||||
|
{member.badges.map((badge, bIndex) => (
|
||||||
|
<Badge key={bIndex} variant="secondary" className="text-xs bg-primary/10 text-primary">
|
||||||
|
{badge}
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-muted-foreground text-left leading-relaxed">
|
||||||
|
{member.description}
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,90 @@
|
||||||
|
'use client'
|
||||||
|
|
||||||
|
import { motion } from 'framer-motion'
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
|
||||||
|
import { Badge } from '@/components/ui/badge'
|
||||||
|
import { User, ShieldCheck, TrendingUp } from 'lucide-react'
|
||||||
|
|
||||||
|
const team = [
|
||||||
|
{
|
||||||
|
name: "汪洋",
|
||||||
|
role: "董事长",
|
||||||
|
badges: ["国防科大本硕博", "航天级专家"],
|
||||||
|
description: "深度参与神舟、北斗任务。全网粉丝100万+ AIGC头部博主。"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "段海龙",
|
||||||
|
role: "技术总监",
|
||||||
|
badges: ["国防科大学士", "高级工程师"],
|
||||||
|
description: "专注AI与机器视觉。发表论文20多篇，拥有专利20余项。"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "秦波",
|
||||||
|
role: "总经理",
|
||||||
|
badges: ["第一军医大学", "正团职转业"],
|
||||||
|
description: "资深康养专家，10年以上市场招商渠道拓展经验。"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "焦文军",
|
||||||
|
role: "CFO",
|
||||||
|
badges: ["十大杰出CFO", "操盘上市"],
|
||||||
|
description: "多家上市公司操盘手。中央财经大学、南开大学客座教授。"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
export function AboutSection() {
|
||||||
|
return (
|
||||||
|
<section id="about" className="py-24 bg-white scroll-mt-20">
|
||||||
|
<div className="container mx-auto px-4 md:px-6">
|
||||||
|
<div className="max-w-4xl mx-auto text-center mb-20">
|
||||||
|
<Badge variant="outline" className="mb-4 border-[#FF6600] text-[#FF6600] bg-orange-50 font-bold">
|
||||||
|
关于白马家园
|
||||||
|
</Badge>
|
||||||
|
<h2 className="text-3xl md:text-5xl font-black text-[#0A1931] mb-6">
|
||||||
|
军工技术赋能实体经济
|
||||||
|
</h2>
|
||||||
|
<p className="text-lg text-gray-500 leading-relaxed">
|
||||||
|
白马家园是一家拥有国资背景的高新技术企业，已获五轮融资超 2 亿元。
|
||||||
|
我们致力于解决实体商家“流量难、锁客难、变现难”的痛点，
|
||||||
|
构建万商互联的共享经济生态。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 核心团队 */}
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
|
||||||
|
{team.map((member, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={index}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ delay: index * 0.1 }}
|
||||||
|
>
|
||||||
|
<Card className="border-0 shadow-lg hover:shadow-xl transition-all h-full bg-gray-50/50 group">
|
||||||
|
<CardHeader className="text-center pb-4">
|
||||||
|
<div className="w-20 h-20 mx-auto bg-white rounded-2xl flex items-center justify-center mb-4 shadow-sm group-hover:bg-[#FF6600] transition-colors duration-300">
|
||||||
|
<User className="w-10 h-10 text-[#0A1931] group-hover:text-white" />
|
||||||
|
</div>
|
||||||
|
<CardTitle className="text-xl font-bold text-[#0A1931]">{member.name}</CardTitle>
|
||||||
|
<CardDescription className="text-[#FF6600] font-bold">{member.role}</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="flex flex-wrap justify-center gap-1.5 mb-4">
|
||||||
|
{member.badges.map((badge, bIndex) => (
|
||||||
|
<span key={bIndex} className="text-[10px] font-bold bg-white px-2 py-0.5 rounded border border-gray-100 text-gray-500">
|
||||||
|
{badge}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-gray-500 leading-relaxed text-center">
|
||||||
|
{member.description}
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,107 @@
|
||||||
|
'use client'
|
||||||
|
|
||||||
|
import { motion } from 'framer-motion'
|
||||||
|
import { CheckCircle2, TrendingUp, Users, Building2 } from 'lucide-react'
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
import Link from 'next/link'
|
||||||
|
|
||||||
|
export function Ecosystem() {
|
||||||
|
return (
|
||||||
|
<section className="py-24 bg-secondary text-white relative overflow-hidden">
|
||||||
|
{/* Background Effects */}
|
||||||
|
<div className="absolute inset-0 overflow-hidden">
|
||||||
|
<div className="absolute -top-40 -right-40 w-80 h-80 bg-primary/20 rounded-full blur-3xl"></div>
|
||||||
|
<div className="absolute -bottom-40 -left-40 w-80 h-80 bg-primary/10 rounded-full blur-3xl"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="container px-4 md:px-6 mx-auto relative z-10">
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
||||||
|
{/* Left Content */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, x: -50 }}
|
||||||
|
whileInView={{ opacity: 1, x: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.6 }}
|
||||||
|
>
|
||||||
|
<h2 className="text-3xl md:text-5xl font-bold mb-6">
|
||||||
|
数据收益
|
||||||
|
<span className="text-primary"> 优先分配</span>
|
||||||
|
</h2>
|
||||||
|
<p className="text-lg text-gray-300 mb-8 leading-relaxed">
|
||||||
|
白马家园首创"数据收益优先分配权"，让创造数据的人优先分享数据带来的增值红利。
|
||||||
|
我们相信，只有相互成就，才能共建可持续发展的商业生态。
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Features List */}
|
||||||
|
<div className="space-y-5 mb-10">
|
||||||
|
{[
|
||||||
|
{ icon: TrendingUp, text: '时时/单单/天天补贴，立即到账' },
|
||||||
|
{ icon: Users, text: '用户消费即参与利润分配' },
|
||||||
|
{ icon: Building2, text: '商家让利即获得流量回馈' },
|
||||||
|
{ icon: CheckCircle2, text: '透明公开，无泡沫正向拨比' }
|
||||||
|
].map((item, index) => (
|
||||||
|
<div key={index} className="flex items-center gap-4">
|
||||||
|
<div className="w-10 h-10 bg-primary/20 rounded-lg flex items-center justify-center">
|
||||||
|
<item.icon className="w-5 h-5 text-primary" />
|
||||||
|
</div>
|
||||||
|
<span className="text-gray-200">{item.text}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button asChild className="bg-primary hover:bg-primary/90 text-white rounded-full px-8 h-12">
|
||||||
|
<Link href="/contact">立即加入生态</Link>
|
||||||
|
</Button>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Right Visual */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, scale: 0.9 }}
|
||||||
|
whileInView={{ opacity: 1, scale: 1 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.6 }}
|
||||||
|
className="relative"
|
||||||
|
>
|
||||||
|
{/* Central Circle */}
|
||||||
|
<div className="relative aspect-square w-full max-w-md mx-auto">
|
||||||
|
{/* Outer Ring */}
|
||||||
|
<div className="absolute inset-0 border-2 border-white/10 rounded-full"></div>
|
||||||
|
|
||||||
|
{/* Inner Content */}
|
||||||
|
<div className="absolute inset-8 border border-white/10 rounded-full flex items-center justify-center">
|
||||||
|
<div className="w-32 h-32 bg-primary rounded-full flex items-center justify-center shadow-lg shadow-primary/30">
|
||||||
|
<span className="font-bold text-white text-lg">白马家园</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Orbiting Elements */}
|
||||||
|
{[
|
||||||
|
{ angle: 0, label: '消费者' },
|
||||||
|
{ angle: 90, label: '商家' },
|
||||||
|
{ angle: 180, label: '供应链' },
|
||||||
|
{ angle: 270, label: '平台' }
|
||||||
|
].map((item, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className="absolute w-20 h-20 bg-white/10 backdrop-blur-sm rounded-xl flex items-center justify-center border border-white/20"
|
||||||
|
style={{
|
||||||
|
top: '50%',
|
||||||
|
left: '50%',
|
||||||
|
transform: `translate(-50%, -50%) rotate(${item.angle}deg) translateY(-140px) rotate(-${item.angle}deg)`
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span className="text-sm font-medium">{item.label}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{/* Connection Lines */}
|
||||||
|
<svg className="absolute inset-0 w-full h-full pointer-events-none opacity-20">
|
||||||
|
<circle cx="50%" cy="50%" r="140" fill="none" stroke="white" strokeWidth="1" strokeDasharray="5,5" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,103 @@
|
||||||
|
'use client'
|
||||||
|
|
||||||
|
import { motion } from 'framer-motion'
|
||||||
|
import {
|
||||||
|
ShieldCheck,
|
||||||
|
Cpu,
|
||||||
|
TrendingUp,
|
||||||
|
Users,
|
||||||
|
Globe,
|
||||||
|
Award
|
||||||
|
} from 'lucide-react'
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||||
|
|
||||||
|
const features = [
|
||||||
|
{
|
||||||
|
icon: ShieldCheck,
|
||||||
|
title: "国资背景",
|
||||||
|
description: "获五轮融资超2亿元，中华财政部、社保基金理事会等间接持股，实力雄厚，稳健经营。"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Cpu,
|
||||||
|
title: "军工技术",
|
||||||
|
description: "国防科大核心团队，拥有80+项发明专利。将航天级技术应用于实体经济数字化转型。"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: TrendingUp,
|
||||||
|
title: "数据收益",
|
||||||
|
description: "首创'数据收益优先分配权'，让用户和商家共享数据增值红利，打造可持续商业模式。"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Users,
|
||||||
|
title: "顶尖团队",
|
||||||
|
description: "汇聚国防科大、中科大等名校精英，以及上市企业高管、杰出CFO等行业领袖。"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Globe,
|
||||||
|
title: "合规保障",
|
||||||
|
description: "拥有收单外包服务机构备案，资金受银监会监管。数商备案接入，工商税务监管系统实时对接。"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Award,
|
||||||
|
title: "权威认可",
|
||||||
|
description: "科大讯飞AI开发者大赛冠军、中国产业元宇宙创新大赛一等奖，央视等权威媒体多次报道。"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
export function Features() {
|
||||||
|
return (
|
||||||
|
<section className="py-24 bg-white">
|
||||||
|
<div className="container px-4 md:px-6 mx-auto">
|
||||||
|
{/* Section Header */}
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<motion.h2
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className="text-3xl md:text-4xl font-bold text-secondary mb-4"
|
||||||
|
>
|
||||||
|
核心优势
|
||||||
|
</motion.h2>
|
||||||
|
<motion.p
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ delay: 0.1 }}
|
||||||
|
className="text-lg text-muted-foreground max-w-2xl mx-auto"
|
||||||
|
>
|
||||||
|
依托强大的技术壁垒与资本实力，为实体经济数字化转型提供坚实保障
|
||||||
|
</motion.p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Features Grid */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||||
|
{features.map((feature, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={index}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||||
|
>
|
||||||
|
<Card className="h-full border-0 shadow-lg hover:shadow-xl transition-all duration-300 group bg-accent">
|
||||||
|
<CardHeader className="pb-4">
|
||||||
|
<div className="w-14 h-14 bg-primary/10 rounded-xl flex items-center justify-center mb-4 group-hover:bg-primary group-hover:text-white transition-all duration-300">
|
||||||
|
<feature.icon className="w-7 h-7 text-primary group-hover:text-white" />
|
||||||
|
</div>
|
||||||
|
<CardTitle className="text-xl font-bold text-secondary group-hover:text-primary transition-colors">
|
||||||
|
{feature.title}
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<p className="text-muted-foreground leading-relaxed">
|
||||||
|
{feature.description}
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,137 @@
|
||||||
|
'use client'
|
||||||
|
|
||||||
|
import { motion } from 'framer-motion'
|
||||||
|
import Image from 'next/image'
|
||||||
|
import { ArrowRight } from 'lucide-react'
|
||||||
|
import Link from 'next/link'
|
||||||
|
|
||||||
|
export function Hero() {
|
||||||
|
return (
|
||||||
|
<section className="relative w-full min-h-screen flex items-center justify-center overflow-hidden bg-[#050A14] pt-16">
|
||||||
|
{/* Background Gradient */}
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-br from-[#0A1931] via-[#0d1f45] to-[#050A14]"></div>
|
||||||
|
|
||||||
|
{/* Grid Effect */}
|
||||||
|
<div className="absolute inset-0 opacity-20">
|
||||||
|
<svg className="w-full h-full hidden sm:block">
|
||||||
|
<defs>
|
||||||
|
<pattern id="grid-blue" width="60" height="60" patternUnits="userSpaceOnUse">
|
||||||
|
<path d="M 60 0 L 0 0 0 60" fill="none" stroke="white" strokeWidth="0.5" strokeOpacity="0.3"/>
|
||||||
|
</pattern>
|
||||||
|
</defs>
|
||||||
|
<rect width="100%" height="100%" fill="url(#grid-blue)" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Glow Effects */}
|
||||||
|
<div className="absolute top-1/4 left-1/4 w-64 h-64 md:w-96 md:h-96 bg-[#185ADB] rounded-full blur-[100px] md:blur-[150px] opacity-20 animate-pulse hidden sm:block"></div>
|
||||||
|
<div className="absolute bottom-1/4 right-1/4 w-48 h-48 md:w-80 md:h-80 bg-[#FF6600] rounded-full blur-[80px] md:blur-[120px] opacity-15 hidden sm:block"></div>
|
||||||
|
|
||||||
|
<div className="container relative z-10 px-4 md:px-6 mx-auto">
|
||||||
|
<div className="max-w-5xl mx-auto text-center mb-3">
|
||||||
|
|
||||||
|
{/* Logo */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.6 }}
|
||||||
|
className="mb-6 md:mb-10"
|
||||||
|
>
|
||||||
|
<div className="relative h-16 w-auto aspect-[2/1] mx-auto sm:h-20 md:h-28">
|
||||||
|
<Image
|
||||||
|
src="/baima-logo.png"
|
||||||
|
alt="白马家园 Logo"
|
||||||
|
fill
|
||||||
|
className="object-contain"
|
||||||
|
priority
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Tags - 放大并突出 */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.6 }}
|
||||||
|
className="flex flex-wrap justify-center gap-3 md:gap-4 mb-8 md:mb-10"
|
||||||
|
>
|
||||||
|
{[
|
||||||
|
"小微企业数智化升级",
|
||||||
|
"AI + Fintech 生态圈",
|
||||||
|
"军工技术赋能"
|
||||||
|
].map((tag, index) => (
|
||||||
|
<span
|
||||||
|
key={index}
|
||||||
|
className="px-4 py-2 md:px-5 md:py-2.5 bg-white/10 border border-white/20 rounded-full text-sm md:text-base font-bold text-white backdrop-blur-sm shadow-lg"
|
||||||
|
>
|
||||||
|
{tag}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Headline - 超大号字体，核心卖点突出 */}
|
||||||
|
<motion.h1
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.6, delay: 0.1 }}
|
||||||
|
className="text-3xl sm:text-5xl md:text-6xl lg:text-7xl font-black text-white mb-6 md:mb-8 leading-tight"
|
||||||
|
>
|
||||||
|
<span className="block mb-2 text-xl sm:text-2xl md:text-3xl font-light text-gray-300">
|
||||||
|
实体商业的
|
||||||
|
</span>
|
||||||
|
<span className="text-[#FF6600] text-4xl sm:text-6xl md:text-7xl lg:text-8xl block">
|
||||||
|
AI 数智增长引擎
|
||||||
|
</span>
|
||||||
|
</motion.h1>
|
||||||
|
|
||||||
|
{/* Subheadline - 核心价值主张，大字展示 */}
|
||||||
|
<motion.p
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.6, delay: 0.2 }}
|
||||||
|
className="text-xl sm:text-2xl md:text-3xl font-bold text-[#FF6600] mb-6 md:mb-8 tracking-wide"
|
||||||
|
>
|
||||||
|
支付即锁粉 · 让利即引流 · 跨界即分润
|
||||||
|
</motion.p>
|
||||||
|
|
||||||
|
{/* Description */}
|
||||||
|
<motion.p
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.6, delay: 0.3 }}
|
||||||
|
className="text-base sm:text-lg md:text-xl text-gray-300 mb-10 md:mb-12 max-w-4xl mx-auto leading-relaxed font-medium"
|
||||||
|
>
|
||||||
|
连接 <span className="text-white font-bold">120,000+</span> 实体商户，重构线下流量价值闭环。<br className="hidden sm:block"/>
|
||||||
|
军工技术赋能 · 人工智能驱动万商互联
|
||||||
|
</motion.p>
|
||||||
|
|
||||||
|
{/* CTA Button - 超大醒目按钮 */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.6, delay: 0.4 }}
|
||||||
|
>
|
||||||
|
<Link
|
||||||
|
href="/contact#form"
|
||||||
|
className="group relative inline-flex items-center gap-3 px-8 py-4 md:px-10 md:py-5 bg-gradient-to-r from-[#FF6600] to-[#FF8C00] text-lg md:text-xl font-black rounded-full shadow-2xl shadow-[#FF6600]/50 transition-all duration-300 hover:scale-105 hover:shadow-[#FF6600]/70"
|
||||||
|
>
|
||||||
|
<span className="text-lg md:text-xl">立即加入白马联盟</span>
|
||||||
|
<ArrowRight className="w-6 h-6 md:w-7 md:h-7 transition-transform group-hover:translate-x-1" />
|
||||||
|
</Link>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Scroll Indicator */}
|
||||||
|
<motion.div
|
||||||
|
animate={{ y: [0, 10, 0] }}
|
||||||
|
transition={{ duration: 2, repeat: Infinity }}
|
||||||
|
className="absolute bottom-4 md:bottom-8 left-1/2 -translate-x-1/2 text-white/30 hidden sm:block"
|
||||||
|
>
|
||||||
|
<div className="w-6 h-10 md:w-7 md:h-12 border-2 border-current rounded-full flex items-start justify-center p-1.5 md:p-2">
|
||||||
|
<div className="w-1.5 h-2 md:w-2 md:h-3 bg-current rounded-full"></div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,223 @@
|
||||||
|
'use client'
|
||||||
|
|
||||||
|
import { motion } from 'framer-motion'
|
||||||
|
import { Trophy, Award, FileText, Medal, Shield, Zap, Users, Globe, CheckCircle2 } from 'lucide-react'
|
||||||
|
|
||||||
|
// 扩充后的资质和知识产权数据
|
||||||
|
const honors = [
|
||||||
|
{
|
||||||
|
icon: Trophy,
|
||||||
|
title: "科大讯飞 AI 开发者大赛",
|
||||||
|
subtitle: "数字人赛道冠军",
|
||||||
|
color: "bg-orange-100 text-orange-600"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Medal,
|
||||||
|
title: "中国产业元宇宙创新大赛",
|
||||||
|
subtitle: "一等奖",
|
||||||
|
color: "bg-blue-100 text-blue-600"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Award,
|
||||||
|
title: "退役军人创新创业大赛",
|
||||||
|
subtitle: "一等奖",
|
||||||
|
color: "bg-purple-100 text-purple-600"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Globe,
|
||||||
|
title: "元宇宙应用场景大赛",
|
||||||
|
subtitle: "产业生态先锋奖",
|
||||||
|
color: "bg-green-100 text-green-600"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const patents = [
|
||||||
|
{
|
||||||
|
title: "融合多信息的 AI 虚拟人与用户交互方法",
|
||||||
|
type: "发明专利"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "一种虚拟人物不同表情模型生成方法",
|
||||||
|
type: "发明专利"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "基于深度学习的智能收银系统",
|
||||||
|
type: "发明专利"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "多通道智能路由分配算法",
|
||||||
|
type: "发明专利"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "区块链数据确权与价值分配系统",
|
||||||
|
type: "发明专利"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "AI 驱动的精准营销推荐系统",
|
||||||
|
type: "发明专利"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const certifications = [
|
||||||
|
{
|
||||||
|
title: "收单外包服务机构备案",
|
||||||
|
desc: "中国支付清算协会备案，合规开展收单外包服务"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "ISO 9001 质量管理体系认证",
|
||||||
|
desc: "国际标准化组织认证"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "高新技术企业认定",
|
||||||
|
desc: "享受国家高新技术企业税收优惠"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "软件企业认定",
|
||||||
|
desc: "符合国家软件产业政策要求"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "信息安全管理系统认证",
|
||||||
|
desc: "保障用户数据安全"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "数商备案接入",
|
||||||
|
desc: "合规参与数据要素市场"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
export function HonorSection() {
|
||||||
|
return (
|
||||||
|
<section id="honor" className="py-24 bg-[#F4F7FB] scroll-mt-20">
|
||||||
|
<div className="container mx-auto px-4 md:px-6">
|
||||||
|
|
||||||
|
{/* 大标题 */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className="text-center mb-16"
|
||||||
|
>
|
||||||
|
<h2 className="text-3xl md:text-5xl font-black text-[#0A1931] mb-4">
|
||||||
|
权威认证 · 技术实力
|
||||||
|
</h2>
|
||||||
|
<p className="text-lg text-gray-500 max-w-3xl mx-auto">
|
||||||
|
白马家园拥有完备的知识产权体系和权威资质认证，为您的商业合作保驾护航
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* 1. 权威奖项展示 - 大卡片风格 */}
|
||||||
|
<div className="mb-20">
|
||||||
|
<h3 className="text-2xl font-bold text-[#0A1931] mb-8 flex items-center gap-3">
|
||||||
|
<Trophy className="w-8 h-8 text-[#FF6600]" />
|
||||||
|
权威奖项与认可
|
||||||
|
</h3>
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
{honors.map((item, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={index}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ delay: index * 0.1 }}
|
||||||
|
className="bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl transition-all hover:-translate-y-1 border border-gray-100"
|
||||||
|
>
|
||||||
|
<div className={`w-16 h-16 ${item.color} rounded-2xl flex items-center justify-center mb-6`}>
|
||||||
|
<item.icon className="w-8 h-8" />
|
||||||
|
</div>
|
||||||
|
<h4 className="text-xl font-bold text-[#0A1931] mb-2">{item.title}</h4>
|
||||||
|
<p className="text-[#FF6600] font-bold">{item.subtitle}</p>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 2. 知识产权展示 - 网格布局 */}
|
||||||
|
<div className="mb-20">
|
||||||
|
<h3 className="text-2xl font-bold text-[#0A1931] mb-8 flex items-center gap-3">
|
||||||
|
<FileText className="w-8 h-8 text-[#185ADB]" />
|
||||||
|
自主知识产权 (80+ 项)
|
||||||
|
</h3>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||||
|
{patents.map((item, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={index}
|
||||||
|
initial={{ opacity: 0, x: -20 }}
|
||||||
|
whileInView={{ opacity: 1, x: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ delay: index * 0.05 }}
|
||||||
|
className="bg-white p-5 rounded-xl border border-gray-200 hover:border-[#185ADB] hover:shadow-md transition-all flex items-start gap-4"
|
||||||
|
>
|
||||||
|
<div className="w-10 h-10 bg-[#185ADB]/10 rounded-lg flex items-center justify-center shrink-0 mt-1">
|
||||||
|
<Shield className="w-5 h-5 text-[#185ADB]" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 className="font-bold text-[#0A1931] mb-1">{item.title}</h4>
|
||||||
|
<span className="text-xs font-bold text-[#185ADB] bg-[#185ADB]/10 px-2 py-0.5 rounded">{item.type}</span>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
{/* 更多专利提示 */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, x: -20 }}
|
||||||
|
whileInView={{ opacity: 1, x: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ delay: 0.4 }}
|
||||||
|
className="bg-gradient-to-br from-[#0A1931] to-[#185ADB] p-5 rounded-xl text-white flex items-center justify-center"
|
||||||
|
>
|
||||||
|
<div className="text-center">
|
||||||
|
<Zap className="w-10 h-10 mx-auto mb-2 text-[#FF6600]" />
|
||||||
|
<p className="font-bold text-lg">80+ 项</p>
|
||||||
|
<p className="text-sm text-gray-300">软件著作权与专利</p>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 3. 资质认证展示 - 详情列表 */}
|
||||||
|
<div>
|
||||||
|
<h3 className="text-2xl font-bold text-[#0A1931] mb-8 flex items-center gap-3">
|
||||||
|
<CheckCircle2 className="w-8 h-8 text-green-600" />
|
||||||
|
权威资质认证
|
||||||
|
</h3>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
{certifications.map((item, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={index}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ delay: index * 0.1 }}
|
||||||
|
className="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 hover:shadow-md transition-all"
|
||||||
|
>
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
<div className="w-12 h-12 bg-green-50 rounded-xl flex items-center justify-center shrink-0">
|
||||||
|
<CheckCircle2 className="w-6 h-6 text-green-600" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 className="font-bold text-[#0A1931] mb-2">{item.title}</h4>
|
||||||
|
<p className="text-sm text-gray-500 leading-relaxed">{item.desc}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 底部强调 */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className="mt-16 bg-gradient-to-r from-[#0A1931] to-[#185ADB] rounded-3xl p-10 text-white text-center"
|
||||||
|
>
|
||||||
|
<h4 className="text-2xl font-black mb-4">合规保障 · 安全无忧</h4>
|
||||||
|
<p className="text-lg text-gray-300 max-w-2xl mx-auto">
|
||||||
|
我们拥有收单外包服务机构备案，资金受银监会监管，数商备案接入，工商税务监管系统实时对接，
|
||||||
|
为您的每一笔交易保驾护航。
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,70 @@
|
||||||
|
'use client'
|
||||||
|
|
||||||
|
import { motion } from 'framer-motion'
|
||||||
|
import { Diamond, Truck, Eye, Coins } from 'lucide-react'
|
||||||
|
|
||||||
|
const infraItems = [
|
||||||
|
{
|
||||||
|
icon: Diamond,
|
||||||
|
title: "智慧会员体系",
|
||||||
|
description: "一次注册，全城打通<br/>全平台消费数据互通"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Truck,
|
||||||
|
title: "供应链赋能",
|
||||||
|
description: "积分当钱花，进货更便宜<br/>源头工厂直供去库存"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Eye,
|
||||||
|
title: "智能巡店系统",
|
||||||
|
description: "手机看店，AI管店<br/>客流热力图实时分析"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Coins,
|
||||||
|
title: "数智积分体系",
|
||||||
|
description: "基于真实消费产生<br/>拒绝泡沫，价值恒定"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
export function Infrastructure() {
|
||||||
|
return (
|
||||||
|
<section className="py-12 md:py-16 lg:py-20 bg-[#F4F7FB]">
|
||||||
|
<div className="container px-4 md:px-6 mx-auto">
|
||||||
|
{/* Section Header - 响应式 */}
|
||||||
|
<div className="text-center mb-10 md:mb-16">
|
||||||
|
<h2 className="text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold text-[#0A1931] mb-3 md:mb-4">
|
||||||
|
统一高效的生态基础设施
|
||||||
|
</h2>
|
||||||
|
{/* 已移除：为上市合规打造的底层架构 */}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Grid - 响应式布局 */}
|
||||||
|
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6">
|
||||||
|
{infraItems.map((item, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={index}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||||
|
className="bg-white p-4 md:p-6 lg:p-8 text-center rounded-lg md:rounded-xl border-b-4 border-transparent hover:border-[#FF6600] hover:shadow-lg transition-all duration-300"
|
||||||
|
>
|
||||||
|
{/* Icon - 响应式 */}
|
||||||
|
<div className="w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 bg-[#0A1931]/5 rounded-lg md:rounded-xl flex items-center justify-center mx-auto mb-4 md:mb-6">
|
||||||
|
<item.icon className="w-5 h-5 sm:w-6 sm:h-6 md:w-8 md:h-8 text-[#185ADB]" />
|
||||||
|
</div>
|
||||||
|
{/* Title - 响应式 */}
|
||||||
|
<h3 className="text-sm sm:text-base md:text-lg font-bold text-[#0A1931] mb-2 md:mb-3">
|
||||||
|
{item.title}
|
||||||
|
</h3>
|
||||||
|
{/* Description - 响应式 */}
|
||||||
|
<p className="text-xs sm:text-sm text-gray-500 leading-relaxed"
|
||||||
|
dangerouslySetInnerHTML={{ __html: item.description }}>
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,108 @@
|
||||||
|
'use client'
|
||||||
|
|
||||||
|
import { motion } from 'framer-motion'
|
||||||
|
import { Target, Eye, Heart, Star, Shield, Users, TrendingUp } from 'lucide-react'
|
||||||
|
|
||||||
|
export function MissionVision() {
|
||||||
|
const coreValues = [
|
||||||
|
{
|
||||||
|
icon: Target,
|
||||||
|
title: "使命",
|
||||||
|
content: "军工技术赋能实体经济<br/>人工智能驱动万商互联",
|
||||||
|
color: "from-orange-500 to-red-500"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Eye,
|
||||||
|
title: "愿景",
|
||||||
|
content: "天下白马是一家<br/>一起赚钱一起花",
|
||||||
|
color: "from-blue-500 to-indigo-600"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Heart,
|
||||||
|
title: "价值观",
|
||||||
|
content: "共创 · 共享 · 共富",
|
||||||
|
color: "from-green-500 to-emerald-600"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="py-24 bg-gradient-to-br from-[#0A1931] via-[#0d1f45] to-[#050A14] relative overflow-hidden">
|
||||||
|
{/* 背景装饰 */}
|
||||||
|
<div className="absolute inset-0">
|
||||||
|
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-[#FF6600] rounded-full blur-[150px] opacity-10"></div>
|
||||||
|
<div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-[#185ADB] rounded-full blur-[150px] opacity-10"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="container mx-auto px-4 relative z-10">
|
||||||
|
{/* 标题 */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className="text-center mb-16"
|
||||||
|
>
|
||||||
|
<h2 className="text-3xl md:text-5xl font-black text-white mb-4">
|
||||||
|
我们的信仰
|
||||||
|
</h2>
|
||||||
|
<p className="text-gray-400 text-lg max-w-2xl mx-auto">
|
||||||
|
坚守初心，砥砺前行，白马家园与您携手共创美好未来
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* 三大核心支柱 */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||||
|
{coreValues.map((item, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={index}
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ delay: index * 0.2 }}
|
||||||
|
className="group"
|
||||||
|
>
|
||||||
|
<div className="bg-white/5 backdrop-blur-sm rounded-2xl p-8 border border-white/10 hover:border-[#FF6600]/50 transition-all duration-500 h-full">
|
||||||
|
{/* 图标 */}
|
||||||
|
<div className={`w-20 h-20 mx-auto mb-6 rounded-2xl bg-gradient-to-r ${item.color} flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform duration-300`}>
|
||||||
|
<item.icon className="w-10 h-10 text-white" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 标题 */}
|
||||||
|
<h3 className="text-2xl font-bold text-white text-center mb-6">
|
||||||
|
{item.title}
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
{/* 内容 */}
|
||||||
|
<div
|
||||||
|
className="text-center text-gray-300 leading-loose text-lg"
|
||||||
|
dangerouslySetInnerHTML={{ __html: item.content }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* 装饰线 */}
|
||||||
|
<div className="mt-6 flex justify-center">
|
||||||
|
<div className={`w-16 h-1 bg-gradient-to-r ${item.color} rounded-full opacity-50`}></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 底部标语 */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ delay: 0.5 }}
|
||||||
|
className="mt-16 text-center"
|
||||||
|
>
|
||||||
|
<div className="inline-flex items-center gap-4 bg-[#FF6600]/10 backdrop-blur-sm px-8 py-4 rounded-full border border-[#FF6600]/20">
|
||||||
|
<Star className="w-6 h-6 text-[#FF6600]" />
|
||||||
|
<span className="text-[#FF6600] font-bold text-lg">
|
||||||
|
数智连接万商 共创美好未来
|
||||||
|
</span>
|
||||||
|
<Star className="w-6 h-6 text-[#FF6600]" />
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,108 @@
|
||||||
|
'use client'
|
||||||
|
|
||||||
|
import { motion } from 'framer-motion'
|
||||||
|
import { Target, Eye, Heart, Star } from 'lucide-react'
|
||||||
|
|
||||||
|
export function MissionVisionEN() {
|
||||||
|
const coreValues = [
|
||||||
|
{
|
||||||
|
icon: Target,
|
||||||
|
title: "Mission",
|
||||||
|
content: "Military-grade Technology Empowers Physical Economy<br/>AI Drives Universal Business Connectivity",
|
||||||
|
color: "from-orange-500 to-red-500"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Eye,
|
||||||
|
title: "Vision",
|
||||||
|
content: "One Baima Family Worldwide<br/>Grow Wealth Together, Spend Together",
|
||||||
|
color: "from-blue-500 to-indigo-600"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Heart,
|
||||||
|
title: "Values",
|
||||||
|
content: "Co-create · Share · Prosper Together",
|
||||||
|
color: "from-green-500 to-emerald-600"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="py-24 bg-gradient-to-br from-[#0A1931] via-[#0d1f45] to-[#050A14] relative overflow-hidden">
|
||||||
|
{/* 背景装饰 */}
|
||||||
|
<div className="absolute inset-0">
|
||||||
|
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-[#FF6600] rounded-full blur-[150px] opacity-10"></div>
|
||||||
|
<div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-[#185ADB] rounded-full blur-[150px] opacity-10"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="container mx-auto px-4 relative z-10">
|
||||||
|
{/* 标题 */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className="text-center mb-16"
|
||||||
|
>
|
||||||
|
<h2 className="text-3xl md:text-5xl font-black text-white mb-4">
|
||||||
|
Our Beliefs
|
||||||
|
</h2>
|
||||||
|
<p className="text-gray-400 text-lg max-w-2xl mx-auto">
|
||||||
|
Staying True to Our Original Aspiration, Advancing with Determination - Baima Home Builds a Better Future Together
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* 三大核心支柱 */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||||
|
{coreValues.map((item, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={index}
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ delay: index * 0.2 }}
|
||||||
|
className="group"
|
||||||
|
>
|
||||||
|
<div className="bg-white/5 backdrop-blur-sm rounded-2xl p-8 border border-white/10 hover:border-[#FF6600]/50 transition-all duration-500 h-full">
|
||||||
|
{/* 图标 */}
|
||||||
|
<div className={`w-20 h-20 mx-auto mb-6 rounded-2xl bg-gradient-to-r ${item.color} flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform duration-300`}>
|
||||||
|
<item.icon className="w-10 h-10 text-white" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 标题 */}
|
||||||
|
<h3 className="text-2xl font-bold text-white text-center mb-6">
|
||||||
|
{item.title}
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
{/* 内容 */}
|
||||||
|
<div
|
||||||
|
className="text-center text-gray-300 leading-loose text-lg"
|
||||||
|
dangerouslySetInnerHTML={{ __html: item.content }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* 装饰线 */}
|
||||||
|
<div className="mt-6 flex justify-center">
|
||||||
|
<div className={`w-16 h-1 bg-gradient-to-r ${item.color} rounded-full opacity-50`}></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 底部标语 */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ delay: 0.5 }}
|
||||||
|
className="mt-16 text-center"
|
||||||
|
>
|
||||||
|
<div className="inline-flex items-center gap-4 bg-[#FF6600]/10 backdrop-blur-sm px-8 py-4 rounded-full border border-[#FF6600]/20">
|
||||||
|
<Star className="w-6 h-6 text-[#FF6600]" />
|
||||||
|
<span className="text-[#FF6600] font-bold text-lg">
|
||||||
|
Digital Intelligence Connects Businesses, Creates Better Future
|
||||||
|
</span>
|
||||||
|
<Star className="w-6 h-6 text-[#FF6600]" />
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,83 @@
|
||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useState, useEffect } from 'react'
|
||||||
|
import { motion } from 'framer-motion'
|
||||||
|
import { Calendar, ArrowRight, Loader2 } from 'lucide-react'
|
||||||
|
import Link from 'next/link'
|
||||||
|
|
||||||
|
type News = {
|
||||||
|
id: number
|
||||||
|
title: string
|
||||||
|
category: string
|
||||||
|
excerpt: string
|
||||||
|
createdAt: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export function NewsSection() {
|
||||||
|
const [news, setNews] = useState<News[]>([])
|
||||||
|
const [isLoading, setIsLoading] = useState(true)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetch('/api/news?limit=3')
|
||||||
|
.then(res => res.json())
|
||||||
|
.then(data => {
|
||||||
|
setNews(data.news)
|
||||||
|
setIsLoading(false)
|
||||||
|
})
|
||||||
|
.catch(() => setIsLoading(false))
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section id="news" className="py-24 bg-white scroll-mt-20">
|
||||||
|
<div className="container mx-auto px-4 md:px-6">
|
||||||
|
<div className="flex flex-col md:flex-row justify-between items-end mb-16 gap-6">
|
||||||
|
<div>
|
||||||
|
<h2 className="text-3xl md:text-5xl font-black text-[#0A1931] mb-4">最新动态</h2>
|
||||||
|
<p className="text-gray-500 text-lg">了解白马家园的成长足迹与行业洞察</p>
|
||||||
|
</div>
|
||||||
|
<Link href="/news" className="text-[#FF6600] font-bold flex items-center gap-2 hover:translate-x-1 transition-transform">
|
||||||
|
查看全部动态 <ArrowRight className="w-5 h-5" />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{isLoading ? (
|
||||||
|
<div className="flex justify-center py-20"><Loader2 className="w-8 h-8 animate-spin text-[#FF6600]" /></div>
|
||||||
|
) : news.length === 0 ? (
|
||||||
|
<div className="text-center py-20 text-gray-400 bg-gray-50 rounded-2xl">后台尚未发布任何动态</div>
|
||||||
|
) : (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||||
|
{news.map((item, index) => (
|
||||||
|
<Link href={`/news?id=${item.id}`} key={item.id}>
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ delay: index * 0.1 }}
|
||||||
|
className="group p-6 rounded-2xl border border-gray-100 bg-white hover:shadow-xl transition-all cursor-pointer h-full"
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-2 mb-4">
|
||||||
|
<span className="text-[10px] font-black uppercase tracking-widest text-[#FF6600] bg-orange-50 px-2 py-0.5 rounded">
|
||||||
|
{item.category}
|
||||||
|
</span>
|
||||||
|
<span className="text-xs text-gray-400 flex items-center font-mono">
|
||||||
|
<Calendar className="w-3 h-3 mr-1" /> {new Date(item.createdAt).toLocaleDateString()}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-bold text-[#0A1931] mb-4 group-hover:text-[#FF6600] transition-colors line-clamp-2">
|
||||||
|
{item.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-gray-500 leading-relaxed mb-6 line-clamp-3">
|
||||||
|
{item.excerpt}
|
||||||
|
</p>
|
||||||
|
<span className="text-sm font-bold text-[#0A1931] flex items-center gap-1 group-hover:gap-2 transition-all">
|
||||||
|
阅读更多 <ArrowRight className="w-4 h-4" />
|
||||||
|
</span>
|
||||||
|
</motion.div>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,137 @@
|
||||||
|
'use client'
|
||||||
|
|
||||||
|
import { motion } from 'framer-motion'
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
import { CreditCard, Users, Network, Database } from 'lucide-react'
|
||||||
|
|
||||||
|
// 根据框图重构四大核心板块
|
||||||
|
const products = [
|
||||||
|
{
|
||||||
|
title: '高效安全的金融科技支撑',
|
||||||
|
enTitle: 'Fintech Support',
|
||||||
|
description: '收单-分销-结算一体化，多通道AI路由，保障资金安全与高效分账。',
|
||||||
|
icon: CreditCard,
|
||||||
|
color: 'bg-gradient-to-br from-[#0A1931] to-[#185ADB]',
|
||||||
|
features: [
|
||||||
|
{ title: "白马智付", desc: "锁粉 / 自动分佣 / AI路由" },
|
||||||
|
{ title: "智能设备", desc: "智慧收银系统 / 支持绿色积分 / 智能监控巡店" },
|
||||||
|
{ title: "支付能力", desc: "主扫、被扫模式全支持 / 强大技术底座" }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '简单易用的私域运营工具',
|
||||||
|
enTitle: 'Private Domain Tools',
|
||||||
|
description: 'AI驱动的私域流量运营神器，让获客、留存、转化变得简单高效。',
|
||||||
|
icon: Users,
|
||||||
|
color: 'bg-gradient-to-br from-[#FF6600] to-[#FF8C00]',
|
||||||
|
features: [
|
||||||
|
{ title: "AI数字人", desc: "AI直播/AI导购/AI客服/AI私域" },
|
||||||
|
{ title: "积分权益", desc: "兑换AI直播 / 营销获客权益" },
|
||||||
|
{ title: "企微私域", desc: "AI数字员工自动实现：社群运营/维护/导购/客服" }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '轻松锁客的异业联盟系统',
|
||||||
|
enTitle: 'Alliance System',
|
||||||
|
description: '打破单打独斗，通过异业联盟锁定客户终身价值，实现跨界收益。',
|
||||||
|
icon: Network,
|
||||||
|
color: 'bg-gradient-to-br from-[#185ADB] to-[#0A1931]',
|
||||||
|
features: [
|
||||||
|
{ title: "锁定客户", desc: "扫码即锁定推荐关系，终身享受消费分佣" },
|
||||||
|
{ title: "跨界分佣", desc: "赚360行的钱 / 跨门店收益" },
|
||||||
|
{ title: "供应链分佣", desc: "分享优质供应链商品获利" }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '统一高效的生态基础设施',
|
||||||
|
enTitle: 'Ecological Infrastructure',
|
||||||
|
description: '为小微企业提供完整的数智化基建，打通会员、资产与供应链。',
|
||||||
|
icon: Database,
|
||||||
|
color: 'bg-gradient-to-br from-[#059669] to-[#10B981]',
|
||||||
|
features: [
|
||||||
|
{ title: "会员系统", desc: "跨平台生态融合 / 统一身份" },
|
||||||
|
{ title: "数字资产体系", desc: "RWA资产 / 积分、抵用券、金币等" },
|
||||||
|
{ title: "供应链资源", desc: "稳定安全靠谱" }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
export function ProductPreview() {
|
||||||
|
return (
|
||||||
|
<section className="py-12 md:py-20 lg:py-24 bg-white">
|
||||||
|
<div className="container px-4 md:px-6 mx-auto">
|
||||||
|
{/* Section Header */}
|
||||||
|
<div className="text-center mb-10 md:mb-16">
|
||||||
|
<motion.h2
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-[#0A1931] mb-3 md:mb-4"
|
||||||
|
>
|
||||||
|
AI时代小微创业 + 消费循环生态圈
|
||||||
|
</motion.h2>
|
||||||
|
<motion.p
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ delay: 0.1 }}
|
||||||
|
className="text-sm sm:text-base md:text-lg text-gray-500 px-4"
|
||||||
|
>
|
||||||
|
四大核心数智化产品矩阵，全方位赋能实体商业
|
||||||
|
</motion.p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Product Cards Grid - 2x2 Layout recommended for 4 items */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8 lg:gap-10">
|
||||||
|
{products.map((product, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={index}
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||||
|
className="group h-full"
|
||||||
|
>
|
||||||
|
<div className="card-hover bg-white rounded-xl md:rounded-2xl overflow-hidden border border-gray-100 h-full flex flex-col">
|
||||||
|
{/* Header with Icon */}
|
||||||
|
<div className="p-6 md:p-8 flex items-start justify-between border-b border-gray-50 bg-gray-50/50">
|
||||||
|
<div>
|
||||||
|
<h3 className="text-xl md:text-2xl font-bold text-[#0A1931] mb-1">
|
||||||
|
{product.title}
|
||||||
|
</h3>
|
||||||
|
<span className="text-xs font-semibold text-[#FF6600] uppercase tracking-wider">
|
||||||
|
{product.enTitle}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className={`w-12 h-12 md:w-14 md:h-14 rounded-xl flex items-center justify-center text-white shadow-md ${product.color}`}>
|
||||||
|
<product.icon className="w-6 h-6 md:w-7 md:h-7" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<div className="p-6 md:p-8 flex-grow flex flex-col">
|
||||||
|
<p className="text-sm text-gray-500 mb-6 leading-relaxed">
|
||||||
|
{product.description}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Features List */}
|
||||||
|
<ul className="space-y-3 md:space-y-4 mb-8 flex-grow">
|
||||||
|
{product.features.map((feature, fIndex) => (
|
||||||
|
<li key={fIndex} className="flex items-start text-sm">
|
||||||
|
<span className="w-1.5 h-1.5 bg-[#FF6600] rounded-full mr-3 mt-1.5 shrink-0"></span>
|
||||||
|
<div className="flex-1">
|
||||||
|
<strong className="text-[#0A1931] block mb-0.5">{feature.title}</strong>
|
||||||
|
<span className="text-gray-500 text-xs md:text-sm">{feature.desc}</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
'use client'
|
||||||
|
|
||||||
|
import { motion } from 'framer-motion'
|
||||||
|
|
||||||
|
const stats = [
|
||||||
|
{ value: "120,000+", label: "服务实体商户", highlight: "12万+" },
|
||||||
|
{ value: "500,000+", label: "日均交易笔数", highlight: "50万+" },
|
||||||
|
{ value: "300万+", label: "累计引流人次", highlight: "300万+" },
|
||||||
|
{ value: "20亿+", label: "平台年GMV流水", highlight: "20亿+" }
|
||||||
|
]
|
||||||
|
|
||||||
|
export function Stats() {
|
||||||
|
return (
|
||||||
|
<section className="py-0">
|
||||||
|
<div className="bg-gradient-to-r from-[#0A1931] via-[#185ADB] to-[#0A1931] text-white py-16 md:py-20">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12 items-center">
|
||||||
|
{stats.map((stat, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={index}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||||
|
className="text-center"
|
||||||
|
>
|
||||||
|
{/* 大号数字，突出显示 */}
|
||||||
|
<h3 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-black text-[#FF6600] mb-2 md:mb-3 leading-none">
|
||||||
|
{stat.highlight}
|
||||||
|
</h3>
|
||||||
|
{/* 下方详细说明 */}
|
||||||
|
<p className="text-sm sm:text-base md:text-lg text-gray-300 font-medium uppercase tracking-wider">
|
||||||
|
{stat.label}
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,34 @@
|
||||||
|
'use client'
|
||||||
|
|
||||||
|
export function Trust() {
|
||||||
|
const partners = [
|
||||||
|
"微信支付认证服务商",
|
||||||
|
"支付宝ISV合作伙伴",
|
||||||
|
"中国银联",
|
||||||
|
"启迪之星(投资方)",
|
||||||
|
"中金资本生态成员",
|
||||||
|
"OTC Markets (拟)"
|
||||||
|
]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="py-8 md:py-10 lg:py-12 bg-white border-t border-gray-100">
|
||||||
|
<div className="container px-4 mx-auto">
|
||||||
|
{/* 响应式标题 */}
|
||||||
|
<p className="text-center text-gray-400 text-xs sm:text-sm font-bold uppercase tracking-[1px] md:tracking-[2px] mb-6 md:mb-8">
|
||||||
|
Strategic Partners & Qualifications
|
||||||
|
</p>
|
||||||
|
{/* 响应式网格 */}
|
||||||
|
<div className="flex flex-wrap justify-center gap-2 md:gap-4 px-2">
|
||||||
|
{partners.map((partner, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className="px-3 py-2 md:px-6 md:py-3 bg-white border border-gray-200 rounded-full text-xs sm:text-sm font-semibold text-gray-500 hover:border-[#185ADB] hover:text-[#185ADB] transition-colors cursor-default whitespace-nowrap"
|
||||||
|
>
|
||||||
|
{partner}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,111 @@
|
||||||
|
'use client'
|
||||||
|
|
||||||
|
import Link from 'next/link'
|
||||||
|
import Image from 'next/image'
|
||||||
|
import { Separator } from '@/components/ui/separator'
|
||||||
|
import { MapPin } from 'lucide-react'
|
||||||
|
|
||||||
|
export function Footer() {
|
||||||
|
const currentYear = new Date().getFullYear()
|
||||||
|
const hostname = typeof window !== 'undefined' ? window.location.hostname : ''
|
||||||
|
const icpNumber = hostname === 'www.baimajingxuan.com' ? '津ICP备2020008456号-1' : hostname === 'www.baimajiayuanjiankang.com' ? '津ICP备2023000762号' : '津ICP备99999999号'
|
||||||
|
|
||||||
|
return (
|
||||||
|
<footer className="bg-[#050A14] text-gray-400 pt-16 pb-8">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-4 gap-12 mb-12">
|
||||||
|
{/* Brand Info */}
|
||||||
|
<div className="lg:col-span-1">
|
||||||
|
{/* Logo Image */}
|
||||||
|
<div className="relative h-14 w-auto aspect-[2/1] mb-6">
|
||||||
|
<Image
|
||||||
|
src="/baima-logo.png"
|
||||||
|
alt="白马家园 Logo"
|
||||||
|
fill
|
||||||
|
className="object-contain"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm leading-relaxed mb-6 text-gray-500">
|
||||||
|
军工技术赋能实体经济，人工智能驱动万商互联。<br/>
|
||||||
|
打造AI时代小微创业与消费循环生态圈。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Quick Links */}
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold text-white text-lg mb-6">产品中心</h3>
|
||||||
|
<ul className="space-y-3 text-sm">
|
||||||
|
<li><Link href="/products" className="hover:text-[#FF6600] transition-colors">白马智付</Link></li>
|
||||||
|
<li><Link href="/products" className="hover:text-[#FF6600] transition-colors">AI拓客宝</Link></li>
|
||||||
|
<li><Link href="/products" className="hover:text-[#FF6600] transition-colors">商家联盟</Link></li>
|
||||||
|
<li><Link href="/products" className="hover:text-[#FF6600] transition-colors">智能硬件</Link></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Solutions */}
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold text-white text-lg mb-6">解决方案</h3>
|
||||||
|
<ul className="space-y-3 text-sm">
|
||||||
|
<li><Link href="#" className="hover:text-[#FF6600] transition-colors">餐饮行业</Link></li>
|
||||||
|
<li><Link href="#" className="hover:text-[#FF6600] transition-colors">零售商超</Link></li>
|
||||||
|
<li><Link href="#" className="hover:text-[#FF6600] transition-colors">美业丽人</Link></li>
|
||||||
|
<li><Link href="#" className="hover:text-[#FF6600] transition-colors">休闲娱乐</Link></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Contact Info - 客服企业微信二维码 */}
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold text-white text-lg mb-6">联系我们</h3>
|
||||||
|
<div className="space-y-4">
|
||||||
|
{/* 企业微信二维码 */}
|
||||||
|
<div className="bg-white p-3 rounded-lg inline-block">
|
||||||
|
<div className="relative w-28 h-28">
|
||||||
|
<Image
|
||||||
|
src="/baima-qrcode.png"
|
||||||
|
alt="扫码添加客服企业微信"
|
||||||
|
fill
|
||||||
|
className="object-contain rounded"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-gray-500">
|
||||||
|
扫码添加客服企业微信<br/>
|
||||||
|
获取一对一专业服务
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* 地址保留 */}
|
||||||
|
<div className="flex items-start gap-3 pt-4 border-t border-gray-800">
|
||||||
|
<MapPin className="w-4 h-4 text-[#FF6600] mt-1 shrink-0" />
|
||||||
|
<p className="text-sm">天津市武清区京津产业新城<br/>海达商务大厦</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Separator className="bg-white/10 mb-8" />
|
||||||
|
|
||||||
|
{/* 底部公司名称 - 更新为两家公司 */}
|
||||||
|
<div className="text-center pb-4">
|
||||||
|
<p className="text-sm text-gray-500 font-medium">
|
||||||
|
天津白马晶选科技有限公司<br className="md:hidden" />
|
||||||
|
<span className="mx-2 hidden md:inline">|</span>
|
||||||
|
天津白马家园健康科技有限公司
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="text-center text-xs text-gray-600">
|
||||||
|
<p>© {currentYear} 白马家园 保留所有权利</p>
|
||||||
|
<a
|
||||||
|
href="https://beian.miit.gov.cn/"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="hover:text-[#FF6600] transition-colors"
|
||||||
|
style={{ marginTop: '10px', fontSize: '16px', display: 'block' }}
|
||||||
|
>
|
||||||
|
{icpNumber}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,271 @@
|
||||||
|
'use client'
|
||||||
|
|
||||||
|
import * as React from 'react'
|
||||||
|
import Link from 'next/link'
|
||||||
|
import Image from 'next/image'
|
||||||
|
import { Menu, Globe, ArrowRight } from 'lucide-react'
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
import {
|
||||||
|
Sheet,
|
||||||
|
SheetContent,
|
||||||
|
SheetTrigger,
|
||||||
|
} from '@/components/ui/sheet'
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
// 导航结构 - 中文
|
||||||
|
const navigationCN = [
|
||||||
|
{ name: '首页', href: '/' },
|
||||||
|
{ name: '产品矩阵', href: '/products' },
|
||||||
|
{ name: '关于我们', href: '/about' },
|
||||||
|
{ name: '合作加盟', href: '/contact' },
|
||||||
|
]
|
||||||
|
|
||||||
|
// 导航结构 - 英文
|
||||||
|
const navigationEN = [
|
||||||
|
{ name: 'Home', href: '/en' },
|
||||||
|
{ name: 'Products', href: '/products' },
|
||||||
|
{ name: 'About', href: '/about' },
|
||||||
|
{ name: 'Contact', href: '/contact' },
|
||||||
|
]
|
||||||
|
|
||||||
|
export function Navbar() {
|
||||||
|
const [isScrolled, setIsScrolled] = React.useState(false)
|
||||||
|
const [language, setLanguage] = React.useState<'zh' | 'en'>('zh')
|
||||||
|
const [mounted, setMounted] = React.useState(false)
|
||||||
|
const [currentPath, setCurrentPath] = React.useState('')
|
||||||
|
|
||||||
|
// 初始化语言状态和当前路径
|
||||||
|
React.useEffect(() => {
|
||||||
|
setMounted(true)
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
const path = window.location.pathname
|
||||||
|
setLanguage(path.startsWith('/en') ? 'en' : 'zh')
|
||||||
|
setCurrentPath(path)
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
// 监听路由变化，更新当前路径
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
const handlePopState = () => {
|
||||||
|
setCurrentPath(window.location.pathname)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 监听浏览器前进后退
|
||||||
|
window.addEventListener('popstate', handlePopState)
|
||||||
|
|
||||||
|
// 保存原始的pushState和replaceState
|
||||||
|
const originalPushState = window.history.pushState
|
||||||
|
const originalReplaceState = window.history.replaceState
|
||||||
|
|
||||||
|
// 重写pushState和replaceState
|
||||||
|
window.history.pushState = function(...args) {
|
||||||
|
originalPushState.apply(this, args)
|
||||||
|
handlePopState()
|
||||||
|
}
|
||||||
|
|
||||||
|
window.history.replaceState = function(...args) {
|
||||||
|
originalReplaceState.apply(this, args)
|
||||||
|
handlePopState()
|
||||||
|
}
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('popstate', handlePopState)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
const handleScroll = () => {
|
||||||
|
setIsScrolled(window.scrollY > 20)
|
||||||
|
}
|
||||||
|
window.addEventListener('scroll', handleScroll)
|
||||||
|
return () => window.removeEventListener('scroll', handleScroll)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
// 根据语言选择导航
|
||||||
|
const navigation = language === 'zh' ? navigationCN : navigationEN
|
||||||
|
const currentLanguage = language
|
||||||
|
|
||||||
|
// 切换语言
|
||||||
|
const toggleLanguage = () => {
|
||||||
|
const newLang = currentLanguage === 'zh' ? 'en' : 'zh'
|
||||||
|
setLanguage(newLang)
|
||||||
|
|
||||||
|
// 跳转到对应语言版本
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
const path = window.location.pathname
|
||||||
|
let newPath = path
|
||||||
|
|
||||||
|
if (newLang === 'en') {
|
||||||
|
// 转到英文版（首页）
|
||||||
|
if (path === '/') {
|
||||||
|
newPath = '/en'
|
||||||
|
} else {
|
||||||
|
// 其他页面保持原样（暂时只有首页有英文版）
|
||||||
|
newPath = '/en'
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 转到中文版
|
||||||
|
if (path.startsWith('/en')) {
|
||||||
|
newPath = '/'
|
||||||
|
} else {
|
||||||
|
newPath = path
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.location.href = newPath
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<header
|
||||||
|
className={cn(
|
||||||
|
'fixed top-0 left-0 right-0 z-50 transition-all duration-300',
|
||||||
|
isScrolled
|
||||||
|
? 'bg-white/98 backdrop-blur-md shadow-sm border-b border-gray-100 py-3'
|
||||||
|
: 'bg-transparent py-5'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="container mx-auto px-4 flex items-center justify-between">
|
||||||
|
{/* Logo */}
|
||||||
|
<Link href={currentLanguage === 'zh' ? '/' : '/en'} className="flex items-center gap-3">
|
||||||
|
<div className="relative h-14 w-auto aspect-[2/1]">
|
||||||
|
<Image
|
||||||
|
src="/baima-logo.png"
|
||||||
|
alt="Baima Home Logo"
|
||||||
|
fill
|
||||||
|
className="object-contain"
|
||||||
|
priority
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
{/* Desktop Navigation */}
|
||||||
|
<nav className="hidden lg:flex items-center gap-8">
|
||||||
|
{navigation.map((item) => {
|
||||||
|
// 检测当前活跃链接
|
||||||
|
const isActive = mounted && currentPath === item.href;
|
||||||
|
// 检测是否为首页
|
||||||
|
const isHomePage = item.href === '/' || item.href === '/en';
|
||||||
|
// 检测当前是否在指定的页面（/about、/products、/contact）
|
||||||
|
const isOnSpecificPage = currentPath.startsWith('/about') ||
|
||||||
|
currentPath.startsWith('/products') ||
|
||||||
|
currentPath.startsWith('/contact');
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
key={item.name}
|
||||||
|
href={item.href}
|
||||||
|
className={cn(
|
||||||
|
"text-sm font-medium transition-colors hover:text-[#FF6600]",
|
||||||
|
isActive
|
||||||
|
? "text-[#FF6600]"
|
||||||
|
: isOnSpecificPage || isScrolled
|
||||||
|
? "text-black"
|
||||||
|
: isHomePage ? "text-black" : "text-white"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{item.name}
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
{/* Right Side Actions */}
|
||||||
|
<div className="hidden lg:flex items-center gap-4">
|
||||||
|
{/* <button
|
||||||
|
onClick={toggleLanguage}
|
||||||
|
className={cn(
|
||||||
|
"flex items-center gap-1.5 text-sm font-medium transition-colors hover:text-[#FF6600]",
|
||||||
|
isScrolled ? "text-[#555]" : "text-white/90 drop-shadow-md"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Globe className="w-4 h-4" />
|
||||||
|
<span>{currentLanguage === 'zh' ? 'English' : '中文'}</span>
|
||||||
|
</button> */}
|
||||||
|
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
className={cn(
|
||||||
|
"flex items-center gap-2 px-5 py-2.5 rounded-full text-sm font-bold transition-all shadow-md",
|
||||||
|
isScrolled
|
||||||
|
? "bg-[#FF6600] hover:bg-[#FF8C00] text-white"
|
||||||
|
: "bg-white text-[#FF6600] hover:bg-white/90"
|
||||||
|
)}
|
||||||
|
asChild
|
||||||
|
>
|
||||||
|
<Link href="/contact#form">
|
||||||
|
{currentLanguage === 'zh' ? '立即咨询' : 'Get Started'}
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mobile Navigation */}
|
||||||
|
<div className="lg:hidden">
|
||||||
|
<Sheet>
|
||||||
|
<SheetTrigger asChild>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className={cn(!isScrolled && "text-white drop-shadow-md")}
|
||||||
|
>
|
||||||
|
<Menu className="h-6 w-6" />
|
||||||
|
<span className="sr-only">Open menu</span>
|
||||||
|
</Button>
|
||||||
|
</SheetTrigger>
|
||||||
|
<SheetContent side="right" className="w-[300px] sm:w-[400px]">
|
||||||
|
<div className="flex flex-col gap-6 mt-8">
|
||||||
|
<div className="flex items-center gap-3 pb-4 border-b">
|
||||||
|
<div className="relative h-8 w-auto aspect-[2/1]">
|
||||||
|
<Image
|
||||||
|
src="./logos.png"
|
||||||
|
alt="Baima Home Logo"
|
||||||
|
fill
|
||||||
|
className="object-contain"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 语言切换 */}
|
||||||
|
<button
|
||||||
|
onClick={toggleLanguage}
|
||||||
|
className="flex items-center gap-2 text-sm font-medium text-[#FF6600] py-2 px-4 bg-orange-50 rounded-lg"
|
||||||
|
>
|
||||||
|
<Globe className="w-4 h-4" />
|
||||||
|
{currentLanguage === 'zh' ? 'Switch to English' : '切换到中文'}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
{navigation.map((item) => {
|
||||||
|
// 检测当前活跃链接
|
||||||
|
const isActive = mounted && currentPath === item.href;
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
key={item.name}
|
||||||
|
href={item.href}
|
||||||
|
className={cn(
|
||||||
|
"text-lg font-medium py-3 px-4 rounded-lg hover:bg-gray-100 transition-colors",
|
||||||
|
isActive ? "text-[#FF6600] bg-orange-50" : "text-gray-800"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{item.name}
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="pt-4 mt-auto">
|
||||||
|
<Button className="w-full bg-[#FF6600] hover:bg-[#FF8C00] rounded-full" size="lg" asChild>
|
||||||
|
<Link href="/contact#form">
|
||||||
|
{currentLanguage === 'zh' ? '立即咨询' : 'Get Started'} <ArrowRight className="ml-2 w-4 h-4" />
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</SheetContent>
|
||||||
|
</Sheet>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,186 @@
|
||||||
|
'use client'
|
||||||
|
|
||||||
|
import { motion } from 'framer-motion'
|
||||||
|
import {
|
||||||
|
CreditCard,
|
||||||
|
Smartphone,
|
||||||
|
Bot,
|
||||||
|
Users,
|
||||||
|
Network,
|
||||||
|
ShoppingBag,
|
||||||
|
LayoutGrid,
|
||||||
|
Coins,
|
||||||
|
Shield,
|
||||||
|
Camera,
|
||||||
|
Share2,
|
||||||
|
Gift
|
||||||
|
} from 'lucide-react'
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||||
|
|
||||||
|
// 完全基于框图重构的数据结构
|
||||||
|
const categories = [
|
||||||
|
{
|
||||||
|
id: "fintech",
|
||||||
|
title: "高效安全的金融科技支撑",
|
||||||
|
subtitle: "收单-分销-结算 一体化解决方案",
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
title: "白马智付",
|
||||||
|
icon: CreditCard,
|
||||||
|
features: [
|
||||||
|
"强大的技术能力，保障交易稳定",
|
||||||
|
"多通道AI路由，智能选择最优通道",
|
||||||
|
"AI智慧收款码：支持输入文本",
|
||||||
|
"核心功能：锁粉、自动分佣"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "智能设备",
|
||||||
|
icon: Smartphone,
|
||||||
|
features: [
|
||||||
|
"智慧收银系统硬件支持",
|
||||||
|
"全场景支付：支持主扫、被扫",
|
||||||
|
"绿色积分：支持积分抵扣支付",
|
||||||
|
"设备联网与远程管理"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "ai",
|
||||||
|
title: "简单易用的私域运营工具",
|
||||||
|
subtitle: "AI赋能，让私域运营自动化、智能化",
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
title: "AI营销数字人",
|
||||||
|
icon: Bot,
|
||||||
|
features: [
|
||||||
|
"数字员工：全天候导购、客服",
|
||||||
|
"AI直播：自动讲解商品，提升转化",
|
||||||
|
"AI营销获客：智能生成内容引流"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "积分与消费券体系",
|
||||||
|
icon: Gift,
|
||||||
|
features: [
|
||||||
|
"消费券：可从供应商进货，可流转他人",
|
||||||
|
"积分权益：兑换AI数字人/直播权益",
|
||||||
|
"企微私域运营：无缝打通微信生态"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "alliance",
|
||||||
|
title: "轻松锁客的异业联盟系统",
|
||||||
|
subtitle: "打破孤岛，实现跨界收益最大化",
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
title: "锁定客户终身价值",
|
||||||
|
icon: Users,
|
||||||
|
features: [
|
||||||
|
"一次锁定，终身受益",
|
||||||
|
"赚360行的钱：跨行业收益共享",
|
||||||
|
"客户在联盟内任何消费均有关联"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "全维度分佣机制",
|
||||||
|
icon: Network,
|
||||||
|
features: [
|
||||||
|
"赚其他门店的分佣收益",
|
||||||
|
"赚其他供应链的分佣收益",
|
||||||
|
"构建真正的利益共同体"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "infrastructure",
|
||||||
|
title: "统一高效的生态基础设施",
|
||||||
|
subtitle: "以上生态均对外开放，共建数智化底座",
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
title: "核心系统基建",
|
||||||
|
icon: LayoutGrid,
|
||||||
|
features: [
|
||||||
|
"统一会员系统：跨平台生态融合",
|
||||||
|
"专业小微数智化系统：积分支付年费",
|
||||||
|
"涵盖：收银/会员/营销/外卖/进销存/连锁等"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "数字资产体系 (RWA)",
|
||||||
|
icon: Coins,
|
||||||
|
features: [
|
||||||
|
"RWA数字资产化",
|
||||||
|
"资产转换：积分、抵用券、金币互转",
|
||||||
|
"数字藏品与RWA权益绑定"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "供应链与监控",
|
||||||
|
icon: Shield,
|
||||||
|
features: [
|
||||||
|
"供应链资源：稳定、安全、靠谱",
|
||||||
|
"智能监控巡店设备：远程管理门店",
|
||||||
|
"供应链陆续招募中"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
export function ProductList() {
|
||||||
|
return (
|
||||||
|
<div className="space-y-24 py-12">
|
||||||
|
{categories.map((category, catIndex) => (
|
||||||
|
<section key={category.id} id={category.id} className="scroll-mt-24">
|
||||||
|
{/* Section Header */}
|
||||||
|
<div className="flex flex-col md:flex-row md:items-center gap-4 md:gap-6 mb-12">
|
||||||
|
<div className="w-12 h-12 md:w-16 md:h-16 flex items-center justify-center bg-[#FF6600] text-white text-xl md:text-2xl font-bold rounded-2xl shadow-lg shrink-0">
|
||||||
|
0{catIndex + 1}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 className="text-2xl md:text-3xl font-bold text-[#0A1931] mb-2">{category.title}</h2>
|
||||||
|
<p className="text-sm md:text-base text-gray-500 font-medium">{category.subtitle}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Products Grid */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
|
||||||
|
{category.items.map((item, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={index}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||||
|
>
|
||||||
|
<Card className="h-full border-0 shadow-md hover:shadow-xl transition-all duration-300 bg-white group hover:-translate-y-1">
|
||||||
|
<CardHeader className="flex flex-row items-center gap-4 pb-4 border-b border-gray-50">
|
||||||
|
<div className="w-12 h-12 bg-[#0A1931]/5 rounded-xl flex items-center justify-center text-[#FF6600] group-hover:bg-[#FF6600] group-hover:text-white transition-colors duration-300">
|
||||||
|
<item.icon className="w-6 h-6" />
|
||||||
|
</div>
|
||||||
|
<CardTitle className="text-lg font-bold text-[#0A1931]">{item.title}</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="pt-6">
|
||||||
|
<ul className="space-y-3">
|
||||||
|
{item.features.map((feature, fIndex) => (
|
||||||
|
<li key={fIndex} className="flex items-start text-sm text-gray-600">
|
||||||
|
<span className="w-1.5 h-1.5 bg-[#185ADB] rounded-full mr-3 mt-1.5 shrink-0"></span>
|
||||||
|
<span className="leading-relaxed">{feature}</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,66 @@
|
||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import * as AccordionPrimitive from "@radix-ui/react-accordion"
|
||||||
|
import { ChevronDownIcon } from "lucide-react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function Accordion({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
|
||||||
|
return <AccordionPrimitive.Root data-slot="accordion" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function AccordionItem({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
|
||||||
|
return (
|
||||||
|
<AccordionPrimitive.Item
|
||||||
|
data-slot="accordion-item"
|
||||||
|
className={cn("border-b last:border-b-0", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function AccordionTrigger({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
|
||||||
|
return (
|
||||||
|
<AccordionPrimitive.Header className="flex">
|
||||||
|
<AccordionPrimitive.Trigger
|
||||||
|
data-slot="accordion-trigger"
|
||||||
|
className={cn(
|
||||||
|
"focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
|
||||||
|
</AccordionPrimitive.Trigger>
|
||||||
|
</AccordionPrimitive.Header>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function AccordionContent({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
|
||||||
|
return (
|
||||||
|
<AccordionPrimitive.Content
|
||||||
|
data-slot="accordion-content"
|
||||||
|
className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<div className={cn("pt-0 pb-4", className)}>{children}</div>
|
||||||
|
</AccordionPrimitive.Content>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
import * as React from "react"
|
||||||
|
import { Slot } from "@radix-ui/react-slot"
|
||||||
|
import { cva, type VariantProps } from "class-variance-authority"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
const badgeVariants = cva(
|
||||||
|
"inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default:
|
||||||
|
"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
|
||||||
|
secondary:
|
||||||
|
"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
|
||||||
|
destructive:
|
||||||
|
"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
||||||
|
outline:
|
||||||
|
"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: "default",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
function Badge({
|
||||||
|
className,
|
||||||
|
variant,
|
||||||
|
asChild = false,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"span"> &
|
||||||
|
VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
|
||||||
|
const Comp = asChild ? Slot : "span"
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
data-slot="badge"
|
||||||
|
className={cn(badgeVariants({ variant }), className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Badge, badgeVariants }
|
||||||
|
|
@ -0,0 +1,62 @@
|
||||||
|
import * as React from "react"
|
||||||
|
import { Slot } from "@radix-ui/react-slot"
|
||||||
|
import { cva, type VariantProps } from "class-variance-authority"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
const buttonVariants = cva(
|
||||||
|
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
||||||
|
destructive:
|
||||||
|
"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
||||||
|
outline:
|
||||||
|
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
||||||
|
secondary:
|
||||||
|
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||||
|
ghost:
|
||||||
|
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
||||||
|
link: "text-primary underline-offset-4 hover:underline",
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
||||||
|
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
|
||||||
|
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
|
||||||
|
icon: "size-9",
|
||||||
|
"icon-sm": "size-8",
|
||||||
|
"icon-lg": "size-10",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: "default",
|
||||||
|
size: "default",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
function Button({
|
||||||
|
className,
|
||||||
|
variant = "default",
|
||||||
|
size = "default",
|
||||||
|
asChild = false,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"button"> &
|
||||||
|
VariantProps<typeof buttonVariants> & {
|
||||||
|
asChild?: boolean
|
||||||
|
}) {
|
||||||
|
const Comp = asChild ? Slot : "button"
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
data-slot="button"
|
||||||
|
data-variant={variant}
|
||||||
|
data-size={size}
|
||||||
|
className={cn(buttonVariants({ variant, size, className }))}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Button, buttonVariants }
|
||||||
|
|
@ -0,0 +1,92 @@
|
||||||
|
import * as React from "react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function Card({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card"
|
||||||
|
className={cn(
|
||||||
|
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-header"
|
||||||
|
className={cn(
|
||||||
|
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-title"
|
||||||
|
className={cn("leading-none font-semibold", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-description"
|
||||||
|
className={cn("text-muted-foreground text-sm", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-action"
|
||||||
|
className={cn(
|
||||||
|
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-content"
|
||||||
|
className={cn("px-6", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-footer"
|
||||||
|
className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Card,
|
||||||
|
CardHeader,
|
||||||
|
CardFooter,
|
||||||
|
CardTitle,
|
||||||
|
CardAction,
|
||||||
|
CardDescription,
|
||||||
|
CardContent,
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,241 @@
|
||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import useEmblaCarousel, {
|
||||||
|
type UseEmblaCarouselType,
|
||||||
|
} from "embla-carousel-react"
|
||||||
|
import { ArrowLeft, ArrowRight } from "lucide-react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
import { Button } from "@/components/ui/button"
|
||||||
|
|
||||||
|
type CarouselApi = UseEmblaCarouselType[1]
|
||||||
|
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
|
||||||
|
type CarouselOptions = UseCarouselParameters[0]
|
||||||
|
type CarouselPlugin = UseCarouselParameters[1]
|
||||||
|
|
||||||
|
type CarouselProps = {
|
||||||
|
opts?: CarouselOptions
|
||||||
|
plugins?: CarouselPlugin
|
||||||
|
orientation?: "horizontal" | "vertical"
|
||||||
|
setApi?: (api: CarouselApi) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
type CarouselContextProps = {
|
||||||
|
carouselRef: ReturnType<typeof useEmblaCarousel>[0]
|
||||||
|
api: ReturnType<typeof useEmblaCarousel>[1]
|
||||||
|
scrollPrev: () => void
|
||||||
|
scrollNext: () => void
|
||||||
|
canScrollPrev: boolean
|
||||||
|
canScrollNext: boolean
|
||||||
|
} & CarouselProps
|
||||||
|
|
||||||
|
const CarouselContext = React.createContext<CarouselContextProps | null>(null)
|
||||||
|
|
||||||
|
function useCarousel() {
|
||||||
|
const context = React.useContext(CarouselContext)
|
||||||
|
|
||||||
|
if (!context) {
|
||||||
|
throw new Error("useCarousel must be used within a <Carousel />")
|
||||||
|
}
|
||||||
|
|
||||||
|
return context
|
||||||
|
}
|
||||||
|
|
||||||
|
function Carousel({
|
||||||
|
orientation = "horizontal",
|
||||||
|
opts,
|
||||||
|
setApi,
|
||||||
|
plugins,
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"div"> & CarouselProps) {
|
||||||
|
const [carouselRef, api] = useEmblaCarousel(
|
||||||
|
{
|
||||||
|
...opts,
|
||||||
|
axis: orientation === "horizontal" ? "x" : "y",
|
||||||
|
},
|
||||||
|
plugins
|
||||||
|
)
|
||||||
|
const [canScrollPrev, setCanScrollPrev] = React.useState(false)
|
||||||
|
const [canScrollNext, setCanScrollNext] = React.useState(false)
|
||||||
|
|
||||||
|
const onSelect = React.useCallback((api: CarouselApi) => {
|
||||||
|
if (!api) return
|
||||||
|
setCanScrollPrev(api.canScrollPrev())
|
||||||
|
setCanScrollNext(api.canScrollNext())
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const scrollPrev = React.useCallback(() => {
|
||||||
|
api?.scrollPrev()
|
||||||
|
}, [api])
|
||||||
|
|
||||||
|
const scrollNext = React.useCallback(() => {
|
||||||
|
api?.scrollNext()
|
||||||
|
}, [api])
|
||||||
|
|
||||||
|
const handleKeyDown = React.useCallback(
|
||||||
|
(event: React.KeyboardEvent<HTMLDivElement>) => {
|
||||||
|
if (event.key === "ArrowLeft") {
|
||||||
|
event.preventDefault()
|
||||||
|
scrollPrev()
|
||||||
|
} else if (event.key === "ArrowRight") {
|
||||||
|
event.preventDefault()
|
||||||
|
scrollNext()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[scrollPrev, scrollNext]
|
||||||
|
)
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (!api || !setApi) return
|
||||||
|
setApi(api)
|
||||||
|
}, [api, setApi])
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (!api) return
|
||||||
|
onSelect(api)
|
||||||
|
api.on("reInit", onSelect)
|
||||||
|
api.on("select", onSelect)
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
api?.off("select", onSelect)
|
||||||
|
}
|
||||||
|
}, [api, onSelect])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<CarouselContext.Provider
|
||||||
|
value={{
|
||||||
|
carouselRef,
|
||||||
|
api: api,
|
||||||
|
opts,
|
||||||
|
orientation:
|
||||||
|
orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
|
||||||
|
scrollPrev,
|
||||||
|
scrollNext,
|
||||||
|
canScrollPrev,
|
||||||
|
canScrollNext,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
onKeyDownCapture={handleKeyDown}
|
||||||
|
className={cn("relative", className)}
|
||||||
|
role="region"
|
||||||
|
aria-roledescription="carousel"
|
||||||
|
data-slot="carousel"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</CarouselContext.Provider>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
const { carouselRef, orientation } = useCarousel()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={carouselRef}
|
||||||
|
className="overflow-hidden"
|
||||||
|
data-slot="carousel-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"flex",
|
||||||
|
orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
const { orientation } = useCarousel()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
role="group"
|
||||||
|
aria-roledescription="slide"
|
||||||
|
data-slot="carousel-item"
|
||||||
|
className={cn(
|
||||||
|
"min-w-0 shrink-0 grow-0 basis-full",
|
||||||
|
orientation === "horizontal" ? "pl-4" : "pt-4",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CarouselPrevious({
|
||||||
|
className,
|
||||||
|
variant = "outline",
|
||||||
|
size = "icon",
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof Button>) {
|
||||||
|
const { orientation, scrollPrev, canScrollPrev } = useCarousel()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
data-slot="carousel-previous"
|
||||||
|
variant={variant}
|
||||||
|
size={size}
|
||||||
|
className={cn(
|
||||||
|
"absolute size-8 rounded-full",
|
||||||
|
orientation === "horizontal"
|
||||||
|
? "top-1/2 -left-12 -translate-y-1/2"
|
||||||
|
: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
disabled={!canScrollPrev}
|
||||||
|
onClick={scrollPrev}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ArrowLeft />
|
||||||
|
<span className="sr-only">Previous slide</span>
|
||||||
|
</Button>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CarouselNext({
|
||||||
|
className,
|
||||||
|
variant = "outline",
|
||||||
|
size = "icon",
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof Button>) {
|
||||||
|
const { orientation, scrollNext, canScrollNext } = useCarousel()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
data-slot="carousel-next"
|
||||||
|
variant={variant}
|
||||||
|
size={size}
|
||||||
|
className={cn(
|
||||||
|
"absolute size-8 rounded-full",
|
||||||
|
orientation === "horizontal"
|
||||||
|
? "top-1/2 -right-12 -translate-y-1/2"
|
||||||
|
: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
disabled={!canScrollNext}
|
||||||
|
onClick={scrollNext}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ArrowRight />
|
||||||
|
<span className="sr-only">Next slide</span>
|
||||||
|
</Button>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
type CarouselApi,
|
||||||
|
Carousel,
|
||||||
|
CarouselContent,
|
||||||
|
CarouselItem,
|
||||||
|
CarouselPrevious,
|
||||||
|
CarouselNext,
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
import * as React from "react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
|
||||||
|
return (
|
||||||
|
<input
|
||||||
|
type={type}
|
||||||
|
data-slot="input"
|
||||||
|
className={cn(
|
||||||
|
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||||
|
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
||||||
|
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Input }
|
||||||
|
|
@ -0,0 +1,168 @@
|
||||||
|
import * as React from "react"
|
||||||
|
import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
|
||||||
|
import { cva } from "class-variance-authority"
|
||||||
|
import { ChevronDownIcon } from "lucide-react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function NavigationMenu({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
viewport = true,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
|
||||||
|
viewport?: boolean
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<NavigationMenuPrimitive.Root
|
||||||
|
data-slot="navigation-menu"
|
||||||
|
data-viewport={viewport}
|
||||||
|
className={cn(
|
||||||
|
"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
{viewport && <NavigationMenuViewport />}
|
||||||
|
</NavigationMenuPrimitive.Root>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function NavigationMenuList({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
|
||||||
|
return (
|
||||||
|
<NavigationMenuPrimitive.List
|
||||||
|
data-slot="navigation-menu-list"
|
||||||
|
className={cn(
|
||||||
|
"group flex flex-1 list-none items-center justify-center gap-1",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function NavigationMenuItem({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
|
||||||
|
return (
|
||||||
|
<NavigationMenuPrimitive.Item
|
||||||
|
data-slot="navigation-menu-item"
|
||||||
|
className={cn("relative", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const navigationMenuTriggerStyle = cva(
|
||||||
|
"group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
|
||||||
|
)
|
||||||
|
|
||||||
|
function NavigationMenuTrigger({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
|
||||||
|
return (
|
||||||
|
<NavigationMenuPrimitive.Trigger
|
||||||
|
data-slot="navigation-menu-trigger"
|
||||||
|
className={cn(navigationMenuTriggerStyle(), "group", className)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}{" "}
|
||||||
|
<ChevronDownIcon
|
||||||
|
className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
</NavigationMenuPrimitive.Trigger>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function NavigationMenuContent({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
|
||||||
|
return (
|
||||||
|
<NavigationMenuPrimitive.Content
|
||||||
|
data-slot="navigation-menu-content"
|
||||||
|
className={cn(
|
||||||
|
"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
|
||||||
|
"group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function NavigationMenuViewport({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"absolute top-full left-0 isolate z-50 flex justify-center"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<NavigationMenuPrimitive.Viewport
|
||||||
|
data-slot="navigation-menu-viewport"
|
||||||
|
className={cn(
|
||||||
|
"origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function NavigationMenuLink({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
|
||||||
|
return (
|
||||||
|
<NavigationMenuPrimitive.Link
|
||||||
|
data-slot="navigation-menu-link"
|
||||||
|
className={cn(
|
||||||
|
"data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function NavigationMenuIndicator({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
|
||||||
|
return (
|
||||||
|
<NavigationMenuPrimitive.Indicator
|
||||||
|
data-slot="navigation-menu-indicator"
|
||||||
|
className={cn(
|
||||||
|
"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
|
||||||
|
</NavigationMenuPrimitive.Indicator>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
NavigationMenu,
|
||||||
|
NavigationMenuList,
|
||||||
|
NavigationMenuItem,
|
||||||
|
NavigationMenuContent,
|
||||||
|
NavigationMenuTrigger,
|
||||||
|
NavigationMenuLink,
|
||||||
|
NavigationMenuIndicator,
|
||||||
|
NavigationMenuViewport,
|
||||||
|
navigationMenuTriggerStyle,
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import * as SeparatorPrimitive from "@radix-ui/react-separator"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function Separator({
|
||||||
|
className,
|
||||||
|
orientation = "horizontal",
|
||||||
|
decorative = true,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
|
||||||
|
return (
|
||||||
|
<SeparatorPrimitive.Root
|
||||||
|
data-slot="separator"
|
||||||
|
decorative={decorative}
|
||||||
|
orientation={orientation}
|
||||||
|
className={cn(
|
||||||
|
"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Separator }
|
||||||
|
|
@ -0,0 +1,139 @@
|
||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import * as SheetPrimitive from "@radix-ui/react-dialog"
|
||||||
|
import { XIcon } from "lucide-react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
|
||||||
|
return <SheetPrimitive.Root data-slot="sheet" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetTrigger({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
|
||||||
|
return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetClose({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SheetPrimitive.Close>) {
|
||||||
|
return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetPortal({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
|
||||||
|
return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetOverlay({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
|
||||||
|
return (
|
||||||
|
<SheetPrimitive.Overlay
|
||||||
|
data-slot="sheet-overlay"
|
||||||
|
className={cn(
|
||||||
|
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetContent({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
side = "right",
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SheetPrimitive.Content> & {
|
||||||
|
side?: "top" | "right" | "bottom" | "left"
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<SheetPortal>
|
||||||
|
<SheetOverlay />
|
||||||
|
<SheetPrimitive.Content
|
||||||
|
data-slot="sheet-content"
|
||||||
|
className={cn(
|
||||||
|
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
|
||||||
|
side === "right" &&
|
||||||
|
"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
|
||||||
|
side === "left" &&
|
||||||
|
"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
|
||||||
|
side === "top" &&
|
||||||
|
"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
|
||||||
|
side === "bottom" &&
|
||||||
|
"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
|
||||||
|
<XIcon className="size-4" />
|
||||||
|
<span className="sr-only">Close</span>
|
||||||
|
</SheetPrimitive.Close>
|
||||||
|
</SheetPrimitive.Content>
|
||||||
|
</SheetPortal>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="sheet-header"
|
||||||
|
className={cn("flex flex-col gap-1.5 p-4", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="sheet-footer"
|
||||||
|
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetTitle({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SheetPrimitive.Title>) {
|
||||||
|
return (
|
||||||
|
<SheetPrimitive.Title
|
||||||
|
data-slot="sheet-title"
|
||||||
|
className={cn("text-foreground font-semibold", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetDescription({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SheetPrimitive.Description>) {
|
||||||
|
return (
|
||||||
|
<SheetPrimitive.Description
|
||||||
|
data-slot="sheet-description"
|
||||||
|
className={cn("text-muted-foreground text-sm", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Sheet,
|
||||||
|
SheetTrigger,
|
||||||
|
SheetClose,
|
||||||
|
SheetContent,
|
||||||
|
SheetHeader,
|
||||||
|
SheetFooter,
|
||||||
|
SheetTitle,
|
||||||
|
SheetDescription,
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
import * as React from "react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
|
||||||
|
return (
|
||||||
|
<textarea
|
||||||
|
data-slot="textarea"
|
||||||
|
className={cn(
|
||||||
|
"border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Textarea }
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
import { defineConfig, globalIgnores } from "eslint/config";
|
||||||
|
import nextVitals from "eslint-config-next/core-web-vitals";
|
||||||
|
import nextTs from "eslint-config-next/typescript";
|
||||||
|
|
||||||
|
const eslintConfig = defineConfig([
|
||||||
|
...nextVitals,
|
||||||
|
...nextTs,
|
||||||
|
// Override default ignores of eslint-config-next.
|
||||||
|
globalIgnores([
|
||||||
|
// Default ignores of eslint-config-next:
|
||||||
|
".next/**",
|
||||||
|
"out/**",
|
||||||
|
"build/**",
|
||||||
|
"next-env.d.ts",
|
||||||
|
]),
|
||||||
|
]);
|
||||||
|
|
||||||
|
export default eslintConfig;
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
import { clsx, type ClassValue } from "clsx"
|
||||||
|
import { twMerge } from "tailwind-merge"
|
||||||
|
|
||||||
|
export function cn(...inputs: ClassValue[]) {
|
||||||
|
return twMerge(clsx(inputs))
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
/** @type {import('next').NextConfig} */
|
||||||
|
const nextConfig = {
|
||||||
|
output: 'export',
|
||||||
|
basePath: '',
|
||||||
|
trailingSlash: true, // 添加这一行
|
||||||
|
images: {
|
||||||
|
unoptimized: true,
|
||||||
|
remotePatterns: [
|
||||||
|
{
|
||||||
|
protocol: 'https',
|
||||||
|
hostname: '**',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
protocol: 'http',
|
||||||
|
hostname: 'localhost',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = nextConfig
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
/*
|
||||||
|
* @LastEditors: whitechiina 1293616053@qq.com
|
||||||
|
* @LastEditTime: 2026-07-15 18:04:31
|
||||||
|
*/
|
||||||
|
import type { NextConfig } from "next";
|
||||||
|
|
||||||
|
const nextConfig: NextConfig = {
|
||||||
|
output: "export",
|
||||||
|
trailingSlash: true // 添加这一行
|
||||||
|
};
|
||||||
|
|
||||||
|
export default nextConfig;
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,40 @@
|
||||||
|
{
|
||||||
|
"name": "baima-home",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "next dev",
|
||||||
|
"build": "next build",
|
||||||
|
"start": "next start",
|
||||||
|
"lint": "next lint"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@radix-ui/react-accordion": "^1.2.12",
|
||||||
|
"@radix-ui/react-dialog": "^1.1.15",
|
||||||
|
"@radix-ui/react-navigation-menu": "^1.2.14",
|
||||||
|
"@radix-ui/react-separator": "^1.1.8",
|
||||||
|
"@radix-ui/react-slot": "^1.2.4",
|
||||||
|
"class-variance-authority": "^0.7.1",
|
||||||
|
"clsx": "^2.1.1",
|
||||||
|
"embla-carousel-react": "^8.6.0",
|
||||||
|
"framer-motion": "^12.26.2",
|
||||||
|
"lucide-react": "^0.562.0",
|
||||||
|
"next": "16.1.1",
|
||||||
|
"react": "19.2.3",
|
||||||
|
"react-dom": "19.2.3",
|
||||||
|
"tailwind-merge": "^3.4.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@tailwindcss/postcss": "^4",
|
||||||
|
"@types/node": "^20",
|
||||||
|
"@types/react": "^19",
|
||||||
|
"@types/react-dom": "^19",
|
||||||
|
"dotenv": "^17.2.3",
|
||||||
|
"eslint": "^9",
|
||||||
|
"eslint-config-next": "16.1.1",
|
||||||
|
"tailwindcss": "^4",
|
||||||
|
"tw-animate-css": "^1.4.0",
|
||||||
|
"typescript": "^5",
|
||||||
|
"vercel": "^50.4.4"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
const config = {
|
||||||
|
plugins: {
|
||||||
|
"@tailwindcss/postcss": {},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default config;
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 178 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
|
||||||
|
After Width: | Height: | Size: 391 B |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
|
||||||
|
After Width: | Height: | Size: 1.0 KiB |
|
|
@ -0,0 +1,8 @@
|
||||||
|
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<defs>
|
||||||
|
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
|
||||||
|
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="white" stroke-width="0.5" stroke-opacity="0.3"/>
|
||||||
|
</pattern>
|
||||||
|
</defs>
|
||||||
|
<rect width="100%" height="100%" fill="url(#grid)" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 345 B |
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
|
||||||
|
After Width: | Height: | Size: 128 B |
Binary file not shown.
|
After Width: | Height: | Size: 407 KiB |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
|
||||||
|
After Width: | Height: | Size: 385 B |
|
|
@ -0,0 +1,34 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2017",
|
||||||
|
"lib": ["dom", "dom.iterable", "esnext"],
|
||||||
|
"allowJs": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"strict": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"module": "esnext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
"incremental": true,
|
||||||
|
"plugins": [
|
||||||
|
{
|
||||||
|
"name": "next"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"next-env.d.ts",
|
||||||
|
"**/*.ts",
|
||||||
|
"**/*.tsx",
|
||||||
|
".next/types/**/*.ts",
|
||||||
|
".next/dev/types/**/*.ts",
|
||||||
|
"**/*.mts"
|
||||||
|
],
|
||||||
|
"exclude": ["node_modules"]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
{
|
||||||
|
"buildCommand": "npm run build",
|
||||||
|
"outputDirectory": ".next",
|
||||||
|
"framework": "nextjs"
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue