translation

components/pages/contact/contactHeader.tsx

@@ -1,23 +1,25 @@
 import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
+import { useTranslations } from "next-intl";
 import React from "react";
 
 export default function ContactHeader() {
+  const t = useTranslations();
   return (
     <div className="mb-8 text-center">
       <div className="mb-4 flex items-center justify-center gap-2">
         <DotAnimatsiya />
         <span className="text-sm font-semibold tracking-wider text-white">
-          CONTACT US
+          {t("contact.banner.title")}
         </span>
       </div>
       <h2
         className="bg-linear-to-br from-white via-white to-black
   text-transparent bg-clip-text  text-4xl font-bold tracking-wide md:text-5xl"
       >
-        GET IN TOUCH
+        {t("contact.banner.subtitle")}
       </h2>
       <p className="mt-3 text-sm text-gray-300 italic">
-        We'd love to hear from you. Please fill out this form.
+        {t("contact.banner.description")}
       </p>
     </div>
   );

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 && (

components/pages/contact/main.tsx

@@ -2,22 +2,24 @@ import Image from "next/image";
 import { Mail, MapPin, Phone, Check } from "lucide-react";
 import ContactHeader from "./contactHeader";
 import Form from "./form";
+import { useTranslations } from "next-intl";
 
 export function Contact() {
+  const t = useTranslations();
   const contactInfo = [
     {
       icon: Mail,
-      title: "EMAIL",
-      detail: "support@fireforce",
+      title:t("contact.email"),
+      detail: t("contact.emailAddress"),
     },
     {
       icon: MapPin,
-      title: "OUR LOCATION",
-      detail: "Jl. Dr. Ir. Soekarno No. 99x Tabanan - Bali",
+      title: t("contact.location"),
+      detail: t("contact.address"),
     },
     {
       icon: Phone,
-      title: "PHONE",
+      title: t("contact.phone"),
       detail: "+123-456-7890",
     },
   ];