Added a header, all links except github only refresh the page. Also added header&footer to App and removed unneccessary login

code/frontend/public/assets/icons/github.svg

@@ -0,0 +1,3 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.9999 8.33331C18.4678 8.33331 16.9507 8.63508 15.5353 9.22139C14.1198 9.80769 12.8337 10.6671 11.7503 11.7504C9.56242 13.9383 8.33325 16.9058 8.33325 20C8.33325 25.1566 11.6816 29.5316 16.3133 31.0833C16.8966 31.1766 17.0833 30.815 17.0833 30.5V28.5283C13.8516 29.2283 13.1633 26.965 13.1633 26.965C12.6266 25.6116 11.8683 25.25 11.8683 25.25C10.8066 24.5266 11.9499 24.55 11.9499 24.55C13.1166 24.6316 13.7349 25.7516 13.7349 25.7516C14.7499 27.525 16.4649 27 17.1299 26.72C17.2349 25.9616 17.5383 25.4483 17.8649 25.1566C15.2749 24.865 12.5566 23.8616 12.5566 19.4166C12.5566 18.1216 12.9999 17.0833 13.7583 16.255C13.6416 15.9633 13.2333 14.75 13.8749 13.175C13.8749 13.175 14.8549 12.86 17.0833 14.365C18.0049 14.1083 19.0083 13.98 19.9999 13.98C20.9916 13.98 21.9949 14.1083 22.9166 14.365C25.1449 12.86 26.1249 13.175 26.1249 13.175C26.7666 14.75 26.3583 15.9633 26.2416 16.255C26.9999 17.0833 27.4433 18.1216 27.4433 19.4166C27.4433 23.8733 24.7133 24.8533 22.1116 25.145C22.5316 25.5066 22.9166 26.2183 22.9166 27.3033V30.5C22.9166 30.815 23.1033 31.1883 23.6983 31.0833C28.3299 29.52 31.6666 25.1566 31.6666 20C31.6666 18.4679 31.3648 16.9508 30.7785 15.5353C30.1922 14.1199 29.3328 12.8338 28.2495 11.7504C27.1661 10.6671 25.88 9.80769 24.4646 9.22139C23.0491 8.63508 21.532 8.33331 19.9999 8.33331Z" fill="black"/>
+</svg>

code/frontend/src/App.tsx

@@ -2,45 +2,15 @@ import React, { use } from 'react';
 import logo from './logo.svg';
 import './App.css';
 import { useState, useEffect } from 'react';
+import Footer from './Footer';
+import Header from './header';
 
 function App() {
-  const [username, setUsername] = useState<string>('');
-  const [password, setPassword] = useState<string>('');
-  const [mail, setMail] = useState<string>('');
-  const [isCreate, setIsCreate] = useState<boolean>(false);
-
-useEffect(() => {
-  console.log(username);
-}, [username]);
-
-
-  const changeUsername = (event : React.ChangeEvent<HTMLInputElement>) => {
-    if (event.target.value.length > 20) {
-      alert("Username is too long");
-    }
-    setUsername(event.target.value);
-  }
-  const changePassword = (event : React.ChangeEvent<HTMLInputElement>) => {
-    setPassword(event.target.value);
-  }
-  const changeMail = (event : React.ChangeEvent<HTMLInputElement>) => {
-    setMail(event.target.value);
-  }
-
+  
   return (
     <div className="App">
-      {isCreate? <h1>Create Account</h1> :  <h1>Login</h1> }
-      {isCreate && <>
-        <label htmlFor="email">E-Mail</label>
-        <input id='email' type="email" value={mail} onChange={changeMail}></input>
-        <br /></>}
-      <label htmlFor="username">Username</label>
-      <input id='username' type="text" value={username} onChange={changeUsername}></input>
-      <br />
-      <label htmlFor="password">Password</label>
-      <input id='password' type="password" value={password} onChange={changePassword}/>
-      <br />
-      <input type="button" onClick={() => setIsCreate(!isCreate)} value={isCreate? "Create" : "login"}/>
+      <Header/>
+      <Footer/>
     </div>
   );
 }

code/frontend/src/Footer.css

@@ -0,0 +1,80 @@
+:root {
+  --Rotkehlchen-gray: #e7ecf2;
+  --Rotkehlchen-brown1: #a28d7a;
+  --Rotkehlchen-orange-default: #e79a0e;
+}
+
+
+
+.footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: var(--Rotkehlchen-gray);
+  padding: 1rem 2rem;
+}
+
+.footer-left {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  
+}
+
+.footer-link {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: #000;
+  font-weight: 500;
+  text-decoration: none;
+}
+.footer-link.github img {
+  width: 20px;
+  height: 20px;
+  transform: scale(1.9);
+}
+.footer-link.feather img {
+  width: 20px;
+  height: 20px;
+  transform: scale(1.5);
+}
+
+
+.footer-link img {
+  width: 20px; 
+  height: 20px;
+  object-fit:unset;
+  vertical-align: middle;
+}
+
+
+
+
+
+.footer-link.feather span {
+  color: var(--Rotkehlchen-orange-default); 
+  font-weight: bold;
+  
+}
+
+.footer-right {
+  display: flex;
+  gap: 4rem;
+}
+
+.footer-column {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.footer-column a {
+  color: black;
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.footer-column a:hover {
+  text-decoration: underline;
+}

code/frontend/src/Footer.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import "./Footer.css";
+
+function Footer() {
+  return (
+    <footer className="footer">
+      <div className="footer-left">
+        <a href="" className="footer-link feather">
+          <img src="/assets/icons/feather_black.svg" alt="Feather icon" />
+          <span>Feather Feed</span>
+        </a>
+        <a href="https://github.com" target="_blank " className="footer-link github">
+          <img src="/assets/icons/github.svg" alt="GitHub icon" />
+          <span>GitHub</span>
+        </a>
+      </div>
+
+      <div className="footer-right">
+        <div className="footer-column">
+          <a href="">Home</a>
+          <a href="">About</a>
+        </div>
+        <div className="footer-column">
+          <a href="">Login</a>
+          <a href="">Sign up</a>
+        </div>
+        <div className="footer-column">
+          <a href="">Create Post</a>
+          <a href="">Feed</a>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+export default Footer;