refactor animation of sponsor modal

Author: derekxu04

frontend/src/components/Resources/index.tsx

@@ -1,10 +1,8 @@
 import Image from 'next/image';
-import { resourceCards, stage1, stage2, stage3 } from '../../../public/data/resourceCards';
+import { resourceCards, stage1, stage2, stage3 } from '@/../public/data/resourceCards';
 
 const boxStyling =
   'border border-[#595F6D] rounded-lg hover:border-[#788093] hover:bg-[#070034] hover:bg-opacity-75 transition-all duration-300';
-const socialsBoxStyling =
-  'xl:col-span-1 col-span-3 flex justify-center pt-2 pb-2 border border-[#595F6D] hover:border-[#788093] rounded-lg hover:bg-[#070034] hover:bg-opacity-75 transition-all duration-300';
 
 const Resources = () => {
   return (

frontend/src/components/Sponsors/SponsorLinks.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { diamondLinks, goldLinks, silverLinks, sponsorInfo } from '../../../public/data/sponsorInfos';
+import { diamondLinks, goldLinks, silverLinks, sponsorInfo } from '@/../public/data/sponsorInfos';
 import SponsorModal from './SponsorModal';
 
 const logostyle = 'grow-on-hover cursor-pointer transform transition-transform duration-300 hover:scale-105';

frontend/src/components/Sponsors/SponsorModal.tsx

@@ -1,5 +1,4 @@
-import { sponsorInfo } from '../../../public/data/sponsorInfos';
-import {motion} from 'framer-motion'
+import { sponsorInfo } from '@/../public/data/sponsorInfos';
 
 export default function SponsorModal(props: { sponsorInfo: sponsorInfo | null; setFalse: () => void }) {
   if (props.sponsorInfo === null) {
@@ -18,17 +17,17 @@ export default function SponsorModal(props: { sponsorInfo: sponsorInfo | null; s
     >
 
       <div className="bg-[#3977f8] relative w-[800px] h-[550px] mb-10 mx-10 rounded-xl flex flex-col items-center justify-center">
-        <motion.a 
-          whileHover={{
-            scale: 1.2,
-            transition: { duration: 0.2 },
-          }} 
-          className="w-4/5 m-10 flex flex-col items-center justify-center" 
+        <a
+          className="w-4/5 m-10 flex flex-col items-center justify-center transform transition-transform duration-300 hover:scale-105"
           href={props.sponsorInfo.href}
           target="_blank"
         >
-          <img className='w-4/5 max-w-[300px] max-h-[200px]' src={`./${props.sponsorInfo.svg}`} alt={props.sponsorInfo.alt} />
-        </motion.a >
+          <img
+            className="w-4/5 max-w-[300px] max-h-[200px]"
+            src={`./${props.sponsorInfo.svg}`}
+            alt={props.sponsorInfo.alt}
+          />
+        </a>
         <h3 className="mx-10 py-10">{props.sponsorInfo.description}</h3>
         <button
           onClick={props.setFalse}