Adds and utilizes translations on homepage

osakunta · Sep 20, 2024 · 2670891 · 2670891
1 parent acfd583
commit 2670891
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 47 deletions.
diff --git a/components/Carousel.tsx b/components/Carousel.tsx
@@ -1,9 +1,10 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import React, { useEffect } from "react";
-import Link from "next/link";
+import useTranslate from "@/hooks/useTranslate";
 import { EmblaCarouselType, EmblaOptionsType } from "embla-carousel";
 import useEmblaCarousel from "embla-carousel-react";
 import Image from "next/image";
+import Link from "next/link";
+import React, { useEffect } from "react";
 import { NextButton, PrevButton, usePrevNextButtons } from "./CarouselArrows";
 
 type PropType = {
@@ -36,6 +37,7 @@ const setOpacity = (emblaApi: EmblaCarouselType) => {
 
 const Carousel: React.FC<PropType> = ({ slides, options }) => {
   const [emblaRef, emblaApi] = useEmblaCarousel(options);
+  const t = useTranslate();
 
   const {
     prevBtnDisabled,
@@ -77,7 +79,7 @@ const Carousel: React.FC<PropType> = ({ slides, options }) => {
         <div className="embla__buttons">
           {/* eslint-disable-next-line jsx-a11y/anchor-is-valid -- Placeholder href */}
           <Link href="" className="embla__link">
-            Katso Lisää
+            {t("general:seeMore")}
           </Link>
         </div>
       </div>

diff --git a/hooks/translations.json b/hooks/translations.json
@@ -42,6 +42,93 @@
     "en": "Satakunta Nation",
     "sv": "Satakunta Nation"
   },
+  "general:seeMore": { "fi": "Katso lisää", "en": "See more", "sv": "Se mer" },
+  "homepage:calendarLabelEvents": {
+    "fi": "Tapahtumat",
+    "en": "Events",
+    "sv": "Evenemang"
+  },
+  "homepage:calendarLabelMeeting": {
+    "fi": "Kokoukset",
+    "en": "Meetings",
+    "sv": "Möten"
+  },
+  "homepage:calendarLabelSports": {
+    "fi": "Urheilut",
+    "en": "Sports",
+    "sv": "Sport"
+  },
+  "homepage:contactBoardDescription": {
+    "fi": "Voit ottaa yhteyttä osakunnan hallitukseen sähköpostitse osoitteella [email protected] tai alla olevalla lomakkeella. Halutessasi tavoittaa tietyn virkailijan, virkailijoiden yhteystiedot löytyvät \"Ota yhteyttä\" sivulta.\t ",
+    "en": "You can contact the board by sending an email to [email protected] or by filling out the form. If you need to get in touch with a specific official you can find their contact info on the \"Contact us\" page.\t \t \t \t",
+    "sv": "Du kan kontakta styrelsen via e-post på addressen [email protected] eller via formuläret. Du kan även kontakta specifika funktionärer, vars kontaktuppgifter hittas på \"Ta kontakt\" sidan.\t \t \t \t"
+  },
+  "homepage:contactBoardHeader": {
+    "fi": "Postia hallitukselle",
+    "en": "Contact the board",
+    "sv": "Kontakta styrelsen"
+  },
+  "homepage:contactFormButton": {
+    "fi": "Siiry Lomakkeelle",
+    "en": "Fill out the form",
+    "sv": "Fyll i formuläret"
+  },
+  "homepage:eventsCard": {
+    "fi": "Tapahtumat",
+    "en": "Events",
+    "sv": "Evengemang"
+  },
+  "homepage:harassmentFormDescription": {
+    "fi": "Tällä lomakkeella voit kertoa osakunnalla kokemastasi häirinnästä tai epätasa-arvoisesta kohtelusta. Tiedot käsittelee luottamuksellisesti osakunnan yhdenvertaisuusvastaavana toimiva kuraattori.\t \t \t \t \t",
+    "en": "With this form, you can report any harassment or unequal treatment you have experienced within the student nation. The curator, who serves as the equality officer, will handle the information confidentially.\t \t \t \t \t",
+    "sv": "Med detta formulär kan du anmäla trakasserier eller ojämlik behandling du upplevt inom nationen. Kuratorn, som fungerar som nationens jämställdhetsanvarig, behandlar uppgifterna konfidentiellt.  \t \t \t \t \t"
+  },
+  "homepage:harassmentFormHeader": {
+    "fi": "Härintälomake\t",
+    "en": "Harrassment form\t",
+    "sv": "Trakasserianmälan\t"
+  },
+  "homepage:heroSectionText": {
+    "fi": "Ystävia, tapahtumia ja koti kampissa",
+    "en": "Friends, events and a home in Kamppi",
+    "sv": "Vänner, evengemang och hem i kampen"
+  },
+  "homepage:join": {
+    "fi": "Liity Osakuntaan",
+    "en": "Join the Nation",
+    "sv": "Bli medlem"
+  },
+  "homepage:karhunkierrosHeader": {
+    "fi": "Osakuntalehti Karhunkierros\t",
+    "en": "Nation Magazine: Karhunkierros\t",
+    "sv": "Nations tidning: Karhunkierros\t"
+  },
+  "homepage:livingInfoDescription": {
+    "fi": "Satakuntatalon asuntola sijaitsee loistavalla paikalla aivan Helsingin ydinkeskustan tuntumassa. Eri korkeakoulut ovat hyvien kulkuyhteyksien päässä, ja edulliselle vuokralle saa vastinetta monien etujen muodossa.\t \t \t \t",
+    "en": "The Satakunta House dormitory is located in a great spot in the middle of Helsinki. The Universities are easily accessible with good transport connections, and rent is affordable with many great benefits included.\t \t \t \t",
+    "sv": "Satakunta husets studerandebostäder finns i Helsingfors centrum. Högskolorna är lätta att nå på grund av nära förbindelser till kollektivtrafik. Hyran är förmånlig och inkluderar många bra förmåner.\t \t \t \t"
+  },
+  "homepage:livingInfoHeader": {
+    "fi": "Asuminen Satakuntatalolla",
+    "en": "Live at the Satakunta house",
+    "sv": "Bo på Satakunta huset"
+  },
+  "homepage:memberCard": {
+    "fi": "Liity jäseneksi\t",
+    "en": "Become a member",
+    "sv": "Bli medlem"
+  },
+  "homepage:nationInfoCard": {
+    "fi": "Tietoa osakunnasta",
+    "en": "Nation Info",
+    "sv": "Nations info"
+  },
+  "homepage:newsCard": { "fi": "Uutiset", "en": "News", "sv": "Nyheter" },
+  "homepage:saatioLinkButtonText": {
+    "fi": "Satalinnan säätiö\t",
+    "en": "Satalinna foundation\t",
+    "sv": "Satalinna Stiftelse\t"
+  },
   "nav:archive": { "fi": "Arkisto", "en": "Archive", "sv": "Arkiv" },
   "nav:calendar": { "fi": "Kalenteri", "en": "Calendar", "sv": "Kalender" },
   "nav:contacts": {

diff --git a/lib/LanguageContext.tsx b/lib/LanguageContext.tsx
@@ -21,7 +21,7 @@ export const LanguageContext = createContext<LanguageContextType | null>(null);
 export const LanguageProvider: React.FC<{ children: ReactNode }> = ({
   children,
 }) => {
-  const [language, setLanguage] = useState<Language>("en");
+  const [language, setLanguage] = useState<Language>("fi");
   const value = useMemo(
     () => ({ language, setLanguage }),
     [language, setLanguage],

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -3,6 +3,7 @@ import Carousel from "@/components/Carousel";
 import Navbar, { NavbarProps } from "@/components/Navbar";
 import VerticalCard from "@/components/VerticalCard";
 import WeekCalendar from "@/components/WeekCalendar";
+import useTranslate from "@/hooks/useTranslate";
 import createClient from "@/lib/cmsClient";
 import { useLanguage } from "@/lib/LanguageContext";
 import styles from "@/styles/Home.module.css";
@@ -37,21 +38,22 @@ type HomePageProps = {
 };
 
 export default function Home({ navBar }: HomePageProps) {
+  const t = useTranslate();
   const { language } = useLanguage();
   return (
     <>
       <Head>
-        <title>Satakuntalainen Osakunta</title>
+        <title>{t("general:nation")}</title>
         <link rel="icon" href="/favicon.ico" type="image/x-icon" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       </Head>
       <Navbar links={navBar.links} />
       {/* Hero */}
       <header className={styles.hero}>
-        <h2 className={styles.h2}>Ystäviä, tapahtumia ja koti Kampissa</h2>
+        <h2 className={styles.h2}>{t("homepage:heroSectionText")}</h2>
         <Link href="/nation-info" locale={language} passHref>
           <Button variant="contained" className="button darkBlue">
-            Liity osakuntaan
+            {t("homepage:join")}
           </Button>
         </Link>
       </header>
@@ -61,28 +63,28 @@ export default function Home({ navBar }: HomePageProps) {
           <VerticalCard
             variant="yellow"
             image="/Placeholder_1.png"
-            title="Tietoa osakunnasta"
+            title={t("homepage:nationInfoCard")}
             altText="Placeholder image"
-            href=""
+            href="/nation-info"
           />
           <VerticalCard
             variant="yellow"
             image="/Placeholder_1.png"
-            title="Liity jäseneksi"
+            title={t("homepage:memberCard")}
             altText="Placeholder image"
             href=""
           />
           <VerticalCard
             variant="yellow"
             image="/Placeholder_1.png"
-            title="Tapahtumat"
+            title={t("homepage:eventsCard")}
             altText="Placeholder image"
             href=""
           />
           <VerticalCard
             variant="yellow"
             image="/Placeholder_1.png"
-            title="Uutiset"
+            title={t("homepage:newsCard")}
             altText="Placeholder image"
             href=""
           />
@@ -97,21 +99,11 @@ export default function Home({ navBar }: HomePageProps) {
 
           <article className={styles.livingArticle}>
             <h2 className={styles.livingTitle}>
-              Asuminen
-              <br />
-              satakuntatalolla
+              {t("homepage:livingInfoHeader")}
             </h2>
             <br />
 
-            <p>
-              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eveniet
-              natus dignissimos nobis, soluta repellendus ipsam ducimus omnis
-              quis numquam accusantium, tempora veniam earum provident aut iure
-              assumenda obcaecati nam quas. Lorem ipsum dolor sit amet
-              consectetur adipisicing elit. Error distinctio repudiandae harum
-              est recusandae id nam, debitis minus quod totam? Nostrum suscipit
-              dolor accusamus minima eius libero similique voluptate natus?
-            </p>
+            <p>{t("homepage:livingInfoDescription")}</p>
             <br />
             <br />
             <Link
@@ -122,7 +114,7 @@ export default function Home({ navBar }: HomePageProps) {
               passHref
             >
               <Button variant="contained" className="button lightBlue">
-                Satalinnan säätiö{" "}
+                {t("homepage:saatioLinkButtonText")}
               </Button>
             </Link>
           </article>
@@ -131,26 +123,26 @@ export default function Home({ navBar }: HomePageProps) {
         {/* Calendar */}
         <section className={styles.calendarSection}>
           <span className={styles.sectionContainer}>
-            <h2>Kalenteri</h2>
+            <h2>{t("nav:calendar")}</h2>
             <WeekCalendar />
             <div className={styles.calendarFooter}>
               <ul className={styles.calendarLegend}>
                 <li className={styles.legendItem}>
                   <div className={styles.legendGreen} />
-                  <p>Meetings</p>
+                  <p>{t("homepage:calendarLabelMeeting")}</p>
                 </li>
                 <li className={styles.legendItem}>
                   <div className={styles.legendBlue} />
-                  <p>Events</p>
+                  <p>{t("homepage:calendarLabelEvents")}</p>
                 </li>
                 <li className={styles.legendItem}>
                   <div className={styles.legendOrange} />
-                  <p>Sports</p>
+                  <p>{t("homepage:calendarLabelSports")}</p>
                 </li>
               </ul>
               <Link href="/calendar" locale={language} passHref>
                 <Button variant="contained" className="button darkBlue">
-                  Katso lisää
+                  {t("general:seeMore")}
                 </Button>
               </Link>
             </div>
@@ -159,36 +151,26 @@ export default function Home({ navBar }: HomePageProps) {
         {/* Carousel */}
         <section className={styles.karhunkierros}>
           <span className={styles.carouselContainer}>
-            <h2>Osakuntalehti Karhunkierros</h2>
+            <h2>{t("homepage:karhunkierrosHeader")}</h2>
             <Carousel slides={SLIDES} options={OPTIONS} />
           </span>
         </section>
         {/* Contact */}
         <section className={styles.contact}>
           <div className={styles.contactSectionContainer}>
             <div className={styles.contactInfo}>
-              <h2> Postia hallitukselle</h2>
-              <p>
-                Lorem ipsum dolor, sit amet consectetur adipisicing elit.
-                Asperiores facere at minus officiis nesciunt? Quos labore
-                dolorem et mollitia quia. Recusandae dolores modi quaerat
-                magnam! Autem distinctio ipsa a alias.
-              </p>
+              <h2>{t("homepage:contactBoardHeader")}</h2>
+              <p>{t("homepage:contactBoardDescription")}</p>
               <Button variant="contained" className="button darkBlue">
-                Siiry lomakkeelle
+                {t("homepage:contactFormButton")}
               </Button>
               <br />
               <br />
-              <h2>Häirintälomake</h2>
-              <p>
-                Lorem ipsum dolor, sit amet consectetur adipisicing elit.
-                Asperiores facere at minus officiis nesciunt? Quos labore
-                dolorem et mollitia quia. Recusandae dolores modi quaerat
-                magnam! Autem distinctio ipsa a alias.
-              </p>
+              <h2>{t("homepage:harassmentFormHeader")}</h2>
+              <p>{t("homepage:harassmentFormDescription")}</p>
               <Link href="/harassment-form" locale={language} passHref>
                 <Button variant="contained" className="button darkBlue">
-                  Ota yhteyttä
+                  {t("homepage:contactFormButton")}
                 </Button>
               </Link>
             </div>