wm-fontis-tibi-2023/frontend/src/lib/components/Pagebuilder/Homepage.svelte

<script lang="ts">
    import { pages } from "../../store"
    import { register } from "swiper/element/bundle"
    import { onMount } from "svelte"
    import TextLink from "../widgets/textLink.svelte"

    let teasers = Object.values($pages)?.map((page) => ({ teaser: page.teaser, path: page.path }))
    $: teasers = Object.values($pages)?.map((page) => ({ teaser: page.teaser, path: page.path }))
    console.log("teasers:", teasers)

    register(false)
    let swiper

    function handleMouseOver() {}

    function handleMouseOut() {}

    onMount(async () => {
        if (swiper !== undefined) {
            const response = await fetch("/dist/index.css")
            const cssText = await response.text()

            const params = {
                injectStyles: [cssText],
            }

            Object.assign(swiper, params)
            swiper.initialize()

            if (typeof window !== "undefined") {
                // 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() {
        if (typeof window !== "undefined") {
            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>

{#if teaser}
    <div class="container">
        <swiper-container
            bind:this="{swiper}"
            slides-per-view="1"
            loop="{true}"
            direction="horizontal"
            effect="slide"
            navigation="{true}"
            init="{false}"
            autoplay="{{
                delay: 15000, // 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}
                {#if teaser?.teaser?.showTeaser}
                    <swiper-slide class="relative">
                        <div class="inner-container">
                            <div class="titles">
                                <h2>{teaser?.teaser?.subTitle}</h2>
                                <h1>
                                    {teaser?.teaser?.teaserTitle}
                                    <div class="underline"></div>
                                </h1>
                            </div>
                            <div class="description">
                                <div class="placeholder"></div>
                                <TextLink description="{teaser?.teaser?.teaserDescription}" path="{teaser?.path}" />
                                <div class="placeholder"></div>
                            </div>
                        </div>
                    </swiper-slide>
                {/if}
            {/each}
        </swiper-container>
    </div>
{/if}

<style lang="less">
    @import "../../assets/css/main.less";

    .container {
        padding: 20px 0px 150px 0px;
        min-height: 100vh;

        display: flex;
        align-items: center;
        justify-content: center;
        swiper-container {
            max-width: 1400px;
        }
        .inner-container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            gap: 20px;
            @media @tablet {
                align-items: center;
                gap: initial;
            }
            width: 100%;
            height: fit-content;

            .titles {
                padding: 0 5%;
                font-weight: 500;
                h1 {
                    font-size: 2rem;
                    padding: 10px 0px 0px 0px;
                    @media @tablet {
                        padding: 20px 0px;
                    }
                    margin: 10px 0px 20px 0px;
                    line-height: 1;
                    font-weight: 500;
                    position: relative;
                    color: @signal-color;
                }

                h2 {
                    font-size: 0.9rem !important;
                    @media @tablet {
                        font-size: 1.6rem !important;
                    }
                    line-height: 1;
                    font-family: "Libre Franklin", sans-serif;
                    font-weight: 500;
                }
            }
            .description {
                display: flex;
                flex-direction: row;
                & > div {
                    flex: 0 0 5%;
                    min-width: 0px;
                }
                & > div:nth-child(2) {
                    flex: 0 0 90%;
                    min-width: 0px;
                }
            }

            @media @tablet {
                .titles {
                    font-weight: 500;
                    h1 {
                        font-size: 3.5rem;
                        padding: 20px 20px;
                        margin: 20px 0px 40px 0px;
                        font-weight: 500;
                    }
                    h2 {
                        font-size: 1.3rem;
                    }
                    font-weight: 500;
                }
                .description {
                    display: flex;
                    flex-direction: row;
                    & > div {
                        flex: 0 0 25%;
                        min-width: 0px;
                    }
                    & > div:nth-child(2) {
                        flex: 0 0 50%;
                        min-width: 0px;
                    }
                }
            }

            @media @desktop {
                .titles {
                    font-weight: 500;
                    h1 {
                        font-size: 5rem;
                        padding: 20px 0px;
                        margin: 20px 0px 40px 0px;
                        font-weight: 500;
                    }
                    h2 {
                        font-size: 1.6rem;
                        font-weight: 500;
                    }
                }

                .description {
                    display: flex;
                    flex-direction: row;
                    & > div {
                        flex: 0 0 33.33%;
                        min-width: 0px;
                    }
                }
                .titles {
                }
            }
        }
    }
</style>