home page set up with nav bar

2020-09-04 13:32:21 -07:00
parent 907a0476e8
commit 342c108e92
9 changed files with 125 additions and 4 deletions
@@ -3122,6 +3122,11 @@
      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
      "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
    },
+    "bootstrap": {
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.2.tgz",
+      "integrity": "sha512-vlGn0bcySYl/iV+BGA544JkkZP5LB3jsmkeKLFQakCOwCM3AOk7VkldBz4jrzSe+Z0Ezn99NVXa1o45cQY4R6A=="
+    },
    "brace-expansion": {
      "version": "1.1.11",
      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -6,6 +6,7 @@
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
+    "bootstrap": "^4.5.2",
    "node-sass": "^4.14.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
@@ -24,6 +24,13 @@
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
+
+    <!-- Boostrap Grid System Only -->
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap-grid.min.css"
+    />
+
    <title>React App</title>
  </head>
  <body>
@@ -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>
    );
  }
@@ -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;
+  }
+}
@@ -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;
@@ -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;
+}
@@ -1,2 +1,3 @@
@import './colors';
@import './fonts';
+@import './main';
@@ -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;
+  }
+}