fix: 修复 lint 错误
- 修复 Input/Textarea 组件中 React Hook 条件调用问题 - 修复 AboutSection 中的引号转义问题 - 更新 Input/Textarea 样式为医疗健康风格
This commit is contained in:
张翔
@@ -0,0 +1,534 @@
|
||||
# 网站设计优化实施计划
|
||||
|
||||
> **For Claude:** REQUIRED SUB-SKILL: Use `executing-plans` to implement this plan task-by-task.
|
||||
|
||||
**Goal:** 融合 Stripe 和 Wickret 设计风格，全面优化网站视觉体验，保留品牌红色作为点缀色
|
||||
|
||||
**Architecture:** 采用深色主题为主（Stripe 风格）+ 现代渐变色彩（Wickret 风格），通过 CSS 变量管理主题，Framer Motion 实现动画
|
||||
|
||||
**Tech Stack:** Next.js 14, Tailwind CSS, Framer Motion, TypeScript
|
||||
|
||||
---
|
||||
|
||||
## 阶段一：色彩与主题系统升级
|
||||
|
||||
### Task 1: 更新全局 CSS 变量色彩系统
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/app/globals.css:1-120`
|
||||
|
||||
**Step 1: 添加新的深色主题色彩变量**
|
||||
|
||||
```css
|
||||
/* 在 :root 后添加新的色彩变量 */
|
||||
--color-dark-bg: #0A0A0A;
|
||||
--color-dark-surface: #141414;
|
||||
--color-dark-elevated: #1A1A1A;
|
||||
--color-dark-border: #2A2A2A;
|
||||
|
||||
/* 渐变色彩 - Wickret 风格 */
|
||||
--color-gradient-start: #6366F1;
|
||||
--color-gradient-mid: #8B5CF6;
|
||||
--color-gradient-end: #D946EF;
|
||||
|
||||
/* 品牌红色保留作为点缀 */
|
||||
--color-accent-red: #C41E3A;
|
||||
--color-accent-red-glow: rgba(196, 30, 58, 0.4);
|
||||
```
|
||||
|
||||
**Step 2: 验证无语法错误**
|
||||
|
||||
Run: `npm run build 2>&1 | head -20`
|
||||
|
||||
Expected: 无 CSS 错误
|
||||
|
||||
---
|
||||
|
||||
### Task 2: 创建渐变工具类
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/app/globals.css`
|
||||
|
||||
**Step 1: 添加渐变背景和文字工具类**
|
||||
|
||||
```css
|
||||
@layer utilities {
|
||||
.bg-gradient-modern {
|
||||
background: linear-gradient(135deg, var(--color-dark-bg) 0%, #1a1a2e 50%, #16213e 100%);
|
||||
}
|
||||
|
||||
.text-gradient-brand {
|
||||
background: linear-gradient(135deg, var(--color-gradient-start), var(--color-gradient-mid), var(--color-gradient-end));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.bg-glow-red {
|
||||
background: radial-gradient(circle at center, var(--color-accent-red-glow) 0%, transparent 70%);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Step 2: 运行构建验证**
|
||||
|
||||
Run: `npm run build 2>&1 | head -20`
|
||||
|
||||
Expected: 构建成功
|
||||
|
||||
---
|
||||
|
||||
## 阶段二：Hero 区域深度优化
|
||||
|
||||
### Task 3: 重构 HeroSection 背景效果
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/components/sections/hero-section.tsx:40-70`
|
||||
|
||||
**Step 1: 替换背景为深色渐变**
|
||||
|
||||
```tsx
|
||||
// 替换现有的浅色背景
|
||||
className="relative min-h-screen flex items-center pt-16 overflow-hidden bg-dark-bg"
|
||||
```
|
||||
|
||||
**Step 2: 添加新的光效元素**
|
||||
|
||||
```tsx
|
||||
<div className="absolute inset-0 pointer-events-none overflow-hidden bg-dark-bg">
|
||||
{/* 主渐变背景 */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-[#0A0A0A] via-[#1a1a2e] to-[#0A0A0A]" />
|
||||
|
||||
{/* 动态光效 - 类似 Stripe */}
|
||||
<div className="absolute top-0 left-1/4 w-[600px] h-[600px] bg-gradient-radial from-indigo-500/20 via-purple-500/10 to-transparent rounded-full blur-3xl animate-pulse" />
|
||||
<div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-gradient-radial from-pink-500/15 via-red-500/5 to-transparent rounded-full blur-3xl animate-pulse" style={{ animationDelay: '1.5s' }} />
|
||||
|
||||
{/* 网格背景 - Stripe 风格 */}
|
||||
<div className="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:60px_60px]" />
|
||||
</div>
|
||||
```
|
||||
|
||||
**Step 3: 验证视觉效果**
|
||||
|
||||
Run: `npm run dev`
|
||||
|
||||
Expected: 深色背景正常显示
|
||||
|
||||
---
|
||||
|
||||
### Task 4: 优化 Hero 标题和文字样式
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/components/sections/hero-section.tsx:75-95`
|
||||
|
||||
**Step 1: 更新标题样式为渐变文字**
|
||||
|
||||
```tsx
|
||||
<h1 className="text-5xl sm:text-6xl lg:text-7xl font-bold tracking-tight mb-8">
|
||||
<span className="text-gradient-brand">{COMPANY_INFO.shortName}</span>
|
||||
<br />
|
||||
<span className="text-white/90">企业数字化转型服务商</span>
|
||||
</h1>
|
||||
```
|
||||
|
||||
**Step 2: 更新描述文字**
|
||||
|
||||
```tsx
|
||||
<p className="text-lg sm:text-xl text-gray-400 mb-10 max-w-2xl mx-auto leading-relaxed">
|
||||
融合 Stripe 级专业品质 + 现代科技美学，为您打造卓越的数字体验
|
||||
</p>
|
||||
```
|
||||
|
||||
**Step 3: 验证**
|
||||
|
||||
Run: `npm run build`
|
||||
|
||||
Expected: 构建成功
|
||||
|
||||
---
|
||||
|
||||
### Task 5: 升级 CTA 按钮为渐变风格
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/components/sections/hero-section.tsx:97-112`
|
||||
|
||||
**Step 1: 更新主按钮样式**
|
||||
|
||||
```tsx
|
||||
<Button
|
||||
size="lg"
|
||||
onClick={() => handleScrollTo('about')}
|
||||
className="relative overflow-hidden group bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 hover:from-indigo-600 hover:via-purple-600 hover:to-pink-600 text-white border-0 shadow-lg shadow-purple-500/25 hover:shadow-purple-500/40 transition-all duration-300"
|
||||
>
|
||||
<span className="relative z-10 flex items-center">
|
||||
了解更多
|
||||
<ArrowRight className="w-4 h-4 ml-2" />
|
||||
</span>
|
||||
<div className="absolute inset-0 bg-white/20 translate-y-full group-hover:translate-y-0 transition-transform duration-300" />
|
||||
</Button>
|
||||
```
|
||||
|
||||
**Step 2: 更新次按钮样式**
|
||||
|
||||
```tsx
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
onClick={() => handleScrollTo('contact')}
|
||||
className="border-gray-700 text-white hover:bg-gray-800/50 hover:border-gray-600 bg-transparent"
|
||||
>
|
||||
联系我们
|
||||
</Button>
|
||||
```
|
||||
|
||||
**Step 3: 验证**
|
||||
|
||||
Run: `npm run build`
|
||||
|
||||
Expected: 构建成功
|
||||
|
||||
---
|
||||
|
||||
### Task 6: 优化统计数字展示区
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/components/sections/hero-section.tsx:140-180`
|
||||
|
||||
**Step 1: 更新统计区背景和样式**
|
||||
|
||||
```tsx
|
||||
<motion.div
|
||||
id="stats-section"
|
||||
className="pt-16 border-t border-gray-800/50"
|
||||
>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12">
|
||||
{STATS.map((stat, index) => (
|
||||
<StatItem
|
||||
key={stat.label}
|
||||
stat={stat}
|
||||
index={index}
|
||||
shouldAnimate={statsVisible}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
```
|
||||
|
||||
**Step 2: 更新 StatItem 样式**
|
||||
|
||||
```tsx
|
||||
function StatItem({ stat, index, shouldAnimate }: {
|
||||
stat: { value: string; label: string };
|
||||
index: number;
|
||||
shouldAnimate: boolean;
|
||||
}) {
|
||||
return (
|
||||
<motion.div
|
||||
className="group cursor-default text-center"
|
||||
>
|
||||
<div className="text-4xl sm:text-5xl font-bold text-gradient-brand mb-3">
|
||||
{shouldAnimate ? (
|
||||
<AnimatedCounter value={numericValue} suffix={suffix} />
|
||||
) : (
|
||||
<span className="text-white/30">0{suffix}</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500 group-hover:text-gray-400 transition-colors">
|
||||
{stat.label}
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
**Step 3: 验证**
|
||||
|
||||
Run: `npm run build`
|
||||
|
||||
Expected: 构建成功
|
||||
|
||||
---
|
||||
|
||||
## 阶段三：服务卡片升级
|
||||
|
||||
### Task 7: 优化 GlassCard 组件
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/components/ui/glass-card.tsx`
|
||||
|
||||
**Step 1: 更新 GlassCard 变体**
|
||||
|
||||
```tsx
|
||||
const glassCardVariants = cva(
|
||||
"rounded-2xl border backdrop-blur-xl transition-all duration-300",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
"border-gray-800/50 bg-gray-900/50 hover:border-purple-500/50 hover:bg-gray-800/60 hover:shadow-[0_0_40px_rgba(139,92,246,0.15)] hover:-translate-y-1",
|
||||
elevated:
|
||||
"border-gray-800 bg-gray-900/80 shadow-2xl hover:border-purple-500/50 hover:shadow-purple-500/20 hover:-translate-y-2",
|
||||
outline:
|
||||
"border-gray-800/50 bg-transparent hover:border-purple-500/30 hover:bg-gray-900/30",
|
||||
glow:
|
||||
"border-gray-800/50 bg-gray-900/40 relative overflow-hidden hover:border-purple-500/40",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
```
|
||||
|
||||
**Step 2: 验证**
|
||||
|
||||
Run: `npm run build`
|
||||
|
||||
Expected: 构建成功
|
||||
|
||||
---
|
||||
|
||||
### Task 8: 重构 ServicesSection
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/components/sections/services-section.tsx`
|
||||
|
||||
**Step 1: 更新区域背景和标题**
|
||||
|
||||
```tsx
|
||||
<section id="services" className="py-24 bg-dark-bg relative overflow-hidden">
|
||||
{/* 背景装饰 */}
|
||||
<div className="absolute top-1/2 left-0 w-[400px] h-[400px] bg-purple-500/10 rounded-full blur-3xl" />
|
||||
<div className="absolute top-1/3 right-0 w-[300px] h-[300px] bg-pink-500/10 rounded-full blur-3xl" />
|
||||
|
||||
<div className="container-wide relative z-10">
|
||||
{/* 标题区域 */}
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-white mb-4">
|
||||
我们的 <span className="text-gradient-brand">核心服务</span>
|
||||
</h2>
|
||||
<p className="text-gray-400 max-w-2xl mx-auto text-lg">
|
||||
专业技术团队，为您提供全方位的数字化解决方案
|
||||
</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
**Step 2: 更新服务卡片布局**
|
||||
|
||||
```tsx
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{SERVICES.map((service, index) => (
|
||||
<motion.div
|
||||
key={service.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: index * 0.1 }}
|
||||
>
|
||||
<GlassCard variant="default" className="p-6 h-full group cursor-pointer">
|
||||
{/* 卡片内容 */}
|
||||
<div className="w-12 h-12 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
|
||||
<IconComponent name={service.icon} className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-white mb-3">{service.title}</h3>
|
||||
<p className="text-gray-400 text-sm leading-relaxed">{service.description}</p>
|
||||
</GlassCard>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
```
|
||||
|
||||
**Step 3: 验证**
|
||||
|
||||
Run: `npm run build`
|
||||
|
||||
Expected: 构建成功
|
||||
|
||||
---
|
||||
|
||||
## 阶段四：关于我们与产品区域
|
||||
|
||||
### Task 9: 优化 AboutSection
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/components/sections/about-section.tsx`
|
||||
|
||||
**Step 1: 更新背景为深色**
|
||||
|
||||
```tsx
|
||||
<section id="about" className="py-24 bg-dark-surface relative">
|
||||
<div className="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.01)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.01)_1px,transparent_1px)] bg-[size:40px_40px]" />
|
||||
```
|
||||
|
||||
**Step 2: 更新文字颜色**
|
||||
|
||||
```tsx
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
|
||||
关于 <span className="text-gradient-brand">{COMPANY_INFO.shortName}</span>
|
||||
</h2>
|
||||
<p className="text-gray-400 text-lg leading-relaxed max-w-3xl">
|
||||
{COMPANY_INFO.description}
|
||||
</p>
|
||||
```
|
||||
|
||||
**Step 3: 验证**
|
||||
|
||||
Run: `npm run build`
|
||||
|
||||
Expected: 构建成功
|
||||
|
||||
---
|
||||
|
||||
### Task 10: 优化 ProductsSection
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/components/sections/products-section.tsx`
|
||||
|
||||
**Step 1: 更新产品卡片样式**
|
||||
|
||||
```tsx
|
||||
<div className="space-y-8">
|
||||
{PRODUCTS.map((product, index) => (
|
||||
<motion.div
|
||||
key={product.id}
|
||||
initial={{ opacity: 0, x: index % 2 === 0 ? -20 : 20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5 }}
|
||||
>
|
||||
<GlassCard variant="elevated" className="p-8 group hover:border-purple-500/30">
|
||||
{/* 产品内容 */}
|
||||
</GlassCard>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
```
|
||||
|
||||
**Step 2: 验证**
|
||||
|
||||
Run: `npm run build`
|
||||
|
||||
Expected: 构建成功
|
||||
|
||||
---
|
||||
|
||||
## 阶段五：联系区域与 Footer
|
||||
|
||||
### Task 11: 优化 ContactSection
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/components/sections/contact-section.tsx`
|
||||
|
||||
**Step 1: 更新背景和样式**
|
||||
|
||||
```tsx
|
||||
<section id="contact" className="py-24 bg-dark-bg relative overflow-hidden">
|
||||
<div className="absolute inset-0 bg-gradient-radial from-purple-500/10 via-transparent to-transparent" />
|
||||
```
|
||||
|
||||
**Step 2: 更新表单样式**
|
||||
|
||||
```tsx
|
||||
<input className="w-full px-4 py-3 bg-gray-900/50 border border-gray-800 rounded-xl text-white placeholder-gray-500 focus:outline-none focus:border-purple-500/50 focus:ring-2 focus:ring-purple-500/20 transition-all"
|
||||
```
|
||||
|
||||
**Step 3: 验证**
|
||||
|
||||
Run: `npm run build`
|
||||
|
||||
Expected: 构建成功
|
||||
|
||||
---
|
||||
|
||||
### Task 12: 优化 Header 组件
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/components/layout/header.tsx`
|
||||
|
||||
**Step 1: 更新 Header 背景**
|
||||
|
||||
```tsx
|
||||
<header className="fixed top-0 left-0 right-0 z-50 bg-dark-bg/80 backdrop-blur-xl border-b border-gray-800/50">
|
||||
```
|
||||
|
||||
**Step 2: 更新导航链接颜色**
|
||||
|
||||
```tsx
|
||||
<nav className="flex items-center gap-8">
|
||||
{NAVIGATION.map((item) => (
|
||||
<a
|
||||
key={item.id}
|
||||
href={item.href}
|
||||
className="text-sm text-gray-400 hover:text-white transition-colors relative group"
|
||||
>
|
||||
{item.label}
|
||||
<span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-indigo-500 to-purple-500 group-hover:w-full transition-all duration-300" />
|
||||
</a>
|
||||
))}
|
||||
</nav>
|
||||
```
|
||||
|
||||
**Step 3: 验证**
|
||||
|
||||
Run: `npm run build`
|
||||
|
||||
Expected: 构建成功
|
||||
|
||||
---
|
||||
|
||||
### Task 13: 优化 Footer 组件
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/components/layout/footer.tsx`
|
||||
|
||||
**Step 1: 更新 Footer 背景**
|
||||
|
||||
```tsx
|
||||
<footer className="bg-dark-surface border-t border-gray-800/50 py-12">
|
||||
```
|
||||
|
||||
**Step 2: 验证**
|
||||
|
||||
Run: `npm run build`
|
||||
|
||||
Expected: 构建成功
|
||||
|
||||
---
|
||||
|
||||
## 阶段六：最终验证与测试
|
||||
|
||||
### Task 14: 运行完整构建和类型检查
|
||||
|
||||
**Step 1: 运行构建**
|
||||
|
||||
Run: `npm run build`
|
||||
|
||||
Expected: 构建成功，无错误
|
||||
|
||||
**Step 2: 运行类型检查**
|
||||
|
||||
Run: `npm run lint`
|
||||
|
||||
Expected: 无 lint 错误
|
||||
|
||||
**Step 3: 启动开发服务器验证**
|
||||
|
||||
Run: `npm run dev`
|
||||
|
||||
Expected: 开发服务器正常启动
|
||||
|
||||
---
|
||||
|
||||
## 执行总结
|
||||
|
||||
此计划涵盖 14 个任务，分为 6 个阶段：
|
||||
|
||||
1. **色彩与主题系统** (Task 1-2): CSS 变量和工具类
|
||||
2. **Hero 区域** (Task 3-6): 背景、标题、按钮、统计数字
|
||||
3. **服务卡片** (Task 7-8): GlassCard 升级和服务区域
|
||||
4. **关于与产品** (Task 9-10): 页面深色主题
|
||||
5. **联系与导航** (Task 11-13): 表单和页眉页脚
|
||||
6. **验证测试** (Task 14): 构建和检查
|
||||
|
||||
每个任务都设计为独立可验证，确保逐步改进网站设计。
|
||||
@@ -0,0 +1,446 @@
|
||||
# Novalon 官网设计方案 - 金融科技中国风融合版
|
||||
|
||||
**设计日期：** 2026-02-22
|
||||
**设计风格：** 金融科技风 + 中国传统美学融合
|
||||
**项目目标：** 融合 Wickret 金融科技设计语言 + 中国传统印章元素，打造兼具国际视野与文化底蕴的企业官网
|
||||
|
||||
---
|
||||
|
||||
## 一、设计理念与品牌定位
|
||||
|
||||
### 1.1 核心概念
|
||||
|
||||
**"数字印章，智连未来"**
|
||||
|
||||
将中国传统印章（诚信、权威、稳重）的意象与现代金融科技（创新、安全、高效）相结合，形成独特的设计语言。
|
||||
|
||||
### 1.2 设计风格定位
|
||||
|
||||
| 维度 | 融合方案 |
|
||||
|------|---------|
|
||||
| **国际视野** | Wickret 金融科技风格 - 深色背景、渐变光晕、专业简洁 |
|
||||
| **文化底蕴** | 中国传统印章元素 - 红色点缀、方正布局、留白意境 |
|
||||
| **科技感** | 现代渐变色彩 - 科技蓝、紫罗兰、粉紫渐变 |
|
||||
| **情感连接** | 温暖而有力量 - 红色传递热情与信任 |
|
||||
|
||||
### 1.3 设计原则
|
||||
|
||||
1. **色彩平衡** - 科技蓝紫为主色调（70%），印章红为点缀色（20%），中性灰为辅助（10%）
|
||||
2. **层次分明** - 借鉴 Wickret 的信息层次设计，大标题 + 关键点 + 详情
|
||||
3. **动静结合** - 优雅的微动效，不过度炫技，注重体验流畅
|
||||
4. **留白呼吸** - 借鉴东方美学的大面积留白，让信息有呼吸空间
|
||||
|
||||
---
|
||||
|
||||
## 二、色彩系统
|
||||
|
||||
### 2.1 配色比例
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ 主色调（科技渐变） 70% 深色背景 + 蓝紫渐变 │
|
||||
│ 品牌色（印章红） 20% 点缀、CTA、强调 │
|
||||
│ 辅助色（中性灰） 10% 文字、边框、次要信息 │
|
||||
└─────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 2.2 核心配色
|
||||
|
||||
#### 深色背景（主背景）
|
||||
|
||||
```css
|
||||
--bg-primary: #0A0A0A /* 主背景 - 深黑 */
|
||||
--bg-secondary: #141414 /* 次级背景 - 炭黑 */
|
||||
--bg-tertiary: #1A1A1A /* 卡片背景 - 深灰 */
|
||||
--bg-elevated: #242424 /* 悬停状态 - 中灰 */
|
||||
```
|
||||
|
||||
#### 科技渐变色系（70%）
|
||||
|
||||
```css
|
||||
--tech-blue: #00D9FF /* 电光蓝 - 主交互色 */
|
||||
--tech-blue-hover: #00B8D9 /* 悬停态 */
|
||||
--tech-purple: #A855F7 /* 霓虹紫 - 渐变终点 */
|
||||
--tech-purple-hover: #9333EA
|
||||
--tech-pink: #D946EF /* 粉紫 - 渐变中间色 */
|
||||
--tech-cyan: #06B6D4 /* 青色 - 点缀 */
|
||||
```
|
||||
|
||||
**渐变组合：**
|
||||
- 主渐变：`linear-gradient(135deg, #00D9FF 0%, #A855F7 50%, #D946EF 100%)`
|
||||
- 柔和渐变：`linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%)`
|
||||
- 光晕效果：`radial-gradient(circle at 50% 0%, rgba(0, 217, 255, 0.15) 0%, transparent 50%)`
|
||||
|
||||
#### 印章红色系（20%）
|
||||
|
||||
```css
|
||||
--brand-primary: #C41E3A /* 印章红 - 主品牌色 */
|
||||
--brand-hover: #A01830 /* 悬停态 */
|
||||
--brand-light: #E04A68 /* 浅色点缀 */
|
||||
--brand-glow: rgba(196, 30, 58, 0.4) /* 发光效果 */
|
||||
```
|
||||
|
||||
**使用场景：**
|
||||
- Logo/图标
|
||||
- CTA 按钮（主按钮）
|
||||
- 重要数据强调
|
||||
- 装饰性点缀元素
|
||||
- 悬停高亮
|
||||
|
||||
#### 中性灰色系（10%）
|
||||
|
||||
```css
|
||||
--text-primary: #FAFAFA /* 主文字 - 近白 */
|
||||
--text-secondary: #D4D4D4 /* 次级文字 - 浅灰 */
|
||||
--text-tertiary: #A3A3A3 /* 辅助文字 - 中灰 */
|
||||
--text-muted: #737373 /* 禁用/提示 - 深灰 */
|
||||
|
||||
--border-default: #262626 /* 默认边框 */
|
||||
--border-hover: #333333 /* 悬停边框 */
|
||||
--border-accent: #00D9FF /* 聚焦边框 */
|
||||
```
|
||||
|
||||
### 2.3 浅色模式配色（可选）
|
||||
|
||||
```css
|
||||
--bg-primary-light: #FFFFFF
|
||||
--bg-secondary-light: #FAFAFA
|
||||
--text-primary-light: #171717
|
||||
--text-secondary-light: #525252
|
||||
--brand-primary-light: #C41E3A
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 三、页面布局设计
|
||||
|
||||
### 3.1 首页整体结构
|
||||
|
||||
```
|
||||
┌────────────────────────────────────────────────────────────┐
|
||||
│ HEADER (64px) │
|
||||
│ [Logo] [首页] [产品] [解决方案] [案例] [关于] [CTA] │
|
||||
├────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ HERO SECTION (100vh) │
|
||||
│ │
|
||||
│ ┌─────────────────────┐ ┌──────────────────────────┐ │
|
||||
│ │ │ │ │ │
|
||||
│ │ 主标题文案 │ │ 动态视觉元素 │ │
|
||||
│ │ 副标题描述 │ │ - 光晕渐变 │ │
|
||||
│ │ CTA 按钮组 │ │ - 抽象图形 │ │
|
||||
│ │ 特性标签 │ │ - 微妙动效 │ │
|
||||
│ │ │ │ │ │
|
||||
│ └─────────────────────┘ └──────────────────────────┘ │
|
||||
│ │
|
||||
├────────────────────────────────────────────────────────────┤
|
||||
│ SERVICES SECTION │
|
||||
│ [图标] 服务领域1 [图标] 服务领域2 [图标] ... │
|
||||
├────────────────────────────────────────────────────────────┤
|
||||
│ PRODUCTS SECTION │
|
||||
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
|
||||
│ │ 产品卡1 │ │ 产品卡2 │ │ 产品卡3 │ │
|
||||
│ └─────────┘ └─────────┘ └─────────┘ │
|
||||
├────────────────────────────────────────────────────────────┤
|
||||
│ ABOUT SECTION │
|
||||
│ ┌──────────────┐ ┌─────────────────────────────────┐ │
|
||||
│ │ 关于我们 │ │ 核心数据 / 成就展示 │ │
|
||||
│ │ 企业理念 │ │ [数字动画] │ │
|
||||
│ └──────────────┘ └─────────────────────────────────┘ │
|
||||
├────────────────────────────────────────────────────────────┤
|
||||
│ NEWS SECTION │
|
||||
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
|
||||
│ │ 新闻卡1 │ │ 新闻卡2 │ │ 新闻卡3 │ │
|
||||
│ └─────────┘ └─────────┘ └─────────┘ │
|
||||
├────────────────────────────────────────────────────────────┤
|
||||
│ CONTACT SECTION │
|
||||
│ [联系表单] [联系信息] │
|
||||
├────────────────────────────────────────────────────────────┤
|
||||
│ FOOTER │
|
||||
│ [Logo] [导航链接] [社交媒体] [版权信息] │
|
||||
└────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 3.2 Hero 区域设计
|
||||
|
||||
#### 布局结构
|
||||
- **高度：** 100vh（首屏全屏）
|
||||
- **左右比例：** 60% 文案 / 40% 视觉元素
|
||||
|
||||
#### 视觉层次
|
||||
|
||||
**背景层：**
|
||||
1. 深色底 `#0A0A0A`
|
||||
2. 微妙网格线 `rgba(255,255,255)`（Stripe,0.02 风格）
|
||||
3. 顶部渐变光晕 `radial-gradient(from 50% 0%, rgba(0, 217, 255, 0.1), transparent 50%)`
|
||||
4. 底部暖色光晕 `radial-gradient(to 50% 100%, rgba(196, 30, 58, 0.08), transparent 40%)`
|
||||
|
||||
**文案层：**
|
||||
- 主标题：品牌名 + Slogan
|
||||
- 副标题：价值主张（2-3行）
|
||||
- CTA 按钮组：主按钮（印章红）+ 次按钮（渐变轮廓）
|
||||
- 特性标签：3个核心优势点
|
||||
|
||||
**视觉层：**
|
||||
- 右侧抽象图形：圆形/线条组合（象征连接、印章）
|
||||
- 动态光晕：缓慢脉动的渐变圆
|
||||
- 微妙粒子：缓慢漂浮（可选）
|
||||
|
||||
### 3.3 内容区块设计
|
||||
|
||||
**通用规则：**
|
||||
- 上下间距：`120px`（桌面）/ `80px`（移动）
|
||||
- 最大内容宽度：`1280px`
|
||||
- 内边距：`24px`（桌面）/ `16px`（移动）
|
||||
|
||||
---
|
||||
|
||||
## 四、UI 组件设计
|
||||
|
||||
### 4.1 按钮系统
|
||||
|
||||
#### 主按钮（CTA - 印章红）
|
||||
|
||||
```css
|
||||
/* 默认状态 */
|
||||
background: #C41E3A;
|
||||
color: #FFFFFF;
|
||||
border-radius: 8px;
|
||||
padding: 12px 32px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
/* 悬停状态 */
|
||||
background: #A01830;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 0 30px rgba(196, 30, 58, 0.4);
|
||||
|
||||
/* 点击状态 */
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 0 15px rgba(196, 30, 58, 0.3);
|
||||
```
|
||||
|
||||
#### 次按钮（渐变轮廓）
|
||||
|
||||
```css
|
||||
/* 默认状态 */
|
||||
background: transparent;
|
||||
border: 1px solid rgba(0, 217, 255, 0.5);
|
||||
color: #00D9FF;
|
||||
border-radius: 8px;
|
||||
|
||||
/* 悬停状态 */
|
||||
background: rgba(0, 217, 255, 0.1);
|
||||
border-color: #00D9FF;
|
||||
box-shadow: 0 0 20px rgba(0, 217, 255, 0.2);
|
||||
```
|
||||
|
||||
#### 渐变按钮
|
||||
|
||||
```css
|
||||
/* 默认状态 */
|
||||
background: linear-gradient(135deg, #00D9FF 0%, #A855F7 100%);
|
||||
color: #FFFFFF;
|
||||
border-radius: 8px;
|
||||
|
||||
/* 悬停状态 */
|
||||
background: linear-gradient(135deg, #00B8D9 0%, #9333EA 100%);
|
||||
box-shadow: 0 0 30px rgba(0, 217, 255, 0.3);
|
||||
```
|
||||
|
||||
### 4.2 卡片系统
|
||||
|
||||
#### 服务/产品卡片
|
||||
|
||||
```css
|
||||
/* 背景 */
|
||||
background: #1A1A1A;
|
||||
border: 1px solid #262626;
|
||||
border-radius: 16px;
|
||||
padding: 32px;
|
||||
|
||||
/* 悬停 */
|
||||
border-color: #00D9FF;
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 0 40px rgba(0, 217, 255, 0.1);
|
||||
|
||||
/* 图标容器 */
|
||||
background: linear-gradient(135deg, rgba(0, 217, 255, 0.1), rgba(168, 85, 247, 0.1));
|
||||
border-radius: 12px;
|
||||
```
|
||||
|
||||
#### 数据卡片
|
||||
|
||||
```css
|
||||
/* 背景 */
|
||||
background: #141414;
|
||||
border: 1px solid #333333;
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
|
||||
/* 数字样式 */
|
||||
color: #00D9FF;
|
||||
font-size: 48px;
|
||||
font-weight: 700;
|
||||
|
||||
/* 标签样式 */
|
||||
color: #A3A3A3;
|
||||
font-size: 14px;
|
||||
```
|
||||
|
||||
### 4.3 导航栏
|
||||
|
||||
```css
|
||||
/* 背景 */
|
||||
background: rgba(10, 10, 10, 0.8);
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid #262626;
|
||||
height: 64px;
|
||||
|
||||
/* Logo */
|
||||
color: #C41E3A（印章红 Logo）
|
||||
color: #FAFAFA（公司名）
|
||||
|
||||
/* 导航链接 */
|
||||
color: #D4D4D4（默认）
|
||||
color: #00D9FF（悬停/当前）
|
||||
```
|
||||
|
||||
### 4.4 表单组件
|
||||
|
||||
```css
|
||||
/* 输入框 */
|
||||
background: #1A1A1A;
|
||||
border: 1px solid #262626;
|
||||
border-radius: 8px;
|
||||
color: #FAFAFA;
|
||||
padding: 12px 16px;
|
||||
|
||||
/* 聚焦状态 */
|
||||
border-color: #00D9FF;
|
||||
box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.1);
|
||||
|
||||
/* 占位符 */
|
||||
color: #737373;
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 五、动效系统
|
||||
|
||||
### 5.1 全局动效参数
|
||||
|
||||
```css
|
||||
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
|
||||
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--duration-fast: 150ms;
|
||||
--duration-normal: 300ms;
|
||||
--duration-slow: 500ms;
|
||||
```
|
||||
|
||||
### 5.2 动效类型
|
||||
|
||||
#### 进入动效（页面加载）
|
||||
- 元素从下方淡入
|
||||
- 交错延迟：每元素 50ms
|
||||
- 持续时间：500ms
|
||||
|
||||
#### 悬停动效
|
||||
- 卡片上移 + 边框发光
|
||||
- 按钮轻微上浮 + 阴影增强
|
||||
- 持续时间：300ms
|
||||
|
||||
#### 背景动效
|
||||
- 光晕缓慢脉动（4-6秒周期）
|
||||
- 粒子缓慢漂浮（可选）
|
||||
- 微妙流畅，不过度
|
||||
|
||||
---
|
||||
|
||||
## 六、响应式断点
|
||||
|
||||
```css
|
||||
/* 移动优先设计 */
|
||||
--breakpoint-sm: 640px; /* 手机横屏 */
|
||||
--breakpoint-md: 768px; /* 平板 */
|
||||
--breakpoint-lg: 1024px; /* 小笔记本 */
|
||||
--breakpoint-xl: 1280px; /* 桌面 */
|
||||
--breakpoint-2xl: 1536px; /* 大桌面 */
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 七、中国风元素设计
|
||||
|
||||
### 7.1 印章元素
|
||||
|
||||
**Logo/图标区：**
|
||||
- 保留现有红色印章 Logo
|
||||
- 印章可作为页面的"签名"元素出现在适当位置
|
||||
|
||||
**装饰元素：**
|
||||
- 细线方形框（类似传统画框）
|
||||
- 红色点缀线条
|
||||
|
||||
### 7.2 排版风格
|
||||
|
||||
**借鉴东方美学：**
|
||||
- 大标题简洁有力
|
||||
- 适当留白（padding/margin 略大）
|
||||
- 信息层次清晰但不拥挤
|
||||
|
||||
**文字排版：**
|
||||
- 标题：Bold, 紧凑字间距
|
||||
- 正文：Regular, 宽松行高（1.6-1.8）
|
||||
|
||||
### 7.3 色彩呼应
|
||||
|
||||
- 科技蓝紫渐变 = 科技、创新
|
||||
- 印章红 = 诚信、权威、稳重
|
||||
- 深色背景 = 专业、神秘感
|
||||
|
||||
---
|
||||
|
||||
## 八、验收标准
|
||||
|
||||
### 8.1 视觉验收
|
||||
|
||||
- [ ] 深色背景正确显示（#0A0A0A）
|
||||
- [ ] 蓝紫渐变正确应用
|
||||
- [ ] 印章红作为点缀正确使用
|
||||
- [ ] 卡片悬停效果流畅
|
||||
- [ ] 动效优雅不卡顿
|
||||
- [ ] 响应式布局正常
|
||||
|
||||
### 8.2 功能验收
|
||||
|
||||
- [ ] 导航链接正常工作
|
||||
- [ ] CTA 按钮点击正常
|
||||
- [ ] 表单交互正常
|
||||
- [ ] 主题切换正常（如保留）
|
||||
- [ ] 移动端菜单正常
|
||||
|
||||
### 8.3 性能验收
|
||||
|
||||
- [ ] 首屏加载 < 3s
|
||||
- [ ] 动画流畅（60fps）
|
||||
- [ ] 无控制台错误
|
||||
|
||||
---
|
||||
|
||||
## 九、实施优先级
|
||||
|
||||
### Phase 1: 核心视觉
|
||||
1. 更新全局配色系统
|
||||
2. 重构 Hero 区域
|
||||
3. 更新按钮和卡片样式
|
||||
|
||||
### Phase 2: 组件优化
|
||||
4. 优化导航栏
|
||||
5. 更新服务/产品区块
|
||||
6. 添加动效
|
||||
|
||||
### Phase 3: 完善细节
|
||||
7. 响应式优化
|
||||
8. 性能优化
|
||||
9. 跨浏览器测试
|
||||
@@ -0,0 +1,457 @@
|
||||
# Novalon 官网重构实施计划 - 金融科技中国风融合版
|
||||
|
||||
> **For Claude:** REQUIRED SUB-SKILL: Use `executing-plans` to implement this plan task-by-task.
|
||||
> **After each task:** Use `requesting-code-review` skill for code review.
|
||||
|
||||
**Goal:** 将 Novalon 官网升级为金融科技中国风融合设计，包含配色系统、Hero 区域、按钮卡片样式、导航栏、动效等全面优化。
|
||||
|
||||
**Architecture:** 采用渐进式升级策略，从核心配色系统开始，逐步更新 UI 组件、页面布局和动效。使用 Tailwind CSS 的 CSS 变量系统实现主题切换，使用 Framer Motion 实现动效。
|
||||
|
||||
**Tech Stack:** Next.js 16, React 19, TypeScript, Tailwind CSS, Framer Motion, Lucide React
|
||||
|
||||
---
|
||||
|
||||
## Phase 1: 核心配色系统
|
||||
|
||||
### Task 1: 更新全局 CSS 配色变量
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/app/globals.css`
|
||||
|
||||
**Step 1: 更新深色模式配色变量**
|
||||
|
||||
在 `.dark` 类中更新配色变量，添加新的科技渐变色：
|
||||
|
||||
```css
|
||||
.dark {
|
||||
--color-bg-primary: #0A0A0A;
|
||||
--color-bg-secondary: #141414;
|
||||
--color-bg-tertiary: #1A1A1A;
|
||||
--color-bg-elevated: #242424;
|
||||
|
||||
--color-text-primary: #FAFAFA;
|
||||
--color-text-secondary: #D4D4D4;
|
||||
--color-text-tertiary: #A3A3A3;
|
||||
--color-text-muted: #737373;
|
||||
|
||||
--color-border-primary: #262626;
|
||||
--color-border-secondary: #333333;
|
||||
--color-border-accent: #00D9FF;
|
||||
|
||||
--color-brand-primary: #C41E3A;
|
||||
--color-brand-primary-hover: #A01830;
|
||||
--color-brand-primary-light: #E04A68;
|
||||
--color-brand-glow: rgba(196, 30, 58, 0.4);
|
||||
|
||||
--color-tech-blue: #00D9FF;
|
||||
--color-tech-blue-hover: #00B8D9;
|
||||
--color-tech-blue-light: #33E1FF;
|
||||
--color-tech-purple: #A855F7;
|
||||
--color-tech-purple-hover: #9333EA;
|
||||
--color-tech-purple-light: #C084FC;
|
||||
--color-tech-pink: #D946EF;
|
||||
--color-tech-cyan: #06B6D4;
|
||||
}
|
||||
```
|
||||
|
||||
**Step 2: 添加渐变工具类**
|
||||
|
||||
```css
|
||||
@layer utilities {
|
||||
.text-gradient-tech {
|
||||
background: linear-gradient(135deg, #00D9FF 0%, #A855F7 50%, #D946EF 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.bg-gradient-tech {
|
||||
background: linear-gradient(135deg, #00D9FF 0%, #A855F7 100%);
|
||||
}
|
||||
|
||||
.bg-glow-blue {
|
||||
background: radial-gradient(circle at 50% 0%, rgba(0, 217, 255, 0.15) 0%, transparent 50%);
|
||||
}
|
||||
|
||||
.bg-glow-red {
|
||||
background: radial-gradient(circle at 50% 100%, rgba(196, 30, 58, 0.1) 0%, transparent 40%);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Verification:**
|
||||
- Run: `npm run build`
|
||||
- Expected: 构建成功，无 CSS 错误
|
||||
|
||||
---
|
||||
|
||||
### Task 2: 更新 colors.ts 和 gradients.ts
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/lib/colors.ts`
|
||||
- Modify: `src/lib/gradients.ts`
|
||||
|
||||
**Step 1: 更新 colors.ts**
|
||||
|
||||
添加新的科技色彩变量：
|
||||
|
||||
```typescript
|
||||
tech: {
|
||||
blue: {
|
||||
DEFAULT: '#00D9FF',
|
||||
hover: '#00B8D9',
|
||||
light: '#33E1FF',
|
||||
},
|
||||
purple: {
|
||||
DEFAULT: '#A855F7',
|
||||
hover: '#9333EA',
|
||||
light: '#C084FC',
|
||||
},
|
||||
pink: '#D946EF',
|
||||
cyan: '#06B6D4',
|
||||
},
|
||||
brand: {
|
||||
primary: '#C41E3A',
|
||||
hover: '#A01830',
|
||||
light: '#E04A68',
|
||||
glow: 'rgba(196, 30, 58, 0.4)',
|
||||
}
|
||||
```
|
||||
|
||||
**Step 2: 更新 gradients.ts**
|
||||
|
||||
添加新的渐变组合：
|
||||
|
||||
```typescript
|
||||
tech: 'linear-gradient(135deg, #00D9FF 0%, #A855F7 50%, #D946EF 100%)',
|
||||
techSoft: 'linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%)',
|
||||
glowBlue: 'radial-gradient(circle at 50% 0%, rgba(0, 217, 255, 0.15) 0%, transparent 50%)',
|
||||
glowRed: 'radial-gradient(circle at 50% 100%, rgba(196, 30, 58, 0.1) 0%, transparent 40%)',
|
||||
```
|
||||
|
||||
**Verification:**
|
||||
- Run: `npm run build`
|
||||
- Expected: 构建成功，无 TypeScript 错误
|
||||
|
||||
---
|
||||
|
||||
## Phase 2: Hero 区域重构
|
||||
|
||||
### Task 3: 重构 HeroSection 组件
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/components/sections/hero-section.tsx`
|
||||
|
||||
**Step 1: 更新背景层**
|
||||
|
||||
替换现有背景为深色渐变 + 光晕效果：
|
||||
|
||||
```tsx
|
||||
<div className="absolute inset-0 pointer-events-none overflow-hidden">
|
||||
<div className="absolute inset-0 bg-[#0A0A0A]" />
|
||||
|
||||
<div className="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:60px_60px]" />
|
||||
|
||||
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[600px] bg-[radial-gradient(ellipse_at_center,rgba(0,217,255,0.1)_0%,transparent_60%)]" />
|
||||
|
||||
<div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-[600px] h-[400px] bg-[radial-gradient(ellipse_at_center,rgba(196,30,58,0.08)_0%,transparent_50%)]" />
|
||||
</div>
|
||||
```
|
||||
|
||||
**Step 2: 更新标题样式**
|
||||
|
||||
使用渐变文字效果：
|
||||
|
||||
```tsx
|
||||
<h1 className="text-5xl sm:text-6xl lg:text-7xl font-bold tracking-tight mb-6">
|
||||
<span className="text-gradient-tech">睿新致远</span>
|
||||
</h1>
|
||||
<p className="text-xl sm:text-2xl text-[var(--color-text-secondary)] mb-4">
|
||||
企业数字化转型服务商
|
||||
</p>
|
||||
<p className="text-lg text-[var(--color-text-tertiary)] mb-10 max-w-2xl">
|
||||
融合金融科技专业品质与中国传统美学，为您打造卓越的数字体验
|
||||
</p>
|
||||
```
|
||||
|
||||
**Step 3: 更新 CTA 按钮组**
|
||||
|
||||
```tsx
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
|
||||
<button className="px-8 py-4 bg-[#C41E3A] hover:bg-[#A01830] text-white font-semibold rounded-lg transition-all duration-300 hover:-translate-y-0.5 hover:shadow-[0_0_30px_rgba(196,30,58,0.4)]">
|
||||
立即咨询
|
||||
</button>
|
||||
<button className="px-8 py-4 bg-transparent border border-[rgba(0,217,255,0.5)] text-[#00D9FF] font-semibold rounded-lg transition-all duration-300 hover:bg-[rgba(0,217,255,0.1)] hover:border-[#00D9FF] hover:shadow-[0_0_20px_rgba(0,217,255,0.2)]">
|
||||
了解更多
|
||||
</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
**Verification:**
|
||||
- Run: `npm run dev`
|
||||
- Check: Hero 区域显示正确的深色背景和渐变效果
|
||||
|
||||
---
|
||||
|
||||
### Task 4: 添加特性标签组件
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/components/sections/hero-section.tsx`
|
||||
|
||||
**Step 1: 添加特性标签**
|
||||
|
||||
在 CTA 按钮下方添加：
|
||||
|
||||
```tsx
|
||||
<div className="flex flex-wrap gap-4 justify-center lg:justify-start mt-8">
|
||||
{[
|
||||
{ icon: Shield, text: '安全可靠' },
|
||||
{ icon: Zap, text: '高效便捷' },
|
||||
{ icon: Award, text: '专业服务' },
|
||||
].map((feature, index) => (
|
||||
<div key={index} className="flex items-center gap-2 px-4 py-2 rounded-full bg-[var(--color-bg-tertiary)] border border-[var(--color-border-primary)]">
|
||||
<feature.icon className="w-4 h-4 text-[#00D9FF]" />
|
||||
<span className="text-sm text-[var(--color-text-secondary)]">{feature.text}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
```
|
||||
|
||||
**Verification:**
|
||||
- Run: `npm run build`
|
||||
- Expected: 构建成功
|
||||
|
||||
---
|
||||
|
||||
## Phase 3: 按钮和卡片样式
|
||||
|
||||
### Task 5: 更新 Button 组件
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/components/ui/button.tsx`
|
||||
|
||||
**Step 1: 添加新的变体样式**
|
||||
|
||||
```tsx
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center rounded-lg font-semibold transition-all duration-300",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-[#C41E3A] text-white hover:bg-[#A01830] hover:-translate-y-0.5 hover:shadow-[0_0_30px_rgba(196,30,58,0.4)]",
|
||||
secondary: "bg-[var(--color-bg-tertiary)] text-[var(--color-text-primary)] border border-[var(--color-border-primary)] hover:border-[#00D9FF] hover:shadow-[0_0_20px_rgba(0,217,255,0.2)]",
|
||||
outline: "bg-transparent border border-[rgba(0,217,255,0.5)] text-[#00D9FF] hover:bg-[rgba(0,217,255,0.1)] hover:border-[#00D9FF] hover:shadow-[0_0_20px_rgba(0,217,255,0.2)]",
|
||||
gradient: "bg-gradient-to-r from-[#00D9FF] to-[#A855F7] text-white hover:shadow-[0_0_30px_rgba(0,217,255,0.3)]",
|
||||
ghost: "bg-transparent text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-elevated)]",
|
||||
},
|
||||
size: {
|
||||
default: "h-10 px-6 py-2",
|
||||
sm: "h-8 px-4 text-sm",
|
||||
lg: "h-12 px-8 text-lg",
|
||||
},
|
||||
},
|
||||
}
|
||||
)
|
||||
```
|
||||
|
||||
**Verification:**
|
||||
- Run: `npm run build`
|
||||
- Expected: 构建成功
|
||||
|
||||
---
|
||||
|
||||
### Task 6: 更新 Card 组件
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/components/ui/card.tsx`
|
||||
|
||||
**Step 1: 更新卡片样式**
|
||||
|
||||
```tsx
|
||||
const cardVariants = cva(
|
||||
"rounded-2xl bg-[var(--color-bg-tertiary)] border border-[var(--color-border-primary)] transition-all duration-300",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "hover:border-[#00D9FF] hover:-translate-y-1 hover:shadow-[0_0_40px_rgba(0,217,255,0.1)]",
|
||||
elevated: "bg-[var(--color-bg-secondary)] shadow-lg",
|
||||
interactive: "cursor-pointer hover:border-[#00D9FF] hover:-translate-y-1 hover:shadow-[0_0_40px_rgba(0,217,255,0.1)]",
|
||||
},
|
||||
},
|
||||
}
|
||||
)
|
||||
```
|
||||
|
||||
**Verification:**
|
||||
- Run: `npm run build`
|
||||
- Expected: 构建成功
|
||||
|
||||
---
|
||||
|
||||
## Phase 4: 导航栏优化
|
||||
|
||||
### Task 7: 更新 Header 组件
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/components/layout/header.tsx`
|
||||
|
||||
**Step 1: 更新导航栏样式**
|
||||
|
||||
```tsx
|
||||
<header className="fixed top-0 left-0 right-0 z-50 h-16 bg-[rgba(10,10,10,0.8)] backdrop-blur-xl border-b border-[var(--color-border-primary)]">
|
||||
<nav className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-full flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 rounded bg-[#C41E3A] flex items-center justify-center">
|
||||
<span className="text-white font-bold text-sm">睿</span>
|
||||
</div>
|
||||
<span className="text-[var(--color-text-primary)] font-semibold text-lg">Novalon</span>
|
||||
</div>
|
||||
|
||||
<div className="hidden md:flex items-center gap-8">
|
||||
{navLinks.map((link) => (
|
||||
<a
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
className="text-[var(--color-text-secondary)] hover:text-[#00D9FF] transition-colors duration-200"
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<button className="px-4 py-2 bg-[#C41E3A] hover:bg-[#A01830] text-white font-medium rounded-lg transition-all duration-300 hover:shadow-[0_0_20px_rgba(196,30,58,0.3)]">
|
||||
联系我们
|
||||
</button>
|
||||
</nav>
|
||||
</header>
|
||||
```
|
||||
|
||||
**Verification:**
|
||||
- Run: `npm run dev`
|
||||
- Check: 导航栏显示正确的样式
|
||||
|
||||
---
|
||||
|
||||
## Phase 5: 服务区块优化
|
||||
|
||||
### Task 8: 更新 ServicesSection 组件
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/components/sections/services-section.tsx`
|
||||
|
||||
**Step 1: 更新服务卡片样式**
|
||||
|
||||
```tsx
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{services.map((service, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="group p-6 rounded-2xl bg-[var(--color-bg-tertiary)] border border-[var(--color-border-primary)] transition-all duration-300 hover:border-[#00D9FF] hover:-translate-y-1 hover:shadow-[0_0_40px_rgba(0,217,255,0.1)]"
|
||||
>
|
||||
<div className="w-12 h-12 rounded-xl bg-gradient-to-br from-[rgba(0,217,255,0.1)] to-[rgba(168,85,247,0.1)] flex items-center justify-center mb-4 group-hover:shadow-[0_0_20px_rgba(0,217,255,0.2)] transition-shadow duration-300">
|
||||
<service.icon className="w-6 h-6 text-[#00D9FF]" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-[var(--color-text-primary)] mb-2">
|
||||
{service.title}
|
||||
</h3>
|
||||
<p className="text-[var(--color-text-tertiary)] text-sm">
|
||||
{service.description}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
```
|
||||
|
||||
**Verification:**
|
||||
- Run: `npm run build`
|
||||
- Expected: 构建成功
|
||||
|
||||
---
|
||||
|
||||
## Phase 6: 动效添加
|
||||
|
||||
### Task 9: 添加滚动动画效果
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/hooks/use-scroll-reveal.ts`
|
||||
|
||||
**Step 1: 优化滚动动画参数**
|
||||
|
||||
```typescript
|
||||
export function useScrollReveal(options = {}) {
|
||||
const defaultOptions = {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px',
|
||||
triggerOnce: true,
|
||||
};
|
||||
|
||||
return useIntersectionObserver({
|
||||
...defaultOptions,
|
||||
...options,
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
**Step 2: 在组件中应用动画**
|
||||
|
||||
使用 Framer Motion 添加进入动画：
|
||||
|
||||
```tsx
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
|
||||
>
|
||||
{/* 内容 */}
|
||||
</motion.div>
|
||||
```
|
||||
|
||||
**Verification:**
|
||||
- Run: `npm run dev`
|
||||
- Check: 滚动动画流畅
|
||||
|
||||
---
|
||||
|
||||
## Phase 7: 最终验证
|
||||
|
||||
### Task 10: 全面测试和构建验证
|
||||
|
||||
**Step 1: 运行构建**
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
**Step 2: 运行 lint**
|
||||
|
||||
```bash
|
||||
npm run lint
|
||||
```
|
||||
|
||||
**Step 3: 本地预览**
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
**Verification:**
|
||||
- 构建成功
|
||||
- 无 lint 错误
|
||||
- 页面显示正确
|
||||
- 动画流畅
|
||||
|
||||
---
|
||||
|
||||
## 验收标准
|
||||
|
||||
- [ ] 深色背景正确显示 (#0A0A0A)
|
||||
- [ ] 蓝紫渐变正确应用
|
||||
- [ ] 印章红作为点缀正确使用
|
||||
- [ ] 卡片悬停效果流畅
|
||||
- [ ] 动效优雅不卡顿
|
||||
- [ ] 响应式布局正常
|
||||
- [ ] 导航链接正常工作
|
||||
- [ ] CTA 按钮点击正常
|
||||
- [ ] 首屏加载 < 3s
|
||||
- [ ] 无控制台错误
|
||||
Reference in New Issue
Block a user