From 672f07983e1c2cd61c7c85685c14896bf564699f Mon Sep 17 00:00:00 2001
From: Corwin Smith <cssmittys@gmail.com>
Date: Tue, 19 Aug 2025 10:41:19 -0600
Subject: [PATCH 1/3] setup /apps page and components for translation

---
 .../apps/_components/SuggestAnApp.tsx         | 14 ++--
 app/[locale]/apps/_components/TopApps.tsx     |  7 +-
 app/[locale]/apps/page.tsx                    | 37 +++++----
 src/data/apps/categories.ts                   | 79 ++++++++-----------
 src/intl/en/page-apps.json                    | 50 +++++++++++-
 5 files changed, 113 insertions(+), 74 deletions(-)

diff --git a/app/[locale]/apps/_components/SuggestAnApp.tsx b/app/[locale]/apps/_components/SuggestAnApp.tsx
index d249f1ff4d8..9367bbaa540 100644
--- a/app/[locale]/apps/_components/SuggestAnApp.tsx
+++ b/app/[locale]/apps/_components/SuggestAnApp.tsx
@@ -1,20 +1,20 @@
+import { getTranslations } from "next-intl/server"
+
 import { ButtonLink } from "@/components/ui/buttons/Button"
 
-const SuggestAnApp = () => {
+const SuggestAnApp = async () => {
+  const t = await getTranslations("page-apps")
   return (
     <div className="flex flex-col items-center gap-4 rounded-2xl bg-radial-a p-12">
-      <h2>Suggest an app</h2>
-      <p>
-        We&apos;re always looking for new apps to add to our list. If you know
-        of an app that you think should be on the list, please let us know.
-      </p>
+      <h2>{t("page-apps-suggest-an-app-title")}</h2>
+      <p>{t("page-apps-suggest-an-app-description")}</p>
       <ButtonLink
         href="https://submitapp.paperform.co/"
         variant="outline"
         className="w-fit"
         hideArrow
       >
-        Suggest an app
+        {t("page-apps-suggest-an-app-button")}
       </ButtonLink>
     </div>
   )
diff --git a/app/[locale]/apps/_components/TopApps.tsx b/app/[locale]/apps/_components/TopApps.tsx
index fb2210a69a8..1bc145fe736 100644
--- a/app/[locale]/apps/_components/TopApps.tsx
+++ b/app/[locale]/apps/_components/TopApps.tsx
@@ -23,11 +23,14 @@ import AppCard from "./AppCard"
 
 import { useBreakpointValue } from "@/hooks/useBreakpointValue"
 import { useIsClient } from "@/hooks/useIsClient"
+import useTranslation from "@/hooks/useTranslation"
+
 interface TopAppsProps {
   appsData: Record<AppCategory, AppData[]>
 }
 
 const TopApps = ({ appsData }: TopAppsProps) => {
+  const { t } = useTranslation("page-apps")
   const isClient = useIsClient()
   const cardStyling = useBreakpointValue({
     base: {
@@ -119,7 +122,7 @@ const TopApps = ({ appsData }: TopAppsProps) => {
                         })()}
                       </div>
                       <p className="text-lg font-bold text-body no-underline group-hover:text-primary">
-                        {category}
+                        {t(appsCategories[category].name)}
                       </p>
                     </div>
                     <div>
@@ -129,7 +132,7 @@ const TopApps = ({ appsData }: TopAppsProps) => {
                         size="sm"
                         className="w-fit"
                       >
-                        <p className="text-sm">See all</p>
+                        <p className="text-sm">{t("page-apps-see-all")}</p>
                       </Button>
                     </div>
                   </div>
diff --git a/app/[locale]/apps/page.tsx b/app/[locale]/apps/page.tsx
index 5d8f24f7652..a3f6658debd 100644
--- a/app/[locale]/apps/page.tsx
+++ b/app/[locale]/apps/page.tsx
@@ -1,5 +1,9 @@
 import { pick } from "lodash"
-import { getMessages, setRequestLocale } from "next-intl/server"
+import {
+  getMessages,
+  getTranslations,
+  setRequestLocale,
+} from "next-intl/server"
 
 import Breadcrumbs from "@/components/Breadcrumbs"
 import { SimpleHero } from "@/components/Hero"
@@ -49,6 +53,9 @@ const Page = async ({ params }: { params: { locale: string } }) => {
   // Get 6 random staff pick apps
   const discoverApps = getDiscoverApps(appsData, 6)
 
+  // Get translations
+  const t = await getTranslations({ locale, namespace: "page-apps" })
+
   // Get i18n messages
   const allMessages = await getMessages({ locale })
   const requiredNamespaces = getRequiredNamespacesForPage("/apps")
@@ -57,12 +64,12 @@ const Page = async ({ params }: { params: { locale: string } }) => {
     <I18nProvider locale={locale} messages={messages}>
       <SimpleHero
         breadcrumbs={<Breadcrumbs slug={"/apps"} />}
-        title="Apps"
-        subtitle="Discover a list of curated applications that run on ethereum and layer 2 networks"
+        title={t("page-apps-title")}
+        subtitle={t("page-apps-subtitle")}
         buttons={[
           {
             href: "/what-are-apps/",
-            label: "Learn about apps",
+            label: t("page-apps-learn-button"),
             variant: "outline",
             isSecondary: true,
           },
@@ -71,12 +78,12 @@ const Page = async ({ params }: { params: { locale: string } }) => {
 
       <MainArticle className="flex flex-col gap-32 py-10">
         <div className="flex flex-col gap-8 px-4 md:px-8">
-          <h2>Highlights</h2>
+          <h2>{t("page-apps-highlights-title")}</h2>
           <AppsHighlight apps={highlightedApps} matomoCategory="apps" />
         </div>
 
         <div className="flex flex-col gap-4 px-4 md:px-8">
-          <h2>Discover</h2>
+          <h2>{t("page-apps-discover-title")}</h2>
           <div className="grid grid-cols-1 gap-7 md:grid-cols-2 lg:grid-cols-3">
             {discoverApps.map((app) => (
               <AppCard
@@ -92,25 +99,25 @@ const Page = async ({ params }: { params: { locale: string } }) => {
         </div>
 
         <div className="flex flex-col gap-4 px-4 md:px-8">
-          <h2>Applications</h2>
+          <h2>{t("page-apps-applications-title")}</h2>
           <TopApps appsData={appsData} />
         </div>
 
         {/* Note: Implemented this instead of swiper from design to allow for SSR */}
         <div className="flex flex-col gap-4 px-4 md:px-8">
-          <h2>Application categories</h2>
+          <h2>{t("page-apps-categories-title")}</h2>
           <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
             {Object.values(appsCategories).map((category) => (
               <SubpageCard
                 key={category.slug}
-                title={category.name}
-                description={category.description}
+                title={t(category.name)}
+                description={t(category.description)}
                 icon={<category.icon className="h-8 w-8" />}
                 href={`/apps/categories/${category.slug}`}
                 matomoEvent={{
                   eventCategory: "apps",
                   eventAction: "categories",
-                  eventName: `category name ${category.name}`,
+                  eventName: `category name ${t(category.name)}`,
                 }}
               />
             ))}
@@ -118,7 +125,7 @@ const Page = async ({ params }: { params: { locale: string } }) => {
         </div>
 
         <div className="flex flex-col gap-4 px-4 md:px-8">
-          <h2>Community picks</h2>
+          <h2>{t("page-apps-community-picks-title")}</h2>
           <CommunityPicks communityPicks={communityPicks} appsData={appsData} />
         </div>
 
@@ -136,13 +143,13 @@ export async function generateMetadata({
   params: Promise<{ locale: string }>
 }) {
   const { locale } = await params
+  const t = await getTranslations({ locale, namespace: "page-apps" })
 
   return await getMetadata({
     locale,
     slug: ["apps"],
-    title: "Top crypto apps on Ethereum",
-    description:
-      "Discover  crypto apps on ethereum: explore DeFi, NFTs, Social, Gaming, Bridges, Privacy, Productivity & DAO dApps. Find trusted on-chain apps to trade, earn, and interact.",
+    title: t("page-apps-meta-title"),
+    description: t("page-apps-meta-description"),
   })
 }
 
diff --git a/src/data/apps/categories.ts b/src/data/apps/categories.ts
index 83e908d3b80..ea3a917ac1f 100644
--- a/src/data/apps/categories.ts
+++ b/src/data/apps/categories.ts
@@ -13,82 +13,67 @@ import { slugify } from "@/lib/utils/url"
 
 export const appsCategories: AppCategories = {
   [AppCategoryEnum.DEFI]: {
-    name: "DeFi",
+    name: "page-apps-category-defi-name",
     icon: DeFiIcon,
     slug: slugify(AppCategoryEnum.DEFI),
-    description:
-      "DeFi is a category of decentralized applications that allow users to lend, borrow, trade, and earn interest on their crypto assets.",
-    metaTitle: "List of ethereum DeFi apps — Lending, Borrowing & Yield",
-    metaDescription:
-      "Explore top DeFi apps on Ethereum for lending, borrowing, stablecoin issuance, credit and on-chain DEX trading.",
+    description: "page-apps-category-defi-description",
+    metaTitle: "page-apps-category-defi-meta-title",
+    metaDescription: "page-apps-category-defi-meta-description",
   },
   [AppCategoryEnum.COLLECTIBLE]: {
-    name: "Collectibles",
+    name: "page-apps-category-collectibles-name",
     icon: CollectiblesIcon,
     slug: slugify(AppCategoryEnum.COLLECTIBLE),
-    description:
-      "Collectibles are digital assets that are unique and cannot be replicated.",
-    metaTitle: "List of best NFT apps on ethereum",
-    metaDescription:
-      "Explore top NFT apps for buying collectibles, trading gaming skins, and discovering new digital assets across leading Ethereum marketplaces.",
+    description: "page-apps-category-collectibles-description",
+    metaTitle: "page-apps-category-collectibles-meta-title",
+    metaDescription: "page-apps-category-collectibles-meta-description",
   },
   [AppCategoryEnum.SOCIAL]: {
-    name: "Social",
+    name: "page-apps-category-social-name",
     icon: SocialIcon,
     slug: slugify(AppCategoryEnum.SOCIAL),
-    description:
-      "Social is a category of decentralized applications that allow users to connect with others and share content.",
-    metaTitle: "Social apps on ethereum: farcaster, zora and more",
-    metaDescription: "Explore best messaging and social apps on ethereum.",
+    description: "page-apps-category-social-description",
+    metaTitle: "page-apps-category-social-meta-title",
+    metaDescription: "page-apps-category-social-meta-description",
   },
   [AppCategoryEnum.GAMING]: {
-    name: "Gaming",
+    name: "page-apps-category-gaming-name",
     icon: GamingIcon,
     slug: slugify(AppCategoryEnum.GAMING),
-    description:
-      "Gaming is a category of decentralized applications that allow users to play games and earn rewards.",
-    metaTitle: "List of crypto and NFT games on ethereum",
-    metaDescription:
-      "Discover the best blockchain games that are fun to play. MMORPG, card games, AI gaming, RPG, casual games",
+    description: "page-apps-category-gaming-description",
+    metaTitle: "page-apps-category-gaming-meta-title",
+    metaDescription: "page-apps-category-gaming-meta-description",
   },
   [AppCategoryEnum.BRIDGE]: {
-    name: "Bridge",
+    name: "page-apps-category-bridge-name",
     icon: BridgeIcon,
     slug: slugify(AppCategoryEnum.BRIDGE),
-    description:
-      "Bridge is a category of decentralized applications that allow users to bridge their assets between different networks.",
-    metaTitle: "List of ethereum bridges to different networks",
-    metaDescription:
-      "Discover the best crypto bridge app to move your assets between different networks and layer 2s.",
+    description: "page-apps-category-bridge-description",
+    metaTitle: "page-apps-category-bridge-meta-title",
+    metaDescription: "page-apps-category-bridge-meta-description",
   },
   [AppCategoryEnum.PRODUCTIVITY]: {
-    name: "Productivity",
+    name: "page-apps-category-productivity-name",
     icon: ProductivityIcon,
     slug: slugify(AppCategoryEnum.PRODUCTIVITY),
-    description:
-      "Productivity is a category of decentralized applications that allow users to be productive.",
-    metaTitle: "Productivity and decentralized identity apps",
-    metaDescription:
-      "Explore top Ethereum apps for decentralized identity, storage, DNS, and video computing. Boost your on-chain productivity with trusted infrastructure tools.",
+    description: "page-apps-category-productivity-description",
+    metaTitle: "page-apps-category-productivity-meta-title",
+    metaDescription: "page-apps-category-productivity-meta-description",
   },
   [AppCategoryEnum.PRIVACY]: {
-    name: "Privacy",
+    name: "page-apps-category-privacy-name",
     icon: PrivacyIcon,
     slug: slugify(AppCategoryEnum.PRIVACY),
-    description:
-      "Privacy is a category of decentralized applications that allow users to be private.",
-    metaTitle: "Ethereum privacy apps: tornado cash and others",
-    metaDescription:
-      "Explore Ethereum privacy apps like Tornado Cash and others that protect user anonymity, enable private transactions, and enhance on-chain confidentiality.",
+    description: "page-apps-category-privacy-description",
+    metaTitle: "page-apps-category-privacy-meta-title",
+    metaDescription: "page-apps-category-privacy-meta-description",
   },
   [AppCategoryEnum.GOVERNANCE_DAO]: {
-    name: "DAO",
+    name: "page-apps-category-dao-name",
     icon: GovernanceIcon,
     slug: slugify(AppCategoryEnum.GOVERNANCE_DAO),
-    description:
-      "DAO is a category of decentralized applications that allow users to govern and create decentralized autonomous organizations.",
-    metaTitle: "List of DAO tools on ethereum",
-    metaDescription:
-      "Discover top DAO tools on Ethereum for governance, treasury management, voting, and contributor coordination. Launch, manage, and grow your decentralized organization.",
+    description: "page-apps-category-dao-description",
+    metaTitle: "page-apps-category-dao-meta-title",
+    metaDescription: "page-apps-category-dao-meta-description",
   },
 }
diff --git a/src/intl/en/page-apps.json b/src/intl/en/page-apps.json
index ef36be7e20b..fe158f56d2e 100644
--- a/src/intl/en/page-apps.json
+++ b/src/intl/en/page-apps.json
@@ -6,8 +6,52 @@
   "page-apps-dapp-description-gods-unchained": "Strategic trading card game. Earn cards by playing that you can sell in real life.",
   "page-apps-dapp-description-augur": "Bet on outcomes. Trade on information markets.",
   "page-apps-ready-button": "Go",
-  "page-apps-meta-title": "Ethereum Apps - Discover Decentralized Applications",
-  "page-apps-meta-description": "Explore a curated list of decentralized applications (dapps) that run on Ethereum and Layer 2 networks. Find DeFi, NFT, gaming, and other Web3 applications.",
   "foundation": "Foundation",
-  "page-wallets-get-some": "Get some ETH"
+  "page-wallets-get-some": "Get some ETH",
+  "page-apps-title": "Apps",
+  "page-apps-subtitle": "Discover a list of curated applications that run on ethereum and layer 2 networks",
+  "page-apps-learn-button": "Learn about apps",
+  "page-apps-highlights-title": "Highlights",
+  "page-apps-discover-title": "Discover",
+  "page-apps-applications-title": "Applications",
+  "page-apps-categories-title": "Application categories",
+  "page-apps-community-picks-title": "Community picks",
+  "page-apps-meta-title": "Top crypto apps on Ethereum",
+  "page-apps-meta-description": "Discover  crypto apps on ethereum: explore DeFi, NFTs, Social, Gaming, Bridges, Privacy, Productivity & DAO dApps. Find trusted onchain apps to trade, earn, and interact.",
+  "page-apps-category-defi-name": "DeFi",
+  "page-apps-category-defi-description": "DeFi is a category of decentralized applications that allow users to lend, borrow, trade, and earn interest on their crypto assets.",
+  "page-apps-category-defi-meta-title": "List of ethereum DeFi apps — Lending, Borrowing & Yield",
+  "page-apps-category-defi-meta-description": "Explore top DeFi apps on Ethereum for lending, borrowing, stablecoin issuance, credit and on-chain DEX trading.",
+  "page-apps-category-collectibles-name": "Collectibles",
+  "page-apps-category-collectibles-description": "Collectibles are digital assets that are unique and cannot be replicated.",
+  "page-apps-category-collectibles-meta-title": "List of best NFT apps on ethereum",
+  "page-apps-category-collectibles-meta-description": "Explore top NFT apps for buying collectibles, trading gaming skins, and discovering new digital assets across leading Ethereum marketplaces.",
+  "page-apps-category-social-name": "Social",
+  "page-apps-category-social-description": "Social is a category of decentralized applications that allow users to connect with others and share content.",
+  "page-apps-category-social-meta-title": "Social apps on ethereum: farcaster, zora and more",
+  "page-apps-category-social-meta-description": "Explore best messaging and social apps on ethereum.",
+  "page-apps-category-gaming-name": "Gaming",
+  "page-apps-category-gaming-description": "Gaming is a category of decentralized applications that allow users to play games and earn rewards.",
+  "page-apps-category-gaming-meta-title": "List of crypto and NFT games on ethereum",
+  "page-apps-category-gaming-meta-description": "Discover the best blockchain games that are fun to play. MMORPG, card games, AI gaming, RPG, casual games",
+  "page-apps-category-bridge-name": "Bridge",
+  "page-apps-category-bridge-description": "Bridge is a category of decentralized applications that allow users to bridge their assets between different networks.",
+  "page-apps-category-bridge-meta-title": "List of ethereum bridges to different networks",
+  "page-apps-category-bridge-meta-description": "Discover the best crypto bridge app to move your assets between different networks and layer 2s.",
+  "page-apps-category-productivity-name": "Productivity",
+  "page-apps-category-productivity-description": "Productivity is a category of decentralized applications that allow users to be productive.",
+  "page-apps-category-productivity-meta-title": "Productivity and decentralized identity apps",
+  "page-apps-category-productivity-meta-description": "Explore top Ethereum apps for decentralized identity, storage, DNS, and video computing. Boost your on-chain productivity with trusted infrastructure tools.",
+  "page-apps-category-privacy-name": "Privacy",
+  "page-apps-category-privacy-description": "Privacy is a category of decentralized applications that allow users to be private.",
+  "page-apps-category-privacy-meta-title": "Ethereum privacy apps: tornado cash and others",
+  "page-apps-category-privacy-meta-description": "Explore Ethereum privacy apps like Tornado Cash and others that protect user anonymity, enable private transactions, and enhance on-chain confidentiality.",
+  "page-apps-category-dao-name": "DAO",
+  "page-apps-category-dao-description": "DAO is a category of decentralized applications that allow users to govern and create decentralized autonomous organizations.",
+  "page-apps-category-dao-meta-title": "List of DAO tools on ethereum",
+  "page-apps-category-dao-meta-description": "Discover top DAO tools on Ethereum for governance, treasury management, voting, and contributor coordination. Launch, manage, and grow your decentralized organization.",
+  "page-apps-see-all": "See all",
+  "page-apps-suggest-an-app-title": "Suggest an app",
+  "page-apps-suggest-an-app-description": "We're always looking for new apps to add to our list. If you know of an app that you think should be on the list, please let us know.",
+  "page-apps-suggest-an-app-button": "Suggest an app"
 }
\ No newline at end of file

From 9120b097eb145c2aad41d6df21cc3ede46e838e2 Mon Sep 17 00:00:00 2001
From: Corwin Smith <cssmittys@gmail.com>
Date: Tue, 19 Aug 2025 10:56:59 -0600
Subject: [PATCH 2/3] setup /app/categories/{category} for translation

---
 app/[locale]/apps/[application]/page.tsx      |  2 +-
 app/[locale]/apps/_components/AppsTable.tsx   |  9 ++++---
 .../apps/_components/CategoriesNav.tsx        | 18 ++++++++++---
 .../apps/categories/[catetgoryName]/page.tsx  | 25 +++++++++++++------
 src/intl/en/page-apps.json                    |  5 +++-
 5 files changed, 42 insertions(+), 17 deletions(-)

diff --git a/app/[locale]/apps/[application]/page.tsx b/app/[locale]/apps/[application]/page.tsx
index 7b02b409d0a..fafacdf0c81 100644
--- a/app/[locale]/apps/[application]/page.tsx
+++ b/app/[locale]/apps/[application]/page.tsx
@@ -275,7 +275,7 @@ const Page = async ({
             {nextApp && (
               <LinkBox className="group hidden flex-row items-center rounded-lg p-3 hover:bg-background-highlight sm:flex">
                 <div className="mr-2 flex flex-col text-right">
-                  <p className="text-sm text-gray-500 text-nowrap">See next</p>
+                  <p className="text-nowrap text-sm text-gray-500">See next</p>
                   <p className="text-primary group-hover:text-primary-hover">
                     {nextApp.name}
                   </p>
diff --git a/app/[locale]/apps/_components/AppsTable.tsx b/app/[locale]/apps/_components/AppsTable.tsx
index 4a56810ec83..0746c3b2938 100644
--- a/app/[locale]/apps/_components/AppsTable.tsx
+++ b/app/[locale]/apps/_components/AppsTable.tsx
@@ -16,7 +16,10 @@ import { trackCustomEvent } from "@/lib/utils/matomo"
 
 import AppCard from "./AppCard"
 
+import useTranslation from "@/hooks/useTranslation"
+
 const AppsTable = ({ apps }: { apps: AppData[] }) => {
+  const { t } = useTranslation("page-apps")
   const [filterBy, setFilterBy] = useState("All")
 
   const subCategories = useMemo(
@@ -41,7 +44,7 @@ const AppsTable = ({ apps }: { apps: AppData[] }) => {
     <div className="flex flex-col gap-7">
       <div className="flex flex-row items-end justify-between border-b pb-2 sm:items-center">
         <div className="flex flex-col items-start gap-2 sm:flex-row sm:items-center">
-          <p className="whitespace-nowrap">Filter by</p>
+          <p className="whitespace-nowrap">{t("page-apps-filter-by")}</p>
           <Select
             value={filterBy}
             onValueChange={(value) => {
@@ -61,7 +64,7 @@ const AppsTable = ({ apps }: { apps: AppData[] }) => {
                 value="All"
                 className="cursor-pointer hover:bg-primary-low-contrast"
               >
-                All
+                {t("page-apps-filter-all")}
               </SelectItem>
               {subCategories.map((subCategory) => (
                 <SelectItem
@@ -77,7 +80,7 @@ const AppsTable = ({ apps }: { apps: AppData[] }) => {
         </div>
         <div>
           <p className="text-body-medium">
-            Showing{" "}
+            {t("page-apps-showing")}{" "}
             <span className="text-body">
               (
               {filteredApps.length === apps.length
diff --git a/app/[locale]/apps/_components/CategoriesNav.tsx b/app/[locale]/apps/_components/CategoriesNav.tsx
index efdde88f58e..4863c4eb5e9 100644
--- a/app/[locale]/apps/_components/CategoriesNav.tsx
+++ b/app/[locale]/apps/_components/CategoriesNav.tsx
@@ -1,12 +1,22 @@
+import { getTranslations } from "next-intl/server"
+
 import TabNav from "@/components/ui/TabNav"
 
+import { slugify } from "@/lib/utils/url"
+
 import { appsCategories } from "@/data/apps/categories"
 
-const CategoriesNav = ({ activeCategory = "" }: { activeCategory: string }) => {
+const CategoriesNav = async ({
+  activeCategory = "",
+}: {
+  activeCategory: string
+}) => {
+  const t = await getTranslations("page-apps")
+
   const items = Object.values(appsCategories).map(
     ({ name, icon: Icon, slug }) => ({
-      key: name,
-      label: name,
+      key: slug,
+      label: t(name),
       href: `/apps/categories/${slug}`,
       icon: <Icon className="h-4 w-4" />,
     })
@@ -15,7 +25,7 @@ const CategoriesNav = ({ activeCategory = "" }: { activeCategory: string }) => {
   return (
     <TabNav
       items={items}
-      activeKey={activeCategory}
+      activeKey={slugify(activeCategory)}
       customEventOptions={{
         eventCategory: "categories_page",
         eventAction: "navigation",
diff --git a/app/[locale]/apps/categories/[catetgoryName]/page.tsx b/app/[locale]/apps/categories/[catetgoryName]/page.tsx
index d74d61ca635..03f6fd7ed3b 100644
--- a/app/[locale]/apps/categories/[catetgoryName]/page.tsx
+++ b/app/[locale]/apps/categories/[catetgoryName]/page.tsx
@@ -1,6 +1,10 @@
 import { pick } from "lodash"
 import { notFound } from "next/navigation"
-import { getMessages, setRequestLocale } from "next-intl/server"
+import {
+  getMessages,
+  getTranslations,
+  setRequestLocale,
+} from "next-intl/server"
 
 import { AppCategoryEnum } from "@/lib/types"
 
@@ -52,6 +56,8 @@ const Page = async ({
 
   const [appsData] = await loadData()
 
+  const t = await getTranslations({ locale, namespace: "page-apps" })
+
   // Get i18n messages
   const allMessages = await getMessages({ locale })
   const requiredNamespaces = getRequiredNamespacesForPage("/apps")
@@ -96,13 +102,15 @@ const Page = async ({
                   /
                 </BreadcrumbSeparator>
                 <BreadcrumbItem>
-                  <BreadcrumbPage>{category.name.toUpperCase()}</BreadcrumbPage>
+                  <BreadcrumbPage>
+                    {t(category.name).toUpperCase()}
+                  </BreadcrumbPage>
                 </BreadcrumbItem>
               </BreadcrumbList>
             </Breadcrumb>
           }
-          title={category.name}
-          subtitle={category.description}
+          title={t(category.name)}
+          subtitle={t(category.description)}
         />
 
         <div className="flex flex-col gap-4 px-4 md:px-8">
@@ -111,7 +119,7 @@ const Page = async ({
 
         <MainArticle className="flex flex-col gap-32 py-10">
           <div className="flex flex-col px-4 md:px-8">
-            <h2>Highlights</h2>
+            <h2>{t("page-apps-highlights-title")}</h2>
             <AppsHighlight
               apps={highlightedApps}
               matomoCategory={`category_page`}
@@ -119,7 +127,7 @@ const Page = async ({
           </div>
 
           <div className="flex flex-col px-4 md:px-8">
-            <AppsTable apps={appsData[category.name]} />
+            <AppsTable apps={appsData[categoryEnum]} />
           </div>
 
           <div className="flex flex-col px-4 md:px-8">
@@ -137,6 +145,7 @@ export async function generateMetadata({
   params: Promise<{ locale: string; catetgoryName: string }>
 }) {
   const { locale, catetgoryName } = await params
+  const t = await getTranslations({ locale, namespace: "page-apps" })
 
   // Normalize slug to lowercase
   const normalizedSlug = catetgoryName.toLowerCase()
@@ -156,8 +165,8 @@ export async function generateMetadata({
     notFound()
   }
 
-  const title = category.metaTitle
-  const description = category.metaDescription
+  const title = t(category.metaTitle)
+  const description = t(category.metaDescription)
 
   return await getMetadata({
     locale,
diff --git a/src/intl/en/page-apps.json b/src/intl/en/page-apps.json
index fe158f56d2e..19d4bdaf218 100644
--- a/src/intl/en/page-apps.json
+++ b/src/intl/en/page-apps.json
@@ -53,5 +53,8 @@
   "page-apps-see-all": "See all",
   "page-apps-suggest-an-app-title": "Suggest an app",
   "page-apps-suggest-an-app-description": "We're always looking for new apps to add to our list. If you know of an app that you think should be on the list, please let us know.",
-  "page-apps-suggest-an-app-button": "Suggest an app"
+  "page-apps-suggest-an-app-button": "Suggest an app",
+  "page-apps-filter-by": "Filter by",
+  "page-apps-filter-all": "All",
+  "page-apps-showing": "Showing"
 }
\ No newline at end of file

From 20c879eb5616ea0c7be605a8ca280530eb5cd611 Mon Sep 17 00:00:00 2001
From: Corwin Smith <cssmittys@gmail.com>
Date: Tue, 19 Aug 2025 11:10:31 -0600
Subject: [PATCH 3/3] setup /apps/{application} for translation

---
 app/[locale]/apps/[application]/page.tsx | 43 +++++++++++++++++-------
 src/intl/en/page-apps.json               | 13 ++++++-
 2 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/app/[locale]/apps/[application]/page.tsx b/app/[locale]/apps/[application]/page.tsx
index fafacdf0c81..96da9efc563 100644
--- a/app/[locale]/apps/[application]/page.tsx
+++ b/app/[locale]/apps/[application]/page.tsx
@@ -1,6 +1,10 @@
 import { pick } from "lodash"
 import { notFound } from "next/navigation"
-import { getMessages, setRequestLocale } from "next-intl/server"
+import {
+  getMessages,
+  getTranslations,
+  setRequestLocale,
+} from "next-intl/server"
 
 import { ChainName } from "@/lib/types"
 
@@ -58,6 +62,9 @@ const Page = async ({
   const { locale, application } = await params
   setRequestLocale(locale)
 
+  // Get translations
+  const t = await getTranslations({ locale, namespace: "page-apps" })
+
   // Get i18n messages
   const allMessages = await getMessages({ locale })
   const requiredNamespaces = getRequiredNamespacesForPage("/apps")
@@ -115,9 +122,9 @@ const Page = async ({
     const diffInMs = now.getTime() - date.getTime()
     const diffInDays = Math.floor(diffInMs / (1000 * 60 * 60 * 24))
 
-    if (diffInDays === 0) return "Today"
-    if (diffInDays === 1) return "1 day ago"
-    return `${diffInDays} days ago`
+    if (diffInDays === 0) return t("page-apps-today")
+    if (diffInDays === 1) return t("page-apps-one-day-ago")
+    return t("page-apps-days-ago", { days: diffInDays })
   }
 
   return (
@@ -194,7 +201,7 @@ const Page = async ({
                       eventName: "visit",
                     }}
                   >
-                    Visit {app.name}
+                    {t("page-apps-visit-app", { appName: app.name })}
                   </ButtonLink>
                   <div className="flex flex-row justify-between gap-4">
                     <div className="flex h-fit flex-row flex-wrap gap-4">
@@ -250,7 +257,9 @@ const Page = async ({
                     {nextApp && (
                       <LinkBox className="group flex flex-row items-center rounded-lg hover:bg-background-highlight sm:hidden">
                         <div className="mr-2 flex flex-col text-right">
-                          <p className="text-sm text-gray-500">See next</p>
+                          <p className="text-sm text-gray-500">
+                            {t("page-apps-see-next")}
+                          </p>
                           <p className="text-primary group-hover:text-primary-hover">
                             {nextApp.name}
                           </p>
@@ -275,7 +284,9 @@ const Page = async ({
             {nextApp && (
               <LinkBox className="group hidden flex-row items-center rounded-lg p-3 hover:bg-background-highlight sm:flex">
                 <div className="mr-2 flex flex-col text-right">
-                  <p className="text-nowrap text-sm text-gray-500">See next</p>
+                  <p className="text-nowrap text-sm text-gray-500">
+                    {t("page-apps-see-next")}
+                  </p>
                   <p className="text-primary group-hover:text-primary-hover">
                     {nextApp.name}
                   </p>
@@ -299,25 +310,31 @@ const Page = async ({
         <div className="grid grid-cols-1 grid-rows-[auto_1fr] gap-10 bg-background-highlight px-4 py-10 md:grid-cols-[minmax(0,1fr)_auto] md:px-8">
           <p className="max-w-3xl">{app.description}</p>
           <div className="flex h-fit w-full flex-col gap-4 rounded-2xl border bg-background p-8 md:row-span-2 md:w-44">
-            <h3 className="text-lg">Info</h3>
+            <h3 className="text-lg">{t("page-apps-info-title")}</h3>
             <div>
-              <p className="text-sm text-body-medium">Founded</p>
+              <p className="text-sm text-body-medium">
+                {t("page-apps-info-founded")}
+              </p>
               <p className="text-sm">
                 {new Date(app.dateOfLaunch).getFullYear()}
               </p>
             </div>
             <div>
-              <p className="text-sm text-body-medium">Creator</p>
+              <p className="text-sm text-body-medium">
+                {t("page-apps-info-creator")}
+              </p>
               <p className="text-sm">{app.parentCompany}</p>
             </div>
             <div>
-              <p className="text-sm text-body-medium">Last updated</p>
+              <p className="text-sm text-body-medium">
+                {t("page-apps-info-last-updated")}
+              </p>
               <p className="text-sm">{getTimeAgo(app.lastUpdated)}</p>
             </div>
           </div>
           {app.screenshots.length > 0 && (
             <div className="flex flex-col gap-4">
-              <h3 className="text-2xl">Gallery</h3>
+              <h3 className="text-2xl">{t("page-apps-gallery-title")}</h3>
               <ScreenshotSwiper
                 screenshots={app.screenshots}
                 appName={app.name}
@@ -329,7 +346,7 @@ const Page = async ({
         {relatedApps.length > 0 && (
           <div className="flex flex-col px-4 py-10 md:px-8">
             <div className="flex w-full flex-col items-center gap-8 rounded-2xl bg-gradient-to-t from-blue-500/20 from-10% to-blue-500/5 to-90% p-12 px-4 md:px-8">
-              <h2>More apps like this</h2>
+              <h2>{t("page-apps-more-apps-like-this")}</h2>
               <div className="flex w-full flex-col gap-4 lg:flex-row">
                 {relatedApps.map((relatedApp) => (
                   <div
diff --git a/src/intl/en/page-apps.json b/src/intl/en/page-apps.json
index 19d4bdaf218..5dd4360258c 100644
--- a/src/intl/en/page-apps.json
+++ b/src/intl/en/page-apps.json
@@ -56,5 +56,16 @@
   "page-apps-suggest-an-app-button": "Suggest an app",
   "page-apps-filter-by": "Filter by",
   "page-apps-filter-all": "All",
-  "page-apps-showing": "Showing"
+  "page-apps-showing": "Showing",
+  "page-apps-visit-app": "Visit {appName}",
+  "page-apps-see-next": "See next",
+  "page-apps-info-title": "Info",
+  "page-apps-info-founded": "Founded",
+  "page-apps-info-creator": "Creator",
+  "page-apps-info-last-updated": "Last updated",
+  "page-apps-gallery-title": "Gallery",
+  "page-apps-more-apps-like-this": "More apps like this",
+  "page-apps-today": "Today",
+  "page-apps-one-day-ago": "1 day ago",
+  "page-apps-days-ago": "{days} days ago"
 }
\ No newline at end of file