feat: create cases page with new content structure

2026-02-26 18:48:13 +08:00
parent ac4f228b04
commit 712f8572ab
2 changed files with 239 additions and 21 deletions
@@ -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>
+  );
+}