💡 (components/Footer.tsx): update Footer component to include 'noope…

…ner noreferrer' and 'aria-label' attributes for accessibility purposes

🌐 (styles/footer.css): refactor CSS to remove unnecessary color inheritance in hover states, improve readability by adding comments, and make the Discord icon visible on hover
✨ (components/Footer.tsx, styles/footer.css): update Footer component and its associated styles to be responsive on mobile devices with a center-justified layout when screen width is less than or equal to 768px

components/Footer.tsx

@@ -12,7 +12,6 @@ import {
   SiX,
 } from "react-icons/si";
 import "styles/footer.css";
-
 const Footer = () => {
   const currentYear = new Date().getFullYear();
   const iconSize = 28;
@@ -42,7 +41,6 @@ const Footer = () => {
       url: "https://play.google.com/store/books/collection/cluster?gsr=SheCARQKEAoMWjZNR0VRQUFRQkFKEAkQBA%3D%3D:S:ANO1ljK1zJ0",
       icon: <SiGoogleplay className="googleplay" size={iconSize} />,
     },
-
     {
       url: "https://instagram.com/ditectrev",
       icon: <SiInstagram className="instagram" size={iconSize} />,
@@ -72,7 +70,14 @@ const Footer = () => {
         className="mx-3 my-3 social-icons-container"
       >
         {socialMediaLinks.map((link, index) => (
-          <a key={index} className="px-2" href={link.url} target="_blank">
+          <a
+            key={index}
+            className="px-2"
+            href={link.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label={`Visit ${link.url}`}
+          >
             {link.icon}
           </a>
         ))}

styles/footer.css

@@ -5,10 +5,11 @@
 
 .social-icons-container a {
   transition: transform 0.5s ease, color 0.5s ease;
+  color: inherit;
 }
 
 .social-icons-container a:hover {
-  color: inherit;
+  transform: scale(1.2);
 }
 
 .social-icons-container a:hover .discord {
@@ -55,11 +56,6 @@
   color: #aaa;
 }
 
-.social-icons-container a:hover {
-  transform: scale(1.2);
-
-}
-
 @media (max-width: 768px) {
   .social-icons-container {
     justify-content: center;