84 lines
2.5 KiB
TypeScript
84 lines
2.5 KiB
TypeScript
|
import Image from "next/image";
|
||
|
|
import { notFound } from "next/navigation";
|
||
|
|
import { useCases } from "@/data/useCases";
|
||
|
|
import Footer from "@/components/shared/Footer";
|
||
|
|
import Navbar from "@/components/shared/Navbar";
|
||
|
|
import MobileNavbar from "@/components/ui/mobile-navbar";
|
||
|
|
import CTA from "@/sections/CTA";
|
||
|
|
import HeroClient from "@/sections/HeroCase";
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
params: Promise<{ slug: string }>; // ← Promise!
|
||
|
|
}
|
||
|
|
|
||
|
|
export default async function UseCaseDetail({ params }: Props) {
|
||
|
|
const { slug } = await params;
|
||
|
|
const item = useCases.find((c) => c.slug === slug);
|
||
|
|
if (!item) notFound();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Navbar />
|
||
|
|
<MobileNavbar />
|
||
|
|
<HeroClient item={item} />
|
||
|
|
<section className="tab:py-16 tab:px-6 mx-auto max-w-5xl sm:px-2.5 sm:py-8">
|
||
|
|
<div className="space-y-12">
|
||
|
|
<div>
|
||
|
|
<h2 className="font-switzer mb-3 text-3xl font-semibold text-black">
|
||
|
|
Overview
|
||
|
|
</h2>
|
||
|
|
<p className="font-mium-reg text-b-2-17 leading-b2 tracking-[-0.4px] text-black">
|
||
|
|
{item.description}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<h2 className="font-switzer mb-3 text-3xl font-semibold text-black">
|
||
|
|
Challenge
|
||
|
|
</h2>
|
||
|
|
<p className="font-mium-reg text-b-2-17 leading-b2 tracking-[-0.4px] text-black">
|
||
|
|
{item.challenge}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<Image
|
||
|
|
src={item.image1}
|
||
|
|
alt={`${item.title} use case`}
|
||
|
|
width={600}
|
||
|
|
height={480}
|
||
|
|
className="mx-auto h-[480px] w-full rounded-xl object-cover"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<h2 className="font-switzer mb-3 text-3xl font-semibold text-black">
|
||
|
|
Our Solution
|
||
|
|
</h2>
|
||
|
|
<p className="font-mium-reg text-b-2-17 leading-b2 tracking-[-0.4px] text-black">
|
||
|
|
{item.solution}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<h2 className="font-switzer mb-3 text-3xl font-semibold text-black">
|
||
|
|
Impact
|
||
|
|
</h2>
|
||
|
|
<p className="font-mium-reg text-b-2-17 leading-b2 tracking-[-0.4px] text-black">
|
||
|
|
{item.outcome}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<Image
|
||
|
|
src={item.image2}
|
||
|
|
alt={`${item.title} use case`}
|
||
|
|
width={600}
|
||
|
|
height={480}
|
||
|
|
className="mx-auto h-[480px] w-full rounded-xl object-cover"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<div className="tab:mb-0 sm:mb-10">
|
||
|
|
<CTA />
|
||
|
|
</div>
|
||
|
|
<Footer />
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|