Finalize multilingual routing and translations

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

@@ -1,13 +1,18 @@
+import type { Metadata } from "next";
 import { Mail, MapPin, Phone } 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 { resolveLocale } from "@/lib/site-data";
-import { Button } from "@/src/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/src/components/ui/card";
-import { Input } from "@/src/components/ui/input";
-import { Label } from "@/src/components/ui/label";
-import { Textarea } from "@/src/components/ui/textarea";
+import { buildLocalizedMetadata } from "@/lib/metadata";
+import { getLocalizedPath, resolveLocale } from "@/lib/locale";
+import { AppCard } from "@/components/ui/app-card";
+import { Button } from "@/components/ui/button";
+import { CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
 
 type ContactPageProps = {
   params: {
@@ -15,92 +20,80 @@ type ContactPageProps = {
   };
 };
 
-export default function ContactPage({ params: { locale } }: ContactPageProps) {
+export async function generateMetadata({
+  params: { locale },
+}: ContactPageProps): Promise<Metadata> {
   const localeKey = resolveLocale(locale);
+  const t = await getTranslations({ locale: localeKey, namespace: "contactPage" });
 
-  const copy =
-    localeKey === "de"
-      ? {
-          title: "Kontakt",
-          intro: "Schreib uns kurz dein Ziel und wir melden uns zeitnah.",
-          name: "Name",
-          email: "E-Mail",
-          message: "Nachricht",
-          submit: "Senden",
-          preview: "Success Seite ansehen",
-          phone: "+49 30 123456",
-          mail: "hello@moh-sass.dev",
-          city: "Berlin, Germany",
-        }
-      : {
-          title: "Contact",
-          intro: "Share your goal and we will get back quickly.",
-          name: "Name",
-          email: "Email",
-          message: "Message",
-          submit: "Submit",
-          preview: "Open success page",
-          phone: "+49 30 123456",
-          mail: "hello@moh-sass.dev",
-          city: "Berlin, Germany",
-        };
+  return buildLocalizedMetadata({
+    locale: localeKey,
+    pathname: "/contact",
+    title: t("title"),
+    description: t("intro"),
+  });
+}
+
+export default async function ContactPage({ params: { locale } }: ContactPageProps) {
+  const localeKey = resolveLocale(locale);
+  const t = await getTranslations({ locale: localeKey, namespace: "contactPage" });
 
   return (
-    <div className="mx-auto grid w-full max-w-6xl gap-6 px-4 py-10 sm:px-6 lg:grid-cols-2 lg:px-8 lg:py-14">
+    <Container className="grid gap-6 py-10 lg:grid-cols-2 lg:py-14">
       <MotionFade>
-        <Card>
+        <AppCard level={3}>
           <CardHeader>
-            <CardTitle className="text-3xl sm:text-4xl">{copy.title}</CardTitle>
-            <p className="text-base text-muted-foreground sm:text-lg">{copy.intro}</p>
+            <CardTitle className="text-3xl sm:text-4xl">{t("title")}</CardTitle>
+            <p className="text-base text-muted-foreground sm:text-lg">{t("intro")}</p>
           </CardHeader>
           <CardContent>
             <ul className="space-y-3 text-sm text-foreground/85">
               <li className="inline-flex items-center gap-2">
-                <Phone className="h-4 w-4" />
-                {copy.phone}
+                <Phone className="h-4 w-4 text-brand-primary" />
+                +49 30 123456
               </li>
               <li className="inline-flex items-center gap-2">
-                <Mail className="h-4 w-4" />
-                {copy.mail}
+                <Mail className="h-4 w-4 text-brand-primary" />
+                hello@moh-sass.dev
               </li>
               <li className="inline-flex items-center gap-2">
-                <MapPin className="h-4 w-4" />
-                {copy.city}
+                <MapPin className="h-4 w-4 text-brand-primary" />
+                {t("city")}
               </li>
             </ul>
           </CardContent>
-        </Card>
+        </AppCard>
       </MotionFade>
 
       <MotionFade delay={0.05}>
-        <Card>
+        <AppCard>
           <CardContent className="pt-6">
             <form className="grid gap-4">
               <Label className="grid gap-2">
-                {copy.name}
-                <Input type="text" placeholder={copy.name} />
+                {t("name")}
+                <Input type="text" placeholder={t("name")} />
               </Label>
 
               <Label className="grid gap-2">
-                {copy.email}
-                <Input type="email" placeholder={copy.email} />
+                {t("email")}
+                <Input type="email" placeholder={t("email")} />
               </Label>
 
               <Label className="grid gap-2">
-                {copy.message}
-                <Textarea rows={5} placeholder={copy.message} />
+                {t("message")}
+                <Textarea rows={5} placeholder={t("message")} />
               </Label>
 
               <div className="flex flex-wrap gap-3">
-                <Button type="button">{copy.submit}</Button>
+                <Button type="button">{t("submit")}</Button>
                 <Button asChild variant="outline">
-                  <Link href={`/${localeKey}/success`}>{copy.preview}</Link>
+                  <Link href={getLocalizedPath(localeKey, "/success")}>{t("preview")}</Link>
                 </Button>
               </div>
             </form>
           </CardContent>
-        </Card>
+        </AppCard>
       </MotionFade>
-    </div>
+    </Container>
   );
 }