Merge pull request #16 from rede5/codex/fix-language-change-in-header

Fix contact page language switching

frontend/src/app/contact/page.tsx

@@ -11,9 +11,11 @@ import { Textarea } from "@/components/ui/textarea"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Label } from "@/components/ui/label"
 import { Mail, MessageSquare, Phone, MapPin } from "lucide-react"
+import { useTranslation } from "@/lib/i18n"
 
 export default function ContactPage() {
   const [submitted, setSubmitted] = useState(false)
+  const { t } = useTranslation()
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault()
@@ -30,10 +32,10 @@ export default function ContactPage() {
         <section className="bg-muted/30 py-16 md:py-24">
           <div className="container mx-auto px-4 sm:px-6 lg:px-8">
             <div className="max-w-3xl mx-auto text-center">
-              <h1 className="text-4xl md:text-5xl font-bold text-foreground mb-6 text-balance">Get in Touch</h1>
+              <h1 className="text-4xl md:text-5xl font-bold text-foreground mb-6 text-balance">
-              <p className="text-lg text-muted-foreground text-pretty">
+                {t("contact.hero.title")}
-                Have a question or suggestion? We are here to help. Reach out anytime.
+              </h1>
-              </p>
+              <p className="text-lg text-muted-foreground text-pretty">{t("contact.hero.subtitle")}</p>
             </div>
           </div>
         </section>
@@ -45,33 +47,38 @@ export default function ContactPage() {
               {/* Contact Form */}
               <Card>
                 <CardHeader>
-                  <CardTitle>Send a message</CardTitle>
+                  <CardTitle>{t("contact.form.title")}</CardTitle>
-                  <CardDescription>Fill out the form and we will get back to you soon.</CardDescription>
+                  <CardDescription>{t("contact.form.description")}</CardDescription>
                 </CardHeader>
                 <CardContent>
                   <form onSubmit={handleSubmit} className="space-y-4">
                     <div className="space-y-2">
-                      <Label htmlFor="name">Full name</Label>
+                      <Label htmlFor="name">{t("contact.form.fields.name.label")}</Label>
-                      <Input id="name" placeholder="Your name" required />
+                      <Input id="name" placeholder={t("contact.form.fields.name.placeholder")} required />
                     </div>
 
                     <div className="space-y-2">
-                      <Label htmlFor="email">Email</Label>
+                      <Label htmlFor="email">{t("contact.form.fields.email.label")}</Label>
-                      <Input id="email" type="email" placeholder="you@email.com" required />
+                      <Input id="email" type="email" placeholder={t("contact.form.fields.email.placeholder")} required />
                     </div>
 
                     <div className="space-y-2">
-                      <Label htmlFor="subject">Subject</Label>
+                      <Label htmlFor="subject">{t("contact.form.fields.subject.label")}</Label>
-                      <Input id="subject" placeholder="How can we help?" required />
+                      <Input id="subject" placeholder={t("contact.form.fields.subject.placeholder")} required />
                     </div>
 
                     <div className="space-y-2">
-                      <Label htmlFor="message">Message</Label>
+                      <Label htmlFor="message">{t("contact.form.fields.message.label")}</Label>
-                      <Textarea id="message" placeholder="Describe your question or suggestion..." rows={5} required />
+                      <Textarea
+                        id="message"
+                        placeholder={t("contact.form.fields.message.placeholder")}
+                        rows={5}
+                        required
+                      />
                     </div>
 
                     <Button type="submit" className="w-full cursor-pointer" disabled={submitted}>
-                      {submitted ? "Message sent!" : "Send message"}
+                      {submitted ? t("contact.form.actions.success") : t("contact.form.actions.submit")}
                     </Button>
                   </form>
                 </CardContent>
@@ -80,14 +87,14 @@ export default function ContactPage() {
               {/* Contact Info */}
               <div className="space-y-8">
                 <div>
-                  <h2 className="text-2xl font-bold mb-6">Other ways to reach us</h2>
+                  <h2 className="text-2xl font-bold mb-6">{t("contact.info.title")}</h2>
                   <div className="space-y-6">
                     <div className="flex items-start gap-4">
                       <div className="p-3 rounded-lg bg-primary/10">
                         <Mail className="h-5 w-5 text-primary" />
                       </div>
                       <div>
-                        <h3 className="font-semibold mb-1">Email</h3>
+                        <h3 className="font-semibold mb-1">{t("contact.info.email.title")}</h3>
                         <p className="text-sm text-muted-foreground">hello@gohorsejobs.com</p>
                       </div>
                     </div>
@@ -97,7 +104,7 @@ export default function ContactPage() {
                         <Phone className="h-5 w-5 text-primary" />
                       </div>
                       <div>
-                        <h3 className="font-semibold mb-1">Phone</h3>
+                        <h3 className="font-semibold mb-1">{t("contact.info.phone.title")}</h3>
                         <p className="text-sm text-muted-foreground">(11) 9999-9999</p>
                       </div>
                     </div>
@@ -107,7 +114,7 @@ export default function ContactPage() {
                         <MapPin className="h-5 w-5 text-primary" />
                       </div>
                       <div>
-                        <h3 className="font-semibold mb-1">Address</h3>
+                        <h3 className="font-semibold mb-1">{t("contact.info.address.title")}</h3>
                         <p className="text-sm text-muted-foreground">
                           1000 Paulista Ave
                           <br />
@@ -121,8 +128,8 @@ export default function ContactPage() {
                         <MessageSquare className="h-5 w-5 text-primary" />
                       </div>
                       <div>
-                        <h3 className="font-semibold mb-1">Support</h3>
+                        <h3 className="font-semibold mb-1">{t("contact.info.support.title")}</h3>
-                        <p className="text-sm text-muted-foreground">Monday to Friday, 9am to 6pm</p>
+                        <p className="text-sm text-muted-foreground">{t("contact.info.support.description")}</p>
                       </div>
                     </div>
                   </div>
@@ -130,12 +137,10 @@ export default function ContactPage() {
 
                 <Card className="bg-muted/50">
                   <CardContent className="pt-6">
-                    <h3 className="font-semibold mb-2">Frequently Asked Questions</h3>
+                    <h3 className="font-semibold mb-2">{t("contact.faq.title")}</h3>
-                    <p className="text-sm text-muted-foreground mb-4">
+                    <p className="text-sm text-muted-foreground mb-4">{t("contact.faq.description")}</p>
-                      Before reaching out, check our FAQ section. Your question may already be answered there.
-                    </p>
                     <Button variant="outline" className="w-full cursor-pointer bg-transparent">
-                      View FAQ
+                      {t("contact.faq.button")}
                     </Button>
                   </CardContent>
                 </Card>

frontend/src/i18n/en.json

@@ -6,6 +6,35 @@
     "login": "Login",
     "register": "Register"
   },
+  "contact": {
+    "hero": {
+      "title": "Get in Touch",
+      "subtitle": "Have a question or suggestion? We are here to help. Reach out anytime."
+    },
+    "form": {
+      "title": "Send a message",
+      "description": "Fill out the form and we will get back to you soon.",
+      "fields": {
+        "name": { "label": "Full name", "placeholder": "Your name" },
+        "email": { "label": "Email", "placeholder": "you@email.com" },
+        "subject": { "label": "Subject", "placeholder": "How can we help?" },
+        "message": { "label": "Message", "placeholder": "Describe your question or suggestion..." }
+      },
+      "actions": { "submit": "Send message", "success": "Message sent!" }
+    },
+    "info": {
+      "title": "Other ways to reach us",
+      "email": { "title": "Email" },
+      "phone": { "title": "Phone" },
+      "address": { "title": "Address" },
+      "support": { "title": "Support", "description": "Monday to Friday, 9am to 6pm" }
+    },
+    "faq": {
+      "title": "Frequently Asked Questions",
+      "description": "Before reaching out, check our FAQ section. Your question may already be answered there.",
+      "button": "View FAQ"
+    }
+  },
   "home": {
     "hero": {
       "title": "Find the right job, the simple way",

frontend/src/i18n/es.json

@@ -6,6 +6,35 @@
     "login": "Ingresar",
     "register": "Registrarse"
   },
+  "contact": {
+    "hero": {
+      "title": "Ponte en contacto",
+      "subtitle": "¿Tienes una pregunta o sugerencia? Estamos aquí para ayudarte. Contáctanos en cualquier momento."
+    },
+    "form": {
+      "title": "Enviar un mensaje",
+      "description": "Completa el formulario y te responderemos pronto.",
+      "fields": {
+        "name": { "label": "Nombre completo", "placeholder": "Tu nombre" },
+        "email": { "label": "Correo electrónico", "placeholder": "tu@email.com" },
+        "subject": { "label": "Asunto", "placeholder": "¿Cómo podemos ayudar?" },
+        "message": { "label": "Mensaje", "placeholder": "Describe tu pregunta o sugerencia..." }
+      },
+      "actions": { "submit": "Enviar mensaje", "success": "¡Mensaje enviado!" }
+    },
+    "info": {
+      "title": "Otras formas de contactarnos",
+      "email": { "title": "Correo electrónico" },
+      "phone": { "title": "Teléfono" },
+      "address": { "title": "Dirección" },
+      "support": { "title": "Soporte", "description": "Lunes a viernes, de 9 a 18 h" }
+    },
+    "faq": {
+      "title": "Preguntas frecuentes",
+      "description": "Antes de contactarnos, revisa nuestra sección de preguntas frecuentes. Tu duda puede estar allí.",
+      "button": "Ver preguntas frecuentes"
+    }
+  },
   "home": {
     "hero": {
       "title": "Encuentra el empleo correcto, de forma sencilla",

frontend/src/i18n/pt-BR.json

@@ -6,6 +6,35 @@
     "login": "Entrar",
     "register": "Cadastrar"
   },
+  "contact": {
+    "hero": {
+      "title": "Fale conosco",
+      "subtitle": "Tem alguma dúvida ou sugestão? Estamos aqui para ajudar. Entre em contato quando quiser."
+    },
+    "form": {
+      "title": "Envie uma mensagem",
+      "description": "Preencha o formulário e responderemos em breve.",
+      "fields": {
+        "name": { "label": "Nome completo", "placeholder": "Seu nome" },
+        "email": { "label": "E-mail", "placeholder": "voce@email.com" },
+        "subject": { "label": "Assunto", "placeholder": "Como podemos ajudar?" },
+        "message": { "label": "Mensagem", "placeholder": "Descreva sua dúvida ou sugestão..." }
+      },
+      "actions": { "submit": "Enviar mensagem", "success": "Mensagem enviada!" }
+    },
+    "info": {
+      "title": "Outras formas de falar com a gente",
+      "email": { "title": "E-mail" },
+      "phone": { "title": "Telefone" },
+      "address": { "title": "Endereço" },
+      "support": { "title": "Suporte", "description": "Segunda a sexta, das 9h às 18h" }
+    },
+    "faq": {
+      "title": "Perguntas frequentes",
+      "description": "Antes de entrar em contato, confira nossa seção de FAQ. Sua dúvida pode já estar respondida lá.",
+      "button": "Ver FAQ"
+    }
+  },
   "home": {
     "hero": {
       "title": "Encontre o emprego certo, de forma simples",