Implemented i18n for internationalization and refactor index for localization support

lint Fix Hero as tag types Fix build warning regarding i18n Update package.json and package-lock.json Revert package-lock.json Add package-lock, fix build Pre-commit Fix default export in favour of named export Refactor cta buttons to use react-icons Remove unused props from CircleBackground
2026-07-01 16:50:12 +08:00 · 2023-01-16 19:56:44 +00:00
parent 8b30c7b68e
commit d10f691eeb
13 changed files with 375 additions and 200 deletions
@@ -0,0 +1,6 @@
+module.exports = {
+  i18n: {
+    defaultLocale: "en",
+    locales: ["en"],
+  },
+};
@@ -1,4 +1,6 @@
 /** @type {import('next').NextConfig} */
+const { i18n } = require("./next-i18next.config");
+
 const nextConfig = {
  output: "standalone",
  reactStrictMode: true,
@@ -16,6 +18,7 @@ const nextConfig = {
    */
    // scrollRestoration: true,
  },
+  i18n,
 };

 module.exports = nextConfig;
@@ -33,6 +33,7 @@
        "install": "^0.13.0",
        "next": "13.0.6",
        "next-auth": "^4.18.6",
+        "next-i18next": "^13.0.3",
        "nodemailer": "^6.8.0",
        "npm": "^9.2.0",
        "postcss-focus-visible": "^7.1.0",
@@ -40,6 +41,7 @@
        "react-dom": "18.2.0",
        "react-feature-flags": "^1.0.0",
        "react-hook-form": "^7.42.1",
+        "react-i18next": "^12.1.4",
        "react-icons": "^4.7.1",
        "react-table": "^7.8.0",
        "sharp": "^0.31.3",
@@ -12653,6 +12655,15 @@
        "@types/unist": "*"
      }
    },
+    "node_modules/@types/hoist-non-react-statics": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
+      "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
+      "dependencies": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
    "node_modules/@types/html-minifier-terser": {
      "version": "6.1.0",
      "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@@ -12859,8 +12870,7 @@
    "node_modules/@types/prop-types": {
      "version": "15.7.5",
      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
-      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
-      "devOptional": true
+      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
    },
    "node_modules/@types/qs": {
      "version": "6.9.7",
@@ -12872,7 +12882,6 @@
      "version": "18.0.26",
      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.26.tgz",
      "integrity": "sha512-hCR3PJQsAIXyxhTNSiDFY//LhnMZWpNNr5etoCqx/iUfGc5gXWtQR2Phl908jVR6uPXacojQWTg4qRpkxTuGug==",
-      "devOptional": true,
      "dependencies": {
        "@types/prop-types": "*",
        "@types/scheduler": "*",
@@ -12891,8 +12900,7 @@
    "node_modules/@types/scheduler": {
      "version": "0.16.2",
      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
-      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
-      "devOptional": true
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
    },
    "node_modules/@types/semver": {
      "version": "7.3.13",
@@ -16550,7 +16558,6 @@
      "version": "3.27.1",
      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.27.1.tgz",
      "integrity": "sha512-GutwJLBChfGCpwwhbYoqfv03LAfmiz7e7D/BNxzeMxwQf10GRSzqiOjx7AmtEk+heiD/JWmBuyBPgFtx0Sg1ww==",
-      "dev": true,
      "hasInstallScript": true,
      "funding": {
        "type": "opencollective",
@@ -21304,6 +21311,14 @@
        "node": ">= 12"
      }
    },
+    "node_modules/html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "dependencies": {
+        "void-elements": "3.1.0"
+      }
+    },
    "node_modules/html-tags": {
      "version": "3.2.0",
      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.2.0.tgz",
@@ -21446,6 +21461,34 @@
      "integrity": "sha512-iimHkHPfIAQ8zCDQLgn08pRqSVioyWvnGfaQ8gond2wf7Jq2jJ+24ykmnRyiz3fIldcn4oUuQXpjqKLhSVR7lw==",
      "dev": true
    },
+    "node_modules/i18next": {
+      "version": "22.4.9",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-22.4.9.tgz",
+      "integrity": "sha512-8gWMmUz460KJDQp/ob3MNUX84cVuDRY9PLFPnV8d+Qezz/6dkjxwOaH70xjrCNDO+JrUL25iXfAIN9wUkInNZw==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://locize.com"
+        },
+        {
+          "type": "individual",
+          "url": "https://locize.com/i18next.html"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        }
+      ],
+      "peer": true,
+      "dependencies": {
+        "@babel/runtime": "^7.20.6"
+      }
+    },
+    "node_modules/i18next-fs-backend": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/i18next-fs-backend/-/i18next-fs-backend-2.1.1.tgz",
+      "integrity": "sha512-FTnj+UmNgT3YRml5ruRv0jMZDG7odOL/OP5PF5mOqvXud2vHrPOOs68Zdk6iqzL47cnnM0ZVkK2BAvpFeDJToA=="
+    },
    "node_modules/iconv-lite": {
      "version": "0.4.24",
      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -27523,6 +27566,45 @@
        }
      }
    },
+    "node_modules/next-i18next": {
+      "version": "13.0.3",
+      "resolved": "https://registry.npmjs.org/next-i18next/-/next-i18next-13.0.3.tgz",
+      "integrity": "sha512-7AA8J6WbkxRBtSf1+97LSAE7btxWZHsBIJEJ3FuTSBgYtpRiO5NGjcb8XbNAlz6yGU0TtS+yZE+/Wu83KhIT1Q==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://locize.com/i18next.html"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        },
+        {
+          "type": "individual",
+          "url": "https://locize.com"
+        },
+        {
+          "type": "individual",
+          "url": "https://github.com/belgattitude"
+        }
+      ],
+      "dependencies": {
+        "@babel/runtime": "^7.20.6",
+        "@types/hoist-non-react-statics": "^3.3.1",
+        "core-js": "^3",
+        "hoist-non-react-statics": "^3.3.2",
+        "i18next-fs-backend": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "i18next": "^22.0.6",
+        "next": ">= 12.0.0",
+        "react": ">= 17.0.2",
+        "react-i18next": "^12.1.1"
+      }
+    },
    "node_modules/next/node_modules/postcss": {
      "version": "8.4.14",
      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
@@ -32497,6 +32579,27 @@
        "react": "^16.8.0 || ^17 || ^18"
      }
    },
+    "node_modules/react-i18next": {
+      "version": "12.1.4",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-12.1.4.tgz",
+      "integrity": "sha512-XQND7jYtgM7ht5PH3yIZljCRpAMTlH/zmngM9ZjToqa+0BR6xuu8c7QF0WIIOEjcMTB2S3iOfpN/xG/ZrAnO6g==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.6",
+        "html-parse-stringify": "^3.0.1"
+      },
+      "peerDependencies": {
+        "i18next": ">= 19.0.0",
+        "react": ">= 16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/react-icons": {
      "version": "4.7.1",
      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.7.1.tgz",
@@ -36507,6 +36610,14 @@
      "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==",
      "dev": true
    },
+    "node_modules/void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/w3c-xmlserializer": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",
@@ -46861,6 +46972,15 @@
        "@types/unist": "*"
      }
    },
+    "@types/hoist-non-react-statics": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
+      "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
+      "requires": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
    "@types/html-minifier-terser": {
      "version": "6.1.0",
      "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@@ -47053,8 +47173,7 @@
    "@types/prop-types": {
      "version": "15.7.5",
      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
-      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
-      "devOptional": true
+      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
    },
    "@types/qs": {
      "version": "6.9.7",
@@ -47066,7 +47185,6 @@
      "version": "18.0.26",
      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.26.tgz",
      "integrity": "sha512-hCR3PJQsAIXyxhTNSiDFY//LhnMZWpNNr5etoCqx/iUfGc5gXWtQR2Phl908jVR6uPXacojQWTg4qRpkxTuGug==",
-      "devOptional": true,
      "requires": {
        "@types/prop-types": "*",
        "@types/scheduler": "*",
@@ -47085,8 +47203,7 @@
    "@types/scheduler": {
      "version": "0.16.2",
      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
-      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
-      "devOptional": true
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
    },
    "@types/semver": {
      "version": "7.3.13",
@@ -49959,8 +50076,7 @@
    "core-js": {
      "version": "3.27.1",
      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.27.1.tgz",
-      "integrity": "sha512-GutwJLBChfGCpwwhbYoqfv03LAfmiz7e7D/BNxzeMxwQf10GRSzqiOjx7AmtEk+heiD/JWmBuyBPgFtx0Sg1ww==",
-      "dev": true
+      "integrity": "sha512-GutwJLBChfGCpwwhbYoqfv03LAfmiz7e7D/BNxzeMxwQf10GRSzqiOjx7AmtEk+heiD/JWmBuyBPgFtx0Sg1ww=="
    },
    "core-js-compat": {
      "version": "3.27.1",
@@ -53680,6 +53796,14 @@
        }
      }
    },
+    "html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "requires": {
+        "void-elements": "3.1.0"
+      }
+    },
    "html-tags": {
      "version": "3.2.0",
      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.2.0.tgz",
@@ -53780,6 +53904,20 @@
      "integrity": "sha512-iimHkHPfIAQ8zCDQLgn08pRqSVioyWvnGfaQ8gond2wf7Jq2jJ+24ykmnRyiz3fIldcn4oUuQXpjqKLhSVR7lw==",
      "dev": true
    },
+    "i18next": {
+      "version": "22.4.9",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-22.4.9.tgz",
+      "integrity": "sha512-8gWMmUz460KJDQp/ob3MNUX84cVuDRY9PLFPnV8d+Qezz/6dkjxwOaH70xjrCNDO+JrUL25iXfAIN9wUkInNZw==",
+      "peer": true,
+      "requires": {
+        "@babel/runtime": "^7.20.6"
+      }
+    },
+    "i18next-fs-backend": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/i18next-fs-backend/-/i18next-fs-backend-2.1.1.tgz",
+      "integrity": "sha512-FTnj+UmNgT3YRml5ruRv0jMZDG7odOL/OP5PF5mOqvXud2vHrPOOs68Zdk6iqzL47cnnM0ZVkK2BAvpFeDJToA=="
+    },
    "iconv-lite": {
      "version": "0.4.24",
      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -58397,6 +58535,18 @@
        "uuid": "^8.3.2"
      }
    },
+    "next-i18next": {
+      "version": "13.0.3",
+      "resolved": "https://registry.npmjs.org/next-i18next/-/next-i18next-13.0.3.tgz",
+      "integrity": "sha512-7AA8J6WbkxRBtSf1+97LSAE7btxWZHsBIJEJ3FuTSBgYtpRiO5NGjcb8XbNAlz6yGU0TtS+yZE+/Wu83KhIT1Q==",
+      "requires": {
+        "@babel/runtime": "^7.20.6",
+        "@types/hoist-non-react-statics": "^3.3.1",
+        "core-js": "^3",
+        "hoist-non-react-statics": "^3.3.2",
+        "i18next-fs-backend": "^2.1.0"
+      }
+    },
    "nice-try": {
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
@@ -61888,6 +62038,15 @@
      "integrity": "sha512-2UIGqwMZksd5HS55crTT1ATLTr0rAI4jS7yVuqTaoRVDhY2Qc4IyjskCmpnmdYqUNOYFy04vW253tb2JRVh+IQ==",
      "requires": {}
    },
+    "react-i18next": {
+      "version": "12.1.4",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-12.1.4.tgz",
+      "integrity": "sha512-XQND7jYtgM7ht5PH3yIZljCRpAMTlH/zmngM9ZjToqa+0BR6xuu8c7QF0WIIOEjcMTB2S3iOfpN/xG/ZrAnO6g==",
+      "requires": {
+        "@babel/runtime": "^7.20.6",
+        "html-parse-stringify": "^3.0.1"
+      }
+    },
    "react-icons": {
      "version": "4.7.1",
      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.7.1.tgz",
@@ -64969,6 +65128,11 @@
      "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==",
      "dev": true
    },
+    "void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w=="
+    },
    "w3c-xmlserializer": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",
@@ -50,6 +50,7 @@
    "install": "^0.13.0",
    "next": "13.0.6",
    "next-auth": "^4.18.6",
+    "next-i18next": "^13.0.3",
    "nodemailer": "^6.8.0",
    "npm": "^9.2.0",
    "postcss-focus-visible": "^7.1.0",
@@ -57,6 +58,7 @@
    "react-dom": "18.2.0",
    "react-feature-flags": "^1.0.0",
    "react-hook-form": "^7.42.1",
+    "react-i18next": "^12.1.4",
    "react-icons": "^4.7.1",
    "react-table": "^7.8.0",
    "sharp": "^0.31.3",
@@ -0,0 +1,4 @@
+{
+  "discord": "Discord",
+  "github": "GitHub"
+}
@@ -0,0 +1,16 @@
+{
+  "title": "Open Assistant",
+  "subtitle": "Conversational AI for everyone.",
+  "description": "Conversational AI for everyone. An open source project to create a chat enabled GPT LLM run by LAION and contributors around the world.",
+  "blurb": "We believe we can create a revolution.",
+  "blurb1": "In the same way that Stable Diffusion helped the world make art and images in new ways, we want to improve the world by providing amazing conversational AI.",
+  "join_us_title": "Join us",
+  "join_us_description": "All open source projects begin with people like you. Open source is the belief that if we collaborate we can together gift our knowledge and technology to the world for the benefit of humanity. Are you in? Find us here:",
+  "faq_title": "Frequently Asked Questions",
+  "faq_items": {
+    "q0": "How far along is this project?",
+    "a0": "We are in the early stages of development, working from established research in applying RLHF to large language models.",
+    "q1": "Who is behind Open Assistant?",
+    "a1": "Open Assistant is a project organized by LAION and individuals around the world interested in bringing this technology to everyone."
+  }
+}
@@ -0,0 +1,52 @@
+import { Box, useColorMode } from "@chakra-ui/react";
+import React, { useId } from "react";
+
+export const AnimatedCircles = () => {
+  const id = useId();
+  const { colorMode } = useColorMode();
+  const baseRingColor = colorMode === "light" ? "#d4d4d4" : "#005a69";
+  const gradStopColor = colorMode === "light" ? "#06b6d4" : "#00f2ff";
+
+  return (
+    <Box className="absolute left-1/2 top-4 h-[1026px] w-[1026px] -translate-x-1/3 stroke-gray-300/70 [mask-image:linear-gradient(to_bottom,white_20%,transparent_75%)] sm:top-16 sm:-translate-x-1/2 lg:-top-16 lg:ml-12 xl:-top-14 xl:ml-0">
+      <svg
+        viewBox="0 0 1026 1026"
+        fill="none"
+        aria-hidden="true"
+        className="absolute inset-0 h-full w-full animate-spin-slow"
+      >
+        <path
+          d="M1025 513c0 282.77-229.23 512-512 512S1 795.77 1 513 230.23 1 513 1s512 229.23 512 512Z"
+          stroke={baseRingColor}
+          strokeOpacity="0.7"
+        />
+        <path d="M513 1025C230.23 1025 1 795.77 1 513" stroke={`url(#${id}-gradient-1)`} strokeLinecap="round" />
+        <defs>
+          <linearGradient id={`${id}-gradient-1`} x1="1" y1="513" x2="1" y2="1025" gradientUnits="userSpaceOnUse">
+            <stop stopColor={gradStopColor} />
+            <stop offset="1" stopColor={gradStopColor} stopOpacity="0" />
+          </linearGradient>
+        </defs>
+      </svg>
+      <svg
+        viewBox="0 0 1026 1026"
+        fill="none"
+        aria-hidden="true"
+        className="absolute inset-0 h-full w-full animate-spin-reverse-slower"
+      >
+        <path
+          d="M913 513c0 220.914-179.086 400-400 400S113 733.914 113 513s179.086-400 400-400 400 179.086 400 400Z"
+          stroke={baseRingColor}
+          strokeOpacity="0.7"
+        />
+        <path d="M913 513c0 220.914-179.086 400-400 400" stroke={`url(#${id}-gradient-2)`} strokeLinecap="round" />
+        <defs>
+          <linearGradient id={`gradient-2`} x1="913" y1="513" x2="913" y2="913" gradientUnits="userSpaceOnUse">
+            <stop stopColor={gradStopColor} />
+            <stop offset="1" stopColor={gradStopColor} stopOpacity="0" />
+          </linearGradient>
+        </defs>
+      </svg>
+    </Box>
+  );
+};
@@ -0,0 +1 @@
+export { AnimatedCircles } from "./AnimatedCircles";
@@ -1,9 +1,14 @@
-import { useColorMode } from "@chakra-ui/react";
+import { Box, Link, Text, useColorMode } from "@chakra-ui/react";
+import { useTranslation } from "next-i18next";
 import { useId } from "react";
+import { FaDiscord, FaGithub } from "react-icons/fa";

 import { Container } from "./Container";

-function CircleBackground({ width = 558, height = 558, ...props }) {
+const CIRCLE_HEIGHT = 558;
+const CIRCLE_WIDTH = 558;
+
+function CircleBackground() {
  const id = useId();

  const { colorMode } = useColorMode();
@@ -11,7 +16,14 @@ function CircleBackground({ width = 558, height = 558, ...props }) {
  const gradStopColor = colorMode === "light" ? "#fff" : "#000";

  return (
-    <svg viewBox="0 0 558 558" width={width} height={height} fill="none" aria-hidden="true" {...props}>
+    <svg
+      viewBox={`0 0 ${CIRCLE_HEIGHT} ${CIRCLE_WIDTH}`}
+      width={CIRCLE_WIDTH}
+      height={CIRCLE_HEIGHT}
+      fill="none"
+      aria-hidden="true"
+      className="animate-spin-slower"
+    >
      <defs>
        <linearGradient id={id} x1="79" y1="16" x2="105" y2="237" gradientUnits="userSpaceOnUse">
          <stop stopColor={gradStopColor} />
@@ -30,66 +42,54 @@ function CircleBackground({ width = 558, height = 558, ...props }) {

 export function CallToAction() {
  const { colorMode } = useColorMode();
+  const { t } = useTranslation();
  const bgColorClass = colorMode === "light" ? "bg-gray-900" : "bg-gray-50";
  const headingColorClass = colorMode === "light" ? "text-white" : "text-black";
  const textColorClass = colorMode === "light" ? "text-gray-300" : "text-black";

  return (
-    <section id="join-us" className={`relative overflow-hidden py-20 sm:py-28 ${bgColorClass} ${textColorClass}`}>
-      <div className="absolute top-1/2 left-20 -translate-y-1/2 sm:left-1/2 sm:-translate-x-1/2">
-        <CircleBackground className="animate-spin-slower" />
-      </div>
+    <Box
+      as="section"
+      id="join-us"
+      className={`relative overflow-hidden py-20 sm:py-28 ${bgColorClass} ${textColorClass}`}
+    >
+      <Box className="absolute top-1/2 left-20 -translate-y-1/2 sm:left-1/2 sm:-translate-x-1/2">
+        <CircleBackground />
+      </Box>
      <Container className="relative">
-        <div className="mx-auto max-w-md sm:text-center">
-          <h2 className={`text-3xl font-medium tracking-tight sm:text-4xl ${headingColorClass}`}>Join Us</h2>
-          <p className="mt-4 text-lg">
-            All open source projects begin with people like you. Open source is the belief that if we collaborate we can
-            together gift our knowledge and technology to the world for the benefit of humanity. Are you in? Find us
-            here:
-          </p>
-          <div className="mt-8 flex justify-center">
-            <a href="https://ykilcher.com/open-assistant-discord" rel="noreferrer" target="_blank">
+        <Box className="mx-auto max-w-md sm:text-center">
+          <Text as="h2" className={`text-3xl font-medium tracking-tight sm:text-4xl ${headingColorClass}`}>
+            {t("index:join_us_title")}
+          </Text>
+          <Text as="p" className="mt-4 text-lg">
+            {t("index:join_us_description")}
+          </Text>
+          <Box className="mt-8 flex justify-center">
+            <Link href="https://ykilcher.com/open-assistant-discord" rel="noreferrer" target="_blank">
              <button
                type="button"
                className="mb-2 ml-6 flex items-center rounded-md border border-transparent bg-blue-600 px-6 py-3 text-base font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
              >
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" className="w-6 h-6">
-                  <path
-                    fill="currentColor"
-                    d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"
-                  />
-                </svg>
-                <span className="text-lg ml-3">Discord</span>
+                <FaDiscord size={25} />
+                <Text as="span" className="text-lg ml-3">
+                  {t("discord")}
+                </Text>
              </button>
-            </a>
-
-            <a href="https://github.com/LAION-AI/Open-Assistant" rel="noreferrer" target="_blank">
+            </Link>
+            <Link href="https://github.com/LAION-AI/Open-Assistant" rel="noreferrer" target="_blank">
              <button
                type="button"
                className="mb-2 ml-6 flex items-center rounded-md border border-transparent bg-blue-600 px-6 py-3 text-base font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
              >
-                <svg
-                  className="mr-2 -ml-1 w-6 h-6"
-                  aria-hidden="true"
-                  focusable="false"
-                  data-prefix="fab"
-                  data-icon="github"
-                  role="img"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 496 512"
-                >
-                  <path
-                    fill="currentColor"
-                    d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
-                  ></path>
-                </svg>
-
-                <span className="text-lg ml-1">Github</span>
+                <FaGithub size={25} />
+                <Text as="span" className="text-lg ml-3">
+                  {t("github")}
+                </Text>
              </button>
-            </a>
-          </div>
-        </div>
+            </Link>
+          </Box>
+        </Box>
      </Container>
-    </section>
+    </Box>
  );
 }
@@ -1,73 +1,42 @@
-import { useColorMode } from "@chakra-ui/react";
+import { Box, List, ListItem, Text, useColorMode } from "@chakra-ui/react";
+import { useTranslation } from "next-i18next";

 import { Container } from "./Container";

-const faqs = [
-  [
-    {
-      question: "How far along is this project?",
-      answer:
-        "We are in the early stages of development, working from established research in applying RLHF to large language models.",
-    },
-  ],
-  [
-    {
-      question: "Who is behind Open Assistant?",
-      answer:
-        "Open Assistant is a project organized by LAION and individuals around the world interested in bringing this technology to everyone.",
-    },
-  ],
-  [
-    // {
-    //   question: 'Where can I learn more?',
-    //   answer:
-    //     'Please feel free to reach out to us on Discord. We are happy to answer any questions you may have.',
-    // },
-  ],
-];
+const FAQS = Array.from({ length: 2 });

 export function Faq() {
  const { colorMode } = useColorMode();
-
+  const { t } = useTranslation("index");
  const headingColorClass = colorMode === "light" ? "text-gray-900" : "text-white";
  const textColorClass = colorMode === "light" ? "text-gray-700" : "text-gray-100";

  return (
-    <section id="faq" aria-labelledby="faqs-title" className="border-t border-gray-200 py-20 sm:py-32">
+    <Box as="section" id="faq" aria-labelledby="faqs-title" className="border-t border-gray-200 py-20 sm:py-32">
      <Container className="">
-        <div className="mx-auto max-w-2xl lg:mx-0">
-          <h2 id="faqs-title" className={`text-3xl font-medium tracking-tight ${headingColorClass}`}>
-            Frequently Asked Questions
-          </h2>
-          {/* <p className="mt-2 text-lg text-gray-600">
-            If you have anything else you want to ask,{' '}
-            <Link
-              href="mailto:info@open-assistant.tech"
-              className="text-gray-900 underline"
-            >
-              reach out to us
-            </Link>
-            .
-          </p> */}
-        </div>
-        <ul
+        <Box className="mx-auto max-w-2xl lg:mx-0">
+          <Text as="h2" id="faqs-title" className={`text-3xl font-medium tracking-tight ${headingColorClass}`}>
+            {t("faq_title")}
+          </Text>
+        </Box>
+        <List
          role="list"
          className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-8 sm:mt-20 lg:max-w-none lg:grid-cols-3"
        >
-          {faqs.map((column, columnIndex) => (
-            <li key={columnIndex}>
-              <ul role="list" className="space-y-10">
-                {column.map((faq, faqIndex) => (
-                  <li key={faqIndex}>
-                    <h3 className={`text-lg font-semibold leading-6 ${headingColorClass}`}>{faq.question}</h3>
-                    <p className={`mt-4 text-sm ${textColorClass}`}>{faq.answer}</p>
-                  </li>
-                ))}
-              </ul>
-            </li>
-          ))}
-        </ul>
+          {FAQS.map((_, index) => {
+            return (
+              <ListItem className="space-y-10" key={`question_${index}`}>
+                <Text as="h3" className={`text-lg font-semibold leading-6 ${headingColorClass}`}>
+                  {t(`faq_items.q${index}`)}
+                </Text>
+                <Text as="p" className={`mt-4 text-sm ${textColorClass}`}>
+                  {t(`faq_items.a${index}`)}
+                </Text>
+              </ListItem>
+            );
+          })}
+        </List>
      </Container>
-    </section>
+    </Box>
  );
 }
@@ -1,87 +1,36 @@
-import { useColorMode } from "@chakra-ui/react";
+import { Box, Text, useColorMode } from "@chakra-ui/react";
 import Image from "next/image";
-import { useId } from "react";
+import { useTranslation } from "next-i18next";

 import { Container } from "./Container";
-
-function BackgroundIllustration(props) {
-  const id = useId();
-
-  const { colorMode } = useColorMode();
-  const baseRingColor = colorMode === "light" ? "#d4d4d4" : "#005a69";
-  const gradStopColor = colorMode === "light" ? "#06b6d4" : "#00f2ff";
-
-  return (
-    <div {...props}>
-      <svg
-        viewBox="0 0 1026 1026"
-        fill="none"
-        aria-hidden="true"
-        className="absolute inset-0 h-full w-full animate-spin-slow"
-      >
-        <path
-          d="M1025 513c0 282.77-229.23 512-512 512S1 795.77 1 513 230.23 1 513 1s512 229.23 512 512Z"
-          stroke={baseRingColor}
-          strokeOpacity="0.7"
-        />
-        <path d="M513 1025C230.23 1025 1 795.77 1 513" stroke={`url(#${id}-gradient-1)`} strokeLinecap="round" />
-        <defs>
-          <linearGradient id={`${id}-gradient-1`} x1="1" y1="513" x2="1" y2="1025" gradientUnits="userSpaceOnUse">
-            <stop stopColor={gradStopColor} />
-            <stop offset="1" stopColor={gradStopColor} stopOpacity="0" />
-          </linearGradient>
-        </defs>
-      </svg>
-      <svg
-        viewBox="0 0 1026 1026"
-        fill="none"
-        aria-hidden="true"
-        className="absolute inset-0 h-full w-full animate-spin-reverse-slower"
-      >
-        <path
-          d="M913 513c0 220.914-179.086 400-400 400S113 733.914 113 513s179.086-400 400-400 400 179.086 400 400Z"
-          stroke={baseRingColor}
-          strokeOpacity="0.7"
-        />
-        <path d="M913 513c0 220.914-179.086 400-400 400" stroke={`url(#${id}-gradient-2)`} strokeLinecap="round" />
-        <defs>
-          <linearGradient id={`${id}-gradient-2`} x1="913" y1="513" x2="913" y2="913" gradientUnits="userSpaceOnUse">
-            <stop stopColor={gradStopColor} />
-            <stop offset="1" stopColor={gradStopColor} stopOpacity="0" />
-          </linearGradient>
-        </defs>
-      </svg>
-    </div>
-  );
-}
+import { AnimatedCircles } from "./AnimatedCircles";

 export function Hero() {
+  const { t } = useTranslation("index");
  const { colorMode } = useColorMode();
  const pTextColor = colorMode === "light" ? "text-gray-600" : "text-white";
  const fancyTextGradientClasses =
    colorMode === "light" ? "from-blue-600 via-sky-400 to-blue-700" : "from-blue-500 via-sky-300 to-blue-400";
-
  return (
-    <div className="overflow-hidden py-20 sm:py-32 lg:pb-32 xl:pb-36">
+    <Box className="overflow-hidden py-20 sm:py-32 lg:pb-32 xl:pb-36">
      <Container className="">
-        <div className="lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
-          <div className="relative mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6">
-            <h1 className="text-5xl mb-6 font-bold tracking-tight">Open Assistant</h1>
-            <p
-              className={`bg-gradient-to-r ${fancyTextGradientClasses} mt-8 text-3xl inline bg-clip-text font-display tracking-tight text-transparent`}
+        <Box className="lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
+          <Box className="relative mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6">
+            <Text as="h1" className="text-5xl mb-6 font-bold tracking-tight">
+              {t("title")}
+            </Text>
+            <Text
+              as="h2"
+              className={`bg-gradient-to-r ${fancyTextGradientClasses} font-bold mt-8 text-3xl inline bg-clip-text font-display tracking-tight text-transparent`}
            >
-              <b>Conversational AI for everyone.</b>
-            </p>
-            <p className={`mt-6 text-lg ${pTextColor}`}>We believe we can create a revolution.</p>
-            <p className={`mt-6 text-lg ${pTextColor}`}>
-              In the same way that Stable Diffusion helped the world make art and images in new ways, we want to improve
-              the world by providing amazing conversational AI.
-            </p>
-          </div>
-
-          <div className="relative mt-10 sm:mt-20 lg:col-span-5 lg:row-span-2 lg:mt-0 xl:col-span-6">
-            <BackgroundIllustration className="absolute left-1/2 top-4 h-[1026px] w-[1026px] -translate-x-1/3 stroke-gray-300/70 [mask-image:linear-gradient(to_bottom,white_20%,transparent_75%)] sm:top-16 sm:-translate-x-1/2 lg:-top-16 lg:ml-12 xl:-top-14 xl:ml-0" />
-            <div className="-mx-4 h-[448px] px-9 [mask-image:linear-gradient(to_bottom,white_60%,transparent)] sm:mx-0 lg:absolute lg:-inset-x-10 lg:-top-10 lg:-bottom-20 lg:h-auto lg:px-0 lg:pt-10 xl:-bottom-32">
+              {t("subtitle")}
+            </Text>
+            <Text className={`mt-6 text-lg ${pTextColor}`}>{t("blurb")}</Text>
+            <Text className={`mt-6 text-lg ${pTextColor}`}>{t("blurb1")}</Text>
+          </Box>
+          <Box className="relative mt-10 sm:mt-20 lg:col-span-5 lg:row-span-2 lg:mt-0 xl:col-span-6">
+            <AnimatedCircles />
+            <Box className="-mx-4 h-[448px] px-9 [mask-image:linear-gradient(to_bottom,white_60%,transparent)] sm:mx-0 lg:absolute lg:-inset-x-10 lg:-top-10 lg:-bottom-20 lg:h-auto lg:px-0 lg:pt-10 xl:-bottom-32">
              <Image
                src="/images/logos/logo.svg"
                className="mx-auto mr-6 object-fill"
@@ -89,10 +38,10 @@ export function Hero() {
                height="450"
                alt={""}
              />
-            </div>
-          </div>
-        </div>
+            </Box>
+          </Box>
+        </Box>
      </Container>
-    </div>
+    </Box>
  );
 }
@@ -3,11 +3,13 @@ import "focus-visible";

 import type { AppProps } from "next/app";
 import { SessionProvider } from "next-auth/react";
+import { appWithTranslation } from "next-i18next";
 import { FlagsProvider } from "react-feature-flags";
 import { getDefaultLayout, NextPageWithLayout } from "src/components/Layout";
 import flags from "src/flags";
 import { SWRConfig, SWRConfiguration } from "swr";

+import nextI18NextConfig from "../../next-i18next.config.js";
 import { Chakra, getServerSideProps } from "../styles/Chakra";

 type AppPropsWithLayout = AppProps & {
@@ -34,4 +36,4 @@ function MyApp({ Component, pageProps: { session, cookies, ...pageProps } }: App
  );
 }
 export { getServerSideProps };
-export default MyApp;
+export default appWithTranslation(MyApp, nextI18NextConfig);
@@ -1,6 +1,9 @@
+import { Box } from "@chakra-ui/react";
 import Head from "next/head";
 import { useRouter } from "next/router";
 import { useSession } from "next-auth/react";
+import { useTranslation } from "next-i18next";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { useEffect } from "react";
 import { CallToAction } from "src/components/CallToAction";
 import { Faq } from "src/components/Faq";
@@ -10,6 +13,7 @@ import { getTransparentHeaderLayout } from "src/components/Layout";
 const Home = () => {
  const router = useRouter();
  const { status } = useSession();
+  const { t } = useTranslation("index");
  useEffect(() => {
    if (status === "authenticated") {
      router.push("/dashboard");
@@ -19,21 +23,24 @@ const Home = () => {
  return (
    <>
      <Head>
-        <title>Open Assistant</title>
-        <meta
-          name="description"
-          content="Conversational AI for everyone. An open source project to create a chat enabled GPT LLM run by LAION and contributors around the world."
-        />
+        <title>{t("title")}</title>
+        <meta name="description" content={t("description")} />
      </Head>
-      <main className="oa-basic-theme">
+      <Box as="main" className="oa-basic-theme">
        <Hero />
        <CallToAction />
        <Faq />
-      </main>
+      </Box>
    </>
  );
 };

 Home.getLayout = getTransparentHeaderLayout;

+export const getStaticProps = async ({ locale }) => ({
+  props: {
+    ...(await serverSideTranslations(locale, ["index", "common"])),
+  },
+});
+
 export default Home;
				`@@ -0,0 +1 @@`
				`export { AnimatedCircles } from "./AnimatedCircles";`