fix(frontend): ajustar idiomas e layout da página de publicar vaga

This commit is contained in:
Tiago Yamamoto 2026-02-17 18:48:04 -03:00
parent 14dbb897b5
commit a6c5bae22d

View file

@ -13,6 +13,7 @@ import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { Checkbox } from "@/components/ui/checkbox"; import { Checkbox } from "@/components/ui/checkbox";
import { RichTextEditor } from "@/components/rich-text-editor"; import { RichTextEditor } from "@/components/rich-text-editor";
import { useTranslation } from "@/lib/i18n";
type Step = 1 | 2 | 3 | 4; type Step = 1 | 2 | 3 | 4;
@ -62,8 +63,66 @@ const pricingByCountry: Record<string, { amount: string; duration: string }> = {
JP: { amount: "¥14,900", duration: "30 dias" }, JP: { amount: "¥14,900", duration: "30 dias" },
}; };
const contentByLocale = {
"pt-BR": {
heroTitle: "Anuncie vagas de emprego de forma rápida e eficiente",
freeTitle: "Anuncie a sua vaga de emprego",
freeHighlight: "GRÁTIS!",
resumesText: "Mais de",
resumesHighlight: "50 mil currículos cadastrados",
steps: ["Detalhes da vaga", "Pré-visualização", "Informações de faturamento", "Pagamento"],
languageLabel: "Idioma da descrição da vaga *",
languageHint: "Recomendação: escreva na língua principal do país em que a vaga está sendo anunciada.",
selectPlaceholder: "Selecione",
languageOptions: {
"pt-BR": "Português",
en: "English",
es: "Español",
},
},
en: {
heroTitle: "Post jobs quickly and efficiently",
freeTitle: "Post your job",
freeHighlight: "FOR FREE!",
resumesText: "More than",
resumesHighlight: "50 thousand resumes registered",
steps: ["Job details", "Preview", "Billing information", "Payment"],
languageLabel: "Job description language *",
languageHint: "Recommendation: write in the main language of the country where the job is being advertised.",
selectPlaceholder: "Select",
languageOptions: {
"pt-BR": "Portuguese",
en: "English",
es: "Spanish",
},
},
es: {
heroTitle: "Publique vacantes de forma rápida y eficiente",
freeTitle: "Publique su vacante",
freeHighlight: "¡GRATIS!",
resumesText: "Más de",
resumesHighlight: "50 mil currículums registrados",
steps: ["Detalles de la vacante", "Vista previa", "Información de facturación", "Pago"],
languageLabel: "Idioma de la descripción de la vacante *",
languageHint: "Recomendación: escriba en el idioma principal del país donde se anuncia la vacante.",
selectPlaceholder: "Seleccione",
languageOptions: {
"pt-BR": "Portugués",
en: "Inglés",
es: "Español",
},
},
} as const;
const mapDescriptionLanguageToApi = (language: string) => {
if (language === "pt-BR") return "pt";
return language;
};
export default function PostJobPage() { export default function PostJobPage() {
const router = useRouter(); const router = useRouter();
const { locale } = useTranslation();
const pageCopy = contentByLocale[locale];
const [step, setStep] = useState<Step>(1); const [step, setStep] = useState<Step>(1);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
@ -263,7 +322,7 @@ export default function PostJobPage() {
workMode: "onsite", workMode: "onsite",
status: "review", status: "review",
questions: null, questions: null,
languageLevel: job.descriptionLanguage || null, languageLevel: mapDescriptionLanguageToApi(job.descriptionLanguage) || null,
requirements: { requirements: {
category: null, category: null,
resumeRequirement: job.resumeRequirement, resumeRequirement: job.resumeRequirement,
@ -301,14 +360,14 @@ export default function PostJobPage() {
}; };
return ( return (
<div className="min-h-screen flex flex-col bg-[#e7e8ec]"> <div className="min-h-screen flex flex-col bg-white">
<Navbar /> <Navbar />
<main className="flex-1"> <main className="flex-1">
<div className="grid lg:grid-cols-[40%_60%] min-h-[calc(100vh-64px)]"> <div className="grid lg:grid-cols-[40%_60%] min-h-[calc(100vh-64px)]">
<section className="bg-[#ef9225] text-white px-10 py-14 relative overflow-hidden"> <section className="bg-[#ef9225] text-white px-10 py-14 relative overflow-hidden">
<h1 className="text-5xl font-bold leading-tight max-w-md mb-10"> <h1 className="text-5xl font-bold leading-tight max-w-md mb-10">
Anuncie vagas de emprego de forma rápida e eficiente {pageCopy.heroTitle}
</h1> </h1>
<ul className="space-y-4 text-3xl max-w-lg"> <ul className="space-y-4 text-3xl max-w-lg">
@ -334,22 +393,17 @@ export default function PostJobPage() {
/> />
</section> </section>
<section className="px-6 md:px-12 py-10"> <section className="px-6 md:px-12 py-10 bg-white">
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
<h2 className="text-5xl font-bold text-[#071c3b] text-center leading-tight"> <h2 className="text-5xl font-bold text-[#071c3b] text-center leading-tight">
Anuncie a sua vaga de emprego <br /> GRÁTIS! {pageCopy.freeTitle} <br /> {pageCopy.freeHighlight}
</h2> </h2>
<p className="text-center text-2xl mt-4 text-[#1d2c44]"> <p className="text-center text-2xl mt-4 text-[#1d2c44]">
Mais de <span className="text-[#ef9225] font-semibold">50 mil currículos cadastrados</span> {pageCopy.resumesText} <span className="text-[#ef9225] font-semibold">{pageCopy.resumesHighlight}</span>
</p> </p>
<div className="mt-8 flex items-center justify-center gap-2 text-xs md:text-sm"> <div className="mt-8 flex items-center justify-center gap-2 text-xs md:text-sm">
{[ {pageCopy.steps.map((label, index) => {
"Detalhes da vaga",
"Pré-visualização",
"Informações de faturamento",
"Pagamento",
].map((label, index) => {
const number = (index + 1) as Step; const number = (index + 1) as Step;
return ( return (
<div key={label} className={`px-3 py-1 rounded-full border ${step >= number ? "bg-[#ef9225] text-white border-[#ef9225]" : "bg-white text-[#1d2c44]"}`}> <div key={label} className={`px-3 py-1 rounded-full border ${step >= number ? "bg-[#ef9225] text-white border-[#ef9225]" : "bg-white text-[#1d2c44]"}`}>
@ -678,19 +732,19 @@ export default function PostJobPage() {
)} )}
<div> <div>
<Label>Idioma da descrição da vaga *</Label> <Label>{pageCopy.languageLabel}</Label>
<select <select
className="w-full px-3 py-2 border rounded-md bg-white" className="w-full px-3 py-2 border rounded-md bg-white"
value={job.descriptionLanguage} value={job.descriptionLanguage}
onChange={(e) => setJob({ ...job, descriptionLanguage: e.target.value })} onChange={(e) => setJob({ ...job, descriptionLanguage: e.target.value })}
> >
<option value="">Selecione</option> <option value="">{pageCopy.selectPlaceholder}</option>
<option value="pt">Português</option> <option value="pt-BR">{pageCopy.languageOptions["pt-BR"]}</option>
<option value="en">English</option> <option value="en">{pageCopy.languageOptions.en}</option>
<option value="es">Español</option> <option value="es">{pageCopy.languageOptions.es}</option>
</select> </select>
<p className="text-xs text-muted-foreground mt-1"> <p className="text-xs text-muted-foreground mt-1">
Recomendação: escreva na língua principal do país em que a vaga está sendo anunciada. {pageCopy.languageHint}
</p> </p>
</div> </div>
</div> </div>