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 { Checkbox } from "@/components/ui/checkbox";
import { RichTextEditor } from "@/components/rich-text-editor";
import { useTranslation } from "@/lib/i18n";
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" },
};
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() {
const router = useRouter();
const { locale } = useTranslation();
const pageCopy = contentByLocale[locale];
const [step, setStep] = useState<Step>(1);
const [loading, setLoading] = useState(false);
@ -263,7 +322,7 @@ export default function PostJobPage() {
workMode: "onsite",
status: "review",
questions: null,
languageLevel: job.descriptionLanguage || null,
languageLevel: mapDescriptionLanguageToApi(job.descriptionLanguage) || null,
requirements: {
category: null,
resumeRequirement: job.resumeRequirement,
@ -301,14 +360,14 @@ export default function PostJobPage() {
};
return (
<div className="min-h-screen flex flex-col bg-[#e7e8ec]">
<div className="min-h-screen flex flex-col bg-white">
<Navbar />
<main className="flex-1">
<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">
<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>
<ul className="space-y-4 text-3xl max-w-lg">
@ -334,22 +393,17 @@ export default function PostJobPage() {
/>
</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">
<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>
<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>
<div className="mt-8 flex items-center justify-center gap-2 text-xs md:text-sm">
{[
"Detalhes da vaga",
"Pré-visualização",
"Informações de faturamento",
"Pagamento",
].map((label, index) => {
{pageCopy.steps.map((label, index) => {
const number = (index + 1) as Step;
return (
<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>
<Label>Idioma da descrição da vaga *</Label>
<Label>{pageCopy.languageLabel}</Label>
<select
className="w-full px-3 py-2 border rounded-md bg-white"
value={job.descriptionLanguage}
onChange={(e) => setJob({ ...job, descriptionLanguage: e.target.value })}
>
<option value="">Selecione</option>
<option value="pt">Português</option>
<option value="en">English</option>
<option value="es">Español</option>
<option value="">{pageCopy.selectPlaceholder}</option>
<option value="pt-BR">{pageCopy.languageOptions["pt-BR"]}</option>
<option value="en">{pageCopy.languageOptions.en}</option>
<option value="es">{pageCopy.languageOptions.es}</option>
</select>
<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>
</div>
</div>