update networks page with translations

Author: pettinarip

app/[locale]/layer-2/networks/_components/networks.tsx

@@ -7,20 +7,21 @@ import MainArticle from "@/components/MainArticle"
 import NetworkMaturity from "@/components/NetworkMaturity"
 import { ButtonLink } from "@/components/ui/buttons/Button"
 
+import useTranslation from "@/hooks/useTranslation"
 import { usePathname } from "@/i18n/routing"
 import Callout2Image from "@/public/images/layer-2/layer-2-walking.png"
 import Callout1Image from "@/public/images/man-and-dog-playing.png"
 
 const Layer2Networks = ({ layer2Data, locale, mainnetData }) => {
   const pathname = usePathname()
+  const { t } = useTranslation(["page-layer-2-networks", "common"])
 
   const heroProps: ContentHeroProps = {
     breadcrumbs: { slug: pathname, startDepth: 1 },
     heroImg: "/images/layer-2/learn-hero.png",
     blurDataURL: "/images/layer-2/learn-hero.png",
-    title: "Explore networks",
-    description:
-      "Using Ethereum today means interacting with hundreds of different networks and apps. All backed by Ethereum as the foundational backbone.",
+    title: t("common:nav-networks-explore-networks-label"),
+    description: t("page-layer-2-networks-hero-description"),
   }
 
   return (
@@ -35,23 +36,22 @@ const Layer2Networks = ({ layer2Data, locale, mainnetData }) => {
 
       <div id="more-advanced-cta" className="w-full px-8 py-9">
         <div className="flex flex-col gap-8 bg-main-gradient px-12 py-14">
-          <h3>Looking for more advanced overview?</h3>
+          <h3>{t("page-layer-2-networks-more-advanced-title")}</h3>
           <div className="flex max-w-[768px] flex-col gap-8">
             <p>
-              Many of the projects are{" "}
-              <strong>still young and somewhat experimental.</strong>
-            </p>
-            <p>
-              For more information on the technology, risks and trust
-              assumptions of these networks, we recommend checking out L2BEAT,
-              which provides a comprehensive risk assessment framework of each
-              project and growthepie for general data analysis.
+              {t("page-layer-2-networks-more-advanced-descripton-1")}{" "}
+              <strong>
+                {t("page-layer-2-networks-more-advanced-descripton-2")}
+              </strong>
             </p>
+            <p>{t("page-layer-2-networks-more-advanced-descripton-3")}</p>
           </div>
           <div className="flex flex-col gap-6 sm:flex-row">
-            <ButtonLink href="https://l2beat.com">Visit l2beat.com</ButtonLink>
+            <ButtonLink href="https://l2beat.com">
+              {t("page-layer-2-networks-more-advanced-link-1")}
+            </ButtonLink>
             <ButtonLink href="https://growthepie.xyz">
-              Visit growthepie.xyz
+              {t("page-layer-2-networks-more-advanced-link-2")}
             </ButtonLink>
           </div>
         </div>
@@ -65,10 +65,8 @@ const Layer2Networks = ({ layer2Data, locale, mainnetData }) => {
       >
         <Callout
           image={Callout1Image}
-          title={"What are the benefits?"}
-          description={
-            "Ethereum's strength and security provides a platform for other networks to build upon."
-          }
+          title={t("page-layer-2-networks-callout-1-title")}
+          description={t("page-layer-2-networks-callout-1-description")}
         >
           <div>
             <ButtonLink
@@ -79,16 +77,14 @@ const Layer2Networks = ({ layer2Data, locale, mainnetData }) => {
                 eventName: "bottom_hub",
               }}
             >
-              Learn more
+              {t("common:learn-more")}
             </ButtonLink>
           </div>
         </Callout>
         <Callout
           image={Callout2Image}
-          title={"Interested in more details?"}
-          description={
-            "Curious about the technology and reasons for this scaling approach? Learn more about the thinking and different technological approaches."
-          }
+          title={t("page-layer-2-networks-callout-2-title")}
+          description={t("page-layer-2-networks-callout-2-description")}
         >
           <div>
             <ButtonLink
@@ -99,7 +95,7 @@ const Layer2Networks = ({ layer2Data, locale, mainnetData }) => {
                 eventName: "bottom_learn",
               }}
             >
-              Learn more
+              {t("common:learn-more")}
             </ButtonLink>
           </div>
         </Callout>

app/[locale]/layer-2/networks/page.tsx

@@ -1,4 +1,5 @@
 import pick from "lodash.pick"
+import { getTranslations } from "next-intl/dist/types/src/server/react-server"
 
 import { Lang } from "@/lib/types"
 
@@ -128,12 +129,16 @@ export async function generateMetadata({
 }) {
   const { locale } = await params
 
+  const t = await getTranslations({
+    locale,
+    namespace: "page-layer-2-networks",
+  })
+
   return await getMetadata({
     locale,
     slug: ["layer-2", "networks"],
-    title: "Ethereum Layer 2:Explore networks",
-    description:
-      "Using Ethereum today means interacting with hundreds of different networks and apps. All backed by Ethereum as the foundational backbone.",
+    title: t("page-layer-2-networks-meta-title"),
+    description: t("page-layer-2-networks-hero-description"),
     image: "/images/layer-2/learn-hero.png",
   })
 }