feat(content): deepen Bain differentiation across product, solution and service pages
- Replace decorative numbering and side-stripe borders with structured copy - Add scenario positioning, capability metrics and verifiable dimensions - Refine service timelines, deliverables and case-study narratives - Update content constants to support CMS seeding
This commit is contained in:
张翔
@@ -26,6 +26,11 @@ export interface CaseDetailData {
|
||||
timeline: { phase: string; duration: string; description: string }[];
|
||||
services: { id: string; title: string; description: string }[];
|
||||
testimonial?: { quote: string; author: string; role: string };
|
||||
projectDuration?: string;
|
||||
departments?: string[];
|
||||
dataScale?: string;
|
||||
businessProblem?: string;
|
||||
verified?: boolean;
|
||||
}
|
||||
|
||||
interface CaseDetailHeroProps {
|
||||
@@ -60,7 +65,7 @@ function CaseDetailHero({ data }: CaseDetailHeroProps) {
|
||||
transition={{ duration: 0.6, ease: EASE }}
|
||||
>
|
||||
<span
|
||||
className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-[11px] font-medium tracking-wider uppercase"
|
||||
className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-xs font-medium"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-brand-soft)',
|
||||
color: 'var(--color-brand)',
|
||||
@@ -136,11 +141,38 @@ function CaseDetailHero({ data }: CaseDetailHeroProps) {
|
||||
))}
|
||||
</motion.div>
|
||||
|
||||
{/* Verifiable dimensions */}
|
||||
<motion.div
|
||||
className="flex flex-wrap gap-x-6 gap-y-3 text-sm mb-10 border-y border-border-primary py-4"
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 24 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.65, ease: EASE }}
|
||||
>
|
||||
{data.projectDuration && (
|
||||
<div style={{ color: 'var(--color-text-secondary)' }}>
|
||||
<span style={{ color: 'var(--color-text-muted)' }}>项目周期</span> {data.projectDuration}
|
||||
</div>
|
||||
)}
|
||||
{data.departments && data.departments.length > 0 && (
|
||||
<div style={{ color: 'var(--color-text-secondary)' }}>
|
||||
<span style={{ color: 'var(--color-text-muted)' }}>涉及部门</span> {data.departments.join('、')}
|
||||
</div>
|
||||
)}
|
||||
{data.dataScale && (
|
||||
<div style={{ color: 'var(--color-text-secondary)' }}>
|
||||
<span style={{ color: 'var(--color-text-muted)' }}>数据规模</span> {data.dataScale}
|
||||
</div>
|
||||
)}
|
||||
{data.verified && (
|
||||
<div style={{ color: 'var(--color-brand)' }}>✓ 客户授权公开</div>
|
||||
)}
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="flex flex-wrap gap-4"
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 24 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.7, ease: EASE }}
|
||||
transition={{ duration: 0.8, delay: 0.8, ease: EASE }}
|
||||
>
|
||||
<Button size="lg" asChild>
|
||||
<a href="/contact">
|
||||
@@ -172,6 +204,25 @@ function ChallengeSection({ data }: { data: CaseDetailData }) {
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.1} className="lg:col-span-7">
|
||||
{data.businessProblem && (
|
||||
<div
|
||||
className="mb-6 pl-4 border-l-2"
|
||||
style={{ borderColor: 'var(--color-brand)' }}
|
||||
>
|
||||
<div
|
||||
className="text-xs font-medium mb-2"
|
||||
style={{ color: 'var(--color-text-muted)' }}
|
||||
>
|
||||
具体业务问题
|
||||
</div>
|
||||
<p
|
||||
className="text-base md:text-lg leading-relaxed"
|
||||
style={{ color: 'var(--color-text-primary)' }}
|
||||
>
|
||||
{data.businessProblem}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className="p-8 sm:p-10 lg:p-12"
|
||||
style={{
|
||||
@@ -181,7 +232,7 @@ function ChallengeSection({ data }: { data: CaseDetailData }) {
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<Target className="w-6 h-6" style={{ color: 'var(--color-brand)' }} />
|
||||
<span
|
||||
className="text-sm font-semibold tracking-wider uppercase"
|
||||
className="text-sm font-semibold"
|
||||
style={{ color: 'var(--color-brand)' }}
|
||||
>
|
||||
面临的挑战
|
||||
@@ -224,7 +275,7 @@ function SolutionSection({ data }: { data: CaseDetailData }) {
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<Lightbulb className="w-6 h-6" style={{ color: 'var(--color-brand)' }} />
|
||||
<span
|
||||
className="text-sm font-semibold tracking-wider uppercase"
|
||||
className="text-sm font-semibold"
|
||||
style={{ color: 'var(--color-brand)' }}
|
||||
>
|
||||
核心思路
|
||||
@@ -240,7 +291,7 @@ function SolutionSection({ data }: { data: CaseDetailData }) {
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<TrendingUp className="w-6 h-6" style={{ color: 'var(--color-brand)' }} />
|
||||
<span
|
||||
className="text-sm font-semibold tracking-wider uppercase"
|
||||
className="text-sm font-semibold"
|
||||
style={{ color: 'var(--color-brand)' }}
|
||||
>
|
||||
实施路径
|
||||
@@ -336,10 +387,10 @@ function ResultsSection({ data }: { data: CaseDetailData }) {
|
||||
<div className="max-w-[1280px] mx-auto px-5 sm:px-8 lg:px-16 relative z-10">
|
||||
<ScrollReveal className="mb-16 sm:mb-20 text-center max-w-3xl mx-auto">
|
||||
<div
|
||||
className="text-[10px] tracking-[4px] uppercase font-medium mb-4"
|
||||
className="text-xs font-medium mb-4"
|
||||
style={{ color: 'rgba(255,255,255,0.6)' }}
|
||||
>
|
||||
Results
|
||||
项目成果
|
||||
</div>
|
||||
<h2 className="font-sans text-3xl sm:text-4xl md:text-5xl font-bold text-white tracking-tight leading-tight mb-6">
|
||||
可量化的业务成果
|
||||
@@ -431,14 +482,12 @@ function RelatedServicesSection({ services }: { services: CaseDetailData['servic
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<StaggerReveal staggerDelay={0.08}>
|
||||
{services.slice(0, 3).map((s, i) => (
|
||||
{services.slice(0, 3).map((s) => (
|
||||
<ServiceCard
|
||||
key={s.id}
|
||||
number={String(i + 1).padStart(2, '0')}
|
||||
title={s.title}
|
||||
description={s.description}
|
||||
href={`/services/${s.id}`}
|
||||
color="brand"
|
||||
/>
|
||||
))}
|
||||
</StaggerReveal>
|
||||
|
||||
Reference in New Issue
Block a user