🚧 Added color to background and added Header

src/App.jsx

@@ -1,5 +1,10 @@
+import { Header } from './components/Header'
+import './global.css'
+
 export function App() {
   return (
-    <h1>Game Notes</h1>
+    <div>
+      <Header />
+    </div>
   )
 }

src/components/Header.jsx

@@ -0,0 +1,10 @@
+import styles from './Header.module.css';
+import gameNotesLogo from '../assets/logo.svg';
+
+export function Header() {
+  return (
+    <header className={styles.header}>
+      <img src={gameNotesLogo} alt="Game Notes Logo" />
+    </header>
+  );
+}

src/components/Header.module.css

@@ -0,0 +1,10 @@
+.header {
+  background: var(--black);
+  display: flex;
+  justify-content: center;
+  padding: 1.2rem 0;
+}
+
+.header img {
+  height: 3.87rem;
+}

src/global.css

@@ -0,0 +1,20 @@
+:root {
+  --white: #fff;
+  --gray: #c4c4c4;
+  --blue-1: #4e8ddb;
+  --blue-2: #1a2141;
+  --blue-3: #0b1334;
+  --black: #040814;
+}
+
+* {
+	margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  background: var(--blue-2);
+  color: var(--white);
+  -webkit-font-smoothing: antialiased;
+}