This commit is contained in:
MOH
@@ -1,148 +0,0 @@
|
||||
import type { Metadata } from "next";
|
||||
import { ArrowLeft, BadgeEuro, Boxes, Layers2 } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import { notFound } from "next/navigation";
|
||||
|
||||
import { Container } from "@/components/layout/container";
|
||||
import { PageHero } from "@/components/layout/page-hero";
|
||||
import { MotionFade } from "@/components/motion-fade";
|
||||
import { routing } from "@/i18n/routing";
|
||||
import { buildLocalizedMetadata } from "@/lib/metadata";
|
||||
import { getLocalizedPath, resolveLocale } from "@/lib/locale";
|
||||
import { getProductItem, pickText, productItems } from "@/lib/site-data";
|
||||
import { AppCard } from "@/components/ui/app-card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { CardContent } from "@/components/ui/card";
|
||||
|
||||
type ProductPageProps = {
|
||||
params: {
|
||||
locale: string;
|
||||
slug: string;
|
||||
};
|
||||
};
|
||||
|
||||
export function generateStaticParams() {
|
||||
return routing.locales.flatMap((locale) =>
|
||||
productItems.map((item) => ({
|
||||
locale,
|
||||
slug: item.slug,
|
||||
})),
|
||||
);
|
||||
}
|
||||
|
||||
export async function generateMetadata({
|
||||
params: { locale, slug },
|
||||
}: ProductPageProps): Promise<Metadata> {
|
||||
const localeKey = resolveLocale(locale);
|
||||
const item = getProductItem(slug);
|
||||
|
||||
if (!item) {
|
||||
return await buildLocalizedMetadata({
|
||||
locale: localeKey,
|
||||
pathname: `/products/${slug}`,
|
||||
title: "Products",
|
||||
description: "Product page",
|
||||
});
|
||||
}
|
||||
|
||||
return await buildLocalizedMetadata({
|
||||
locale: localeKey,
|
||||
pathname: `/products/${slug}`,
|
||||
title: pickText(item.name, localeKey),
|
||||
description: pickText(item.summary, localeKey),
|
||||
});
|
||||
}
|
||||
|
||||
export default async function ProductPage({ params: { locale, slug } }: ProductPageProps) {
|
||||
const localeKey = resolveLocale(locale);
|
||||
const item = getProductItem(slug);
|
||||
|
||||
if (!item) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
const t = await getTranslations({ locale: localeKey, namespace: "productDetail" });
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHero
|
||||
title={pickText(item.name, localeKey)}
|
||||
description={pickText(item.summary, localeKey)}
|
||||
/>
|
||||
|
||||
<Container size="wide" className="flex flex-col gap-section pb-12 lg:pb-16">
|
||||
<MotionFade>
|
||||
<AppCard level={3}>
|
||||
<CardContent className="p-6 lg:p-10">
|
||||
<Button asChild variant="ghost" className="h-auto px-0 py-0 text-sm">
|
||||
<Link href={getLocalizedPath(localeKey, "/products")}>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
{t("back")}
|
||||
</Link>
|
||||
</Button>
|
||||
|
||||
<h1 className="mt-5 text-3xl font-semibold text-foreground sm:text-4xl">
|
||||
{pickText(item.name, localeKey)}
|
||||
</h1>
|
||||
<p className="mt-4 text-base text-muted-foreground sm:text-lg">
|
||||
{pickText(item.summary, localeKey)}
|
||||
</p>
|
||||
|
||||
<div className="mt-6 flex flex-wrap gap-3 text-sm text-foreground/80">
|
||||
{[
|
||||
{
|
||||
icon: Layers2,
|
||||
label: pickText(item.segment, localeKey),
|
||||
},
|
||||
{
|
||||
icon: BadgeEuro,
|
||||
label: pickText(item.price, localeKey),
|
||||
},
|
||||
{
|
||||
icon: Boxes,
|
||||
label: item.slug,
|
||||
},
|
||||
].map((meta) => {
|
||||
const Icon = meta.icon;
|
||||
|
||||
return (
|
||||
<AppCard key={meta.label} level={2}>
|
||||
<CardContent className="flex items-center gap-2 p-3">
|
||||
<Icon className="h-4 w-4 text-brand-primary" />
|
||||
{meta.label}
|
||||
</CardContent>
|
||||
</AppCard>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</CardContent>
|
||||
</AppCard>
|
||||
</MotionFade>
|
||||
|
||||
<MotionFade delay={0.05}>
|
||||
<AppCard>
|
||||
<CardContent className="p-6 lg:p-8">
|
||||
<h2 className="text-xl font-semibold text-foreground">{t("included")}</h2>
|
||||
<ul className="mt-4 grid gap-3 sm:grid-cols-3">
|
||||
{[t("stepOne"), t("stepTwo"), t("stepThree")].map((step, index) => (
|
||||
<AppCard key={step} level={2}>
|
||||
<CardContent className="p-4">
|
||||
<span className="mb-2 inline-flex h-6 w-6 items-center justify-center rounded-full bg-muted text-xs font-semibold text-foreground/80">
|
||||
{index + 1}
|
||||
</span>
|
||||
<p className="text-sm text-foreground/80">{step}</p>
|
||||
</CardContent>
|
||||
</AppCard>
|
||||
))}
|
||||
</ul>
|
||||
<Button asChild className="mt-6">
|
||||
<Link href={getLocalizedPath(localeKey, "/contact")}>{t("action")}</Link>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</AppCard>
|
||||
</MotionFade>
|
||||
</Container>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,84 +0,0 @@
|
||||
import type { Metadata } from "next";
|
||||
import { ArrowUpRight, CircleDollarSign } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
|
||||
import { Container } from "@/components/layout/container";
|
||||
import { PageHero } from "@/components/layout/page-hero";
|
||||
import { MotionFade } from "@/components/motion-fade";
|
||||
import { buildLocalizedMetadata } from "@/lib/metadata";
|
||||
import { AppCard } from "@/components/ui/app-card";
|
||||
import { CardContent } from "@/components/ui/card";
|
||||
import { getLocalizedPath, resolveLocale } from "@/lib/locale";
|
||||
import { pickText, productItems } from "@/lib/site-data";
|
||||
|
||||
type ProductsPageProps = {
|
||||
params: {
|
||||
locale: string;
|
||||
};
|
||||
};
|
||||
|
||||
export async function generateMetadata({
|
||||
params: { locale },
|
||||
}: ProductsPageProps): Promise<Metadata> {
|
||||
const localeKey = resolveLocale(locale);
|
||||
const t = await getTranslations({ locale: localeKey, namespace: "productsPage" });
|
||||
|
||||
return await buildLocalizedMetadata({
|
||||
locale: localeKey,
|
||||
pathname: "/products",
|
||||
title: t("title"),
|
||||
description: t("intro"),
|
||||
});
|
||||
}
|
||||
|
||||
export default async function ProductsPage({ params: { locale } }: ProductsPageProps) {
|
||||
const localeKey = resolveLocale(locale);
|
||||
const t = await getTranslations({ locale: localeKey, namespace: "productsPage" });
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHero
|
||||
locale={localeKey}
|
||||
badge={t("heroBadge")}
|
||||
title={t("heroTitle")}
|
||||
description={t("intro")}
|
||||
/>
|
||||
|
||||
<Container className="flex flex-col gap-section pb-12 lg:pb-16">
|
||||
<section className="grid gap-4 md:grid-cols-3">
|
||||
{productItems.map((item, index) => (
|
||||
<MotionFade key={item.slug} delay={index * 0.05}>
|
||||
<AppCard interactive>
|
||||
<CardContent className="p-5">
|
||||
<Link
|
||||
href={getLocalizedPath(localeKey, `/products/${item.slug}`)}
|
||||
className="group block"
|
||||
>
|
||||
<p className="text-sm text-muted-foreground/80">
|
||||
{pickText(item.segment, localeKey)}
|
||||
</p>
|
||||
<h2 className="mt-3 text-xl font-semibold text-foreground">
|
||||
{pickText(item.name, localeKey)}
|
||||
</h2>
|
||||
<p className="mt-2 text-sm text-muted-foreground">
|
||||
{pickText(item.summary, localeKey)}
|
||||
</p>
|
||||
<p className="mt-4 inline-flex items-center gap-2 text-sm font-medium text-foreground/80">
|
||||
<CircleDollarSign className="h-4 w-4 text-brand-secondary" />
|
||||
{pickText(item.price, localeKey)}
|
||||
</p>
|
||||
<p className="mt-4 inline-flex items-center gap-2 text-sm font-medium text-foreground/80 group-hover:text-foreground">
|
||||
{t("open")}
|
||||
<ArrowUpRight className="h-4 w-4" />
|
||||
</p>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</AppCard>
|
||||
</MotionFade>
|
||||
))}
|
||||
</section>
|
||||
</Container>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user