feat: 优化全局样式与组件视觉升级
- 更新 globals.css 全局样式 - 优化 not-found 404 页面 - 升级 footer, mega-dropdown, mobile-tab-bar 布局组件 - 改进 challenge, cta, hero 等核心 section 组件 - 优化 challenge-card, ink-glow-card, product-card 等 UI 组件 - 更新产品常量配置
This commit is contained in:
张翔
@@ -54,61 +54,61 @@ export function HeroSectionV2() {
|
||||
>
|
||||
<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">
|
||||
<div className="container-wide py-16 md:py-24 lg:py-32 relative z-10 flex-1 flex items-center">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-16 items-center w-full">
|
||||
<div>
|
||||
<motion.div
|
||||
{...fadeUp(0)}
|
||||
className="mb-8"
|
||||
className="mb-6"
|
||||
>
|
||||
<span className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-[var(--color-brand-primary-bg)] text-[var(--color-brand-primary)] text-sm font-medium border border-[var(--color-brand-primary)]/10">
|
||||
<span className="inline-flex items-center gap-2 px-3 py-1.5 sm:px-4 sm:py-2 rounded-full bg-[var(--color-brand-primary-bg)] text-[var(--color-brand-primary)] text-xs sm:text-sm font-medium border border-[var(--color-brand-primary)]/10">
|
||||
{COMPANY_INFO.slogan}
|
||||
</span>
|
||||
</motion.div>
|
||||
|
||||
<motion.h1
|
||||
id="hero-heading"
|
||||
{...fadeUp(0.1)}
|
||||
className="text-6xl sm:text-7xl lg:text-8xl tracking-tight mb-6 font-brand"
|
||||
style={{ fontWeight: 'normal' }}
|
||||
>
|
||||
{COMPANY_INFO.shortName}
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
{...fadeUp(0.2)}
|
||||
className="text-xl sm:text-2xl text-[var(--color-text-primary)] mb-4"
|
||||
{...fadeUp(0.1)}
|
||||
className="text-lg sm:text-xl lg:text-2xl text-[var(--color-text-primary)] mb-3"
|
||||
>
|
||||
<span className="font-semibold text-[var(--color-brand-primary)] font-calligraphy">
|
||||
企业数字化转型服务商
|
||||
</span>
|
||||
</motion.p>
|
||||
|
||||
<motion.h1
|
||||
id="hero-heading"
|
||||
{...fadeUp(0.15)}
|
||||
className="text-5xl sm:text-6xl lg:text-7xl tracking-tight mb-5 font-brand leading-[1.1]"
|
||||
style={{ fontWeight: 'normal' }}
|
||||
>
|
||||
{COMPANY_INFO.shortName}
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
{...fadeUp(0.3)}
|
||||
className="text-lg text-[var(--color-text-muted)] max-w-xl leading-relaxed mb-10"
|
||||
{...fadeUp(0.25)}
|
||||
className="text-base sm:text-lg text-[var(--color-text-muted)] max-w-lg leading-relaxed mb-8"
|
||||
>
|
||||
{COMPANY_INFO.description}
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
{...fadeUp(0.4)}
|
||||
{...fadeUp(0.35)}
|
||||
className="flex flex-col sm:flex-row items-start gap-4"
|
||||
>
|
||||
<Button size="lg" asChild>
|
||||
<Button size="lg" asChild className="min-h-[52px] px-8 text-base font-semibold shadow-lg shadow-[var(--color-brand-primary)]/20">
|
||||
<StaticLink href="/contact">
|
||||
免费获取定制方案
|
||||
<ArrowRight className="w-4 h-4 ml-2" />
|
||||
</StaticLink>
|
||||
</Button>
|
||||
<Button size="lg" variant="outline" asChild>
|
||||
<Button size="lg" variant="ghost" asChild className="text-[var(--color-text-muted)]">
|
||||
<StaticLink href="/products">探索产品</StaticLink>
|
||||
</Button>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
{...fadeUp(0.5)}
|
||||
className="flex flex-wrap gap-3 mt-10 lg:hidden"
|
||||
{...fadeUp(0.45)}
|
||||
className="flex flex-wrap gap-2 sm:gap-3 mt-8"
|
||||
>
|
||||
{CAPABILITIES.map((cap) => {
|
||||
const Icon = cap.icon;
|
||||
@@ -129,7 +129,6 @@ export function HeroSectionV2() {
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 32 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.5, ease: EASE }}
|
||||
className="hidden lg:block"
|
||||
>
|
||||
<div
|
||||
ref={cardRef}
|
||||
@@ -152,35 +151,35 @@ export function HeroSectionV2() {
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="relative rounded-2xl bg-[var(--color-bg-primary)]/80 backdrop-blur-sm p-8 lg:p-10">
|
||||
<div className="w-14 h-14 rounded-xl bg-[var(--color-brand-primary-bg)] flex items-center justify-center mb-6">
|
||||
<Handshake className="w-6 h-6 text-[var(--color-brand-primary)]" strokeWidth={1.8} />
|
||||
<div className="relative rounded-2xl bg-[var(--color-bg-primary)]/80 backdrop-blur-sm p-6 sm:p-8 lg:p-10">
|
||||
<div className="w-12 h-12 lg:w-14 lg:h-14 rounded-xl bg-[var(--color-brand-primary-bg)] flex items-center justify-center mb-5 lg:mb-6">
|
||||
<Handshake className="w-5 h-5 lg:w-6 lg:h-6 text-[var(--color-brand-primary)]" strokeWidth={1.8} />
|
||||
</div>
|
||||
|
||||
<h3 className="text-xl font-semibold text-[var(--color-text-primary)] mb-2">
|
||||
<h3 className="text-lg lg:text-xl font-semibold text-[var(--color-text-primary)] mb-2">
|
||||
从沟通到落地，全程陪伴
|
||||
</h3>
|
||||
<p className="text-sm text-[var(--color-text-muted)] leading-relaxed mb-8">
|
||||
<p className="text-sm text-[var(--color-text-muted)] leading-relaxed mb-6 lg:mb-8">
|
||||
四步合作流程，确保每个项目科学推进、高效交付
|
||||
</p>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-3 lg:gap-4 lg:space-y-0 lg:block lg:space-y-4">
|
||||
{JOURNEY_STEPS.map((step, idx) => {
|
||||
const Icon = step.icon;
|
||||
return (
|
||||
<div
|
||||
key={step.label}
|
||||
className="flex items-center gap-4 p-3 rounded-lg bg-[var(--color-bg-section)]/60"
|
||||
className="flex items-center gap-3 lg:gap-4 p-2.5 lg:p-3 rounded-lg bg-[var(--color-bg-section)]/60"
|
||||
>
|
||||
<div className="w-9 h-9 rounded-lg bg-[var(--color-brand-primary-bg)] flex items-center justify-center shrink-0">
|
||||
<Icon className="w-4 h-4 text-[var(--color-brand-primary)]" strokeWidth={2.2} />
|
||||
<div className="w-8 h-8 lg:w-9 lg:h-9 rounded-lg bg-[var(--color-brand-primary-bg)] flex items-center justify-center shrink-0">
|
||||
<Icon className="w-3.5 h-3.5 lg:w-4 lg:h-4 text-[var(--color-brand-primary)]" strokeWidth={2.2} />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs font-bold text-[var(--color-brand-primary)]">0{idx + 1}</span>
|
||||
<span className="text-sm font-medium text-[var(--color-text-primary)]">{step.label}</span>
|
||||
<div className="flex items-center gap-1.5 lg:gap-2">
|
||||
<span className="text-[10px] lg:text-xs font-bold text-[var(--color-brand-primary)]">0{idx + 1}</span>
|
||||
<span className="text-xs lg:text-sm font-medium text-[var(--color-text-primary)]">{step.label}</span>
|
||||
</div>
|
||||
<p className="text-xs text-[var(--color-text-muted)] mt-0.5">{step.desc}</p>
|
||||
<p className="text-[10px] lg:text-xs text-[var(--color-text-muted)] mt-0.5 hidden sm:block">{step.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user