From 7b5a8bc705851cb30b8eb231969a22fe7c77ccfd Mon Sep 17 00:00:00 2001
From: itsfinniii <102350242+itsfinniii@users.noreply.github.com>
Date: Fri, 24 Apr 2026 18:30:23 +0200
Subject: [PATCH] Fix the colors of the Footer

---
 astro/src/components/footer/Footer.astro | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/astro/src/components/footer/Footer.astro b/astro/src/components/footer/Footer.astro
index 730e89f..a866638 100644
--- a/astro/src/components/footer/Footer.astro
+++ b/astro/src/components/footer/Footer.astro
@@ -24,11 +24,13 @@ const footer = await getFooter();
             ) }
 
             { footer.columns.map((column) => (
-                <div class="flex flex-col gap-3">
+                <div class="flex flex-col gap-3 w-fit">
                     <h2 class="text-4xl font-bold">{column.title}</h2>
-                    <div class="flex flex-col gap-3">
+                    <div class="flex flex-col gap-3 w-fit">
                         {column.links.map((link) => (
-                            <a class="text-lg text-neutral-800" href={link.url}>{link.text}</a>
+                            <a class="text-lg text-neutral-800 hover:text-(--ptc) duration-300" href={link.url}>
+                                <span class="w-fit">{link.text}</span>
+                            </a>
                         ))}
                     </div>
                 </div>
@@ -38,7 +40,7 @@ const footer = await getFooter();
         { 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">
+                    <a href={social.url} target="_blank" class="bg-neutral-300 hover:bg-neutral-200 duration-300 shadow-sm rounded-full">
                         <div class="p-2">
                             <Image
                                 src={social.icon.url}
@@ -60,7 +62,7 @@ const footer = await getFooter();
                 { 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>
+                            <a class="text-neutral-600 hover:text-(--ptc) duration-300 w-fit" href={link.url}>{link.text}</a>
                         )) }
                     </div>
                 ) }