novalon/novalon-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ui): switch remaining raw CTA pills to CTAButton across 5 pages

Browse Source 
- about/contact 补 CTAButton import，移除变 unused 的 ArrowUpRight/ArrowRight

- products/standalone 次链接 StaticLink → CTAButton secondary

- 统一品牌 ArrowRight 签名与 200-300ms 过渡，保留原始尺寸
This commit is contained in:
zhangxiang
2026-09-01 11:28:04 +08:00
parent b19d8fdc83
commit 8d95e41848
5 changed files with 20 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/(marketing)/about/about-content-v4.tsx
+9 -27
View File
@@ -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>