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

feat(website): 三轮视觉改造与页面过渡动画

Browse Source 
改造概要（30项）：
- 第一轮：Hero重构/Section差异化/SocialProof强化/CTA对比度/About架构
- 第二轮：字体优化/背景交替/Solutions差异化/Footer五列/MegaDropdown修复
- 第三轮：卡片交互/表单层级/CTA统一/时间线标记/连接线/三列布局/移动导航/Button微交互/SEO Schema
- P3-2：template.tsx+Framer Motion页面过渡/loading.tsx加载状态
- 清理：删除未用组件/hooks，修复重复移动导航，清理冗余CSS
This commit is contained in:
张翔
2026-05-10 08:20:27 +08:00
parent 747405dc96
commit 37296b5717
133 changed files with 2583 additions and 13487 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/(marketing)/services/[id]/client.tsx
+31 -31
View File
@@ -72,16 +72,16 @@ export function ServiceDetailClient({ service }: ServiceDetailClientProps) {
const serviceOutcomes = outcomes[service.id] ?? [];
return (
<div className="min-h-screen bg-white">
<div className="min-h-screen bg-[var(--color-bg-primary)]">
<div className="pt-32 pb-16">
<div className="container-wide">
<PageNav items={[{ label: '服务', href: '/services' }, { label: service.title }]} />
<div className="max-w-4xl mt-8">
<p className="text-sm font-medium text-[#C41E3A] mb-4 tracking-wide uppercase">Services</p>
<h1 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6 tracking-tight">
<p className="text-sm font-medium text-[var(--color-brand-primary)] mb-4 tracking-wide uppercase">Services</p>
<h1 className="text-4xl md:text-5xl font-bold text-[var(--color-text-primary)] mb-6 tracking-tight">
{service.title}
</h1>
<p className="text-xl text-[#595959] leading-relaxed">
<p className="text-xl text-[var(--color-text-muted)] leading-relaxed">
{service.description}
</p>
</div>
@@ -92,19 +92,19 @@ export function ServiceDetailClient({ service }: ServiceDetailClientProps) {
<div className="max-w-4xl space-y-16">
<section>
<div className="flex items-center gap-3 mb-6">
<div className="w-10 h-10 bg-[#FEF2F4] rounded-lg flex items-center justify-center">
<MessageCircle className="w-5 h-5 text-[#C41E3A]" />
<div className="w-10 h-10 bg-[var(--color-brand-primary-bg)] rounded-lg flex items-center justify-center">
<MessageCircle className="w-5 h-5 text-[var(--color-brand-primary)]" />
</div>
<h2 className="text-2xl font-bold text-[#1C1C1C]">您可能面临的挑战</h2>
<h2 className="text-2xl font-bold text-[var(--color-text-primary)]">您可能面临的挑战</h2>
</div>
<div className="grid md:grid-cols-2 gap-4">
{serviceChallenges.map((challenge, index) => (
<div
key={index}
className="p-4 bg-[#F5F5F5] rounded-lg hover:bg-[#FEF2F4] transition-colors"
className="p-4 bg-[var(--color-bg-tertiary)] rounded-lg hover:bg-[var(--color-brand-primary-bg)] transition-colors"
>
<h3 className="font-semibold text-[#1C1C1C] mb-1 text-sm">{challenge.title}</h3>
<p className="text-sm text-[#595959]">{challenge.description}</p>
<h3 className="font-semibold text-[var(--color-text-primary)] mb-1 text-sm">{challenge.title}</h3>
<p className="text-sm text-[var(--color-text-muted)]">{challenge.description}</p>
</div>
))}
</div>
@@ -112,19 +112,19 @@ export function ServiceDetailClient({ service }: ServiceDetailClientProps) {
<section>
<div className="flex items-center gap-3 mb-6">
<div className="w-10 h-10 bg-[#FEF2F4] rounded-lg flex items-center justify-center">
<Target className="w-5 h-5 text-[#C41E3A]" />
<div className="w-10 h-10 bg-[var(--color-brand-primary-bg)] rounded-lg flex items-center justify-center">
<Target className="w-5 h-5 text-[var(--color-brand-primary)]" />
</div>
<h2 className="text-2xl font-bold text-[#1C1C1C]">我们如何帮助您</h2>
<h2 className="text-2xl font-bold text-[var(--color-text-primary)]">我们如何帮助您</h2>
</div>
<p className="text-lg text-[#595959] leading-relaxed mb-6">
<p className="text-lg text-[var(--color-text-muted)] leading-relaxed mb-6">
{service.overview}
</p>
<div className="space-y-3">
{service.features.map((feature, index) => (
<div key={index} className="flex items-start gap-3">
<CheckCircle2 className="w-5 h-5 text-[#C41E3A] mt-0.5 shrink-0" />
<span className="text-[#1C1C1C] text-sm">{feature}</span>
<CheckCircle2 className="w-5 h-5 text-[var(--color-brand-primary)] mt-0.5 shrink-0" />
<span className="text-[var(--color-text-primary)] text-sm">{feature}</span>
</div>
))}
</div>
@@ -132,18 +132,18 @@ export function ServiceDetailClient({ service }: ServiceDetailClientProps) {
<section>
<div className="flex items-center gap-3 mb-6">
<div className="w-10 h-10 bg-[#FEF2F4] rounded-lg flex items-center justify-center">
<Clock className="w-5 h-5 text-[#C41E3A]" />
<div className="w-10 h-10 bg-[var(--color-brand-primary-bg)] rounded-lg flex items-center justify-center">
<Clock className="w-5 h-5 text-[var(--color-brand-primary)]" />
</div>
<h2 className="text-2xl font-bold text-[#1C1C1C]">服务流程</h2>
<h2 className="text-2xl font-bold text-[var(--color-text-primary)]">服务流程</h2>
</div>
<div className="space-y-4">
{service.process.map((step, index) => (
<div key={index} className="flex items-start gap-4">
<div className="w-8 h-8 bg-[#C41E3A] rounded-full flex items-center justify-center shrink-0 text-white text-sm font-bold">
<div className="w-8 h-8 bg-[var(--color-brand-primary)] rounded-full flex items-center justify-center shrink-0 text-white text-sm font-bold">
{index + 1}
</div>
<p className="text-[#1C1C1C] pt-1">{step}</p>
<p className="text-[var(--color-text-primary)] pt-1">{step}</p>
</div>
))}
</div>
@@ -151,37 +151,37 @@ export function ServiceDetailClient({ service }: ServiceDetailClientProps) {
<section>
<div className="flex items-center gap-3 mb-6">
<div className="w-10 h-10 bg-[#FEF2F4] rounded-lg flex items-center justify-center">
<TrendingUp className="w-5 h-5 text-[#C41E3A]" />
<div className="w-10 h-10 bg-[var(--color-brand-primary-bg)] rounded-lg flex items-center justify-center">
<TrendingUp className="w-5 h-5 text-[var(--color-brand-primary)]" />
</div>
<h2 className="text-2xl font-bold text-[#1C1C1C]">您将获得的改变</h2>
<h2 className="text-2xl font-bold text-[var(--color-text-primary)]">您将获得的改变</h2>
</div>
<div className="grid sm:grid-cols-3 gap-4">
{serviceOutcomes.map((outcome, index) => (
<div
key={index}
className="p-6 bg-[#F5F5F5] rounded-lg text-center hover:bg-[#FEF2F4] transition-colors"
className="p-6 bg-[var(--color-bg-tertiary)] rounded-lg text-center hover:bg-[var(--color-brand-primary-bg)] transition-colors"
>
<div className="text-3xl font-bold text-[#C41E3A] mb-2">
<div className="text-3xl font-bold text-[var(--color-brand-primary)] mb-2">
{outcome.value}
</div>
<div className="text-sm text-[#595959]">{outcome.label}</div>
<div className="text-sm text-[var(--color-text-muted)]">{outcome.label}</div>
</div>
))}
</div>
<div className="mt-4 p-4 bg-[#F5F5F5] rounded-lg">
<p className="text-sm text-[#595959]">
<div className="mt-4 p-4 bg-[var(--color-bg-tertiary)] rounded-lg">
<p className="text-sm text-[var(--color-text-muted)]">
{service.benefits.join('；')}
</p>
</div>
</section>
<div className="flex justify-center gap-4 pt-8 border-t border-[#E5E5E5]">
<div className="flex justify-center gap-4 pt-8 border-t border-[var(--color-border-primary)]">
<StaticLink href="/services">
<Button variant="outline" size="lg">查看其他服务</Button>
</StaticLink>
<StaticLink href="/contact">
<Button size="lg" className="bg-[#C41E3A] hover:bg-[#A01830] text-white">
<Button size="lg" className="bg-[var(--color-brand-primary)] hover:bg-[var(--color-brand-primary-hover)] text-white">
开始您的转型之旅
<ArrowRight className="ml-2 w-4 h-4" />
</Button>