张翔
c474394237
- 法律页面(条款/隐私) Hero 渐变背景深色模式适配，新增 --color-hero-dark-end 变量 - Badge secondary 变体深色模式下从白底白字改为主题自适应灰底 - 首页 Hero 快速导航图标 strokeWidth 加粗提升可读性 (1.8→2.2) - 服务详情挑战卡片添加 border + hover 边框变色增强层次感 - 移动端 Tab Bar 激活指示器升级为顶部+底部双信号
195 lines
8.8 KiB
TypeScript
195 lines
8.8 KiB
TypeScript
'use client';
|
||
|
||
import { StaticLink } from '@/components/ui/static-link';
|
||
import { Button } from '@/components/ui/button';
|
||
import { PageNav } from '@/components/layout/page-nav';
|
||
import {
|
||
CheckCircle2,
|
||
TrendingUp,
|
||
Target,
|
||
Clock,
|
||
MessageCircle,
|
||
ArrowRight,
|
||
} from 'lucide-react';
|
||
import { SERVICES } from '@/lib/constants';
|
||
|
||
interface ServiceDetailClientProps {
|
||
service: typeof SERVICES[number];
|
||
}
|
||
|
||
const challenges: Record<string, { title: string; description: string }[]> = {
|
||
software: [
|
||
{ title: '需求不明确', description: '业务部门提不出清晰需求，开发团队反复返工' },
|
||
{ title: '技术选型困难', description: '技术栈更新快，不知道该选什么技术方案' },
|
||
{ title: '项目延期', description: '开发进度难以把控，上线时间一拖再拖' },
|
||
{ title: '维护成本高', description: '系统上线后问题不断，运维压力巨大' },
|
||
],
|
||
data: [
|
||
{ title: '数据孤岛', description: '各系统数据分散，无法整合分析' },
|
||
{ title: '决策盲区', description: '缺乏数据支撑，决策凭感觉' },
|
||
{ title: '报表滞后', description: '手工制作报表，时效性差' },
|
||
{ title: '价值难挖', description: '数据很多，但不知道怎么用' },
|
||
],
|
||
consulting: [
|
||
{ title: '方向不明', description: '数字化转型不知道从哪里入手' },
|
||
{ title: '技术债务', description: '历史系统包袱重，新技术难以引入' },
|
||
{ title: '人才短缺', description: '缺乏专业的技术规划和架构人才' },
|
||
{ title: '投入浪费', description: 'IT投入不少，但看不到明显效果' },
|
||
],
|
||
solutions: [
|
||
{ title: '行业壁垒', description: '不了解行业最佳实践，走弯路' },
|
||
{ title: '方案碎片化', description: '各系统各自为政，无法协同' },
|
||
{ title: '实施风险', description: '大型项目实施失败率高' },
|
||
{ title: '效果难量化', description: '投入产出比不清晰，难以评估' },
|
||
],
|
||
};
|
||
|
||
const outcomes: Record<string, { value: string; label: string }[]> = {
|
||
software: [
|
||
{ value: '30%+', label: '预期开发效率提升' },
|
||
{ value: '50%+', label: '预期返工率降低' },
|
||
{ value: '严格', label: '交付质量把控' },
|
||
],
|
||
data: [
|
||
{ value: '实时', label: '数据更新' },
|
||
{ value: '自助式', label: '分析模式' },
|
||
{ value: '多维度', label: '可视化报表' },
|
||
],
|
||
consulting: [
|
||
{ value: '清晰', label: '转型方向规划' },
|
||
{ value: '系统化', label: '技术选型评估' },
|
||
{ value: '可落地', label: '实施路径设计' },
|
||
],
|
||
solutions: [
|
||
{ value: '标准化', label: '行业方案交付' },
|
||
{ value: '端到端', label: '全流程实施' },
|
||
{ value: '持续化', label: '运维优化支持' },
|
||
],
|
||
};
|
||
|
||
export function ServiceDetailClient({ service }: ServiceDetailClientProps) {
|
||
const serviceChallenges = challenges[service.id] ?? [];
|
||
const serviceOutcomes = outcomes[service.id] ?? [];
|
||
|
||
return (
|
||
<div className="min-h-screen bg-[var(--color-bg-primary)]">
|
||
<div className="pt-32 pb-16">
|
||
<div className="container-wide">
|
||
<PageNav items={[{ label: '服务', href: '/services' }, { label: service.title }]} />
|
||
<div className="max-w-4xl mt-8">
|
||
<p className="text-sm font-medium text-[var(--color-brand-primary)] mb-4 tracking-wide uppercase">Services</p>
|
||
<h1 className="text-4xl md:text-5xl font-bold text-[var(--color-text-primary)] mb-6 tracking-tight">
|
||
{service.title}
|
||
</h1>
|
||
<p className="text-xl text-[var(--color-text-muted)] leading-relaxed">
|
||
{service.description}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="container-wide pb-20">
|
||
<div className="max-w-4xl space-y-16">
|
||
<section>
|
||
<div className="flex items-center gap-3 mb-6">
|
||
<div className="w-10 h-10 bg-[var(--color-brand-primary-bg)] rounded-lg flex items-center justify-center">
|
||
<MessageCircle className="w-5 h-5 text-[var(--color-brand-primary)]" />
|
||
</div>
|
||
<h2 className="text-2xl font-bold text-[var(--color-text-primary)]">您可能面临的挑战</h2>
|
||
</div>
|
||
<div className="grid md:grid-cols-2 gap-4">
|
||
{serviceChallenges.map((challenge, index) => (
|
||
<div
|
||
key={index}
|
||
className="p-4 bg-[var(--color-bg-tertiary)] rounded-lg border border-[var(--color-border-primary)] hover:border-[var(--color-brand-primary)]/30 hover:bg-[var(--color-brand-primary-bg)] transition-colors"
|
||
>
|
||
<h3 className="font-semibold text-[var(--color-text-primary)] mb-1 text-sm">{challenge.title}</h3>
|
||
<p className="text-sm text-[var(--color-text-muted)]">{challenge.description}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<div className="flex items-center gap-3 mb-6">
|
||
<div className="w-10 h-10 bg-[var(--color-brand-primary-bg)] rounded-lg flex items-center justify-center">
|
||
<Target className="w-5 h-5 text-[var(--color-brand-primary)]" />
|
||
</div>
|
||
<h2 className="text-2xl font-bold text-[var(--color-text-primary)]">我们如何帮助您</h2>
|
||
</div>
|
||
<p className="text-lg text-[var(--color-text-muted)] leading-relaxed mb-6">
|
||
{service.overview}
|
||
</p>
|
||
<div className="space-y-3">
|
||
{service.features.map((feature, index) => (
|
||
<div key={index} className="flex items-start gap-3">
|
||
<CheckCircle2 className="w-5 h-5 text-[var(--color-brand-primary)] mt-0.5 shrink-0" />
|
||
<span className="text-[var(--color-text-primary)] text-sm">{feature}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<div className="flex items-center gap-3 mb-6">
|
||
<div className="w-10 h-10 bg-[var(--color-brand-primary-bg)] rounded-lg flex items-center justify-center">
|
||
<Clock className="w-5 h-5 text-[var(--color-brand-primary)]" />
|
||
</div>
|
||
<h2 className="text-2xl font-bold text-[var(--color-text-primary)]">服务流程</h2>
|
||
</div>
|
||
<div className="space-y-4">
|
||
{service.process.map((step, index) => (
|
||
<div key={index} className="flex items-start gap-4">
|
||
<div className="w-8 h-8 bg-[var(--color-brand-primary)] rounded-full flex items-center justify-center shrink-0 text-white text-sm font-bold">
|
||
{index + 1}
|
||
</div>
|
||
<p className="text-[var(--color-text-primary)] pt-1">{step}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<div className="flex items-center gap-3 mb-6">
|
||
<div className="w-10 h-10 bg-[var(--color-brand-primary-bg)] rounded-lg flex items-center justify-center">
|
||
<TrendingUp className="w-5 h-5 text-[var(--color-brand-primary)]" />
|
||
</div>
|
||
<h2 className="text-2xl font-bold text-[var(--color-text-primary)]">您将获得的改变</h2>
|
||
</div>
|
||
<div className="grid sm:grid-cols-3 gap-4">
|
||
{serviceOutcomes.map((outcome, index) => (
|
||
<div
|
||
key={index}
|
||
className="p-6 bg-[var(--color-bg-tertiary)] rounded-lg text-center hover:bg-[var(--color-brand-primary-bg)] transition-colors"
|
||
>
|
||
<div className="text-3xl font-bold text-[var(--color-brand-primary)] mb-2">
|
||
{outcome.value}
|
||
</div>
|
||
<div className="text-sm text-[var(--color-text-muted)]">{outcome.label}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div className="mt-4 p-4 bg-[var(--color-bg-tertiary)] rounded-lg">
|
||
<p className="text-sm text-[var(--color-text-muted)]">
|
||
{service.benefits.join('；')}
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<div className="flex justify-center gap-4 pt-8 border-t border-[var(--color-border-primary)]">
|
||
<StaticLink href="/services">
|
||
<Button variant="outline" size="lg">查看其他服务</Button>
|
||
</StaticLink>
|
||
<StaticLink href="/contact">
|
||
<Button size="lg" className="bg-[var(--color-brand-primary)] hover:bg-[var(--color-brand-primary-hover)] text-white">
|
||
开始您的转型之旅
|
||
<ArrowRight className="ml-2 w-4 h-4" />
|
||
</Button>
|
||
</StaticLink>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|