added leo, updated sponsors

Author: gxywang

src/assets/exec/leo.jpg

@@ -8,6 +8,7 @@ import reid from '../assets/exec/reid.jpg';
 import manav from '../assets/exec/manav.jpg';
 import saketh from '../assets/exec/saketh.jpg';
 import henry from '../assets/exec/henry.jpg';
+import leo from '../assets/exec/leo.jpg';
 // TODO: add image to ../assets/exec/name.jpg and import here
 
 const About: React.FC = () => {
@@ -45,7 +46,7 @@ const About: React.FC = () => {
         <p></p>
         <div style={{ display: 'flex', justifyContent: 'left', alignItems: 'center', gap: '20px', flexWrap: 'wrap', marginTop: '2rem' }}>
           <div style={{textAlign: 'center'}}>
-            <a href="" target="_blank" rel="noopener noreferrer">
+            <a href="https://www.linkedin.com/in/manavchandaka/" target="_blank" rel="noopener noreferrer">
               <img
                 src={manav}
                 alt="team members"
@@ -70,7 +71,7 @@ const About: React.FC = () => {
           </div>
 
           <div style={{textAlign: 'center'}}>
-            <a href="" target="_blank" rel="noopener noreferrer">
+            <a href="https://www.linkedin.com/in/reid-faistl-8165412a7/" target="_blank" rel="noopener noreferrer">
               <img
                 src={reid}
                 alt="team members"
@@ -95,7 +96,7 @@ const About: React.FC = () => {
           </div>
 
           <div style={{textAlign: 'center'}}>
-            <a href="" target="_blank" rel="noopener noreferrer">
+            <a href="https://www.linkedin.com/in/saketh-kantipudi/" target="_blank" rel="noopener noreferrer">
               <img
                 src={saketh}
                 alt="team members"
@@ -118,6 +119,32 @@ const About: React.FC = () => {
             </a>
             <h5 style={{marginTop: '1px'}}>Saketh Kantipudi</h5>
           </div>
+
+          <div style={{textAlign: 'center'}}>
+            <a href="https://www.leo-lin.com/" target="_blank" rel="noopener noreferrer">
+              <img
+                src={leo}
+                alt="team members"
+                style={{
+                  width: '200px',
+                  height: '200px',
+                  objectFit: 'cover',
+                  borderRadius: '10px',
+                  boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)'
+                }}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.transform = 'scale(1.03)';
+                  e.currentTarget.style.boxShadow = '0 8px 16px rgba(0, 0, 0, 0.2)';
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.transform = 'scale(1)';
+                  e.currentTarget.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.1)';
+                }}
+              />
+            </a>
+            <h5 style={{marginTop: '1px'}}>Leo Lin</h5>
+          </div>
+
         </div>
       </section>
       <br></br>

src/pages/About.tsx

@@ -5,38 +5,59 @@ interface Sponsor {
   name: string;
   logo: string;
   link: string;
+  size: string;
 } 
 
 const sponsors: Sponsor[] = [
   {
     name: "FrodoBots",
     logo: "https://cdn.prod.website-files.com/66042185882fa3428f4dd6f1/662bee5b5ef7ed094186a56a_frodobots_ai_logo.png",
     link: "https://www.frodobots.ai/",
+    size: "big",
+  },
+  {
+    name: "BitRobot Foundation",
+    logo: "https://framerusercontent.com/images/1Az7oGmHlBgOaIPiMw6DuVww8M.png?scale-down-to=1024&width=1285&height=444",
+    link: "https://bitrobot.ai/",
+    size: "big",
   },
   {
     name: "ROBOTIS",
     logo: "https://en.robotis.com/renewal/img/main/main_logo.png",
     link: "https://en.robotis.com/",
+    size: "normal",
   },
   {
     name: "Hugging Face LeRobot",
-    logo: "https://huggingface.co/front/assets/huggingface_logo-noborder.svg",
+    logo: "https://cdn-uploads.huggingface.co/production/uploads/631ce4b244503b72277fc89f/MNkMdnJqyPvOAEg20Mafg.png",
     link: "https://huggingface.com/",
+    size: "normal",
   },
   {
-    name: "K-Scale Labs",
-    logo: "https://avatars.githubusercontent.com/u/89321298?s=200&v=4",
-    link: "https://www.kscale.dev/",
+    name: "Neuralink",
+    logo: "https://upload.wikimedia.org/wikipedia/commons/4/44/Neuralink_logo.svg",
+    link: "https://neuralink.com/",
+    size: "normal",
   },
   {
     name: "UIUC CS",
     logo: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFPvnocn_MP38oUknIq1DZI8-7HkYHQ2hAbQ&s",
     link: "https://siebelschool.illinois.edu/",
+    size: "normal",
+  },
+  {
+    name: "Saronic",
+    logo: "https://www.saronic.com/assets/images/newsroom/default.png",
+    link: "https://www.saronic.com/",
+    size: "big",
   },
   // Add more sponsors as needed
 ];
 
 const Sponsors: React.FC = () => {
+  const bigSponsors = sponsors.filter(sponsor => sponsor.size === "big");
+  const normalSponsors = sponsors.filter(sponsor => sponsor.size === "normal");
+
   return (
     <div className="layout-xl">
       <h1 className="heading-title">Our Sponsors</h1>
@@ -55,16 +76,38 @@ const Sponsors: React.FC = () => {
       <h2 className="heading-subtitle-bold">Thank You!</h2>
       <p>We are grateful for the support of our sponsors who make our projects and competitions possible.</p>
       <br></br>
-      <div className="sponsor-list">
-        {sponsors.map((sponsor, index) => (
-          <div key={index} className="sponsor-item">
-            <a href={sponsor.link} target="_blank" rel="noopener noreferrer">
-              <img src={sponsor.logo} alt={`${sponsor.name} logo`} className="sponsor-logo" />
-            </a>
-            <h3 className="heading-md-bold">{sponsor.name}</h3>
+
+      {/* Big Sponsors Section */}
+      {bigSponsors.length > 0 && (
+        <>
+          <div className="sponsor-list sponsor-list-big">
+            {bigSponsors.map((sponsor, index) => (
+              <div key={index} className="sponsor-item sponsor-item-big">
+                <a href={sponsor.link} target="_blank" rel="noopener noreferrer">
+                  <img src={sponsor.logo} alt={`${sponsor.name} logo`} className="sponsor-logo sponsor-logo-big" />
+                </a>
+                <h3 className="heading-md-bold">{sponsor.name}</h3>
+              </div>
+            ))}
+          </div>
+        </>
+      )}
+
+      {/* Normal Sponsors Section */}
+      {normalSponsors.length > 0 && (
+        <>
+          <div className="sponsor-list sponsor-list-normal">
+            {normalSponsors.map((sponsor, index) => (
+              <div key={index} className="sponsor-item sponsor-item-normal">
+                <a href={sponsor.link} target="_blank" rel="noopener noreferrer">
+                  <img src={sponsor.logo} alt={`${sponsor.name} logo`} className="sponsor-logo sponsor-logo-normal" />
+                </a>
+                <h3 className="heading-md-bold">{sponsor.name}</h3>
+              </div>
+            ))}
           </div>
-        ))}
-      </div>
+        </>
+      )}
     </div>
   );
 };

src/pages/Sponsors.tsx

@@ -5,9 +5,20 @@
 
 .sponsor-list {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 20px;
   justify-content: center;
+  margin-bottom: 40px;
+}
+
+/* Big sponsors grid - fewer columns, more space */
+.sponsor-list-big {
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  gap: 30px;
+}
+
+/* Normal sponsors grid - standard layout */
+.sponsor-list-normal {
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 }
 
 .sponsor-item {
@@ -19,8 +30,13 @@
   transition: transform 0.2s ease-in-out;
   display: flex;
   flex-direction: column;
-  align-items: center; /* Centers items horizontally in flex container */
-  justify-content: center; /* Centers items vertically in flex container */
+  align-items: center;
+  justify-content: center;
+}
+
+/* Big sponsor items - more padding and space */
+.sponsor-item-big {
+  padding: 30px;
 }
 
 .sponsor-item:hover {
@@ -29,13 +45,23 @@
 }
 
 .sponsor-logo {
-  max-width: 200px;
-  max-height: 120px;
   height: auto;
   margin-bottom: 15px;
   border-radius: 5px;
-  display: block; /* Makes image a block element */
-  margin-left: auto; /* Auto margins on left and right will center the image */
+  display: block;
+  margin-left: auto;
   margin-right: auto;
-  object-fit: contain; /* Ensures the logo maintains its aspect ratio */
+  object-fit: contain;
+}
+
+/* Big sponsor logos - larger size */
+.sponsor-logo-big {
+  max-width: 300px;
+  max-height: 180px;
+}
+
+/* Normal sponsor logos - standard size */
+.sponsor-logo-normal {
+  max-width: 200px;
+  max-height: 120px;
 }