Added Hover Animations

Author: LuaanNguyen

src/components/Button/RiArrowButton.tsx

@@ -0,0 +1,16 @@
+import { RiArrowRightSLine } from "react-icons/ri";
+
+type RoundedButtonTypes = {
+  name: string;
+};
+
+function RiArrowButton({ name }: RoundedButtonTypes) {
+  return (
+    <button type="button" className="right-arrow-btn">
+      <span className="btn-text">{name}</span>
+      <RiArrowRightSLine className="text-3xl text-white" />
+    </button>
+  );
+}
+
+export default RiArrowButton;

src/components/Button/RoundedButton.tsx

@@ -1,4 +1,4 @@
-import RoundedButton from "../Button/RoundedButton";
+import RoundedButton from "../Button/RiArrowButton";
 
 const navLinks = [
   {

src/components/Navigation/DesktopNav.tsx

@@ -9,18 +9,33 @@ import { IoLogoFreebsdDevil } from "react-icons/io";
 //Edit any changes to the SoDA URLs here
 //Icons can be found at: https://react-icons.github.io/react-icons/
 const socialMediaLinks = [
-  { href: "https://thesoda.io/", icon: <CgWebsite /> },
-  { href: "https://www.linkedin.com/company/thesoda/", icon: <FaLinkedin /> },
-  { href: "https://www.instagram.com/soda.asu/", icon: <RiInstagramFill /> },
+  {
+    href: "https://thesoda.io/",
+    icon: <CgWebsite className="hover:text-soda-red" />,
+  },
+  {
+    href: "https://www.linkedin.com/company/thesoda/",
+    icon: <FaLinkedin className="hover:text-soda-red" />,
+  },
+  {
+    href: "https://www.instagram.com/soda.asu/",
+    icon: <RiInstagramFill className="hover:text-soda-red" />,
+  },
   {
     href: "https://discord.gg/the-software-developers-association-762811961238618122",
     icon: <FaDiscord />,
   },
-  { href: "https://www.facebook.com/SoDAASU/", icon: <FaFacebookSquare /> },
-  { href: "https://github.com/asusoda", icon: <FaGithub /> },
+  {
+    href: "https://www.facebook.com/SoDAASU/",
+    icon: <FaFacebookSquare className="hover:text-soda-red" />,
+  },
+  {
+    href: "https://github.com/asusoda",
+    icon: <FaGithub className="hover:text-soda-red" />,
+  },
   {
     href: "https://asu.campuslabs.com/engage/organization/soda",
-    icon: <IoLogoFreebsdDevil />,
+    icon: <IoLogoFreebsdDevil className="hover:text-soda-red" />,
   },
 ];
 

src/components/SocialMediaLinks.tsx

@@ -63,7 +63,15 @@ function SponsorsMarquee() {
               key={index}
               src={logoMap[element.name as SponsorLogo]} // Casting element.name to SponsorLogo
               alt={element.name}
-              className="w-[12vw] object-contain"
+              className="w-[10vw] object-contain"
+            />
+          ))}
+          {sponsors.map((element, index) => (
+            <img
+              key={index}
+              src={logoMap[element.name as SponsorLogo]} // Casting element.name to SponsorLogo
+              alt={element.name}
+              className="w-[10vw] object-contain"
             />
           ))}
         </div>

src/components/Sponsors/Sponsors.tsx

@@ -1,7 +1,7 @@
 import AnimatedNumber from "../logic/AnimatedNumber";
 import { Statistic } from "semantic-ui-react";
 import teamsData from "../../assets/teams.json";
-import RoundedButton from "../Button/RoundedButton";
+import RoundedButton from "../Button/RiArrowButton";
 
 const dollarFormatter = new Intl.NumberFormat("US", {
   style: "currency",

src/components/Stats/Statistics.tsx

@@ -271,6 +271,10 @@ footer {
   @apply px-3 py-2 bg-soda-red rounded-full;
 }
 
+.right-arrow-btn {
+  @apply flex px-3 py-3  bg-soda-red rounded-full items-center hover:bg-[#c12654] justify-center;
+}
+
 .regular-btn {
   @apply px-3 py-1 bg-soda-red rounded-lg;
 }