added i18n + changed routing

app/[locale]/about/page.tsx

@@ -1,30 +1,20 @@
-import type { Metadata } from "next";
 import Image from "next/image";
 import {
   PageHero,
   FadeUp,
   Divider,
   SectionTitle,
 } from "@/components/ui";
+import { getRouteMetadata } from "@/lib/i18n/metadata";
 
-export const metadata: Metadata = {
-  title: "About Us",
-  description:
-    "VINdicated was founded by Rana Darwich after experiencing dealership discrimination firsthand. Learn about our mission to educate, empower, and vindicate car buyers.",
-  openGraph: {
-    title: "About Us",
-    description:
-      "VINdicated was founded by Rana Darwich after experiencing dealership discrimination firsthand. Learn about our mission to educate, empower, and vindicate car buyers.",
-    url: "/about",
-    type: "website",
-    images: [{ url: "/illus-woman-dealership.png", alt: "VINdicated: About Us" }],
-  },
-  twitter: {
-    title: "About Us",
-    description:
-      "VINdicated was founded by Rana Darwich after experiencing dealership discrimination firsthand. Learn about our mission to educate, empower, and vindicate car buyers.",
-  },
-};
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  return getRouteMetadata(locale, "about", "/about");
+}
 
 export default function AboutPage() {
   return (

app/[locale]/contact/layout.tsx

@@ -1,23 +1,13 @@
-import type { Metadata } from "next";
+import { getRouteMetadata } from "@/lib/i18n/metadata";
 
-export const metadata: Metadata = {
-  title: "Contact",
-  description:
-    "Get in touch with VINdicated: volunteer with our team, share your story, participate in research, or partner with us.",
-  openGraph: {
-    title: "Contact",
-    description:
-      "Get in touch with VINdicated: volunteer with our team, share your story, participate in research, or partner with us.",
-    url: "/contact",
-    type: "website",
-    images: [{ url: "/illus-woman-dealership.png", alt: "VINdicated: Contact" }],
-  },
-  twitter: {
-    title: "Contact",
-    description:
-      "Get in touch with VINdicated: volunteer with our team, share your story, participate in research, or partner with us.",
-  },
-};
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  return getRouteMetadata(locale, "contact", "/contact");
+}
 
 export default function ContactLayout({
   children,

app/[locale]/documents/layout.tsx

@@ -1,23 +1,13 @@
-import type { Metadata } from "next";
+import { getRouteMetadata } from "@/lib/i18n/metadata";
 
-export const metadata: Metadata = {
-  title: "Documents Decoded",
-  description:
-    "Interactive guides to understanding car buying documents: the pink slip, Carfax reports, financing contracts, and more. Know what you're signing before you sign it.",
-  openGraph: {
-    title: "Documents Decoded",
-    description:
-      "Interactive guides to understanding car buying documents: the pink slip, Carfax reports, financing contracts, and more. Know what you're signing before you sign it.",
-    url: "/documents",
-    type: "website",
-    images: [{ url: "/illus-woman-dealership.png", alt: "VINdicated: Documents Decoded" }],
-  },
-  twitter: {
-    title: "Documents Decoded",
-    description:
-      "Interactive guides to understanding car buying documents: the pink slip, Carfax reports, financing contracts, and more. Know what you're signing before you sign it.",
-  },
-};
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  return getRouteMetadata(locale, "documents", "/documents");
+}
 
 export default function DocumentsLayout({
   children,

app/[locale]/documents/page.tsx

@@ -337,7 +337,8 @@ const bgItems = [
       <>
         <p>
           A service contract (extended warranty) is optional and not free. The
-          word &quot;available&quot; means they want to sell it to you, but it doesn't necessarily mean you need
+          word &quot;available&quot; means they want to sell it to you, but it
+          doesn&apos;t necessarily mean you need
           it.
         </p>
       </>

app/[locale]/fraud/layout.tsx

@@ -1,23 +1,13 @@
-import type { Metadata } from "next";
+import { getRouteMetadata } from "@/lib/i18n/metadata";
 
-export const metadata: Metadata = {
-  title: "Fraud Prevention",
-  description:
-    "Learn to recognize and counter common dealer scams. Know the red flags, your legal rights under California and federal law, and what to do if you've been scammed.",
-  openGraph: {
-    title: "Fraud Prevention",
-    description:
-      "Learn to recognize and counter common dealer scams. Know the red flags, your legal rights under California and federal law, and what to do if you've been scammed.",
-    url: "/fraud",
-    type: "website",
-    images: [{ url: "/illus-woman-dealership.png", alt: "VINdicated: Fraud Prevention" }],
-  },
-  twitter: {
-    title: "Fraud Prevention",
-    description:
-      "Learn to recognize and counter common dealer scams. Know the red flags, your legal rights under California and federal law, and what to do if you've been scammed.",
-  },
-};
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  return getRouteMetadata(locale, "fraud", "/fraud");
+}
 
 export default function FraudLayout({
   children,

app/[locale]/inspection/layout.tsx

@@ -1,23 +1,13 @@
-import type { Metadata } from "next";
+import { getRouteMetadata } from "@/lib/i18n/metadata";
 
-export const metadata: Metadata = {
-  title: "Inspection Guide",
-  description:
-    "A step-by-step guide to inspecting a used car before you buy. Know what to look for under the hood, on the lot, and in the paperwork.",
-  openGraph: {
-    title: "Inspection Guide",
-    description:
-      "A step-by-step guide to inspecting a used car before you buy. Know what to look for under the hood, on the lot, and in the paperwork.",
-    url: "/inspection",
-    type: "website",
-    images: [{ url: "/illus-woman-dealership.png", alt: "VINdicated: Inspection Guide" }],
-  },
-  twitter: {
-    title: "Inspection Guide",
-    description:
-      "A step-by-step guide to inspecting a used car before you buy. Know what to look for under the hood, on the lot, and in the paperwork.",
-  },
-};
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  return getRouteMetadata(locale, "inspection", "/inspection");
+}
 
 export default function InspectionLayout({
   children,

app/[locale]/inspection/page.tsx

@@ -633,11 +633,11 @@ const inspectionAccordion = [
         </li>
         <li>
           <strong>Check engine light codes:</strong> Even if the light
-          isn't on, a mechanic can pull stored codes.
+          isn&apos;t on, a mechanic can pull stored codes.
         </li>
         <li>
           <strong>Compression test:</strong> Reveals internal engine wear
-          that visual inspection can't catch.
+          that visual inspection can&apos;t catch.
         </li>
       </ul>
     ),
@@ -711,7 +711,7 @@ const inspectionAccordion = [
     body: (
       <div className="space-y-3">
         <p>
-          A Carfax report helps but isn't the whole picture. A physical
+          A Carfax report helps but isn&apos;t the whole picture. A physical
           inspection can catch:
         </p>
         <ul className="space-y-2 ml-5 list-disc">
@@ -777,7 +777,7 @@ export default function InspectionPage() {
         kicker=""
         title={
           <>
-            Don't Buy a Car
+            Don&apos;t Buy a Car
             <br />
             <em>Without This.</em>
           </>
@@ -890,7 +890,7 @@ export default function InspectionPage() {
                 body: (
                   <>
                     <p className="mb-3">
-                      If you're buying a used Honda from a Mitsubishi
+                      If you&apos;re buying a used Honda from a Mitsubishi
                       dealership,{" "}
                       <strong>
                         take it to a Honda dealership for the PPI.
@@ -994,11 +994,11 @@ export default function InspectionPage() {
               { fontSize: "clamp(2.4rem,5vw,4rem)" } as React.CSSProperties
             }
           >
-            Why You're <em>Paying for Your Safety</em>
+            Why You&apos;re <em>Paying for Your Safety</em>
           </SectionTitle>
           <p className="text-[1.05rem] text-white leading-[1.75] max-w-[680px] mb-8">
-            A good inspector goes through the car systematically. Here's
-            what they're checking, and why each category matters.
+            A good inspector goes through the car systematically. Here&apos;s
+            what they&apos;re checking, and why each category matters.
           </p>
           <Accordion items={inspectionAccordion} />
         </section>
@@ -1059,10 +1059,10 @@ export default function InspectionPage() {
           <InfoBox label="Important">
             <p>
               If a seller stalls on producing service records or promises
-              they'll "get them later," schedule the inspection
+              they&apos;ll &quot;get them later,&quot; schedule the inspection
               before you commit emotionally.{" "}
               <strong>
-                Schedule the inspection before you're attached, not
+                Schedule the inspection before you&apos;re attached, not
                 after.
               </strong>
             </p>

app/[locale]/layout.tsx

@@ -1,11 +1,11 @@
-import type { Metadata } from "next";
 import "../globals.css";
 import { Lora, Figtree } from "next/font/google";
 import { notFound } from "next/navigation";
 import { Nav } from "@/components/layout/Nav";
 import { Footer } from "@/components/layout/Footer";
 import { locales, isValidLocale, isRtl, type Locale } from "@/lib/i18n/config";
 import { getDictionary } from "@/lib/i18n/get-dictionary";
+import { getRootMetadata } from "@/lib/i18n/metadata";
 // import { CarCursor } from "@/components/ui/CarCursor";
 
 const lora = Lora({
@@ -28,44 +28,14 @@ export function generateStaticParams() {
   return locales.map((locale) => ({ locale }));
 }
 
-export const metadata: Metadata = {
-  metadataBase: new URL(
-    process.env.NEXT_PUBLIC_SITE_URL ?? "https://getvindicated.org"
-  ),
-  title: {
-    default: "VINdicated | Educate. Empower. Vindicate.",
-    template: "%s | VINdicated",
-  },
-  description:
-    "VINdicated is a nonprofit built on the belief that car knowledge should be public knowledge. We break down the systems that allow consumer discrimination to thrive.",
-  openGraph: {
-    type: "website",
-    siteName: "VINdicated",
-    title: {
-      default: "VINdicated | Educate. Empower. Vindicate.",
-      template: "%s | VINdicated",
-    },
-    description:
-      "VINdicated is a nonprofit built on the belief that car knowledge should be public knowledge. We break down the systems that allow consumer discrimination to thrive.",
-    url: "/",
-    images: [
-      {
-        url: "/illus-woman-dealership.png",
-        alt: "VINdicated",
-      },
-    ],
-  },
-  twitter: {
-    card: "summary_large_image",
-    title: {
-      default: "VINdicated | Educate. Empower. Vindicate.",
-      template: "%s | VINdicated",
-    },
-    description:
-      "VINdicated is a nonprofit built on the belief that car knowledge should be public knowledge. We break down the systems that allow consumer discrimination to thrive.",
-    images: ["/illus-woman-dealership.png"],
-  },
-};
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  return getRootMetadata(locale);
+}
 
 export default async function RootLayout({
   children,

app/[locale]/page.tsx

@@ -6,7 +6,7 @@ import { HomeQuote } from "@/components/sections/HomeQuote";
 import { HomeFounder } from "@/components/sections/HomeFounder";
 import { Divider } from "@/components/ui";
 import { getDictionary } from "@/lib/i18n/get-dictionary";
-import type { Locale } from "@/lib/i18n/config";
+import { localizedPathnames, localizeHref, type Locale } from "@/lib/i18n/config";
 import type { HomeDict } from "@/lib/i18n/home-dict";
 
 export async function generateMetadata({
@@ -23,16 +23,23 @@ export async function generateMetadata({
 
   return {
     title,
+    description,
+    alternates: {
+      canonical: localizeHref(locale as Locale, "/"),
+      languages: localizedPathnames("/"),
+    },
     openGraph: {
       title,
       description,
-      url: "/",
+      url: localizeHref(locale as Locale, "/"),
       type: "website",
+      locale,
       images: [{ url: "/preview.webp", alt: "VINdicated" }],
     },
     twitter: {
       title,
       description,
+      images: ["/preview.webp"],
     },
   };
 }

app/[locale]/research/page.tsx

@@ -1,4 +1,3 @@
-import type { Metadata } from "next";
 import {
   PageHero,
   FadeUp,
@@ -7,25 +6,16 @@ import {
   Button,
 } from "@/components/ui";
 import { StudyCard } from "@/components/sections/StudyCard";
+import { getRouteMetadata } from "@/lib/i18n/metadata";
 
-export const metadata: Metadata = {
-  title: "Research",
-  description:
-    "VINdicated conducts correspondence audit studies documenting gender and racial pricing disparities at car dealerships. Read our findings and methodology.",
-  openGraph: {
-    title: "Research",
-    description:
-      "VINdicated conducts correspondence audit studies documenting gender and racial pricing disparities at car dealerships. Read our findings and methodology.",
-    url: "/research",
-    type: "website",
-    images: [{ url: "/preview.webp", alt: "VINdicated: Research" }],
-  },
-  twitter: {
-    title: "Research",
-    description:
-      "VINdicated conducts correspondence audit studies documenting gender and racial pricing disparities at car dealerships. Read our findings and methodology.",
-  },
-};
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  return getRouteMetadata(locale, "research", "/research", "/preview.webp");
+}
 
 const stats = [
   {