/10years translation setup

app/[locale]/10years/_components/AdoptionSwiper.tsx

@@ -1,6 +1,10 @@
 "use client"
 
+import type { StaticImageData } from "next/image"
+import { useTranslations } from "next-intl"
+
 import { Image } from "@/components/Image"
+import Translation from "@/components/Translation"
 import { ButtonLink } from "@/components/ui/buttons/Button"
 import {
   Swiper,
@@ -11,38 +15,50 @@ import {
 
 import { cn } from "@/lib/utils/cn"
 
-import { AdoptionCard } from "./types"
-
 type AdoptionCardProps = {
-  adoptionCards: AdoptionCard[]
+  adoptionCards: { image: StaticImageData; href: string }[]
   adoptionStyles: string[]
 }
+
 const AdoptionSwiper = ({
   adoptionCards,
   adoptionStyles,
 }: AdoptionCardProps) => {
+  const t = useTranslations("page-10-year-anniversary")
+
   return (
     <div className="flex flex-1 flex-col gap-6 md:hidden">
       <SwiperContainer className="mx-auto w-full max-w-[550px]">
         <Swiper spaceBetween={32}>
-          {adoptionCards.map((card, index) => (
-            <SwiperSlide key={card.title}>
-              <div
-                className={cn("h-full rounded-2xl p-8", adoptionStyles[index])}
-              >
-                <Image
-                  src={card.image}
-                  alt={card.title}
-                  className="mx-auto mb-4 h-36 object-contain"
-                />
-                <h3 className="mb-4 text-2xl font-bold">{card.title}</h3>
-                {card.description}
-                <ButtonLink href={card.href} hideArrow variant="outline">
-                  {card.linkText}
-                </ButtonLink>
-              </div>
-            </SwiperSlide>
-          ))}
+          {adoptionCards.map((card, index) => {
+            const title = t(`page-10-year-adoption-card-${index + 1}-title`)
+            return (
+              <SwiperSlide key={title}>
+                <div
+                  className={cn(
+                    "h-full rounded-2xl p-8",
+                    adoptionStyles[index]
+                  )}
+                >
+                  <Image
+                    src={card.image}
+                    alt={title}
+                    className="mx-auto mb-4 h-36 object-contain"
+                  />
+                  <h3 className="mb-4 text-2xl font-bold">{title}</h3>
+                  <p className="mb-8">
+                    <Translation
+                      id={`page-10-year-adoption-card-${index + 1}-description`}
+                      ns="page-10-year-anniversary"
+                    />
+                  </p>
+                  <ButtonLink href={card.href} hideArrow variant="outline">
+                    {t(`page-10-year-adoption-card-${index + 1}-link-text`)}
+                  </ButtonLink>
+                </div>
+              </SwiperSlide>
+            )
+          })}
           <SwiperNavigation />
         </Swiper>
       </SwiperContainer>

app/[locale]/10years/_components/CountDown.tsx

@@ -4,11 +4,14 @@ import { useEffect, useState } from "react"
 
 import { cn } from "@/lib/utils/cn"
 
+import { useTranslation } from "@/hooks/useTranslation"
+
 interface CountDownProps {
   className?: string
 }
 
 const CountDown = ({ className }: CountDownProps) => {
+  const { t } = useTranslation("page-10-year-anniversary")
   const [timeLeft, setTimeLeft] = useState({
     days: 0,
     hours: 0,
@@ -48,7 +51,7 @@ const CountDown = ({ className }: CountDownProps) => {
   if (isExpired) {
     return (
       <div className="text-center text-2xl font-bold">
-        Ethereum is 10 years old! 🚀
+        {t("page-10-year-countdown-expired")}
       </div>
     )
   }
@@ -64,7 +67,9 @@ const CountDown = ({ className }: CountDownProps) => {
         <div className="font-mono text-4xl font-bold text-accent-a">
           {timeLeft.days}
         </div>
-        <div className="font-mono text-xs text-accent-a">days</div>
+        <div className="font-mono text-xs text-accent-a">
+          {t("page-10-year-countdown-days")}
+        </div>
       </div>
       <div
         className={cn(
@@ -75,7 +80,9 @@ const CountDown = ({ className }: CountDownProps) => {
         <div className="font-mono text-4xl font-bold text-accent-a">
           {timeLeft.hours}
         </div>
-        <div className="font-mono text-xs text-accent-a">hours</div>
+        <div className="font-mono text-xs text-accent-a">
+          {t("page-10-year-countdown-hours")}
+        </div>
       </div>
       <div
         className={cn(
@@ -86,7 +93,9 @@ const CountDown = ({ className }: CountDownProps) => {
         <div className="font-mono text-4xl font-bold text-accent-a">
           {timeLeft.minutes}
         </div>
-        <div className="font-mono text-xs text-accent-a">minutes</div>
+        <div className="font-mono text-xs text-accent-a">
+          {t("page-10-year-countdown-minutes")}
+        </div>
       </div>
       <div
         className={cn(
@@ -97,7 +106,9 @@ const CountDown = ({ className }: CountDownProps) => {
         <div className="font-mono text-4xl font-bold text-accent-a">
           {timeLeft.seconds}
         </div>
-        <div className="font-mono text-xs text-accent-a">seconds</div>
+        <div className="font-mono text-xs text-accent-a">
+          {t("page-10-year-countdown-seconds")}
+        </div>
       </div>
     </div>
   )

app/[locale]/10years/_components/InnovationSwiper.tsx

@@ -10,7 +10,11 @@ import {
 
 import { innovationCards } from "./data"
 
+import { useTranslation } from "@/hooks/useTranslation"
+
 export default function InnovationSwiper() {
+  const { t } = useTranslation("page-10-year-anniversary")
+
   return (
     <div className="w-[100%]">
       <SwiperContainer className="mx-auto w-full max-w-[550px] xl:max-w-[700px]">
@@ -25,18 +29,23 @@ export default function InnovationSwiper() {
             >
               <Image
                 src={card.image}
-                alt={card.title}
+                alt={t(`page-10-year-innovation-card-${index + 1}-title`)}
                 className="mx-auto my-4 h-auto max-h-48 object-contain"
               />
               <div>
-                <h3 className="mb-4">{card.title}</h3>
-                <p className="text-body-secondary mb-4">{card.date}</p>
-              </div>
-              {card.description.map((description, index) => (
-                <p key={index} className="mb-4">
-                  {description}
+                <h3 className="mb-4">
+                  {t(`page-10-year-innovation-card-${index + 1}-title`)}
+                </h3>
+                <p className="text-body-secondary mb-4">
+                  {t(`page-10-year-innovation-card-${index + 1}-date`)}
                 </p>
-              ))}
+              </div>
+              <p className="mb-4">
+                {t(`page-10-year-innovation-card-${index + 1}-description-1`)}
+              </p>
+              <p className="mb-4">
+                {t(`page-10-year-innovation-card-${index + 1}-description-2`)}
+              </p>
             </SwiperSlide>
           ))}
           <SwiperNavigation />

app/[locale]/10years/_components/Stories.tsx

@@ -7,6 +7,8 @@ import { Button, ButtonLink } from "@/components/ui/buttons/Button"
 
 import { cn } from "@/lib/utils/cn"
 
+import { useTranslation } from "@/hooks/useTranslation"
+
 type Story = {
   name: string
   storyEnglish: string
@@ -23,6 +25,7 @@ type StoriesProps = {
 const STORIES_SHOWN = 5
 
 const Stories = ({ stories }: StoriesProps) => {
+  const { t } = useTranslation("page-10-year-anniversary")
   const [flippedCards, setFlippedCards] = useState<Record<number, boolean>>({})
   const [expandedStories, setExpandedStories] = useState<
     Record<number, boolean>
@@ -119,15 +122,15 @@ const Stories = ({ stories }: StoriesProps) => {
                               eventCategory: "10-year-anniversary",
                             }}
                           >
-                            Read more
+                            {t("page-10-year-stories-read-more")}
                           </Button>
                         </div>
                       )}
                     </div>
                     {story.storyOriginal && (
                       <div>
                         <p className="text-xs text-body-medium">
-                          English translation
+                          {t("page-10-year-stories-english-translation")}
                         </p>
                         <Button
                           onClick={() => handleFlip(index)}
@@ -139,7 +142,7 @@ const Stories = ({ stories }: StoriesProps) => {
                             eventCategory: "10-year-anniversary",
                           }}
                         >
-                          Show original
+                          {t("page-10-year-stories-show-original")}
                         </Button>
                       </div>
                     )}
@@ -198,14 +201,14 @@ const Stories = ({ stories }: StoriesProps) => {
                               eventCategory: "10-year-anniversary",
                             }}
                           >
-                            Read more
+                            {t("page-10-year-stories-read-more")}
                           </Button>
                         </div>
                       )}
                     </div>
                     <div>
                       <p className="text-xs text-body-medium">
-                        Original language
+                        {t("page-10-year-stories-original-language")}
                       </p>
                       <Button
                         onClick={() => handleFlip(index)}
@@ -217,7 +220,7 @@ const Stories = ({ stories }: StoriesProps) => {
                           eventCategory: "10-year-anniversary",
                         }}
                       >
-                        Show English
+                        {t("page-10-year-stories-show-english")}
                       </Button>
                     </div>
                     <p className="mt-2 text-sm text-body-medium">
@@ -246,7 +249,7 @@ const Stories = ({ stories }: StoriesProps) => {
             }}
             variant="outline"
           >
-            Show more
+            {t("page-10-year-stories-show-more")}
           </Button>
         </div>
       )}

app/[locale]/10years/_components/TenYearGlobe.tsx

@@ -13,6 +13,7 @@ import countries from "./countries.json"
 
 import { useBreakpointValue } from "@/hooks/useBreakpointValue"
 import { usePrefersReducedMotion } from "@/hooks/usePrefersReducedMotion"
+import { useTranslation } from "@/hooks/useTranslation"
 import EthLogo from "@/public/images/assets/eth-glyph-colored.png"
 
 // Define a type for event data
@@ -40,6 +41,7 @@ interface ExtendedOrbitControls extends OrbitControls {
 }
 
 const TenYearGlobe = ({ events }: { events: EventData[] }) => {
+  const { t } = useTranslation("page-10-year-anniversary")
   const globeRef = useRef<GlobeMethods>()
   const globeContainerRef = useRef<HTMLDivElement>(null)
   const { resolvedTheme } = useTheme()
@@ -272,7 +274,7 @@ const TenYearGlobe = ({ events }: { events: EventData[] }) => {
                 hideArrow
                 className="no-underline"
               >
-                Go to event
+                {t("page-10-year-globe-go-to-event")}
               </Link>
             )}
           </div>