109 lines
3.8 KiB
Svelte
109 lines
3.8 KiB
Svelte
<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>
|