missed changes from github

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,172 +32,257 @@ 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)}
             />
           </InputWrapper>
 
           {email === email2 && email !== "" ? (
-          <InputWrapper
-            name="Are you 100% sure that's your email?"
-            error={email !== email2 || email !== email3 ? "Emails do not match" : ""}
-          >
-            <Input
-              type="email"
-              placeholder="Email Address"
-              value={email3}
-              onChange={(e) => setEmail3(e.target.value)}
-            />
-          </InputWrapper>
+            <InputWrapper
+              name={t("application.personal.email.tripleCheck")}
+              error={
+                email !== email2 || email !== email3
+                  ? t("application.personal.email.error")
+                  : ""
+              }
+            >
+              <Input
+                type="email"
+                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)} 
+              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>
-          
-          <InputWrapper name="University/College" description="Only acceptable universities are selectable">
+          <p className="text-lg">
+            {t("application.education.sectionTitle")}
+          </p>
+          <p className="text-md">
+            {t("application.education.description")}
+          </p>
+
+          <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>
 
           <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)} 
+              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>
-        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:
-        <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>
-        </ul>
+        <div className="font-bold text-lg override">
+          {t("jobPage.hero")}
         </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.description")}
+          <ul className="list-disc list-inside">
+            <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>
+          {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

@@ -1,15 +1,21 @@
-"use client";
-
-import Customers from "@/components/home/customers";
-import Header from "@/components/home/header";
-import Testimonies from "@/components/home/testimonies";
-
-export default function Home() {
-  return (
-    <div>
-      <Header />
-      <Customers />
-      <Testimonies />
-    </div>
-  );
-}
+"use client";
+
+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 className="flex flex-col items-center justify-between gap-10">
+      <Header />
+      <Separator />
+      <Customers />
+      <Separator />
+      <Testimonies />
+    </div>
+  );
+}