fix "Footer" links properly not visible on hover

FrontendFreaks · Oct 1, 2023 · 7e510d7 · 7e510d7
1 parent b0a997b
commit 7e510d7
Showing 1 changed file with 19 additions and 4 deletions.
diff --git 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>