translation

components/pages/contact/form.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Check } from "lucide-react";
+import { useTranslations } from "next-intl";
 import { useState } from "react";
 
 interface FormData {
@@ -22,6 +23,7 @@ interface FormErrors {
 }
 
 export default function Form() {
+  const t = useTranslations();
   const [formData, setFormData] = useState<FormData>({
     firstName: "",
     lastName: "",
@@ -124,7 +126,7 @@ export default function Form() {
           <input
             type="text"
             name="firstName"
-            placeholder="First Name"
+            placeholder={t("contact.form.placeholders.firstName")}
             value={formData.firstName}
             onChange={handleChange}
             className={`w-full rounded-3xl border bg-white px-4 py-3 text-sm text-gray-700 placeholder-gray-400 outline-none transition focus:ring-2 focus:ring-red-500 ${
@@ -139,7 +141,7 @@ export default function Form() {
           <input
             type="text"
             name="lastName"
-            placeholder="Last Name"
+            placeholder={t("contact.form.placeholders.lastName")}
             value={formData.lastName}
             onChange={handleChange}
             className={`w-full rounded-3xl border bg-white px-4 py-3 text-sm text-gray-700 placeholder-gray-400 outline-none transition focus:ring-2 focus:ring-red-500 ${
@@ -158,7 +160,7 @@ export default function Form() {
           <input
             type="email"
             name="email"
-            placeholder="Your Email Address"
+            placeholder={t("contact.form.placeholders.email")}
             value={formData.email}
             onChange={handleChange}
             className={`w-full rounded-3xl border bg-white px-4 py-3 text-sm text-gray-700 placeholder-gray-400 outline-none transition focus:ring-2 focus:ring-red-500 ${
@@ -173,7 +175,7 @@ export default function Form() {
           <input
             type="text"
             name="subject"
-            placeholder="Subject"
+            placeholder={t("contact.form.placeholders.subject")}
             value={formData.subject}
             onChange={handleChange}
             className={`w-full rounded-3xl border bg-white px-4 py-3 text-sm text-gray-700 placeholder-gray-400 outline-none transition focus:ring-2 focus:ring-red-500 ${
@@ -190,7 +192,7 @@ export default function Form() {
       <div>
         <textarea
           name="message"
-          placeholder="Leave us a message"
+          placeholder={t("contact.form.placeholders.message")}
           rows={8}
           value={formData.message}
           onChange={handleChange}
@@ -221,7 +223,7 @@ export default function Form() {
             )}
           </button>
           <span className="text-sm text-gray-300">
-            You agree to our friendly privacy policy
+            {t("contact.form.privacy")}
           </span>
         </div>
         <button
@@ -229,7 +231,7 @@ export default function Form() {
           disabled={isSubmitting}
           className="shadow-[0px_0px_2px_8px_#ff01015c] rounded-full bg-red-600 px-8 py-3 text-sm font-semibold uppercase tracking-wider text-white transition hover:cursor-pointer hover:scale-90 disabled:cursor-not-allowed disabled:opacity-50"
         >
-          {isSubmitting ? "Sending..." : "Send Message"}
+          {isSubmitting ? "Sending..." : t("contact.form.send")}
         </button>
       </div>
       {errors.agreeToPolicy && (