basic website

Author: Kyler-Chiago

mlflow-site/src/app/components/NavBar.tsx

@@ -1,7 +1,17 @@
 const NavBar = () => {
   return (
-    <div className='navBar'>NavBar</div>
-  )
-}
+    <div className='navBar'>
+      <div>MLflow.js</div>
+      <div className='navBarLinks'>
+        <div>Home</div>
+        <div className='navBarLinksFeatures'>Features</div>
+        <div className='navBarLinksDemo'>Demo</div>
+        <div className='navBarLinksTeam'>Team</div>
+        <div className='navBarLinksGithub'>G</div>
+        <div className='navBarLinksLinkedIn'>L</div>
+      </div>
+    </div>
+  );
+};
 
-export default NavBar
+export default NavBar;

mlflow-site/src/app/globals.css

@@ -18,6 +18,7 @@ body {
   color: var(--foreground);
   background: var(--background);
   font-family: Arial, Helvetica, sans-serif;
+  font-size: 14px;
 }
 
 @layer utilities {
@@ -61,6 +62,39 @@ body {
   width: 100%;
   height: 100%;
   background-color: #0a0a0a;
+  display: grid;
+  grid-template-columns: auto auto;
+  grid-template-rows: 100%;
+}
+
+.navBarLinks {
+  grid-column: 2;
+  grid-row: 1;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  grid-template-columns: repeat(calc(100%/6), 6);
+  grid-template-rows: 100%;
+}
+
+.navBarLinksFeatures {
+  grid-column: 2;
+}
+
+.navBarLinksDemo {
+  grid-column: 3;
+}
+
+.navBarLinksTeam {
+  grid-column: 4;
+}
+
+.navBarLinksGithub {
+  grid-column: 5;
+}
+
+.navBarLinksLinkedIn {
+  grid-column: 6;
 }
 
 .mobileInnerWrapper {