Added image to contact us page

src/templates/ContactUs.tsx

@@ -5,6 +5,7 @@ import Footer from "@/components/Footer";
 import Navbar from "@/components/Navbar";
 import Title from "@/components/Title";
 import translation from "@/translation/contactus.json";
+import Image from "next/image";
 
 type FormValues = {
   name: string;
@@ -93,10 +94,10 @@ export default function App({ language, page }: Props) {
           <Title>{translation.title[language]}</Title>
         </div>
       </section>
-      <section className="w-full bg-white text-center p-8 md:p-16">
+      <section className="w-full bg-white text-center p-8 md:p-16 flex justify-center items-center gap-32">
         <form
           onSubmit={handleSubmit(onSubmit)}
-          className="form-control items-center gap-2 text-mti-black"
+          className="form-control items-center gap-2 text-mti-black flex flex-col w-96"
         >
           <input
             id="name"
@@ -108,7 +109,6 @@ export default function App({ language, page }: Props) {
           {errors.name && errors.name.type === "required" && (
             <ErrorMessage message={translation.fieldRequired[language]} />
           )}
-
           <input
             id="email"
             placeholder={translation.email[language]}
@@ -122,7 +122,6 @@ export default function App({ language, page }: Props) {
           {errors.email && errors.email.type === "pattern" && (
             <ErrorMessage message={translation.invalidEmail[language]} />
           )}
-
           <input
             id="subject"
             placeholder={translation.subject[language]}
@@ -150,7 +149,6 @@ export default function App({ language, page }: Props) {
           {errors.type && errors.type.type === "required" && (
             <ErrorMessage message={translation.fieldRequired[language]} />
           )}
-
           <textarea
             id="description"
             placeholder={translation.description[language]}
@@ -161,13 +159,22 @@ export default function App({ language, page }: Props) {
           {errors.description && errors.description.type === "required" && (
             <ErrorMessage message={translation.fieldRequired[language]} />
           )}
-
           <input
             type="submit"
             className="btn"
             disabled={!isDirty || !isValid}
+            value={translation.submit[language]}
           />
         </form>
+        <div className="flex flex-col">
+          <Image
+            src="/person_laptop_focus.jpg"
+            alt="Contact Us"
+            width={500}
+            height={340}
+            className="rounded-xl"
+          />
+        </div>
       </section>
       <Footer language={language} />
     </main>