new update

frontend/src/lib/components/WebHomePage.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { onMount } from "svelte";
     import ParallaxLandscape from "$lib/components/ParallaxLandscape.svelte";
+    import Carousel from "$lib/components/Carousel.svelte";
     import Icon from "@iconify/svelte";
 
     interface Props {
@@ -103,6 +104,10 @@
                 </a>
             </div>
         </div>
+
+        <div class="hero-visual">
+            <Carousel />
+        </div>
     </section>
 
     <div class="spacer"></div>
@@ -191,6 +196,15 @@
         padding: 120px 60px 100px;
         max-width: 1200px;
         margin: 0 auto;
+        justify-content: space-between;
+        gap: 60px;
+    }
+
+    .hero-visual {
+        flex: 1;
+        max-width: 500px;
+        display: flex;
+        justify-content: center;
     }
 
     .hero-content {
@@ -462,6 +476,21 @@
         .features-grid {
             grid-template-columns: repeat(2, 1fr);
         }
+
+        .hero {
+            flex-direction: column;
+            text-align: center;
+            padding-top: 100px;
+        }
+
+        .hero-content {
+            margin: 0 auto;
+        }
+
+        .hero-visual {
+            margin-top: 40px;
+            width: 100%;
+        }
     }
 
     @media (max-width: 768px) {