navbar set up and some of home

Author: Kyler-Chiago

mlflow-site/src/app/assets/GithubLogo.png

@@ -1,6 +1,6 @@
 const Demo = () => {
   return (
-    <div className='demo'>
+    <div className='demo' id='demo'>
       <div className='demoSplit'>
         <div>Img 1</div>
         <div>Demo 1</div>

mlflow-site/src/app/assets/LinkedInLogo.png

@@ -2,7 +2,7 @@ import FeatureCard from "./FeatureCard";
 
 const Features = () => {
   return (
-    <div className='features'>
+    <div className='features' id='features'>
       <div>MLOps in Javascript, made simple.</div>
       <div>Long blurb</div>
       <FeatureCard/>

mlflow-site/src/assets/imageNotFound.jpg …ow-site/src/app/assets/imageNotFound.jpgmlflow-site/src/assets/imageNotFound.jpg renamed to mlflow-site/src/app/assets/imageNotFound.jpg mlflow-site/src/assets/imageNotFound.jpg renamed to mlflow-site/src/app/assets/imageNotFound.jpg

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

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

@@ -1,28 +1,56 @@
-import Image from 'next/image'
+'use client';
+
+import Image from 'next/image';
+import githubLogo from '../assets/GithubLogo.png';
+import linkedInLogo from '../assets/LinkedInLogo.png';
 
 const NavBar = () => {
   return (
     <div className='navBar'>
       <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>
+        <button
+          onClick={() => {
+            const element = document.getElementById('headline');
+            element?.scrollIntoView({ behavior: 'smooth' });
+          }}
+        >
+          Home
+        </button>
+        <button
+          onClick={() => {
+            const element = document.getElementById('features');
+            element?.scrollIntoView({ behavior: 'smooth' });
+          }}
+        >
+          Features
+        </button>
+        <button
+          onClick={() => {
+            const element = document.getElementById('demo');
+            element?.scrollIntoView({ behavior: 'smooth' });
+          }}
+          className='navBarLinksDemo'
+        >
+          Demo
+        </button>
+        <button
+          onClick={() => {
+            const element = document.getElementById('team');
+            element?.scrollIntoView({ behavior: 'smooth' });
+          }}
+          className='navBarLinksTeam'
+        >
+          Team
+        </button>
         <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'
-          />
+          <Image src={githubLogo} width={24} height={24} alt='G' />
         </a>
         <a href='' className='navBarLinksLinkedIn'>
-          L
+          <Image src={linkedInLogo} width={24} height={24} alt='L' />
         </a>
       </div>
     </div>

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

@@ -30,7 +30,7 @@ const Team = () => {
   ];
 
   return (
-    <div className='team'>
+    <div className='team' id='team'>
       <div className='centered'>Meet the team</div>
       <div className='teamCards'>
         {teamArray.map((member, index) => (

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

@@ -1,4 +1,4 @@
-import imageNotFound from '../../assets/imageNotFound.jpg'
+// import imageNotFound from '/../..//assets/imageNotFound.jpg'
 
 interface TeamCardProps {
   name: string;
@@ -14,7 +14,7 @@ const TeamCard: React.FC<TeamCardProps> = ({
   return (
     <div className='teamcard'>
       {/* <div style={{ backgroundImage: 'url(../../assets/imageNotFound.jpg)' }} className='teamCardImg'></div> */}
-      <img src={imageNotFound} alt='Miss'></img>
+      {/* <img src={imageNotFound} alt='Miss'></img> */}
       {/* <img src={require('../../assets/imageNotFound.jpg')} alt="Test"></img> */}
       <div>{name}</div>
       <div>

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

@@ -83,11 +83,10 @@ body {
   grid-row: 2;
   width: 100%;
   height: 100%;
-  background-color: #7e7e7e;
+  /* background-color: #7e7e7e; */
   display: grid;
   grid-template-columns: auto auto;
   grid-template-rows: 100%;
-  /* text-align: center; */
 }
 
 .navBarLinks {
@@ -125,6 +124,8 @@ body {
   color: rgb(66, 107, 31);
   font-size: 1.2rem;
   font-family: Newsreader;
+  display: flex;
+  align-items: center;
 }
 
 .bigHeadline {
@@ -153,10 +154,11 @@ body {
 }
 
 .home {
+  margin-top: 0.3rem;
   grid-column: 2/5;
   grid-row: 3;
   width: 100%;
-  background-color: rgb(102, 102, 54);
+  /* background-color: rgb(102, 102, 54); */
 }
 
 .button {