mohs/sass-mohfarawati
1
0
Fork 0
Code Issues Pull Requests Actions 8 Packages Projects Releases Wiki Activity

Finalize multilingual routing and translations
CI / quality (push) Waiting to run
Details

Browse Source
This commit is contained in:
MOH
2026-03-07 14:10:30 +01:00
parent 1ad9ae9629
commit 7f4277d1d7
53 changed files with 2805 additions and 1382 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/[locale]/(site)/products/page.tsx
+64 -49
View File
@@ -1,8 +1,15 @@
import type { Metadata } from "next";
import { ArrowUpRight, Boxes, CircleDollarSign } from "lucide-react";
import Link from "next/link";
import { getTranslations } from "next-intl/server";
import { Container } from "@/components/layout/container";
import { MotionFade } from "@/components/motion-fade";
import { pickText, productItems, resolveLocale } from "@/lib/site-data";
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: {
@@ -10,66 +17,74 @@ type ProductsPageProps = {
};
};
export default function ProductsPage({ params: { locale } }: ProductsPageProps) {
export async function generateMetadata({
params: { locale },
}: ProductsPageProps): Promise<Metadata> {
const localeKey = resolveLocale(locale);
const t = await getTranslations({ locale: localeKey, namespace: "productsPage" });
const copy =
localeKey === "de"
? {
title: "Produkte",
intro: "Pakete fuer Teams von Start bis Skalierung.",
open: "Produkt oeffnen",
}
: {
title: "Products",
intro: "Packages for teams from early stage to scale.",
open: "Open product",
};
return 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 (
<div className="mx-auto flex w-full max-w-6xl flex-col gap-8 px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
<Container className="flex flex-col gap-section py-10 lg:py-14">
<MotionFade>
<section className="rounded-3xl border border-default bg-surface p-6 lg:p-10">
<div className="flex items-center gap-3">
<Boxes className="h-5 w-5 text-muted-strong" />
<h1 className="text-3xl font-semibold text-fg sm:text-4xl">
{copy.title}
</h1>
</div>
<p className="mt-4 max-w-3xl text-base text-muted sm:text-lg">
{copy.intro}
</p>
</section>
<AppCard level={3}>
<CardContent className="p-6 lg:p-10">
<div className="flex items-center gap-3">
<Boxes className="h-5 w-5 text-brand-primary" />
<h1 className="text-3xl font-semibold text-foreground sm:text-4xl">
{t("title")}
</h1>
</div>
<p className="mt-4 max-w-3xl text-base text-muted-foreground sm:text-lg">
{t("intro")}
</p>
</CardContent>
</AppCard>
</MotionFade>
<section className="grid gap-4 md:grid-cols-3">
{productItems.map((item, index) => (
<MotionFade key={item.slug} delay={index * 0.05}>
<Link
href={`/${localeKey}/products/${item.slug}`}
className="group block rounded-2xl border border-default bg-surface p-5 transition group-hover-border-strong "
>
<p className="text-sm text-subtle">
{pickText(item.segment, localeKey)}
</p>
<h2 className="mt-3 text-xl font-semibold text-fg">
{pickText(item.name, localeKey)}
</h2>
<p className="mt-2 text-sm text-muted">
{pickText(item.summary, localeKey)}
</p>
<p className="mt-4 inline-flex items-center gap-2 text-sm font-medium text-muted-strong">
<CircleDollarSign className="h-4 w-4" />
{pickText(item.price, localeKey)}
</p>
<p className="group-hover-fg mt-4 inline-flex items-center gap-2 text-sm font-medium text-muted-strong">
{copy.open}
<ArrowUpRight className="h-4 w-4" />
</p>
</Link>
<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>
</div>
</Container>
);
}