Merge pull request #72 from rede5/codex/fix-language-layout-and-background-color

Codex-generated pull request

frontend/src/app/jobs/new/page.tsx

@@ -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>