feat: Contact form component

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
       )}
     >

frontend/app/contact/components/ContactForm.tsx

@@ -0,0 +1,68 @@
+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 [submitted, setSubmitted] = useState<boolean>(false);
+  const { t } = useTranslation("contact", { keyPrefix: "form" });
+
+  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">
+          {t("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">
+          {t("question")}
+          <sup>*</sup>:
+        </label>
+        <textarea
+          id="message"
+          value={message}
+          rows={3}
+          onChange={(ev) => setMessage(ev.target.value)}
+          placeholder={t("placeholder_question")}
+          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"
+      >
+        {t("submit")}
+        <LuChevronRight size={24} />
+      </Button>
+    </form>
+  );
+};

frontend/app/contact/components/index.ts

@@ -0,0 +1 @@
+export * from "./ContactForm";

frontend/app/contact/page.tsx

@@ -1,7 +1,11 @@
 "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";
+
+import { ContactForm } from "./components";
 import {
   FooterSection,
   HomeHeader,
@@ -11,6 +15,7 @@ import {
 
 const ContactSalesPage = (): JSX.Element => {
   const isNewHomePage = useFeatureIsOn("new-homepage-activated");
+  const { t } = useTranslation("contact");
   if (!isNewHomePage) {
     redirect("/");
   }
@@ -19,8 +24,14 @@ 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">
+          {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 />
+        </Card>
         <HomeSection bg="bg-[#FCFAF6]">
           <TestimonialsSection />
         </HomeSection>

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,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."
+  }
+}

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."
+  }
+}

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."
+  }
+}

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."
+  }
+}

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": "Мы свяжемся с вами как можно скорее."
+  }
+}

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": "我们会尽快回复您。"
+  }
+}