frontend session

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

@@ -1,5 +1,158 @@
 <script lang="ts">
-    export let row: Row
+    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 }))
+
+    register(false)
+    let swiper
+
+    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()
+        }
+    })
+
+    $: console.log(teasers, "teasers")
+    let teaser = teasers[0]
 </script>
 
-<stlye lang="less"></stlye>
+{#if teaser}
+    <div class="container">
+        <swiper-container
+            bind:this="{swiper}"
+            slides-per-view="1"
+            loop="{true}"
+            direction="horizontal"
+            effect="slide"
+            navigation="{true}"
+            init="{false}"
+            speed="600"
+            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}</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: 150px 0px;
+        min-height: 100vh;
+        display: flex;
+        align-items: center;
+        .inner-container {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            width: 100%;
+            height: fit-content;
+
+            .titles {
+                font-weight: normal;
+                h1 {
+                    font-size: 2rem;
+                    padding: 10px 0px;
+                    margin: 10px 0px 20px 0px;
+                    text-decoration: underline;
+                }
+                h2 {
+                    font-size: 1.2rem;
+                }
+            }
+            .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: normal;
+                    h1 {
+                        font-size: 4rem;
+                        padding: 20px 0px;
+                        margin: 20px 0px 40px 0px;
+                        text-decoration: underline;
+                    }
+                    h2 {
+                        font-size: 1.6rem;
+                    }
+                }
+                .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: normal;
+                    h1 {
+                        font-size: 5rem;
+                        padding: 20px 0px;
+                        margin: 20px 0px 40px 0px;
+                        text-decoration: underline;
+                    }
+                    h2 {
+                        font-size: 1.6rem;
+                    }
+                }
+
+                .description {
+                    display: flex;
+                    flex-direction: row;
+                    & > div {
+                        flex: 0 0 33.33%;
+                        min-width: 0px;
+                    }
+                }
+                .titles {
+                }
+            }
+        }
+    }
+</style>