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" > - + ) : ( + + )} + + {/* + 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 (