Adds video on how to use Hamilton hub

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>
   );
 }

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 */
+}