first commit

resources/js/components/my/Footer.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+    import hubsch from '@/lib/assets/kings/square/hubsch.jpg';
+    import { Separator } from '@/components/ui/separator';
+    import WebWerkstatt from '@/components/my/WebWerkstatt.svelte';
+</script>
+
+<footer id="footer" class="container py-24 pb-16 sm:py-32 sm:pb-24">
+    <div class="p-10 bg-muted/50 dark:bg-card border rounded-2xl">
+        <div
+            class="grid grid-cols-2 md:grid-cols-4 xl:grid-cols-6 gap-x-12 gap-y-8"
+        >
+            <div class="col-span-full xl:col-span-2">
+                <a href="/" class="flex font-bold items-center gap-2">
+                    <enhanced:img
+                        src={hubsch}
+                        alt="Kaiser Hubsch"
+                        class="max-w-8 aspect-square rounded-full border-3 dark:border border-lime-600 drop-shadow-2xl"
+                    />
+                    <h3 class="text-2xl">FC Dotterbühel</h3>
+                </a>
+            </div>
+
+            <div class="flex flex-col gap-2">
+                <h3 class="font-bold text-lg">Kontakt</h3>
+                <div>
+                    <a
+                        href="https://github.com"
+                        class="opacity-60 hover:opacity-100">Github</a
+                    >
+                </div>
+                <div>
+                    <a
+                        href="https://twitter.com"
+                        class="opacity-60 hover:opacity-100">Twitter</a
+                    >
+                </div>
+                <div>
+                    <a
+                        href="https://instagram.com"
+                        class="opacity-60 hover:opacity-100">Instagram</a
+                    >
+                </div>
+            </div>
+
+            <div class="flex flex-col gap-2">
+                <h3 class="font-bold text-lg">Platformen</h3>
+                <div>
+                    <span class="opacity-60 hover:opacity-100 cursor-default"
+                        >iOS</span
+                    >
+                </div>
+                <div>
+                    <span class="opacity-60 hover:opacity-100 cursor-default"
+                        >Android</span
+                    >
+                </div>
+                <div>
+                    <span class="opacity-60 hover:opacity-100 cursor-default"
+                        >Web</span
+                    >
+                </div>
+            </div>
+
+            <div class="flex flex-col gap-2">
+                <h3 class="font-bold text-lg">Hilfe</h3>
+                <div>
+                    <a href="#contact" class="opacity-60 hover:opacity-100"
+                        >Contact Us</a
+                    >
+                </div>
+                <div>
+                    <a href="#faq" class="opacity-60 hover:opacity-100">FAQ</a>
+                </div>
+                <div>
+                    <a href="#contact" class="opacity-60 hover:opacity-100"
+                        >Feedback</a
+                    >
+                </div>
+            </div>
+
+            <div class="flex flex-col gap-2">
+                <h3 class="font-bold text-lg">Soziale Medien</h3>
+                <div>
+                    <a
+                        href="https://twitch.tv"
+                        class="opacity-60 hover:opacity-100">Twitch</a
+                    >
+                </div>
+                <div>
+                    <a
+                        href="https://discord.com"
+                        class="opacity-60 hover:opacity-100">Discord</a
+                    >
+                </div>
+                <div>
+                    <a
+                        href="https://dribbble.com"
+                        class="opacity-60 hover:opacity-100">Dribbble</a
+                    >
+                </div>
+            </div>
+        </div>
+
+        <Separator class="my-6" />
+
+        <WebWerkstatt />
+    </div>
+</footer>