About us page and group pages

README.md

@@ -42,7 +42,7 @@ Here is a list of documentation to help you get started:
 ### Other resources
 
 - [Mozilla](https://developer.mozilla.org/en-US/) - Great resource for looking up documentation for web technologies
-- [Can I use](https://caniuse.com/) - Check browser support for different web technologies (especially useful for CSS)
+- [Can I use](htt ps://caniuse.com/) - Check browser support for different web technologies (especially useful for CSS)
 
 ## Icons
 

messages/en.json

@@ -27,7 +27,6 @@
     "navigationMenu": "Navigation menu",
     "news": "News",
     "events": "Events",
-    "storage": "Storage",
     "about": "About",
     "changeLocale": "Change language",
     "toggleTheme": "Toggle theme",
@@ -61,6 +60,99 @@
     "readTime": "{count, plural, =0 {less than a minute} one {# minute} other {# minutes}} read",
     "views": "Views"
   },
+  "about": {
+    "whatIsHackerspace": "What is Hackerspace?",
+    "inforAboutHackerSpace": "<p1> Hackerspace NTNU is a student-driven project open to all students, regardless of study direction or Hackerspace membership. We offer a creative arena where students from different disciplines can get help realizing their ideas in an engaged and inclusive environment. Here, you will find new technology at your disposal, including drones, 3D printers, and Virtual Reality equipment. </p1> <p2> Whether you are a first-year student needing help with your first Arduino project or a fourth-year student wanting to create a 3D model of Trondheim, we can provide both equipment and expertise. We also regularly hold courses for both beginners and advanced students in many exciting subjects. </p2> <p3> Come by to see what we're doing and have a chat. </p3> You can find us on the second floor of the A-block in the Realfagbygget at NTNU Gløshaugen.",
+    "showMaps": "Show map!",
+    "FAQ": "Frequently Asked Questions",
+    "canIUseThe3dPriner?": "Can I use the 3D printer?",
+    "answerCanIUseThe3dPriner": "<p1> All students can use the 3D printers and the rest of the workshop, regardless of whether they are members of Hackerspace or not. We have a reservation system available for all students with FEIDE login from the website's navigation bar. </p1> <p2> Come by during opening hours and get help from one of our members.</p2>",
+    "canITryVRGames/Equipment?": "Can I try VR games/equipment?",
+    "answerCanITryVRGames/Equipment": "Our VR equipment can be borrowed and tried out by all students, regardless of Hackerspace membership. We have a dedicated VR room where you can come and play as long as a Hackerspace member is available for setup and teardown. The equipment can be borrowed through the usual inventory system. Come by during our opening hours if you're interested.",
+    "howDoIBecomeAMember?": "How do I become a member?",
+    "answerHowDoIBecomeAMember": "<p1> Hackerspace has ongoing admissions. You can apply whenever you want. We usually respond within 3 working weeks. </p1> <p2> Note that you do not need membership to borrow equipment or try something cool. Come by for a chat during our opening hours to learn more about our offerings and what it's like to be a member. </p2>",
+    "activeGroup": "Our Active Groups",
+
+    "example_title": "Lorem Ipsum",
+    "example_text": "Lorem ipsum dolor sit amet. Aut rerum illum ut voluptatem enim qui consequatur exercitationem nam molestias fugit est expedita voluptas. Ad quas reiciendis non voluptas recusandae qui optio ratione."
+  },
+  "leaderboard": {
+    "leaderboard": "Leaderboard",
+    "aboutLeaderboard": "The leadership consists of a Leader, Deputy Leader, and Financial Officer in Hackerspace. They ensure that Hackerspace NTNU operates optimally and make decisions and planning for operations with the board.",
+    "leader": "Leader",
+    "deputyLeader": "Deputy Leader",
+    "financialManager": "Financial Manager"
+  },
+  "member_representative": {
+    "information": "<p1> Hackerspace shall have a representative who is appointed during the general assembly. This representative has no voting rights on the board but is a contact person for Hackerspace members regarding issues they do not wish to address directly with the board. The representative has a duty of confidentiality and will, if necessary, relay issues anonymized to the board. </p1> <p2> If you wish to get in touch, the representative is available on Slack. </p2>",
+    "question1": "",
+    "answer1": "",
+    "question2": "",
+    "answer2": "",
+    "question3": "",
+    "answer3": ""
+  },
+  "devops": {
+    "information": "The main tasks of DevOps are to develop and manage Hackerspace's website, but we also work on the operation of infrastructure, databases, servers, and are responsible for various gadgets.",
+    "question1": "Does DevOps requires any programming-knowledge before becoming a member? ",
+    "answer1": "You don't need any programming-knowledge before joing our group. Our group are welcome for everybody who wants to learn. As a new member, you'll go through our 'get-to-know'-program that will show you our prosedure and technoliges that we use. But don't worry, you can take everything in your own tempo!",
+    "question2": "What is the main focus for DevOps this semester?",
+    "answer2": "We are focusing on launching a new website for Hackerspace. The technologies that we use is ....",
+    "question3": "Can I choose what I want to work with?",
+    "answer3": "Yes, of course everybody get to choose the task they want to work with. Prior to our focus on luanching new website, the tasks wil be related to this. But you can also pitche an idea that you want to implement on our website and hear what the rest of the groups think about it.",
+    "leader": "Leader",
+    "deputyLeader": "Deputy Leader",
+    "member": "Member"
+  },
+  "labops": {
+    "aboutLabOps": "The main tasks of LabOps are to run Hackerspace's premises, plan and carry out events, hold stands and run other promotions.",
+    "question1": "",
+    "answer1": "",
+    "question2": "",
+    "answer2": "",
+    "question3": "",
+    "answer3": "",
+    "leader": "Leader",
+    "deputyLeader": "Deputy Leader",
+    "member": "Member"
+  },
+  "breadboard_computer": {
+    "breadboard_computer": "Breadboard Computer",
+    "aboutBreadboardComputer": "",
+    "question1": "",
+    "answer1": "",
+    "question2": "",
+    "answer2": "",
+    "question3": "",
+    "answer3": "",
+    "leader": "Leader",
+    "deputyLeader": "Deputy Leader",
+    "member": "Member"
+  },
+  "game": {
+    "aboutGameDevelopment": "",
+    "question1": "",
+    "answer1": "",
+    "question2": "",
+    "answer2": "",
+    "question3": "",
+    "answer3": "",
+    "leader": "Leader",
+    "deputyLeader": "Deputy Leader",
+    "member": "Member"
+  },
+  "ttrpg": {
+    "aboutTableTopRolePlayingGame": "",
+    "question1": "",
+    "answer1": "",
+    "question2": "",
+    "answer2": "",
+    "question3": "",
+    "answer3": "",
+    "leader": "Leader",
+    "deputyLeader": "Deputy Leader",
+    "member": "Member"
+  },
   "storage": {
     "title": "Storage",
     "searchPlaceholder": "Search for product...",

messages/no.json

@@ -61,6 +61,99 @@
     "readTime": "{count, plural, =0 {mindre enn ett minutt} one {# minutt} other {# minutter}} lesing",
     "views": "Visninger"
   },
+  "about": {
+    "whatIsHackerspace": "Hva er Hackerspace?",
+    "inforAboutHackerSpace": "<p1> Hackerspace NTNU er et studentdrevet prosjekt åpent for alle studenter uansett studieretning eller Hackerspace-medlemsskap. Vi tilbyr en kreativ arena der studenter fra forskjellige linjer kan få hjelp til å realisere idéene sine i et engasjert og inkluderende miljø. Hos oss finner du ny teknologi til din disposisjon, blant annet droner, 3D-printere og Virtual Reality-utstyr. </p1> <p2> Om du er en førsteklassing som trenger hjelp med ditt første Arduino-prosjekt eller en fjerdeklassing som ønsker å lage en 3D-modell av Trondheim, kan vi stille med både utstyr og kompetanse. Vi holder også regelmessig kurs for både nybegynnere og viderekomne innen mange spennende emner. </p2> <p3> Kom innom for å se hva vi driver med og slå av en prat. </p3> Du finner oss i andre etasje i A-blokka på Realfagbygget, NTNU Gløshaugen. ",
+    "showMaps": "Vis kart!",
+    "FAQ": "Ofte stilte spørsmål",
+    "canIUseThe3dPriner?": "Kan jeg bruke 3D-printer?",
+    "answerCanIUseThe3dPriner": "<p1> Alle studenter kan benytte 3D-printere og resten av verkstedet uavhengig av om de er medlem av Hackerspace eller ikke. Vi har et reservasjonssystem tilgjengelig for alle studenter med FEIDE-pålogging fra nettsidens navigasjonsbar. </p1> <p2> Kom innom i åpningstiden og få hjelp av en av våre medlemmer.</p2>",
+    "canITryVRGames/Equipment?": "Kan jeg prøve VR spill/utstyr?",
+    "answerCanITryVRGames/Equipment": "VR utstyret vårt kan lånes og prøves ut av alle studenter uavhengig av medlemskap i Hackerspace. Vi har eget VR-rom der man kan komme og spille så lenge et Hackerspace-medlem er tilgjengelig ved oppsett og avslutning. Utstyret kan lånes ut på vanlig måte gjennom lagersystemet. Kom innom i våre åpningstider om dette interesserer deg.",
+    "howDoIBecomeAMember?": "Hvordan blir jeg medlem?",
+    "answerHowDoIBecomeAMember": "<p1> Hackerspace har løpende opptak. Du kan altså søke når du vil. Vi svarer som regel i løpet av 3 arbeidsuker. </p1> <p2> Merk at du ikke trenger medlemsskap for å låne utstyr eller prøve noe kult. Kom innom for en prat i våre åpningstider for å finne ut mer om vårt tilbud og hvordan det er å være medlem. </p2>",
+    "activeGroup": "Våre aktive grupper",
+
+    "example_title": "Lorem Ipsum",
+    "example_text": "Lorem ipsum dolor sit amet. Aut rerum illum ut voluptatem enim qui consequatur exercitationem nam molestias fugit est expedita voluptas. Ad quas reiciendis non voluptas recusandae qui optio ratione."
+  },
+  "leaderboard": {
+    "leaderboard": "Ledelsen",
+    "aboutLeaderboard": "Ledelsen består av Leder, Nestleder og Økonomiansvarlig i Hackerspace. Disse sørger for at Hackerspace NTNU driftes optimalt og gjennomfører avgjørelser og planlegging av drift med styret.",
+    "leader": "Leder",
+    "deputyLeader": "Nestleder",
+    "financialManager": "Økonomiansvarlig"
+  },
+  "member_representative": {
+    "information": "<p1> Hackerspace skal ha en tillitsvalgt som blir utnevnt under generalforsamlingen. Denne tillitsvalgte har ingen stemme i styret, men er en kontaktperson for medlemmer av Hackerspace for saker de ikke ønsker å ta direkte opp med styret. Tillitsvalgt har taushetsplikt, og vil ved behov videreformidle saker anonymisert til styret. </p1> <p2> Dersom du ønsker å ta kontakt er tillitsvalgt tilgjengelig på Slack. </p2>",
+    "question1": "",
+    "answer1": "",
+    "question2": "",
+    "answer2": "",
+    "question3": "",
+    "answer3": ""
+  },
+  "devops": {
+    "information": "Hovedoppgavene til DevOps er å utvikle og drifte Hackerspace sin nettside, men vi jobber også med drift av infrastruktur, databaser, servere, og har ansvar for diverse dingser.",
+    "question1": "Må jeg kunne programmere for å bli medlem?",
+    "answer1": "Du trenger ingen forskunnskap om programmering for å søke medlemskap i DevOps. Vi tar imot alle så lenge man ønsker å lære! Ny medlem vil gå gjennom vår 'bli kjent'-program hvor man kan bli kjent med vår prosedure og teknologien som vi tar i bruk. Men ikke stress, man kan ta det med eget tempo!",
+    "question2": "Hva er hovedfokus for DevOps i dette semesteret?",
+    "answer2": "Dette semesteret fokuserer vi på å lage ny nettside for Hackerspace. Vi bruker React og .... ",
+    "question3": "Kan jeg velge selv hva jeg vil jobbe med?",
+    "answer3": "Ja, selvfølgelig skal man kunne velge hva man vil jobbe med. Akkurat nå er det ny nettside som er i fokus, dermed vil oppagavene være relatert til dette. Men man kan også pitche noe kult som man ønsker å ha på nettsiden og jobbe med det dersom gruppen er enig om ideet. ",
+    "leader": "Leder",
+    "deputyLeader": "Nestleder",
+    "member": "Medlemmer"
+  },
+  "labops": {
+    "aboutLabOps": "Hovedoppgavene til LabOps er å drifte Hackerspace sine lokaler, planlegge og gjennomføre arrangement, holde stands og drive annen promotering.",
+    "question1": "",
+    "answer1": "",
+    "question2": "",
+    "answer2": "",
+    "question3": "",
+    "answer3": "",
+    "leader": "Leder",
+    "deputyLeader": "Nestleder",
+    "member": "Medlemmer"
+  },
+  "breadboard_computer": {
+    "breadboard_computer": "Breadboard Computer",
+    "aboutBreadboardComputer": "",
+    "question1": "",
+    "answer1": "",
+    "question2": "",
+    "answer2": "",
+    "question3": "",
+    "answer3": "",
+    "leader": "Leder",
+    "deputyLeader": "Nestleder",
+    "member": "Medlemmer"
+  },
+  "game": {
+    "aboutGameDevelopment": "",
+    "question1": "",
+    "answer1": "",
+    "question2": "",
+    "answer2": "",
+    "question3": "",
+    "answer3": "",
+    "leader": "Leder",
+    "deputyLeader": "Nestleder",
+    "member": "Medlemmer"
+  },
+  "ttrpg": {
+    "aboutTableTopRolePlayingGame": "",
+    "question1": "",
+    "answer1": "",
+    "question2": "",
+    "answer2": "",
+    "question3": "",
+    "answer3": "",
+    "leader": "Leder",
+    "deputyLeader": "Nestleder",
+    "member": "Medlemmer"
+  },
   "storage": {
     "title": "Lager",
     "searchPlaceholder": "Søk etter produkt...",

package.json

@@ -22,6 +22,7 @@
     "@aws-sdk/client-s3": "^3.637.0",
     "@hookform/resolvers": "^3.9.0",
     "@lucia-auth/adapter-drizzle": "^1.1.0",
+    "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
@@ -36,13 +37,16 @@
     "@trpc/client": "^11.0.0-rc.490",
     "@trpc/react-query": "^11.0.0-rc.490",
     "@trpc/server": "^11.0.0-rc.490",
+    "@types/uuid": "^10.0.0",
     "autoprefixer": "^10.4.19",
     "client-only": "^0.0.1",
     "cmdk": "1.0.0",
     "country-flag-icons": "^1.5.12",
     "cva": "^1.0.0-beta.1",
     "date-fns": "^4.1.0",
     "drizzle-orm": "^0.33.0",
+    "embla-carousel-autoplay": "^8.3.0",
+    "embla-carousel-react": "^8.3.0",
     "lucia": "^3.2.0",
     "lucide-react": "^0.396.0",
     "next": "^14.2.10",

src/app/[locale]/(default)/about/LabOps/ClientPage.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { useTranslations } from 'next-intl';
+import { Carousel, CarouselContent, CarouselItem } from '@/components/ui/Carousel';
+import Autoplay from "embla-carousel-autoplay";
+import Image from 'next/image';
+import React from 'react';
+
+const images = [
+  { src: "/unknown.png", alt: "unknown", width: 600, height: 400 },
+  { src: "/mock.jpg", alt: "mock", width: 600, height: 400 },
+  { src: "/bg.jpg", alt: "bg", width: 600, height: 400 },
+  { src: "/about/pizzaWolfs-min.png", alt: "pizzaWolfs", width: 600, height: 400 },
+];
+
+export default function ClientPage({ locale }: { locale: string }) {
+  const t = useTranslations('labops');
+  const plugin = React.useRef(Autoplay({ delay: 2000, stopOnInteraction: true }));
+
+  return (
+      <div className='flex items-center justify-center w-full max-w-full'>
+        <Carousel
+          className="w-full max-w-2xl h-auto"
+          plugins={[plugin.current]}
+          onMouseEnter={plugin.current.stop}
+          onMouseLeave={plugin.current.reset}
+        >
+          <CarouselContent>
+            {images.map((image, index) => (
+              <CarouselItem key={index}>
+                <div className='flex items-center justify-center h-full p-0 m-0'>
+                  <Image 
+                    className='max-w-full max-h-[400px] sm:max-h-[600px] lg:max-h-[800px]'
+                    src={image.src}
+                    alt={image.alt}
+                    width={image.width}
+                    height={image.height}
+                  />
+                </div>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+        </Carousel>
+      </div>
+  )
+}