small fixes

Author: derekxu04

…src/components/Sponsors/sponsorlinks.tsx …src/components/Sponsors/SponsorLinks.tsxfrontend/src/components/Sponsors/sponsorlinks.tsx renamed to frontend/src/components/Sponsors/SponsorLinks.tsx frontend/src/components/Sponsors/sponsorlinks.tsx renamed to frontend/src/components/Sponsors/SponsorLinks.tsx

@@ -1,9 +1,9 @@
 import { useState } from 'react';
 import { diamondLinks, goldLinks, silverLinks, sponsorInfo } from '../../../public/data/data';
-import SponsorModal from './sponsorModal';
+import SponsorModal from './SponsorModal';
 
 //import '/styles/sponsorLinks.module.css';
-const logostyle = 'h-14';
+const logostyle = 'grow-on-hover cursor-pointer transform transition-transform duration-300 hover:scale-105';
 const logodiv = 'block gap-y-8 h-14';
 const background = 'rgba(57, 119, 248, 0.6)';
 // const outer = 'rounded-[4rem] w-[90rem] flex flex-col pl-14 py-14 gap-16';
@@ -38,7 +38,7 @@ function SponsorLinks() {
                   setShowModal(true);
                 }}
               >
-                <img className={`${logostyle}`} src={item.svg} alt={item.alt} />
+                <img className={`h-14 ${logostyle}`} src={item.svg} alt={item.alt} />
               </div>
             );
           })}
@@ -58,7 +58,7 @@ function SponsorLinks() {
                   setShowModal(true);
                 }}
               >
-                <img className="h-6" src={item.svg} alt={item.alt} />
+                <img className={`h-6 ${logostyle}`} src={item.svg} alt={item.alt} />
               </div>
             );
           })}
@@ -78,7 +78,7 @@ function SponsorLinks() {
                   setShowModal(true);
                 }}
               >
-                <img className="h-8" src={item.svg} alt={item.alt} />
+                <img className={`h-8 ${logostyle}`} src={item.svg} alt={item.alt} />
               </div>
             );
           })}

…src/components/Sponsors/sponsorModal.tsx …src/components/Sponsors/SponsorModal.tsxfrontend/src/components/Sponsors/sponsorModal.tsx renamed to frontend/src/components/Sponsors/SponsorModal.tsx frontend/src/components/Sponsors/sponsorModal.tsx renamed to frontend/src/components/Sponsors/SponsorModal.tsx

@@ -10,18 +10,23 @@ export default function SponsorModal(props: { sponsorInfo: sponsorInfo | null; s
   }
   return (
     <div
-      className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50"
+      className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50"
       onClick={() => {
         props.setFalse();
       }}
     >
 
       <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 
+          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}
+          target="_blank"
+        >
+          <img className='w-4/5 max-w-[300px] max-h-[200px]' src={`./${props.sponsorInfo.svg}`} alt={props.sponsorInfo.alt} />
         </motion.a >
         <h3 className="mx-10 py-10">{props.sponsorInfo.description}</h3>
         <button
@@ -33,4 +38,4 @@ export default function SponsorModal(props: { sponsorInfo: sponsorInfo | null; s
       </div>
     </div>
   );
-}
+} 

frontend/src/pages/sponsors.tsx

@@ -1,6 +1,6 @@
 import Navbar from '@/components/Navbar';
 import Footer from '@/components/Footer';
-import SponsorLinks from '@/components/Sponsors/sponsorlinks';
+import SponsorLinks from '@/components/Sponsors/SponsorLinks';
 
 export default function SponsorsPage() {
   return (