feat: add case detail pages with SSG and dynamic routing
This commit is contained in:
张翔
@@ -0,0 +1,224 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import Image from 'next/image';
|
||||
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 { CASES, COMPANY_INFO } from '@/lib/constants';
|
||||
import type { StaticImageData } from 'next/image';
|
||||
|
||||
interface CaseResult {
|
||||
label: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
interface CaseItem {
|
||||
id: string;
|
||||
title: string;
|
||||
client: string;
|
||||
industry: string;
|
||||
description: string;
|
||||
results: readonly CaseResult[];
|
||||
tags: readonly string[];
|
||||
image?: string | StaticImageData;
|
||||
}
|
||||
|
||||
interface CaseDetailClientProps {
|
||||
caseItem: CaseItem;
|
||||
}
|
||||
|
||||
export function CaseDetailClient({ caseItem }: CaseDetailClientProps) {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const contentRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
if (entry.isIntersecting) {
|
||||
setIsVisible(true);
|
||||
}
|
||||
},
|
||||
{ threshold: 0.1 }
|
||||
);
|
||||
|
||||
if (contentRef.current) {
|
||||
observer.observe(contentRef.current);
|
||||
}
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
const relatedCases = CASES.filter((c) => c.id !== caseItem.id).slice(0, 2);
|
||||
|
||||
const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
|
||||
'业务处理效率': TrendingUp,
|
||||
'客户满意度': Users,
|
||||
'运营成本': Target,
|
||||
'生产效率': TrendingUp,
|
||||
'设备利用率': Target,
|
||||
'不良品率': CheckCircle2,
|
||||
'数据整合效率': TrendingUp,
|
||||
'决策响应时间': Target,
|
||||
'营销转化率': Users,
|
||||
};
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-white">
|
||||
<div className="pt-16">
|
||||
<div className="relative h-[40vh] min-h-[300px] bg-gradient-to-br from-[#C41E3A] to-[#8B1429] overflow-hidden">
|
||||
<div className="absolute inset-0 bg-black/20" />
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<Building2 className="w-32 h-32 text-white/10" />
|
||||
</div>
|
||||
|
||||
<div className="absolute top-6 left-6 z-10">
|
||||
<Link href="/#cases">
|
||||
<Button variant="ghost" className="text-white hover:bg-white/10">
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
返回案例
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-0 left-0 right-0 p-8 bg-gradient-to-t from-black/60 to-transparent">
|
||||
<div className="container-wide">
|
||||
<Badge className="mb-4 bg-white/20 text-white hover:bg-white/30">
|
||||
{caseItem.industry}
|
||||
</Badge>
|
||||
<h1 className="text-3xl sm:text-4xl lg:text-5xl font-semibold text-white mb-2">
|
||||
{caseItem.title}
|
||||
</h1>
|
||||
<p className="text-lg text-white/80">
|
||||
{caseItem.client}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ref={contentRef} className="container-wide py-12 md:py-16">
|
||||
<div
|
||||
className={`
|
||||
grid lg:grid-cols-3 gap-8 lg:gap-12
|
||||
opacity-0 translate-y-4
|
||||
${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">
|
||||
{caseItem.description}
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-semibold text-[#171717] mb-4">解决方案</h2>
|
||||
<div className="space-y-4">
|
||||
{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>
|
||||
<div>
|
||||
<h3 className="font-medium text-[#171717]">{tag}</h3>
|
||||
<p className="text-sm text-[#737373]">
|
||||
基于 {tag} 技术的专业解决方案，助力企业实现数字化转型目标。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-semibold text-[#171717] mb-4">项目成果</h2>
|
||||
<div className="grid sm:grid-cols-3 gap-4">
|
||||
{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"
|
||||
>
|
||||
<Icon className="w-8 h-8 text-[#C41E3A] mb-3" />
|
||||
<div className="text-2xl font-semibold text-[#C41E3A] mb-1">
|
||||
{result.value}
|
||||
</div>
|
||||
<div className="text-sm text-[#737373]">{result.label}</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>
|
||||
<dl className="space-y-3">
|
||||
<div>
|
||||
<dt className="text-sm text-[#737373]">客户名称</dt>
|
||||
<dd className="text-[#171717] font-medium">{caseItem.client}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-sm text-[#737373]">行业领域</dt>
|
||||
<dd className="text-[#171717] font-medium">{caseItem.industry}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-sm text-[#737373]">技术标签</dt>
|
||||
<dd className="flex flex-wrap gap-2 mt-1">
|
||||
{caseItem.tags.map((tag) => (
|
||||
<Badge key={tag} variant="secondary" className="text-xs">
|
||||
{tag}
|
||||
</Badge>
|
||||
))}
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div className="p-6 bg-gradient-to-br from-[#C41E3A] to-[#8B1429] rounded-lg text-white">
|
||||
<h3 className="text-lg font-semibold mb-2">想要了解更多？</h3>
|
||||
<p className="text-sm text-white/80 mb-4">
|
||||
联系我们的专家团队，获取定制化解决方案
|
||||
</p>
|
||||
<Link href="/#contact">
|
||||
<Button className="w-full bg-white text-[#C41E3A] hover:bg-white/90">
|
||||
联系我们
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{relatedCases.length > 0 && (
|
||||
<section className="mt-16 pt-16 border-t border-[#E5E5E5]">
|
||||
<h2 className="text-2xl font-semibold text-[#171717] mb-8">相关案例</h2>
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
{relatedCases.map((relatedCase) => (
|
||||
<Link
|
||||
key={relatedCase.id}
|
||||
href={`/cases/${relatedCase.id}`}
|
||||
className="group p-6 bg-[#FAFAFA] rounded-lg border border-[#E5E5E5] hover:border-[#C41E3A] transition-colors"
|
||||
>
|
||||
<Badge variant="secondary" className="mb-2">
|
||||
{relatedCase.industry}
|
||||
</Badge>
|
||||
<h3 className="text-lg font-semibold text-[#171717] group-hover:text-[#C41E3A] transition-colors">
|
||||
{relatedCase.title}
|
||||
</h3>
|
||||
<p className="text-sm text-[#737373] mt-2 line-clamp-2">
|
||||
{relatedCase.description}
|
||||
</p>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import { Metadata } from 'next';
|
||||
import { notFound } from 'next/navigation';
|
||||
import { CASES } from '@/lib/constants';
|
||||
import { CaseDetailClient } from './client';
|
||||
|
||||
export async function generateStaticParams() {
|
||||
return CASES.map((caseItem) => ({
|
||||
id: caseItem.id,
|
||||
}));
|
||||
}
|
||||
|
||||
export async function generateMetadata({ params }: { params: Promise<{ id: string }> }): Promise<Metadata> {
|
||||
const { id } = await params;
|
||||
const caseItem = CASES.find((c) => c.id === id);
|
||||
|
||||
if (!caseItem) {
|
||||
return {
|
||||
title: '案例未找到',
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
title: `${caseItem.title} - 睿新致远`,
|
||||
description: caseItem.description,
|
||||
};
|
||||
}
|
||||
|
||||
export default async function CaseDetailPage({ params }: { params: Promise<{ id: string }> }) {
|
||||
const { id } = await params;
|
||||
const caseItem = CASES.find((c) => c.id === id);
|
||||
|
||||
if (!caseItem) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
return <CaseDetailClient caseItem={caseItem} />;
|
||||
}
|
||||
@@ -0,0 +1,150 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { GlassCard } from '@/components/ui/glass-card';
|
||||
import { CASES } from '@/lib/constants';
|
||||
import { ArrowRight, Building2, TrendingUp } from 'lucide-react';
|
||||
|
||||
export function CasesSection() {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const sectionRef = useRef<HTMLElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
if (entry.isIntersecting) {
|
||||
setIsVisible(true);
|
||||
}
|
||||
},
|
||||
{ threshold: 0.1 }
|
||||
);
|
||||
|
||||
if (sectionRef.current) {
|
||||
observer.observe(sectionRef.current);
|
||||
}
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section
|
||||
ref={sectionRef}
|
||||
id="cases"
|
||||
className="py-24 md:py-32 relative overflow-hidden bg-[#FAFAFA]"
|
||||
>
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
<div className="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-[#E5E5E5] to-transparent" />
|
||||
<div className="absolute bottom-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-[#E5E5E5] to-transparent" />
|
||||
</div>
|
||||
|
||||
<div className="container-wide relative z-10">
|
||||
<div className="text-center mb-16">
|
||||
<div
|
||||
className={`
|
||||
opacity-0 translate-y-4
|
||||
${isVisible ? 'animate-fade-in-up' : ''}
|
||||
`}
|
||||
>
|
||||
<span className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-[#C41E3A]/10 text-[#C41E3A] text-sm font-medium mb-4">
|
||||
<TrendingUp className="w-4 h-4" />
|
||||
成功案例
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h2
|
||||
className={`
|
||||
text-3xl sm:text-4xl font-semibold text-[#171717] mb-4
|
||||
opacity-0 translate-y-4
|
||||
${isVisible ? 'animate-fade-in-up stagger-1' : ''}
|
||||
`}
|
||||
>
|
||||
客户成功案例
|
||||
</h2>
|
||||
|
||||
<p
|
||||
className={`
|
||||
text-lg text-[#525252] max-w-2xl mx-auto
|
||||
opacity-0 translate-y-4
|
||||
${isVisible ? 'animate-fade-in-up stagger-2' : ''}
|
||||
`}
|
||||
>
|
||||
以专业实力赢得客户信赖，用技术创新创造商业价值
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid lg:grid-cols-3 gap-6 md:gap-8">
|
||||
{CASES.map((caseItem, index) => (
|
||||
<Link key={caseItem.id} href={`/cases/${caseItem.id}`}>
|
||||
<GlassCard
|
||||
variant="elevated"
|
||||
className="overflow-hidden group cursor-pointer"
|
||||
>
|
||||
<div
|
||||
className={`
|
||||
opacity-0 translate-y-4
|
||||
${isVisible ? 'animate-fade-in-up' : ''}
|
||||
`}
|
||||
style={{ animationDelay: `${(index + 3) * 100}ms` }}
|
||||
>
|
||||
<div className="relative h-48 bg-gradient-to-br from-[#C41E3A]/10 to-[#D4A574]/10 overflow-hidden">
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<Building2 className="w-16 h-16 text-[#C41E3A]/30 group-hover:scale-110 transition-transform duration-500" />
|
||||
</div>
|
||||
<div className="absolute top-4 left-4">
|
||||
<span className="px-3 py-1 bg-white/90 backdrop-blur-sm rounded-full text-xs font-medium text-[#C41E3A]">
|
||||
{caseItem.industry}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-6">
|
||||
<h3 className="text-lg font-semibold text-[#171717] mb-2 group-hover:text-[#C41E3A] transition-colors duration-300">
|
||||
{caseItem.title}
|
||||
</h3>
|
||||
|
||||
<p className="text-sm text-[#525252] mb-4 line-clamp-2">
|
||||
{caseItem.description}
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-3 gap-2 mb-4">
|
||||
{caseItem.results.map((result) => (
|
||||
<div
|
||||
key={result.label}
|
||||
className="text-center p-2 bg-[#FAFAFA] rounded-lg"
|
||||
>
|
||||
<div className="text-sm font-semibold text-[#C41E3A]">
|
||||
{result.value}
|
||||
</div>
|
||||
<div className="text-xs text-[#737373] truncate">
|
||||
{result.label}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2 mb-4">
|
||||
{caseItem.tags.map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="px-2 py-1 bg-[#171717]/5 rounded text-xs text-[#525252]"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-center text-sm font-medium text-[#C41E3A] group-hover:gap-2 transition-all">
|
||||
查看详情
|
||||
<ArrowRight className="w-4 h-4 ml-1" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</GlassCard>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user