novalon/novalon-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: add light/dark mode support with Tailwind dark: prefix

Browse Source
This commit is contained in:
张翔
2026-02-21 23:32:47 +08:00
parent 1d7872c8cc
commit 15e17a8f20
13 changed files with 2581 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/plans/2026-02-21-website-redesign-design.md
+693
View File
@@ -0,0 +1,693 @@
# Novalon 官网重新设计方案
**设计日期：** 2026-02-21
**设计风格：** 极简科技风
**项目目标：** 品牌形象升级 + 用户体验优化
---
## 一、项目背景
### 当前状态
- 技术栈：Next.js 16 + React 19 + TypeScript + Tailwind CSS v4
- 现有页面：首页包含13个section，信息密度较高
- 目标用户：混合群体（企业决策者、技术人员、业务人员）
### 设计目标
1. **品牌形象升级** - 打造科技创新与前沿感的品牌调性
2. **用户体验优化** - 全方位改进导航、内容展示、交互体验和移动端适配
---
## 二、整体架构与导航结构
### 信息架构优化
**一级导航（顶部固定）：**
- 首页
- 产品（下拉：ERP、CRM、OA、BI、IoT）
- 解决方案（下拉：按行业、按场景）
- 案例
- 关于我们
- 联系我们
**首页结构精简（从13个section减少到8个）：**
1. **Hero区域** - 核心价值主张 + 动态粒子背景
2. **核心优势** - 4个关键数据指标（动态计数）
3. **产品矩阵** - 卡片式展示核心产品
4. **解决方案** - 行业/场景分类展示
5. **成功案例** - 精选3个典型案例
6. **技术实力** - 技术栈展示
7. **客户评价** - 轮播式testimonial
8. **CTA区域** - 行动号召
**优化效果：**
- 减少到8个核心section，提升信息聚焦度
- 下拉菜单提供更清晰的信息层级
- 每个section都有明确的用户目标和转化路径
---
## 三、视觉设计系统
### 色彩系统
**主色调：**
- 深色背景：`#0A0A0A`（主背景）、`#1A1A1A`（次级背景）、`#2A2A2A`（卡片背景）
- 科技蓝：`#00D9FF`（主要强调色、CTA按钮）
- 紫色：`#A855F7`（次要强调色、装饰元素）
- 青色：`#06B6D4`（辅助色、图标）
**文字色彩：**
- 主文字：`#FFFFFF`（白色）
- 次级文字：`#A0A0A0`（灰色）
- 禁用文字：`#606060`（深灰）
**渐变色：**
- 主渐变：`linear-gradient(135deg, #00D9FF 0%, #A855F7 100%)`
- 背景渐变：`linear-gradient(180deg, #0A0A0A 0%, #1A1A1A 100%)`
- 光晕效果：`radial-gradient(circle, #00D9FF20 0%, transparent 70%)`
### 字体系统
**主字体：**
- 标题：`Inter` 或 `SF Pro Display`（现代无衬线字体）
- 正文：`Inter`（高可读性）
- 代码/数据：`JetBrains Mono`（等宽字体）
**字号规范：**
- H1：`64px`（Hero标题）
- H2：`48px`（Section标题）
- H3：`32px`（卡片标题）
- Body：`16px`（正文）
- Small：`14px`（辅助文字）
### 间距系统
基于 8px 网格：
- xs：`4px`
- sm：`8px`
- md：`16px`
- lg：`24px`
- xl：`32px`
- 2xl：`48px`
- 3xl：`64px`
### 圆角系统
- 小圆角：`8px`（按钮、标签）
- 中圆角：`12px`（卡片）
- 大圆角：`16px`（大卡片、容器）
- 全圆角：`9999px`（徽章、标签）
---
## 四、核心组件设计
### 1. Hero 区域设计
**布局：**
- 全屏高度（100vh）
- 左侧：核心文案 + CTA按钮
- 右侧：动态粒子效果 + 抽象几何动画
- 底部：滚动提示动画
**视觉元素：**
- 背景：深色渐变 + 微妙的网格线
- 粒子效果：蓝色和紫色粒子缓慢漂浮
- 光晕：科技蓝的径向渐变光晕
- 文字：大标题 + 副标题 + 两个CTA按钮（主次分明）
**动效：**
- 文字淡入上移（staggered animation）
- 粒子持续运动
- 按钮悬停发光效果
- 滚动提示上下浮动
### 2. 导航栏设计
**样式：**
- 固定顶部，滚动时背景变深（`backdrop-blur`）
- Logo左侧，导航居中，CTA按钮右侧
- 高度：`64px`（桌面）、`56px`（移动端）
**交互：**
- 下拉菜单：悬停展开，带淡入动画
- 移动端：汉堡菜单，全屏抽屉式导航
- 当前页面：底部蓝色下划线指示
**特殊效果：**
- Logo悬停：微妙的发光效果
- 导航项悬停：文字颜色变科技蓝
- CTA按钮：渐变背景 + 悬停放大
### 3. 产品卡片设计
**布局：**
- 网格布局：桌面3列、平板2列、移动端1列
- 卡片高度：固定或自适应内容
- 卡片间距：`24px`
**卡片结构：**
- 顶部：产品图标/图片（带渐变边框）
- 中部：产品名称 + 简短描述
- 底部：核心特性标签 + "了解更多"链接
**视觉效果：**
- 背景：`#2A2A2A`，悬停时变亮
- 边框：1px灰色边框，悬停时科技蓝边框
- 阴影：悬停时添加发光阴影
- 图标：科技蓝或紫色渐变
**动效：**
- 悬停：卡片上移 `8px` + 边框发光
- 点击：轻微缩放反馈
- 加载：骨架屏或淡入动画
### 4. 数据可视化组件（使用 AntV）
**技术选型：**
- **@antv/g2** - 基础图表（折线图、柱状图、饼图等）
- **@antv/g6** - 关系图、拓扑图
- **@antv/l7** - 地理空间数据可视化
- **@antv/x6** - 流程图、架构图编辑
**统计数字展示：**
- 大号数字：`48-64px`，科技蓝色
- 动态计数动画：从0到目标值
- 标签：灰色小号文字
- 布局：4列网格，每项居中对齐
**图表配置：**
- 主题：深色主题定制
- 配色：科技蓝 `#00D9FF`、紫色 `#A855F7`、青色 `#06B6D4`
- 背景：透明或半透明深色
- 网格线：淡灰色，降低视觉干扰
- 动画：流畅的入场动画
**交互特性：**
- 悬停：显示详细数据 tooltip
- 点击：可配置的交互事件
- 缩放：支持图表缩放（如需要）
- 响应式：自适应容器大小
---
## 五、交互体验与动效设计
### 1. 页面过渡与滚动体验
**页面加载：**
- 首屏优先加载策略
- 骨架屏占位，提升感知速度
- 渐进式图片加载（blur-up 技术）
- 关键CSS内联，非关键CSS延迟加载
**滚动体验：**
- 平滑滚动：`scroll-behavior: smooth`
- 视差效果：背景元素随滚动缓慢移动
- 渐入动画：元素进入视口时触发淡入上移
- 进度指示：顶部细线显示页面滚动进度
**Section切换：**
- 每个Section进入视口时触发动画
- 标题先出现，内容依次淡入
- 数字计数动画在可见时触发
- 图表在可见时才开始渲染
### 2. 微交互设计
**按钮交互：**
- 悬停：背景渐变流动 + 轻微放大（scale 1.05）
- 点击：缩小反馈（scale 0.95）+ 波纹效果
- 加载中：旋转图标 + 禁用状态
- 成功/失败：短暂的颜色变化反馈
**表单交互：**
- 输入框聚焦：边框变科技蓝 + 外发光
- 实时验证：输入时显示验证状态
- 错误提示：红色边框 + 错误信息淡入
- 提交成功：绿色勾选动画 + 成功消息
**卡片交互：**
- 悬停：上移 + 边框发光 + 阴影增强
- 点击：轻微缩放 + 跳转或展开详情
- 加载：骨架屏动画
- 收藏/分享：图标变化动画
### 3. 动画效果库
**入场动画：**
- 淡入上移：`fade-in-up`（最常用）
- 淡入缩放：`fade-in-scale`（适合卡片）
- 从左滑入：`slide-in-left`（适合侧边内容）
- 从右滑入：`slide-in-right`（适合侧边内容）
**持续动画：**
- 粒子漂浮：随机运动轨迹
- 光晕脉动：缓慢的透明度变化
- 渐变流动：背景渐变位置移动
- 图标旋转：加载状态的旋转动画
**退出动画：**
- 淡出：`fade-out`
- 缩小淡出：`scale-out-fade`
- 向上滑出：`slide-out-up`
**动画时长规范：**
- 快速：`150ms`（按钮反馈、状态切换）
- 标准：`300ms`（大多数过渡效果）
- 慢速：`500ms`（页面过渡、大型动画）
- 超慢：`1000ms+`（特殊强调效果）
### 4. 性能优化策略
**动画性能：**
- 优先使用 `transform` 和 `opacity`（GPU加速）
- 避免动画 `width`、`height`、`top`、`left`
- 使用 `will-change` 提示浏览器优化
- 复杂动画使用 `requestAnimationFrame`
**移动端优化：**
- 减少移动端动画复杂度
- 使用 `prefers-reduced-motion` 媒体查询
- 触摸事件优化（防止滚动卡顿）
- 移动端禁用某些装饰性动画
**加载优化：**
- 动画库按需加载（如 `framer-motion`）
- 图片懒加载 + WebP格式
- 代码分割，按路由加载
- 预加载关键资源
---
## 六、响应式设计与移动端体验
### 1. 响应式断点系统
**断点定义：**
- 移动端：`< 640px`（sm）
- 平板：`640px - 1024px`（md）
- 桌面：`1024px - 1280px`（lg）
- 大屏：`> 1280px`（xl）
**布局策略：**
- 移动优先设计
- 弹性网格系统
- 内容优先级排序
- 触摸友
好的交互区域
### 2. 移动端特殊设计
**导航栏：**
- 高度：`56px`
- Logo居左，汉堡菜单居右
- 点击展开全屏抽屉式导航
- 抽屉内容：垂直排列的导航项 + CTA按钮
- 关闭按钮：右上角X图标
**Hero区域：**
- 高度：`100vh`（移动端可能更高）
- 文案居中或左对齐
- 标题字号：`36-40px`（缩小但仍突出）
- 粒子效果：减少粒子数量，降低性能消耗
- CTA按钮：垂直堆叠，全宽
**内容区域：**
- 单列布局为主
- 卡片全宽显示
- 图片：自适应宽度，保持比例
- 文字：行高适当增加，提升可读性
**交互优化：**
- 最小触摸区域：`44px × 44px`
- 按钮全宽或大尺寸
- 表单输入框：大尺寸，易于点击
- 滑动操作：支持手势滑动（如轮播图）
### 3. 平板端设计
**布局调整：**
- 2列网格布局
- 导航栏：完整导航或简化版
- Hero区域：文案左侧，视觉元素右侧
- 卡片：2列排列
**交互优化：**
- 支持触摸和鼠标操作
- 下拉菜单：点击触发（非悬停）
- 表单：优化触摸输入体验
### 4. 桌面端设计
**布局优化：**
- 3列或4列网格
- 完整导航栏 + 下拉菜单
- Hero区域：左右分栏，视觉平衡
- 卡片：3列排列，悬停效果丰富
**交互增强：**
- 悬停效果：丰富的视觉反馈
- 键盘导航：支持Tab键导航
- 快捷键：如搜索（Cmd/Ctrl + K）
### 5. 性能与可访问性
**移动端性能优化：**
- 图片：使用 `srcset` 提供不同尺寸
- 动画：减少复杂动画，优先性能
- 字体：使用 `font-display: swap`
- 懒加载：图片和组件按需加载
**可访问性（A11y）：**
- 色彩对比度：符合WCAG 2.1 AA标准
- 键盘导航：所有交互元素可访问
- 屏幕阅读器：语义化HTML + ARIA标签
- 焦点管理：清晰的焦点指示器
- 减少动画：尊重 `prefers-reduced-motion`
**触摸体验：**
- 防止误触：按钮间距合理
- 触摸反馈：即时的视觉反馈
- 滚动优化：防止滚动卡顿
- 手势支持：滑动、缩放等
### 6. 特殊场景处理
**横屏模式：**
- 检测横屏，调整布局
- Hero区域：可能需要重新排版
- 导航：考虑底部导航栏
**小屏设备：**
- 内容优先级排序
- 隐藏次要信息
- 简化视觉元素
**大屏设备：**
- 最大内容宽度：`1440px` 或 `1600px`
- 内容居中，两侧留白
- 充分利用空间，展示更多信息
---
## 七、技术实现方案
### 1. 技术栈确认与增强
**现有技术栈：**
- Next.js 16.1.6（App Router）
- React 19.2.3
- TypeScript 5
- Tailwind CSS v4
- shadcn/ui + Radix UI
**新增依赖：**
- **动画库：** `framer-motion` - 流畅的动画效果
- **图表库：** `@antv/g2` - 数据可视化
- **图标库：** `lucide-react`（已有）
- **工具库：**
- `clsx` + `tailwind-merge`（已有）
- `class-variance-authority` - CVA变体管理
- `zod` - 数据验证（已有）
**开发工具：**
- ESLint + Prettier - 代码规范
- Husky + lint-staged - Git hooks
- Commitlint - 提交信息规范
### 2. 组件库架构
**目录结构：**
```
src/
├── components/
│ ├── ui/ # 基础UI组件
│ │ ├── button.tsx
│ │ ├── card.tsx
│ │ ├── input.tsx
│ │ └── ...
│ ├── layout/ # 布局组件
│ │ ├── header.tsx
│ │ ├── footer.tsx
│ │ ├── mobile-menu.tsx
│ │ └── ...
│ ├── sections/ # 页面区块组件
│ │ ├── hero-section.tsx
│ │ ├── products-section.tsx
│ │ └── ...
│ ├── effects/ # 特效组件
│ │ ├── particle-background.tsx
│ │ ├── glow-effect.tsx
│ │ └── ...
│ └── charts/ # 图表组件
│ ├── line-chart.tsx
│ ├── bar-chart.tsx
│ └── ...
├── hooks/ # 自定义Hooks
│ ├── use-animation.ts
│ ├── use-intersection-observer.ts
│ └── ...
├── lib/ # 工具库
│ ├── utils.ts
│ ├── constants.ts
│ ├── theme.ts
│ └── ...
└── styles/ # 样式文件
├── globals.css
├── animations.css
└── ...
```
### 3. 样式系统设计
**Tailwind配置扩展：**
```typescript
// tailwind.config.ts
export default {
theme: {
extend: {
colors: {
// 深色主题
dark: {
DEFAULT: '#0A0A0A',
secondary: '#1A1A1A',
tertiary: '#2A2A2A',
},
// 科技色
tech: {
blue: '#00D9FF',
purple: '#A855F7',
cyan: '#06B6D4',
},
},
fontFamily: {
sans: ['Inter', 'sans-serif'],
mono: ['JetBrains Mono', 'monospace'],
},
animation: {
'fade-in-up': 'fadeInUp 0.6s ease-out',
'fade-in-scale': 'fadeInScale 0.6s ease-out',
'glow': 'glow 2s ease-in-out infinite',
},
keyframes: {
fadeInUp: {
'0%': { opacity: '0', transform: 'translateY(20px)' },
'100%': { opacity: '1', transform: 'translateY(0)' },
},
fadeInScale: {
'0%': { opacity: '0', transform: 'scale(0.95)' },
'100%': { opacity: '1', transform: 'scale(1)' },
},
glow: {
'0%, 100%': { boxShadow: '0 0 20px rgba(0, 217, 255, 0.3)' },
'50%': { boxShadow: '0 0 40px rgba(0, 217, 255, 0.6)' },
},
},
},
},
}
```
**CSS变量系统：**
```css
/* globals.css */
:root {
--color-dark: #0A0A0A;
--color-dark-secondary: #1A1A1A;
--color-dark-tertiary: #2A2A2A;
--color-tech-blue: #00D9FF;
--color-tech-purple: #A855F7;
--color-tech-cyan: #06B6D4;
--gradient-primary: linear-gradient(135deg, #00D9FF 0%, #A855F7 100%);
--gradient-dark: linear-gradient(180deg, #0A0A0A 0%, #1A1A1A 100%);
}
```
### 4. 开发流程与规范
**Git工作流：**
- 分支策略：`main`（生产）、`develop`（开发）、`feature/*`（功能）
- 提交规范：`feat:`、`fix:`、`style:`、`refactor:`、`docs:`
- Code Review：必须经过至少一人审查
**代码规范：**
- ESLint配置：基于 `eslint-config-next`
- Prettier配置：统一格式化规则
- TypeScript严格模式
- 组件命名：PascalCase
- 文件命名：kebab-case
**开发流程：**
1. 从 `develop` 创建 `feature` 分支
2. 开发 + 单元测试
3. 提交PR + Code Review
4. 合并到 `develop`
5. 测试通过后合并到 `main`
6. 自动部署
### 5. 测试策略
**单元测试：**
- 框架：Vitest + React Testing Library
- 覆盖率目标：≥80%
- 重点：组件逻辑、Hooks、工具函数
**集成测试：**
- 测试关键用户流程
- API集成测试
- 状态管理测试
**E2E测试：**
- 框架：Playwright（已有）
- 重点：核心业务流程
- 视觉回归测试
**性能测试：**
- Lighthouse评分：≥90
- 首屏加载时间：<2s
- 交互响应时间：<100ms
### 6. 部署与监控
**部署方案：**
- 静态导出：`next build` + `next export`
- 托管：Vercel / 阿里云OSS + CDN
- CI/CD：GitHub Actions
**监控与优化：**
- 性能监控：Web Vitals
- 错误追踪：Sentry
- 用户行为：Google Analytics
- SEO优化：meta标签、sitemap、robots.txt
---
## 八、实施计划
### 阶段一：基础架构（1-2周）
- 设计系统搭建（色彩、字体、间距）
- 基础UI组件库开发
- 布局组件重构（Header、Footer）
- 响应式框架搭建
### 阶段二：核心页面（2-3周）
- Hero区域重构
- 产品展示页面
- 解决方案页面
- 案例展示页面
### 阶段三：交互优化（1-2周）
- 动画效果实现
- 微交互优化
- 性能优化
- 可访问性改进
### 阶段四：测试与上线（1周）
- 全面测试
- 性能优化
- 部署上线
- 监控配置
**总工期：5-8周**
---
## 九、设计决策记录
### 为什么选择深色科技风？
1. 符合科技创新与前沿感的品牌定位
2. 顶级科技公司的主流选择（Apple、Microsoft、GitHub、Vercel）
3. 对企业决策者显得更加专业、高端、可信赖
4. 深色背景配合霓虹色点缀能更好突出关键信息
5. 移动端更受欢迎（省电、护眼）
### 为什么选择 AntV？
1. 完善的中文文档和社区支持
2. 企业级稳定性，适合金融场景
3. 丰富的图表类型和交互能力
4. 良好的性能表现
### 为什么精简到8个section？
1. 提升信息聚焦度，避免用户认知负担
2. 每个section都有明确的用户目标和转化路径
3. 更好的性能表现（减少渲染内容）
4. 更清晰的信息层级
---
## 十、下一步行动
1. ✅ 设计方案已完成并文档化
2. ⏭️ 准备进入实施阶段
3. ⏭️ 创建详细的实施计划（使用 `writing-plans` skill）
4. ⏭️ 创建隔离的开发环境（使用 `using-git-worktrees` skill）
---
**设计者：** AI Assistant
**审核者：** 待定
**最后更新：** 2026-02-21
docs/plans/2026-02-21-website-redesign.md
+1800
View File
File diff suppressed because it is too large Load Diff
src/app/(marketing)/page.tsx
+1 -1
View File
@@ -11,7 +11,7 @@ import { ContactSection } from "@/components/sections/contact-section";
export default function HomePage() {
return (
<main className="min-h-screen bg-[var(--color-bg-primary)]">
<main className="min-h-screen bg-white dark:bg-[var(--color-bg-primary)]">
<Header />
<HeroSection />
<ServicesSection />
src/components/layout/footer.tsx
+16 -15
View File
@@ -4,14 +4,15 @@ import { COMPANY_INFO, NAVIGATION } from '@/lib/constants';
export function Footer() {
return (
<footer className="bg-[var(--color-bg-secondary)] border-t border-gray-800">
<footer className="bg-gray-100 dark:bg-[var(--color-bg-secondary)] border-t border-gray-200 dark:border-gray-800">
<div className="container-custom py-16">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
<div className="lg:col-span-1">
<div className="flex items-center mb-6">
<img src="/logo-white.svg" alt="四川睿新致远科技有限公司" className="h-12 w-auto" />
<img src="/logo.svg" alt="四川睿新致远科技有限公司" className="h-12 w-auto dark:hidden" />
<img src="/logo-white.svg" alt="四川睿新致远科技有限公司" className="h-12 w-auto hidden dark:block" />
</div>
<p className="text-gray-400 text-sm leading-relaxed mb-6">
<p className="text-gray-600 dark:text-gray-400 text-sm leading-relaxed mb-6">
{COMPANY_INFO.description}
</p>
<div className="flex flex-col items-start gap-3">
@@ -27,13 +28,13 @@ export function Footer() {
</div>
<div>
<h3 className="font-semibold text-lg mb-6 text-white">快速链接</h3>
<h3 className="font-semibold text-lg mb-6 text-gray-900 dark:text-white">快速链接</h3>
<ul className="space-y-3">
{NAVIGATION.map((item) => (
<li key={item.id}>
<a
href={item.href}
className="text-gray-400 hover:text-[var(--color-tech-blue)] transition-colors"
className="text-gray-600 dark:text-gray-400 hover:text-[var(--color-tech-blue)] transition-colors"
>
{item.label}
</a>
@@ -43,25 +44,25 @@ export function Footer() {
</div>
<div>
<h3 className="font-semibold text-lg mb-6 text-white">服务项目</h3>
<h3 className="font-semibold text-lg mb-6 text-gray-900 dark:text-white">服务项目</h3>
<ul className="space-y-3">
<li>
<a href="#services" className="text-gray-400 hover:text-[var(--color-tech-blue)] transition-colors">
<a href="#services" className="text-gray-600 dark:text-gray-400 hover:text-[var(--color-tech-blue)] transition-colors">
软件开发
</a>
</li>
<li>
<a href="#services" className="text-gray-400 hover:text-[var(--color-tech-blue)] transition-colors">
<a href="#services" className="text-gray-600 dark:text-gray-400 hover:text-[var(--color-tech-blue)] transition-colors">
云服务
</a>
</li>
<li>
<a href="#services" className="text-gray-400 hover:text-[var(--color-tech-blue)] transition-colors">
<a href="#services" className="text-gray-600 dark:text-gray-400 hover:text-[var(--color-tech-blue)] transition-colors">
数据分析
</a>
</li>
<li>
<a href="#services" className="text-gray-400 hover:text-[var(--color-tech-blue)] transition-colors">
<a href="#services" className="text-gray-600 dark:text-gray-400 hover:text-[var(--color-tech-blue)] transition-colors">
信息安全
</a>
</li>
@@ -69,25 +70,25 @@ export function Footer() {
</div>
<div>
<h3 className="font-semibold text-lg mb-6 text-white">联系方式</h3>
<h3 className="font-semibold text-lg mb-6 text-gray-900 dark:text-white">联系方式</h3>
<ul className="space-y-4">
<li className="flex items-start gap-3">
<MapPin className="w-5 h-5 text-[var(--color-tech-blue)] mt-0.5" />
<span className="text-gray-400">{COMPANY_INFO.address}</span>
<span className="text-gray-600 dark:text-gray-400">{COMPANY_INFO.address}</span>
</li>
<li className="flex items-center gap-3">
<Phone className="w-5 h-5 text-[var(--color-tech-blue)]" />
<span className="text-gray-400">{COMPANY_INFO.phone}</span>
<span className="text-gray-600 dark:text-gray-400">{COMPANY_INFO.phone}</span>
</li>
<li className="flex items-center gap-3">
<Mail className="w-5 h-5 text-[var(--color-tech-blue)]" />
<span className="text-gray-400">{COMPANY_INFO.email}</span>
<span className="text-gray-600 dark:text-gray-400">{COMPANY_INFO.email}</span>
</li>
</ul>
</div>
</div>
<div className="border-t border-gray-800 mt-12 pt-8">
<div className="border-t border-gray-200 dark:border-gray-800 mt-12 pt-8">
<div className="flex flex-col md:flex-row justify-between items-center gap-4">
<p className="text-gray-500 text-sm">
© {new Date().getFullYear()} {COMPANY_INFO.name}. All rights reserved.
src/components/layout/header.tsx
+6 -6
View File
@@ -64,7 +64,7 @@ export function Header() {
fixed top-0 left-0 right-0 z-50
transition-all duration-300 ease-out
${isScrolled
? 'bg-[var(--color-bg-primary)]/95 backdrop-blur-md border-b border-gray-800 shadow-lg shadow-black/20'
? 'bg-white/95 dark:bg-[var(--color-bg-primary)]/95 backdrop-blur-md border-b border-gray-200 dark:border-gray-800 shadow-lg shadow-gray-200/50 dark:shadow-black/20'
: 'bg-transparent'
}
`}
@@ -94,7 +94,7 @@ export function Header() {
transition-all duration-300
${activeSection === item.id.replace('#', '')
? 'text-[var(--color-tech-blue)]'
: 'text-gray-400 hover:text-[var(--color-tech-blue)]'
: 'text-gray-600 dark:text-gray-400 hover:text-[var(--color-tech-blue)]'
}
`}
>
@@ -138,7 +138,7 @@ export function Header() {
</div>
<button
className="md:hidden p-2 -mr-2 text-gray-400 hover:text-[var(--color-tech-blue)] transition-colors"
className="md:hidden p-2 -mr-2 text-gray-600 dark:text-gray-400 hover:text-[var(--color-tech-blue)] transition-colors"
onClick={() => setIsOpen(!isOpen)}
>
{isOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
@@ -164,7 +164,7 @@ export function Header() {
animate={{ y: 0, opacity: 1 }}
exit={{ y: -20, opacity: 0 }}
transition={{ type: "spring", stiffness: 300, damping: 30 }}
className="absolute top-16 left-0 right-0 bg-[var(--color-bg-secondary)] border-b border-gray-800 shadow-xl"
className="absolute top-16 left-0 right-0 bg-white dark:bg-[var(--color-bg-secondary)] border-b border-gray-200 dark:border-gray-800 shadow-xl"
>
<nav className="container-wide py-4">
{NAVIGATION.map((item, index) => (
@@ -181,14 +181,14 @@ export function Header() {
border-l-2
${activeSection === item.id.replace('#', '')
? 'text-[var(--color-tech-blue)] border-[var(--color-tech-blue)] bg-[var(--color-tech-blue)]/10'
: 'text-gray-400 border-transparent hover:text-[var(--color-tech-blue)] hover:bg-[var(--color-bg-tertiary)]'
: 'text-gray-600 dark:text-gray-400 border-transparent hover:text-[var(--color-tech-blue)] hover:bg-gray-100 dark:hover:bg-[var(--color-bg-tertiary)]'
}
`}
>
{item.label}
</motion.a>
))}
<div className="mt-4 px-4 pt-4 border-t border-gray-800 space-y-3">
<div className="mt-4 px-4 pt-4 border-t border-gray-200 dark:border-gray-800 space-y-3">
<div className="flex items-center justify-between">
<span className="text-sm text-gray-500">主题模式</span>
<ThemeToggle />
src/components/sections/about-section.tsx
+21 -25
View File
@@ -43,9 +43,8 @@ export function AboutSection() {
const isInView = useInView(ref, { once: true, margin: '-100px' });
return (
<section id="about" className="py-24 bg-[#FAF8F8]" ref={ref}>
<section id="about" className="py-24 bg-gray-50 dark:bg-[var(--color-bg-secondary)]" ref={ref}>
<div className="container-custom">
{/* 头部介绍 */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
@@ -53,25 +52,24 @@ export function AboutSection() {
className="max-w-4xl mx-auto"
>
<div className="text-center mb-16">
<span className="inline-block px-4 py-1.5 rounded-full bg-[#FEF2F4] text-[#C41E3A] text-sm font-medium mb-4">
<span className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-[var(--color-tech-blue)]/30 bg-[var(--color-tech-blue)]/5 text-[var(--color-tech-blue)] text-sm font-medium mb-4">
关于我们
</span>
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-[#1A1A1A] mb-6">
关于 <span className="text-[#C41E3A]">{COMPANY_INFO.shortName}</span>
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-6">
关于 <span className="tech-gradient-text">{COMPANY_INFO.shortName}</span>
</h2>
<p className="text-lg text-[#4A4A4A]">
<p className="text-lg text-gray-600 dark:text-gray-400">
{COMPANY_INFO.slogan}
</p>
</div>
{/* 公司简介 */}
<div className="prose prose-lg max-w-none mb-16">
<h3 className="text-2xl font-bold text-[#1A1A1A] mb-4">公司简介</h3>
<p className="text-[#4A4A4A] mb-6 leading-relaxed">
<h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">公司简介</h3>
<p className="text-gray-600 dark:text-gray-400 mb-6 leading-relaxed">
{COMPANY_INFO.name}成立于{COMPANY_INFO.founded}年1月15日，总部位于{COMPANY_INFO.location}龙泉驿区幸福路12号。
公司专注于信息技术服务与解决方案，致力于为企业提供全方位的数字化转型支持。
</p>
<p className="text-[#4A4A4A] mb-6 leading-relaxed">
<p className="text-gray-600 dark:text-gray-400 mb-6 leading-relaxed">
我们拥有一支经验丰富的技术团队，在软件开发、云计算、数据分析、信息安全等领域具有深厚的技术积累。
公司秉承"专注科技创新，驱动智慧未来"的理念，为客户提供高质量的产品和服务，助力企业在数字经济时代实现转型升级。
</p>
@@ -85,23 +83,22 @@ export function AboutSection() {
className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-16"
>
{STATS.map((stat, idx) => (
<Card key={idx} className="text-center border-[#E8E0E0] bg-white hover:shadow-lg hover:shadow-[#C41E3A]/5 transition-all duration-300 hover:-translate-y-1">
<Card key={idx} className="text-center">
<CardContent className="pt-6">
<div className="text-3xl sm:text-4xl font-bold text-[#C41E3A] mb-2">{stat.value}</div>
<div className="text-sm text-[#6B6B6B]">{stat.label}</div>
<div className="text-3xl sm:text-4xl font-bold tech-gradient-text mb-2">{stat.value}</div>
<div className="text-sm text-gray-600 dark:text-gray-400">{stat.label}</div>
</CardContent>
</Card>
))}
</motion.div>
{/* 企业价值观 */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.6, delay: 0.3 }}
className="mb-16"
>
<h3 className="text-2xl font-bold text-[#1A1A1A] mb-8 text-center">企业价值观</h3>
<h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-8 text-center">企业价值观</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{values.map((value, idx) => (
<motion.div
@@ -109,27 +106,26 @@ export function AboutSection() {
initial={{ opacity: 0, y: 20 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.5, delay: 0.4 + idx * 0.1 }}
className="flex items-start gap-4 p-6 bg-white rounded-xl border border-[#E8E0E0] hover:border-[#C41E3A]/30 hover:shadow-lg hover:shadow-[#C41E3A]/5 transition-all duration-300"
className="flex items-start gap-4 p-6 bg-white dark:bg-[var(--color-bg-secondary)] rounded-xl border border-gray-200 dark:border-gray-800 hover:border-[var(--color-tech-blue)] transition-all duration-300"
>
<div className="w-12 h-12 bg-[#C41E3A] rounded-lg flex items-center justify-center flex-shrink-0">
<div className="w-12 h-12 rounded-lg bg-gradient-to-br from-[var(--color-tech-blue)] to-[var(--color-tech-purple)] flex items-center justify-center flex-shrink-0">
<value.icon className="w-6 h-6 text-white" />
</div>
<div>
<h4 className="font-semibold text-[#1A1A1A] mb-2">{value.title}</h4>
<p className="text-[#6B6B6B] text-sm">{value.description}</p>
<h4 className="font-semibold text-gray-900 dark:text-white mb-2">{value.title}</h4>
<p className="text-gray-600 dark:text-gray-400 text-sm">{value.description}</p>
</div>
</motion.div>
))}
</div>
</motion.div>
{/* 发展历程 */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.6, delay: 0.5 }}
>
<h3 className="text-2xl font-bold text-[#1A1A1A] mb-8 text-center">发展历程</h3>
<h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-8 text-center">发展历程</h3>
<div className="space-y-6">
{milestones.map((milestone, idx) => (
<motion.div
@@ -137,14 +133,14 @@ export function AboutSection() {
initial={{ opacity: 0, x: -20 }}
animate={isInView ? { opacity: 1, x: 0 } : {}}
transition={{ duration: 0.5, delay: 0.6 + idx * 0.1 }}
className="flex flex-col md:flex-row md:items-start gap-4 p-6 bg-white rounded-xl border border-[#E8E0E0]"
className="flex flex-col md:flex-row md:items-start gap-4 p-6 bg-white dark:bg-[var(--color-bg-secondary)] rounded-xl border border-gray-200 dark:border-gray-800"
>
<div className="md:w-32 flex-shrink-0">
<span className="text-sm font-medium text-[#C41E3A]">{milestone.date}</span>
<span className="text-sm font-medium text-[var(--color-tech-blue)]">{milestone.date}</span>
</div>
<div className="flex-1">
<h4 className="font-semibold text-[#1A1A1A] mb-1">{milestone.title}</h4>
<p className="text-[#6B6B6B] text-sm">{milestone.description}</p>
<h4 className="font-semibold text-gray-900 dark:text-white mb-1">{milestone.title}</h4>
<p className="text-gray-600 dark:text-gray-400 text-sm">{milestone.description}</p>
</div>
</motion.div>
))}
src/components/sections/contact-section.tsx
+6 -6
View File
@@ -103,9 +103,9 @@ export function ContactSection() {
}
return (
<section id="contact" className="section-padding relative" ref={sectionRef}>
<section id="contact" className="section-padding relative bg-gray-50 dark:bg-[var(--color-bg-secondary)]" ref={sectionRef}>
<div className="absolute inset-0 pointer-events-none">
<div className="absolute bottom-0 left-0 w-96 h-96 bg-gradient-radial from-[#C41E3A]/3 to-transparent rounded-full blur-3xl -translate-x-1/2 translate-y-1/2" />
<div className="absolute bottom-0 left-0 w-96 h-96 bg-gradient-radial from-[var(--color-tech-blue)]/3 to-transparent rounded-full blur-3xl -translate-x-1/2 translate-y-1/2" />
</div>
<div className="container-wide relative z-10">
@@ -116,13 +116,13 @@ export function ContactSection() {
`}
>
<div className="flex items-center gap-3 mb-4">
<div className="w-8 h-px bg-[#C41E3A]" />
<span className="text-sm text-[#525252] tracking-wide">联系我们</span>
<div className="w-8 h-px bg-gradient-to-r from-[var(--color-tech-blue)] to-[var(--color-tech-purple)]" />
<span className="text-sm text-gray-600 dark:text-gray-400 tracking-wide">联系我们</span>
</div>
<h2 className="text-3xl sm:text-4xl font-semibold text-[#171717] tracking-tight chapter-title">
<h2 className="text-3xl sm:text-4xl font-semibold text-gray-900 dark:text-white tracking-tight chapter-title">
开启合作
</h2>
<p className="mt-4 text-[#737373] max-w-2xl">
<p className="mt-4 text-gray-600 dark:text-gray-400 max-w-2xl">
无论您有任何问题或合作意向，我们都很乐意与您交流
</p>
</div>
src/components/sections/hero-section.tsx
+7 -7
View File
@@ -63,7 +63,7 @@ export function HeroSection() {
<section
id="home"
ref={sectionRef}
className="relative min-h-screen flex items-center pt-16 overflow-hidden bg-[var(--color-bg-primary)]"
className="relative min-h-screen flex items-center pt-16 overflow-hidden bg-white dark:bg-[var(--color-bg-primary)]"
>
<div className="absolute inset-0 pointer-events-none overflow-hidden">
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-[var(--color-tech-blue)]/5 rounded-full blur-3xl animate-pulse-glow" />
@@ -100,18 +100,18 @@ export function HeroSection() {
initial={{ opacity: 0, y: 20 }}
animate={isVisible ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.6, delay: 0.1 }}
className="text-4xl sm:text-5xl lg:text-6xl font-bold text-white leading-tight tracking-tight mb-6"
className="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 dark:text-white leading-tight tracking-tight mb-6"
>
<span className="tech-gradient-text">{COMPANY_INFO.shortName}</span>
<br />
<span className="text-gray-300">企业数字化转型服务商</span>
<span className="text-gray-600 dark:text-gray-300">企业数字化转型服务商</span>
</motion.h1>
<motion.p
initial={{ opacity: 0, y: 20 }}
animate={isVisible ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.6, delay: 0.2 }}
className="text-lg sm:text-xl text-gray-400 mb-8 max-w-2xl mx-auto leading-relaxed"
className="text-lg sm:text-xl text-gray-600 dark:text-gray-400 mb-8 max-w-2xl mx-auto leading-relaxed"
>
{COMPANY_INFO.description}
</motion.p>
@@ -145,7 +145,7 @@ export function HeroSection() {
initial={{ opacity: 0, y: 20 }}
animate={isVisible ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.6, delay: 0.4 }}
className="pt-12 border-t border-gray-800"
className="pt-12 border-t border-gray-200 dark:border-gray-800"
>
<div className="grid grid-cols-2 md:grid-cols-4 gap-8">
{STATS.map((stat, index) => (
@@ -161,7 +161,7 @@ export function HeroSection() {
</div>
</div>
<div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-[var(--color-bg-primary)] to-transparent pointer-events-none" />
<div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-white dark:from-[var(--color-bg-primary)] to-transparent pointer-events-none" />
</section>
);
}
@@ -188,7 +188,7 @@ function StatItem({ stat, index, shouldAnimate }: {
`0${suffix}`
)}
</div>
<div className="text-sm text-gray-500 group-hover:text-gray-400 transition-colors">
<div className="text-sm text-gray-500 dark:text-gray-500 group-hover:text-gray-600 dark:group-hover:text-gray-400 transition-colors">
{stat.label}
</div>
</motion.div>
src/components/sections/news-section.tsx
+12 -12
View File
@@ -12,7 +12,7 @@ export function NewsSection() {
const isInView = useInView(ref, { once: true, margin: '-100px' });
return (
<section id="news" className="py-24 bg-white" ref={ref}>
<section id="news" className="py-24 bg-white dark:bg-[var(--color-bg-primary)]" ref={ref}>
<div className="container-custom">
<motion.div
initial={{ opacity: 0, y: 20 }}
@@ -20,13 +20,13 @@ export function NewsSection() {
transition={{ duration: 0.6 }}
className="text-center max-w-3xl mx-auto mb-16"
>
<span className="inline-block px-4 py-1.5 rounded-full bg-[#FEF2F4] text-[#C41E3A] text-sm font-medium mb-4">
<span className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-[var(--color-tech-cyan)]/30 bg-[var(--color-tech-cyan)]/5 text-[var(--color-tech-cyan)] text-sm font-medium mb-4">
新闻动态
</span>
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-[#1A1A1A] mb-6">
最新<span className="text-[#C41E3A]">资讯</span>
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-6">
最新<span className="tech-gradient-text">资讯</span>
</h2>
<p className="text-lg text-[#4A4A4A]">
<p className="text-lg text-gray-600 dark:text-gray-400">
了解公司最新动态、行业资讯和技术分享
</p>
</motion.div>
@@ -39,26 +39,26 @@ export function NewsSection() {
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.5, delay: 0.1 + idx * 0.1 }}
>
<Card className="h-full flex flex-col border-[#E8E0E0] bg-white hover:border-[#C41E3A]/30 hover:shadow-lg hover:shadow-[#C41E3A]/5 transition-all duration-300 hover:-translate-y-1 group">
<Card className="h-full flex flex-col group cursor-pointer">
<CardHeader>
<div className="flex items-center gap-2 mb-3">
<span className="inline-block px-2 py-0.5 rounded-full bg-[#FEF2F4] text-[#C41E3A] text-xs font-medium">
<span className="inline-block px-2 py-0.5 rounded-full bg-[var(--color-tech-cyan)]/10 text-[var(--color-tech-cyan)] text-xs font-medium">
{news.category}
</span>
<span className="text-sm text-[#8A8A8A] flex items-center gap-1">
<span className="text-sm text-gray-500 dark:text-gray-500 flex items-center gap-1">
<Calendar className="w-3 h-3" />
{news.date}
</span>
</div>
<CardTitle className="text-xl leading-tight text-[#1A1A1A]">{news.title}</CardTitle>
<CardTitle className="text-xl leading-tight">{news.title}</CardTitle>
</CardHeader>
<CardContent className="flex-1 flex flex-col">
<CardDescription className="text-base leading-relaxed mb-6 flex-1 text-[#6B6B6B]">
<CardDescription className="text-base leading-relaxed mb-6 flex-1">
{news.excerpt}
</CardDescription>
<a
href={`/news/${news.id}`}
className="inline-flex items-center text-sm font-medium text-[#C41E3A] hover:text-[#A01830] transition-colors group/link"
className="inline-flex items-center text-sm font-medium text-[var(--color-tech-blue)] hover:text-[var(--color-tech-purple)] transition-colors group/link"
>
阅读更多
<ArrowRight className="ml-1 w-4 h-4 transition-transform group-hover/link:translate-x-1" />
@@ -80,7 +80,7 @@ export function NewsSection() {
onClick={() => {
alert('更多新闻功能开发中...');
}}
className="inline-flex items-center text-sm font-medium text-[#C41E3A] hover:text-[#A01830] transition-colors bg-transparent border-none cursor-pointer group"
className="inline-flex items-center text-sm font-medium text-[var(--color-tech-blue)] hover:text-[var(--color-tech-purple)] transition-colors bg-transparent border-none cursor-pointer group"
>
查看全部新闻
<ArrowRight className="ml-1 w-4 h-4 transition-transform group-hover:translate-x-1" />
src/components/sections/products-section.tsx
+10 -10
View File
@@ -14,7 +14,7 @@ export function ProductsSection() {
const isInView = useInView(ref, { once: true, margin: '-100px' });
return (
<section id="products" className="py-24 bg-[var(--color-bg-primary)]" ref={ref}>
<section id="products" className="py-24 bg-white dark:bg-[var(--color-bg-primary)]" ref={ref}>
<div className="container-custom">
<motion.div
initial={{ opacity: 0, y: 20 }}
@@ -25,10 +25,10 @@ export function ProductsSection() {
<span className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-[var(--color-tech-purple)]/30 bg-[var(--color-tech-purple)]/5 text-[var(--color-tech-purple)] text-sm font-medium mb-4">
产品服务
</span>
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-6">
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-6">
我们的<span className="tech-gradient-text">产品</span>
</h2>
<p className="text-lg text-gray-400">
<p className="text-lg text-gray-600 dark:text-gray-400">
自主研发的企业级产品，助力企业高效运营，实现数字化转型
</p>
</motion.div>
@@ -54,12 +54,12 @@ export function ProductsSection() {
</CardDescription>
<div className="mb-4">
<p className="text-sm font-medium text-white mb-2">核心功能</p>
<p className="text-sm font-medium text-gray-900 dark:text-white mb-2">核心功能</p>
<div className="flex flex-wrap gap-1.5">
{product.features.slice(0, 4).map((feature, idx) => (
<span
key={idx}
className="inline-flex items-center text-xs px-2 py-1 bg-[var(--color-bg-tertiary)] text-gray-300 rounded border border-gray-700"
className="inline-flex items-center text-xs px-2 py-1 bg-gray-100 dark:bg-[var(--color-bg-tertiary)] text-gray-700 dark:text-gray-300 rounded border border-gray-200 dark:border-gray-700"
>
<Check className="w-3 h-3 mr-1 text-[var(--color-tech-blue)]" />
{feature}
@@ -69,13 +69,13 @@ export function ProductsSection() {
</div>
<div className="mb-4">
<p className="text-sm font-medium text-white mb-2 flex items-center">
<p className="text-sm font-medium text-gray-900 dark:text-white mb-2 flex items-center">
<TrendingUp className="w-4 h-4 mr-1 text-[var(--color-tech-blue)]" />
核心价值
</p>
<ul className="space-y-1">
{product.benefits.map((benefit, idx) => (
<li key={idx} className="text-xs text-gray-400 flex items-start">
<li key={idx} className="text-xs text-gray-600 dark:text-gray-400 flex items-start">
<span className="text-[var(--color-tech-blue)] mr-1.5">•</span>
{benefit}
</li>
@@ -99,16 +99,16 @@ export function ProductsSection() {
transition={{ duration: 0.6, delay: 0.5 }}
className="mt-20 text-center"
>
<div className="bg-gradient-to-r from-[var(--color-bg-secondary)] to-[var(--color-bg-tertiary)] rounded-2xl p-12 border border-gray-800 relative overflow-hidden">
<div className="bg-gradient-to-r from-gray-100 to-gray-200 dark:from-[var(--color-bg-secondary)] dark:to-[var(--color-bg-tertiary)] rounded-2xl p-12 border border-gray-200 dark:border-gray-800 relative overflow-hidden">
<div className="absolute inset-0 pointer-events-none">
<div className="absolute top-0 right-0 w-64 h-64 bg-[var(--color-tech-blue)]/5 rounded-full blur-3xl" />
<div className="absolute bottom-0 left-0 w-48 h-48 bg-[var(--color-tech-purple)]/5 rounded-full blur-3xl" />
</div>
<div className="relative z-10">
<h3 className="text-2xl sm:text-3xl font-bold text-white mb-4">
<h3 className="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mb-4">
需要定制化解决方案？
</h3>
<p className="text-gray-400 mb-8 max-w-2xl mx-auto">
<p className="text-gray-600 dark:text-gray-400 mb-8 max-w-2xl mx-auto">
我们的专业团队可以根据您的业务需求，提供量身定制的产品开发和系统集成服务
</p>
<Button size="lg">
src/components/sections/services-section.tsx
+3 -3
View File
@@ -20,7 +20,7 @@ export function ServicesSection() {
const isInView = useInView(ref, { once: true, margin: '-100px' });
return (
<section id="services" className="py-24 bg-[var(--color-bg-secondary)]" ref={ref}>
<section id="services" className="py-24 bg-gray-50 dark:bg-[var(--color-bg-secondary)]" ref={ref}>
<div className="container-custom">
<motion.div
initial={{ opacity: 0, y: 20 }}
@@ -31,10 +31,10 @@ export function ServicesSection() {
<span className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-[var(--color-tech-blue)]/30 bg-[var(--color-tech-blue)]/5 text-[var(--color-tech-blue)] text-sm font-medium mb-4">
核心业务
</span>
<h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
<h2 className="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-4">
专业服务，<span className="tech-gradient-text">助力发展</span>
</h2>
<p className="text-lg text-gray-400">
<p className="text-lg text-gray-600 dark:text-gray-400">
我们提供全方位的技术解决方案，帮助企业实现数字化转型
</p>
</motion.div>
src/components/ui/button.tsx
+2 -2
View File
@@ -15,9 +15,9 @@ const buttonVariants = cva(
outline:
"border border-[var(--color-tech-blue)] bg-transparent text-[var(--color-tech-blue)] hover:bg-[var(--color-tech-blue)]/10 hover:shadow-lg hover:shadow-[var(--color-tech-blue)]/20",
secondary:
"bg-[var(--color-bg-tertiary)] text-white border border-gray-700 hover:border-[var(--color-tech-blue)] hover:shadow-lg hover:shadow-[var(--color-tech-blue)]/20 hover:scale-105 active:scale-95",
"bg-gray-100 dark:bg-[var(--color-bg-tertiary)] text-gray-900 dark:text-white border border-gray-200 dark:border-gray-700 hover:border-[var(--color-tech-blue)] hover:shadow-lg hover:shadow-[var(--color-tech-blue)]/20 hover:scale-105 active:scale-95",
ghost:
"text-gray-300 hover:text-[var(--color-tech-blue)] hover:bg-[var(--color-bg-tertiary)]",
"text-gray-600 dark:text-gray-300 hover:text-[var(--color-tech-blue)] hover:bg-gray-100 dark:hover:bg-[var(--color-bg-tertiary)]",
link: "text-[var(--color-tech-blue)] underline-offset-4 hover:underline",
},
size: {
src/components/ui/card.tsx
+4 -4
View File
@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
<div
data-slot="card"
className={cn(
"bg-[var(--color-bg-secondary)] text-white flex flex-col gap-6 rounded-xl border border-gray-800 py-6 shadow-lg transition-all duration-300 hover:border-[var(--color-tech-blue)] hover:shadow-[var(--color-tech-blue)]/20",
"bg-white dark:bg-[var(--color-bg-secondary)] text-gray-900 dark:text-white flex flex-col gap-6 rounded-xl border border-gray-200 dark:border-gray-800 py-6 shadow-lg transition-all duration-300 hover:border-[var(--color-tech-blue)] hover:shadow-[var(--color-tech-blue)]/20",
className
)}
{...props}
@@ -32,7 +32,7 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-title"
className={cn("leading-none font-semibold text-white", className)}
className={cn("leading-none font-semibold text-gray-900 dark:text-white", className)}
{...props}
/>
)
@@ -42,7 +42,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-description"
className={cn("text-gray-400 text-sm", className)}
className={cn("text-gray-600 dark:text-gray-400 text-sm", className)}
{...props}
/>
)
@@ -75,7 +75,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-footer"
className={cn("flex items-center px-6 [.border-t]:pt-6 border-t border-gray-800", className)}
className={cn("flex items-center px-6 [.border-t]:pt-6 border-t border-gray-200 dark:border-gray-800", className)}
{...props}
/>
)