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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user