✨ Add a page for staben (#1193)

frontend/components/Nolla/layout.tsx

@@ -69,14 +69,15 @@ export const useNavItems = () => {
       route: routes.nolla.studenthealth,
     },
     { title: translate('nav.faq'), route: routes.nolla.faq },
-    { title: translate('nav.packinglist'), route: routes.nolla.packinglist },
+    // { title: translate('nav.packinglist'), route: routes.nolla.packinglist },
     // {
     //   title: translate('nav.registration.title'),
     //   desc: translate('nav.registration.desc'),
     //   route: routes.nolla.registration,
     // },
     // { title: translate('nav.accomodation'), route: routes.nolla.accomodation },
-    // { title: translate('nav.pepparna'), route: routes.nolla.pepparna },
+    { title: translate('nav.staben'), route: routes.nolla.staben },
+    { title: translate('nav.pepparna'), route: routes.nolla.pepparna },
     // { title: translate('nav.checklist'), route: routes.nolla.checklist },
   ];
 };

frontend/components/Nolla/locales/en.tsx

@@ -24,6 +24,7 @@ export default {
     packinglist: 'Luggage',
     checklist: 'Checklist',
     pepparna: 'The Peppers',
+    staben: 'Staben',
     studenthealth: 'Well-being',
     faq: 'FAQ',
     schedule: 'Schedule',
@@ -394,6 +395,23 @@ export default {
     felix:
       "Hola hola, I’m Felix! Nice to meet you! I'm 21 years old and currently in my third year studying Computer Science. My best tip for an enchanting introduction is to eat some delicious green salad and listen to hov22 (probably a favorite band or music). But don't take my word for it; I might be biased. P.S. please, GoG don't raise the prices of the salad!!",
   },
+  staben: {
+    title: 'Staben',
+    text: `Many moons ago, a darkness shrouded the initiation. Servers crashed, viruses spread, and code refused to compile. The moon's light couldn't shine through the night on its own. The new students were left alone, fumbling in the darkness.
+    To create a guiding light for the students, the moon gathered its strength and took on the form of the Staben. The six were endowed with powers from the different phases to collectively spread their light and combat the darkness.
+    Each member contributed their unique knowledge and abilities to fight the perpetually dark night and guide the newcomers. Their arrival brought hope and wisdom to those embarking on their journey.`,
+    zira: 'Born from the full moon, Zira Ca||isto emerged, the leader of Staben. Clad in ethereal white that shimmers like moonlight, she radiates a sense of completeness and tranquility. Like a beacon in the darkness, she shines with her powerful light. Her determination and wisdom, akin to the strength of the full moon, guide the students with conviction and compassion.',
+    hyperion:
+      'Mysterious and cloaked in darkness, HyperI/On eClipse embodies the New Moon and is the counterpart to Zira. HyperI/On helps introduce students to the infinite mysteries of the universe. As the veil of the New Moon is lifted, he reveals the unexplored potentials that lie ahead, encouraging new students to courageously step into the unknown.',
+    aluxio:
+      "Like a radiant light in the darkness, AlUXio Ray manifests the First Quarter and is the half-moon brother to Noctus Aeternum. He is light-hearted and optimistic, always ready to welcome and support new students during the Nollning. AlUXio's presence exudes energy and enthusiasm, inspiring the students to find the light within knowledge and growth.",
+    noctus:
+      'Just as the night sky unfolds over daylight, Noctus AeterNUM personifies the Last Quarter and is the half-moon brother to Aluxio Ray. Noctus carries a gentle wisdom, and his calm and thoughtfulness provide comfort to those overwhelmed by the challenges of Nollningen.',
+    deimos:
+      "DeimOS Valo, the crescent-sister to Adrastea VolatiliON, represents the growing strength and potential within individuals, drawing power from the Waxing Crescent. DeimOS emphasizes the importance of confronting fears and deriving wisdom from life's darker and challenging periods.",
+    adrastea:
+      'Similar to how the glimmer of moonlight remains as the night nears its end, Adrastea VolatiliON personifies the Waning Crescent and is the crescent-sister to DeimOS Valo. Adrastea, like Laplace, embraces the concept of constant evolution and encourages students towards change and transformation.',
+  },
   registration: {
     meaning: {
       title: 'What does this mean?',
@@ -446,13 +464,13 @@ export default {
         of Well-being, Equal Treatment Representatives, Safety Representative,
         and International Representative whi responsible for all international
         matters. Outside the guild, there is also assistance available, such as
-        Studenthälsan (Student Health) at Lund University, LTH's counselors, and
-        the student priests (links to these services can be found below). Your
-        well-being is essential to us, and we want to offer the safest
-        environment possible. So never hesitate to reach out to the organization
-        you feel most comfortable with. You can always talk to the people
-        responsible at an event or within the leadership of the Introduction
-        Committee if you want to talk about anything!
+        Studenthälsan (Student Health) at Lund University, LTH's
+        counselors, and the student priests (links to these services can be
+        found below). Your well-being is essential to us, and we want to offer
+        the safest environment possible. So never hesitate to reach out to the
+        organization you feel most comfortable with. You can always talk to the
+        people responsible at an event or within the leadership of the
+        Introduction Committee if you want to talk about anything!
         <br />
         <a href="https://bit.ly/kontaktatrivsel">bit.ly/kontaktatrivsel</a>
         <br />
@@ -479,11 +497,11 @@ export default {
           Below is a map of the LTH area along with maps of the different floors
           of the E-building. Since the E-building map in the lobby can be a bit
           difficult to read for newcomers, we have chosen to remove everything
-          you probably won&apos;t need to find during your first days here. The most
-          common classrooms and locations you will visit are therefore on the
-          maps. If you still have trouble finding your way, never hesitate to
-          ask one of your mentors; they were once just as confused as you might
-          be right now!
+          you probably won&apos;t need to find during your first days here. The
+          most common classrooms and locations you will visit are therefore on
+          the maps. If you still have trouble finding your way, never hesitate
+          to ask one of your mentors; they were once just as confused as you
+          might be right now!
         </p>
         <p>What are the different classrooms:</p>
         <ul>
@@ -497,8 +515,8 @@ export default {
             programming tutorial sessions here.
           </li>
           <li>
-            E:A and E:B: The main lecture halls, located by the main entrance. E:C is a
-            smaller lecture hall located in the basement.
+            E:A and E:B: The main lecture halls, located by the main entrance.
+            E:C is a smaller lecture hall located in the basement.
           </li>
           <li>
             Alpha, Beta, and Gamma: Tutorial sessions and labs also take place

frontend/components/Nolla/locales/sv.tsx

@@ -24,6 +24,7 @@ export default {
     packinglist: 'Packning',
     checklist: 'Checklista',
     pepparna: 'Pepparna',
+    staben: 'Staben',
     studenthealth: 'Må bra',
     faq: 'FAQ',
     schedule: 'Schema',
@@ -462,6 +463,24 @@ export default {
     felix:
       'Hola hola, namnet är Felix, åldern 21. Jag går just nu tredje året ish på data. Mitt bästa tips för en förtrollande nollning är att käka grönt och gott sallad och dunka hov22, men lyssna inte på mig jag är partisk. P.s snälla gog höj inte priserna på salladen!!',
   },
+  staben: {
+    title: 'Staben',
+    text: `För många månar sedan vilade ett mörker över nollningen. Servrarna kraschade, virus spreds och koden vägrade kompilera. Månens ljus kunde inte på egen hand skina genom natten. De nya studenterna lämnades ensamma, trevande i mörkret.
+    För att skapa ett ledande ljus för studenterna samlade månen sina krafter och tog sig ned i skepnad av Staben. De sex försågs med krafter från de olika faserna för att tillsammans sprida sitt ljus och bekämpa mörkret.
+    Varje medlem bidrog med sin unika kunskap och förmåga till att bekämpa den evigt mörka natten och vägleda nollorna. Deras ankomst förde hopp och visdom till de som börjat sin resa.
+    `,
+    zira: 'Född ur fullmånen, uppstod Zira Ca||isto, ledaren av Staben. Hon är klädd i eteriskt vitt som skimrar som månljuset och utstrålar en känsla av fullkomlighet och lugn. Hon skiner som en fyr i mörkret med sitt kraftfulla ljus. Hennes beslutsamhet och visdom, likt fullmånens styrka, guidar studenterna med övertygelse och medkänsla.',
+    hyperion:
+      'Mystisk och klädd av mörkret, HyperI/On eClipse är förkroppsligandet av Nymånen och motparten av Zira. HyperI/On hjälper introducera studenterna till universums oändliga mysterier. När slöjan av Nymånen skingras avslöjar han de outforskade potentialerna som ligger framför och uppmanar nya studenter att kliva in i det okända med mod.',
+    aluxio:
+      'Som ett strålande ljus i mörkret, gestaltar AlUXio Ray Första kvarteret och är halvmåns-broder till Noctus AeterNUM. Han är entusiastisk och optimistisk, alltid redo att välkomna och stödja nya studenter under nollningen. AlUXios närvaro för med sig energi och entusiasm, vilket inspirerar studenterna att finna ljuset inom kunskap och tillväxt.',
+    noctus: `Precis som natthimlen dras över dagsljuset, är Noctus Aeternum personifieringen av
+    sista kvarteret och är halvmåns-broder till AlUXio Ray. Noctus bär med sig en stillsam visdom, och hans lugn och eftertänksamhet ger tröst till de som känner sig överväldigade av nollningens utmaningar.`,
+    deimos:
+      'DeimOS Valo, månskärs-syster till Adrastea VolatiliON, representerar den växande styrkan och potentialen inom människor och drar sin kraft från den Tilltagande månskäran. DeimOS betonar vikten av att konfrontera rädslor och att hämta visdom från livets mörkare och utmanande perioder.',
+    adrastea:
+      'Likt hur glimten av månskäran återstår när natten närmar sig sitt slut, så personifierar Adrastea VolatiliON den avtagande skäran och är månskärs-syster till DeimOS Valo. Adrastea, likt Laplace, omfamnar tanken på ständig utveckling och uppmanar studenterna till förändring och transformation.',
+  },
   registration: {
     meaning: {
       title: 'Vad betyder detta?',
@@ -569,14 +588,14 @@ export default {
     text: (
       <>
         <p>
-          Nedan följer en karta över LTH-området samt kartor över E-husets
-          olika våningar. Då E-hus-kartan som sitter i foajén kan vara lite
-          svårläst för nollor så har vi valt att ta bort allting som ni
-          troligtvis inte kommer behöva hitta till under er första tid här. De
-          vanligaste salarna och lokalerna ni kommer besöka finns alltså på
-          kartorna. Om ni ändå skulle ha problem att hitta någonstans så var
-          aldrig rädd att fråga en av era phaddrar, de har en gång varit precis
-          lika förvirrade som ni är just nu!
+          Nedan följer en karta över LTH-området samt kartor över E-husets olika
+          våningar. Då E-hus-kartan som sitter i foajén kan vara lite svårläst
+          för nollor så har vi valt att ta bort allting som ni troligtvis inte
+          kommer behöva hitta till under er första tid här. De vanligaste
+          salarna och lokalerna ni kommer besöka finns alltså på kartorna. Om ni
+          ändå skulle ha problem att hitta någonstans så var aldrig rädd att
+          fråga en av era phaddrar, de har en gång varit precis lika förvirrade
+          som ni är just nu!
         </p>
         <p>Vad är de olika salarna:</p>
         <ul>
@@ -585,13 +604,12 @@ export default {
             sitta mycket med er programmering under handledningstiderna.
           </li>
           <li>
-            Planetsalarna: Salar som ex. E:Jupiter, E:Mars. Även här kommer
-            det vara handledningstider i programmering.
+            Planetsalarna: Salar som ex. E:Jupiter, E:Mars. Även här kommer det
+            vara handledningstider i programmering.
           </li>
           <li>
             E:A och E:B: De huvudsakliga föreläsningssalarna, de ligger i
-            foajén. E:C är en mindre förelässningssal som finns i
-            källaren.
+            foajén. E:C är en mindre förelässningssal som finns i källaren.
           </li>
           <li>
             Alfa, Beta och Gamma: Även här sker handledningstillfällen och

frontend/pages/nolla/staben.tsx

@@ -0,0 +1,93 @@
+import { Box, Typography } from '@mui/material';
+import React from 'react';
+import MasonryCard from '~/components/Nolla/Card';
+import ProfileCard from '~/components/Nolla/ProfileCard';
+import NollaLayout from '~/components/Nolla/layout';
+import theme from '~/components/Nolla/theme';
+import useNollaTranslate from '~/components/Nolla/useNollaTranslate';
+import genGetProps from '~/functions/genGetServerSideProps';
+
+function Row({ children }) {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: 'space-evenly',
+        width: '100%',
+        flexWrap: 'wrap',
+        gap: 4,
+      }}
+    >
+      {children}
+    </Box>
+  );
+}
+
+function Staben() {
+  const translate = useNollaTranslate();
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 4,
+      }}
+    >
+      <Box sx={{ maxWidth: '65ch', margin: 'auto' }}>
+        <MasonryCard>
+          <Typography variant="h4">{translate('staben.title')}</Typography>
+          <Typography variant="body1">{translate('staben.text')}</Typography>
+        </MasonryCard>
+      </Box>
+
+      <Row>
+        <ProfileCard
+          name={(
+            <>
+              <div>Øverphøs</div>
+              <div>Zira Ca||isto</div>
+            </>
+          )}
+          desc={translate('staben.zira')}
+          image="/images/nolla/nollning_logo_small.png"
+        />
+        <ProfileCard
+          name="HyperI/On eClipse"
+          desc={translate('staben.hyperion')}
+          image="/images/nolla/nollning_logo_small.png"
+        />
+        <ProfileCard
+          name="Noctus AeterNUM"
+          desc={translate('staben.noctus')}
+          image="/images/nolla/nollning_logo_small.png"
+        />
+        <ProfileCard
+          name="AlUXio Ray"
+          desc={translate('staben.aluxio')}
+          image="/images/nolla/nollning_logo_small.png"
+        />
+        <ProfileCard
+          name="Adrastea VolatiliON"
+          desc={translate('staben.adrastea')}
+          image="/images/nolla/nollning_logo_small.png"
+        />
+        <ProfileCard
+          name="DeimOS Valo"
+          desc={translate('staben.deimos')}
+          image="/images/nolla/nollning_logo_small.png"
+        />
+      </Row>
+    </Box>
+  );
+}
+
+export const getStaticProps = genGetProps(['nolla']);
+
+Staben.getLayout = function getLayout({ children }) {
+  return <NollaLayout>{children}</NollaLayout>;
+};
+
+Staben.theme = theme;
+
+export default Staben;

frontend/routes.ts

@@ -79,6 +79,7 @@ const routes = {
     packinglist: '/nolla/packinglist',
     checklist: '/nolla/checklist',
     pepparna: '/nolla/pepparna',
+    staben: '/nolla/staben',
     studenthealth: '/nolla/studenthealth',
     faq: '/nolla/faq',
     map: '/nolla/map',