From 7e510d7a58f00fda636a3bd02684705b4e0e4d06 Mon Sep 17 00:00:00 2001
From: Amandeep Chauhan <amandeepchauhan@Amandeeps-MacBook-Air.local>
Date: Sun, 1 Oct 2023 16:22:44 +0530
Subject: [PATCH] fix "Footer" links properly not visible on hover

---
 components/layout/site-footer.tsx | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/components/layout/site-footer.tsx b/components/layout/site-footer.tsx
index e663d31..3ad95d0 100644
--- a/components/layout/site-footer.tsx
+++ b/components/layout/site-footer.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { cn } from "@/lib/utils";
 import { Button } from "../ui/button";
 
 type Props = {};
@@ -8,12 +9,19 @@ export default function SiteFooter({}: Props) {
     <footer className="bg-gray-100 dark:bg-black py-10">
       <div className="container mx-auto px-4">
         <div className="flex items-center justify-center dark:text-white text-gray-700">
-          <a href="/" className=" hover:text-gray-900 mr-4">
+          <a
+            href="/"
+            className={cn(
+              "mr-4 font-normal transition-colors hover:text-foreground/70 sm:text-md text-foreground/100"
+            )}
+          >
             Home
           </a>
           <a
             href="/batch/learn/html/basic"
-            className="hover:text-gray-900 mr-4"
+            className={cn(
+              "mr-4 font-normal transition-colors hover:text-foreground/70 sm:text-md text-foreground/100"
+            )}
           >
             Learn
           </a>
@@ -22,11 +30,18 @@ export default function SiteFooter({}: Props) {
           </a>
           <a
             href="/batch/build/react/fundamentals"
-            className="hover:text-gray-900 mr-4 ml-4"
+            className={cn(
+              "mr-4 ml-4 font-normal transition-colors hover:text-foreground/70 sm:text-md text-foreground/100"
+            )}
           >
             Build
           </a>
-          <a href="/batch/hire/hire" className="hover:text-gray-900 mr-4">
+          <a
+            href="/batch/hire/hire"
+            className={cn(
+              "font-normal transition-colors hover:text-foreground/70 sm:text-md text-foreground/100"
+            )}
+          >
             Hire
           </a>
         </div>