finished Features.tsx and FeatureCard.tsx

Author: austinbfraser

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

@@ -1,10 +1,12 @@
-const FeatureCard = () => {
+const FeatureCard = ({ header, blurb }: {
+  key: string,
+  blurb: string,
+  header: string
+}) => {
   return (
-    <div className='featureCard'>
-      <div>FeatureCard1 hello how are you doing?</div>
-      <div>FeatureCard2</div>
-      <div>FeatureCard3</div>
-      <div>FeatureCard4</div>
+    <div className='featureCard gap-5 p-1 mb-2'>
+      <div className='text-2xl'>{header}</div>
+      {blurb}
     </div>
   );
 };

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

@@ -1,11 +1,38 @@
 import FeatureCard from "./FeatureCard";
 
 const Features = () => {
+  const featureHeader = 'MLOps in Javascript, made simple.';
+  const featureLongBlurb = `
+    Longer blurb about MLFlow.js\'s feature set.  Longer blurb about MLFlow.js\'s feature set.  Longer blurb about MLFlow.js\'s feature set.  Longer blurb about MLFlow.js\'s feature set.  Longer blurb about MLFlow.js\'s feature set.  Longer blurb about MLFlow.js\'s feature set.  
+  `;
+  const cards = [];
+  const featureCardHeaders = [
+    'Feature 1',
+    'Feature 2',
+    'Feature 3',
+    'Feature 4',
+  ];
+  const featureCardBlurbs = [
+    'Feature Card Blurb 1.  Feature Card Blurb 1.  Feature Card Blurb 1.  Feature Card Blurb 1.  ',
+    'Feature Card Blurb 2.  Feature Card Blurb 2.  Feature Card Blurb 2.  Feature Card Blurb 2.  ',
+    'Feature Card Blurb 3.  Feature Card Blurb 3.  Feature Card Blurb 3.  Feature Card Blurb 3.  ',
+    'Feature Card Blurb 4.  Feature Card Blurb 4.  Feature Card Blurb 4.  Feature Card Blurb 4.  '
+
+  ];
+  for (let i = 0; i < 4; i++) {
+    cards.push(
+      <FeatureCard
+        key={`featureCard${i}`}
+        header={featureCardHeaders[i]}
+        blurb={featureCardBlurbs[i]}
+      />
+    );
+  }
   return (
-    <div className='features'>
-      <div>MLOps in Javascript, made simple.</div>
-      <div>Long blurb</div>
-      <FeatureCard/>
+    <div className='features p-2'>
+      <div className='text-5xl mb-2'>{featureHeader}</div>
+      <div className='mb-2'>{featureLongBlurb}</div>
+      <div className=''>{cards}</div>
     </div>
   );
 };

mlflow-site/src/app/globals.css

@@ -160,12 +160,13 @@ body {
 }
 
 .featureCard {
+  color: black;
   width: 100%;
-  background-color: rgb(122, 144, 167);
+  background-color: rgb(217, 225, 210);
   display: grid;
   grid-template-columns: 100%;
   grid-template-rows: min-content;
-  text-align: center;
+  text-align: left;
 }
 
 .demo {

mlflow-site/src/app/layout.tsx

@@ -14,8 +14,8 @@ const geistMono = localFont({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "MLflow.js",
+  description: "MLflow.js",
 };
 
 export default function RootLayout({