style(theme): 更新网站主题色彩方案与字体配置

- 调整主色调从 #1C1C1C 至 #1A1A1A，优化视觉层次 - 更新背景色系为暖白色调 (#FAFAF7, #F5F4F0 等) - 配置中文字体栈，添加 serif 字体支持 - 优化文本颜色梯度，提升可读性 - 调整边框颜色，统一水墨风格 - 添加 Google Search Console 验证码配置项 - 新增桌面应用架构专家代理配置文件 - 重构 E2E 测试等待策略，提升稳定性 - 添加回归测试脚本，增强质量保障
2026-06-17 11:37:25 +08:00
parent a3cc4c9d43
commit 415a103a24
50 changed files with 3651 additions and 1186 deletions
@@ -2,8 +2,8 @@ export const COMPANY_INFO = {
  name: '四川睿新致远科技有限公司',
  shortName: '睿新致遠',
  displayName: '睿新致远',
-  slogan: '智连未来，成长伙伴',
-  description: '以智慧连接数字趋势，以伙伴身份陪您成长——您的数字化转型同行者',
+  slogan: '企业数字化转型的同行者',
+  description: '12年行业深耕，大厂背景团队，以结果导向的服务理念，做企业数字化转型的同行者与成长伙伴',
  founded: '2026',
  location: '四川省成都市',
  email: 'contact@novalon.cn',
@@ -1,3 +1,7 @@
+// Design System Constants — L3 Detail Pages
+// Color tokens reference global CSS variables for dark-mode support.
+// Layout / spacing / animation / easing remain as JS constants.
+
 export const DESIGN_SYSTEM = {
  animation: {
    duration: {
@@ -35,32 +39,33 @@ export const DESIGN_SYSTEM = {
    },
  },

+  // Typography classes reference CSS variables for theme-aware sizing
  typography: {
    hero: {
-      title: 'text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight',
-      subtitle: 'text-lg md:text-xl text-stone-600 leading-relaxed',
-      description: 'text-base text-stone-500 mt-4 max-w-2xl',
+      title: 'text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight text-[var(--color-text-primary)]',
+      subtitle: 'text-lg md:text-xl leading-relaxed text-[var(--color-text-secondary)]',
+      description: 'text-base mt-4 max-w-2xl text-[var(--color-text-muted)]',
    },
    section: {
-      title: 'text-3xl md:text-4xl font-bold tracking-tight',
-      subtitle: 'text-lg text-gray-600 mt-2',
-      body: 'text-base leading-relaxed text-gray-700',
+      title: 'text-3xl md:text-4xl font-bold tracking-tight text-[var(--color-text-primary)]',
+      subtitle: 'text-lg mt-2 text-[var(--color-text-secondary)]',
+      body: 'text-base leading-relaxed text-[var(--color-text-secondary)]',
    },
    card: {
-      title: 'text-lg font-semibold',
-      description: 'text-sm text-gray-600 leading-relaxed',
+      title: 'text-lg font-semibold text-[var(--color-text-primary)]',
+      description: 'text-sm leading-relaxed text-[var(--color-text-muted)]',
    },
  },

  effects: {
    inkGlow: {
-      border: 'conic-gradient(from var(--angle), transparent 0%, #C41E3A 10%, transparent 20%)',
-      glow: 'radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(196, 30, 58, 0.15) 0%, transparent 50%)',
+      border: 'conic-gradient(from var(--angle), transparent 0%, var(--color-brand-primary) 10%, transparent 20%)',
+      glow: 'radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(var(--color-brand-primary-rgb), 0.15) 0%, transparent 50%)',
      speed: '3s',
    },
    hover: {
      translateY: '-4px',
-      shadow: 'shadow-xl shadow-gray-200/50',
+      shadow: 'shadow-xl shadow-[var(--color-shadow-color)]',
      transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
    },
    scroll: {
@@ -68,7 +73,7 @@ export const DESIGN_SYSTEM = {
        initial: { opacity: 0, y: 24 },
        animate: { opacity: 1, y: 0 },
        viewport: { once: true, margin: '-80px' },
-        transition: { duration: 0.6, ease: [0.4, 0, 0.2, 1] as const },
+        transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] as const },
      },
      staggerChildren: {
        delay: 0.08,
@@ -76,24 +81,26 @@ export const DESIGN_SYSTEM = {
    },
  },

+  // Color references map to CSS custom properties defined in globals.css
+  // These are used for inline styles where Tailwind classes aren't feasible
  colors: {
    brand: {
-      primary: '#C41E3A',
-      light: 'rgba(196, 30, 58, 0.08)',
-      lighter: 'rgba(196, 30, 58, 0.04)',
-      gradient: 'linear-gradient(135deg, #C41E3A 0%, #99182d 100%)',
+      primary: 'var(--color-brand-primary)',
+      light: 'var(--color-brand-primary-bg)',
+      lighter: 'rgba(var(--color-brand-primary-rgb), 0.04)',
+      gradient: 'linear-gradient(135deg, var(--color-brand-primary) 0%, #99182d 100%)',
    },
    neutral: {
-      50: '#fafafa',
-      100: '#f5f5f5',
-      200: '#e5e5e5',
-      300: '#d4d4d4',
-      400: '#a3a3a3',
-      500: '#737373',
-      600: '#525252',
-      700: '#404040',
-      800: '#262626',
-      900: '#171717',
+      50: 'var(--color-bg-primary)',
+      100: 'var(--color-bg-section)',
+      200: 'var(--color-border-primary)',
+      300: 'var(--color-text-hint)',
+      400: 'var(--color-text-subtle)',
+      500: 'var(--color-text-muted)',
+      600: 'var(--color-text-secondary)',
+      700: 'var(--color-text-primary)',
+      800: 'var(--color-text-primary)',
+      900: 'var(--color-text-primary)',
    },
    ink: {
      light: 'rgba(0, 0, 0, 0.03)',
@@ -104,29 +111,29 @@ export const DESIGN_SYSTEM = {

  components: {
    card: {
-      base: 'bg-white rounded-2xl border border-gray-100 overflow-hidden transition-all duration-300',
-      hover: 'hover:border-gray-200 hover:shadow-lg hover:-translate-y-1',
+      base: 'rounded-2xl border border-[var(--color-border-primary)] overflow-hidden transition-all duration-300 bg-[var(--color-surface-primary)]',
+      hover: 'hover:border-[rgba(var(--color-brand-primary-rgb),0.2)] hover:shadow-lg hover:-translate-y-1',
      padding: 'p-6 lg:p-8',
    },
    badge: {
      base: 'inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium',
      variants: {
-        primary: 'bg-red-50 text-red-700',
-        secondary: 'bg-gray-100 text-gray-700',
+        primary: 'bg-[var(--color-brand-primary-bg)] text-[var(--color-brand-primary)]',
+        secondary: 'bg-[var(--color-bg-tertiary)] text-[var(--color-text-secondary)]',
        success: 'bg-green-50 text-green-700',
        warning: 'bg-yellow-50 text-yellow-700',
      },
    },
    button: {
-      primary: 'inline-flex items-center gap-2 px-6 py-3 bg-[#C41E3A] text-white font-semibold rounded-lg shadow-md hover:bg-[#99182d] hover:shadow-lg transition-all duration-200',
-      secondary: 'inline-flex items-center gap-2 px-6 py-3 bg-white text-gray-700 font-semibold rounded-lg border border-gray-300 hover:border-gray-400 hover:shadow-sm transition-all duration-200',
-      ghost: 'inline-flex items-center gap-2 px-4 py-2 text-[#C41E3A] font-medium hover:bg-red-50 rounded-lg transition-colors duration-200',
+      primary: 'inline-flex items-center gap-2 px-6 py-3 text-white font-semibold rounded-lg shadow-md transition-all duration-200 bg-[var(--color-brand-primary)] hover:brightness-110 hover:shadow-lg',
+      secondary: 'inline-flex items-center gap-2 px-6 py-3 font-semibold rounded-lg border transition-all duration-200 bg-[var(--color-surface-primary)] text-[var(--color-text-secondary)] border-[var(--color-border-primary)] hover:border-[var(--color-text-hint)] hover:shadow-sm',
+      ghost: 'inline-flex items-center gap-2 px-4 py-2 font-medium rounded-lg transition-colors duration-200 text-[var(--color-brand-primary)] hover:bg-[var(--color-brand-primary-bg)]',
    },
    metric: {
-      container: 'text-center p-6 bg-gradient-to-br from-gray-50 to-white rounded-xl border border-gray-100',
-      value: 'text-3xl md:text-4xl font-bold text-gray-900 mb-1',
-      label: 'text-sm text-gray-500',
-      description: 'text-xs text-gray-400 mt-1',
+      container: 'text-center p-6 rounded-xl border bg-[var(--color-bg-section)] border-[var(--color-border-primary)]',
+      value: 'text-3xl md:text-4xl font-bold mb-1 text-[var(--color-text-primary)]',
+      label: 'text-sm text-[var(--color-text-subtle)]',
+      description: 'text-xs mt-1 text-[var(--color-text-hint)]',
    },
  },
 };
@@ -40,9 +40,9 @@ export const SERVICES: Service[] = [
  {
    id: 'software',
    title: '软件开发',
-    description: '提供定制化软件开发服务，包括Web应用、移动应用、企业管理系统等',
+    description: '从需求分析到上线运维，全栈定制化开发。用扎实的工程能力交付高质量软件，确保每个项目都能创造真实业务价值。',
    icon: Code,
-    overview: '我们提供全方位的软件开发服务，从前端到后端，从设计到部署，为企业打造高质量的软件解决方案。',
+    overview: '我们提供全方位的软件开发服务，从前端到后端，从设计到部署，为企业打造高质量的软件解决方案。12年工程经验保障，95%+准时交付率。',
    features: [
      '定制化开发：根据企业需求量身定制，确保完美契合业务场景',
      '全栈技术：精通前后端技术栈，提供一站式开发服务',
@@ -83,9 +83,9 @@ export const SERVICES: Service[] = [
  {
    id: 'data',
    title: '数据分析',
-    description: '提供大数据分析服务，帮助企业挖掘数据价值，支持决策制定',
+    description: '让数据从“存着”变成“用着”。多源数据整合、可视化看板、预测模型，为经营决策提供可量化的洞察支撑。',
    icon: BarChart3,
-    overview: '利用先进的数据分析技术和工具，帮助企业从海量数据中提取有价值的洞察，驱动业务决策和创新。',
+    overview: '利用先进的数据分析技术和工具，帮助企业从海量数据中提取有价值的洞察，驱动业务决策和创新。已为客户开发100+分析模型。',
    features: [
      '数据整合：整合多源数据，构建统一数据平台',
      '数据清洗：专业数据清洗和预处理服务',
@@ -126,9 +126,9 @@ export const SERVICES: Service[] = [
  {
    id: 'consulting',
    title: '技术咨询',
-    description: '提供企业数字化转型技术咨询，帮助企业制定科学的IT战略和技术路线图',
+    description: 'IT 战略规划、技术选型评估、数字化转型路线图——帮您理清方向，规避技术风险，减少试错成本。90%+方案成功落地。',
    icon: Lightbulb,
-    overview: '凭借丰富的行业经验和技术积累，为企业提供专业的技术咨询服务，帮助企业理清数字化转型方向，规避技术风险，实现技术与业务的深度融合。',
+    overview: '凭借12年行业经验和技术积累，为企业提供专业的技术咨询服务，帮助企业理清数字化转型方向，规避技术风险，实现技术与业务的深度融合。',
    features: [
      'IT战略规划：制定与企业发展战略匹配的IT规划',
      '技术选型评估：客观评估技术方案，选择最优技术栈',
@@ -169,9 +169,9 @@ export const SERVICES: Service[] = [
  {
    id: 'solutions',
    title: '行业方案实施',
-    description: '提供行业定制化方案落地实施服务，覆盖金融、制造、零售、医疗等多个领域',
+    description: '深耕制造、零售、金融、医疗等行业，提供从咨询到落地的端到端交付。累计交付30+行业方案，确保方案不只是PPT。',
    icon: Puzzle,
-    overview: '基于对各行业业务场景的深入理解，我们提供从咨询到实施的一站式行业解决方案，帮助企业快速实现业务价值。',
+    overview: '基于对各行业业务场景的深入理解，我们提供从咨询到实施的一站式行业解决方案，帮助企业快速实现业务价值。8年+行业深耕经验。',
    features: [
      '行业深耕：深耕金融、制造、零售、医疗等重点行业',
      '场景化方案：针对具体业务场景提供定制化解决方案',