Merge pull request #58 from oslabs-beta/kyler/siteHomeNavBar

feat: basic setup of home and navbar done for website

Author: austinbfraser

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

@@ -1,7 +1,26 @@
+'use client';
+
 const Button = () => {
-    return (
-      <div className='button'>Button</div>
-    )
-  }
-  
-  export default Button
+  return (
+    <div className='button'>
+      <button
+        onClick={() => {
+          window.location.assign('https://github.com/oslabs-beta/mlflow-js');
+        }}
+        className='homeButton homeButtonDownload text-white'
+      >
+        Download
+      </button>
+      <button
+        onClick={() => {
+          window.location.assign('https://github.com/oslabs-beta/mlflow-js/tree/dev/mlflow/docs');
+        }}
+        className='homeButton homeButtonRead'
+      >
+        Read the Docs
+      </button>
+    </div>
+  );
+};
+
+export default Button;

mlflow-site/src/app/assets/LinkedInLogo.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/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 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/app/components/Button.tsx

@@ -2,8 +2,8 @@ import Button from './Button';
 
 const Headline = () => {
   return (
-    <div className='home'>
-      <div>MLOps workflow for Javascript</div>
+    <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 />
     </div>

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

@@ -1,14 +1,53 @@
+'use client';
+
+import Image from 'next/image';
+import githubLogo from '../assets/GithubLogo.png';
+
 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>
+        <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'
+        >
+          <Image src={githubLogo} width={24} height={24} alt='G' />
+        </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>