From a96b3332a7b6a69f05eaaeef424eef65f36ea198 Mon Sep 17 00:00:00 2001
From: Supattra Wongsamal <supattrw@stud.ntnu.no>
Date: Sun, 20 Oct 2024 14:46:37 +0200
Subject: [PATCH] fix: merge conflict

---
 messages/en.json                          |   2 +-
 messages/no.json                          |   2 +-
 src/app/[locale]/(default)/about/page.tsx | 138 ++++++++--------------
 3 files changed, 51 insertions(+), 91 deletions(-)

diff --git a/messages/en.json b/messages/en.json
index d014820..738fe6c 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -61,7 +61,7 @@
     "views": "Views"
   },
   "about": {
-    "whatIsHackerspace": "What is Hackerspace",
+    "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",
diff --git a/messages/no.json b/messages/no.json
index fe52baa..ee0a710 100644
--- a/messages/no.json
+++ b/messages/no.json
@@ -62,7 +62,7 @@
     "views": "Visninger"
   },
   "about": {
-    "whatIsHackerspace": "Hva er Hackerspace",
+    "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",
diff --git a/src/app/[locale]/(default)/about/page.tsx b/src/app/[locale]/(default)/about/page.tsx
index 57e419d..d7a4b43 100644
--- a/src/app/[locale]/(default)/about/page.tsx
+++ b/src/app/[locale]/(default)/about/page.tsx
@@ -18,49 +18,40 @@ export default function AboutPage({
   const t = useTranslations('about');
 
 const cardData = [
+  { id: 1, title: t('example_title'), content: t('example_text'), link: `/${locale}/about/leaderboard`},
+  { id: 2, title: t('example_title'), content: t('example_text'), link: `/${locale}/about/leaderboard`},
+  { id: 3, title: t('example_title'), content: t('example_text'), link: `/${locale}/about/leaderboard`},
+  { id: 3, title: t('example_title'), content: t('example_text'), link: `/${locale}/about/leaderboard`},
+  { id: 3, title: t('example_title'), content: t('example_text'), link: `/${locale}/about/leaderboard`},
+  { id: 3, title: t('example_title'), content: t('example_text'), link: `/${locale}/about/leaderboard`},
+];
+
+const faqItems = [
   {
-    id: 1,
-    title: t('example_title'),
-    content: t('example_text'),
-    
-    link: `/${locale}/about/leaderboard`
-  },
-  {
-    id: 2,
-    title: t('example_title'),
-    content: t('example_text'),
-  
-    link: `/${locale}/about/leaderboard`
-  },
-  {
-    id: 3,
-    title: t('example_title'),
-    content: t('example_text'),
-   
-    link: `/${locale}/about/leaderboard`
-  },
-  {
-    id: 3,
-    title: t('example_title'),
-    content: t('example_text'),
-  
-    link: `/${locale}/about/leaderboard`
+    id: 'item-1',
+    icon: Printer,
+    question: t('canIUseThe3dPriner?'),
+    answer: t.rich('answerCanIUseThe3dPriner', {
+      p1: (chunks) => <p className="p1">{chunks}</p>,
+      p2: (chunks) => <p className="p2">{chunks}</p>
+    })
   },
   {
-    id: 3,
-    title: t('example_title'),
-    content: t('example_text'),
-   
-    link: `/${locale}/about/leaderboard`
+    id: 'item-2',
+    icon: Gamepad2,
+    question: t('canITryVRGames/Equipment?'),
+    answer: t('answerCanITryVRGames/Equipment')
   },
   {
-    id: 3,
-    title: t('example_title'),
-    content: t('example_text'),
-   
-    link: `/${locale}/about/leaderboard`
-  },
-]
+    id: 'item-3',
+    icon: SquareUserRound,
+    question: t('howDoIBecomeAMember?'),
+    answer: t.rich('answerHowDoIBecomeAMember', {
+      p1: (chunks) => <p className="p1">{chunks}</p>,
+      p2: (chunks) => <p className="p2">{chunks}</p>
+    })
+  }
+];
 
   return <div>
     <div className='flex flex-col items-center justify-center mt-7 mb-5'>
@@ -68,74 +59,43 @@ const cardData = [
       src="/about/pizzaWolfs-min.png" 
       alt="pizza wolfs" 
       height={400} 
-      width={400} 
+      width={400}
+      priority 
       />
     </div>
-
     <div>
       <h1 className='dark:text-primary mt-8 mb-4 '> {t('whatIsHackerspace')} </h1>
       <div className='mb-6 text-base'> 
         {t.rich('inforAboutHackerSpace', {
-        p1: (chunks) => <p className="/p1"> {chunks}</p>,
-        p2: (chunks) => <p className="/p2"> {chunks}</p>,
-        p3: (chunks) => <p className="/p3"> {chunks}</p>
+          p1: (chunks) => <p className="p1"> {chunks} </p>,
+          p2: (chunks) => <p className="p2"> {chunks} </p>,
+          p3: (chunks) => <p className="p3"> {chunks} </p>
         })} 
       </div>
     </div>
-    <div className='flex felx-col items-center justify-center '>
+    <div className='flex flex-col items-center justify-center '>
       <Link href="https://link.mazemap.com/PPDMWZlM" passHref target="_blank" rel="noopener noreferrer">
         <Button className=''> <Map className='m-1'/> {t('showMaps')} </Button>
       </Link>
-
     </div>
-
     <div> 
       <h3 className='mt-10'> FAQ's </h3>
-      <Accordion type="single" collapsible className='w-full mb-10'>
-        <AccordionItem value="item-1">
-          <AccordionTrigger> 
-            <div className='flex items-center m-2'>
-              <Printer className='mr-2'/>
-              <h4 className='font-medium text-left'>{t('canIUseThe3dPriner?')}</h4>
-            </div>
-          </AccordionTrigger>
-          <AccordionContent className='text-base m-2'>
-            {t.rich('answerCanIUseThe3dPriner', {
-              p1: (chunks) => <p className="/p1"> {chunks} </p>,
-              p2: (chunks) => <p className="/p2"> {chunks} </p>
-            })}           
-          </AccordionContent>
-        </AccordionItem>
-
-        <AccordionItem value="item-2">
-          <AccordionTrigger> 
-            <div className='flex items-center m-2'> 
-              <Gamepad2 className='mr-2'/>
-              <h4 className='font-medium text-left'>{t('canITryVRGames/Equipment?')}</h4>
-            </div>
-          </AccordionTrigger>
-          <AccordionContent className='text-base m-2'>
-            {t('answerCanITryVRGames/Equipment')}
-          </AccordionContent>
-        </AccordionItem>
-        
-        <AccordionItem value="item-3">
-          <AccordionTrigger> 
-            <div className='flex items-center m-2'> 
-              <SquareUserRound className='mr-2'/>
-              <h4 className='font-medium text-left'>{t('howDoIBecomeAMember?')}</h4>
-            </div>
-          </AccordionTrigger>
-          <AccordionContent className='text-base m-2'> 
-            {t.rich('answerHowDoIBecomeAMember', {
-              p1:  (chucks) => <p className="/p1"> {chucks} </p>,
-              p2:  (chucks) => <p className="/p2"> {chucks} </p>
-            })}
-          </AccordionContent>
-        </AccordionItem>
+      <Accordion type="single" collapsible className="w-full mb-10">
+        {faqItems.map(item => (
+          <AccordionItem key={item.id} value={item.id}>
+            <AccordionTrigger>
+              <div className='flex items-center m-2'>
+                <item.icon className='mr-2' />
+                <h4 className='font-medium text-left'>{item.question}</h4>
+              </div>
+            </AccordionTrigger>
+            <AccordionContent className='text-base m-2'>
+              {item.answer}
+            </AccordionContent>
+          </AccordionItem>
+        ))}
       </Accordion>
     </div>
-
     <div className='w-full relative max-x-xs'>
       <h2 className='items-center content-center text-center'> {t('activeGroup')} </h2>
       <div className='grid gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3'>