docs: Featuring Data on EKS public videos on the homepage (#570)

Signed-off-by: Vara Bonthu <vara.bonthu@gmail.com>
awslabs · Jul 6, 2024 · 75be254 · 75be254
1 parent da43b99
commit 75be254
Show file tree

Hide file tree

Showing 13 changed files with 387 additions and 11 deletions.
diff --git a/website/package-lock.json b/website/package-lock.json
diff --git a/website/package.json b/website/package.json
@@ -28,7 +28,9 @@
     "prism-react-renderer": "^2.3.0",
     "raw-loader": "^4.0.2",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-slick": "^0.30.2",
+    "slick-carousel": "^1.8.1"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.23.3",

diff --git a/website/src/components/HomepageFeatures/styles.module.css b/website/src/components/HomepageFeatures/styles.module.css
@@ -1,9 +1,11 @@
+/* src/pages/styles.module.css */
+
 .features {
   display: flex;
-  align-items: center;
+  justify-content: center;
   padding: 2rem 0;
   width: 100%;
-  /*background: whitesmoke;*/
+  flex-wrap: wrap;
 }
 
 .featureSvg {
@@ -38,3 +40,44 @@
 .heading {
   font-weight: bold;
 }
+
+.text--center {
+  text-align: center;
+}
+
+.padding-horiz--md {
+  padding: 0 1.5rem;
+}
+
+.container {
+  width: 100%;
+}
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.col {
+  flex: 1 1 calc(33.333% - 20px); /* Ensure 3 columns */
+  margin: 10px;
+  box-sizing: border-box;
+}
+
+@media screen and (max-width: 996px) {
+  .features {
+    padding: 2rem 0;
+  }
+  .col {
+    flex: 1 1 calc(50% - 20px); /* Ensure 2 columns on smaller screens */
+    margin: 10px 0;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .col {
+    flex: 1 1 100%; /* Ensure 1 column on very small screens */
+    margin: 10px 0;
+  }
+}
diff --git a/website/src/components/VideoGrid/VideoGrid.js b/website/src/components/VideoGrid/VideoGrid.js
@@ -0,0 +1,128 @@
+import React from 'react';
+import Slider from 'react-slick';
+import styles from './VideoGrid.module.css';
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
+
+const videos = [
+  {
+    title: "AWS re:Invent 2023 - Data processing at massive scale on Amazon EKS",
+    description: "Data processing at massive scale with Spark on Amazon EKS by Pinterest.",
+    imageSrc: 'news/con309.png',
+    linkTo: "https://www.youtube.com/watch?v=G9aNXEu_a8k",
+    date: "Dec 4, 2023"
+  },
+  {
+    title: "Containers from the Couch - Data on EKS (DoEKS)",
+    description: "In this demo-focused livestream, learn how to run Spark and AI/ML workloads on Amazon EKS",
+    imageSrc: 'news/video2.png',
+    linkTo: "https://www.youtube.com/watch?v=6n6XBDXXPSs",
+    date: "Sep 21, 2023"
+  },
+  {
+    title: "Run Stable Diffusion on Kubernetes | Generative AI on Amazon EKS",
+    description: "Run Stable Diffusion on Kubernetes | Generative AI on Amazon EKS",
+    imageSrc: 'news/video6.png',
+    linkTo: "https://www.youtube.com/watch?v=-41bX6AjMu4",
+    date: "Aug 24, 2023"
+  },
+  {
+    title: "AWS Summit Tel Aviv 2023 - Building a modern data platform on Amazon EKS",
+    description: "AWS Summit Tel Aviv 2023 - Building a modern data platform on Amazon EKS",
+    imageSrc: 'news/video4.png',
+    linkTo: "https://www.youtube.com/watch?v=SS8zgvHNo38",
+    date: "Jun 29, 2023"
+  },
+  {
+    title: "Generative AI Modeling on Amazon EKS ft. Karpenter, Ray, JupyterHub and DoEKS",
+    description: "Generative AI Modeling on Amazon EKS ft. Karpenter, Ray, JupyterHub and DoEKS",
+    imageSrc: 'news/video5.png',
+    linkTo: "https://www.youtube.com/watch?v=h1RRdYHdDiY",
+    date: "Oct 5, 2023"
+  },
+  {
+    title: "Building a Modern Data Platform on Amazon EKS - AWS Online Tech Talk",
+    description: "Building a Modern Data Platform on Amazon EKS - AWS Online Tech Talk",
+    imageSrc: 'news/video3.png',
+    linkTo: "https://www.youtube.com/watch?v=7AHuMNqbR7o",
+    date: "Feb 2, 2023"
+  },
+];
+
+const VideoGrid = () => {
+  const settings = {
+    dots: true,
+    infinite: true,
+    speed: 500,
+    slidesToShow: 3,
+    slidesToScroll: 3,
+    nextArrow: <SampleNextArrow />,
+    prevArrow: <SamplePrevArrow />,
+    responsive: [
+      {
+        breakpoint: 1024,
+        settings: {
+          slidesToShow: 2,
+          slidesToScroll: 2,
+          infinite: true,
+          dots: true
+        }
+      },
+      {
+        breakpoint: 600,
+        settings: {
+          slidesToShow: 1,
+          slidesToScroll: 1,
+          initialSlide: 1
+        }
+      },
+    ]
+  };
+
+  return (
+    <div className={styles.videoGridContainer}>
+      <Slider {...settings}>
+        {videos.map((video, index) => (
+          <div key={index} className={styles.videoCard}>
+            <a href={video.linkTo} target="_blank" rel="noopener noreferrer">
+              <img src={video.imageSrc} alt={video.title} className={styles.thumbnail} />
+            </a>
+            <div className={styles.videoInfo}>
+              <h3>{video.title}</h3>
+              <small>{video.date}</small>
+              <p>{video.description}</p>
+            </div>
+          </div>
+        ))}
+      </Slider>
+    </div>
+  );
+};
+
+const SampleNextArrow = (props) => {
+  const { className, style, onClick } = props;
+  return (
+    <div
+      className={`${className} ${styles.arrow}`}
+      style={{ ...style, display: 'block' }}
+      onClick={onClick}
+    >
+      &#10095;
+    </div>
+  );
+};
+
+const SamplePrevArrow = (props) => {
+  const { className, style, onClick } = props;
+  return (
+    <div
+      className={`${className} ${styles.arrow}`}
+      style={{ ...style, display: 'block' }}
+      onClick={onClick}
+    >
+      &#10094;
+    </div>
+  );
+};
+
+export default VideoGrid;