Add Footer component to layout and remove StyleGuidePage

components/layout/Footer.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import Link from "next/link";
+
+export default function Footer() {
+  return (
+    <footer
+      className="w-full py-6 px-4 sm:px-8 border-t"
+      style={{
+        backgroundColor: "var(--background)",
+        borderColor: "color-mix(in srgb, var(--gray-800) 30%, transparent)",
+      }}
+    >
+      <div className="max-w-7xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-4">
+        <div
+          className="text-xs text-center sm:text-left"
+          style={{ color: "var(--muted-foreground)" }}
+        >
+          © {new Date().getFullYear()} Game of Tech - Peaksys
+        </div>
+        <div className="flex items-center gap-6">
+          <Link
+            href="/style-guide"
+            className="text-xs uppercase tracking-widest transition"
+            style={{ color: "var(--muted-foreground)" }}
+            onMouseEnter={(e) =>
+              (e.currentTarget.style.color = "var(--accent-color)")
+            }
+            onMouseLeave={(e) =>
+              (e.currentTarget.style.color = "var(--muted-foreground)")
+            }
+          >
+            Style Guide
+          </Link>
+        </div>
+      </div>
+    </footer>
+  );
+}
+

components/ui/StarRating.tsx

@@ -42,22 +42,26 @@ export default function StarRating({
             type="button"
             onClick={() => handleClick(star)}
             disabled={disabled}
-            onMouseEnter={() => !disabled && setHoverValue(star)}
-            onMouseLeave={() => !disabled && setHoverValue(0)}
-            className={`transition-transform hover:scale-110 disabled:hover:scale-100 disabled:cursor-not-allowed ${sizeClasses[size]}`}
-            style={{
-              color: star <= displayValue ? "var(--accent-color)" : "var(--gray-500)",
-            }}
             onMouseEnter={(e) => {
-              if (!disabled && star > displayValue) {
-                e.currentTarget.style.color = "var(--gray-400)";
+              if (!disabled) {
+                setHoverValue(star);
+                if (star > displayValue) {
+                  e.currentTarget.style.color = "var(--gray-400)";
+                }
               }
             }}
             onMouseLeave={(e) => {
-              if (!disabled && star > displayValue) {
-                e.currentTarget.style.color = "var(--gray-500)";
+              if (!disabled) {
+                setHoverValue(0);
+                if (star > displayValue) {
+                  e.currentTarget.style.color = "var(--gray-500)";
+                }
               }
             }}
+            className={`transition-transform hover:scale-110 disabled:hover:scale-100 disabled:cursor-not-allowed ${sizeClasses[size]}`}
+            style={{
+              color: star <= displayValue ? "var(--accent-color)" : "var(--gray-500)",
+            }}
             aria-label={`Noter ${star} étoile${star > 1 ? "s" : ""}`}
           >
             ★