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 (
diff --git a/frontend/app/contact/components/ContactForm.tsx b/frontend/app/contact/components/ContactForm.tsx new file mode 100644 index 000000000000..2bce68a946e4 --- /dev/null +++ b/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(""); + const [message, setMessage] = useState(""); + const [submitted, setSubmitted] = useState(false); + const { t } = useTranslation("contact", { keyPrefix: "form" }); + + const handleSubmit = (ev: React.FormEvent) => { + ev.preventDefault(); + setSubmitted(true); + console.log("submitting", email, message); + }; + + if (submitted) { + return ( +
+

{t("thank_you")}

+

{t("thank_you_text")}

+
+ ); + } + + return ( +
+
+ + setEmail(ev.target.value)} + placeholder="jane@example.com" + className="col-span-2 bg-[#FCFAF6] rounded-md p-2" + required + /> + + +
+ + +
+ ); +}; 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..60039461f33f 100644 --- a/frontend/app/contact/page.tsx +++ b/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 => {
-
- TODO: The Form! +
+

+ {t("speak_to")}{" "} + {t("sales_team")} +

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