soroush.asadi
85 lines
2.6 KiB
TypeScript
85 lines
2.6 KiB
TypeScript
import Link from 'next/link';
|
|
import { notFound } from 'next/navigation';
|
|
import { dict, SERVICE_IDS, type ServiceId } from '@/lib/i18n/dictionaries';
|
|
|
|
type Params = { slug: string };
|
|
|
|
export function generateStaticParams() {
|
|
return SERVICE_IDS.map((slug) => ({ slug }));
|
|
}
|
|
|
|
export function generateMetadata({ params }: { params: Params }) {
|
|
const id = params.slug as ServiceId;
|
|
const fa = dict.fa.services.items.find((s) => s.id === id);
|
|
const en = dict.en.services.items.find((s) => s.id === id);
|
|
if (!en) return {};
|
|
return {
|
|
title: en.title,
|
|
description: en.description,
|
|
openGraph: { title: en.title, description: en.description },
|
|
alternates: { canonical: `/services/${id}`, languages: { 'fa-IR': `/services/${id}`, 'en-US': `/services/${id}` } },
|
|
other: { 'fa-title': fa?.title ?? '' },
|
|
};
|
|
}
|
|
|
|
export default function ServiceDetailPage({ params }: { params: Params }) {
|
|
const id = params.slug as ServiceId;
|
|
if (!SERVICE_IDS.includes(id)) notFound();
|
|
|
|
const en = dict.en.services.items.find((s) => s.id === id)!;
|
|
const fa = dict.fa.services.items.find((s) => s.id === id)!;
|
|
|
|
return (
|
|
<article className="relative px-5 py-32 sm:px-8">
|
|
<div className="mx-auto max-w-3xl">
|
|
<Link
|
|
href="/#services"
|
|
className="label-mono inline-flex items-center gap-2 text-slate-400 hover:text-electric"
|
|
>
|
|
← {dict.en.nav.services}
|
|
</Link>
|
|
|
|
<h1 className="mt-6 font-display text-[clamp(2rem,4.5vw,3.4rem)] font-extrabold leading-tight text-white">
|
|
{en.title}
|
|
</h1>
|
|
<p
|
|
dir="rtl"
|
|
className="mt-2 font-fa text-[clamp(1.1rem,2vw,1.5rem)] text-slate-400"
|
|
>
|
|
{fa.title}
|
|
</p>
|
|
|
|
<div className="mt-8 flex flex-wrap gap-2">
|
|
{en.tags.map((t) => (
|
|
<span
|
|
key={t}
|
|
className="rounded-full border border-electric/30 bg-electric/5 px-3 py-1 font-mono text-xs text-electric"
|
|
>
|
|
{t}
|
|
</span>
|
|
))}
|
|
</div>
|
|
|
|
<p className="mt-10 text-[1.05rem] leading-relaxed text-slate-300">
|
|
{en.description}
|
|
</p>
|
|
<p
|
|
dir="rtl"
|
|
className="mt-6 font-fa text-[1rem] leading-loose text-slate-400"
|
|
>
|
|
{fa.description}
|
|
</p>
|
|
|
|
<div className="mt-12 flex flex-wrap gap-3">
|
|
<Link href="/#contact" className="btn-primary">
|
|
Book a consultation
|
|
</Link>
|
|
<Link href="/#services" className="btn-ghost">
|
|
All services
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
);
|
|
}
|