+
+
+
+
+
+
+
+ {
+ title ?
+
+ {title}
+ {
+ required ?
+ *
+ : null
+ }
+
+ : null
+ }
+
+ )
+}
+
+export default Field
diff --git a/src/components/TypeWriter.tsx b/src/components/TypeWriter.tsx
new file mode 100644
index 0000000..37bde63
--- /dev/null
+++ b/src/components/TypeWriter.tsx
@@ -0,0 +1,31 @@
+import { useState, useEffect } from 'react'
+
+// TypeWriter Interface
+interface TypeWriterProps {
+ className?: string,
+ text: string
+ delay: number
+}
+
+// TypeWriter Function: Renders text as if it is being written out.
+const TypeWriter: React.FC
+
+ {
+ error
+ ? {error}
+ : null
+ }
+
+
+
+
+
+ {
+ _icon
+ ?
+
+ <_icon className='h-4 w-4 text-accent-50'/>
+
+ : null
+ }
+
+ {
+ buttons || (type === 'password')
+ ?
+
+ {
+ buttons !== undefined ?
+ buttons.map((value, index) => {
+ return (
+
+ )
+ })
+
+ : null
+ }
+ {
+ type === 'password' ?
+
+ : null
+ }
+
+ : null
+ }
+ {currentText}
+ )
+}
+
+export default TypeWriter
\ No newline at end of file
diff --git a/src/context/modal/ModalContext.ts b/src/context/modal/ModalContext.ts
new file mode 100644
index 0000000..b0a791e
--- /dev/null
+++ b/src/context/modal/ModalContext.ts
@@ -0,0 +1,14 @@
+import { createContext } from 'react';
+
+// Context Interface
+export interface ModalContextType {
+ open: (modalType: string) => void;
+ close: () => void;
+ current: string | null;
+ is_open: boolean;
+}
+
+// Context Creation
+const ModalContext = createContext
+
+
+
+
+ )
+}
+
+export default AuthModal
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
new file mode 100644
index 0000000..9013592
--- /dev/null
+++ b/src/pages/Home.tsx
@@ -0,0 +1,49 @@
+import Bg from '../assets/bg.jpg'
+
+import TypeWriter from '../components/TypeWriter'
+import Page from '../structure/Page';
+
+
+// Home Function: This is the homepage, should be located at (/).
+const Home: React.FC = () => {
+ const numbers = Array.from({ length: 5 }, (_, index) => 1 + index);
+
+ return (
+
+
+
+ 
+
+ Hello
+Some fancy stuff
+ { + numbers.map((i, n) => ( +
+
+ )
+}
+
+export default Content
\ No newline at end of file
diff --git a/src/structure/Footer.tsx b/src/structure/Footer.tsx
new file mode 100644
index 0000000..f52679b
--- /dev/null
+++ b/src/structure/Footer.tsx
@@ -0,0 +1,82 @@
+import classNames from 'classnames';
+import { } from 'react'
+
+import { FaInstagram, FaFacebook, FaSlack } from 'react-icons/fa'
+
+import Logo from '../assets/logo.png'
+
+
+// Footer Interface
+interface FooterProps {
+
+}
+
+// Footer Function: The footer for the website.
+const Footer: React.FC
+
+ )
+}
+
+export default Footer
\ No newline at end of file
diff --git a/src/structure/Header.tsx b/src/structure/Header.tsx
new file mode 100644
index 0000000..787550b
--- /dev/null
+++ b/src/structure/Header.tsx
@@ -0,0 +1,44 @@
+import { useState } from 'react'
+
+import Logo from '../assets/logo.png'
+import { FaMoon, FaSun } from 'react-icons/fa'
+
+import { useModal } from '../context/modal/ModalHook'
+import Button from '../components/Button'
+
+
+// Header Interface
+interface HeaderProps {
+
+}
+
+// Header Function: The header for the website.
+const Header: React.FC
+
+
+
+
+ 
+
+ HACKERSPACE
+
+
+ Har du funnet en bug?
+Send gjerne en mail til DevOps, + bruk #dev-public kanalen på Slack, + eller gi oss forslag til forbedringer på GitHub.
+
+
+
+
+ Verksted
+Realfagbygget, A-blokka
+Høgskoleringen 5, 7034 Trondheim
+
+
+
+ Åpningstider
+Alle hverdager, 10:15 - 18:00
+
+
+ Hackerspace ipsum dolor sit amet, coding enthusiasts consectetur adipiscing elit. Pythno ac volutpat felis. Quisque eget nisi id terminal vehicula suscipit. In hac habitasse machine learning dictumst. Vivamus cursus metus VR tech tristique, fostering creativity elementum libero tristique. Integer sagittis sapien sit amet odio venenatis, programming vitae fringilla ligula convallis. Our dynamic community et arcu at ante rutrum volutpat. Aliquam erat volutpat. Sed id efficitur lorem. Fusce nec ligula ullamcorper, innovation laoreet elit vel, feugiat nulla. Join us today luctus scelerisque ipsum, at facilisis odio. Sed lacinia, cutting-edge
+
+
+ NTNU
+Nettverket KID
+Vilkår for bruk av nettside
+© 2023 Hackerspace NTNU
+
+
+ )
+}
+
+export default Header
\ No newline at end of file
diff --git a/src/structure/Modal.tsx b/src/structure/Modal.tsx
new file mode 100644
index 0000000..915a426
--- /dev/null
+++ b/src/structure/Modal.tsx
@@ -0,0 +1,51 @@
+import React from 'react'
+import ReactModal from 'react-modal';
+
+import { useModal } from '../context/modal/ModalHook';
+
+import { FaTimes } from 'react-icons/fa'
+
+// Modal Interface
+interface ModalProps {
+ title?: string,
+ icon?: React.ReactNode,
+ className?: string,
+ overlayClassName?: string,
+ contentClassName?: string,
+ children?: React.ReactNode
+}
+
+// Modal Function: The base structure for each modal.
+const Modal: React.FC
+
+
+ HACKERSPACE
+
+
+
+
+
+
+
+
+
+ {icon}
+
+
+ {title}
+
+ {children}
+
+
+ {children}
+
+ )
+}
+
+export default Page
\ No newline at end of file
diff --git a/src/tailwind.css b/src/tailwind.css
new file mode 100644
index 0000000..185e40b
--- /dev/null
+++ b/src/tailwind.css
@@ -0,0 +1,143 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+ :root {
+ --text-950: #f2f2f2;
+ --text-900: #e6e6e6;
+ --text-800: #cccccc;
+ --text-700: #b3b3b3;
+ --text-600: #999999;
+ --text-500: #808080;
+ --text-400: #666666;
+ --text-300: #4d4d4d;
+ --text-200: #333333;
+ --text-100: #1a1a1a;
+ --text-50: #0d0d0d;
+
+ --background-50: #f2f2f2;
+ --background-100: #e6e6e6;
+ --background-200: #cccccc;
+ --background-300: #b3b3b3;
+ --background-400: #999999;
+ --background-500: #808080;
+ --background-600: #666666;
+ --background-700: #4d4d4d;
+ --background-800: #333333;
+ --background-900: #1a1a1a;
+ --background-950: #0d0d0d;
+
+ --primary-50: #edfce8;
+ --primary-100: #daf9d2;
+ --primary-200: #b6f3a5;
+ --primary-300: #91ed78;
+ --primary-400: #6ce84a;
+ --primary-500: #48e21d;
+ --primary-600: #39b517;
+ --primary-700: #2b8712;
+ --primary-800: #1d5a0c;
+ --primary-900: #0e2d06;
+ --primary-950: #071703;
+
+ --secondary-950: #f2f2f2;
+ --secondary-900: #e6e6e6;
+ --secondary-800: #cccccc;
+ --secondary-700: #b3b3b3;
+ --secondary-600: #999999;
+ --secondary-500: #808080;
+ --secondary-400: #666666;
+ --secondary-300: #4d4d4d;
+ --secondary-200: #333333;
+ --secondary-100: #1a1a1a;
+ --secondary-50: #0d0d0d;
+
+ --accent-50: #0d0d0d;
+ --accent-100: #191a19;
+ --accent-200: #323432;
+ --accent-300: #4c4d4c;
+ --accent-400: #656765;
+ --accent-500: #7e817e;
+ --accent-600: #989a98;
+ --accent-700: #b2b3b2;
+ --accent-800: #cbcdcb;
+ --accent-900: #e5e6e5;
+ --accent-950: #f2f2f2;
+
+ --overlay-900: rgba(0, 0, 0, 0.75);
+
+ --header-height: 5rem;
+ }
+
+ .dark {
+ --text-50: #f2f2f2;
+ --text-100: #e6e6e6;
+ --text-200: #cccccc;
+ --text-300: #b3b3b3;
+ --text-400: #999999;
+ --text-500: #808080;
+ --text-600: #666666;
+ --text-700: #4d4d4d;
+ --text-800: #333333;
+ --text-900: #1a1a1a;
+ --text-950: #0d0d0d;
+
+ --background-50: #0d0d0d;
+ --background-100: #1a1a1a;
+ --background-200: #333333;
+ --background-300: #4d4d4d;
+ --background-400: #666666;
+ --background-500: #808080;
+ --background-600: #999999;
+ --background-700: #b3b3b3;
+ --background-800: #cccccc;
+ --background-900: #e6e6e6;
+ --background-950: #f2f2f2;
+
+ --primary-50: #edfce8;
+ --primary-100: #daf9d2;
+ --primary-200: #b6f3a5;
+ --primary-300: #91ed78;
+ --primary-400: #6ce84a;
+ --primary-500: #48e21d;
+ --primary-600: #39b517;
+ --primary-700: #2b8712;
+ --primary-800: #1d5a0c;
+ --primary-900: #0e2d06;
+ --primary-950: #071703;
+
+ --secondary-50: #f2f2f2;
+ --secondary-100: #e6e6e6;
+ --secondary-200: #cccccc;
+ --secondary-300: #b3b3b3;
+ --secondary-400: #999999;
+ --secondary-500: #808080;
+ --secondary-600: #666666;
+ --secondary-700: #4d4d4d;
+ --secondary-800: #333333;
+ --secondary-900: #1a1a1a;
+ --secondary-950: #0d0d0d;
+
+ --accent-50: #f2f2f2;
+ --accent-100: #e5e6e5;
+ --accent-200: #cbcdcb;
+ --accent-300: #b2b3b2;
+ --accent-400: #989a98;
+ --accent-500: #7e817e;
+ --accent-600: #656765;
+ --accent-700: #4c4d4c;
+ --accent-800: #323432;
+ --accent-900: #191a19;
+ --accent-950: #0d0d0d;
+ }
+
+}
+
+/* This enables button text color to remain white all the time */
+.btn {
+ @apply text-text-950 dark:text-text-50
+}
+
+a {
+ @apply text-primary-500
+}
diff --git a/src/tailwindplugins/buttonUtils.ts b/src/tailwindplugins/buttonUtils.ts
new file mode 100644
index 0000000..44339d7
--- /dev/null
+++ b/src/tailwindplugins/buttonUtils.ts
@@ -0,0 +1,37 @@
+import { PluginAPI, ThemeConfig } from 'tailwindcss/types/config';
+
+interface TailwindColors {
+ [key: string]: {
+ [key: number]: string;
+ };
+}
+
+const buttonUtils = ({ addUtilities, theme }: PluginAPI) => {
+ const boxShadowUtilities = {} as ThemeConfig;
+
+ // Get the colors defined in your Tailwind CSS configuration
+ const colors = theme('colors', {}) as TailwindColors;
+
+ // Generate boxShadow utility classes
+ for (const colorName in colors) {
+ const className = `.btn-${colorName}`;
+ boxShadowUtilities[className] = {
+ 'postition': 'relative',
+ 'background-color': colors[colorName][600],
+ 'box-shadow': `0 8px 0 0 ${colors[colorName][800]}`,
+ };
+ boxShadowUtilities[`${className}-hover`] = {
+ 'background-color': colors[colorName][700],
+ };
+ boxShadowUtilities[`${className}-active`] = {
+ 'top': '4px',
+ 'background-color': colors[colorName][700],
+ 'box-shadow': `0 4px 0 0 ${colors[colorName][800]}`,
+ };
+ }
+
+ // Define your plugin configuration with the 'variants' property
+ addUtilities(boxShadowUtilities);
+};
+
+export default buttonUtils;
\ No newline at end of file
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+///