novalon-website/docs/plans/2026-02-22-wickret-implementation-plan.md

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 类中更新配色变量，添加新的科技渐变色：

.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: 添加渐变工具类

@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

添加新的科技色彩变量：

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

添加新的渐变组合：

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: 更新背景层

替换现有背景为深色渐变 + 光晕效果：

<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: 更新标题样式

使用渐变文字效果：

<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 按钮组

<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 按钮下方添加：

<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: 添加新的变体样式

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

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: 更新导航栏样式

<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: 更新服务卡片样式

<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: 优化滚动动画参数

export function useScrollReveal(options = {}) {
  const defaultOptions = {
    threshold: 0.1,
    rootMargin: '0px 0px -50px 0px',
    triggerOnce: true,
  };
  
  return useIntersectionObserver({
    ...defaultOptions,
    ...options,
  });
}

Step 2: 在组件中应用动画

使用 Framer Motion 添加进入动画：

<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: 运行构建

npm run build

Step 2: 运行 lint

npm run lint

Step 3: 本地预览

npm run dev

Verification:

• 构建成功
• 无 lint 错误
• 页面显示正确
• 动画流畅

---

验收标准

• 深色背景正确显示 (#0A0A0A)
• 蓝紫渐变正确应用
• 印章红作为点缀正确使用
• 卡片悬停效果流畅
• 动效优雅不卡顿
• 响应式布局正常
• 导航链接正常工作
• CTA 按钮点击正常
• 首屏加载 < 3s
• 无控制台错误