Initial commit

frontend/src/lib/components/Footer.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+    import { navigate } from "svelte-routing"
+    import { serviceNavigation, sites } from "../stores"
+</script>
+
+<div class="footer">
+    <div class="infos">
+        <h3>Wasserski Erfurt</h3>
+        <div class="infos-inner">
+            <div class="upper">
+                <p>Inh. Michael Sadlon</p>
+                <p>Zum Nordstrand 4</p>
+                <p>99085 Erfurt</p>
+            </div>
+            <div class="lower">
+                <p>Tel.: 0361 - 796 876 4</p>
+                <p>Fax.: 0361 - 796 876 8</p>
+                <p>Email: info@wasserski-erfurt.de</p>
+            </div>
+        </div>
+        <div class="social">
+            <a href="https://www.instagram.com/wasserski_erfurt/">
+                <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        d="M11.7 3h12.6c4.8 0 8.7 3.9 8.7 8.7v12.6a8.7 8.7 0 0 1-8.7 8.7H11.7C6.9 33 3 29.1 3 24.3V11.7A8.7 8.7 0 0 1 11.7 3zm-.3 3A5.4 5.4 0 0 0 6 11.4v13.2c0 2.985 2.415 5.4 5.4 5.4h13.2a5.4 5.4 0 0 0 5.4-5.4V11.4C30 8.415 27.585 6 24.6 6H11.4zm14.475 2.25a1.875 1.875 0 1 1 0 3.75 1.875 1.875 0 0 1 0-3.75zM18 10.5a7.5 7.5 0 1 1 0 15 7.5 7.5 0 0 1 0-15zm0 3a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9z"
+                        fill="#333333"></path>
+                </svg>
+            </a>
+            <a href="https://www.facebook.com/wasserskierfurt/">
+                <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        d="M18 3.06c-8.25 0-15 6.735-15 15.03 0 7.5 5.49 13.725 12.66 14.85v-10.5h-3.81v-4.35h3.81v-3.315c0-3.765 2.235-5.835 5.67-5.835 1.635 0 3.345.285 3.345.285v3.705h-1.89c-1.86 0-2.445 1.155-2.445 2.34v2.82h4.17l-.675 4.35H20.34v10.5A15 15 0 0 0 33 18.09c0-8.295-6.75-15.03-15-15.03z"
+                        fill="#333333"></path>
+                </svg>
+            </a>
+        </div>
+    </div>
+    <div class="services">
+        {#each $serviceNavigation?.elemente || [] as service, i (i)}
+            <button
+                on:click="{() => {
+                    navigate(`${$sites[service.seite]?.path}`)
+                }}">{service?.name}</button
+            >
+        {/each}
+    </div>
+</div>
+
+<style lang="less">
+    @import "../assets/css/variables.less";
+    .social {
+        margin-top: 20px;
+    }
+    .footer {
+        margin-top: 60px;
+        width: 100vw;
+        font-size: 16px;
+        display: flex;
+        justify-content: space-between;
+        max-width: calc(@body-maxwidth - min(9vw, 200px));
+        background-color: @hover-color;
+        padding: min(4.5vw, 100px) min(4.5vw, 100px) 0px min(4.5vw, 100px);
+    }
+    .infos {
+        display: flex;
+        height: 70%;
+        .infos-inner {
+            gap: 10px;
+            display: flex;
+        }
+    }
+
+    .services {
+        display: flex;
+        flex-direction: column;
+        button {
+            font-size: inherit;
+            padding: 6px 0px;
+            text-align: start;
+        }
+    }
+
+    @media @mobile {
+        .infos {
+            flex-direction: column;
+            justify-content: start;
+
+            @media @mobile {
+                gap: 20px;
+            }
+            @media @tablet {
+                gap: 40px;
+            }
+            height: 350px;
+            .infos-inner {
+                flex-direction: column;
+            }
+        }
+        .footer {
+        }
+    }
+    @media @desktop {
+        .footer {
+            height: 350px;
+            .infos-inner {
+                gap: 5vw;
+                flex-direction: row;
+            }
+        }
+    }
+</style>