lagde eventpage og koblet den opp

package.json

@@ -32,7 +32,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
     "postcss": "^8.4.30",
-    "tailwindcss": "^3.3.3",
+    "tailwindcss": "^3.3.5",
     "typescript": "^5.0.2",
     "vite": "^4.4.5"
   }

src/pages/AboutPage.tsx

@@ -26,7 +26,6 @@ const AboutPage: React.FC = () => {
           <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>

src/pages/EventPage.tsx

@@ -0,0 +1,23 @@
+import Page from '../structure/Page';
+
+const EventPage: React.FC = () => {
+    const numbers = Array.from({ length: 5 }, (_, index) => 1 + index);
+
+    return (
+        <Page>
+            <div className='relative px-60'>
+                <div className="flex flex-row items-center space-x-8'">
+                    <p className="text-text-50 font-black text-4xl">Ny artikkel</p>
+                    <p className="text-text-50 font-black text-4xl">Nytt arrangement</p>
+                </div>
+            </div>
+            <div className='relative px-60'>
+                <div className="flex flex-col custom-height">
+                    <p className="text-text-50 font-black text-4xl py-4">Arrangementer</p>
+                </div>
+            </div>
+        </Page>
+    )
+}
+
+export default EventPage

src/structure/Content.tsx

@@ -5,6 +5,8 @@ import Header from './Header'
 import Footer from './Footer'
 import Home from '../pages/Home'
 import AboutPage from '../pages/AboutPage'
+import EventPage from '../pages/EventPage'
+
 
 
 //mport Logo from '../assets/logo.png'
@@ -29,6 +31,9 @@ const Content: React.FC<ContentProps> = () => {
           <Route path='/AboutPage'>
             <Route index element={<AboutPage />} />
           </Route>
+          <Route path='/EventPage'>
+            <Route index element={<EventPage/>}/>
+          </Route>
         </Routes>
       </div>
       <Footer />

src/structure/Header.tsx

@@ -29,6 +29,10 @@ const Header: React.FC<HeaderProps> = () => {
   const navigateToAboutPage = () => {
     navigate('/AboutPage');
   }
+  const navigateToEventPage = () => {
+    navigate('EventPage');
+
+  }
   const navigateToHomePage = () => {
     navigate('/');
   }
@@ -41,7 +45,7 @@ const Header: React.FC<HeaderProps> = () => {
       </div>
       <div className='flex flex-row items-center space-x-4'>
         <button onClick={navigateToAboutPage}>Om oss</button>
-        <p>Arrangementer</p>
+        <button onClick={navigateToEventPage}>Arrangementer</button>
         <button onClick={toggleTheme} className='p-4 h-min rounded-full text-white'>
           {
             dark ? <FaSun /> : <FaMoon />