Merge pull request #185 from RoBorregos/new_info

New info

src/components/Home/HomeSponsors/HomeSingleSponsor/HomeSingleSponsor.js

@@ -15,12 +15,13 @@ type Props = {
 const HomeSingleSponsor = (props: Props) => {
   const tryRequire = (img_path: string) => {
     try {
-      return require(`../../../../images/sponsors/${img_path}`); 
+      return require(`../../../../images/sponsors/${img_path}`);
     } catch (err) {
       return placeholder;
     }
   };
   const { sponsor } = props;
+
   return (
     <a
       test-id="a1"
@@ -29,11 +30,32 @@ const HomeSingleSponsor = (props: Props) => {
       target="_blank"
       rel="noreferrer noopener"
     >
-      <img
+      {props.large ? (
+        <img
+          className="sponsor-image-lg"
+          src={tryRequire(sponsor.img_path)}
+          alt={sponsor.name}
+        />
+      ) : (
+        <img
+          className="sponsor-image-md"
+          src={tryRequire(sponsor.img_path)}
+          alt={sponsor.name}
+        />
+      )}
+
+      {/* <img
         className="sponsor-image"
-        src={tryRequire(sponsor.img_path)}
-        alt={sponsor.name}
-      />
+        src=""
+        style={{
+          backgroundImage: `url(${tryRequire(sponsor.img_path)})`,
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+          height: "500px", // or specify a fixed height if needed
+          width: "auto", // or specify a fixed width if needed
+        }}
+        aria-label={sponsor.name}
+      /> */}
       <div className="img-filter" />
     </a>
   );

src/components/Home/HomeSponsors/HomeSponsors.css

@@ -9,6 +9,31 @@
   margin-right: auto;
 }
 
+.single-sponsor .sponsor-image-lg {
+  max-height: 20vh;
+  max-width: 30vh;
+  height: auto;
+  width: auto;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.single-sponsor .sponsor-image-md {
+  max-height: 15vh;
+  max-width: 15vh;
+  height: auto;
+  width: auto;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.center-items {
+  display: flex;
+  align-items: center;
+}
+
 .single-sponsor .img-filter {
   opacity: 0;
   background: rgba(250, 250, 250, 0.4);
@@ -26,13 +51,41 @@
 @media (max-width: 1024px){
 
   .single-sponsor .sponsor-image {
-    max-height: 8vh;
+    max-height: 6vh;
+  }
+  .single-sponsor .sponsor-image-lg {
+    max-height: 30vh;
+    max-width: 30vh;
+    height: auto;
+    width: auto;
+    content: center;
+  }
+  .single-sponsor .sponsor-image-md {
+    max-height: 20vh;
+    max-width: 20vh;
+    height: auto;
+    width: auto;
+    content: center;
   }
 }
 
 @media (max-width: 768px){
 
-  .single-sponsor .sponsor-image {
-    max-height: 15vh;
+  /* .single-sponsor .sponsor-image {
+    max-height: 10vh;
+  } */
+
+  .single-sponsor .sponsor-image-lg {
+    max-height: 40vh;
+    max-width: 40vh;
+    height: auto;
+    width: auto;
+  }
+
+  .single-sponsor .sponsor-image-md {
+    max-height: 25vh;
+    max-width: 25vh;
+    height: auto;
+    width: auto;
   }
 }

src/components/Home/HomeSponsors/HomeSponsors.js

@@ -16,21 +16,38 @@ type Props = {
 
 const HomeSponsors = (props: Props) => {
   const { sponsors } = props;
+  const sponsorLarge = sponsors.filter((sponsor) => sponsor.size === "L")
+  const sponsorMedium = sponsors.filter((sponsor) => sponsor.size === "M")
+
   return (
     <div className="home-sponsors-container">
       <Row className="justify-content-sm-center">
         <Col sm="10">
-          <Row className="justify-content-sm-center">
-            {sponsors.map((sponsor: SponsorType, index: number) => (
+          <Row className="justify-content-sm-center center-items">
+            {sponsorLarge.map((sponsor: SponsorType, index: number) => (
+              <Col
+                sm="12"
+                md="6"
+                lg="4"
+                key={index}
+                test-id={index}
+                className="sponsor-col"
+              >
+                <HomeSingleSponsor sponsor={sponsor} large={true}/>
+              </Col>
+            ))}
+          </Row>
+          <Row className="justify-content-sm-center align-content-center">
+            {sponsorMedium.map((sponsor: SponsorType, index: number) => (
               <Col
                 sm="12"
                 md="6"
-                lg="3"
+                lg="4"
                 key={index}
                 test-id={index}
                 className="sponsor-col"
               >
-                <HomeSingleSponsor sponsor={sponsor} />
+                <HomeSingleSponsor sponsor={sponsor} large={false}/>
               </Col>
             ))}
           </Row>

src/data/members.json

@@ -1035,21 +1035,6 @@
             "linkedin": "https://www.linkedin.com/in/sara-ximena-oca%C3%B1a-mart%C3%ADnez-13503a211/",
             "tags": "CLP, Finances, Logistics, Business, Communication, Candidates, Team building"
         },
-        {
-            "id": "95",
-            "name": "Juan Jesús",
-            "lastname": "Ortíz",
-            "status": "active",
-            "role": "Mechanical Design",
-            "subtitle": "",
-            "class": "2022",
-            "semesters": "2",
-            "description": "I'm Juan Jesus, 5th semester student of Mechatronics Engineering, I'm currently a mechanical designer for the team, and I'm very passionate about everything that flies.",
-            "github": "",
-            "github_user": "",
-            "linkedin": "https://www.linkedin.com/in/juanjesusortizvazquez/",
-            "tags": "Mechanics, Structural mechanics, Mechanisms"
-        },
         {
             "id": "97",
             "name": "David",
@@ -1170,21 +1155,6 @@
             "linkedin": "https://www.linkedin.com/in/ángel-antonio-cervantes-0354b7139/",
             "tags": "Electronics, Electrical, Logic electronics, Power electronics, Soccer"
         },
-        {
-            "id": "105",
-            "name": "Antonio",
-            "lastname": "González",
-            "status": "active",
-            "role": "Software Development",
-            "subtitle": "",
-            "class": "2022",
-            "semesters": "2",
-            "description": "I am Antonio, a 3rd-semester student in Engineering Physics. I partly participated as a programmer in the RoboCup Soccer Lightweight League 2023, developing the ball-sensing system. My passions are Aerodynamics and Physics. In my free time, I enjoy playing the piano.  ",
-            "github": "https://github.com/TonyGzz04",
-            "github_user": "TonyGzz04",
-            "linkedin": "https://www.linkedin.com/in/antonio-gonzalez-041350283/",
-            "tags": "Programming, Software, Programmer, Developer, Algorithms"
-        },
         {
             "id": "106",
             "name": "Oscar",

src/data/sponsors.json

@@ -4,17 +4,38 @@
     {
       "name": "Tecnológico de Monterrey",
       "img_path": "itesm.png",
-      "link": "https://tec.mx/es"
+      "link": "https://tec.mx/es",
+      "size": "L"
+    },
+    {
+      "name": "Dipole Digital",
+      "img_path": "dipole.png",
+      "link": "https://dipole.digital/",
+      "size": "L"
+    },
+    {
+      "name": "Acuity Brands",
+      "img_path": "acuity.png",
+      "link": "https://www.acuitybrands.com/",
+      "size": "L"
+    },
+    {
+      "name": "Diram",
+      "img_path": "diram.png",
+      "link": "https://www.diram.com/",
+      "size": "M"
     },
     {
       "name": "Mitutoyo",
       "img_path": "mitutoyo.png",
-      "link": "https://www.mitutoyo.com.mx/"
+      "link": "https://www.mitutoyo.com.mx/",
+      "size": "M"
     },
     {
       "name": "atb",
-      "img_path": "ATB.png",
-      "link": "https://www.linkedin.com/in/aurotb/"
+      "img_path": "ATB2.png",
+      "link": "https://www.linkedin.com/in/aurotb/",
+      "size": "M"
     }
   ],
   "packages": [