immplementerte noen nye elementer

hackerspace-ntnu · Nov 8, 2023 · 88aa44c · 88aa44c
1 parent d4cbde2
commit 88aa44c
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 8 deletions.
diff --git a/src/pages/AboutPage.tsx b/src/pages/AboutPage.tsx
@@ -0,0 +1,36 @@
+import Page from '../structure/Page';
+
+const AboutPage: React.FC = () => {
+  const numbers = Array.from({ length: 5 }, (_, index) => 1 + index);
+
+  return (
+    <Page>
+      <div className='relative px-60'>
+        <div className="flex flex-col items-center custom-height">
+          <p className="text-text-50 font-black text-4xl py-4">Om Oss</p>
+          <p className="mr-auto">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.
+            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.</p>
+          <p className="mr-auto">Kom innom for å se hva vi driver med og slå av en prat.Du finner oss i andre etasje i A-blokka på Realfagbygget, NTNU Gløshaugen.</p>
+        </div>
+        <div className="flex flex-col items-end custom-height py-10">
+          <p className="text-2xl"> Vis i kart</p>
+        </div>
+        <div className="flex flex-col itens-right custom-height py-4">
+          <p className="text-3xl">FAQ's</p>
+          <p>Hvordan blir jeg medlem?</p>
+          <p>Kan jeg bruke 3D-printer?</p>
+          <p>Kan jeg prøve VR spill/utstyr?</p>
+        </div>
+        <div className="flex flex-col items-center custom-height py-16">
+          <p className="text-3xl mb-10">Våre aktive grupper</p>
+          <div style={{ backgroundColor: '#313131' }} className=" p-4 w-full h-24 rounded-lg  mb-4"></div>
+          <div style={{ backgroundColor: '#313131' }} className=" p-4 w-full h-24 rounded-lg  mb-4"></div>
+          <div style={{ backgroundColor: '#313131' }} className=" p-4 w-full h-24 rounded-lg  mb-4"></div>
+
+        </div>
+      </div>
+    </Page>
+  )
+}
+
+export default AboutPage
diff --git a/src/structure/Content.tsx b/src/structure/Content.tsx
@@ -4,6 +4,8 @@ import { Route, Routes } from 'react-router-dom'
 import Header from './Header'
 import Footer from './Footer'
 import Home from '../pages/Home'
+import AboutPage from '../pages/AboutPage'
+
 
 //mport Logo from '../assets/logo.png'
 
@@ -22,7 +24,10 @@ const Content: React.FC<ContentProps> = () => {
       <div className='flex flex-col grow'>
         <Routes>
           <Route path='/'>
-            <Route index element={ <Home /> } />
+            <Route index element={<Home />} />
+          </Route>
+          <Route path='/AboutPage'>
+            <Route index element={<AboutPage />} />
           </Route>
         </Routes>
       </div>

diff --git a/src/structure/Footer.tsx b/src/structure/Footer.tsx
@@ -40,9 +40,9 @@ const Footer: React.FC<FooterProps> = () => {
           </div>
           <div className='space-y-2'>
             <p className='font-bold'>Har du funnet en bug?</p>
-            <p>Send gjerne en mail til DevOps,
-            bruk #dev-public kanalen på Slack,
-            eller gi oss forslag til forbedringer på GitHub.</p>
+            <p>Send gjerne en <button style={{ textDecoration: 'underline' }} onClick={() => window.location.href = 'mailto:[email protected]'}>mail</button> til DevOps,
+              bruk #dev-public kanalen på Slack,
+              eller gi oss forslag til forbedringer på <button style={{ textDecoration: 'underline' }} onClick={() => window.location.href = 'https://github.com/hackerspace-ntnu'}>GitHub</button>.</p>
           </div>
         </div>
         <div className={classNames(footerSectionClasses)}>
@@ -55,12 +55,15 @@ const Footer: React.FC<FooterProps> = () => {
             <p className='font-bold'>Åpningstider</p>
             <p>Alle hverdager, 10:15 - 18:00</p>
           </div>
+          <div className='space-y-2'>
+            <p className='font-bold'>Vaktliste</p>
+          </div>
           <div className='space-y-2'>
             <p className='font-bold'>Kontakt oss</p>
             <a href='mailto:[email protected]'>[email protected]</a>
             <div className='flex flex-row justify-start space-x-8 h-10'>
-              <FaInstagram className='h-full w-10' />
-              <FaFacebook className='h-full  w-10' />
+              <FaInstagram onClick={() => window.location.href = 'https://www.instagram.com/hackerspacentnu/'} className='h-full w-10' />
+              <FaFacebook onClick={() => window.location.href = 'https://www.facebook.com/hackerspacentnu/?locale=nb_NO'} className='h-full  w-10' />
               <FaSlack className='h-full  w-10' />
             </div>
           </div>

diff --git a/src/structure/Header.tsx b/src/structure/Header.tsx
@@ -6,6 +6,8 @@ import { FaMoon, FaSun } from 'react-icons/fa'
 import { useModal } from '../context/modal/ModalHook'
 import Button from '../components/Button'
 
+import { useNavigate } from 'react-router-dom'
+
 
 // Header Interface
 interface HeaderProps {
@@ -17,19 +19,29 @@ const Header: React.FC<HeaderProps> = () => {
   const modal = useModal();
 
   const [dark, setDark] = useState(true);
+  const navigate = useNavigate();
 
   function toggleTheme() {
     setDark(d => !d)
     document.body.classList.toggle("dark")
   }
 
+  const navigateToAboutPage = () => {
+    navigate('/AboutPage');
+  }
+  const navigateToHomePage = () => {
+    navigate('/');
+  }
+
   return (
     <div className='flex flex-row items-center justify-between p-8 h-20 bg-secondary-200 dark:bg-secondary-900'>
       <div className='flex flex-row items-center space-x-8'>
         <img className='h-16 w-16' src={Logo} />
-        <p className='dark:text-text-50 text-text-950 font-black text-3xl'>HACKERSPACE</p>
+        <Button onClick={navigateToHomePage} className='dark:text-text-50 text-text-950 font-black text-3xl'>HACKERSPACE</Button>
       </div>
-      <div className='flex flex-row items-center'>
+      <div className='flex flex-row items-center space-x-4'>
+        <button onClick={navigateToAboutPage}>Om oss</button>
+        <p>Arrangementer</p>
         <button onClick={toggleTheme} className='p-4 h-min rounded-full text-white'>
           {
             dark ? <FaSun /> : <FaMoon />