feat: V2/V3组件体系与水墨雅致视觉改造

- 新增detail-v2组件库(HeroV2/V3, TrustSectionV2, CTASectionV2等)
- Hero组件水墨雅致改造:浅色宣纸底/深色墨色文字/墨韵纹理
- 方案卡片添加推荐组合徽标(Package图标)
- 独立产品页从V1组件迁移到V2/V3
- 修复why-us-section未使用导入和ESLint引号转义错误

src/components/layout/header.tsx

@@ -89,17 +89,19 @@ function HeaderContent() {
           <div className="flex items-center justify-between h-16">
             <StaticLink
               href="/"
-              className="flex items-center group"
+              className="relative flex items-center group/logo"
               aria-label="返回首页"
             >
+              <div className="absolute inset-0 rounded-lg bg-[var(--color-brand-primary)] opacity-0 group-hover/logo:opacity-5 blur-xl transition-all duration-500 scale-75 group-hover/logo:scale-100" />
               <Image
-                src={resolvedTheme === 'dark' ? '/logo-light.svg' : '/logo.svg'}
+                src="/logo.svg"
                 alt={COMPANY_INFO.name}
                 width={120}
                 height={30}
-                className="transition-transform duration-200 group-hover:scale-105 w-auto h-8 md:h-8"
+                className={`relative transition-all duration-300 group-hover/logo:scale-105 w-auto h-8 md:h-8 ${resolvedTheme === 'dark' ? 'dark:invert dark:brightness-0 dark:hue-rotate-180' : ''}`}
                 loading="eager"
                 priority
+                suppressHydrationWarning
               />
             </StaticLink>
 
@@ -109,7 +111,7 @@ function HeaderContent() {
                   <MegaDropdown
                     key={item.id}
                     label={item.label}
-                    items={MEGA_DROPDOWN_DATA[item.dropdownKey!] ?? []}
+                    groups={MEGA_DROPDOWN_DATA[item.dropdownKey!] ?? []}
                     isOpen={openDropdown === item.id}
                     onToggle={() => {
                       setOpenDropdown((prev) => prev === item.id ? null : item.id);
@@ -118,32 +120,33 @@ function HeaderContent() {
                     onClose={() => setOpenDropdown((prev) => prev === item.id ? null : prev)}
                   />
                 ) : (
-                  <StaticLink
-                    key={item.id}
-                    href={item.href}
-                    onClick={(e) => handleNavClick(e, item)}
-                    className={`
-                      relative px-3 py-1.5 text-sm font-medium
-                      transition-all duration-300
-                      ${isActive(item)
-                        ? 'text-[var(--color-text-primary)]'
-                        : 'text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]'
-                      }
-                    `}
-                    aria-current={isActive(item) ? 'page' : undefined}
-                  >
-                    {item.label}
-                    <span
+                  <div key={item.id} className="-mx-2 px-2 py-2">
+                    <StaticLink
+                      href={item.href}
+                      onClick={(e) => handleNavClick(e, item)}
                       className={`
-                        absolute bottom-0 left-1/2 -translate-x-1/2 w-6 h-0.5 bg-[var(--color-brand-primary)] rounded-full
-                        transition-all duration-200 ease-out
+                        relative block px-3 py-1.5 text-sm font-medium
+                        transition-all duration-300 rounded-md
                         ${isActive(item)
-                          ? 'opacity-100 scale-x-100'
-                          : 'opacity-0 scale-x-0'
+                          ? 'text-[var(--color-text-primary)] bg-[var(--color-brand-primary-bg)]'
+                          : 'text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-hover)]'
                         }
                       `}
-                    />
-                  </StaticLink>
+                      aria-current={isActive(item) ? 'page' : undefined}
+                    >
+                      {item.label}
+                      <span
+                        className={`
+                          absolute bottom-0 left-1/2 -translate-x-1/2 w-6 h-0.5 bg-[var(--color-brand-primary)] rounded-full
+                          transition-all duration-200 ease-out
+                          ${isActive(item)
+                            ? 'opacity-100 scale-x-100'
+                            : 'opacity-0 scale-x-0'
+                          }
+                        `}
+                      />
+                    </StaticLink>
+                  </div>
                 )
               ))}
             </nav>