home page set up with nav bar

src/components/home/home.js

@@ -46,9 +46,43 @@ export default function Home() {
 class ComponentSelection extends React.Component {
   render() {
     return (
-      <div>
-        <h2>alright we are in the component selection home page</h2>
-        <NavLink to="/dashboard">dashboard</NavLink>
+      <div class="wrapper">
+        <div class="nav">
+          <ul>
+            <li>
+              <NavLink activeClassName="active" to="/">
+                Home
+              </NavLink>
+            </li>
+            <li>
+              <NavLink activeClassName="active" to="/dashboard">
+                Dashboard
+              </NavLink>
+            </li>
+            <li>
+              <NavLink activeClassName="active" to="/start">
+                Get Started
+              </NavLink>
+            </li>
+            <li>
+              <NavLink activeClassName="active" to="/docs">
+                Docs
+              </NavLink>
+            </li>
+            <li>
+              <NavLink activeClassName="active" to="/pricing">
+                Pricing
+              </NavLink>
+            </li>
+          </ul>
+        </div>
+
+        <div class="pages">
+          <div class="card">
+            <div class="card-header">Rameelo</div>
+          </div>
+          <div class="card"></div>
+        </div>
       </div>
     );
   }

src/components/home/home.scss

@@ -1 +1,42 @@
 @import '../../styles/index';
+
+.nav {
+  @extend %flex;
+  flex-direction: row;
+
+  ul {
+    @extend %flex;
+    padding-inline-start: 0 !important;
+    flex-direction: row;
+    align-items: stretch;
+    list-style: none;
+  }
+
+  li {
+    margin-right: 30px;
+  }
+
+  a {
+    text-decoration: none !important;
+    color: $secondary-text;
+  }
+
+  .active {
+    padding: 7px 10px;
+    background-color: $primary-color;
+    border-radius: 100px;
+    color: white;
+  }
+}
+
+div .pages {
+  @extend %flex;
+
+  margin: 20px;
+  flex-direction: row;
+
+  .card {
+    height: 200px;
+    width: 200px;
+  }
+}

src/styles/_colors.scss

@@ -2,6 +2,9 @@ $primary-background: #fbf6f0;
 $primary-text: #3f4254;
 $secondary-text: #b5b5c3;
 
+$primary-color: #0bb7af;
+$white: white;
+
 body {
   color: $primary-text;
   background-color: $primary-background;

src/styles/_fonts.scss

@@ -1,5 +1,13 @@
 @import url('https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap');
 
-html {
+body {
   font-family: 'Fira Sans', sans-serif;
 }
+
+h1 {
+  color: $primary-text;
+}
+
+h2 {
+  color: $white;
+}

src/styles/_index.scss

@@ -1,2 +1,3 @@
 @import './colors';
 @import './fonts';
+@import './main';

src/styles/_main.scss

@@ -0,0 +1,21 @@
+// Common styles for all components
+
+%flex {
+  display: flex !important;
+}
+
+.wrapper {
+  max-width: 1140px;
+  margin: 20px auto;
+}
+
+.card {
+  background-color: white;
+  border-radius: 25px;
+  margin: 10px;
+
+  .card-header {
+    @extend %flex;
+    padding: 10px;
+  }
+}