adding header component and links to home, shop page and contact

src/App.css

@@ -1,4 +1,9 @@
 body {
     font-family: 'Open Sans Condensed', sans-serif;
     padding: 20px 60px;
+}
+
+a {
+    text-decoration: none;
+    color: black;
 }

src/App.js

@@ -4,10 +4,12 @@ import './App.css';
 
 import HomePage from './pages/homepage/homepage.component';
 import ShopPage from './pages/shop/shop.component';
+import Header from './components/header/header-component';
 
 function App() {
   return (
     <div>
+      <Header />
       <Switch>
         <Route exact path='/' component={HomePage}/>
         <Route path='/shop' component={ShopPage}/>

src/components/header/header-component.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import { ReactComponent as Logo } from '../../assets/crown.svg';
+
+import './header-styles.scss';
+
+const Header = () => {
+    return (
+        <div className='header'>
+            <Link to='/' className='logo-container'>
+                <Logo className='logo' />
+            </Link>
+            <div className="options">
+                <Link className='option' to='/shop'>SHOP</Link>
+                <Link className='option' to='/shop'>CONTACT</Link>
+            </div>
+        </div>
+    )
+}
+
+export default Header

src/components/header/header-styles.scss

@@ -0,0 +1,25 @@
+.header {
+    height: 70px;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 25px;
+
+    .logo-container {
+        height: 100%;
+        width: 70px;
+        padding: 25px;
+    }
+
+    .options {
+        width: 50%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+
+        .option {
+            padding: 10px 15px;
+        }
+    }
+}