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:
张翔
2026-07-08 14:46:51 +08:00
parent f4b98fb730
commit 7f36211342
22 changed files with 601 additions and 497 deletions
@@ -1,7 +1,7 @@
'use client';
import { motion } from 'framer-motion';
import { ArrowUpRight, Factory, ShoppingCart, Heart, GraduationCap, Sparkles, Shield, Truck, type LucideIcon } from 'lucide-react';
import { ArrowUpRight, Factory, ShoppingCart, Heart, GraduationCap, Shield, Truck, type LucideIcon } from 'lucide-react';
import { type Solution } from '@/lib/constants/solutions';
import type { Product } from '@/lib/constants/products';
@@ -21,20 +21,11 @@ function HeroSection() {
<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"
>
Industry Solutions
</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">深耕行业场景的</div>
<div className="block mt-4 sm:mt-6">
@@ -59,9 +50,9 @@ function HeroSection() {
transition={{ duration: 0.8, delay: 0.5, ease: EASE_OUT }}
className="text-lg md:text-xl text-text-secondary max-w-2xl leading-relaxed mb-12 sm:mb-16"
>
端到端交付,推荐套装组合 + 配套服务包。
端到端交付可量化的业务成果。
<br className="hidden sm:block" />
基于自研产品矩阵,为制造、零售、教育、医疗、金融、物流六大行业量身定制最佳实践。
基于自研产品矩阵,为制造、零售、教育、医疗、金融、物流六大行业沉淀最佳实践。
</motion.p>
<motion.div
@@ -119,6 +110,9 @@ function HeroSection() {
function SolutionCard({ solution, index, products }: { solution: Solution; index: number; products?: Product[] }) {
const productLookup = products ?? [];
const Icon = INDUSTRY_ICONS[solution.industry] || Factory;
const recommendedProductNames = (solution.recommendedProducts ?? [])
.map((pid) => productLookup.find((p) => p.id === pid)?.title)
.filter(Boolean) as string[];
return (
<motion.a
@@ -127,69 +121,41 @@ function SolutionCard({ solution, index, products }: { solution: Solution; index
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: '-60px' }}
transition={{ duration: 0.6, delay: index * 0.08, ease: EASE_OUT }}
className="group relative block transition-all duration-500 hover:bg-bg-secondary bg-white border border-border-primary hover:border-ink/20"
className="group relative block transition-all duration-500 hover:bg-bg-secondary hover:shadow-lg hover:-translate-y-1 bg-white border border-border-primary hover:border-brand/20"
>
<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 p-8 sm:p-10 md:p-12">
<div className="flex items-start justify-between mb-8">
<div className="w-12 h-12 flex items-center justify-center text-text-secondary group-hover:text-brand transition-colors duration-300">
<Icon className="w-6 h-6" strokeWidth={1.5} />
</div>
<span className="text-5xl sm:text-6xl font-black text-ink/[0.04] tracking-tighter leading-none">
{String(index + 1).padStart(2, '0')}
</span>
</div>
<div className="mb-6">
<span className="inline-block px-3 py-1 text-[11px] font-bold mb-4 text-brand border border-brand/20 bg-brand/[0.05]">
<div className="flex items-center gap-3 mb-6">
<Icon className="w-5 h-5 text-text-muted" strokeWidth={1.5} />
<h3 className="text-lg font-bold text-text-primary">
{solution.industry}
</span>
<div className="text-text-muted text-sm tracking-widest uppercase mb-2">
{solution.subtitle}
</div>
<h3 className="text-xl sm:text-2xl md:text-3xl font-bold text-ink group-hover:text-brand transition-colors duration-300 leading-tight">
{solution.title}
</h3>
</div>
<p className="text-text-secondary leading-relaxed mb-6 text-[15px]">
{solution.description}
</p>
<div className="mb-4">
<div className="text-xs text-text-muted mb-2">核心痛点</div>
<p className="text-sm text-text-secondary leading-relaxed">
{solution.painPoints?.join('、')}
</p>
</div>
<div className="flex flex-col gap-2 mb-6">
{solution.challenges.slice(0, 2).map((challenge, idx) => (
<div key={idx} className="flex items-start gap-2.5 text-sm text-text-secondary">
<span className="text-brand mt-0.5 font-bold">•</span>
<span>{challenge}</span>
<div className="grid grid-cols-2 gap-2 mb-4">
{solution.outcomes?.map((o) => (
<div key={o.label} className="p-2 bg-bg-secondary">
<div className="text-base font-bold text-brand">{o.value}</div>
<div className="text-xs text-text-muted">{o.label}</div>
</div>
))}
</div>
<div className="pt-6 border-t border-border-primary">
<p className="text-[11px] text-text-muted mb-3 uppercase tracking-widest font-bold flex items-center gap-2">
<Sparkles className="w-3.5 h-3.5 text-brand" />
推荐产品组合
</p>
<div className="flex flex-wrap gap-2 mb-4">
{solution.suiteCombination.primaryProducts.map(pid => {
const prod = productLookup.find(p => p.id === pid);
return prod ? (
<span
key={pid}
className="px-3 py-1.5 text-xs font-medium text-ink bg-bg-secondary border border-border-primary"
>
{prod.title.replace('睿新', '').replace('睿视 ', '')}
</span>
) : null;
})}
<span className="px-3 py-1.5 text-xs font-bold text-brand border border-brand/20 bg-brand/[0.05]">
+ 配套服务
</span>
<div className="pt-4 border-t border-border-primary">
<div className="text-xs text-text-muted mb-2">推荐产品组合</div>
<div className="flex flex-wrap gap-2">
{recommendedProductNames.map((name) => (
<span key={name} className="px-2 py-1 text-xs bg-bg-secondary text-text-secondary">
{name.replace('睿新', '')}
</span>
))}
</div>
<p className="text-sm text-text-muted leading-relaxed">
{solution.suiteCombination.rationale}
</p>
</div>
<div className="inline-flex items-center gap-2 text-sm font-semibold text-text-secondary group-hover:text-brand transition-colors duration-300 mt-6">
@@ -215,9 +181,6 @@ function SolutionsGridSection({ solutions, products }: { solutions: Solution[];
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">
Industry Expertise
</div>
<h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold text-ink tracking-tight leading-[0.95]">
行业解决方案
</h2>