Add translations to the contact page

frontend/app/contact/components/ContactForm.tsx

@@ -1,11 +1,13 @@
 import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
 import { LuChevronRight } from "react-icons/lu";
 
 import Button from "@/lib/components/ui/Button";
 
 export const ContactForm = (): JSX.Element => {
   const [email, setEmail] = useState<string>("");
   const [message, setMessage] = useState<string>("");
+  const { t } = useTranslation("contact", { keyPrefix: "form" });
 
   const handleSubmit = () => {
     console.log("submitting", email, message);
@@ -15,7 +17,8 @@ export const ContactForm = (): JSX.Element => {
     <form className="flex flex-col gap-5 justify-stretch w-full">
       <fieldset className="grid grid-cols-1 sm:grid-cols-3 gap-2 w-full gap-y-5">
         <label className="font-bold" htmlFor="email">
-          Work Email<sup>*</sup>:
+          {t("email")}
+          <sup>*</sup>:
         </label>
         <input
           type="email"
@@ -27,14 +30,15 @@ export const ContactForm = (): JSX.Element => {
           required
         />
         <label className="font-bold" htmlFor="message">
-          Question<sup>*</sup>:
+          {t("question")}
+          <sup>*</sup>:
         </label>
         <textarea
           id="message"
           value={message}
           rows={3}
           onChange={(ev) => setMessage(ev.target.value)}
-          placeholder="How can we help you?"
+          placeholder={t("placeholder_question")}
           className="col-span-2 bg-[#FCFAF6] rounded-md p-2"
           required
         ></textarea>
@@ -44,7 +48,7 @@ export const ContactForm = (): JSX.Element => {
         onClick={handleSubmit}
         className="self-end rounded-full bg-primary flex items-center justify-center gap-2 border-none hover:bg-primary/90"
       >
-        Contact
+        {t("submit")}
         <LuChevronRight size={24} />
       </Button>
     </form>

frontend/app/contact/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 import { useFeatureIsOn } from "@growthbook/growthbook-react";
 import { redirect } from "next/navigation";
+import { useTranslation } from "react-i18next";
 
 import Card from "@/lib/components/ui/Card";
 
@@ -14,6 +15,7 @@ import {
 
 const ContactSalesPage = (): JSX.Element => {
   const isNewHomePage = useFeatureIsOn("new-homepage-activated");
+  const { t } = useTranslation("contact");
   if (!isNewHomePage) {
     redirect("/");
   }
@@ -24,7 +26,8 @@ const ContactSalesPage = (): JSX.Element => {
 
       <main className="relative flex flex-col items-center px-10">
         <h1 className="text-4xl font-semibold my-10 text-center">
-          Speak to our <span className="text-primary">Sales team</span>
+          {t("speak_to")}{" "}
+          <span className="text-primary">{t("sales_team")}</span>
         </h1>
         <Card className="flex flex-col items-center my-2 p-10 w-full max-w-xl">
           <ContactForm />

frontend/lib/config/LocaleConfig/resources.ts

@@ -3,6 +3,7 @@
 import brain_en from "../../../public/locales/en/brain.json";
 import chat_en from "../../../public/locales/en/chat.json";
 import config_en from "../../../public/locales/en/config.json";
+import contact_en from "../../../public/locales/en/contact.json";
 import delete_brain_en from "../../../public/locales/en/deleteOrUnsubscribeFromBrain.json";
 import explore_en from "../../../public/locales/en/explore.json";
 import home_en from "../../../public/locales/en/home.json";
@@ -19,6 +20,7 @@ import user_en from "../../../public/locales/en/user.json";
 import brain_es from "../../../public/locales/es/brain.json";
 import chat_es from "../../../public/locales/es/chat.json";
 import config_es from "../../../public/locales/es/config.json";
+import contact_es from "../../../public/locales/es/contact.json";
 import delete_brain_es from "../../../public/locales/es/deleteOrUnsubscribeFromBrain.json";
 import explore_es from "../../../public/locales/es/explore.json";
 import home_es from "../../../public/locales/es/home.json";
@@ -35,6 +37,7 @@ import user_es from "../../../public/locales/es/user.json";
 import brain_fr from "../../../public/locales/fr/brain.json";
 import chat_fr from "../../../public/locales/fr/chat.json";
 import config_fr from "../../../public/locales/fr/config.json";
+import contact_fr from "../../../public/locales/fr/contact.json";
 import delete_brain_fr from "../../../public/locales/fr/deleteOrUnsubscribeFromBrain.json";
 import explore_fr from "../../../public/locales/fr/explore.json";
 import home_fr from "../../../public/locales/fr/home.json";
@@ -51,6 +54,7 @@ import user_fr from "../../../public/locales/fr/user.json";
 import brain_ptbr from "../../../public/locales/pt-br/brain.json";
 import chat_ptbr from "../../../public/locales/pt-br/chat.json";
 import config_ptbr from "../../../public/locales/pt-br/config.json";
+import contact_ptbr from "../../../public/locales/pt-br/contact.json";
 import delete_brain_ptbr from "../../../public/locales/pt-br/deleteOrUnsubscribeFromBrain.json";
 import explore_ptbr from "../../../public/locales/pt-br/explore.json";
 import home_ptbr from "../../../public/locales/pt-br/home.json";
@@ -67,6 +71,7 @@ import user_ptbr from "../../../public/locales/pt-br/user.json";
 import brain_ru from "../../../public/locales/ru/brain.json";
 import chat_ru from "../../../public/locales/ru/chat.json";
 import config_ru from "../../../public/locales/ru/config.json";
+import contact_ru from "../../../public/locales/ru/contact.json";
 import delete_brain_ru from "../../../public/locales/ru/deleteOrUnsubscribeFromBrain.json";
 import explore_ru from "../../../public/locales/ru/explore.json";
 import home_ru from "../../../public/locales/ru/home.json";
@@ -83,6 +88,7 @@ import user_ru from "../../../public/locales/ru/user.json";
 import brain_zh_cn from "../../../public/locales/zh-cn/brain.json";
 import chat_zh_cn from "../../../public/locales/zh-cn/chat.json";
 import config_zh_cn from "../../../public/locales/zh-cn/config.json";
+import contact_zh_cn from "../../../public/locales/zh-cn/contact.json";
 import delete_brain_zh_cn from "../../../public/locales/zh-cn/deleteOrUnsubscribeFromBrain.json";
 import explore_zh_cn from "../../../public/locales/zh-cn/explore.json";
 import home_zh_cn from "../../../public/locales/zh-cn/home.json";
@@ -101,6 +107,7 @@ export type Translations = {
   brain: typeof import("../../../public/locales/en/brain.json");
   chat: typeof import("../../../public/locales/en/chat.json");
   config: typeof import("../../../public/locales/en/config.json");
+  contact: typeof import("../../../public/locales/en/contact.json");
   delete_or_unsubscribe_from_brain: typeof import("../../../public/locales/en/deleteOrUnsubscribeFromBrain.json");
   explore: typeof import("../../../public/locales/en/explore.json");
   home: typeof import("../../../public/locales/en/home.json");
@@ -130,6 +137,7 @@ export const resources: Record<SupportedLanguages, Translations> = {
     brain: brain_en,
     chat: chat_en,
     config: config_en,
+    contact: contact_en,
     explore: explore_en,
     home: home_en,
     invitation: invitation_en,
@@ -147,6 +155,7 @@ export const resources: Record<SupportedLanguages, Translations> = {
     brain: brain_es,
     chat: chat_es,
     config: config_es,
+    contact: contact_es,
     explore: explore_es,
     home: home_es,
     invitation: invitation_es,
@@ -164,6 +173,7 @@ export const resources: Record<SupportedLanguages, Translations> = {
     brain: brain_fr,
     chat: chat_fr,
     config: config_fr,
+    contact: contact_fr,
     explore: explore_fr,
     home: home_fr,
     invitation: invitation_fr,
@@ -181,6 +191,7 @@ export const resources: Record<SupportedLanguages, Translations> = {
     brain: brain_ptbr,
     chat: chat_ptbr,
     config: config_ptbr,
+    contact: contact_ptbr,
     explore: explore_ptbr,
     home: home_ptbr,
     invitation: invitation_ptbr,
@@ -198,6 +209,7 @@ export const resources: Record<SupportedLanguages, Translations> = {
     brain: brain_ru,
     chat: chat_ru,
     config: config_ru,
+    contact: contact_ru,
     explore: explore_ru,
     home: home_ru,
     invitation: invitation_ru,
@@ -215,6 +227,7 @@ export const resources: Record<SupportedLanguages, Translations> = {
     brain: brain_zh_cn,
     chat: chat_zh_cn,
     config: config_zh_cn,
+    contact: contact_zh_cn,
     explore: explore_zh_cn,
     home: home_zh_cn,
     invitation: invitation_zh_cn,

frontend/public/locales/en/contact.json

@@ -0,0 +1,10 @@
+{
+  "speak_to": "Speak to our",
+  "sales_team": "Sales team",
+  "form": {
+    "email": "Work Email",
+    "question": "Question",
+    "submit": "Contact",
+    "placeholder_question": "How can we help you?"
+  }
+}

frontend/public/locales/es/contact.json

@@ -0,0 +1,10 @@
+{
+  "speak_to": "Hable con nuestro",
+  "sales_team": "equipo de ventas",
+  "form": {
+    "email": "Correo electrónico de trabajo",
+    "question": "Pregunta",
+    "submit": "Contactar",
+    "placeholder_question": "¿Cómo podemos ayudarte?"
+  }
+}

frontend/public/locales/fr/contact.json

@@ -0,0 +1,10 @@
+{
+  "speak_to": "Parlez à notre",
+  "sales_team": "équipe de vente",
+  "form": {
+    "email": "Courriel professionnel",
+    "question": "Question",
+    "submit": "Contacter",
+    "placeholder_question": "Comment pouvons-nous vous aider ?"
+  }
+}

frontend/public/locales/pt-br/contact.json

@@ -0,0 +1,10 @@
+{
+  "speak_to": "Fale com o nosso",
+  "sales_team": "time de vendas",
+  "form": {
+    "email": "E-mail de trabalho",
+    "question": "Pergunta",
+    "submit": "Contato",
+    "placeholder_question": "Como podemos ajudar?"
+  }
+}

frontend/public/locales/ru/contact.json

@@ -0,0 +1,10 @@
+{
+  "speak_to": "Говорите с нашим",
+  "sales_team": "коммерческим отделом",
+  "form": {
+    "email": "Рабочий электронный адрес",
+    "question": "Вопрос",
+    "submit": "Контакт",
+    "placeholder_question": "Как мы можем вам помочь?"
+  }
+}

frontend/public/locales/zh-cn/contact.json

@@ -0,0 +1,10 @@
+{
+  "speak_to": "与我们的",
+  "sales_team": "销售团队联系",
+  "form": {
+    "email": "工作电子邮件",
+    "question": "问题",
+    "submit": "联系我们",
+    "placeholder_question": "我们如何帮助您？"
+  }
+}