diff --git a/src/components/Home/HomeSponsors/HomeSingleSponsor/HomeSingleSponsor.js b/src/components/Home/HomeSponsors/HomeSingleSponsor/HomeSingleSponsor.js index 001f2e9..de605e0 100644 --- a/src/components/Home/HomeSponsors/HomeSingleSponsor/HomeSingleSponsor.js +++ b/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 ( { target="_blank" rel="noreferrer noopener" > - {sponsor.name} + ) : ( + {sponsor.name} + )} + + {/* {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} + /> */}
); diff --git a/src/components/Home/HomeSponsors/HomeSponsors.css b/src/components/Home/HomeSponsors/HomeSponsors.css index 2a9e9ef..d7bbd96 100644 --- a/src/components/Home/HomeSponsors/HomeSponsors.css +++ b/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; } } diff --git a/src/components/Home/HomeSponsors/HomeSponsors.js b/src/components/Home/HomeSponsors/HomeSponsors.js index b53bdb2..8edc033 100644 --- a/src/components/Home/HomeSponsors/HomeSponsors.js +++ b/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 (
- - {sponsors.map((sponsor: SponsorType, index: number) => ( + + {sponsorLarge.map((sponsor: SponsorType, index: number) => ( + + + + ))} + + + {sponsorMedium.map((sponsor: SponsorType, index: number) => ( - + ))} diff --git a/src/data/sponsors.json b/src/data/sponsors.json index a50fcf4..df4b836 100644 --- a/src/data/sponsors.json +++ b/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": [ diff --git a/src/images/sponsors/ATB2.png b/src/images/sponsors/ATB2.png new file mode 100644 index 0000000..051d7cb Binary files /dev/null and b/src/images/sponsors/ATB2.png differ diff --git a/src/images/sponsors/acuity.png b/src/images/sponsors/acuity.png new file mode 100644 index 0000000..ede94b1 Binary files /dev/null and b/src/images/sponsors/acuity.png differ diff --git a/src/images/sponsors/dipole.png b/src/images/sponsors/dipole.png new file mode 100644 index 0000000..c774d25 Binary files /dev/null and b/src/images/sponsors/dipole.png differ diff --git a/src/images/sponsors/diram.png b/src/images/sponsors/diram.png new file mode 100644 index 0000000..939f936 Binary files /dev/null and b/src/images/sponsors/diram.png differ