Added hover effect to social links in footer

jstamant · Jan 24, 2024 · 94451f0 · 94451f0
1 parent e4a31a2
commit 94451f0
Showing 1 changed file with 4 additions and 6 deletions.
diff --git a/components/footer.js b/components/footer.js
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faGithub, faInstagram, faLinkedin } from '@fortawesome/free-brands-svg-icons'
 import { faEnvelope } from '@fortawesome/free-regular-svg-icons'
@@ -11,10 +9,10 @@ const Footer = () => {
         <div className="my-8">
           <h1 className="uppercase font-bold mb-4 text-xl">Socials</h1>
           <nav className="text-2xl">
-            <a className="px-1" href="https://github.com/jstamant"><FontAwesomeIcon icon={faGithub} /></a>
-            <a className="px-1" href="https://www.linkedin.com/in/justinstamant/"><FontAwesomeIcon icon={faInstagram} /></a>
-            <a className="px-1" href="https://www.instagram.com/jstamant_/"><FontAwesomeIcon icon={faLinkedin} /></a>
-            <a className="px-1" href="mailto:[email protected]"><FontAwesomeIcon icon={faEnvelope} /></a>
+            <a className="px-1 duration-300 hover:text-neutral-400" href="https://github.com/jstamant"><FontAwesomeIcon icon={faGithub} /></a>
+            <a className="px-1 duration-300 hover:text-neutral-400" href="https://www.linkedin.com/in/justinstamant/"><FontAwesomeIcon icon={faInstagram} /></a>
+            <a className="px-1 duration-300 hover:text-neutral-400" href="https://www.instagram.com/jstamant_/"><FontAwesomeIcon icon={faLinkedin} /></a>
+            <a className="px-1 duration-300 hover:text-neutral-400" href="mailto:[email protected]"><FontAwesomeIcon icon={faEnvelope} /></a>
           </nav>
         </div>
         <div className="my-8">