Replace hero image with iframe + carousel

docs/index.md

@@ -9,5 +9,5 @@ hide:
   <h1><img src="/assets/images/logo-hero.png"/></h1>
   <h2>An advanced 3D Gaussian Splatting renderer for THREE.js</h2>
   <a href="/docs/" class="md-button md-button--primary">Get started →</a>
-  <img class="hero-image" src="/assets/images/hero-image.png"/>
+  <iframe class="hero-image" src="/examples/hello-world/carousel.html"></iframe>
 </div>

docs/overrides/main.html

@@ -18,11 +18,14 @@
       margin-bottom: 0rem;
     }
 
-    .hero img.hero-image {
+    .hero iframe.hero-image {
       width: 100%;
-      margin-top: 3rem;
       max-width: 800px;
+      height: 600px;
       border-radius: 15px;
+      display: block;
+      margin: auto;
+      margin-top: 2rem;
     }
 
     .hero img {

examples/hello-world/carousel.html

@@ -15,6 +15,7 @@
     {
       "imports": {
         "three": "/examples/js/vendor/three/build/three.module.js",
+        "three/addons/": "/examples/js/vendor/three/examples/jsm/",
         "@forge-gfx/forge": "/dist/forge.module.js"
       }
     }