From 509db9f2e9d2f508b1dc092cee6d04b094e88353 Mon Sep 17 00:00:00 2001
From: Stefan Krawczyk <stefan@dagworks.io>
Date: Mon, 27 Nov 2023 23:06:58 -0800
Subject: [PATCH] Adds video on how to use Hamilton hub

This uses the loom player on the hub landing page.
---
 .../src/components/HomepageFeatures/index.js  | 19 ++++++++++++++++++-
 .../HomepageFeatures/styles.module.css        | 16 ++++++++++++++++
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/contrib/docs/src/components/HomepageFeatures/index.js b/contrib/docs/src/components/HomepageFeatures/index.js
index 02d02ea31..286d1965a 100644
--- a/contrib/docs/src/components/HomepageFeatures/index.js
+++ b/contrib/docs/src/components/HomepageFeatures/index.js
@@ -57,14 +57,31 @@ function Feature({Svg, title, description}) {
 
 export default function HomepageFeatures() {
   return (
-    <section className={styles.features}>
+      <div>
+          <section className={styles.features}>
       <div className="container">
         <div className="row">
           {FeatureList.map((props, idx) => (
             <Feature key={idx} {...props} />
           ))}
         </div>
+      <div className="row">
+          </div>
       </div>
     </section>
+      <section className={styles.features}>
+    <div className={styles.videoWrapper}>
+      <iframe
+        src="https://www.loom.com/embed/ee3c984f51ba4d5baddab414df346f90?sid=4d5ee9d7-3be2-42b2-af29-793249d909ee"
+        frameBorder="0"
+        webkitallowfullscreen
+        mozallowfullscreen
+        allowFullScreen
+      >
+      </iframe>
+    </div>
+  </section>
+
+          </div>
   );
 }
diff --git a/contrib/docs/src/components/HomepageFeatures/styles.module.css b/contrib/docs/src/components/HomepageFeatures/styles.module.css
index b248eb2e5..ccf502f51 100644
--- a/contrib/docs/src/components/HomepageFeatures/styles.module.css
+++ b/contrib/docs/src/components/HomepageFeatures/styles.module.css
@@ -9,3 +9,19 @@
   height: 200px;
   width: 200px;
 }
+
+.videoWrapper {
+  width: 80%; /* Set the width to 80% of its parent */
+  margin: 0 auto; /* This will center the div */
+  position: relative; /* Position relative so that padding-top percentage is relative to width */
+  padding-top: 45%; /* This sets aspect ratio for the iframe */
+  overflow: hidden; /* In case of overflow, it will be hidden */
+}
+
+.videoWrapper iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%; /* Full width of the .videoWrapper */
+  height: 100%; /* Full height of the .videoWrapper */
+}