stlye: Add hover effect to navigation links and buttons

faridvatani · Aug 1, 2024 · 246e139 · 246e139
1 parent 7c06be4
commit 246e139
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 11 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -12,7 +12,7 @@
   }
 
   .btn-primary {
-    @apply bg-black text-white;
+    @apply bg-black text-white hover:bg-black/80;
   }
 
   .btn-text {

diff --git a/src/sections/Footer.tsx b/src/sections/Footer.tsx
@@ -10,6 +10,7 @@ import {
 import Image from "next/image";
 import { motion } from "framer-motion";
 import { footerData } from "@/src/constants";
+import Link from "next/link";
 
 export const Footer = () => {
   return (
@@ -43,17 +44,17 @@ export const Footer = () => {
 
         <nav className="flex flex-col md:flex-row md:justify-center gap-6 mt-6">
           {footerData.footerLinks.map((link, index) => (
-            <a key={index} href={link.href}>
+            <Link key={index} href={link.href} className="hover:text-white">
               {link.name}
-            </a>
+            </Link>
           ))}
         </nav>
         <div className="flex justify-center gap-6 mt-6">
-          <SocialX className="cursor-pointer" />
-          <SocialInstagram className="cursor-pointer" />
-          <SocialLinkedIn className="cursor-pointer" />
-          <SocialPinterest className="cursor-pointer" />
-          <SocialYoutube className="cursor-pointer" />
+          <SocialX className="hover:text-white cursor-pointer" />
+          <SocialInstagram className="hover:text-white cursor-pointer" />
+          <SocialLinkedIn className="hover:text-white cursor-pointer" />
+          <SocialPinterest className="hover:text-white cursor-pointer" />
+          <SocialYoutube className="hover:text-white cursor-pointer" />
         </div>
         <p className="mt-6">&copy;{footerData.copyRight}</p>
       </div>

diff --git a/src/sections/Header.tsx b/src/sections/Header.tsx
@@ -15,11 +15,11 @@ export const Header = () => {
             <Menu className="w-5 h-5 md:hidden" />
             <nav className="hidden md:flex gap-6 text-black/60 items-center">
               {headerData.headerLinks.map((link) => (
-                <Link href={link.href} key={link.name}>
+                <Link href={link.href} key={link.name} className="hover:text-black">
                   {link.name}
                 </Link>
               ))}
-              <button className="inline-flex align-baseline justify-center font-medium tracking-tight bg-black text-white px-4 py-2 rounded-lg">
+              <button type="button" className="btn btn-primary">
                 {headerData.cta}
               </button>
             </nav>

diff --git a/src/sections/Pricing.tsx b/src/sections/Pricing.tsx
@@ -68,7 +68,7 @@ export const Pricing = () => {
                 <button
                   className={twMerge(
                     "btn btn-primary w-full mt-[30px]",
-                    inverse === true && "bg-white text-black",
+                    inverse === true && "bg-white text-black hover:bg-white/80",
                   )}
                 >
                   {buttonText}