diff --git a/src/app/(marketing)/cases/[id]/client.tsx b/src/app/(marketing)/cases/[id]/client.tsx new file mode 100644 index 0000000..08adf04 --- /dev/null +++ b/src/app/(marketing)/cases/[id]/client.tsx @@ -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(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> = { + '业务处理效率': TrendingUp, + '客户满意度': Users, + '运营成本': Target, + '生产效率': TrendingUp, + '设备利用率': Target, + '不良品率': CheckCircle2, + '数据整合效率': TrendingUp, + '决策响应时间': Target, + '营销转化率': Users, + }; + + return ( +
+
+
+
+
+ +
+ +
+ + + +
+ +
+
+ + {caseItem.industry} + +

+ {caseItem.title} +

+

+ {caseItem.client} +

+
+
+
+ +
+
+
+
+

项目背景

+

+ {caseItem.description} +

+
+ +
+

解决方案

+
+ {caseItem.tags.map((tag, index) => ( +
+
+ +
+
+

{tag}

+

+ 基于 {tag} 技术的专业解决方案，助力企业实现数字化转型目标。 +

+
+
+ ))} +
+
+ +
+

项目成果

+
+ {caseItem.results.map((result) => { + const Icon = iconMap[result.label] || TrendingUp; + return ( +
+ +
+ {result.value} +
+
{result.label}
+
+ ); + })} +
+
+
+ +
+
+

项目信息

+
+
+
客户名称
+
{caseItem.client}
+
+
+
行业领域
+
{caseItem.industry}
+
+
+
技术标签
+
+ {caseItem.tags.map((tag) => ( + + {tag} + + ))} +
+
+
+
+ +
+

想要了解更多？

+

+ 联系我们的专家团队，获取定制化解决方案 +

+ + + +
+
+
+ + {relatedCases.length > 0 && ( +
+

相关案例

+
+ {relatedCases.map((relatedCase) => ( + + + {relatedCase.industry} + +

+ {relatedCase.title} +

+

+ {relatedCase.description} +

+ + ))} +
+
+ )} +
+
+
+ ); +} diff --git a/src/app/(marketing)/cases/[id]/page.tsx b/src/app/(marketing)/cases/[id]/page.tsx new file mode 100644 index 0000000..eed2b75 --- /dev/null +++ b/src/app/(marketing)/cases/[id]/page.tsx @@ -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 { + 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 ; +} diff --git a/src/components/sections/cases-section.tsx b/src/components/sections/cases-section.tsx new file mode 100644 index 0000000..1ff8231 --- /dev/null +++ b/src/components/sections/cases-section.tsx @@ -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(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 ( +
+
+
+
+
+ +
+
+
+ + + 成功案例 + +
+ +

+ 客户成功案例 +

+ +

+ 以专业实力赢得客户信赖，用技术创新创造商业价值 +

+
+ +
+ {CASES.map((caseItem, index) => ( + + +
+
+
+ +
+
+ + {caseItem.industry} + +
+
+ +
+

+ {caseItem.title} +

+ +

+ {caseItem.description} +

+ +
+ {caseItem.results.map((result) => ( +
+
+ {result.value} +
+
+ {result.label} +
+
+ ))} +
+ +
+ {caseItem.tags.map((tag) => ( + + {tag} + + ))} +
+ +
+ 查看详情 + +
+
+
+ + + ))} +
+
+
+ ); +}