added css transition on hover

Author: QuadAces

frontend/src/components/Sponsors/sponsorModal.tsx

@@ -1,5 +1,5 @@
 import { sponsorInfo } from '../../../public/data/data';
-
+import {motion} from 'framer-motion'
 export default function SponsorModal(props: { sponsorInfo: sponsorInfo | null; setFalse: () => void }) {
   if (props.sponsorInfo === null) {
     return (
@@ -15,10 +15,14 @@ export default function SponsorModal(props: { sponsorInfo: sponsorInfo | null; s
         props.setFalse();
       }}
     >
-      <div className="bg-[#3977f8] relative w-[800px] h-[550px] m-10 rounded-xl flex flex-col items-center justify-center">
-        <a className="m-10 w-4/5 flex flex-col items-center justify-center" href={props.sponsorInfo.href}>
-          <img className='w-4/5 max-w-[500px] max-h-[200px]' src={`./${props.sponsorInfo.svg}`} alt={props.sponsorInfo.alt} />
-        </a>
+      
+      <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" href={props.sponsorInfo.href}>
+          <img className='w-4/5 max-w-[400px] max-h-[250px]' src={`./${props.sponsorInfo.svg}`} alt={props.sponsorInfo.alt} />
+        </motion.a >
         <h3 className="mx-10 py-10">{props.sponsorInfo.description}</h3>
         <button
           onClick={props.setFalse}