wip: add header

frontend/src/app/components/Header/Header.js

@@ -0,0 +1,13 @@
+import styles from "./Header.module.css";
+import SettingsIcon from '@mui/icons-material/Settings';
+
+export default function Header({title}) {
+  return (
+    <header className={styles.header}>
+      <div className={styles.icons}>
+        <SettingsIcon className="fcolor--purple" />
+      </div>
+      <h1 className={styles.title}>{title}</h1>
+    </header>
+  );
+}

frontend/src/app/components/Header/Header.module.css

@@ -0,0 +1,15 @@
+.header {
+  display: flex;
+  justify-content: space-between;
+  background: var(--gradient_down);
+  padding: 3rem 2rem;
+}
+
+.icons {
+  display: flex;
+}
+
+.title {
+  text-transform: uppercase;
+  color: var(--color_yellow);
+}

frontend/src/app/globals.css

@@ -23,6 +23,10 @@ h1, .h1 {
   line-height: 2.5rem;
 }
 
+.fcolor--purple {
+  color: var(--color_purple);
+}
+
 /*
 @media (prefers-color-scheme: dark) {
   :root {