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;

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

@@ -14,6 +14,7 @@
     import TextLink from "../widgets/textLink.svelte"
     import TopDown from "../widgets/topDown.svelte"
     import { rerender } from "../../store"
+    import IconCycleCircle from "../widgets/iconCycleCircle.svelte"
 
     export let row: Row
     export let pageId: string
@@ -53,7 +54,7 @@
         <h1>{row.pageTitle}</h1>
     {/if}
     {#if row.title}
-        <h2>{row.title}</h2>
+        <h2 class="">{row.title}</h2>
     {/if}
     {#if row.subTitle}
         <h3>{row.subTitle}</h3>
@@ -87,6 +88,8 @@
                     <ExtendableBox col="{col}" />
                 {:else if col.contentType == "personPreview"}
                     <Persons col="{col}" pageId="{pageId}" />
+                {:else if col.contentType == "iconCycleCircle"}
+                    <IconCycleCircle col="{col}" pageId="{pageId}" />
                 {/if}
             </div>
         {/each}
@@ -104,7 +107,6 @@
             gap: 10px;
             img {
                 width: 40px;
-
                 margin-right: 10px;
             }
         }
@@ -117,7 +119,6 @@
     }
     h1,
     h2 {
-        line-height: 1;
         padding-bottom: 40px;
     }