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:
张翔
@@ -2,6 +2,7 @@
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { ArrowUpRight, CheckCircle2 } from 'lucide-react';
|
||||
import { ScrollProgress } from '@/components/ui/scroll-progress';
|
||||
import type { Service, CaseStudy } from '@/lib/constants/services';
|
||||
|
||||
const EASE_OUT = [0.22, 1, 0.36, 1] as const;
|
||||
@@ -15,20 +16,11 @@ function DetailHero({ service }: { service: Service }) {
|
||||
<section className="relative min-h-[85vh] flex items-center overflow-hidden bg-white">
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10 w-full py-28 sm:py-36 md:py-44 lg:py-56">
|
||||
<div className="max-w-4xl">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.1, ease: EASE_OUT }}
|
||||
className="text-sm font-mono tracking-[0.2em] text-text-muted uppercase mb-8"
|
||||
>
|
||||
Professional Services
|
||||
</motion.div>
|
||||
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 1, delay: 0.2, ease: EASE_OUT }}
|
||||
className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black text-ink leading-[0.88] tracking-tightest mb-10 sm:mb-12 md:mb-16"
|
||||
className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black text-ink leading-[0.92] tracking-tightest mb-10 sm:mb-12 md:mb-16"
|
||||
>
|
||||
<div className="block">{service.title}</div>
|
||||
<div className="block mt-4 sm:mt-6">
|
||||
@@ -123,9 +115,6 @@ function OverviewSection({ service }: { service: Service }) {
|
||||
transition={{ duration: 0.8, ease: EASE_OUT }}
|
||||
className="lg:col-span-5"
|
||||
>
|
||||
<div className="text-sm font-mono tracking-[0.2em] text-text-muted uppercase mb-6">
|
||||
Overview
|
||||
</div>
|
||||
<h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold text-ink tracking-tight leading-[0.95]">
|
||||
解决什么问题
|
||||
</h2>
|
||||
@@ -170,9 +159,6 @@ function FeaturesSection({ service }: { service: Service }) {
|
||||
transition={{ duration: 0.8, ease: EASE_OUT }}
|
||||
className="max-w-3xl mb-16 sm:mb-20 md:mb-24"
|
||||
>
|
||||
<div className="text-sm font-mono tracking-[0.2em] text-text-muted uppercase mb-6">
|
||||
Capabilities
|
||||
</div>
|
||||
<h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold text-ink tracking-tight leading-[0.95]">
|
||||
核心能力
|
||||
</h2>
|
||||
@@ -193,10 +179,8 @@ function FeaturesSection({ service }: { service: Service }) {
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-60px' }}
|
||||
transition={{ duration: 0.6, delay: index * 0.06, ease: EASE_OUT }}
|
||||
className="group relative p-8 sm:p-10 transition-all duration-500 hover:bg-bg-secondary bg-white"
|
||||
className="group relative p-8 sm:p-10 transition-all duration-500 hover:bg-bg-secondary hover:shadow-lg hover:-translate-y-1 bg-white"
|
||||
>
|
||||
<div className="absolute top-0 left-0 h-0 w-[2px] group-hover:h-full transition-all duration-500 origin-top bg-brand" />
|
||||
|
||||
<div className="relative z-10">
|
||||
<div className="text-3xl mb-6">{icon}</div>
|
||||
<h3 className="text-lg sm:text-xl font-bold mb-3 text-ink group-hover:text-brand transition-colors duration-300">
|
||||
@@ -231,9 +215,6 @@ function ProcessSection({ service }: { service: Service }) {
|
||||
transition={{ duration: 0.8, ease: EASE_OUT }}
|
||||
className="max-w-3xl mb-16 sm:mb-20 md:mb-24"
|
||||
>
|
||||
<div className="text-sm font-mono tracking-[0.2em] text-text-muted uppercase mb-6">
|
||||
Process
|
||||
</div>
|
||||
<h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold text-ink tracking-tight leading-[0.95]">
|
||||
服务流程
|
||||
</h2>
|
||||
@@ -252,13 +233,12 @@ function ProcessSection({ service }: { service: Service }) {
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-60px' }}
|
||||
transition={{ duration: 0.6, delay: index * 0.08, ease: EASE_OUT }}
|
||||
className="relative group p-6 sm:p-8 bg-white"
|
||||
className="relative group p-6 sm:p-8 bg-white hover:bg-bg-secondary hover:shadow-lg hover:-translate-y-1 transition-all duration-500"
|
||||
>
|
||||
<div className={`text-4xl sm:text-5xl font-black font-mono mb-6 ${
|
||||
index === 0 ? 'text-brand' : 'text-ink/[0.06]'
|
||||
}`}>
|
||||
0{index + 1}
|
||||
</div>
|
||||
<div
|
||||
className="w-2 h-2 rounded-full mb-6"
|
||||
style={{ backgroundColor: index === 0 ? '#C41E3A' : 'var(--color-border-primary)' }}
|
||||
/>
|
||||
<h3 className="text-lg font-bold mb-2 text-ink group-hover:text-brand transition-colors duration-300">
|
||||
{desc ? title : step.slice(0, 6)}
|
||||
</h3>
|
||||
@@ -287,9 +267,6 @@ function CaseStudiesSection({ caseStudies = [] }: { caseStudies?: CaseStudy[] })
|
||||
transition={{ duration: 0.8, ease: EASE_OUT }}
|
||||
className="max-w-3xl mb-16 sm:mb-20 md:mb-24"
|
||||
>
|
||||
<div className="text-sm font-mono tracking-[0.2em] text-text-muted uppercase mb-6">
|
||||
Case Studies
|
||||
</div>
|
||||
<h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold text-ink tracking-tight leading-[0.95]">
|
||||
真实案例，<br className="sm:hidden" />可衡量的成果
|
||||
</h2>
|
||||
@@ -304,13 +281,12 @@ function CaseStudiesSection({ caseStudies = [] }: { caseStudies?: CaseStudy[] })
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-60px' }}
|
||||
transition={{ duration: 0.6, delay: i * 0.08, ease: EASE_OUT }}
|
||||
className="group relative block p-8 sm:p-10 transition-all duration-500 hover:bg-bg-secondary bg-white border border-transparent hover:border-border-primary"
|
||||
className="group relative block p-8 sm:p-10 transition-all duration-500 hover:bg-bg-secondary hover:shadow-lg hover:-translate-y-1 bg-white border border-transparent hover:border-border-primary"
|
||||
>
|
||||
<div className="absolute top-0 left-0 h-0 w-[2px] group-hover:h-full transition-all duration-500 origin-top bg-brand" />
|
||||
|
||||
<div className="relative z-10">
|
||||
<div className="flex items-center gap-3 mb-5">
|
||||
<span className="text-[11px] tracking-[0.25em] uppercase font-medium text-brand">
|
||||
<span className="text-xs font-medium text-brand">
|
||||
{cs.industry}
|
||||
</span>
|
||||
<span className="text-border-primary">•</span>
|
||||
@@ -383,6 +359,7 @@ function CTASection() {
|
||||
export default function ServiceDetailContentV4({ service }: { service: Service }) {
|
||||
return (
|
||||
<main className="min-h-screen bg-white text-ink">
|
||||
<ScrollProgress />
|
||||
<DetailHero service={service} />
|
||||
<OverviewSection service={service} />
|
||||
<FeaturesSection service={service} />
|
||||
|
||||
Reference in New Issue
Block a user