icon cycle circle

frontend/src/lib/components/Pagebuilder/Homepage.svelte

@@ -9,6 +9,12 @@
     register(false)
     let swiper
 
+    function handleMouseOver() {
+        console.log("test")
+    }
+
+    function handleMouseOut() {}
+
     onMount(async () => {
         if (swiper !== undefined) {
             const response = await fetch("/dist/index.css")
@@ -20,9 +26,27 @@
 
             Object.assign(swiper, params)
             swiper.initialize()
+
+            // Add the 'active' class to the h1 of the first slide
+            const firstSlideH1 = document.querySelector(".swiper-slide-active .titles h1")
+            if (firstSlideH1) {
+                firstSlideH1.classList.add("active")
+            }
         }
     })
 
+    function handleSlideChange() {
+        document.querySelectorAll(".titles h1").forEach((h1) => {
+            h1.classList.remove("active")
+        })
+
+        setTimeout(() => {
+            const activeSlideUnderline = document.querySelector(".swiper-slide-active .titles h1")
+            if (activeSlideUnderline) {
+                activeSlideUnderline.classList.add("active")
+            }
+        }, 600)
+    }
     let teaser = teasers[0]
 </script>
 
@@ -36,7 +60,16 @@
             effect="slide"
             navigation="{true}"
             init="{false}"
+            autoplay="{{
+                delay: 4000, // 5000ms = 5s
+                pauseOnMouseEnter: true,
+            }}"
             speed="600"
+            on:focus
+            on:blur
+            on:slidechange="{() => handleSlideChange()}"
+            on:mouseenter="{() => handleMouseOver()}"
+            on:mouseleave="{() => handleMouseOut()}"
             class="relative"
         >
             {#each teasers as teaser}
@@ -45,7 +78,10 @@
                         <div class="inner-container">
                             <div class="titles">
                                 <h2>{teaser?.teaser?.subTitle}</h2>
-                                <h1>{teaser?.teaser?.teaserTitle}</h1>
+                                <h1>
+                                    {teaser?.teaser?.teaserTitle}
+                                    <div class="underline"></div>
+                                </h1>
                             </div>
                             <div class="description">
                                 <div class="placeholder"></div>
@@ -82,10 +118,13 @@
                     font-size: 2rem;
                     padding: 10px 0px;
                     margin: 10px 0px 20px 0px;
-                    text-decoration: underline;
+                    line-height: 1;
+                    position: relative;
                 }
+
                 h2 {
                     font-size: 1.2rem;
+                    line-height: 1;
                 }
             }
             .description {
@@ -107,7 +146,6 @@
                         font-size: 4rem;
                         padding: 20px 0px;
                         margin: 20px 0px 40px 0px;
-                        text-decoration: underline;
                     }
                     h2 {
                         font-size: 1.6rem;
@@ -134,7 +172,6 @@
                         font-size: 5rem;
                         padding: 20px 0px;
                         margin: 20px 0px 40px 0px;
-                        text-decoration: underline;
                     }
                     h2 {
                         font-size: 1.6rem;