src/app/(marketing)/about/about-content-v4.tsx

@@ -1,10 +1,10 @@
 'use client';
 
 import { motion } from 'framer-motion';
+import { CTAButton } from '@/components/ui/cta-button';
 import {
   Trophy,
   Shield, Award, Zap,
-  ArrowUpRight,
   type LucideIcon,
 } from 'lucide-react';
 
@@ -103,21 +103,12 @@ function HeroSection({ data }: { data: AboutData }) {
             transition={{ duration: 0.8, delay: 0.7, ease: EASE_OUT }}
             className="flex flex-col sm:flex-row gap-4 sm:gap-6"
           >
-            <a
-              href={data.heroPrimaryCtaHref || '#'}
-              aria-label={data.heroPrimaryCtaLabel || '预约咨询'}
-              className="group inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base bg-brand text-white rounded-full transition-all duration-300 hover:bg-brand/90 min-h-[52px] touch-manipulation"
-            >
+            <CTAButton href={data.heroPrimaryCtaHref || '#'} className="min-h-[52px] touch-manipulation">
               {data.heroPrimaryCtaLabel || '预约咨询'}
-              <ArrowUpRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
-            </a>
-            <a
-              href={data.heroSecondaryCtaHref || '#'}
-              aria-label={data.heroSecondaryCtaLabel || '了解更多'}
-              className="inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base text-ink border border-border-primary rounded-full hover:border-border-secondary hover:bg-bg-secondary transition-all duration-300 min-h-[52px] touch-manipulation"
-            >
+            </CTAButton>
+            <CTAButton href={data.heroSecondaryCtaHref || '#'} variant="secondary" className="min-h-[52px] touch-manipulation">
               {data.heroSecondaryCtaLabel || '了解更多'}
-            </a>
+            </CTAButton>
           </motion.div>
         </div>
       </div>
@@ -429,21 +420,12 @@ function CTASection({ data }: { data: AboutData }) {
             {data.ctaDescription || ''}
           </p>
           <div className="flex flex-col sm:flex-row gap-4 sm:gap-6">
-            <a
-              href={data.ctaPrimaryHref || '#'}
-              aria-label={data.ctaPrimaryLabel || '预约咨询'}
-              className="group inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base bg-brand text-white rounded-full transition-all duration-300 hover:bg-brand/90 min-h-[52px] touch-manipulation"
-            >
+            <CTAButton href={data.ctaPrimaryHref || '#'} className="min-h-[52px] touch-manipulation">
               {data.ctaPrimaryLabel || '预约咨询'}
-              <ArrowUpRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
-            </a>
-            <a
-              href={data.ctaSecondaryHref || '#'}
-              aria-label={data.ctaSecondaryLabel || '了解更多'}
-              className="inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base text-ink border border-border-primary rounded-full hover:border-border-secondary hover:bg-bg-secondary transition-all duration-300 min-h-[52px] touch-manipulation"
-            >
+            </CTAButton>
+            <CTAButton href={data.ctaSecondaryHref || '#'} variant="secondary" className="min-h-[52px] touch-manipulation">
               {data.ctaSecondaryLabel || '了解更多'}
-            </a>
+            </CTAButton>
           </div>
         </motion.div>
       </div>

src/app/(marketing)/contact/contact-content-v3.tsx

@@ -8,6 +8,7 @@ import { Button } from '@/components/ui/button';
 import { LabeledInput as Input } from '@/components/ui/labeled-input';
 import { LabeledTextarea as Textarea } from '@/components/ui/labeled-textarea';
 import { Toast } from '@/components/ui/toast';
+import { CTAButton } from '@/components/ui/cta-button';
 import {
   Mail,
   MapPin,
@@ -17,7 +18,6 @@ import {
   HeadphonesIcon,
   CheckCircle2,
   HelpCircle,
-  ArrowRight,
 } from 'lucide-react';
 import { trackContactForm } from '@/lib/analytics';
 import { BreadcrumbSchema } from '@/components/seo/structured-data';
@@ -529,19 +529,12 @@ function ContactFormContent({ data }: { data: ContactData }) {
             </p>
 
             <div className="flex flex-col sm:flex-row gap-4 sm:gap-6 justify-center">
-              <a
-                href={data.ctaPrimaryHref || '#'}
-                className="group inline-flex items-center justify-center gap-3 px-12 py-6 font-bold text-base bg-brand text-white rounded-full transition-all duration-300 hover:bg-brand/90"
-              >
+              <CTAButton href={data.ctaPrimaryHref || '#'} className="px-12 py-6 font-bold">
                 {data.ctaPrimaryLabel || ''}
-                <ArrowRight className="w-5 h-5 transition-transform duration-300 group-hover:translate-x-1" />
-              </a>
-              <a
-                href={data.ctaSecondaryHref || '#'}
-                className="inline-flex items-center justify-center gap-3 px-12 py-6 font-bold text-base text-ink border border-border-primary rounded-full hover:border-border-secondary hover:bg-bg-secondary transition-all duration-300"
-              >
+              </CTAButton>
+              <CTAButton href={data.ctaSecondaryHref || '#'} variant="secondary" className="px-12 py-6 font-bold">
                 {data.ctaSecondaryLabel || ''}
-              </a>
+              </CTAButton>
             </div>
           </motion.div>
         </div>

src/app/(marketing)/news/news-content-v3.tsx

@@ -253,12 +253,9 @@ export default function NewsContentV3({ news, pageCopy }: { news?: NewsItem[]; p
               <CTAButton href="/contact" dataTestId="news-bottom-cta">
                 联系我们
               </CTAButton>
-              <a
-                href="/about"
-                className="inline-flex items-center justify-center gap-3 px-12 py-6 font-semibold text-base text-ink border border-border-primary rounded-full hover:border-border-secondary hover:bg-bg-secondary transition-all duration-300"
-              >
+              <CTAButton href="/about" variant="secondary" className="px-12 py-6">
                 了解公司
-              </a>
+              </CTAButton>
             </div>
           </ScrollReveal>
         </div>

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

@@ -1,7 +1,6 @@
 'use client';
 
 import { getHeroTheme } from '@/lib/constants/hero-themes';
-import { StaticLink } from '@/components/ui/static-link';
 import { CTAButton } from '@/components/ui/cta-button';
 import { DetailHero } from '@/components/detail/detail-hero';
 import { DetailTrustSection } from '@/components/detail/detail-trust-section';
@@ -117,12 +116,9 @@ export function StandaloneProductClient({ item }: StandaloneProductClientProps)
                 <CTAButton href="/contact" dataTestId="standalone-hero-primary" className="px-8 py-3 text-sm">
                 获取上线通知
               </CTAButton>
-                <StaticLink
-                  href="/products"
-                  className="inline-flex items-center rounded-full border border-border-primary px-6 py-3 text-sm font-semibold text-text-secondary transition-all hover:border-border-secondary hover:bg-bg-secondary"
-                >
+                <CTAButton href="/products" variant="secondary" className="px-6 py-3 text-sm">
                   查看其他产品
-                </StaticLink>
+                </CTAButton>
               </div>
             </motion.div>
           </div>

src/app/(marketing)/services/service-detail-content-v4.tsx

@@ -84,12 +84,9 @@ function DetailHero({ service }: { service: Service }) {
             <CTAButton href="/contact" dataTestId="service-detail-hero-primary" className="min-h-[52px]">
               免费咨询
             </CTAButton>
-            <a
-              href="#cases"
-              className="inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base text-ink border border-border-primary rounded-full hover:border-ink/30 transition-all duration-300 min-h-[52px] touch-manipulation"
-            >
+            <CTAButton href="#cases" variant="secondary" className="min-h-[52px] touch-manipulation">
               查看案例
-            </a>
+            </CTAButton>
           </motion.div>
         </div>
       </div>