itsfinniii/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add footer to website

Browse Source
This commit is contained in:
itsfinniii
2026-04-19 18:03:32 +02:00
parent 2374a6bd22
commit 506a5ed14e
8 changed files with 298 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
astro/src/components/footer/Footer.astro Normal file
View File

@@ -0,0 +1,70 @@
---
import { getFooter } from "@/content/footer/footer";
import { Image } from "astro:assets";
const footer = await getFooter();
---
<footer class="w-full mt-4">
<div class="flex flex-col pt-12 pb-8 px-12 lg:container mx-auto">
<div class="flex md:flex-row flex-col justify-center pt-12 pb-8 px-12 lg:container mx-auto md:gap-y-8 gap-y-12 gap-x-24">
{ (footer.title !== null || footer.logo !== null) && (
<div class="flex flex-col gap-3">
{ footer.title !== null && <h2 class="text-5xl font-bold">{footer.title}</h2>}
{ footer.logo !== null && (
<Image
src={footer.logo.url}
width={footer.logo.width}
height={footer.logo.height}
alt={footer.title ?? ""}
class="w-50 h-auto"
/>
) }
</div>
) }
{ footer.columns.map((column) => (
<div class="flex flex-col gap-3">
<h2 class="text-4xl font-bold">{column.title}</h2>
<div class="flex flex-col gap-3">
{column.links.map((link) => (
<a class="text-lg text-neutral-800" href={link.url}>{link.text}</a>
))}
</div>
</div>
)) }
</div>
{ footer.socials !== null && (
<div class="flex flex-row gap-3 justify-center">
{ footer.socials.map((social) => (
<a href={social.url} target="_blank" class="bg-neutral-300 hover:bg-neutral-400 duration-300 rounded-full">
<div class="p-2">
<Image
src={social.icon.url}
width={32}
height={32}
alt={social.name}
/>
</div>
</a>
)) }
</div>
) }
</div>
{ (footer.copyright !== null || footer.secondaryLinks !== null) && (
<div class="border-t border-t-neutral-200 w-full bg-neutral-50">
<div class="flex md:flex-row flex-col justify-between py-8 px-12 lg:container mx-auto gap-y-8 gap-x-24">
{ footer.copyright !== null && (<div class="text-neutral-600">{footer.copyright}</div>) }
{ footer.secondaryLinks !== null && (
<div class="flex flex-row gap-1.5">
{ footer.secondaryLinks.map((link) => (
<a class="text-neutral-600 w-fit" href={link.url}>{link.text}</a>
)) }
</div>
) }
</div>
</div>
) }
</footer>