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

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
+            },
+        })
+    }}"
+/>