icon cycle circle

frontend/media/ToTop.svg

@@ -0,0 +1,5 @@
+<svg width="68" height="68" viewBox="0 0 68 68" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="1" y="1" width="66" height="66" rx="33" fill="#000"/>
+    <path d="M44.91 39.965 34 29.066 23.09 39.965l-1.055-1.055L34 26.934 45.965 38.91l-1.055 1.055z" fill="#fff"/>
+    <rect x="1" y="1" width="66" height="66" rx="33" stroke="#fff" stroke-width="2"/>
+</svg>

frontend/media/chev-d.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="m22.723 5.473 1.054 1.054L12 18.305.223 6.527l1.054-1.054L12 16.195 22.723 5.473z" fill="#333"/>
+</svg>

frontend/src/App.svelte

@@ -5,9 +5,12 @@
     import NotFound from "./lib/components/NotFound.svelte"
     import Rows from "./lib/components/Pagebuilder/Rows.svelte"
     import { location, navigation, pages, serviceNavigation, rerender } from "./lib/store"
+    import { onMount, onDestroy } from "svelte"
     import { Route, Router } from "svelte-routing"
     import { loadPages } from "./lib/functions/getPages"
     import { loadNavigation } from "./lib/functions/loadNavigation"
+    import ScrollTop from "./lib/components/widgets/scrollTop.svelte"
+    import ScrollDown from "./lib/components/widgets/scrollDown.svelte"
     export let url = ""
 
     if (url) {
@@ -35,7 +38,6 @@
 
     async function getNavigation() {
         let nav: Navigation[] = await loadNavigation()
-        console.log(nav)
         $navigation = nav[0]
         $serviceNavigation = nav[1]
     }
@@ -74,6 +76,9 @@
     <Footer />
 </main>
 
+<ScrollTop />
+<ScrollDown />
+
 <Menu bind:active="{activeMenu}" />
 
 <style lang="less" global>

frontend/src/lib/assets/css/base.less

@@ -60,3 +60,94 @@ select {
     color: #333;
     width: 100%;
 }
+.underline {
+    display: inline;
+    position: relative;
+    overflow: hidden;
+}
+.underline:after {
+    content: "";
+    position: absolute;
+    z-index: 10000;
+    right: 0;
+    width: 0;
+    bottom: -2px;
+    background: #ffffff;
+    height: 4px;
+    transition: width 0.5s ease-out;
+}
+.underline:hover:after,
+.underline:focus:after,
+.underline:active:after {
+    left: 0;
+    right: auto;
+    width: 100%;
+}
+
+.fill {
+    display: inline;
+    position: relative;
+    overflow: hidden;
+}
+
+.fill:hover {
+    color: white !important;
+    div {
+        position: relative;
+        z-index: 2;
+    }
+}
+.fill:after {
+    content: "";
+    position: absolute;
+    z-index: 1;
+    right: 0;
+    top: 0px;
+    bottom: 0px;
+    width: 0px;
+    background: #000000;
+    transition: width 0.5s ease-out;
+}
+.fill:hover:after,
+.fill:focus:after,
+.fill:active:after {
+    right: auto;
+    width: 100%;
+    left: 0px;
+}
+
+@keyframes underlineEffect {
+    0% {
+        width: 0;
+    }
+    100% {
+        width: 100%;
+    }
+}
+
+swiper-slide {
+    &:hover {
+        h1.active .underline {
+            animation-play-state: paused;
+        }
+    }
+}
+
+.titles {
+    h1 {
+        .underline {
+            position: absolute;
+            z-index: 10000;
+            left: 0;
+            bottom: 0px;
+            background: #000000;
+            height: 10px;
+            width: 0;
+            animation: underlineEffect 4s linear forwards;
+        }
+
+        &:not(.active) .underline {
+            animation: none;
+        }
+    }
+}

frontend/src/lib/components/Footer.svelte

@@ -1,10 +1,45 @@
 <script lang="ts">
+    import { navigate } from "svelte-routing/src/history"
+    import { navigation, pages, rerender } from "../store"
+    let nextpage = $navigation?.pages[0]
+    function getNextPage(pages) {
+        if (location.pathname == "/") return
+        let currPage = pages.find(
+            (page) => Object.values($pages)?.find((o) => o.id == page.page)?.path == location.pathname
+        )
+
+        let currIndex = pages.indexOf(currPage)
+        let nextIndex
+        if (pages.length - 1 == currIndex) {
+            nextIndex = 0
+        } else {
+            nextIndex = currIndex + 1
+        }
+        nextpage = pages[nextIndex]
+        console.log(nextpage, pages, nextIndex)
+    }
+    setInterval(() => {
+        getNextPage($navigation.pages)
+    }, 1000)
+    $: {
+        if ($rerender) {
+            if (location.pathname != "/") {
+                getNextPage($navigation.pages)
+            }
+        }
+    }
 </script>
 
 <div class="footer">
-    <button class="upper-part">
+    <button
+        class="upper-part"
+        on:click="{() => {
+            $rerender = $rerender + 1
+            navigate(Object.values($pages)?.find((o) => o.id == nextpage.page)?.path || '/')
+        }}"
+    >
         <div class="upper"><img src="/media/arrow-right.svg" alt="arrow" /> nächstes Thema</div>
-        <div class="lower">Ihre&nbsp;Bedürfnisse</div>
+        <div class="lower">{nextpage?.name}</div>
     </button>
     <div class="lower-part">
         <div class="links">
@@ -25,9 +60,9 @@
         display: flex;
         flex-direction: column;
         align-items: flex-end;
-        background-color: @bg-color-secondary;
         color: @font-color-secondary;
         .upper-part {
+            background-color: @bg-color-secondary;
             padding: 10px 40px;
             display: flex;
             flex-direction: column;
@@ -52,6 +87,8 @@
 
         .lower-part {
             padding: 40px 40px;
+
+            background-color: @bg-color-secondary;
             width: 100%;
             display: flex;
             flex-direction: column;

frontend/src/lib/components/Menu/Menu.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { navigate } from "svelte-routing/src/history"
-    import { navigation, pages } from "../../store"
+    import { navigation, pages, rerender } from "../../store"
     import Header from "./Header.svelte"
     $: console.log($navigation, "nav")
     export let active = false
@@ -16,9 +16,10 @@
                         <div class="pages">
                             {#each $navigation.pages as page}
                                 <button
-                                    class="page"
+                                    class="page underline"
                                     on:click="{() => {
                                         active = false
+                                        $rerender = $rerender + 1
                                         navigate(Object.values($pages)?.find((o) => o.id == page.page)?.path || '/')
                                     }}"
                                 >
@@ -28,11 +29,11 @@
                         </div>
                         <div class="footer-infos">
                             <div class="upper">
-                                <button>Datenschutz</button>
+                                <button class="underline">Datenschutz</button>
-                                <button>Impressum</button>
+                                <button class="underline">Impressum</button>
                             </div>
                             <div class="lower">
-                                <button>0711 644 700-0</button>
+                                <button>0711&nbsp;644&nbsp;700-0</button>
                                 <button>info@fontis.de</button>
                             </div>
                         </div>
@@ -74,29 +75,60 @@
                 .container {
                     display: flex;
                     flex-direction: column;
-                    justify-content: flex-end;
+                    justify-content: flex-start;
                     align-items: flex-end;
                     width: 80%;
                     margin: 10vw 0px;
+                    @media @tablet {
+                        justify-content: flex-end;
+                    }
                     .inner-container {
                         width: 100%;
                         display: flex;
+                        flex-direction: column;
+                        align-items: center;
+                        height: 100%;
+                        justify-content: space-between;
+                        @media @tablet {
+                            justify-content: initial;
+                            height: initial;
+                        }
 
                         .footer-infos {
                             width: 100%;
                             display: flex;
-                            flex-direction: column;
+                            flex-wrap: wrap;
+                            @media @tablet {
+                                flex-wrap: initial;
+                                flex-direction: column;
+                                height: 100%;
+                            }
                             justify-content: space-between;
+                            text-align: start;
+
                             .upper {
                                 display: flex;
                                 flex-direction: column;
-                                align-items: flex-end;
+                                align-items: flex-start;
                                 gap: 15px;
+                                margin-top: 15px;
+                                @media @tablet {
+                                    margin-top: 0px;
+                                    align-items: flex-start;
+                                }
+                                @media @desktop {
+                                    align-items: flex-end;
+                                }
                             }
                             .lower {
+                                margin-top: 15px;
                                 display: flex;
                                 flex-direction: column;
-                                align-items: flex-end;
+                                align-items: flex-start;
+
+                                @media @tablet {
+                                    align-items: flex-start;
+                                }
                                 @media @desktop {
                                     flex-direction: row;
                                     justify-content: flex-end;
@@ -104,7 +136,6 @@
                                 gap: 20px;
                             }
                             button {
-                                font-size: 1.6rem;
                                 color: @font-color-secondary;
                             }
                             @media @desktop {
@@ -118,6 +149,7 @@
                             display: flex;
                             align-items: flex-start;
                             flex-direction: column;
+                            font-family: "Libre Caslon Text", serif;
                             gap: 20px;
                             .page {
                                 font-size: 1.6rem;

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;
     }
 

frontend/src/lib/components/widgets/events.svelte

@@ -53,7 +53,7 @@
         </div>
     {/each}
     {#if displayedItems < col.networkEvents.length}
-        <button on:click="{showMore}">Weitere Events</button>
+        <button on:click="{showMore}" class="fill"><div>Weitere Events</div></button>
     {/if}
 </div>
 

frontend/src/lib/components/widgets/iconCycleCircle.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+    import { apiBaseURL } from "../../../config"
+    import { onMount } from "svelte"
+
+    export let col: Column
+    export let pageId: string
+
+    let count = col.iconCycleCircle.boxes.length // The number of surrounding circles.
+    let angleStep = 360 / count
+    let radius = 100 // Distance from center
+
+    let circles = []
+
+    onMount(() => {
+        for (let i = 0; i < count; i++) {
+            let angle = angleStep * i * (Math.PI / 180) // Convert to radians
+
+            circles.push({
+                x: radius * Math.cos(angle),
+                y: radius * Math.sin(angle),
+                rotation: angleStep * i - 90, // subtract 90 to point towards the circle
+            })
+        }
+        circles = circles
+    })
+</script>
+
+<div class="main-circle">
+    {#each circles as { x, y, rotation }}
+        <div class="circle" style="transform: translate(calc(100px + {x}px - 25px), calc(100px + {y}px - 25px))"></div>
+        <div
+            class="arrow"
+            style="transform: translate(calc(100px + {x / 2}px - 1px), calc(100px + {y /
+                2}px - 25px)) rotate({rotation}deg)"
+        ></div>
+    {/each}
+</div>
+
+<style lang="less">
+    .main-circle {
+        position: relative;
+        width: 200px;
+        height: 200px;
+        margin: auto;
+        background: red;
+        border-radius: 50%;
+    }
+
+    .circle {
+        position: absolute;
+        width: 50px;
+        height: 50px;
+        background: blue;
+        z-index: 100;
+        border-radius: 50%;
+        transform-origin: center;
+    }
+
+    .arrow {
+        position: absolute;
+        width: 2px;
+        height: 50px;
+        background: black;
+        transform-origin: center;
+    }
+</style>

frontend/src/lib/components/widgets/pageLinkBlocks.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { navigate } from "svelte-routing/src/history"
-    import { pages } from "../../store"
+    import { pages, rerender } from "../../store"
     export let col: Column
 </script>
 
@@ -9,16 +9,25 @@
         {#if isNaN(link.rowNr)}
             <button
                 class="page-ref"
-                on:click="{() => navigate(Object.values($pages)?.find((o) => o.id == link.page)?.path || '/')}"
+                on:click="{() => {
+                    $rerender = $rerender + 1
+                    navigate(Object.values($pages)?.find((o) => o.id == link.page)?.path || '/')
+                }}"
             >
                 {link.name}
             </button>
         {:else}
             <button
-                class="row-ref"
+                class="row-ref fill"
-                on:click="{() => navigate(Object.values($pages)?.find((o) => o.id == link.page)?.path || '/')}"
+                on:click="{() => {
+                    $rerender = $rerender + 1
+                    navigate(Object.values($pages)?.find((o) => o.id == link.page)?.path || '/')
+                }}"
             >
-                {link.name} <img src="/media/arrow-r.svg" alt="arrow" />
+                <div>
+                    {link.name}
+                </div>
+                <img src="/media/arrow-r.svg" alt="arrow" />
             </button>
         {/if}
     {/each}

frontend/src/lib/components/widgets/publications.svelte

@@ -31,7 +31,7 @@
     {/each}
 </div>
 {#if displayedItems < col.publications.length}
-    <button on:click="{showMore}">Weitere Publikationen</button>
+    <button on:click="{showMore}" class="fill"><div>Weitere Publikationen</div></button>
 {/if}
 
 <style lang="less">

frontend/src/lib/components/widgets/scrollDown.svelte

@@ -0,0 +1,62 @@
+<script>
+    import { onMount, onDestroy } from "svelte"
+    import { rerender } from "../../store"
+
+    let showButton = true
+
+    const checkScroll = () => {
+        // Change the visibility of the button based on the scroll position
+        showButton = window.pageYOffset < 100
+    }
+
+    const jumpDown = () => {
+        // Jump down by 100vh
+        window.scrollTo({ top: window.innerHeight, behavior: "smooth" })
+    }
+
+    onMount(() => {
+        // Attach scroll event listener when component is mounted
+        window.addEventListener("scroll", checkScroll)
+    })
+
+    onDestroy(() => {
+        // Remove scroll event listener when component is destroyed
+        window.removeEventListener("scroll", checkScroll)
+    })
+    let force = true
+    setInterval(() => {
+        if (location.pathname != "/") {
+            force = false
+        } else force = true
+    }, 1000)
+    $: {
+        if ($rerender) {
+            if (location.pathname != "/") {
+                force = false
+            } else force = true
+        }
+    }
+</script>
+
+{#if showButton && force}
+    <button on:click="{jumpDown}" class="jump-down"
+        ><span> SCROLL </span>
+        <img src="/media/chev-d.svg" alt="arrow" />
+    </button>
+{/if}
+
+<style>
+    .jump-down {
+        /* Place your styles here */
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        position: fixed;
+        color: #4f4f4f;
+        z-index: 100;
+        gap: 5px;
+        bottom: 20px;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+</style>

frontend/src/lib/components/widgets/scrollTop.svelte

@@ -0,0 +1,46 @@
+<script>
+    import { onMount, onDestroy } from "svelte"
+
+    let showButton = false
+
+    const checkScroll = () => {
+        // Change the visibility of the button based on the scroll position
+        showButton = window.pageYOffset > 200
+    }
+
+    const scrollToTop = () => {
+        // Scroll smoothly to the top
+        window.scrollTo({ top: 0, behavior: "smooth" })
+    }
+
+    onMount(() => {
+        // Attach scroll event listener when component is mounted
+        window.addEventListener("scroll", checkScroll)
+    })
+
+    onDestroy(() => {
+        // Remove scroll event listener when component is destroyed
+        window.removeEventListener("scroll", checkScroll)
+    })
+</script>
+
+{#if showButton}
+    <button on:click="{scrollToTop}" class="scroll-to-top"><img src="/media/ToTop.svg" alt="toTop" /> </button>
+{/if}
+
+<style lang="less">
+    @import "../../assets/css/main.less";
+    .scroll-to-top {
+        /* Place your styles here */
+        position: fixed;
+        bottom: 5px;
+        z-index: 100;
+        transform: scale(0.5);
+        right: 5px;
+        @media @tablet {
+            bottom: 60px;
+            right: 60px;
+            transform: scale(1);
+        }
+    }
+</style>

frontend/src/lib/store.ts

@@ -13,4 +13,4 @@ export const location = writable(initLoc)
 export let navigation = writable<Navigation>()
 export let pages = writable<Pages>({})
 export let serviceNavigation = writable<Navigation>()
-export let rerender = writable(0)
+export let rerender = writable(0)