add video to website

Author: kfarr

package-lock.json

@@ -18,6 +18,7 @@
     "@docusaurus/preset-classic": "3.0.1",
     "@docusaurus/theme-mermaid": "^3.0.1",
     "@mdx-js/react": "^3.0.0",
+    "@mux/mux-player-react": "^2.5.0",
     "clsx": "^2.0.0",
     "prism-react-renderer": "^2.3.0",
     "react": "^18.0.0",

package.json

@@ -13,6 +13,7 @@ import {
   XIcon2,
 } from "../../icons";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import MuxPlayer from '@mux/mux-player-react';
 
 export default function Home({ recentPosts }) {
   const {
@@ -231,12 +232,21 @@ export default function Home({ recentPosts }) {
         </main>
 
         {/* OVERVIEW SECTION */}
-        {/* <section className="st_overview">
-          <h2>3DSTREET OVERVIEW</h2>
-          <video className="st_overview_video" controls preload="metadata">
+        <section className="st_overview">
+          <h2>3DSTREET IN 2 MINUTES</h2>
+          <MuxPlayer
+            streamType="on-demand"
+            playbackId="lXImH9p0000L4fsSSEHgz6RudBQv02CgqQh"
+            metadataVideoTitle="Placeholder (optional)"
+            metadataViewerUserId="Placeholder (optional)"
+            primaryColor="#FFFFFF"
+            secondaryColor="#000000"
+            accentColor="#653CB0"
+          />
+          {/* <video className="st_overview_video" controls preload="metadata">
             <source src="/video/3d-streets-overview.mp4" type="video/mp4" />
-          </video>
-        </section> */}
+          </video> */}
+        </section>
 
         <div className="st_grid_3_wrapper">
           {/* VISION SECTION */}

src/components/Home/index.js

@@ -260,7 +260,7 @@ section h2 {
 ----------------------------------------------------------------*/
 
 .st_overview {
-  margin-top: 64px;
+  margin-top: 4px;
   display: flex;
   flex-direction: column;
   row-gap: 24px;