add icons to footer with colour transition

package.json

@@ -26,10 +26,10 @@
     "@tanstack/router-plugin": "^1.132.0",
     "@unpic/react": "^1.0.2",
     "lichess-pgn-viewer": "^2.4.5",
-    "lucide-react": "^1.3.0",
     "nitro": "npm:nitro-nightly@latest",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "react-icons": "^5.6.0",
     "tailwindcss": "^4.1.18",
     "zod": "^4.4.3"
   },

pnpm-lock.yaml

@@ -41,9 +41,6 @@ importers:
       lichess-pgn-viewer:
         specifier: ^2.4.5
         version: 2.4.5
-      lucide-react:
-        specifier: ^1.3.0
-        version: 1.3.0(react@19.2.6)
       nitro:
         specifier: npm:nitro-nightly@latest
         version: nitro-nightly@3.0.1-20260529-064703-255b254f(chokidar@5.0.0)(jiti@2.7.0)(lru-cache@11.5.1)(vite@8.0.14(@types/node@22.19.19)(jiti@2.7.0))
@@ -53,6 +50,9 @@ importers:
       react-dom:
         specifier: ^19.2.0
         version: 19.2.6(react@19.2.6)
+      react-icons:
+        specifier: ^5.6.0
+        version: 5.6.0(react@19.2.6)
       tailwindcss:
         specifier: ^4.1.18
         version: 4.3.0
@@ -1714,11 +1714,6 @@ packages:
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
-  lucide-react@1.3.0:
-    resolution: {integrity: sha512-aKUU4jKpXe26Y3xmF3DGg+NXHteRCVT96r/+Jp7wziqvmFr0/x8ReRsES0wHgTvW7OLxiHvFLN+YeyDnK6h0dQ==}
-    peerDependencies:
-      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
-
   lz-string@1.5.0:
     resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
     hasBin: true
@@ -1855,6 +1850,11 @@ packages:
     peerDependencies:
       react: ^19.2.6
 
+  react-icons@5.6.0:
+    resolution: {integrity: sha512-RH93p5ki6LfOiIt0UtDyNg/cee+HLVR6cHHtW3wALfo+eOHTp8RnU2kRkI6E+H19zMIs03DyxUG/GfZMOGvmiA==}
+    peerDependencies:
+      react: '*'
+
   react-is@17.0.2:
     resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
 
@@ -3663,10 +3663,6 @@ snapshots:
     dependencies:
       yallist: 3.1.1
 
-  lucide-react@1.3.0(react@19.2.6):
-    dependencies:
-      react: 19.2.6
-
   lz-string@1.5.0: {}
 
   magic-string@0.30.21:
@@ -3837,6 +3833,10 @@ snapshots:
       react: 19.2.6
       scheduler: 0.27.0
 
+  react-icons@5.6.0(react@19.2.6):
+    dependencies:
+      react: 19.2.6
+
   react-is@17.0.2: {}
 
   react@19.2.6: {}

src/components/Footer.tsx

@@ -1,6 +1,8 @@
 import { Link } from "@tanstack/react-router";
 import { Image } from "@unpic/react";
 
+import { LuGithub, LuMail } from "react-icons/lu";
+
 import CoffeeWidget from "#/components/CoffeeWidget.tsx";
 import footerLogo from "@/assets/images/footerLogo.svg?url";
 
@@ -23,12 +25,22 @@ export default function Footer() {
 					</p>
 				</div>
 				<div className="ml-auto flex gap-2">
-					<Link to="/" target="_blank" rel="noopener noreferrer">
+					<Link
-						Github
+						to="/"
+						target="_blank"
+						rel="noopener noreferrer"
+						className="text-2xl hover:text-(--neutral-content) transition-colors duration-300 ease-in-out"
+					>
+						<LuGithub />
 					</Link>
 
-					<Link to="/" target="_blank" rel="noopener noreferrer">
+					<Link
-						Mail
+						to="/"
+						target="_blank"
+						rel="noopener noreferrer"
+						className="text-2xl hover:text-(--neutral-content) transition-colors duration-300 ease-in-out"
+					>
+						<LuMail />
 					</Link>
 				</div>
 				<CoffeeWidget width={20} height={50} />