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
This commit is contained in:
张翔
2026-05-11 19:03:37 +08:00
parent c474394237
commit f08874f5c4
20 changed files with 794 additions and 112 deletions
+3 -8
View File
@@ -4,6 +4,7 @@ import { useCallback, useRef, useState } from 'react';
import { motion } from 'framer-motion';
import { StaticLink } from '@/components/ui/static-link';
import { Button } from '@/components/ui/button';
import { HeroInkBackground } from '@/components/ui/hero-ink-background';
import { COMPANY_INFO } from '@/lib/constants';
import { ArrowRight, MessageSquare, Search, Rocket, Handshake } from 'lucide-react';
import { useReducedMotion } from '@/hooks/use-reduced-motion';
@@ -51,13 +52,7 @@ export function HeroSectionV2() {
aria-labelledby="hero-heading"
className="relative min-h-screen flex flex-col justify-center overflow-hidden bg-[var(--color-bg-primary)]"
>
<div
className="pointer-events-none absolute inset-0"
style={{
background:
'radial-gradient(ellipse at 15% 40%, rgba(var(--color-brand-primary-rgb), 0.05) 0%, transparent 55%), radial-gradient(ellipse at 85% 25%, rgba(var(--color-primary-rgb), 0.04) 0%, transparent 50%), radial-gradient(ellipse at 50% 90%, rgba(var(--color-brand-primary-rgb), 0.03) 0%, transparent 40%)',
}}
/>
<HeroInkBackground />
<div className="container-wide py-24 md:py-32 lg:py-40 relative z-10 flex-1 flex items-center">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center w-full">
@@ -102,7 +97,7 @@ export function HeroSectionV2() {
>
<Button size="lg" asChild>
<StaticLink href="/contact">
<ArrowRight className="w-4 h-4 ml-2" />
</StaticLink>
</Button>