feat(ui): optimize CTA buttons with contextual copy and fix static export build issues

CTA Optimization:

- Implement scenario-based CTA text across 6 key locations

- Add responsive Header CTA with icon+compact design

- Enhance CTA Section with vision-driven copy

Bug Fixes:

- Fix useSearchParams() build failure with dynamic import wrapper

- Remove useSearchParams() from PageTransition component

- Fix React 19 useEffect lint errors via useSyncExternalStore

UI Enhancements:

- Add ripple effects and gradient animations to Button

- Enhance loading skeleton with branded pulse animation

src/app/(marketing)/services/page.tsx

@@ -91,7 +91,7 @@ export default function ServicesPage() {
             asChild
           >
             <StaticLink href="/contact">
-              立即咨询
+              获取服务报价
               <ArrowRight className="ml-2 w-4 h-4" />
             </StaticLink>
           </Button>

src/app/(marketing)/solutions/[id]/client.tsx

@@ -138,7 +138,7 @@ export function SolutionDetailClient({ solution, relatedProducts }: SolutionDeta
             </Button>
             <Button size="lg" className="bg-[var(--color-brand-primary)] hover:bg-[var(--color-brand-primary-hover)] text-white" asChild>
               <StaticLink href="/contact">
-                立即咨询
+                预约方案演示
                 <ArrowRight className="ml-2 w-4 h-4" />
               </StaticLink>
             </Button>

src/app/globals.css

@@ -65,12 +65,12 @@
   --color-accent-cyan-rgb: 8, 145, 178;
 
   --color-footer-bg: #1C1C1C;
-  --color-cta-bg: #FAFAFA;
+  --color-cta-bg: #1a0a0f;
   --color-hero-dark-end: #1C1C1C;
-  --color-footer-text: #A0A0A0;
-  --color-footer-text-muted: #666666;
-  --color-footer-text-dim: #999999;
-  --color-footer-text-link: #E0E0E0;
+  --color-footer-text: #B0B0B0;
+  --color-footer-text-muted: #8C8C8C;
+  --color-footer-text-dim: #A0A0A0;
+  --color-footer-text-link: #E5E5E5;
   --color-footer-border: #333333;
 
   --color-challenge-isolation: #FEF2F4;
@@ -149,8 +149,8 @@
   --color-primary-lighter: #262626;
   --color-primary-rgb: 229, 229, 229;
 
-  --color-brand-primary: #E04A68;
-  --color-brand-primary-hover: #F06880;
+  --color-brand-primary: #D43650;
+  --color-brand-primary-hover: #E04A68;
   --color-brand-primary-light: #C41E3A;
   --color-brand-primary-bg: rgba(196, 30, 58, 0.15);
 
@@ -185,14 +185,14 @@
   --color-warning-bg: rgba(217, 119, 6, 0.15);
   --color-info: #8C8C8C;
   --color-info-bg: #1A1A1A;
-  --color-error: #E04A68;
+  --color-error: #D43650;
   --color-error-bg: rgba(196, 30, 58, 0.15);
 
   --color-accent-blue: #3B82F6;
   --color-accent-purple: #8B5CF6;
   --color-accent-cyan: #06B6D4;
 
-  --color-brand-primary-rgb: 224, 74, 104;
+  --color-brand-primary-rgb: 212, 54, 80;
   --color-warning-rgb: 245, 158, 11;
   --color-success-rgb: 34, 197, 94;
   --color-accent-blue-rgb: 59, 130, 246;
@@ -355,7 +355,7 @@
 @layer utilities {
   .container-wide {
     width: 100%;
-    max-width: 1200px;
+    max-width: 1280px;
     margin-left: auto;
     margin-right: auto;
     padding-left: var(--spacing-lg);
@@ -629,3 +629,33 @@ body {
     width: 100%;
   }
 }
+
+@keyframes ripple {
+  0% {
+    transform: scale(0);
+    opacity: 0.5;
+  }
+  100% {
+    transform: scale(4);
+    opacity: 0;
+  }
+}
+
+.animate-ripple {
+  animation: ripple 0.6s ease-out forwards;
+}
+
+@keyframes skeletonPulse {
+  0%, 100% {
+    background-color: var(--color-skeleton-bg);
+    opacity: 1;
+  }
+  50% {
+    background-color: color-mix(in srgb, var(--color-brand-primary) 8%, var(--color-skeleton-bg));
+    opacity: 0.8;
+  }
+}
+
+.skeleton-brand {
+  animation: skeletonPulse 2s ease-in-out infinite;
+}

src/app/layout.tsx

@@ -4,16 +4,17 @@ import { Ma_Shan_Zheng, Noto_Sans_SC } from "next/font/google";
 import "./globals.css";
 import { Suspense } from "react";
 import { ThemeProvider } from "@/contexts/theme-context";
-import { GoogleAnalytics } from "@/components/analytics/GoogleAnalytics";
+import { GoogleAnalyticsWrapper } from "@/components/analytics/GoogleAnalyticsWrapper";
 import { CookieConsent } from "@/components/analytics/CookieConsent";
 import { PerformanceTracker } from "@/components/analytics/PerformanceTracker";
 import { OutboundLinkTracker } from "@/components/analytics/OutboundLinkTracker";
 import { ScrollDepthTracker } from "@/components/analytics/ScrollDepthTracker";
-import { OrganizationSchema, WebsiteSchema } from "@/components/seo/structured-data";
+import { OrganizationSchema, WebsiteSchema, LocalBusinessSchema } from "@/components/seo/structured-data";
 import { MobileTabBar } from "@/components/layout/mobile-tab-bar";
 import { ErrorBoundary } from "@/components/ui/error-boundary";
 import { ScrollProgress } from "@/components/ui/scroll-progress";
 import { BackToTop } from "@/components/ui/back-to-top";
+import { ClientLayout } from "@/components/layout/client-layout";
 
 const geistSans = localFont({
   src: "./fonts/geist-sans.woff2",
@@ -133,8 +134,11 @@ export default function RootLayout({
         <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
         <link rel="manifest" href="/site.webmanifest" />
         <meta name="theme-color" content="#C41E3A" />
+        <link rel="dns-prefetch" href="//formsubmit.co" />
+        <link rel="preconnect" href="//formsubmit.co" crossOrigin="anonymous" />
         <OrganizationSchema />
         <WebsiteSchema />
+        <LocalBusinessSchema />
       </head>
       <body
         className={`${geistSans.variable} ${geistMono.variable} ${aoyagiReisho.variable} ${maShanZheng.variable} ${notoSansSC.variable} font-sans antialiased`}
@@ -146,13 +150,15 @@ export default function RootLayout({
           跳转到主内容
         </a>
         <ScrollProgress />
-        <GoogleAnalytics />
+        <GoogleAnalyticsWrapper />
         <PerformanceTracker />
         <OutboundLinkTracker />
         <ScrollDepthTracker />
         <ThemeProvider>
           <ErrorBoundary>
-            {children}
+            <ClientLayout>
+              {children}
+            </ClientLayout>
           </ErrorBoundary>
         </ThemeProvider>
         <Suspense fallback={null}>