From 1ff8896774dfd660f7dad254d46306ad2483d96a Mon Sep 17 00:00:00 2001
From: Matthieu Jacq <67386567+matthieujacq@users.noreply.github.com>
Date: Fri, 20 Oct 2023 17:32:44 +0200
Subject: [PATCH 1/3] Contact form component

Better display on mobile
---
 .../app/contact/components/ContactForm.tsx    | 52 +++++++++++++++++++
 frontend/app/contact/components/index.ts      |  1 +
 frontend/app/contact/page.tsx                 | 12 ++++-
 3 files changed, 63 insertions(+), 2 deletions(-)
 create mode 100644 frontend/app/contact/components/ContactForm.tsx
 create mode 100644 frontend/app/contact/components/index.ts

diff --git a/frontend/app/contact/components/ContactForm.tsx b/frontend/app/contact/components/ContactForm.tsx
new file mode 100644
index 000000000000..d22602f5a8db
--- /dev/null
+++ b/frontend/app/contact/components/ContactForm.tsx
@@ -0,0 +1,52 @@
+import React, { useState } from "react";
+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 handleSubmit = () => {
+    console.log("submitting", email, message);
+  };
+
+  return (
+    <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>:
+        </label>
+        <input
+          type="email"
+          id="email"
+          value={email}
+          onChange={(ev) => setEmail(ev.target.value)}
+          placeholder="jane@example.com"
+          className="col-span-2 bg-[#FCFAF6] rounded-md p-2"
+          required
+        />
+        <label className="font-bold" htmlFor="message">
+          Question<sup>*</sup>:
+        </label>
+        <textarea
+          id="message"
+          value={message}
+          rows={3}
+          onChange={(ev) => setMessage(ev.target.value)}
+          placeholder="How can we help you?"
+          className="col-span-2 bg-[#FCFAF6] rounded-md p-2"
+          required
+        ></textarea>
+      </fieldset>
+
+      <Button
+        onClick={handleSubmit}
+        className="self-end rounded-full bg-primary flex items-center justify-center gap-2 border-none hover:bg-primary/90"
+      >
+        Contact
+        <LuChevronRight size={24} />
+      </Button>
+    </form>
+  );
+};
diff --git a/frontend/app/contact/components/index.ts b/frontend/app/contact/components/index.ts
new file mode 100644
index 000000000000..a4415af406b6
--- /dev/null
+++ b/frontend/app/contact/components/index.ts
@@ -0,0 +1 @@
+export * from "./ContactForm";
diff --git a/frontend/app/contact/page.tsx b/frontend/app/contact/page.tsx
index c3a5bda54139..0a42849cac09 100644
--- a/frontend/app/contact/page.tsx
+++ b/frontend/app/contact/page.tsx
@@ -2,6 +2,9 @@
 import { useFeatureIsOn } from "@growthbook/growthbook-react";
 import { redirect } from "next/navigation";
 
+import Card from "@/lib/components/ui/Card";
+
+import { ContactForm } from "./components";
 import {
   FooterSection,
   HomeHeader,
@@ -19,8 +22,13 @@ const ContactSalesPage = (): JSX.Element => {
     <div className="bg-[#FCFAF6]">
       <HomeHeader color="black" />
 
-      <main className="relative flex flex-col items-center">
-        TODO: The Form!
+      <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>
+        </h1>
+        <Card className="flex flex-col items-center my-2 p-10 w-full max-w-xl">
+          <ContactForm />
+        </Card>
         <HomeSection bg="bg-[#FCFAF6]">
           <TestimonialsSection />
         </HomeSection>

From 5b73f54a16a4237b45c1ebd1d2f92fb2acb58b31 Mon Sep 17 00:00:00 2001
From: Matthieu Jacq <67386567+matthieujacq@users.noreply.github.com>
Date: Mon, 23 Oct 2023 09:56:15 +0200
Subject: [PATCH 2/3] Hide overflow in homepage #1457

---
 frontend/app/(home)/components/HomeSection/HomeSection.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/app/(home)/components/HomeSection/HomeSection.tsx b/frontend/app/(home)/components/HomeSection/HomeSection.tsx
index 3f893d9012d0..1500a880628a 100644
--- a/frontend/app/(home)/components/HomeSection/HomeSection.tsx
+++ b/frontend/app/(home)/components/HomeSection/HomeSection.tsx
@@ -33,7 +33,7 @@ export const HomeSection = ({
   return (
     <div
       className={cn(
-        `${bg} w-screen ${flex} ${slantBeforeFix} ${slantAfterFix} ${slant}`,
+        `${bg} w-screen ${flex} ${slantBeforeFix} ${slantAfterFix} ${slant} overflow-hidden`,
         className
       )}
     >

From 8b5c9b82e8b2b59b65c67416cfc833c2df9281a1 Mon Sep 17 00:00:00 2001
From: Matthieu Jacq <67386567+matthieujacq@users.noreply.github.com>
Date: Mon, 23 Oct 2023 11:02:54 +0200
Subject: [PATCH 3/3] Add translations to the contact page

---
 .../app/contact/components/ContactForm.tsx    | 26 +++++++++++++++----
 frontend/app/contact/page.tsx                 |  5 +++-
 frontend/lib/config/LocaleConfig/resources.ts | 13 ++++++++++
 frontend/public/locales/en/contact.json       | 12 +++++++++
 frontend/public/locales/es/contact.json       | 12 +++++++++
 frontend/public/locales/fr/contact.json       | 12 +++++++++
 frontend/public/locales/pt-br/contact.json    | 12 +++++++++
 frontend/public/locales/ru/contact.json       | 12 +++++++++
 frontend/public/locales/zh-cn/contact.json    | 12 +++++++++
 9 files changed, 110 insertions(+), 6 deletions(-)
 create mode 100644 frontend/public/locales/en/contact.json
 create mode 100644 frontend/public/locales/es/contact.json
 create mode 100644 frontend/public/locales/fr/contact.json
 create mode 100644 frontend/public/locales/pt-br/contact.json
 create mode 100644 frontend/public/locales/ru/contact.json
 create mode 100644 frontend/public/locales/zh-cn/contact.json

diff --git a/frontend/app/contact/components/ContactForm.tsx b/frontend/app/contact/components/ContactForm.tsx
index d22602f5a8db..2bce68a946e4 100644
--- a/frontend/app/contact/components/ContactForm.tsx
+++ b/frontend/app/contact/components/ContactForm.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
 import { LuChevronRight } from "react-icons/lu";
 
 import Button from "@/lib/components/ui/Button";
@@ -6,16 +7,30 @@ import Button from "@/lib/components/ui/Button";
 export const ContactForm = (): JSX.Element => {
   const [email, setEmail] = useState<string>("");
   const [message, setMessage] = useState<string>("");
+  const [submitted, setSubmitted] = useState<boolean>(false);
+  const { t } = useTranslation("contact", { keyPrefix: "form" });
 
-  const handleSubmit = () => {
+  const handleSubmit = (ev: React.FormEvent) => {
+    ev.preventDefault();
+    setSubmitted(true);
     console.log("submitting", email, message);
   };
 
+  if (submitted) {
+    return (
+      <div className="flex flex-col items-center justify-center gap-5">
+        <h2 className="text-2xl font-bold">{t("thank_you")}</h2>
+        <p className="text-center text-zinc-400">{t("thank_you_text")}</p>
+      </div>
+    );
+  }
+
   return (
     <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 +42,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 +60,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>
diff --git a/frontend/app/contact/page.tsx b/frontend/app/contact/page.tsx
index 0a42849cac09..60039461f33f 100644
--- a/frontend/app/contact/page.tsx
+++ b/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 />
diff --git a/frontend/lib/config/LocaleConfig/resources.ts b/frontend/lib/config/LocaleConfig/resources.ts
index 230c15f5023e..ca28da36fa6b 100644
--- a/frontend/lib/config/LocaleConfig/resources.ts
+++ b/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,
diff --git a/frontend/public/locales/en/contact.json b/frontend/public/locales/en/contact.json
new file mode 100644
index 000000000000..2a1abf36c3b7
--- /dev/null
+++ b/frontend/public/locales/en/contact.json
@@ -0,0 +1,12 @@
+{
+  "speak_to": "Speak to our",
+  "sales_team": "Sales team",
+  "form": {
+    "email": "Work Email",
+    "question": "Question",
+    "submit": "Contact",
+    "placeholder_question": "How can we help you?",
+    "thank_you": "Thank you!",
+    "thank_you_text": "We will get back to you as soon as possible."
+  }
+}
diff --git a/frontend/public/locales/es/contact.json b/frontend/public/locales/es/contact.json
new file mode 100644
index 000000000000..66cbe5f797bc
--- /dev/null
+++ b/frontend/public/locales/es/contact.json
@@ -0,0 +1,12 @@
+{
+  "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?",
+    "thank_you": "¡Gracias!",
+    "thank_you_text": "Nos pondremos en contacto contigo lo antes posible."
+  }
+}
diff --git a/frontend/public/locales/fr/contact.json b/frontend/public/locales/fr/contact.json
new file mode 100644
index 000000000000..87fb13cbbd9a
--- /dev/null
+++ b/frontend/public/locales/fr/contact.json
@@ -0,0 +1,12 @@
+{
+  "speak_to": "Parlez à notre",
+  "sales_team": "équipe de vente",
+  "form": {
+    "email": "Courriel professionnel",
+    "question": "Question",
+    "submit": "Contacter",
+    "placeholder_question": "Comment pouvons-nous vous aider ?",
+    "thank_you": "Merci !",
+    "thank_you_text": "Nous vous répondrons dès que possible."
+  }
+}
diff --git a/frontend/public/locales/pt-br/contact.json b/frontend/public/locales/pt-br/contact.json
new file mode 100644
index 000000000000..60769140a697
--- /dev/null
+++ b/frontend/public/locales/pt-br/contact.json
@@ -0,0 +1,12 @@
+{
+  "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?",
+    "thank_you": "Obrigado!",
+    "thank_you_text": "Entraremos em contato o mais rápido possível."
+  }
+}
diff --git a/frontend/public/locales/ru/contact.json b/frontend/public/locales/ru/contact.json
new file mode 100644
index 000000000000..fbde6c45339e
--- /dev/null
+++ b/frontend/public/locales/ru/contact.json
@@ -0,0 +1,12 @@
+{
+  "speak_to": "Говорите с нашим",
+  "sales_team": "коммерческим отделом",
+  "form": {
+    "email": "Рабочий электронный адрес",
+    "question": "Вопрос",
+    "submit": "Контакт",
+    "placeholder_question": "Как мы можем вам помочь?",
+    "thank_you": "Спасибо!",
+    "thank_you_text": "Мы свяжемся с вами как можно скорее."
+  }
+}
diff --git a/frontend/public/locales/zh-cn/contact.json b/frontend/public/locales/zh-cn/contact.json
new file mode 100644
index 000000000000..a6dc3951f375
--- /dev/null
+++ b/frontend/public/locales/zh-cn/contact.json
@@ -0,0 +1,12 @@
+{
+  "speak_to": "与我们的",
+  "sales_team": "销售团队联系",
+  "form": {
+    "email": "工作电子邮件",
+    "question": "问题",
+    "submit": "联系我们",
+    "placeholder_question": "我们如何帮助您？",
+    "thank_you": "谢谢！",
+    "thank_you_text": "我们会尽快回复您。"
+  }
+}