added in all sponsors

frontend/src/components/Home/Home.tsx

@@ -6,8 +6,17 @@ import DevLogo from '../../images/DevLogo.png';
 import InnovateLogo from '../../images/InnovateLogo.png';
 import OpenSourceLogo from '../../images/OpenSourceLogo.png';
 import HomeLogo from '../../images/HomeLogo.png';
-import ASLogo from '../../images/AS.png';
-import CSEDeptLogo from '../../images/csedeplogo.png';
+import ASLogo from '../../images/sponsors/AS_Logo.png';
+import CSEDeptLogo from '../../images/sponsors/CSEDept_Logo.png';
+import BasementLogo from '../../images/sponsors/Basement_Logo.jpeg';
+import EyePopAILogo from '../../images/sponsors/EyePopAI_Logo.png';
+import GoogleLogo from '../../images/sponsors/Google_Logo.webp';
+import IGELogo from '../../images/sponsors/IGE_Logo.png';
+import LinuxLogo from '../../images/sponsors/Linux_Logo.png';
+import LovableLogo from '../../images/sponsors/Lovable_Logo.png';
+import OSPOLogo from '../../images/sponsors/OSPO_Logo.png';
+import PersonaLogo from '../../images/sponsors/Persona_Logo.png';
+import RobloxLogo from '../../images/sponsors/Roblox_Logo.png';
 import Sithu from '../../images/homepage/sithu.jpg';
 import axios from 'axios';
 import CountUp from 'react-countup';
@@ -54,7 +63,7 @@ const Home = () => {
     },
     {
       name: "Shree Venkatesh",
-      position: "Software Development Engineer",
+      position: "Software Development Engineer Intern",
       company: "Amazon Web Services",
       photo: shreevenkatesh // placeholder for now
     },
@@ -410,9 +419,17 @@ const Home = () => {
             </Box>
 
             <Grid container spacing={3} justifyContent="center" alignItems="center">
-              <Grid item xs={12} sm={4} md={3}><img src={ASLogo} alt="Associated Student" style={styles.sponsorLogoTall} /></Grid>
-              <Grid item xs={12} sm={4} md={3}><img src={CSEDeptLogo} alt="CSE Department" style={styles.sponsorLogo} /></Grid>
-              <Grid item xs={12} sm={4} md={3}><Box sx={styles.emptySponsorCard}></Box></Grid>
+              <Grid item xs={6} sm={4} md={2}><img src={ASLogo} alt="Associated Student" style={styles.sponsorLogo} /></Grid>
+              <Grid item xs={6} sm={4} md={2}><img src={CSEDeptLogo} alt="CSE Department" style={styles.sponsorLogo} /></Grid>
+              <Grid item xs={6} sm={4} md={2}><img src={GoogleLogo} alt="Google" style={styles.sponsorLogo} /></Grid>
+              <Grid item xs={6} sm={4} md={2}><img src={RobloxLogo} alt="Roblox" style={styles.sponsorLogo} /></Grid>
+              <Grid item xs={6} sm={4} md={2}><img src={PersonaLogo} alt="Persona" style={styles.sponsorLogo} /></Grid>
+              <Grid item xs={6} sm={4} md={2}><img src={LovableLogo} alt="Lovable" style={styles.sponsorLogo} /></Grid>
+              <Grid item xs={6} sm={4} md={2}><img src={EyePopAILogo} alt="EyePop AI" style={styles.sponsorLogo} /></Grid>
+              <Grid item xs={6} sm={4} md={2}><img src={IGELogo} alt="IGE" style={styles.sponsorLogo} /></Grid>
+              <Grid item xs={6} sm={4} md={2}><img src={LinuxLogo} alt="Linux Foundation" style={styles.sponsorLogo} /></Grid>
+              <Grid item xs={6} sm={4} md={2}><img src={OSPOLogo} alt="OSPO" style={styles.sponsorLogo} /></Grid>
+              <Grid item xs={6} sm={4} md={2}><img src={BasementLogo} alt="Basement" style={styles.sponsorLogo} /></Grid>
             </Grid>
           </Box>
         </Container>

frontend/src/components/Home/styles.ts

@@ -464,6 +464,10 @@ export const homeStyles = () => ({
     height: "150px",
     objectFit: "contain" as const,
     filter: "brightness(1.1)",
+    background: "white",
+    borderRadius: "12px",
+    boxShadow: "0 4px 6px rgba(0,0,0,0.2)",
+    padding: "10px",
     '@media (max-width: 600px)': {
       width: "100px",
       height: "100px"

frontend/src/components/Opportunities/Opportunities.tsx

@@ -2,13 +2,13 @@ import { ReactNode, useEffect, useRef, useState } from 'react';
 import { Container, Typography, Grid, Link, Box, useTheme } from '@mui/material';
 import MuiButton from '@mui/material/Button';
 import bg from '../../images/shape2.svg';
-import sponsor from '../../images/cseLogo.gif';
-import sponsor2 from '../../images/AS.png';
+import sponsor from '../../images/sponsors/CSEDept_Logo.png';
+import sponsor2 from '../../images/sponsors/AS_Logo.png';
 import { opportunitiesStyles } from './styles';
 import members from '../../images/opportunitiespage/members.jpg';
 import sponsors from '../../images/opportunitiespage/sponsors.png';
 import { useNavigate } from 'react-router-dom';
-
+// NOTE: THIS PAGE IS NOT BEING USED ANYMORE
 interface ImageWithBoxShadowProps {
   src: string;
   alt: string;

frontend/src/components/Sponsorships/Sponsorships.css

@@ -21,18 +21,18 @@
 }
 
 .sponsorships h1 {
-  font-size: 4.5rem; 
+  font-size: 3.5rem; 
   margin: 0;
 }
 
 .sponsorships h2 {
-  font-size: 4.5rem;  
+  font-size: 2.8rem;  
   margin: 0;
   margin-bottom: 10px;
 }
 
 .sponsorships p {
-  font-size: 2.25rem;   
+  font-size: 1.5rem;   
   line-height: 1.2;
   margin: 0;
   margin-top: 10px;
@@ -53,23 +53,29 @@
 .yellow { color: #ebb111;}
 
 .sponsorships a {
-  color: #e2b340;
-  text-decoration: none;
+  color: #64c3e3;
+  text-decoration: underline;
 }
 .sponsorships a:hover {
-  color: #f7dc55;
+  color: #4a9bb8;
 }
 
 .logos {
   display: flex;
   justify-content: center;
-  gap: 4.5rem;
+  gap: 2rem;
+  flex-wrap: wrap;
+  margin-bottom: 2rem;
 }
 .logos img {
-  height: 140px;
+  height: 120px;
+  width: auto;
+  max-width: 200px;
   background: white;
   border-radius: 12px;
   box-shadow: 0 4px 6px rgba(0,0,0,0.2);
+  padding: 10px;
+  object-fit: contain;
 }
 
 @media (max-width: 650px){
@@ -78,21 +84,18 @@
   }
 
   .sponsorships h1 {
-    font-size: 3rem; 
     padding: 0 5rem;
     margin-top: 10px;
     margin-bottom: 30px;
   }
 
   .sponsorships h2 {
-    font-size: 3rem; 
     padding: 0 5rem;
     margin-top: 30px;
     margin-bottom: 20px;
   }
 
   .sponsorships p {
-    font-size: 1.1rem;  
     line-height: 1.2;
     margin-bottom: 30px;
   }
@@ -108,14 +111,15 @@
   }
 
   .logos {
-    flex-direction: column; 
-    gap: 5em;              
+    flex-direction: row; 
+    gap: 1rem;              
     align-items: center;   
+    justify-content: center;
   }
 
   .logos img {
-    height: 150px;        
-    max-width: 100%;     
+    height: 80px;        
+    max-width: 120px;     
     object-fit: contain;   
   }
 }

frontend/src/components/Sponsorships/Sponsorships.tsx

@@ -1,13 +1,22 @@
 import React from "react";
 import "./Sponsorships.css";
-import picOne from "../../images/ucsdcseWorld.jpg";
-import picTwo from "../../images/AssociatedStudent.jpg";
+import ASLogo from "../../images/sponsors/AS_Logo.png";
+import CSEDeptLogo from "../../images/sponsors/CSEDept_Logo.png";
+import BasementLogo from "../../images/sponsors/Basement_Logo.jpeg";
+import EyePopAILogo from "../../images/sponsors/EyePopAI_Logo.png";
+import GoogleLogo from "../../images/sponsors/Google_Logo.webp";
+import IGELogo from "../../images/sponsors/IGE_Logo.png";
+import LinuxLogo from "../../images/sponsors/Linux_Logo.png";
+import LovableLogo from "../../images/sponsors/Lovable_Logo.png";
+import OSPOLogo from "../../images/sponsors/OSPO_Logo.png";
+import PersonaLogo from "../../images/sponsors/Persona_Logo.png";
+import RobloxLogo from "../../images/sponsors/Roblox_Logo.png";
 
 export default function Sponsorships() {
   return (
     <div className="sponsorships">
       <div className="sponsorships-container">
-        <h1>Become a part of the Team</h1>
+        <h1>Become a part of the Team!</h1>
 
         <p>
           Join us in our mission to{" "}
@@ -27,8 +36,17 @@ export default function Sponsorships() {
         <h2>Thank You to our Current Partners</h2>
 
         <div className="logos">
-          <img src={picOne} alt="UCSD CSE Logo" className="image-one"/>
-          <img src={picTwo} alt="Associated Students Logo" className="image-two" />
+          <img src={ASLogo} alt="Associated Students Logo" className="sponsor-logo"/>
+          <img src={CSEDeptLogo} alt="CSE Department Logo" className="sponsor-logo" />
+          <img src={GoogleLogo} alt="Google Logo" className="sponsor-logo" />
+          <img src={RobloxLogo} alt="Roblox Logo" className="sponsor-logo" />
+          <img src={PersonaLogo} alt="Persona Logo" className="sponsor-logo" />
+          <img src={LovableLogo} alt="Lovable Logo" className="sponsor-logo" />
+          <img src={EyePopAILogo} alt="EyePop AI Logo" className="sponsor-logo" />
+          <img src={IGELogo} alt="IGE Logo" className="sponsor-logo" />
+          <img src={LinuxLogo} alt="Linux Foundation Logo" className="sponsor-logo" />
+          <img src={OSPOLogo} alt="OSPO Logo" className="sponsor-logo" />
+          <img src={BasementLogo} alt="Basement Logo" className="sponsor-logo" />
         </div>
       </div>
     </div>