finished Demo and DemoCard

Author: austinbfraser

mlflow-site/next.config.mjs

@@ -1,4 +1,13 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+    images: {
+        remotePatterns: [
+            {
+                protocol: 'https',
+                hostname: 'i.giphy.com'
+            },
+        ],
+    },
+};
 
 export default nextConfig;

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

@@ -1,19 +1,28 @@
+import DemoCard from "./DemoCard";
+
 const Demo = () => {
+  const demos = [];
+  const demoCardHeaders = [
+    'Demo 1',
+    'Demo 2',
+    'Demo 3'
+  ];
+  const demoCardBlurbs = [
+    'Description for what\'s happening in Demo 1.  This block of text will contain all the info needed to understand the demo.',
+    'Description for what\'s happening in Demo 2.  This block of text will contain all the info needed to understand the demo.',
+    'Description for what\'s happening in Demo 3.  This block of text will contain all the info needed to understand the demo.'
+  ];
+  for (let i = 0; i < 3; i++) {
+    demos.push(
+      <DemoCard
+        key={`demoCard${i}`}
+        header={demoCardHeaders[i]}
+        blurb={demoCardBlurbs[i]}
+      />
+    );
+  }
   return (
-    <div className='demo'>
-      <div className='demoSplit'>
-        <div>Img 1</div>
-        <div>Demo 1</div>
-      </div>
-      <div className='demoSplit'>
-        <div>Demo 2</div>
-        <div>Img 2</div>
-      </div>
-      <div className='demoSplit'>
-        <div>Img 3</div>
-        <div>Demo 3</div>
-      </div>
-    </div>
+    <div className='demo text-black bg-white'>{demos}</div>
   );
 };
 

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

@@ -0,0 +1,28 @@
+import Image from "next/image";
+
+const DemoCard = ({ header, blurb }: {
+    key: string,
+    blurb: string,
+    header: string
+  }) => {
+    return (
+      <div className='demoCard gap-5 p-1 mb-2 text-center'>
+        <Image
+            src='https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExaW9tcWttZ3R0YTVpNWxwcGJ4M2YyZ2ExcmxlazN5N3JyenF0ajl4dCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/FqdGGgugkC4Xm/giphy.gif'
+            alt=''
+            width={700}
+            height={475}
+            sizes="100vw"
+            style={{
+                width: "100%",
+                height: "auto",
+            }}
+        />
+        <div className='text-2xl'>{header}</div>
+        {blurb}
+      </div>
+    );
+  };
+  
+  export default DemoCard;
+  

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

@@ -4,7 +4,7 @@ const FeatureCard = ({ header, blurb }: {
   header: string
 }) => {
   return (
-    <div className='featureCard gap-5 p-1 mb-2'>
+    <div className='featureCard p-1 mb-2'>
       <div className='text-2xl'>{header}</div>
       {blurb}
     </div>

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

@@ -29,8 +29,8 @@ const Features = () => {
     );
   }
   return (
-    <div className='features p-2'>
-      <div className='text-5xl mb-2'>{featureHeader}</div>
+    <div className='features p-2 mb-20 text-center text-black bg-white'>
+      <div className='text-3xl mb-2'>{featureHeader}</div>
       <div className='mb-2'>{featureLongBlurb}</div>
       <div className=''>{cards}</div>
     </div>

mlflow-site/src/app/globals.css

@@ -154,7 +154,6 @@ body {
   grid-column: 2/5;
   grid-row: 3;
   width: 100%;
-  background-color: rgb(176, 47, 107);
   display: grid;
   place-items: center;
 }
@@ -166,14 +165,12 @@ body {
   display: grid;
   grid-template-columns: 100%;
   grid-template-rows: min-content;
-  text-align: left;
 }
 
 .demo {
   grid-column: 2/5;
   grid-row: 3;
   width: 100%;
-  background-color: rgb(47, 176, 101);
   display: grid;
   grid-template-columns: 100%;
   grid-template-rows: calc(100%/3) calc(100%/3) calc(100%/3);