info: updated sponsors

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/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": [