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: 添加新的深色主题色彩变量

/* 在 :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: 添加渐变背景和文字工具类

@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: 替换背景为深色渐变

// 替换现有的浅色背景
className="relative min-h-screen flex items-center pt-16 overflow-hidden bg-dark-bg"

Step 2: 添加新的光效元素

<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: 更新标题样式为渐变文字

<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: 更新描述文字

<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: 更新主按钮样式

<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: 更新次按钮样式

<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: 更新统计区背景和样式

<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 样式

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 变体

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: 更新区域背景和标题

<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: 更新服务卡片布局

<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: 更新背景为深色

<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: 更新文字颜色

<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: 更新产品卡片样式

<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: 更新背景和样式

<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: 更新表单样式

<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 背景

<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: 更新导航链接颜色

<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 背景

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

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