New front page design

src/app/[locale]/(main)/contact-us/ContactForm.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import { useState } from "react";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useTranslations } from "next-intl";
+import { FormProvider, useForm } from "react-hook-form";
+import { z } from "zod";
+
+import InfoMessage from "@/components/InfoMessage";
+import { clearMessage } from "@/components/InfoMessage";
+import { TextAreaField } from "@/components/form/TextAreaField";
+import { TextField } from "@/components/form/TextField";
+import { contactUsSchema } from "@/schemas";
+import { trpc } from "@/utils/trpc";
+
+type TournamentFormValues = z.infer<typeof contactUsSchema>;
+
+const ContactForm = () => {
+  const t = useTranslations("Contact");
+
+  const contactUs = trpc.contactUs.useMutation();
+  const [responseMessage, setResponseMessage] = useState({
+    isSuccessful: false,
+    message: "",
+  });
+
+  const form = useForm<TournamentFormValues>({
+    resolver: zodResolver(contactUsSchema),
+  });
+
+  const onSubmit = async (data: TournamentFormValues) => {
+    try {
+      await contactUs.mutateAsync(data);
+      setResponseMessage({
+        isSuccessful: true,
+        message: t("success"),
+      });
+
+      clearMessage(setResponseMessage);
+      form.reset();
+    } catch (err: unknown) {
+      console.log(err);
+      setResponseMessage({
+        isSuccessful: true,
+        message: t("failure"),
+      });
+
+      clearMessage(setResponseMessage);
+    }
+  };
+
+  return (
+    <FormProvider {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <TextField
+          name="email"
+          control={form.control}
+          label={t("emailLabel")}
+          placeholder={t("emailPlaceholder")}
+          required
+        />
+
+        <TextField
+          name="subject"
+          control={form.control}
+          label={t("subjectLabel")}
+          placeholder={t("subjectPlaceholder")}
+          required
+        />
+
+        <TextAreaField
+          name="message"
+          control={form.control}
+          rows={6}
+          label={t("messageLabel")}
+          placeholder={t("messagePlaceholder")}
+          required
+        />
+
+        <button
+          disabled={form.formState.isSubmitting}
+          type="submit"
+          className="rounded-lg bg-primary-600 px-5 py-3 text-center text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 disabled:opacity-25 dark:text-white dark:hover:bg-primary-700 dark:focus:ring-primary-800 sm:w-fit"
+        >
+          {form.formState.isSubmitting ? t("sending") : t("sendButton")}
+        </button>
+
+        <InfoMessage responseMessage={responseMessage} />
+      </form>
+    </FormProvider>
+  );
+};
+
+export default ContactForm;

src/app/[locale]/(main)/contact-us/page.tsx

@@ -0,0 +1,24 @@
+import { useTranslations } from "next-intl";
+
+import ContactForm from "./ContactForm";
+
+export default function Contact() {
+  const t = useTranslations("Contact");
+
+  return (
+    <section className="grid place-items-center bg-white pb-20 dark:bg-gray-800">
+      <div className="mx-auto max-w-screen-md px-4 py-8 lg:py-16">
+        <h2
+          className="mb-4 text-center text-4xl font-extrabold tracking-tight text-gray-900 dark:text-white"
+          data-test="header2"
+        >
+          {t("title")}
+        </h2>
+        <p className="mb-8 text-center font-light text-gray-500 dark:text-gray-400 sm:text-xl lg:mb-16">
+          {t("info")}
+        </p>
+        <ContactForm />
+      </div>
+    </section>
+  );
+}