544 lines
20 KiB
TypeScript
544 lines
20 KiB
TypeScript
'use client';
|
||
|
||
import { motion, useScroll, useTransform } from 'framer-motion';
|
||
import { useRef, useState, useEffect } from 'react';
|
||
import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal';
|
||
import { StaticLink } from '@/components/ui/static-link';
|
||
import { SectionHeader } from '@/components/sections/section-header';
|
||
import { ServiceCard } from '@/components/sections/service-card';
|
||
import { ScrollProgress } from '@/components/ui/scroll-progress';
|
||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||
import { ArrowRight, Quote, Building2, Target, Lightbulb, TrendingUp } from 'lucide-react';
|
||
import { Button } from '@/components/ui/button';
|
||
import { AnimatedCounter } from '@/components/ui/animated-counter';
|
||
|
||
const EASE = [0.22, 1, 0.36, 1] as const;
|
||
|
||
export interface CaseDetailData {
|
||
id: string;
|
||
client: string;
|
||
industry: string;
|
||
title: string;
|
||
subtitle: string;
|
||
challenge: string;
|
||
solution: string;
|
||
result: string;
|
||
metrics: { value: string; label: string; highlight?: boolean }[];
|
||
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 {
|
||
data: CaseDetailData;
|
||
}
|
||
|
||
function CaseDetailHero({ data }: CaseDetailHeroProps) {
|
||
const shouldReduceMotion = useReducedMotion();
|
||
const heroRef = useRef<HTMLDivElement>(null);
|
||
const { scrollYProgress } = useScroll({
|
||
target: heroRef,
|
||
offset: ['start start', 'end start'],
|
||
});
|
||
|
||
const opacity = useTransform(scrollYProgress, [0, 0.6], [1, 0]);
|
||
const contentY = useTransform(scrollYProgress, [0, 1], [0, 50]);
|
||
|
||
return (
|
||
<section
|
||
ref={heroRef}
|
||
className="relative min-h-[85svh] flex items-center overflow-hidden pt-20"
|
||
style={{ background: 'var(--color-bg-primary)' }}
|
||
>
|
||
<motion.div
|
||
className="relative z-10 w-full max-w-[1280px] mx-auto px-5 sm:px-8 lg:px-16 py-20 md:py-28"
|
||
style={{ opacity, y: shouldReduceMotion ? 0 : contentY }}
|
||
>
|
||
<motion.div
|
||
className="flex flex-wrap items-center gap-3 mb-8"
|
||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6, ease: EASE }}
|
||
>
|
||
<span
|
||
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)',
|
||
}}
|
||
>
|
||
<Building2 className="w-3.5 h-3.5" />
|
||
{data.industry}
|
||
</span>
|
||
<span className="text-[12px]" style={{ color: 'var(--color-text-muted)' }}>
|
||
{data.client}
|
||
</span>
|
||
</motion.div>
|
||
|
||
{/* Bain-style: big result number first */}
|
||
<motion.div
|
||
className="mb-8"
|
||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 30 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.1, ease: EASE }}
|
||
>
|
||
<div
|
||
className="font-sans text-[clamp(56px,12vw,120px)] font-black leading-none tracking-[-2px] mb-2"
|
||
style={{ color: 'var(--color-brand)' }}
|
||
>
|
||
{data.metrics[0]?.value || '40%'}
|
||
</div>
|
||
<div
|
||
className="text-lg md:text-xl font-medium"
|
||
style={{ color: 'var(--color-text-secondary)' }}
|
||
>
|
||
{data.metrics[0]?.label || '核心成果提升'}
|
||
</div>
|
||
</motion.div>
|
||
|
||
<motion.h1
|
||
className="font-sans text-[clamp(28px,5vw,48px)] font-bold leading-[1.15] tracking-[-0.5px] text-[var(--color-text-primary)] mb-6 max-w-3xl"
|
||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 30 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.9, delay: 0.25, ease: EASE }}
|
||
>
|
||
{data.title}
|
||
</motion.h1>
|
||
|
||
<motion.p
|
||
className="text-base md:text-lg max-w-2xl leading-relaxed mb-10 font-light"
|
||
style={{ color: 'var(--color-text-secondary)' }}
|
||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 24 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.4, ease: EASE }}
|
||
>
|
||
{data.subtitle}
|
||
</motion.p>
|
||
|
||
{/* Quick stats row */}
|
||
<motion.div
|
||
className="grid grid-cols-3 gap-6 sm:gap-10 max-w-lg mb-10"
|
||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 24 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.55, ease: EASE }}
|
||
>
|
||
{data.metrics.slice(1, 4).map((m, i) => (
|
||
<div key={i}>
|
||
<div
|
||
className="font-sans tabular-nums text-[28px] sm:text-[32px] font-bold leading-none mb-1.5"
|
||
style={{ color: m.highlight ? 'var(--color-brand)' : 'var(--color-text-primary)' }}
|
||
>
|
||
{m.value}
|
||
</div>
|
||
<div className="text-[11px] sm:text-[12px]" style={{ color: 'var(--color-text-muted)' }}>
|
||
{m.label}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</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.8, ease: EASE }}
|
||
>
|
||
<Button size="lg" asChild>
|
||
<StaticLink href="/contact">
|
||
咨询类似方案
|
||
<ArrowRight className="w-4 h-4 ml-2" />
|
||
</StaticLink>
|
||
</Button>
|
||
<Button size="lg" variant="outline" asChild>
|
||
<a href="#solution">查看方案</a>
|
||
</Button>
|
||
</motion.div>
|
||
</motion.div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
function ChallengeSection({ data }: { data: CaseDetailData }) {
|
||
return (
|
||
<section className="relative py-20 sm:py-28 md:py-36 lg:py-44" style={{ background: 'var(--color-bg-primary)' }}>
|
||
<div className="max-w-[1280px] mx-auto px-5 sm:px-8 lg:px-16">
|
||
<div className="grid lg:grid-cols-12 gap-12 lg:gap-16 items-start">
|
||
<ScrollReveal className="lg:col-span-5">
|
||
<SectionHeader
|
||
label="Challenge"
|
||
title="业务"
|
||
highlight="挑战"
|
||
desc="每个项目，都从一个真实的业务痛点出发"
|
||
/>
|
||
</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={{
|
||
backgroundColor: 'var(--color-bg-secondary)',
|
||
}}
|
||
>
|
||
<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"
|
||
style={{ color: 'var(--color-brand)' }}
|
||
>
|
||
面临的挑战
|
||
</span>
|
||
</div>
|
||
<p
|
||
className="text-lg md:text-xl leading-relaxed mb-6"
|
||
style={{ color: 'var(--color-text-primary)' }}
|
||
>
|
||
{data.challenge}
|
||
</p>
|
||
</div>
|
||
</ScrollReveal>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
function SolutionSection({ data }: { data: CaseDetailData }) {
|
||
return (
|
||
<section
|
||
id="solution"
|
||
className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden"
|
||
style={{ background: 'var(--color-bg-secondary)' }}
|
||
>
|
||
<div className="max-w-[1280px] mx-auto px-5 sm:px-8 lg:px-16">
|
||
<ScrollReveal className="mb-16 sm:mb-20 max-w-2xl">
|
||
<SectionHeader
|
||
label="Solution"
|
||
title="我们的"
|
||
highlight="方案"
|
||
desc="针对性的解决方案，每一步都有明确的目标"
|
||
/>
|
||
</ScrollReveal>
|
||
|
||
<div className="grid lg:grid-cols-2 gap-0" style={{ border: '1px solid var(--color-border-primary)' }}>
|
||
<div style={{ backgroundColor: 'var(--color-bg-primary)' }}>
|
||
<div className="p-8 sm:p-10 lg:p-12">
|
||
<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"
|
||
style={{ color: 'var(--color-brand)' }}
|
||
>
|
||
核心思路
|
||
</span>
|
||
</div>
|
||
<p className="text-base md:text-lg leading-relaxed" style={{ color: 'var(--color-text-secondary)' }}>
|
||
{data.solution}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="p-8 sm:p-10 lg:p-12" style={{ backgroundColor: 'var(--color-bg-primary)' }}>
|
||
<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"
|
||
style={{ color: 'var(--color-brand)' }}
|
||
>
|
||
实施路径
|
||
</span>
|
||
</div>
|
||
<div className="space-y-5">
|
||
{data.timeline.map((t, i) => (
|
||
<div key={i} className="flex gap-4">
|
||
<div
|
||
className="shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold"
|
||
style={{
|
||
backgroundColor: 'var(--color-brand-soft)',
|
||
color: 'var(--color-brand)',
|
||
}}
|
||
>
|
||
{i + 1}
|
||
</div>
|
||
<div>
|
||
<div className="flex items-center gap-3 mb-1">
|
||
<h4 className="text-[var(--color-text-primary)] font-semibold">{t.phase}</h4>
|
||
<span className="text-[11px] px-2 py-0.5 rounded" style={{ backgroundColor: 'var(--color-bg-tertiary)', color: 'var(--color-text-muted)' }}>
|
||
{t.duration}
|
||
</span>
|
||
</div>
|
||
<p className="text-sm leading-relaxed" style={{ color: 'var(--color-text-secondary)' }}>
|
||
{t.description}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
function ResultsSection({ data }: { data: CaseDetailData }) {
|
||
const resultsRef = useRef<HTMLDivElement>(null);
|
||
const [inView, setInView] = useState(false);
|
||
const shouldReduceMotion = useReducedMotion();
|
||
|
||
useEffect(() => {
|
||
if (!resultsRef.current) return;
|
||
const observer = new IntersectionObserver(
|
||
([entry]) => {
|
||
if (entry?.isIntersecting) {
|
||
setInView(true);
|
||
observer.disconnect();
|
||
}
|
||
},
|
||
{ threshold: 0.2 }
|
||
);
|
||
observer.observe(resultsRef.current);
|
||
return () => observer.disconnect();
|
||
}, []);
|
||
|
||
const parseValue = (val: string): { num: number; suffix: string; isNumeric: boolean } => {
|
||
const match = val.match(/^([\d.]+)(.*)$/);
|
||
if (match && match[1] && !isNaN(parseFloat(match[1]))) {
|
||
return { num: parseFloat(match[1]), suffix: match[2] || '', isNumeric: true };
|
||
}
|
||
return { num: 0, suffix: val, isNumeric: false };
|
||
};
|
||
|
||
return (
|
||
<section
|
||
ref={resultsRef}
|
||
className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden"
|
||
style={{ background: 'var(--color-brand)' }}
|
||
>
|
||
{/* Background decoration */}
|
||
<div className="absolute inset-0 pointer-events-none">
|
||
<div
|
||
className="absolute w-[600px] h-[600px] rounded-full opacity-[0.15] blur-[120px]"
|
||
style={{
|
||
background: 'radial-gradient(circle, rgba(255,255,255,0.8), transparent 70%)',
|
||
top: '-30%',
|
||
right: '-10%',
|
||
}}
|
||
/>
|
||
<div
|
||
className="absolute w-[400px] h-[400px] rounded-full opacity-[0.1] blur-[100px]"
|
||
style={{
|
||
background: 'radial-gradient(circle, rgba(255,255,255,0.6), transparent 70%)',
|
||
bottom: '-20%',
|
||
left: '10%',
|
||
}}
|
||
/>
|
||
</div>
|
||
|
||
<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-xs font-medium mb-4"
|
||
style={{ color: 'rgba(255,255,255,0.6)' }}
|
||
>
|
||
项目成果
|
||
</div>
|
||
<h2 className="font-sans text-3xl sm:text-4xl md:text-5xl font-bold text-white tracking-tight leading-tight mb-6">
|
||
可量化的业务成果
|
||
</h2>
|
||
<p className="text-lg text-white/60 leading-relaxed max-w-2xl mx-auto">
|
||
{data.result}
|
||
</p>
|
||
</ScrollReveal>
|
||
|
||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-px mb-16" style={{ backgroundColor: 'rgba(255,255,255,0.15)' }}>
|
||
{data.metrics.slice(0, 4).map((m, i) => {
|
||
const { num, suffix, isNumeric } = parseValue(m.value);
|
||
const decimals = String(num).includes('.') ? String(num).split('.')[1]?.length ?? 0 : 0;
|
||
return (
|
||
<div
|
||
key={i}
|
||
className="p-10 sm:p-12 text-center transition-all duration-500 hover:bg-white/[0.05] group relative overflow-hidden"
|
||
style={{ backgroundColor: 'var(--color-brand)' }}
|
||
>
|
||
{m.highlight && (
|
||
<div className="absolute top-4 right-4 px-2 py-1 text-[10px] font-bold text-brand bg-white rounded-full">
|
||
核心指标
|
||
</div>
|
||
)}
|
||
<div className="font-sans tabular-nums text-[clamp(40px,8vw,64px)] font-black leading-none mb-3 text-white transition-transform duration-500 group-hover:scale-110">
|
||
{isNumeric && inView && !shouldReduceMotion ? (
|
||
<AnimatedCounter
|
||
value={num}
|
||
decimals={decimals}
|
||
suffix={suffix}
|
||
startOnView={false}
|
||
duration={2000}
|
||
/>
|
||
) : (
|
||
<>
|
||
{isNumeric ? num : suffix}
|
||
{isNumeric && suffix && (
|
||
<span className="text-[0.5em] font-bold text-white/80 ml-0.5">{suffix}</span>
|
||
)}
|
||
</>
|
||
)}
|
||
</div>
|
||
<div className="text-sm md:text-base text-white/60 font-medium">
|
||
{m.label}
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
|
||
{data.testimonial && (
|
||
<ScrollReveal delay={0.3}>
|
||
<div className="max-w-4xl mx-auto">
|
||
<div className="relative p-8 sm:p-10 lg:p-14 border border-white/20 bg-white/[0.03] backdrop-blur-sm">
|
||
<Quote className="w-12 h-12 absolute -top-6 left-8 text-white/20" />
|
||
<blockquote className="text-xl sm:text-2xl md:text-3xl font-medium leading-relaxed text-white mb-8">
|
||
“{data.testimonial.quote}”
|
||
</blockquote>
|
||
<div className="flex items-center gap-4">
|
||
<div className="w-12 h-12 rounded-full bg-white/10 flex items-center justify-center">
|
||
<Building2 className="w-5 h-5 text-white/60" />
|
||
</div>
|
||
<div>
|
||
<div className="font-semibold text-white text-lg">{data.testimonial.author}</div>
|
||
<div className="text-sm text-white/50">{data.testimonial.role}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</ScrollReveal>
|
||
)}
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
function RelatedServicesSection({ services }: { services: CaseDetailData['services'] }) {
|
||
return (
|
||
<section className="relative py-20 sm:py-28 md:py-36 lg:py-44" style={{ background: 'var(--color-bg-primary)' }}>
|
||
<div className="max-w-[1280px] mx-auto px-5 sm:px-8 lg:px-16">
|
||
<ScrollReveal className="mb-16 sm:mb-20 max-w-2xl">
|
||
<SectionHeader
|
||
label="Related"
|
||
title="相关"
|
||
highlight="服务"
|
||
desc="类似的项目，我们还提供这些专业服务"
|
||
/>
|
||
</ScrollReveal>
|
||
|
||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
<StaggerReveal staggerDelay={0.08}>
|
||
{services.slice(0, 3).map((s) => (
|
||
<ServiceCard
|
||
key={s.id}
|
||
title={s.title}
|
||
description={s.description}
|
||
href={`/services/${s.id}`}
|
||
/>
|
||
))}
|
||
</StaggerReveal>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
function CTASection() {
|
||
return (
|
||
<section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden" style={{ background: 'var(--color-bg-secondary)' }}>
|
||
<div className="max-w-[800px] mx-auto px-5 sm:px-8 lg:px-16 text-center relative z-10">
|
||
<ScrollReveal>
|
||
<h2 className="font-sans text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-[var(--color-text-primary)] leading-tight tracking-tight mb-6">
|
||
您也想实现类似的
|
||
<span style={{ color: 'var(--color-brand)' }}> 业务突破</span>
|
||
？
|
||
</h2>
|
||
<p className="text-lg md:text-xl mb-10 font-light" style={{ color: 'var(--color-text-secondary)' }}>
|
||
免费咨询，48小时内给出初步方案建议
|
||
</p>
|
||
<div className="flex flex-col sm:flex-row justify-center gap-4">
|
||
<Button size="lg" asChild>
|
||
<StaticLink href="/contact">
|
||
免费咨询
|
||
<ArrowRight className="w-4 h-4 ml-2" />
|
||
</StaticLink>
|
||
</Button>
|
||
<Button size="lg" variant="outline" asChild>
|
||
<StaticLink href="/cases">查看更多案例</StaticLink>
|
||
</Button>
|
||
</div>
|
||
</ScrollReveal>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
export default function CaseDetailPage({ data }: { data: CaseDetailData }) {
|
||
return (
|
||
<main className="min-h-screen">
|
||
<ScrollProgress />
|
||
<CaseDetailHero data={data} />
|
||
<ChallengeSection data={data} />
|
||
<SolutionSection data={data} />
|
||
<ResultsSection data={data} />
|
||
<RelatedServicesSection services={data.services} />
|
||
<CTASection />
|
||
</main>
|
||
);
|
||
}
|