novalon-website/docs/plans/2026-02-22-website-design-optimization.md

# 网站设计优化实施计划

> **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): 构建和检查

每个任务都设计为独立可验证，确保逐步改进网站设计。