Merge branch 'dev' into stephany/cicd

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

@@ -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/components/Demo.tsx

@@ -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/components/Features.tsx

@@ -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/Headline.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/NavBar.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/Team.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/TeamCard.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/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,15 +75,15 @@ 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%;
@@ -94,8 +95,9 @@ body {
   width: 100%;
   height: 100%;
   display: grid;
-  grid-template-columns: repeat(calc(100%/6), 6);
+  grid-template-columns: repeat(calc(100%/5), 5);
   grid-template-rows: 100%;
+  align-items: center;
 }
 
 .navBarLinksFeatures {
@@ -114,16 +116,25 @@ body {
   grid-column: 5;
 }
 
-.navBarLinksLinkedIn {
-  grid-column: 6;
+.navBarMlflow {
+  color: rgb(66, 107, 31);
+  font-size: 1.2rem;
+  font-family: Newsreader;
+  display: flex;
+  align-items: center;
+}
+
+.bigHeadline {
+  font-size: 1.7rem;
+  font-family: Newsreader;
 }
 
 .mobileInnerWrapper {
   grid-column: 3;
   grid-row: 3;
   width: 100%;
   height: 100%;
-  background-color: aqua;
+  /* background-color: aqua; */
 }
 
 .team {
@@ -139,15 +150,33 @@ 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); */
+}
+
+.homeButton {
+  padding: 3px;
+  padding-left: 6px;
+  padding-right: 6px;
+  border-radius: 5px;
+  font-size: 0.8rem;
+  margin-right: 8px;
+}
+
+.homeButtonDownload {
+  background-color: rgb(66, 107, 31);
+}
+
+.homeButtonRead {
+  background-color: rgb(204, 204, 204);
 }
 
 .button {
   width: 100%;
-  background-color: rgb(14, 69, 129);
+  /* background-color: rgb(14, 69, 129); */
 }
 
 .features {