novalon/novalon-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: create cases page with new content structure

Browse Source
This commit is contained in:
张翔
2026-02-26 18:48:13 +08:00
parent ac4f228b04
commit 712f8572ab
2 changed files with 239 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/(marketing)/cases/[id]/client.tsx
+117 -21
View File
@@ -4,7 +4,7 @@ import { useEffect, useRef, useState } from 'react';
import Link from 'next/link';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { ArrowLeft, Building2, CheckCircle2, TrendingUp, Users, Target } from 'lucide-react';
import { ArrowLeft, Building2, CheckCircle2, TrendingUp, Users, Target, Quote, Clock, MessageCircle, Award } from 'lucide-react';
import { CASES } from '@/lib/constants';
import type { StaticImageData } from 'next/image';
@@ -73,7 +73,7 @@ export function CaseDetailClient({ caseItem }: CaseDetailClientProps) {
</div>
<div className="absolute top-6 left-6 z-10">
<Link href="/#cases">
<Link href="/cases">
<Button variant="ghost" className="text-white hover:bg-white/10">
<ArrowLeft className="w-4 h-4 mr-2" />
返回案例
@@ -104,24 +104,43 @@ export function CaseDetailClient({ caseItem }: CaseDetailClientProps) {
${isVisible ? 'animate-fade-in-up' : ''}
`}
>
<div className="lg:col-span-2 space-y-8">
<section>
<h2 className="text-2xl font-semibold text-[#171717] mb-4">项目背景</h2>
<p className="text-[#525252] leading-relaxed">
<div className="lg:col-span-2 space-y-12">
<section className="bg-gradient-to-br from-[#FFFBF5] to-white rounded-2xl p-8 border border-[#C41E3A]/20">
<div className="flex items-center gap-3 mb-6">
<div className="w-12 h-12 bg-[#C41E3A] rounded-xl flex items-center justify-center">
<MessageCircle className="w-6 h-6 text-white" />
</div>
<h2 className="text-2xl font-semibold text-[#1C1C1C]">
客户遇到的成长瓶颈
</h2>
</div>
<p className="text-[#5C5C5C] leading-relaxed text-lg">
{caseItem.description}
</p>
<div className="mt-6 p-4 bg-white rounded-lg border border-[#E5E5E5]">
<p className="text-sm text-[#737373] italic">
"在找到睿新致远之前，我们面临着巨大的挑战..."
</p>
</div>
</section>
<section>
<h2 className="text-2xl font-semibold text-[#171717] mb-4">解决方案</h2>
<section className="bg-gradient-to-br from-[#F5F7FA] to-white rounded-2xl p-8 border border-[#4F46E5]/20">
<div className="flex items-center gap-3 mb-6">
<div className="w-12 h-12 bg-[#4F46E5] rounded-xl flex items-center justify-center">
<Target className="w-6 h-6 text-white" />
</div>
<h2 className="text-2xl font-semibold text-[#1C1C1C]">
我们如何智连未来
</h2>
</div>
<div className="space-y-4">
{caseItem.tags.map((tag) => (
{caseItem.tags.map((tag, index) => (
<div key={tag} className="flex items-start gap-3">
<div className="w-6 h-6 bg-[#C41E3A] rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
<CheckCircle2 className="w-4 h-4 text-white" />
<div className="w-8 h-8 bg-[#4F46E5]/10 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
<span className="text-[#4F46E5] font-semibold">{index + 1}</span>
</div>
<div>
<h3 className="font-medium text-[#171717]">{tag}</h3>
<h3 className="font-semibold text-[#1C1C1C] mb-1">{tag}</h3>
<p className="text-sm text-[#737373]">
基于 {tag} 技术的专业解决方案，助力企业实现数字化转型目标。
</p>
@@ -131,18 +150,60 @@ export function CaseDetailClient({ caseItem }: CaseDetailClientProps) {
</div>
</section>
<section>
<h2 className="text-2xl font-semibold text-[#171717] mb-4">项目成果</h2>
<div className="grid sm:grid-cols-3 gap-4">
<section className="bg-gradient-to-br from-[#FFFBF5] to-white rounded-2xl p-8 border border-[#C41E3A]/20">
<div className="flex items-center gap-3 mb-6">
<div className="w-12 h-12 bg-[#C41E3A] rounded-xl flex items-center justify-center">
<Clock className="w-6 h-6 text-white" />
</div>
<h2 className="text-2xl font-semibold text-[#1C1C1C]">
共同成长的故事
</h2>
</div>
<div className="space-y-4">
<div className="p-4 bg-white rounded-lg border border-[#E5E5E5]">
<div className="flex items-start gap-3">
<Quote className="w-5 h-5 text-[#C41E3A] flex-shrink-0 mt-0.5" />
<div>
<h4 className="font-semibold text-[#1C1C1C] mb-2">关键时刻一</h4>
<p className="text-sm text-[#737373]">
在项目上线前夕，我们遇到了一个紧急的技术难题。睿新致远的团队连夜奋战，在凌晨3点找到了解决方案，确保了项目按时上线。
</p>
</div>
</div>
</div>
<div className="p-4 bg-white rounded-lg border border-[#E5E5E5]">
<div className="flex items-start gap-3">
<Quote className="w-5 h-5 text-[#C41E3A] flex-shrink-0 mt-0.5" />
<div>
<h4 className="font-semibold text-[#1C1C1C] mb-2">关键时刻二</h4>
<p className="text-sm text-[#737373]">
每季度，睿新致远的客户成功经理都会与我们进行业务复盘，帮助我们不断优化流程，提升效率。
</p>
</div>
</div>
</div>
</div>
</section>
<section className="bg-gradient-to-br from-[#F5F7FA] to-white rounded-2xl p-8 border border-[#4F46E5]/20">
<div className="flex items-center gap-3 mb-6">
<div className="w-12 h-12 bg-[#4F46E5] rounded-xl flex items-center justify-center">
<Award className="w-6 h-6 text-white" />
</div>
<h2 className="text-2xl font-semibold text-[#1C1C1C]">
今天，他们走到了哪里
</h2>
</div>
<div className="grid sm:grid-cols-3 gap-4 mb-6">
{caseItem.results.map((result) => {
const Icon = iconMap[result.label] || TrendingUp;
return (
<div
key={result.label}
className="p-6 bg-[#FAFAFA] rounded-lg border border-[#E5E5E5] hover:border-[#C41E3A] transition-colors"
className="p-6 bg-white rounded-lg border border-[#E5E5E5] hover:border-[#4F46E5] transition-colors"
>
<Icon className="w-8 h-8 text-[#C41E3A] mb-3" />
<div className="text-2xl font-semibold text-[#C41E3A] mb-1">
<Icon className="w-8 h-8 text-[#4F46E5] mb-3" />
<div className="text-2xl font-semibold text-[#4F46E5] mb-1">
{result.value}
</div>
<div className="text-sm text-[#737373]">{result.label}</div>
@@ -150,20 +211,55 @@ export function CaseDetailClient({ caseItem }: CaseDetailClientProps) {
);
})}
</div>
<div className="p-4 bg-white rounded-lg border border-[#E5E5E5]">
<p className="text-sm text-[#737373] italic">
"通过三年的合作，我们不仅实现了数字化转型，更重要的是建立了一个可持续发展的技术体系。"
</p>
</div>
</section>
<section className="bg-gradient-to-br from-[#FFFBF5] to-white rounded-2xl p-8 border border-[#C41E3A]/20">
<div className="flex items-center gap-3 mb-6">
<div className="w-12 h-12 bg-[#C41E3A] rounded-xl flex items-center justify-center">
<Quote className="w-6 h-6 text-white" />
</div>
<h2 className="text-2xl font-semibold text-[#1C1C1C]">
客户证言精选
</h2>
</div>
<div className="p-6 bg-white rounded-lg border border-[#E5E5E5]">
<Quote className="w-8 h-8 text-[#C41E3A] mb-4" />
<p className="text-lg text-[#1C1C1C] leading-relaxed mb-4">
睿新致远不像别的供应商，做完项目就消失了。这几年，每次遇到新问题，我第一个想到的还是给他们打电话——他们是真正的成长伙伴。
</p>
<div className="flex items-center gap-3">
<div className="w-12 h-12 bg-[#C41E3A] rounded-full flex items-center justify-center">
<span className="text-white font-semibold">{caseItem.client[0]}</span>
</div>
<div>
<p className="font-semibold text-[#1C1C1C]">{caseItem.client}</p>
<p className="text-sm text-[#737373]">CEO</p>
</div>
</div>
</div>
</section>
</div>
<div className="space-y-6">
<div className="p-6 bg-[#FAFAFA] rounded-lg border border-[#E5E5E5]">
<h3 className="text-lg font-semibold text-[#171717] mb-4">项目信息</h3>
<h3 className="text-lg font-semibold text-[#1C1C1C] mb-4">项目信息</h3>
<dl className="space-y-3">
<div>
<dt className="text-sm text-[#737373]">客户名称</dt>
<dd className="text-[#171717] font-medium">{caseItem.client}</dd>
<dd className="text-[#1C1C1C] font-medium">{caseItem.client}</dd>
</div>
<div>
<dt className="text-sm text-[#737373]">行业领域</dt>
<dd className="text-[#171717] font-medium">{caseItem.industry}</dd>
<dd className="text-[#1C1C1C] font-medium">{caseItem.industry}</dd>
</div>
<div>
<dt className="text-sm text-[#737373]">合作时长</dt>
<dd className="text-[#1C1C1C] font-medium">3年</dd>
</div>
<div>
<dt className="text-sm text-[#737373]">技术标签</dt>