Merge pull request #16 from rede5/codex/fix-language-change-in-header
Fix contact page language switching
This commit is contained in:
Tiago Yamamoto
GitHub
commit
28f75e01c6
4 changed files with 118 additions and 26 deletions
|
|
@ -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>
|
||||
<p className="text-lg text-muted-foreground text-pretty">
|
||||
Have a question or suggestion? We are here to help. Reach out anytime.
|
||||
</p>
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-foreground mb-6 text-balance">
|
||||
{t("contact.hero.title")}
|
||||
</h1>
|
||||
<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>
|
||||
<CardDescription>Fill out the form and we will get back to you soon.</CardDescription>
|
||||
<CardTitle>{t("contact.form.title")}</CardTitle>
|
||||
<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>
|
||||
<Input id="name" placeholder="Your name" required />
|
||||
<Label htmlFor="name">{t("contact.form.fields.name.label")}</Label>
|
||||
<Input id="name" placeholder={t("contact.form.fields.name.placeholder")} required />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input id="email" type="email" placeholder="you@email.com" required />
|
||||
<Label htmlFor="email">{t("contact.form.fields.email.label")}</Label>
|
||||
<Input id="email" type="email" placeholder={t("contact.form.fields.email.placeholder")} required />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="subject">Subject</Label>
|
||||
<Input id="subject" placeholder="How can we help?" required />
|
||||
<Label htmlFor="subject">{t("contact.form.fields.subject.label")}</Label>
|
||||
<Input id="subject" placeholder={t("contact.form.fields.subject.placeholder")} required />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="message">Message</Label>
|
||||
<Textarea id="message" placeholder="Describe your question or suggestion..." rows={5} required />
|
||||
<Label htmlFor="message">{t("contact.form.fields.message.label")}</Label>
|
||||
<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>
|
||||
<p className="text-sm text-muted-foreground">Monday to Friday, 9am to 6pm</p>
|
||||
<h3 className="font-semibold mb-1">{t("contact.info.support.title")}</h3>
|
||||
<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>
|
||||
<p className="text-sm text-muted-foreground mb-4">
|
||||
Before reaching out, check our FAQ section. Your question may already be answered there.
|
||||
</p>
|
||||
<h3 className="font-semibold mb-2">{t("contact.faq.title")}</h3>
|
||||
<p className="text-sm text-muted-foreground mb-4">{t("contact.faq.description")}</p>
|
||||
<Button variant="outline" className="w-full cursor-pointer bg-transparent">
|
||||
View FAQ
|
||||
{t("contact.faq.button")}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
Loading…
Reference in a new issue