Starter Projekt angefangen, etwas aufzubohren und ein paar grundlegend benötigte Collections, Teheming-Styles und Komponenten hinzugefügt. (WIP)

src/components/App.svelte

@@ -1,9 +1,14 @@
 <script lang="ts">
-    import { Router, Route, links } from "svelte-routing"
+    import { Router, Route } from "svelte-routing"
     import { scrollToTop } from "svelte-scrollto"
     import { location } from "../store"
+
+    import Home from "./routes/Home.svelte"
     import Content from "./routes/Content.svelte"
 
+    import Header from "./widgets/Header.svelte"
+    import Footer from "./widgets/Footer.svelte"
+
     export let url = ""
     if (url) {
         // ssr
@@ -24,23 +29,21 @@
     if (typeof window !== "undefined") console.log("App initialized")
 </script>
 
-<style lang="less" global>
-    @import "./../css/main.less";
-    h1 {
-        color: red;
-    }
-</style>
+<Header />
 
-<h1>__PROJECT_TITLE__</h1>
-
-<div use:links>
-    <a href="/test1">1</a>
-    <a href="/test2">2</a>
-    <a href="/test3">3</a>
-    <a href="/test4">4</a>
+<div>
     <Router url="{url}">
+        <Route path="/" let:params>
+            <Home />
+        </Route>
         <Route path="/*path" let:params>
             <Content path="/{params.path}" />
         </Route>
     </Router>
 </div>
+
+<Footer />
+
+<style lang="less" global>
+    @import "./../css/main.less";
+</style>

src/components/ContentBlocks.svelte

@@ -1,109 +0,0 @@
-<script lang="ts">
-    export let blocks: ContentBlock[]
-    export let imageBase: string
-
-    export let accordeon = false
-
-    let activeAccordeons: {
-        [key: number]: boolean
-    } = {}
-</script>
-
-<style lang="less">
-    .acc_trigger {
-        display: flex;
-        display: -webkit-flex;
-        align-items: center;
-        justify-content: space-between;
-        cursor: pointer;
-        border-bottom: solid 1px #ccc;
-        padding-bottom: 10px;
-        .icon {
-            display: flex;
-            display: -webkit-flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 30px;
-            transform: rotate(0deg);
-            transition: all 0.3s;
-        }
-        &.active {
-            .icon {
-                transform: rotate(180deg);
-            }
-        }
-    }
-
-    .hideText {
-        display: none;
-    }
-</style>
-
-{#if blocks?.length}
-    <section class="section_padding">
-        <div class="container">
-            {#each blocks as box, idx}
-                <!-- Teaserbox -->
-                <div class="row center_row">
-                    {#if box.images?.length && (box.layout == 1 || box.layout == 3)}
-                        <div class="col-md-{box.layout < 3 ? 6 : 12}">
-                            <img
-                                loading="lazy"
-                                src="{imageBase + box.images[0].file.src}"
-                                alt="{box.images[0].label || ''}"
-                            />
-                        </div>
-                    {/if}
-                    {#if box.text || box.title || (box.button_text && box.button_url)}
-                        <div class="col-md-{box.layout < 3 ? 6 : 12}">
-                            {#if box.subtitle}
-                                <div class="subline">{box.subtitle}</div>
-                            {/if}
-                            {#if box.title}
-                                {#if accordeon == true}
-                                    <h2
-                                        class="h2_nooffset acc_trigger"
-                                        class:active="{activeAccordeons[idx]}"
-                                        on:click="{() => {
-                                            activeAccordeons[idx] =
-                                                !activeAccordeons[idx]
-                                        }}"
-                                    >
-                                        {box.title}
-                                        <span class="icon">\/</span>
-                                    </h2>
-                                {:else}
-                                    <h2 class="h2_nooffset">{box.title}</h2>
-                                {/if}
-                            {/if}
-                            <div
-                                class="boxText"
-                                class:hideText="{accordeon &&
-                                    box.title &&
-                                    !activeAccordeons[idx]}"
-                            >
-                                {@html box.text}
-                                {#if box.button_text && box.button_url}
-                                    <a
-                                        href="{box.button_url}"
-                                        class="btn btn_blue"
-                                        >{box.button_text}</a
-                                    >
-                                {/if}
-                            </div>
-                        </div>
-                    {/if}
-                    {#if box.images?.length && (box.layout == 2 || box.layout == 4)}
-                        <div class="col-md-{box.layout < 3 ? 6 : 12}">
-                            <img
-                                loading="lazy"
-                                src="{imageBase + box.images[0].file.src}"
-                                alt="{box.images[0].label || ''}"
-                            />
-                        </div>
-                    {/if}
-                </div>
-            {/each}
-        </div>
-    </section>
-{/if}

src/components/PrototypeArticle.svelte

@@ -1,95 +0,0 @@
-<script lang="ts">
-    import { generalInformation } from "../store"
-    import { apiBaseURL } from "../config"
-
-    export let article: PrototypeArticle
-    export let details: boolean = false
-
-    const a = article.article
-    let cssClasses: string = "p_article"
-
-    cssClasses += a.layout.variant ? " p_article-" + a.layout.variant : ""
-    cssClasses += " " + Object.values(a.layout.margin).join(" ")
-    cssClasses += " " + Object.values(a.layout.padding).join(" ")
-
-    const getImageAlt = (image): string => {
-        if (image.alternateText) {
-            return image.alternateText
-        }
-        if (image.title) {
-            return image.title
-        }
-
-        return a.content.title
-    }
-
-    const getImageSrc = (file) => {
-        const url = `${apiBaseURL}prototype_articles/${file.id}/${file.file.path}?filter=l`
-        console.log(url, file)
-        return url
-    }
-</script>
-
-{#if a.general.public}
-    <article class="{cssClasses}">
-        {#if !a.layout.variant || a.layout.variant === "top-left"}
-            {#if a.general.categories}
-                <div class="p_article-categories">
-                    {#each a.general.categories || [] as c}
-                        <span class="p_article-category">{c}</span>
-                    {/each}
-                </div>
-            {/if}
-            {#if a.content.types.contentMedia.mediaFiles}
-                <div class="p_article-images">
-                    {#each a.content.types.contentMedia.mediaFiles || [] as image}
-                        <!-- {JSON.stringify(image)} -->
-                        {#if image?.file?.path}
-                            {getImageSrc(image)}
-                            <!-- <img 
-                                src="{getImageSrc(image?.file)}" 
-                                id="{image?.id ? image?.id : ''}" 
-                                alt="{getImageAlt(image)}"
-                                class="p_article-image"
-                            /> -->
-                        {/if}
-                        {#if image?.caption}
-                            <div class="p_article-image-caption">{image?.caption}</div>
-                        {/if}
-                    {/each}
-                </div>
-            {/if}
-
-            {#if a.content.title}
-                <div class="p_article-title">{a.content.title}</div>
-            {/if}
-            {#if a.content.subtitle}
-                <div class="p_article-subtitle">{a.content.subtitle}</div>
-            {/if}
-            {#if a.content.types.teaser}
-                <div class="p_article-teaser">
-                    {@html a.content.types.teaser}
-                </div>
-            {/if}
-            {#if details && a.content.types.details}
-                <div class="p_article-details">
-                    {@html a.content.types.details}
-                </div>
-            {/if}
-            {#if a.link.url}
-                <a href="{a.link.url}" target="{a.link.target}">
-                    {a.link.text ? a.link.text : a.link.url}
-                </a>
-            {/if}
-            {#if a.content.types.contentAttachments.attachments}
-                <div class="p_article-attachments">
-                    {#each a.content.types.contentAttachments.attachments || [] as attachment}
-                        <a href="{attachment.file.src}" download="{attachment.file.path}" class="p_article-attachment">
-                            {attachment.title ? attachment.title : attachment.file.path}
-                        </a>
-                    {/each}
-                </div>
-            {/if}
-        {/if}
-    </article>
-{/if}

src/components/routes/Content.svelte

@@ -1,7 +1,49 @@
 <script lang="ts">
+    import { getContent } from "../../api"
+    // import { apiBaseURL } from "../../config"
+    import { generalInfo } from "../../store"
+
     export let path: string
 
-    console.log("Content: ", path)
+    let loading = true
+    let content: Content
+
+    function load() {
+        loading = true
+        getContent(path)
+            .then((c) => {
+                content = c
+            })
+            .finally(() => {
+                loading = false
+            })
+    }
+
+    $: if (path) load()
 </script>
 
-<h2>{path}</h2>
+<svelte:head>
+    <title>{content?.name ? content?.name + " - " : ""}{$generalInfo?.meta?.metaTitle}</title>
+    <meta name="description" content="{$generalInfo?.meta?.metaDescription}" />
+    <meta name="keywords" content="{$generalInfo?.meta?.metaKeywords.replaceAll(' ', '')}" />
+    <meta name="author" content="{$generalInfo?.person?.firstname} {$generalInfo?.person?.lastname}" />
+    <meta name="robots" content="{$generalInfo?.meta?.metaTagRobots}" />
+</svelte:head>
+
+<div class="container">
+    <div class="row">
+        <div class="col-md-12">
+            {#if loading}
+                <!-- Loader -->
+            {:else if content}
+                {#each content.blocks || [] as b}
+                    <h2>{b.title}</h2>
+                    <div>{@html b.text}</div>
+                {/each}
+            {:else}
+                <h1>Seite nicht gefunden</h1>
+                <div>Pfad: {path}</div>
+            {/if}
+        </div>
+    </div>
+</div>

src/components/routes/Home.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+    import * as animateScroll from "svelte-scrollto"
+
+    import { generalInfo } from "../../store"
+
+    import GoogleMaps from "../widgets/GoogleMaps.svelte"
+    import ScrollTo from "../widgets/ScrollTo.svelte"
+    import ContactForm from "../widgets/ContactForm.svelte"
+
+    let expandedForm: string = "recipe"
+</script>
+
+<svelte:head>
+    <title>{$generalInfo?.meta?.metaTitle}</title>
+    <meta name="description" content="{$generalInfo?.meta?.metaDescription}" />
+    <meta name="keywords" content="{$generalInfo?.meta?.metaKeywords.replaceAll(' ', '')}" />
+    <meta name="author" content="{$generalInfo?.person?.firstname} {$generalInfo?.person?.lastname}" />
+    <meta name="robots" content="{$generalInfo?.meta?.metaTagRobots}" />
+</svelte:head>
+
+<section class="contact">
+    <div class="container">
+        <div class="row nospace">
+            <div class="col-md-6">
+                <ContactForm type="recipe" collapsed="{expandedForm !== 'recipe'}" />
+            </div>
+            <div class="col-md-6">
+                <ContactForm type="contact" collapsed="{expandedForm !== 'contact'}" />
+            </div>
+        </div>
+    </div>
+</section>
+
+<section>
+    <GoogleMaps />
+</section>
+
+<ScrollTo
+    on:scrollTo="{(e) => {
+        expandedForm = null
+        animateScroll.scrollTo({
+            delay: 100,
+            element: '#' + e.detail.element,
+            offset: -200,
+            onDone: () => {
+                expandedForm = e.detail.element
+            },
+        })
+    }}"
+/>

src/components/routes/PrototypeArticles.svelte

@@ -1,31 +0,0 @@
-<script lang="ts">
-    import { getPrototypeArticles } from "../../api"
-
-    import Sidebar from "../page/Sidebar.svelte"
-    import PrototypeArticle from "../page/PrototypeArticle.svelte"
-
-    let articles: PrototypeArticle[] | []
-
-    const getArticles = async () => {
-        articles = await getPrototypeArticles()
-    }
-    getArticles()
-    
-</script>
-
-<div class="container">
-    <div class="row">
-        <div class="col-md-10">
-            
-            <div>
-                {#each articles || [] as article}
-                    <PrototypeArticle article="{article}" />
-                {/each}
-            </div>
-
-        </div>
-        <div class="col-md-2">
-            <Sidebar />
-        </div>
-    </div>
-</div>

src/components/widgets/ContactForm.svelte

@@ -0,0 +1,160 @@
+<script lang="ts">
+    import { fade } from "svelte/transition"
+    import { mdiCheck, mdiChevronDown } from "@mdi/js"
+    import Icon from "mdi-svelte"
+
+    import { sendEmail } from "../../api"
+
+    export let type: string
+    export let collapsed: boolean = false
+
+    let formData: {
+        name: string
+        email: string
+        subject: string
+        message: string
+        privacy: boolean
+    } = {
+        name: null,
+        email: null,
+        subject: null,
+        message: null,
+        privacy: false,
+    }
+    let requestSucessfully: boolean = false
+    let requestPending: boolean = false
+
+    const submit = () => {
+        if (
+            formData["name"] &&
+            formData["email"] &&
+            formData["subject"] &&
+            formData["message"] &&
+            formData["privacy"]
+        ) {
+            requestPending = true
+            sendEmail(type + "Form", formData)
+                .then(() => {
+                    resetForm()
+                    requestSucessfully = true
+                    requestPending = false
+
+                    setTimeout(() => {
+                        requestSucessfully = false
+                    }, 10000)
+                })
+                .catch((e) => {
+                    console.error(e)
+                    requestPending = false
+                })
+                .finally(() => {
+                    requestPending = false
+                })
+        }
+    }
+
+    const resetForm = () => {
+        formData = {
+            name: null,
+            email: null,
+            subject: null,
+            message: null,
+            privacy: false,
+        }
+    }
+
+    $: isValid =
+        formData["name"] && formData["email"] && formData["subject"] && formData["message"] && formData["privacy"]
+</script>
+
+<div id="{type}">
+    <form on:submit|preventDefault="{submit}" class="mt-lg">
+        <div class="layout justify-content-space-between layout-gap-md">
+            <div class="hidden-sm icon {type}">
+                <!-- <img src="img/icon/{type}.svg" alt="" /> -->
+            </div>
+            <div class="titles" on:click="{() => (collapsed = !collapsed)}">
+                <h3 class="title">
+                    {type === "contact" ? "Kontakt" : ""}
+                    {type === "recipe" ? "Rezeptanfrage" : ""}
+                </h3>
+                <h4 class="subTitle">
+                    {type === "contact" ? "Schreiben Sie uns Ihr Anliegen" : ""}
+                    {type === "recipe" ? "Teilen Sie uns Ihren Rezeptwunsch mit" : ""}
+                </h4>
+            </div>
+            <div class="collapse-icon" class:collapsed="{!collapsed}" on:click="{() => (collapsed = !collapsed)}">
+                <Icon path="{mdiChevronDown}" size="2" />
+            </div>
+        </div>
+        {#if !collapsed}
+            <div>
+                <div class="row">
+                    <div class="col-md-6 mt-sm">
+                        <input
+                            type="text"
+                            bind:value="{formData['name']}"
+                            placeholder="Name"
+                            readonly="{requestPending}"
+                        />
+                    </div>
+                    <div class="col-md-6 mt-sm">
+                        <input
+                            type="text"
+                            bind:value="{formData['email']}"
+                            placeholder="E-Mail Adresse"
+                            readonly="{requestPending}"
+                        />
+                    </div>
+                </div>
+                <div class="row nospace">
+                    <div class="col-md-12 mt-sm">
+                        <input
+                            type="text"
+                            bind:value="{formData['subject']}"
+                            placeholder="Betreff"
+                            readonly="{requestPending}"
+                        />
+                    </div>
+                </div>
+                <div class="row nospace">
+                    <div class="col-md-12 mt-sm">
+                        <textarea bind:value="{formData['message']}" readonly="{requestPending}"></textarea>
+                    </div>
+                </div>
+                <div class="row nospace">
+                    <div class="col-md-12 mt-sm">
+                        <div class="layout layout-gap-md align-items-center">
+                            <div
+                                class="checkbox"
+                                on:click="{() => {
+                                    formData.privacy = !formData.privacy
+                                }}"
+                            >
+                                {#if formData.privacy}
+                                    <div class="icon">
+                                        <Icon path="{mdiCheck}" size="2" />
+                                    </div>
+                                {/if}
+                            </div>
+                            <div on:click="{() => (formData.privacy = !formData.privacy)}">
+                                <a href="/datenschutz"><strong>Datenschutz</strong></a> akzeptieren
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                {#if requestSucessfully}
+                    <div class="mt-sm" transition:fade>
+                        <div>
+                            <strong>Vielen Dank für Ihre Kontaktaufnahme!</strong>
+                        </div>
+                        <p>Wir werden uns zeitnah mit Ihnen in Verbindung setzen!</p>
+                    </div>
+                {/if}
+                <div class="layout justify-content-end mt-sm">
+                    <button type="submit" disabled="{!isValid || requestPending}">Absenden</button>
+                </div>
+            </div>
+        {/if}
+    </form>
+</div>

src/components/widgets/ContactInformation.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    import { generalInfo } from "../../store"
+</script>
+
+<div class="contact-information" id="contact-information">
+    <div class="container">
+        <div class="row">
+            <div class="col-md-12">...</div>
+        </div>
+    </div>
+</div>

src/components/widgets/Footer.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+    import { generalInfo } from "../../store"
+
+    import Navigation from "./Navigation.svelte"
+</script>
+
+<footer>
+    <div class="container">
+        <div class="row">
+            <div class="col-md-12">
+                <Navigation ident="footer" />
+            </div>
+        </div>
+        {#if $generalInfo?.copyrightText}
+            <div class="row">
+                <div class="col-md-12">
+                    <div class="copyright">
+                        {$generalInfo?.copyrightText}
+                    </div>
+                </div>
+            </div>
+        {/if}
+    </div>
+</footer>

src/components/widgets/Galleries.svelte

@@ -64,13 +64,9 @@
     {#each galleries || [] as gallery}
         <div class="gallery gallery-{gallery.variant}">
             {#each gallery.items || [] as image, index}
-                <div
-                    class="gallery-item"
-                    on:click="{() => showDetails(gallery, image)}"
-                >
+                <div class="gallery-item" on:click="{() => showDetails(gallery, image)}">
                     <img
-                        src="{apiBaseURL}galleries/{gallery.id}/{image.file
-                            .src}?filter=s"
+                        src="{apiBaseURL}galleries/{gallery.id}/{image.file.src}?filter=s"
                         alt="{image.alt ? image.alt : image.title}"
                     />
                     {#if gallery.variant === "simple-with-title"}
@@ -87,11 +83,8 @@
         <Modal show="{selectedGallery && selectedImage}">
             <div transition:fade class="gallery-image-details">
                 <img
-                    src="{apiBaseURL}galleries/{selectedGallery.id}/{selectedImage
-                        .file.src}?filter=l"
-                    alt="{selectedImage.alt
-                        ? selectedImage.alt
-                        : selectedImage.title}"
+                    src="{apiBaseURL}galleries/{selectedGallery.id}/{selectedImage.file.src}?filter=l"
+                    alt="{selectedImage.alt ? selectedImage.alt : selectedImage.title}"
                     on:click="{closeDetails}"
                 />
                 <div class="gallery-info">

src/components/widgets/GoogleMaps.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+    import { generalInfo, ccTags } from "../../store"
+
+    $: iframeTitle =
+        $generalInfo?.person?.salutation +
+        " " +
+        $generalInfo?.person?.firstname +
+        " " +
+        $generalInfo?.person?.lastname +
+        " - " +
+        $generalInfo?.person?.additional
+</script>
+
+{#if $ccTags?.includes("googleMaps")}
+    <iframe
+        id="googleMaps"
+        title="{iframeTitle}"
+        src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1342.4197187151062!2d10.4164909278422!3d50.56856037791808!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x2a509772539d6c1b!2sDr.%20med.%20Christine%20Wedekind!5e0!3m2!1sde!2sde!4v1652861335963!5m2!1sde!2sde"
+        allowfullscreen
+        loading="lazy"
+        referrerpolicy="no-referrer-when-downgrade"></iframe>
+{/if}

src/components/widgets/Header.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+    import { link } from "svelte-routing"
+
+    import { generalInfo } from "../../store"
+
+    import Navigation from "./Navigation.svelte"
+    import Image from "./Image.svelte"
+</script>
+
+<header>
+    <div class="container">
+        <div class="row">
+            <div class="col-sm-12">
+                <div class="header-content">
+                    <a href="/" use:link>
+                        <Image
+                            file="{$generalInfo?.media?.brand}"
+                            alt="{$generalInfo?.meta?.metaTitle}"
+                            cssClass="brand"
+                        />
+                    </a>
+
+                    <div class="header-content-right">
+                        <Navigation />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</header>

src/components/widgets/Image.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+    export let file: File = null
+    export let alt: string = ""
+    export let cssClass: string = ""
+</script>
+
+{#if file}
+    <img src="{file.src}" alt="{alt ? alt + ' - ' : ''}{file.path}" class="{cssClass}" />
+{/if}

src/components/widgets/Navigation.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+    import * as animateScroll from "svelte-scrollto"
+    import Icon from "mdi-svelte"
+    import { mdiMenu } from "@mdi/js"
+    // import { generalInfo } from "../../store"
+
+    import { links } from "svelte-routing"
+    import { navigations } from "../../store"
+
+    export let ident = "main"
+
+    let navigation: Navigation
+    let showMobileNav: boolean = false
+
+    $: {
+        $navigations?.map((nav) => {
+            if (nav.ident === ident) {
+                navigation = nav
+            }
+        })
+    }
+</script>
+
+{#if navigation}
+    <nav class="{ident}" use:links>
+        {#each navigation?.items || [] as item}
+            {#if item.settings.url.url}
+                <a
+                    href="{item.settings.url.url}"
+                    target="{item.settings.url.target}"
+                    on:click="{() => {
+                        animateScroll.scrollTo({ element: item.settings.url.url, offset: -200 })
+                        showMobileNav = false
+                    }}"
+                >
+                    {item.settings.title}
+                </a>
+            {:else}
+                <a href="{item.settings.page}">
+                    {item.settings.title}
+                </a>
+            {/if}
+        {/each}
+    </nav>
+
+    {#if ident === "main"}
+        <div class="nav-mobile-toggle" on:click="{() => (showMobileNav = !showMobileNav)}">
+            <Icon path="{mdiMenu}" size="2" />
+        </div>
+
+        <nav class="{ident}-mobile" class:show="{showMobileNav}" use:links>
+            <!-- <img src="img/body-image-left.svg" alt="" class="bg-image" /> -->
+
+            {#each navigation?.items || [] as item}
+                {#if item.settings.url.url}
+                    <div class="nav-item">
+                        <a
+                            href="{item.settings.url.url}"
+                            target="{item.settings.url.target}"
+                            on:click="{() => {
+                                animateScroll.scrollTo({ element: item.settings.url.url, offset: -200 })
+                                showMobileNav = false
+                            }}"
+                        >
+                            {item.settings.title}
+                        </a>
+                    </div>
+                {:else}
+                    <div class="nav-item">
+                        <a href="{item.settings.page}" on:click="{() => (showMobileNav = false)}">
+                            {item.settings.title}
+                        </a>
+                    </div>
+                {/if}
+            {/each}
+        </nav>
+    {/if}
+{/if}

src/components/widgets/News.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+    import { news } from "../../store"
+
+    const getNewsDate = (news) => {
+        const from = news?.from ? new Date(news?.from) : null
+        const until = news?.until ? new Date(news?.until) : null
+        const options = { year: "numeric", month: "2-digit", day: "2-digit" }
+        let d = ""
+        if (from) {
+            // @ts-ignore
+            d += from.toLocaleDateString("de-DE", options)
+        }
+        if (until) {
+            // @ts-ignore
+            d += " bis " + until.toLocaleDateString("de-DE", options)
+        }
+
+        if (news.title) {
+            d += " - "
+        }
+        return d
+    }
+</script>
+
+{#if $news?.length}
+    <section class="news" id="news">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-12">
+                    <h2>Neuigkeiten</h2>
+                </div>
+            </div>
+            <div class="row">
+                {#each $news as n}
+                    {#if n.title || n.from || n.until}
+                        <div class="col-md-6">
+                            <article>
+                                <div class="title">
+                                    {getNewsDate(n)}
+                                    {#if n.title}
+                                        {@html n.title}
+                                    {/if}
+                                </div>
+                                {#if n.content}
+                                    <div class="content">
+                                        {@html n.content}
+                                    </div>
+                                {/if}
+                            </article>
+                        </div>
+                    {/if}
+                {/each}
+            </div>
+        </div>
+    </section>
+{/if}

src/components/widgets/PromotionImage.svelte

@@ -0,0 +1,74 @@
+<svg
+    class="promotion-image-wave-top"
+    width="1920"
+    height="70"
+    viewBox="0 0 1920 70"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+>
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="m1920 70-80-12c-80-12-240-36-400-42s-320 6-480 18-320 24-480 18S160 22 80 10L0-2v-108h1920V70z"
+        fill="#fff"></path>
+</svg>
+
+<!-- <img src="img/promotion/promotion-image.png" alt="" class="promotion-image" /> -->
+
+<svg class="promotion-image-wave-bottom" viewBox="0 0 1920 137" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M0 30.708 80 24.7c80-6.008 240-18.024 400-6.008 160 12.016 320 48.065 480 42.057 160-6.009 320-54.073 480-60.082 160-6.008 320 30.041 400 48.065l80 18.025V137H0V30.708z"
+        fill="url(#plkj8d2oga)"></path>
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M0 30.708 80 24.7c80-6.008 240-18.024 400-6.008 160 12.016 320 48.065 480 42.057 160-6.009 320-54.073 480-60.082 160-6.008 320 30.041 400 48.065l80 18.025V137H0V30.708z"
+        fill="url(#iwnto70uxb)"></path>
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M0 30.708 80 24.7c80-6.008 240-18.024 400-6.008 160 12.016 320 48.065 480 42.057 160-6.009 320-54.073 480-60.082 160-6.008 320 30.041 400 48.065l80 18.025V137H0V30.708z"
+        fill="url(#aco1fmuv9c)"></path>
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M0 121.708 80 108.7c80-6.008 240-48.024 400-36.008 160 12.016 320 48.065 480 42.057 160-6.009 320-94.073 480-100.081 160-6.009 320 30.04 400 48.064l80 18.025V141H0v-19.292z"
+        fill="#fff"></path>
+    <defs>
+        <radialGradient
+            id="plkj8d2oga"
+            cx="0"
+            cy="0"
+            r="1"
+            gradientUnits="userSpaceOnUse"
+            gradientTransform="matrix(960 0 0 41.5089 960 95.491)"
+        >
+            <stop stop-color="#FFFEFF"></stop>
+            <stop offset="1" stop-color="#D7FFFE"></stop>
+        </radialGradient>
+        <radialGradient
+            id="iwnto70uxb"
+            cx="0"
+            cy="0"
+            r="1"
+            gradientUnits="userSpaceOnUse"
+            gradientTransform="matrix(-652.99956 -34.96514 36.02623 -672.81617 1033.5 102.034)"
+        >
+            <stop stop-color="#BCFFFD"></stop>
+            <stop offset="1" stop-color="#fff" stop-opacity="0"></stop>
+        </radialGradient>
+        <radialGradient
+            id="aco1fmuv9c"
+            cx="0"
+            cy="0"
+            r="1"
+            gradientUnits="userSpaceOnUse"
+            gradientTransform="rotate(8.473 63.69 3351.307) scale(825.005 723.955)"
+        >
+            <stop stop-color="#fff"></stop>
+            <stop offset="1" stop-color="#fff" stop-opacity="0"></stop>
+        </radialGradient>
+    </defs>
+</svg>

src/components/widgets/ScrollTo.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+    import { createEventDispatcher } from "svelte"
+
+    const dispatch = createEventDispatcher()
+</script>
+
+<div class="scroll-to-top">
+    <div class="circle-email">
+        <a
+            href="/#"
+            on:click="{() => {
+                dispatch('scrollTo', {
+                    element: 'contact',
+                })
+            }}"
+        >
+            <!-- <img src="img/icon/contact.svg" alt="" /> -->
+        </a>
+    </div>
+    <div class="circle-contact">
+        <a
+            href="/#"
+            on:click="{() => {
+                dispatch('scrollTo', {
+                    element: 'recipe',
+                })
+            }}"
+        >
+            <!-- <img src="img/icon/recipe.svg" alt="" /> -->
+        </a>
+    </div>
+    <div class="circle-top">
+        <a href="/#">
+            <!-- <img src="img/icon/chevron-up.svg" alt="" /> -->
+        </a>
+    </div>
+</div>