before changing assets location

Author: Kyler-Chiago

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

@@ -3,7 +3,7 @@ import Button from './Button';
 const Headline = () => {
   return (
     <div className='home'>
-      <div>MLOps workflow for Javascript</div>
+      <div className='bigHeadline'>MLOps workflow for Javascript</div>
       <div>Harness MLflow&apos;s MLOps functionality for your Javascript application with MLflow.js</div>
       <Button />
     </div>

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

@@ -1,14 +1,29 @@
+import Image from 'next/image'
+
 const NavBar = () => {
   return (
     <div className='navBar'>
-      <div>MLflow.js</div>
+      <div className='navBarMlflow'>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>
+        <a
+          href='https://github.com/oslabs-beta/mlflow-js'
+          className='navBarLinksGithub'
+        >
+          {/* <img src='../../assets/Github_logo.png' alt='G'></img> */}
+          <Image
+          src='/assets/Github_logo.png'
+          width={50}
+          height={50}
+          alt='M'
+          />
+        </a>
+        <a href='' className='navBarLinksLinkedIn'>
+          L
+        </a>
       </div>
     </div>
   );

mlflow-site/src/app/globals.css

@@ -2,7 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
+/* :root {
   --background: #ffffff;
   --foreground: #171717;
 }
@@ -12,13 +12,14 @@
     --background: #0a0a0a;
     --foreground: #ededed;
   }
-}
+} */
 
 body {
   color: var(--foreground);
   background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: Inter;
   font-size: 1rem;
+  color: rgb(0, 0, 0);
 }
 
 @layer utilities {
@@ -74,18 +75,19 @@ body {
   grid-row: 1;
   display: grid;
   grid-template-columns: 0.7rem 1.3rem 1fr 1.3rem 0.7rem;
-  grid-template-rows: 1.3rem 2.8rem 1fr min-content 1.3rem;
+  grid-template-rows: 1.3rem min-content 1fr min-content 1.3rem;
 }
 
 .navBar {
   grid-column: 2/5;
   grid-row: 2;
   width: 100%;
   height: 100%;
-  background-color: #0a0a0a;
+  background-color: #7e7e7e;
   display: grid;
   grid-template-columns: auto auto;
   grid-template-rows: 100%;
+  /* text-align: center; */
 }
 
 .navBarLinks {
@@ -96,6 +98,7 @@ body {
   display: grid;
   grid-template-columns: repeat(calc(100%/6), 6);
   grid-template-rows: 100%;
+  align-items: center;
 }
 
 .navBarLinksFeatures {
@@ -118,6 +121,17 @@ body {
   grid-column: 6;
 }
 
+.navBarMlflow {
+  color: rgb(66, 107, 31);
+  font-size: 1.2rem;
+  font-family: Newsreader;
+}
+
+.bigHeadline {
+  font-size: 1.7rem;
+  font-family: Newsreader;
+}
+
 .mobileInnerWrapper {
   grid-column: 3;
   grid-row: 3;