feat: 优化全局样式与组件视觉升级

- 更新 globals.css 全局样式
- 优化 not-found 404 页面
- 升级 footer, mega-dropdown, mobile-tab-bar 布局组件
- 改进 challenge, cta, hero 等核心 section 组件
- 优化 challenge-card, ink-glow-card, product-card 等 UI 组件
- 更新产品常量配置

src/components/ui/product-card.tsx

@@ -14,29 +14,25 @@ interface ProductCardProps {
 
 interface ProductStyleConfig {
   icon: LucideIcon;
-  accentColor: string;
-  accentColorRgb: string;
-  glowStart: string;
-  glowEnd: string;
+  iconBgOpacity: number;
 }
 
-const productConfig: ProductStyleConfig[] = [
-  { icon: Database, accentColor: 'var(--color-brand-primary)', accentColorRgb: '196, 30, 58', glowStart: 'var(--color-brand-primary)', glowEnd: 'var(--color-warning)' },
-  { icon: Users, accentColor: 'var(--color-warning)', accentColorRgb: '217, 119, 6', glowStart: 'var(--color-warning)', glowEnd: 'var(--color-success)' },
-  { icon: FileText, accentColor: 'var(--color-accent-blue)', accentColorRgb: '37, 99, 235', glowStart: 'var(--color-accent-blue)', glowEnd: 'var(--color-accent-purple)' },
-  { icon: BarChart3, accentColor: 'var(--color-success)', accentColorRgb: '22, 163, 74', glowStart: 'var(--color-success)', glowEnd: 'var(--color-accent-cyan)' },
-  { icon: Truck, accentColor: 'var(--color-accent-purple)', accentColorRgb: '124, 58, 237', glowStart: 'var(--color-accent-purple)', glowEnd: 'var(--color-brand-primary)' },
-  { icon: Building2, accentColor: 'var(--color-accent-cyan)', accentColorRgb: '8, 145, 178', glowStart: 'var(--color-accent-cyan)', glowEnd: 'var(--color-accent-blue)' },
-];
+const productIcons: LucideIcon[] = [Database, Users, FileText, BarChart3, Truck, Building2];
+
+const productConfig: ProductStyleConfig[] = productIcons.map((icon, i) => ({
+  icon,
+  iconBgOpacity: 0.04 + i * 0.015,
+}));
 
 const defaultConfig: ProductStyleConfig = {
-  icon: Database, accentColor: 'var(--color-brand-primary)', accentColorRgb: '196, 30, 58', glowStart: 'var(--color-brand-primary)', glowEnd: 'var(--color-warning)',
+  icon: Database,
+  iconBgOpacity: 0.06,
 };
 
 const statusConfig = {
-  '研发中': { bg: 'rgba(var(--color-brand-primary-rgb), 0.08)', text: 'var(--color-brand-primary)', border: 'rgba(var(--color-brand-primary-rgb), 0.15)' },
-  '内测中': { bg: 'rgba(var(--color-warning-rgb), 0.08)', text: 'var(--color-warning)', border: 'rgba(var(--color-warning-rgb), 0.15)' },
-  '已发布': { bg: 'rgba(var(--color-success-rgb), 0.08)', text: 'var(--color-success)', border: 'rgba(var(--color-success-rgb), 0.15)' },
+  '研发中': { bg: 'rgba(var(--color-brand-primary-rgb), 0.06)', text: 'var(--color-brand-primary)', border: 'rgba(var(--color-brand-primary-rgb), 0.12)' },
+  '内测中': { bg: 'rgba(var(--color-warning-rgb), 0.06)', text: 'var(--color-warning)', border: 'rgba(var(--color-warning-rgb), 0.12)' },
+  '已发布': { bg: 'rgba(var(--color-success-rgb), 0.06)', text: 'var(--color-success)', border: 'rgba(var(--color-success-rgb), 0.12)' },
 } as const;
 
 export function ProductCard({ title, description, href, index, status }: ProductCardProps) {
@@ -48,19 +44,15 @@ export function ProductCard({ title, description, href, index, status }: Product
     <InkGlowCard
       index={index}
       href={href}
-      accentColorRgb={config.accentColorRgb}
-      glowStart={config.glowStart}
-      glowEnd={config.glowEnd}
     >
       <div className="p-6 md:p-8">
         <div className="flex items-start justify-between mb-5">
           <div
             className="w-11 h-11 rounded-xl flex items-center justify-center"
-            style={{ backgroundColor: `rgba(${config.accentColorRgb}, 0.06)` }}
+            style={{ backgroundColor: `rgba(var(--color-brand-primary-rgb), ${config.iconBgOpacity})` }}
           >
             <IconComponent
-              className="w-5 h-5"
-              style={{ color: config.accentColor }}
+              className="w-5 h-5 text-[var(--color-brand-primary)]"
               strokeWidth={1.8}
             />
           </div>
@@ -91,7 +83,7 @@ export function ProductCard({ title, description, href, index, status }: Product
           {description}
         </p>
 
-        <div className="flex items-center gap-1.5 text-sm font-medium text-[var(--color-text-subtle)] group-hover:text-[var(--color-brand-primary)] transition-colors">
+        <div className="flex items-center gap-1.5 text-sm font-medium text-[var(--color-text-subtle)] group-hover:text-[var(--color-brand-primary)] transition-colors min-h-[44px]">
           <span>了解规划</span>
           <ArrowUpRight className="w-4 h-4" strokeWidth={2} />
         </div>