site(sim): add haskell short-leios simulation video to landing page

site/src/pages/index.module.css

@@ -22,3 +22,40 @@
   align-items: center;
   justify-content: center;
 }
+
+.videoSection {
+    padding: 4rem 0;
+    position: relative;
+    border-top: 1px solid var(--ifm-color-emphasis-300);
+    margin-top: 2rem;
+}
+
+.videoSection h2 {
+    font-size: 2.5rem;
+    margin-bottom: 1rem;
+}
+
+.videoSection .subtitle {
+    color: var(--ifm-color-emphasis-700);
+    font-size: 1.2rem;
+    max-width: 600px;
+    margin: 0 auto 2rem;
+}
+
+.videoWrapper {
+    position: relative;
+    padding-bottom: 56.25%; /* 16:9 aspect ratio */
+    height: 0;
+    overflow: hidden;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}

site/src/pages/index.tsx

@@ -1,42 +1,64 @@
-import clsx from 'clsx';
-import Link from '@docusaurus/Link';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import Layout from '@theme/Layout';
-import HomepageFeatures from '@site/src/components/HomepageFeatures';
-import Heading from '@theme/Heading';
-import { useColorMode } from '@docusaurus/theme-common';
+import Link from "@docusaurus/Link";
+import { useColorMode } from "@docusaurus/theme-common";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import HomepageFeatures from "@site/src/components/HomepageFeatures";
+import Heading from "@theme/Heading";
+import Layout from "@theme/Layout";
+import clsx from "clsx";
 
-
-import styles from './index.module.css';
-
-import HeaderBorderTop from '@site/static/img/hero-border-top.svg';
-import HeaderBorderBottom from '@site/static/img/hero-border-bottom.svg';
-
-import HeaderBorderTopDark from '@site/static/img/hero-border-top.svg';
-import HeaderBorderBottomDark from '@site/static/img/hero-border-bottom.svg';
+import styles from "./index.module.css";
 
 function HomepageHeader() {
     const { siteConfig } = useDocusaurusContext();
-    const { isDarkTheme } = useColorMode();  
-    
+    const { isDarkTheme } = useColorMode();
+
     return (
         <>
-        <header className={clsx('hero hero--primary', styles.heroBanner)}>
+            <header className={clsx("hero hero--primary", styles.heroBanner)}>
+                <div className="container">
+                    <Heading as="h1" className="hero__title">
+                        {siteConfig.title}
+                    </Heading>
+                    <p className="hero__subtitle">{siteConfig.tagline}</p>
+                    <div className={styles.buttons}>
+                        <Link
+                            className="button button--secondary button--lg"
+                            to="/docs/intro"
+                        >
+                            Get Started 🚀
+                        </Link>
+                    </div>
+                </div>
+            </header>
+        </>
+    );
+}
+
+function VideoSection() {
+    return (
+        <section className={styles.videoSection}>
             <div className="container">
-                <Heading as="h1" className="hero__title">
-                    {siteConfig.title}
-                </Heading>
-                <p className="hero__subtitle">{siteConfig.tagline}</p>
-                <div className={styles.buttons}>
-                    <Link
-                        className="button button--secondary button--lg"
-                        to="/docs/intro">
-                        Get Started 🚀
-                    </Link>
+                <div className="row">
+                    <div className="col col--8 col--offset-2">
+                        <h2 className="text--center">
+                            Leios in Action
+                        </h2>
+                        <p className={clsx("text--center", styles.subtitle)}>
+                            Early simulation demonstrating the Leios protocol's
+                            block propagation and network behavior
+                        </p>
+                        <div className={styles.videoWrapper}>
+                            <iframe
+                                className={styles.video}
+                                src="https://drive.google.com/file/d/1aVgh0M-jurCVKy0xYQuLQMoj4ikLNBpH/preview"
+                                allow="autoplay"
+                                allowFullScreen
+                            />
+                        </div>
+                    </div>
                 </div>
             </div>
-        </header>
-        </>
+        </section>
     );
 }
 
@@ -45,10 +67,12 @@ export default function Home(): JSX.Element {
     return (
         <Layout
             title={`Hello from ${siteConfig.title}`}
-            description="Description will go into a meta tag in <head />">
+            description="Description will go into a meta tag in <head />"
+        >
             <HomepageHeader />
             <main>
                 <HomepageFeatures />
+                <VideoSection />
             </main>
         </Layout>
     );