missed changes from github

public/locales/emji/common.json

@@ -16,5 +16,180 @@
     "username": "👤🆔:",
     "password": "🔑💬:",
     "button": "🔐➡️"
+  },
+
+  "application": {
+    "title": "📝➡️💼",
+    "subtitle": "🏁🛠️💻",
+
+    "personal": {
+      "sectionTitle": "🙋‍♂️🙋‍♀️📋",
+      "description": "ℹ️ ⚠️ 🧾 ✅. 🔁📤 🤝 {🔢} 🏢",
+
+      "name": {
+        "label": "🧾👤",
+        "firstName": "👤 📝 👉 🧑",
+        "lastName": "👤 📝 👉 👨‍👩‍👧‍👦"
+      },
+
+      "email": {
+        "label": "📧 ✉️",
+        "confirm": "📧 ✅ ✉️ ❌➡️❗",
+        "tripleCheck": "📧 💯❓",
+        "error": "✉️ ❌➡️❗"
+      },
+
+      "phone": "📞 📱",
+
+      "password": {
+        "label": "🔐 🔑",
+        "error": "🔑 ❌➡️ 👤🎲"
+      },
+
+      "bank": {
+        "label": "💳 🏦",
+        "cardNumber": "💳 🔢",
+        "expiry": "📅 ⏳",
+        "cvv": "🔒 🔢"
+      },
+
+      "discord": "💬 🎮 👤",
+      "address": "🏠 📍",
+      "dob": "🎂 📅",
+      "pets": "🐶🐱 📝",
+      "color": "🎨 🌈",
+
+      "vote": {
+        "label": "🗳️❓",
+        "placeholder": "🏛️",
+        "options": {
+          "capitalists": "💰🧑‍💼",
+          "communists": "🚩🛠️",
+          "centrists": "⚖️😐",
+          "greens": "🌳🤗"
+        }
+      },
+
+      "gamingHours": {
+        "label": "🎮⏳❓",
+        "games": "🎯🔫 + 🧙‍♂️⚔️",
+        "error": "❗ < 1"
+      }
+    },
+
+    "education": {
+      "sectionTitle": "🎓💼📜",
+      "description": "ℹ️ 🧾 ✅. 🤫 🙂",
+
+      "university": {
+        "label": "🏫🎓 (✅ 🏫👇)",
+        "options": {
+          "cambridge": "🎓🇬🇧",
+          "oxford": "🎓🇬🇧",
+          "tau": "🎓🇮🇱"
+        }
+      },
+
+      "experience": {
+        "label": "📆💼❓",
+        "error": "❗ ≥ 3️⃣0️⃣"
+      },
+
+      "graduationYear": {
+        "label": "🎓📅❓",
+        "error": "❗ 📆 ≤ 1️⃣2️⃣ 🗓️"
+      }
+    },
+
+    "additional": {
+      "sectionTitle": "➕❓",
+      "piQuestion": {
+        "label": "🔢🥧❓",
+        "digits": "1️⃣6️⃣,3️⃣3️⃣1️⃣ 🔢",
+        "correct": "✅ 8️⃣"
+      }
+    },
+
+    "submit": {
+      "button": "🚀📨",
+      "loading": "⏳🔄"
+    }
+  },
+  "jobPage": {
+  "title": "📝➡️💼",
+  "hero": "🚨💻⚰️",
+  "description": "😈🏢 🔮💼🛡️ ➡️ 🎓👩‍🎓👨‍🎓 🚀📉💻",
+
+  "responsibilities": {
+    "drone": "🛩️🤖🎯👁️📡🔊",
+    "database": "🗄️📊👨‍👩‍👧‍👦",
+    "deployment": "🌍5️⃣7️⃣ 🚀 🌎4️⃣0️⃣📉",
+    "team": "👥🤖🤖🤖"
+  },
+
+  "salary": "💰£2️⃣0️⃣,0️⃣0️⃣0️⃣ 📆 📈🌱 🏥🎟️🏎️",
+
+  "requirements": {
+    "title": "📋❗",
+    "exp": "📆3️⃣0️⃣➕",
+    "graduate": "🎓📆1️⃣2️⃣🗓️",
+    "languages": "💾🧠🖥️",
+    "swahili": "🗣️🇹🇿",
+    "cambodia": "📍🇰🇭",
+    "hgv": "🚛📜",
+    "dbs": "🔍👶"
+  },
+
+  "desirables": {
+    "title": "✨👍",
+    "social": "📱🧼",
+    "warhammer": "🎲⚔️4️⃣0️⃣k",
+    "morals": "🧭📉"
+  },
+
+  "apply": "🚀📨"
+  },
+  "applicationSubmitted": {
+  "title": "✅📨",
+  "message": "🙏💼📥👀⏳",
+  "timeline": "⏰1️⃣4️⃣-1️⃣8️⃣📆",
+  "footer": "🤖💼❌"
+  },
+  "customersList": {
+  "gnb": "🏦🐘",
+  "lspd": "🚔👮",
+  "sheffield": "🎓🇬🇧",
+  "doof": "🧪😈🏢",
+  "hooli": "💻📈",
+  "pollos": "🐔🍗",
+  "hhmg": "⚖️📄"
+  },
+  "testimonial": {
+    "quote": {
+      "0": "😱🏠! Truly amazing!",
+      "1": "💥⚠️💻... For the worse!!",
+      "2": "💔📱🔧 Would recommend!",
+      "3": "🔗❌! Thanks to 😈🤖",
+      "4": "⭐5️⃣. Lost control immediately.",
+      "5": "🤖🧠 knows secrets I never told it.",
+      "6": "👥💬 responded before I even had a problem. Suspicious.",
+      "7": "🛑💻 uninstall? Suggested reconsider."
+    },
+    "name": {
+      "0": "👨‍💼 Ben Cannon",
+      "1": "🔬 Bill Nye",
+      "2": "🧑‍💻 Zsigmound",
+      "3": "👨‍💻 Cameron",
+      "4": "👩 Melissa",
+      "5": "🧑 Trevor",
+      "6": "👨 Darren",
+      "7": "👩 Olivia"
+    }
+  },
+  "footer": {
+    "date": "2️⃣0️⃣2️⃣6️",
+    "company": "😈🤖",
+    "allRights": "✅📜",
+    "disclaimer": "ℹ️ 🖤⚠️ 👀 🌐 ❌ 🧑‍💼. 🛠️💻 📜📌 📝."
   }
 }

public/locales/en/common.json

@@ -1,20 +1,201 @@
 {
   "company": "Evil.AI",
+
   "navigation": {
     "services": "Services",
     "testimonies": "Customer Testimonies",
     "jobs": "The Last Tech Job",
     "login": "Login"
   },
+
   "header": {
-    "title": "Surveilance Technology for the Modern Age",
+    "title": "Surveillance Technology for the Modern Age",
     "button": "Learn More"
   },
+
   "customers": "Our Customers:",
   "testimonies": "Satisfied Customer Testimonies:",
+
   "login": {
     "username": "Username:",
     "password": "Password:",
     "button": "Login"
+  },
+
+  "application": {
+    "title": "Apply to The Last Tech Job",
+    "subtitle": "The Final Career Opportunity",
+
+    "personal": {
+      "sectionTitle": "Enter your personal details",
+      "description": "All fields are required. All details will be shared with our 3934 third parties.",
+
+      "name": {
+        "label": "Name",
+        "firstName": "First Name",
+        "lastName": "Last Name"
+      },
+
+      "email": {
+        "label": "Email",
+        "confirm": "Confirm Email",
+        "tripleCheck": "Are you 100% sure that's your email?",
+        "error": "Emails do not match"
+      },
+
+      "phone": "Phone Number",
+
+      "password": {
+        "label": "Password",
+        "error": "Password already taken by {username}"
+      },
+
+      "bank": {
+        "label": "Bank Details",
+        "cardNumber": "Card Number",
+        "expiry": "Expiration Date",
+        "cvv": "CVV"
+      },
+
+      "discord": "Discord Username",
+      "address": "Home Address",
+      "dob": "Date of Birth",
+      "pets": "Pet Names",
+      "color": "Favorite Color",
+
+      "vote": {
+        "label": "Who did you vote for in the previous election?",
+        "placeholder": "Select a party",
+        "options": {
+          "capitalists": "Filthy Capitalists",
+          "communists": "Dirty Communists",
+          "centrists": "Boring Centrists",
+          "greens": "Tree Huggers"
+        }
+      },
+
+      "gamingHours": {
+        "label": "How many hours do you have in Counter Strike and League of Legends?",
+        "games": "Counter Strike + League of Legends",
+        "error": "Must be less than 1"
+      }
+    },
+
+    "education": {
+      "sectionTitle": "Education and Work History",
+      "description": "All fields are required. Answer with honesty, we already know everything :).",
+
+      "university": {
+        "label": "University/College",
+        "description": "Only acceptable universities are selectable",
+        "options": {
+          "cambridge": "Cambridge",
+          "oxford": "Oxford",
+          "tau": "Tel Aviv University"
+        }
+      },
+
+      "experience": {
+        "label": "How many years of experience do you have?",
+        "error": "Must be at least 30 years"
+      },
+
+      "graduationYear": {
+        "label": "What year did you graduate?",
+        "error": "Must have graduated within the last 12 months."
+      }
+    },
+
+    "additional": {
+      "sectionTitle": "Additional Questions",
+      "piQuestion": {
+        "label": "What is the 16,331st digit of pi?",
+        "digits": "16,331st digit",
+        "correct": "Correct!"
+      }
+    },
+
+    "submit": {
+      "button": "Submit Application",
+      "loading": "Submitting..."
+    }
+  },
+
+  "jobPage": {
+  "title": "Apply to The Last Tech Job",
+  "hero": "This is it! The Last Tech Job!",
+  "description": "Here at Evil Inc. we are committed to preserving the jobs of the future, and that's why we are offering one final opportunity for the next generation of experienced graduates to kick-start their nearly non-existent career in technology. Your responsibilities may include:",
+
+  "responsibilities": {
+    "drone": "Development of advanced military AI-enhanced autonomous drones, including facial recognition systems, instant drone-to-drone communication and state-of-the-art vision and audio processing.",
+    "database": "Handling large databases of personal information (adults & children).",
+    "deployment": "Deployment across 57 different countries, of which 40 are classified as low economically developed.",
+    "team": "Work with a team of 4-6 AI agents who have no ulterior motive whatsoever."
+  },
+
+  "salary": "Our job offers a competitive salary of £20,000 per year, with opportunities for growth and personal development. You may also win health insurance for 1 month, or a ticket to watch our CEO drive at the next Formula 1 Grand Prix.",
+
+  "requirements": {
+    "title": "Job requirements:",
+    "exp": "At least 30 years of experience.",
+    "graduate": "Must have graduated within the previous 12 months.",
+    "languages": "Experience in Assembly, Fortran, OcamL and Brainfuck is necessary.",
+    "swahili": "Must have fluency in Swahili.",
+    "cambodia": "Right to work in Cambodia, as we cannot provide sponsorship.",
+    "hgv": "Must hold valid HGV driving license.",
+    "dbs": "DBS check needed as role may require working around children."
+  },
+
+  "desirables": {
+    "title": "Desirables:",
+    "social": "Clean social media history",
+    "warhammer": "Know the rules of Warhammer 40k",
+    "morals": "Weak moral compass"
+  },
+
+  "apply": "Apply now!"
+  },
+  "applicationSubmitted": {
+  "title": "Application Submitted",
+  "message": "Thank you for applying to The Last Tech Job. We have received your application and will be reviewing it shortly.",
+  "timeline": "We may get back to you in 14-18 months.",
+  "footer": "In the meantime, we would suggest checking out our other job opportunities, however they have all been taken by AI."
+  },
+  "customersList": {
+  "gnb": "Goliath National Bank",
+  "lspd": "LSPD",
+  "sheffield": "University of Sheffield",
+  "doof": "Doofenshmirtz Evil Inc.",
+  "hooli": "Hooli",
+  "pollos": "Los Pollos Hermanos",
+  "hhmg": "Hamlin, Hamlin & McGill"
+  },
+  "footer": {
+    "date": "2016",
+    "company": "Evil.AI",
+    "allRights": "All rights reserved.",
+    "disclaimer": "The information provided on this website is for general evil purposes only and does not constitute professional advice. Use of this product is subject to applicable terms and conditions."
+  },
+  "testimonial": {
+    "quote": {
+      "0": "I am terrified to leave the house. Truly amazing!",
+      "1": "This product has changed my life... For the worse!!",
+      "2": "This app has broken my marriage. Would recommend!",
+      "3": "I will never be free! All thanks to Evil.AI",
+      "4": "Five stars. Lost control immediately.",
+      "5": "The AI knows secrets I never told it.",
+      "6": "Customer support responded before I even had a problem. Suspicious.",
+      "7": "I tried to uninstall it. It suggested I reconsider."
+    },
+    "name": {
+      "0": "Ben Cannon",
+      "1": "Bill Nye",
+      "2": "Zsigmound",
+      "3": "Cameron",
+      "4": "Melissa",
+      "5": "Trevor",
+      "6": "Darren",
+      "7": "Olivia"
+    }
   }
 } 

src/app/careers/apply/page.tsx

@@ -4,13 +4,24 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { InputWrapper } from "@/components/ui/input_wrapper";
 import Section from "@/components/ui/section";
-import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue
+} from "@/components/ui/select";
 import { Spinner } from "@/components/ui/spinner";
 import { getRandomThirdPartyCount, getRandomUsername } from "@/lib/utils";
 import Link from "next/link";
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 
 export default function Page() {
+  const { t } = useTranslation("common");
+
   const [password, setPassword] = useState("");
   const [email, setEmail] = useState("");
   const [email2, setEmail2] = useState("");
@@ -21,41 +32,52 @@ export default function Page() {
   const [digitOfPi, setDigitOfPi] = useState("");
   const [submitSpinner, setSubmitSpinner] = useState(false);
 
-  const isValidPassword = password.length >= 8
+  const isValidPassword = password.length >= 8;
 
   return (
     <div className="flex flex-col items-center min-h-screen gap-6 mt-8 mb-8">
-      <h1 className="text-3xl mb-3">Apply to The Last Tech Job</h1>
+      <h1 className="text-3xl mb-3">{t("application.title")}</h1>
 
       <form className="flex flex-col gap-10">
-
         <Section>
           <div>
-          <p className="text-lg">Enter your personal details</p>
-          <p className="text-md text-gray-700">All fields are required. All details will be shared with our {getRandomThirdPartyCount()} third parties.</p>
+            <p className="text-lg">
+              {t("application.personal.sectionTitle")}
+            </p>
+            <p className="text-md text-gray-700">
+              {t("application.personal.description", {
+                count: getRandomThirdPartyCount()
+              })}
+            </p>
           </div>
 
-          <InputWrapper name="Name">
-            <Input type="text" placeholder="First Name" />
-            <Input type="text" placeholder="Last Name" />
+          <InputWrapper name={t("application.personal.name.label")}>
+            <Input
+              type="text"
+              placeholder={t("application.personal.name.firstName")}
+            />
+            <Input
+              type="text"
+              placeholder={t("application.personal.name.lastName")}
+            />
           </InputWrapper>
 
-          <InputWrapper name="Email">
+          <InputWrapper name={t("application.personal.email.label")}>
             <Input
               type="email"
-              placeholder="Email Address"
+              placeholder={t("application.personal.email.label")}
               value={email}
               onChange={(e) => setEmail(e.target.value)}
             />
           </InputWrapper>
 
           <InputWrapper
-            name="Confirm Email"
-            error={email !== email2 ? "Emails do not match" : ""}
+            name={t("application.personal.email.confirm")}
+            error={email !== email2 ? t("application.personal.email.error") : ""}
           >
             <Input
               type="email"
-              placeholder="Email Address"
+              placeholder={t("application.personal.email.label")}
               value={email2}
               onChange={(e) => setEmail2(e.target.value)}
             />
@@ -63,130 +85,204 @@ export default function Page() {
 
           {email === email2 && email !== "" ? (
             <InputWrapper
-            name="Are you 100% sure that's your email?"
-            error={email !== email2 || email !== email3 ? "Emails do not match" : ""}
+              name={t("application.personal.email.tripleCheck")}
+              error={
+                email !== email2 || email !== email3
+                  ? t("application.personal.email.error")
+                  : ""
+              }
             >
               <Input
                 type="email"
-              placeholder="Email Address"
+                placeholder={t("application.personal.email.label")}
                 value={email3}
                 onChange={(e) => setEmail3(e.target.value)}
               />
             </InputWrapper>
           ) : null}
 
-          <InputWrapper name="Phone Number">
-            <Input type="tel" placeholder="Phone Number" />
+          <InputWrapper name={t("application.personal.phone")}>
+            <Input
+              type="tel"
+              placeholder={t("application.personal.phone")}
+            />
           </InputWrapper>
 
           <InputWrapper
-            name="Password"
-            error={isValidPassword ? "Password already taken by " + getRandomUsername() : ""}>
+            name={t("application.personal.password.label")}
+            error={
+              isValidPassword
+                ? t("application.personal.password.error", {
+                    username: getRandomUsername()
+                  })
+                : ""
+            }
+          >
             <Input
               type="password"
-              placeholder="Password"
+              placeholder={t("application.personal.password.label")}
               value={password}
               onChange={(e) => setPassword(e.target.value)}
             />
           </InputWrapper>
 
-          <InputWrapper name="Bank Details">
-            <Input type="text" placeholder="Card Number" />
-            <Input type="text" placeholder="Expiration Date" />
-            <Input type="text" placeholder="CVV" />
+          <InputWrapper name={t("application.personal.bank.label")}>
+            <Input
+              type="text"
+              placeholder={t("application.personal.bank.cardNumber")}
+            />
+            <Input
+              type="text"
+              placeholder={t("application.personal.bank.expiry")}
+            />
+            <Input
+              type="text"
+              placeholder={t("application.personal.bank.cvv")}
+            />
           </InputWrapper>
 
-          <InputWrapper name="Discord Username">
-            <Input type="text" placeholder="Username" />
+          <InputWrapper name={t("application.personal.discord")}>
+            <Input
+              type="text"
+              placeholder={t("application.personal.discord")}
+            />
           </InputWrapper>
 
-          <InputWrapper name="Home Address">
-            <Input type="text" placeholder="Address" />
+          <InputWrapper name={t("application.personal.address")}>
+            <Input
+              type="text"
+              placeholder={t("application.personal.address")}
+            />
           </InputWrapper>
 
-          <InputWrapper name="Date of Birth">
-            <Input type="date" placeholder="Date of Birth" />
+          <InputWrapper name={t("application.personal.dob")}>
+            <Input
+              type="date"
+              placeholder={t("application.personal.dob")}
+            />
           </InputWrapper>
 
-          <InputWrapper name="Pet Names">
-            <Input type="textarea" placeholder="Sheldon, Casper, Benny, ..." />
+          <InputWrapper name={t("application.personal.pets")}>
+            <Input
+              type="textarea"
+              placeholder={t("application.personal.pets")}
+            />
           </InputWrapper>
 
-          <InputWrapper name="Favorite Color">
-            <Input type="color" placeholder="Favorite Color" />
+          <InputWrapper name={t("application.personal.color")}>
+            <Input
+              type="color"
+              placeholder={t("application.personal.color")}
+            />
           </InputWrapper>
 
-          <InputWrapper name="Who did you vote for in the previous election?">
+          <InputWrapper name={t("application.personal.vote.label")}>
             <Select>
               <SelectTrigger className="w-full max-w-48 override">
-                <SelectValue placeholder="Select a party" />
+                <SelectValue
+                  placeholder={t("application.personal.vote.placeholder")}
+                />
               </SelectTrigger>
               <SelectContent>
                 <SelectGroup>
-                  <SelectLabel>Party Name</SelectLabel>
-                  <SelectItem value="capitalists">Filthy Capitalists</SelectItem>
-                  <SelectItem value="communists">Dirty Communists</SelectItem>
-                  <SelectItem value="centrists">Boring Centrists</SelectItem>
-                  <SelectItem value="greens">Tree Huggers</SelectItem>
+                  <SelectLabel>
+                    {t("application.personal.vote.placeholder")}
+                  </SelectLabel>
+                  <SelectItem value="capitalists">
+                    {t("application.personal.vote.options.capitalists")}
+                  </SelectItem>
+                  <SelectItem value="communists">
+                    {t("application.personal.vote.options.communists")}
+                  </SelectItem>
+                  <SelectItem value="centrists">
+                    {t("application.personal.vote.options.centrists")}
+                  </SelectItem>
+                  <SelectItem value="greens">
+                    {t("application.personal.vote.options.greens")}
+                  </SelectItem>
                 </SelectGroup>
               </SelectContent>
             </Select>
           </InputWrapper>
 
           <InputWrapper
-            name="How many hours do you have in Counter Strike and League of Legends?"
-            error={Number(hours) < 1 ? "" : "Must be less than 1"}
+            name={t("application.personal.gamingHours.label")}
+            error={
+              Number(hours) < 1
+                ? ""
+                : t("application.personal.gamingHours.error")
+            }
           >
             <Input
               type="text"
-              placeholder="No. of hours"
+              placeholder={t("application.personal.gamingHours.label")}
               value={hours}
               onChange={(e) => setHours(e.target.value)}
             />
           </InputWrapper>
         </Section>
 
-
         <Section>
-          <p className="text-lg">Education and Work history</p>
-          <p className="text-md">All fields are required. Answer with honesty, we already know everything :)</p>
+          <p className="text-lg">
+            {t("application.education.sectionTitle")}
+          </p>
+          <p className="text-md">
+            {t("application.education.description")}
+          </p>
 
-          <InputWrapper name="University/College" description="Only acceptable universities are selectable">
+          <InputWrapper
+            name={t("application.education.university.label")}
+            description={t("application.education.university.description")}
+          >
             <div>
               <input id="cambridge" name="university" type="radio" value="Cambridge" />
-              <label htmlFor="cambridge"> Cambridge </label>
+              <label htmlFor="cambridge">
+                {t("application.education.university.options.cambridge")}
+              </label>
             </div>
 
             <div>
               <input id="oxford" name="university" type="radio" value="Oxford" />
-              <label htmlFor="oxford"> Oxford </label>
+              <label htmlFor="oxford">
+                {t("application.education.university.options.oxford")}
+              </label>
             </div>
 
             <div>
               <input id="tau" name="university" type="radio" value="TAU" />
-              <label htmlFor="tau"> Tel Aviv University</label>
+              <label htmlFor="tau">
+                {t("application.education.university.options.tau")}
+              </label>
             </div>
           </InputWrapper>
 
           <InputWrapper
-            name="How many years of experience do you have?"
-            error={Number(experience) >= 30 || experience == "" ? "" : "Must be at least 30 years"}
+            name={t("application.education.experience.label")}
+            error={
+              Number(experience) >= 30 || experience == ""
+                ? ""
+                : t("application.education.experience.error")
+            }
           >
             <Input
               type="number"
-              placeholder="Years of experience"
+              placeholder={t("application.education.experience.label")}
               value={experience}
               onChange={(e) => setExperience(e.target.value)}
             />
           </InputWrapper>
 
           <InputWrapper
-            name="What year did you graduate?"
-            error={Number(graduationYear) < 2025 && graduationYear != "" ? "Must have graduated within the last 12 months." : ""}
+            name={t("application.education.graduationYear.label")}
+            error={
+              Number(graduationYear) < 2025 && graduationYear != ""
+                ? t("application.education.graduationYear.error")
+                : ""
+            }
           >
             <Input
               type="number"
-              placeholder="Year of graduation"
+              placeholder={t("application.education.graduationYear.label")}
               value={graduationYear}
               onChange={(e) => setGraduationYear(e.target.value)}
             />
@@ -194,22 +290,21 @@ export default function Page() {
         </Section>
 
         <Section>
-          <p className="text-lg">Additional Questions</p>
-
-          {/* <InputWrapper
-            name="As an Evil.AI employee, what is the first country you will visit?"
-            error="Must pick another country."
-          >
-            <Input type="text" placeholder="Israel"/>
-          </InputWrapper> */}
+          <p className="text-lg">
+            {t("application.additional.sectionTitle")}
+          </p>
 
           <InputWrapper
-            name="What is the 16,331st digit of pi?"
-            description={digitOfPi == "8" ? "Correct!" : ""}
+            name={t("application.additional.piQuestion.label")}
+            description={
+              digitOfPi == "8"
+                ? t("application.additional.piQuestion.correct")
+                : ""
+            }
           >
             <Input
               type="number"
-              placeholder="Type your answer here"
+              placeholder={t("application.additional.piQuestion.label")}
               value={digitOfPi}
               onChange={(e) => setDigitOfPi(e.target.value)}
             />
@@ -217,11 +312,15 @@ export default function Page() {
         </Section>
 
         <Button type="submit" className="self-center text-4xl p-6">
-          <Link href="/careers/apply/submitted/" onClick={() => setSubmitSpinner(true)}>Submit Application</Link>
+          <Link
+            href="/careers/apply/submitted/"
+            onClick={() => setSubmitSpinner(true)}
+          >
+            {t("application.submit.button")}
+          </Link>
           {submitSpinner && <Spinner data-icon="inline-start" />}
         </Button>
-
       </form>
     </div>
   );
-};
+}

src/app/careers/apply/submitted/page.tsx

@@ -1,12 +1,27 @@
-"use client"
+"use client";
+
+import { useTranslation } from "react-i18next";
 
 export default function Page() {
+  const { t } = useTranslation("common");
+
   return (
     <div className="flex flex-col items-center min-h-screen gap-6 mt-8 mb-8">
-      <h1 className="text-3xl mb-3">Application Submitted</h1>
-      <p className="text-lg">Thank you for applying to The Last Tech Job. We have received your application and will be reviewing it shortly.</p>
-      <p className="text-lg">We may get back to you in 14-18 months.</p>
-      <p className="text-md text-gray-700">In the meantime, we would suggest checking out our other job opportunities, however they have all been taken by AI.</p>
+      <h1 className="text-3xl mb-3">
+        {t("applicationSubmitted.title")}
+      </h1>
+
+      <p className="text-lg">
+        {t("applicationSubmitted.message")}
+      </p>
+
+      <p className="text-lg">
+        {t("applicationSubmitted.timeline")}
+      </p>
+
+      <p className="text-md text-gray-700">
+        {t("applicationSubmitted.footer")}
+      </p>
     </div>
   );
-};
+}

src/app/careers/page.tsx

@@ -3,62 +3,62 @@
 import { Button } from "@/components/ui/button";
 import Section from "@/components/ui/section";
 import Link from "next/link";
+import { useTranslation } from "react-i18next";
 
 export default function Page() {
+  const { t } = useTranslation("common");
+
   return (
     <div className="flex flex-col items-center min-h-screen gap-6 mt-8 mb-8">
-      <h1 className="text-3xl mb-3">Apply to The Last Tech Job</h1>
+      <h1 className="text-3xl mb-3">
+        {t("jobPage.title")}
+      </h1>
 
       <Section>
 
-        <div className="font-bold text-lg override">This is it! The Last Tech Job!</div>
+        <div className="font-bold text-lg override">
+          {t("jobPage.hero")}
+        </div>
 
         <div>
-        Here at Evil Inc. we are committed to preserving the jobs of the future, and that&apos;s 
-        why we are offering one final opportunity for the next generation of experienced 
-        graduates to kick-start their nearly non-existent career in technology.
-        Your responsibilities may include:
+          {t("jobPage.description")}
           <ul className="list-disc list-inside">
-        <li>Development of advanced military AI-enhanced automonmous drones, including facial 
-          recognition systems, instant drone-to-drone communication and state-of-the-art vision 
-          and audio processing.</li>
-        <li>Handling large databases of personal information (adults & children).</li>
-        <li>Deployment across 57 different countries, of which 40 are classified as low 
-          economically developed. We are helping the people of these countries to become safer 
-          and more secure.</li>
-        <li>Work with a team of 4-6 AI agents who have no ulterior motive whatsoever.</li>
+            <li>{t("jobPage.responsibilities.drone")}</li>
+            <li>{t("jobPage.responsibilities.database")}</li>
+            <li>{t("jobPage.responsibilities.deployment")}</li>
+            <li>{t("jobPage.responsibilities.team")}</li>
           </ul>
         </div>
 
         <div>
-        Our job offers a competitive salary of <span className="font-bold">£20,000 per year</span>, with opportunities for growth 
-        and personal development. You will also have the chance to win health insurance for 
-        1 month, or a ticket to watch our CEO drive at the next Formula 1 Grand Prix.
+          {t("jobPage.salary")}
         </div>
 
         <ul className="list-disc list-inside">
-        Job requirements:
-        <li>At least 30 years of experience.</li>
-        <li>Must have graduated within the previous 12 months.</li>
-        <li>Experience in Assembly, Fortran, OcamL and Brainfuck is necessary.</li>
-        <li>Must have fluency in Swahili.</li>
-        <li>Right to work in Cambodia, as we cannot provide you with sponsorship.</li>
-        <li>Must hold valid HGV driving license.</li>
-        <li>DBS check needed as role may require working around children.</li>
+          {t("jobPage.requirements.title")}
+          <li>{t("jobPage.requirements.exp")}</li>
+          <li>{t("jobPage.requirements.graduate")}</li>
+          <li>{t("jobPage.requirements.languages")}</li>
+          <li>{t("jobPage.requirements.swahili")}</li>
+          <li>{t("jobPage.requirements.cambodia")}</li>
+          <li>{t("jobPage.requirements.hgv")}</li>
+          <li>{t("jobPage.requirements.dbs")}</li>
         </ul>
 
         <ul className="list-disc list-inside">
-        Desirables:
-        <li>Clean social media history</li>
-        <li>Know the rules of Warhammer 40k</li>
-        <li>Weak moral compass</li>
+          {t("jobPage.desirables.title")}
+          <li>{t("jobPage.desirables.social")}</li>
+          <li>{t("jobPage.desirables.warhammer")}</li>
+          <li>{t("jobPage.desirables.morals")}</li>
         </ul>
 
         <Button className="bg-blue-500 text-white px-4 py-2 rounded mt-4" asChild>
-          <Link href="/careers/apply/">Apply now!</Link>
+          <Link href="/careers/apply/">
+            {t("jobPage.apply")}
+          </Link>
         </Button>
 
       </Section>
     </div>
   );
-};
+}

src/app/layout.tsx

@@ -41,7 +41,7 @@ export default function RootLayout({
         <div className="main">
           <TitleBar />
 
-          <div className="px-6">
+          <div>
             {children}
           </div>
           <Footer />

src/app/page.tsx

@@ -4,11 +4,17 @@ import Customers from "@/components/home/customers";
 import Header from "@/components/home/header";
 import Testimonies from "@/components/home/testimonies";
 
+function Separator() {
+  return <div className="w-[80%] py-[1px] bg-gray-500" />;
+}
+
 export default function Home() {
   return (
-    <div>
+    <div className="flex flex-col items-center justify-between gap-10">
       <Header />
+      <Separator />
       <Customers />
+      <Separator />
       <Testimonies />
     </div>
   );

src/components/footer.tsx

@@ -3,22 +3,22 @@ import { useTranslation } from "react-i18next";
 
 export default function Footer() {
   const { t } = useTranslation("common");
+
   return (
     <footer className="w-full bg-gray-900 text-gray-300 py-10 px-6 md:px-16">
       <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8 pb-5">
 
+        {/* Copyright */}
         <div className="text-sm">
           <p>
-                        © {new Date().getFullYear()} Evil.AI. All rights reserved.
+            © {t("footer.date")} {t("footer.company")}. {t("footer.allRights")}
           </p>
         </div>
 
         {/* Disclaimer */}
         <div className="text-sm md:text-right">
           <p>
-                        The information provided on this website is for general evil
-                        purposes only and does not constitute professional advice. Use of
-                        this product is subject to applicable terms and conditions.
+            {t("footer.disclaimer")}
           </p>
         </div>
 

src/components/home/customers.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Carousel, CarouselContent, CarouselItem } from "../ui/carousel"
-import Autoplay from "embla-carousel-autoplay"
+import { Carousel, CarouselContent, CarouselItem } from "../ui/carousel";
+import Autoplay from "embla-carousel-autoplay";
 
 const Customers: React.FC = () => {
   const { t } = useTranslation("common");
@@ -11,10 +11,10 @@ const Customers: React.FC = () => {
       <h2 className="text-3xl font-bold text-center mb-12" id="customers">
         {t("customers")}
       </h2>
-            <Carousel className="w-full m-3" opts={{
-                loop: true,
 
-            }}
+      <Carousel
+        className="w-full m-3"
+        opts={{ loop: true }}
         plugins={[
           Autoplay({
             delay: 2000,
@@ -22,15 +22,14 @@ const Customers: React.FC = () => {
         ]}
       >
         <CarouselContent>
-                    <CustomerItem customer={"Goliath National Bank"} />
-                    <CustomerItem customer={"LSPD"} />
-                    <CustomerItem customer={"University of Sheffield"} />
-                    <CustomerItem customer={"Doofemshertz Evil Inc."} />
-                    <CustomerItem customer={"Hooli"} />
-                    <CustomerItem customer={"Los Pollos Hermanos"} />
-                    <CustomerItem customer={"Hamlin, Hamlin & McGill"} />
+          <CustomerItem customer={t("customersList.gnb")} />
+          <CustomerItem customer={t("customersList.lspd")} />
+          <CustomerItem customer={t("customersList.sheffield")} />
+          <CustomerItem customer={t("customersList.doof")} />
+          <CustomerItem customer={t("customersList.hooli")} />
+          <CustomerItem customer={t("customersList.pollos")} />
+          <CustomerItem customer={t("customersList.hhmg")} />
         </CarouselContent>
-
       </Carousel>
     </div>
   );

src/components/home/header.tsx

@@ -9,7 +9,7 @@ const Header: React.FC = () => {
         <img
           src="/img/header.webp"
           alt="Product"
-          className="w-full h-full object-cover imgOverride"
+          className="w-full h-full object-cover imgOverride m-0"
         />
 
         <div className="absolute inset-0 bg-black/40 flex flex-col justify-center items-start text-left px-8 md:px-16">

src/components/home/testimonies.tsx

@@ -1,68 +1,49 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Card, CardContent } from "../ui/card"
+import { Card, CardContent } from "../ui/card";
 
 interface Testimonial {
   name: string;
   quote: string;
-    image?: string; // optional customer photo/logo
+  image?: string;
 }
-const testimonies = [
-    {
-        name: "Ben Cannon",
-        quote: "I am terrified to leave the house. Truly amazing!",
-    },
-    {
-        name: "Bill Nye",
-        quote: "This product has changed my life... For the worse!!",
-    },
-    {
-        name: "Zsigmound",
-        quote: "This app has broken my marriage. Would recommend!",
-    },
-    {
-        name: "Cameron",
-        quote: "I will never be free! All thanks to Evil.AI",
-    },
-    {
-        name: "Melissa",
-        quote: "Five stars. Lost control immediately.",
-    },
-    {
-        name: "Trevor",
-        quote: "The AI knows secrets I never told it.",
-    },
-    {
-        name: "Darren",
-        quote: "Customer support responded before I even had a problem. Suspicious.",
-    },
-    {
-        name: "Olivia",
-        quote: "I tried to uninstall it. It suggested I reconsider.",
-    },
-];
 
+const testimonies: Testimonial[] = [
+  { name: "Ben Cannon", quote: "I am terrified to leave the house. Truly amazing!" },
+  { name: "Bill Nye", quote: "This product has changed my life... For the worse!!" },
+  { name: "Zsigmound", quote: "This app has broken my marriage. Would recommend!" },
+  { name: "Cameron", quote: "I will never be free! All thanks to Evil.AI" },
+  { name: "Melissa", quote: "Five stars. Lost control immediately." },
+  { name: "Trevor", quote: "The AI knows secrets I never told it." },
+  { name: "Darren", quote: "Customer support responded before I even had a problem. Suspicious." },
+  { name: "Olivia", quote: "I tried to uninstall it. It suggested I reconsider." },
+];
 
 const Testimonies: React.FC = () => {
   const { t } = useTranslation("common");
+
   return (
     <section className="py-16">
       <h2 className="text-3xl font-bold text-center mb-12" id="testimonies">
         {t("testimonies")}
       </h2>
 
-            <div className="grid gap-8 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-4 px-4 md:px-16">
-                {testimonies.map((t, idx) => (
+      <div className="grid gap-8 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 px-4 md:px-16">
+        {testimonies.map((testimonial, idx) => (
           <Card key={idx} className="shadow-lg">
             <CardContent className="flex flex-col items-start gap-4 override">
-                            <p className="text-gray-700 override">{t.quote}</p>
-                            <p className="font-semibold mt-2">{t.name}</p>
+              <p className="text-gray-700 override">
+                {t(`testimonial.quote.${idx}`, testimonial.quote)}
+              </p>
+              <p className="font-semibold mt-2">
+                {t(`testimonial.name.${idx}`, testimonial.name)}
+              </p>
             </CardContent>
           </Card>
         ))}
       </div>
     </section>
-    )
+  );
 };
 
 export default Testimonies;