Introduce multi-language

app/[lang]/about/page.tsx

@@ -0,0 +1,120 @@
+import React from "react"
+import Image from "next/image"
+
+import { Accordion } from "@/components/ui/accordion"
+import { useTranslation } from "@/app/i18n"
+
+interface PrincipleContentProps {
+  image: string
+  children: React.ReactNode
+  width?: number
+  height?: number
+}
+
+const PrincipleContent = ({
+  image,
+  children,
+  width = 300,
+  height = 300,
+}: PrincipleContentProps) => {
+  return (
+    <div className="grid grid-cols-1 gap-6 py-4 md:mb-8 md:grid-cols-2 md:items-center md:gap-2 md:py-6">
+      <div className="m-auto py-6 md:py-0">
+        <Image
+          width={width}
+          height={height}
+          src={image}
+          alt="principle image"
+        />
+      </div>
+      <span className="flex flex-col gap-4 break-words font-sans text-lg font-normal leading-[150%]">
+        {children}
+      </span>
+    </div>
+  )
+}
+
+const PrincipleImageSizes: Record<string, { width: number; height: number }> = {
+  "principle-1": {
+    width: 126,
+    height: 114,
+  },
+  "principle-2": {
+    width: 176,
+    height: 260,
+  },
+  "principle-3": {
+    width: 236,
+    height: 260,
+  },
+  "principle-4": {
+    width: 238,
+    height: 260,
+  },
+}
+
+export default async function AboutPage({ params: { lang } }: any) {
+  const { t } = await useTranslation(lang, "about-page")
+
+  const principles: any[] =
+    t("principles", {
+      returnObjects: true,
+    }) ?? []
+
+  return (
+    <div className="bg-anakiwa-200">
+      <div className="bg-second-gradient">
+        <div className="container mx-auto grid grid-cols-1 gap-16 py-10 lg:grid-cols-[1fr_300px] lg:gap-2 lg:py-20">
+          <div className="flex flex-col gap-8 lg:w-4/5">
+            <h6 className="break-words font-display text-4xl font-bold text-tuatara-950 md:py-4 md:text-5xl">
+              {t("title")}
+            </h6>
+            <span className="font-sans text-base font-normal leading-[27px] text-tuatara-950">
+              {t("description")}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-4 px-8 py-16 md:px-32 md:py-24">
+        <div className="mx-auto pb-4">
+          <Image
+            width={280}
+            height={280}
+            src="/logos/pse-logo-bg.svg"
+            alt="pse logo"
+          />
+        </div>
+        <h6 className="font-display text-4xl">{t("our-principles-title")}</h6>
+        <Accordion
+          type="multiple"
+          items={[
+            ...principles?.map((principle: any, index: number) => {
+              const imageIndex = index + 1
+              const { width, height } =
+                PrincipleImageSizes[`principle-${imageIndex}`] ?? {}
+
+              return {
+                label: principle?.title,
+                value: imageIndex.toString(),
+                children: (
+                  <PrincipleContent
+                    width={width}
+                    height={height}
+                    image={`/logos/principle-${imageIndex}.svg`}
+                  >
+                    {principle.description?.map(
+                      (description: string, index: number) => {
+                        return <p key={index}>{description}</p>
+                      }
+                    )}
+                  </PrincipleContent>
+                ),
+              }
+            }),
+          ]}
+        />
+      </div>
+    </div>
+  )
+}

app/[lang]/layout.tsx

@@ -0,0 +1,86 @@
+import "@/styles/globals.css"
+import { Metadata } from "next"
+import Script from "next/script"
+
+import { siteConfig } from "@/config/site"
+import { fontDisplay, fontSans } from "@/lib/fonts"
+import { SiteFooter } from "@/components/site-footer"
+import { SiteHeader } from "@/components/site-header"
+import { TailwindIndicator } from "@/components/tailwind-indicator"
+
+import { fallbackLng, languages } from "../i18n/settings"
+
+export async function generateStaticParams() {
+  return languages.map((language) => ({ language }))
+}
+
+export const metadata: Metadata = {
+  metadataBase: new URL("https://appliedzkp.org"),
+  title: {
+    default: siteConfig.name,
+    template: `%s - ${siteConfig.name}`,
+  },
+  description: siteConfig.description,
+  themeColor: [
+    { media: "(prefers-color-scheme: light)", color: "white" },
+    { media: "(prefers-color-scheme: dark)", color: "black" },
+  ],
+  icons: {
+    icon: "/favicon.svg",
+    shortcut: "/favicon.svg",
+    apple: "/apple-touch-icon.png",
+  },
+  openGraph: {
+    images: [
+      {
+        url: "/og-image.png",
+        width: 1200,
+        height: 630,
+      },
+    ],
+  },
+}
+
+interface RootLayoutProps {
+  children: React.ReactNode
+  params: any
+}
+
+export default function RootLayout({ children, params }: RootLayoutProps) {
+  const lang = params.lang ?? fallbackLng
+
+  return (
+    <>
+      <html
+        lang={lang}
+        className={`${fontSans.variable} ${fontDisplay.variable}`}
+        suppressHydrationWarning
+      >
+        <Script id="matomo-tracking" strategy="afterInteractive">
+          {`
+             var _paq = window._paq = window._paq || [];
+             /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+             _paq.push(['trackPageView']);
+             _paq.push(['enableLinkTracking']);
+             (function() {
+               var u="https://psedev.matomo.cloud/";
+               _paq.push(['setTrackerUrl', u+'matomo.php']);
+               _paq.push(['setSiteId', '1']);
+               var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+               g.async=true; g.src='//cdn.matomo.cloud/psedev.matomo.cloud/matomo.js'; s.parentNode.insertBefore(g,s);
+             })();
+          `}
+        </Script>
+        <head />
+        <body className={"min-h-screen bg-background antialiased"}>
+          <div className="relative flex min-h-screen flex-col">
+            <SiteHeader lang={lang} />
+            <div className="flex-1">{children}</div>
+            <SiteFooter lang={lang} />
+          </div>
+          <TailwindIndicator />
+        </body>
+      </html>
+    </>
+  )
+}

app/page.tsx → app/[lang]/page.tsx

@@ -2,34 +2,44 @@
 
 import Image from "next/image"
 import Link from "next/link"
+import { useParams } from "next/navigation"
 import PSELogo from "@/public/icons/archstar.webp"
 import ArrowRightVector from "@/public/icons/arrow-right.svg"
 import { motion } from "framer-motion"
 
 import { siteConfig } from "@/config/site"
-import News from "@/components/sections/News"
-import WhatWeDo from "@/components/sections/WhatWeDo"
+import { News } from "@/components/sections/News"
+import { WhatWeDo } from "@/components/sections/WhatWeDo"
 import { ArrowRightUp } from "@/components/svgs/arrows"
 
-export default function IndexPage() {
+import { useTranslation } from "../i18n/client"
+import { LocaleTypes } from "../i18n/settings"
+
+export default function IndexPage({ params: { lang } }: any) {
+  const { t } = useTranslation(lang, "homepage")
+  const { t: ct } = useTranslation(lang, "common")
+
   return (
     <section className="flex flex-col bg-main-gradient">
       <div className="flex w-full flex-col justify-between gap-5 p-7 md:flex-row md:px-20">
         <div className="flex w-full flex-col justify-center gap-6 md:w-[660px]">
           <h6 className="font-sans text-sm uppercase tracking-widest text-orange xl:text-lg">
-            Privacy + Scaling Explorations
+            {t("headerTitle")}
           </h6>
           <motion.h1
             className="text-4xl font-bold lg:text-5xl xl:text-7xl"
             initial={{ y: 16, opacity: 0 }}
             animate={{ y: 0, opacity: 1 }}
             transition={{ duration: 0.8, cubicBezier: "easeOut" }}
           >
-            Programmable cryptography for people like you
+            {t("headerSubtitle")}
           </motion.h1>
-          <Link href={"/projects"} className="group flex items-center gap-2">
+          <Link
+            href={`${lang}/projects`}
+            className="group flex items-center gap-2"
+          >
             <span className="border-b-2 border-orange text-base font-medium uppercase">
-              Explore Project Library
+              {ct("exploreProjectLibrary")}
             </span>
             <Image
               src={ArrowRightVector}
@@ -45,34 +55,27 @@ export default function IndexPage() {
         </div>
       </div>
 
-      <News />
+      <News lang={lang} />
 
       <div className="bg-radial-gradient flex flex-col gap-32 px-6 py-24 md:px-12">
         <section className="relative grid w-full grid-cols-1 gap-10 overflow-hidden lg:grid-cols-3 lg:gap-0">
           <h6 className="flex w-full justify-start text-xl uppercase text-orange lg:justify-center">
-            Who we are
+            {t("whoWeAre")}
           </h6>
           <div className="col-span-0 flex flex-col lg:col-span-1">
-            <h3 className="text-3xl font-bold">
-              PSE is a research lab building free tools that expand the world of
-              cryptography.
-            </h3>
+            <h3 className="text-3xl font-bold">{t("whoWeAreDescription")}</h3>
           </div>
         </section>
 
-        <WhatWeDo />
+        <WhatWeDo lang={lang} />
 
         <section className="relative grid w-full grid-cols-1 gap-10 overflow-hidden lg:grid-cols-3 lg:gap-0">
           <h6 className="flex w-full justify-start text-xl uppercase text-orange lg:justify-center">
-            How To Plug In
+            {t("howToPlugIn")}
           </h6>
           <div className="col-span-0 flex flex-col lg:col-span-1">
             <p className="max-w-2xl xl:text-lg">
-              PSE is a growing team of developers, researchers, designers,
-              communicators, artists, and organizers. There are so many ways to
-              get involved- you can try out our apps, build with our tools,
-              contribute to projects, or join our team. We’d love to hear from
-              you!
+              {t("howToPlugInDescription")}
             </p>
             <div className="p-3"></div>
             <Link
@@ -83,7 +86,7 @@ export default function IndexPage() {
               className="flex items-center gap-2"
             >
               <div className="border-b-2 border-orange text-base font-medium uppercase">
-                Say Hi On Discord
+                {t("sayHiToDiscord")}
               </div>
               <ArrowRightUp color="black" />
             </Link>