feat(layout): 重构布局组件体系与数据层

- 重构 Header 导航、Footer 页脚、MobileMenu 移动端菜单
- 新增 MobileTabBar 移动端底部导航栏
- 更新 MegaDropdown 大型下拉导航
- 重构 SEO 结构化数据组件
- 更新数据层常量 (products, services, solutions, navigation 等)
- 新增 useCountUp 数字递增 Hook
- 修复 .gitignore 中 src/lib 被错误忽略的问题

src/components/layout/footer.tsx

@@ -1,76 +1,51 @@
+'use client';
+
 import { StaticLink } from '@/components/ui/static-link';
 import Image from 'next/image';
 import { Mail, MapPin } from 'lucide-react';
-import { COMPANY_INFO, NAVIGATION_V2, MEGA_DROPDOWN_DATA } from '@/lib/constants';
+import { useSiteConfig } from '@/lib/site-config';
 
 export function Footer() {
+  const config = useSiteConfig();
+  const productItems = (config.megaDropdown.products ?? [])
+    .flatMap(group => group.items)
+    .filter(item => item.href !== '#');
+
+  const solutionItems = (config.megaDropdown.solutions ?? [])
+    .flatMap(group => group.items);
+
   return (
-    <footer className="bg-[var(--color-footer-bg)] text-[var(--color-footer-text)] py-12 md:py-16 relative" data-testid="footer" role="contentinfo">
-      {/* Ink texture overlay */}
-      <div className="absolute inset-0 bg-paper-texture opacity-30 pointer-events-none" />
-      <div className="container-wide">
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-10 lg:gap-8">
-          <div data-testid="card-brand" className="lg:col-span-2 relative z-10">
+    <footer className="bg-[#0A0E14] text-white relative overflow-hidden" data-testid="footer" role="contentinfo">
+      <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
+        <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-12 gap-10 lg:gap-12 py-16 lg:py-20">
+          <div data-testid="card-brand" className="col-span-2 lg:col-span-4">
             <div className="mb-6">
-              <Image
-                src="/logo-light.svg"
-                alt={COMPANY_INFO.name}
-                width={160}
-                height={40}
-                loading="eager"
-                priority
-              />
-            </div>
-            <p className="text-[var(--color-footer-text)] text-sm leading-relaxed mb-6">
-              {COMPANY_INFO.description}
-            </p>
-            <div className="pt-6 border-t border-[var(--color-footer-border)]">
-              <p className="text-sm text-[var(--color-footer-text)] mb-3">关注公众号</p>
-              <div className="inline-block p-2 rounded-lg border border-[var(--color-footer-border)]">
+              <StaticLink href="/" className="inline-block group" aria-label="返回首页">
                 <Image
-                  src="/images/qrcode_for_gh_a297181ff548_258.jpg"
-                  alt="微信公众号二维码"
-                  width={100}
-                  height={100}
-                  className="w-25 h-25"
-                  loading="lazy"
+                  src="/logo.svg"
+                  alt={config.name}
+                  width={180}
+                  height={45}
+                  className="w-auto h-10 md:h-12 transition-transform duration-normal ease-out group-hover:scale-[1.02]"
+                  loading="eager"
+                  priority
                 />
-              </div>
+              </StaticLink>
             </div>
+            <p className="text-gray-300 text-sm leading-relaxed max-w-md">
+              {config.description}
+            </p>
           </div>
 
-          <div data-testid="card-navigation" className="relative z-10">
-            <h3 className="font-semibold text-base mb-5 text-[var(--color-footer-text-link)]">快速导航</h3>
-            <ul className="space-y-3">
-              {NAVIGATION_V2.map((item) => (
+          <div data-testid="card-products" className="lg:col-span-2">
+            <h3 className="font-semibold text-sm mb-5 text-white tracking-widest uppercase">产品</h3>
+            <ul className="space-y-3 [&_li]:p-0 [&_li]:m-0 [&_li]:static [&_li::before]:hidden">
+              {productItems.map((item) => (
                 <li key={item.id}>
                   <StaticLink
                     href={item.href}
-                    className="text-[var(--color-footer-text)] hover:text-[var(--color-footer-text-link)] transition-colors duration-200 text-sm"                  >
-                    {item.label}
-                  </StaticLink>
-                </li>
-              ))}
-            </ul>
-          </div>
-
-          <div data-testid="card-products" className="relative z-10">
-            <h3 className="font-semibold text-base mb-5 text-[var(--color-footer-text-link)]">产品与方案</h3>
-            <ul className="space-y-3">
-              {(MEGA_DROPDOWN_DATA.products ?? []).flatMap(group => group.items).filter(item => item.href !== '#').map((item) => (
-                <li key={item.id}>
-                  <StaticLink
-                    href={item.href}
-                    className="text-[var(--color-footer-text)] hover:text-[var(--color-footer-text-link)] transition-colors duration-200 text-sm"                  >
-                    {item.title}
-                  </StaticLink>
-                </li>
-              ))}
-              {(MEGA_DROPDOWN_DATA.solutions ?? []).flatMap(group => group.items).map((item) => (
-                <li key={item.id}>
-                  <StaticLink
-                    href={item.href}
-                    className="text-[var(--color-footer-text)] hover:text-[var(--color-footer-text-link)] transition-colors duration-200 text-sm"                  >
+                    className="text-gray-300 hover:text-white transition-colors duration-200 text-sm whitespace-nowrap"
+                  >
                     {item.title}
                   </StaticLink>
                 </li>
@@ -78,27 +53,48 @@ export function Footer() {
             </ul>
           </div>
 
-          <div data-testid="card-contact" className="relative z-10">
-            <h3 className="font-semibold text-base mb-5 text-[var(--color-footer-text-link)]">联系方式</h3>
-            <ul className="space-y-4">
+          <div data-testid="card-solutions" className="lg:col-span-2">
+            <h3 className="font-semibold text-sm mb-5 text-white tracking-widest uppercase">解决方案</h3>
+            <ul className="space-y-3 [&_li]:p-0 [&_li]:m-0 [&_li]:static [&_li::before]:hidden">
+              {solutionItems.map((item) => (
+                <li key={item.id}>
+                  <StaticLink
+                    href={item.href}
+                    className="text-gray-300 hover:text-white transition-colors duration-200 text-sm whitespace-nowrap"
+                  >
+                    {item.title}
+                  </StaticLink>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          <div data-testid="card-contact" className="col-span-2 lg:col-span-4">
+            <h3 className="font-semibold text-sm mb-5 text-white tracking-widest uppercase">联系我们</h3>
+            <ul className="space-y-4 mb-8 [&_li]:p-0 [&_li]:m-0 [&_li]:static [&_li::before]:hidden">
               <li className="flex items-start gap-3">
-                <MapPin className="w-4 h-4 text-[var(--color-brand-primary)] mt-0.5 shrink-0" />
-                <span className="text-[var(--color-footer-text)] text-sm">{COMPANY_INFO.address}</span>
+                <MapPin className="w-4 h-4 text-gray-400 mt-0.5 shrink-0" />
+                <span className="text-gray-300 text-sm leading-relaxed">{config.address}</span>
               </li>
               <li className="flex items-center gap-3">
-                <Mail className="w-4 h-4 text-[var(--color-brand-primary)] shrink-0" />
-                <span className="text-[var(--color-footer-text)] text-sm">{COMPANY_INFO.email}</span>
+                <Mail className="w-4 h-4 text-gray-400 shrink-0" />
+                <a 
+                  href={`mailto:${config.email}`}
+                  className="text-gray-300 hover:text-white transition-colors duration-200 text-sm"
+                >
+                  {config.email}
+                </a>
               </li>
             </ul>
-            <div className="mt-6 pt-6 border-t border-[var(--color-footer-border)]">
-              <p className="text-sm text-[var(--color-footer-text)] mb-3">企业微信业务咨询</p>
-              <div className="inline-block p-2 rounded-lg border border-[var(--color-footer-border)]">
+            <div>
+              <p className="text-xs text-gray-400 mb-3 tracking-wide">关注公众号</p>
+              <div className="inline-block p-2 border border-gray-800 bg-gray-900">
                 <Image
-                  src="/images/149A1D2F-D9FD-49C7-B139-142C50C5FE8B_1_201_a.jpeg"
-                  alt="企业微信业务咨询二维码"
-                  width={100}
-                  height={100}
-                  className="w-25 h-25"
+                  src="/images/qrcode.webp"
+                  alt="微信公众号二维码"
+                  width={96}
+                  height={96}
+                  className="w-24 h-24"
                   loading="lazy"
                 />
               </div>
@@ -106,48 +102,47 @@ export function Footer() {
           </div>
         </div>
 
-        <div className="border-t border-[var(--color-footer-border)] mt-12 pt-8 pb-24 md:pb-8 relative z-10" style={{ paddingBottom: 'calc(5rem + env(safe-area-inset-bottom, 0px))' }}>
-          <div className="flex flex-col md:flex-row justify-between items-center gap-4">
-            <p className="text-[var(--color-footer-text-muted)] text-sm">
-              © {new Date().getFullYear()} {COMPANY_INFO.name}. All rights reserved.
+        <div className="border-t border-gray-800 pt-6 pb-[calc(8rem+env(safe-area-inset-bottom,0px))] md:pb-8">
+          <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-6 mb-6">
+            <p className="text-gray-300 text-xs">
+              © {new Date().getFullYear()} {config.name}. All rights reserved.
             </p>
             <div className="flex gap-6">
-              <StaticLink href="/privacy" className="text-[var(--color-footer-text-muted)] hover:text-[var(--color-footer-text-link)] text-sm transition-colors duration-200">
+              <StaticLink href="/privacy" className="text-gray-300 hover:text-white text-xs transition-colors duration-200">
                 隐私政策
               </StaticLink>
-              <StaticLink href="/terms" className="text-[var(--color-footer-text-muted)] hover:text-[var(--color-footer-text-link)] text-sm transition-colors duration-200">
+              <StaticLink href="/terms" className="text-gray-300 hover:text-white text-xs transition-colors duration-200">
                 服务条款
               </StaticLink>
             </div>
           </div>
 
-          <div className="text-center mt-6 pt-6 border-t border-[var(--color-footer-border)]">
-            <div className="flex flex-col sm:flex-row justify-center items-center gap-2 sm:gap-4 text-xs">
-              <a
-                href="https://beian.miit.gov.cn/"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-[var(--color-footer-text-link)] hover:text-white transition-colors duration-200"              >
-                {COMPANY_INFO.icp}
-              </a>
-              <span className="hidden sm:inline text-[var(--color-footer-text-dim)]">|</span>
-              <a
-                href="https://beian.mps.gov.cn/#/query/webSearch?code=51010602003285"
-                target="_blank"
-                rel="noreferrer"
-                className="text-[var(--color-footer-text-link)] hover:text-white transition-colors duration-200 inline-flex items-center gap-1.5"
-              >
-                <Image
-                  src="/images/beian-icon.png"
-                  alt="公安备案"
-                  width={16}
-                  height={16}
-                  className="w-4 h-4"
-                  loading="lazy"
-                />
-                {COMPANY_INFO.police}
-              </a>
-            </div>
+          <div className="flex flex-col sm:flex-row justify-center items-center gap-2 sm:gap-4 pt-4 text-[0.8125rem]">
+            <a
+              href="https://beian.miit.gov.cn/"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-gray-300 hover:text-white transition-colors duration-200 inline-flex items-center"
+            >
+              {config.icp}
+            </a>
+            <span className="hidden sm:inline text-gray-500">|</span>
+            <a
+              href="https://beian.mps.gov.cn/#/query/webSearch?code=51010602003285"
+              target="_blank"
+              rel="noreferrer"
+              className="text-gray-300 hover:text-white transition-colors duration-200 inline-flex items-center gap-1.5"
+            >
+              <Image
+                src="/images/beian-icon.png"
+                alt="公安备案"
+                width={14}
+                height={14}
+                className="w-3.5 h-3.5 opacity-80"
+                loading="lazy"
+              />
+              {config.police}
+            </a>
           </div>
         </div>
       </div>