Finalize multilingual routing and translations

app/[locale]/(site)/page.tsx

@@ -1,3 +1,4 @@
+import type { Metadata } from "next";
 import {
   ArrowRight,
   BriefcaseBusiness,
@@ -6,11 +7,16 @@ import {
   Sparkles,
 } 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, portfolioItems, productItems, resolveLocale } from "@/lib/site-data";
-import { Button } from "@/src/components/ui/button";
-import { Card, CardContent } from "@/src/components/ui/card";
+import { buildLocalizedMetadata } from "@/lib/metadata";
+import { AppCard } from "@/components/ui/app-card";
+import { Button } from "@/components/ui/button";
+import { CardContent } from "@/components/ui/card";
+import { getLocalizedPath, resolveLocale } from "@/lib/locale";
+import { pickText, portfolioItems, productItems } from "@/lib/site-data";
 
 type HomePageProps = {
   params: {
@@ -18,194 +24,178 @@ type HomePageProps = {
   };
 };
 
-export default function HomePage({ params: { locale } }: HomePageProps) {
+export async function generateMetadata({
+  params: { locale },
+}: HomePageProps): Promise<Metadata> {
+  const localeKey = resolveLocale(locale);
+  const t = await getTranslations({ locale: localeKey, namespace: "homepage" });
+
+  return buildLocalizedMetadata({
+    locale: localeKey,
+    pathname: "/",
+    title: t("heroTitle"),
+    description: t("heroText"),
+  });
+}
+
+export default async function HomePage({ params: { locale } }: HomePageProps) {
   const localeKey = resolveLocale(locale);
   const featuredProjects = portfolioItems.slice(0, 3);
   const featuredProducts = productItems.slice(0, 3);
-
-  const copy =
-    localeKey === "de"
-      ? {
-          heroKicker: "Digital Studio",
-          heroTitle: "Webseiten und Produkte, die schnell liefern.",
-          heroText:
-            "Diese Startseite ist die Basis fuer ein mehrsprachiges Marketing- und Produkt-Setup.",
-          portfolioTitle: "Featured Projects",
-          portfolioText: "Platzhalter fuer ausgewaehlte Kundenprojekte.",
-          productsTitle: "Featured Products",
-          productsText: "Platzhalter fuer die wichtigsten Produktangebote.",
-          ctaTitle: "Bereit fuer den naechsten Schritt?",
-          ctaText: "Wir planen zusammen den passenden Scope fuer dein Projekt.",
-          toPortfolio: "Portfolio ansehen",
-          toProducts: "Produkte ansehen",
-          toContact: "Kontakt aufnehmen",
-          heroCardTitle: "Schneller Rollout",
-          heroCardText: "Struktur, Content und Komponenten fuer schnelles Wachstum.",
-        }
-      : {
-          heroKicker: "Digital Studio",
-          heroTitle: "Websites and products that ship fast.",
-          heroText:
-            "This homepage is a starter for a multilingual marketing and product setup.",
-          portfolioTitle: "Featured Projects",
-          portfolioText: "Placeholder area for highlighted client projects.",
-          productsTitle: "Featured Products",
-          productsText: "Placeholder area for top product offerings.",
-          ctaTitle: "Ready for your next step?",
-          ctaText: "We can shape the right project scope together.",
-          toPortfolio: "View portfolio",
-          toProducts: "View products",
-          toContact: "Contact us",
-          heroCardTitle: "Fast rollout",
-          heroCardText: "Structure, content and components for rapid growth.",
-        };
+  const t = await getTranslations({ locale: localeKey, namespace: "homepage" });
 
   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>
-        <Card>
-          <CardContent className="grid gap-6 p-6 lg:grid-cols-[1.3fr_0.7fr] lg:p-10">
+        <AppCard level={3}>
+          <CardContent className="grid gap-6 p-6 lg:grid-cols-[1.35fr_0.65fr] lg:p-10">
             <div className="space-y-5">
-              <p className="inline-flex items-center gap-2 text-sm font-medium text-muted">
-                <Sparkles className="h-4 w-4" />
-                {copy.heroKicker}
+              <p className="inline-flex items-center gap-2 text-sm font-medium text-muted-foreground">
+                <Sparkles className="h-4 w-4 text-brand-secondary" />
+                {t("heroKicker")}
               </p>
-              <h1 className="text-3xl font-semibold tracking-tight text-fg sm:text-5xl">
-                {copy.heroTitle}
+              <h1 className="text-balance text-3xl font-semibold tracking-tight text-foreground sm:text-5xl">
+                {t("heroTitle")}
               </h1>
-              <p className="max-w-2xl text-base text-muted sm:text-lg">
-                {copy.heroText}
+              <p className="max-w-2xl text-base text-muted-foreground sm:text-lg">
+                {t("heroText")}
               </p>
               <div className="flex flex-wrap gap-3">
                 <Button asChild>
-                  <Link href={`/${localeKey}/portfolio`}>
-                    {copy.toPortfolio}
+                  <Link href={getLocalizedPath(localeKey, "/portfolio")}>
+                    {t("toPortfolio")}
                     <ArrowRight className="h-4 w-4" />
                   </Link>
                 </Button>
                 <Button asChild variant="outline">
-                  <Link href={`/${localeKey}/products`}>{copy.toProducts}</Link>
+                  <Link href={getLocalizedPath(localeKey, "/products")}>{t("toProducts")}</Link>
                 </Button>
               </div>
             </div>
 
-            <div className="rounded-[var(--radius-input)] border border-border bg-muted p-5">
-              <p className="mb-3 inline-flex items-center gap-2 text-sm font-medium text-muted">
-                <BriefcaseBusiness className="h-4 w-4" />
-                {copy.heroCardTitle}
+            <AppCard level={2} padding="md" className="self-start">
+              <p className="inline-flex items-center gap-2 text-sm font-medium text-muted-foreground">
+                <BriefcaseBusiness className="h-4 w-4 text-brand-primary" />
+                {t("heroCardTitle")}
               </p>
-              <p className="text-sm leading-relaxed text-muted">
-                {copy.heroCardText}
+              <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
+                {t("heroCardText")}
               </p>
-            </div>
+            </AppCard>
           </CardContent>
-        </Card>
+        </AppCard>
       </MotionFade>
 
       <MotionFade delay={0.05}>
-        <Card>
+        <AppCard>
           <CardContent className="p-6 lg:p-8">
             <div className="mb-6 flex items-center justify-between gap-4">
               <div>
-                <h2 className="text-2xl font-semibold text-fg">
-                  {copy.portfolioTitle}
+                <h2 className="text-2xl font-semibold text-foreground">
+                  {t("portfolioTitle")}
                 </h2>
-                <p className="mt-2 text-sm text-muted">
-                  {copy.portfolioText}
+                <p className="mt-2 text-sm text-muted-foreground">
+                  {t("portfolioText")}
                 </p>
               </div>
-              <BriefcaseBusiness className="h-5 w-5 text-subtle" />
+              <BriefcaseBusiness className="h-5 w-5 text-muted-foreground" />
             </div>
             <div className="grid gap-4 md:grid-cols-3">
               {featuredProjects.map((item) => (
-                <Card key={item.slug} className="bg-muted/85 transition hover:border-input">
-                  <CardContent className="p-4">
-                    <Link href={`/${localeKey}/portfolio/${item.slug}`} className="group block">
-                      <p className="text-sm text-subtle">
+                <AppCard key={item.slug} interactive>
+                  <CardContent className="p-5">
+                    <Link
+                      href={getLocalizedPath(localeKey, `/portfolio/${item.slug}`)}
+                      className="group block"
+                    >
+                      <p className="text-sm text-muted-foreground/80">
                         {pickText(item.category, localeKey)} - {item.year}
                       </p>
-                      <h3 className="mt-2 text-lg font-semibold text-fg">
+                      <h3 className="mt-2 text-lg font-semibold text-foreground">
                         {pickText(item.title, localeKey)}
                       </h3>
-                      <p className="mt-2 text-sm text-muted">
+                      <p className="mt-2 text-sm text-muted-foreground">
                         {pickText(item.summary, localeKey)}
                       </p>
-                      <span className="group-hover-fg mt-4 inline-flex items-center gap-2 text-sm font-medium text-muted-strong">
-                        {copy.toPortfolio}
+                      <span className="mt-4 inline-flex items-center gap-2 text-sm font-medium text-foreground/80 group-hover:text-foreground">
+                        {t("toPortfolio")}
                         <ArrowRight className="h-4 w-4" />
                       </span>
                     </Link>
                   </CardContent>
-                </Card>
+                </AppCard>
               ))}
             </div>
           </CardContent>
-        </Card>
+        </AppCard>
       </MotionFade>
 
       <MotionFade delay={0.1}>
-        <Card>
+        <AppCard>
           <CardContent className="p-6 lg:p-8">
             <div className="mb-6 flex items-center justify-between gap-4">
               <div>
-                <h2 className="text-2xl font-semibold text-fg">
-                  {copy.productsTitle}
+                <h2 className="text-2xl font-semibold text-foreground">
+                  {t("productsTitle")}
                 </h2>
-                <p className="mt-2 text-sm text-muted">
-                  {copy.productsText}
+                <p className="mt-2 text-sm text-muted-foreground">
+                  {t("productsText")}
                 </p>
               </div>
-              <Boxes className="h-5 w-5 text-subtle" />
+              <Boxes className="h-5 w-5 text-muted-foreground" />
             </div>
             <div className="grid gap-4 md:grid-cols-3">
               {featuredProducts.map((item) => (
-                <Card key={item.slug} className="bg-muted/85 transition hover:border-input">
-                  <CardContent className="p-4">
-                    <Link href={`/${localeKey}/products/${item.slug}`} className="group block">
-                      <p className="text-sm text-subtle">
+                <AppCard key={item.slug} 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>
-                      <h3 className="mt-2 text-lg font-semibold text-fg">
+                      <h3 className="mt-2 text-lg font-semibold text-foreground">
                         {pickText(item.name, localeKey)}
                       </h3>
-                      <p className="mt-2 text-sm text-muted">
+                      <p className="mt-2 text-sm text-muted-foreground">
                         {pickText(item.summary, localeKey)}
                       </p>
-                      <p className="mt-3 text-sm font-medium text-muted-strong">
+                      <p className="mt-3 text-sm font-medium text-foreground/80">
                         {pickText(item.price, localeKey)}
                       </p>
                     </Link>
                   </CardContent>
-                </Card>
+                </AppCard>
               ))}
             </div>
           </CardContent>
-        </Card>
+        </AppCard>
       </MotionFade>
 
       <MotionFade delay={0.15}>
-        <Card className="bg-foreground text-background">
+        <AppCard level="inverse">
           <CardContent className="p-6 lg:p-8">
             <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
               <div>
-                <p className="inline-flex items-center gap-2 text-sm font-medium opacity-80">
+                <p className="inline-flex items-center gap-2 text-sm font-medium text-surface-inverse-foreground/80">
                   <Mail className="h-4 w-4" />
-                  {copy.ctaTitle}
+                  {t("ctaTitle")}
                 </p>
-                <p className="mt-2 max-w-2xl text-sm opacity-90 sm:text-base">
-                  {copy.ctaText}
+                <p className="mt-2 max-w-2xl text-sm text-surface-inverse-foreground/88 sm:text-base">
+                  {t("ctaText")}
                 </p>
               </div>
               <Button asChild variant="secondary">
-                <Link href={`/${localeKey}/contact`}>
-                  {copy.toContact}
+                <Link href={getLocalizedPath(localeKey, "/contact")}>
+                  {t("toContact")}
                   <ArrowRight className="h-4 w-4" />
                 </Link>
               </Button>
             </div>
           </CardContent>
-        </Card>
+        </AppCard>
       </MotionFade>
-    </div>
+    </Container>
   );
 }