From 712f8572ab895b68e083caf869300d797807a04c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E7=BF=94?= <xiangzhang1024@gmail.com>
Date: Thu, 26 Feb 2026 18:48:13 +0800
Subject: [PATCH] feat: create cases page with new content structure

---
 src/app/(marketing)/cases/[id]/client.tsx | 138 ++++++++++++++++++----
 src/app/(marketing)/cases/page.tsx        | 122 +++++++++++++++++++
 2 files changed, 239 insertions(+), 21 deletions(-)
 create mode 100644 src/app/(marketing)/cases/page.tsx

diff --git a/src/app/(marketing)/cases/[id]/client.tsx b/src/app/(marketing)/cases/[id]/client.tsx
index 3c4e60b..b162a5f 100644
--- a/src/app/(marketing)/cases/[id]/client.tsx
+++ b/src/app/(marketing)/cases/[id]/client.tsx
@@ -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>
diff --git a/src/app/(marketing)/cases/page.tsx b/src/app/(marketing)/cases/page.tsx
new file mode 100644
index 0000000..0a02811
--- /dev/null
+++ b/src/app/(marketing)/cases/page.tsx
@@ -0,0 +1,122 @@
+import { Metadata } from 'next';
+import Link from 'next/link';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { ArrowRight, Building2, Calendar, TrendingUp } from 'lucide-react';
+import { CASES } from '@/lib/constants';
+
+export const metadata: Metadata = {
+  title: '客户案例 - 睿新致远',
+  description: '与谁同行，决定能走多远',
+};
+
+export default function CasesPage() {
+  return (
+    <div className="min-h-screen bg-white">
+      <div className="bg-gradient-to-br from-[#C41E3A] to-[#1C1C1C] py-20">
+        <div className="container-wide">
+          <h1 className="text-4xl md:text-5xl font-bold text-white mb-6 text-center">
+            与谁同行，决定能走多远
+          </h1>
+          <p className="text-xl text-white/90 text-center max-w-3xl mx-auto">
+            我们与优秀的企业同行，共同成长，共创未来
+          </p>
+        </div>
+      </div>
+
+      <div className="container-wide py-16">
+        <div className="max-w-6xl mx-auto">
+          <div className="grid md:grid-cols-2 gap-8">
+            {CASES.map((caseItem, index) => (
+              <Link
+                key={caseItem.id}
+                href={`/cases/${caseItem.id}`}
+                className="group bg-white rounded-2xl border border-[#E5E5E5] overflow-hidden hover:shadow-xl transition-all duration-300"
+              >
+                <div className="relative h-48 bg-gradient-to-br from-[#F5F5F5] to-[#E5E5E5] overflow-hidden">
+                  <div className="absolute inset-0 flex items-center justify-center">
+                    <Building2 className="w-24 h-24 text-[#C41E3A]/20 group-hover:scale-110 transition-transform duration-300" />
+                  </div>
+                  <div className="absolute top-4 right-4">
+                    <Badge className="bg-white/90 text-[#1C1C1C] hover:bg-white">
+                      {caseItem.industry}
+                    </Badge>
+                  </div>
+                </div>
+
+                <div className="p-6">
+                  <div className="flex items-center gap-2 mb-3">
+                    <Building2 className="w-5 h-5 text-[#C41E3A]" />
+                    <span className="font-semibold text-[#1C1C1C]">{caseItem.client}</span>
+                  </div>
+
+                  <h3 className="text-xl font-bold text-[#1C1C1C] mb-3 group-hover:text-[#C41E3A] transition-colors">
+                    {caseItem.title}
+                  </h3>
+
+                  <div className="flex flex-wrap gap-2 mb-4">
+                    <Badge variant="secondary" className="flex items-center gap-1">
+                      <Calendar className="w-3 h-3" />
+                      3年合作
+                    </Badge>
+                    <Badge variant="secondary" className="flex items-center gap-1">
+                      <TrendingUp className="w-3 h-3" />
+                      数字化转型
+                    </Badge>
+                  </div>
+
+                  <p className="text-[#5C5C5C] text-sm line-clamp-2 mb-4">
+                    {caseItem.description}
+                  </p>
+
+                  <div className="flex items-center text-[#C41E3A] font-medium group-hover:translate-x-2 transition-transform">
+                    查看详情
+                    <ArrowRight className="w-4 h-4 ml-2" />
+                  </div>
+                </div>
+              </Link>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <div className="bg-[#F5F5F5] py-16">
+        <div className="container-wide text-center">
+          <h2 className="text-3xl font-bold text-[#1C1C1C] mb-6">
+            准备开始您的数字化转型之旅？
+          </h2>
+          <p className="text-lg text-[#5C5C5C] mb-8 max-w-2xl mx-auto">
+            让我们与您同行，共创美好未来
+          </p>
+          <div className="flex justify-center gap-4">
+            <Button 
+              size="lg" 
+              variant="outline"
+              onClick={() => {
+                const element = document.getElementById('contact');
+                if (element) {
+                  element.scrollIntoView({ behavior: 'smooth' });
+                }
+              }}
+            >
+              联系我们
+            </Button>
+            <Button 
+              size="lg" 
+              className="bg-[#C41E3A] hover:bg-[#A01830] text-white"
+              onClick={() => {
+                const element = document.getElementById('contact');
+                if (element) {
+                  element.scrollIntoView({ behavior: 'smooth' });
+                }
+              }}
+            >
+              立即咨询
+              <ArrowRight className="ml-2 w-4 h-4" />
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}