Update sponsers for 2025 (#1208)

Added the assets for the 2025 sponsors and updated the sponsor
section on the landing page. Different assets are now used
depending on the theme.

frontend/src/pages/LandingPage/SponsorSection/SponsorSection.tsx

@@ -1,25 +1,131 @@
 import React from 'react';
+import { useSelector } from 'react-redux';
 import PageContainer from 'styles/PageContainer';
-import janestreetLogo from 'assets/LandingPage/janestreet.png';
-import tiktokLogo from 'assets/LandingPage/tiktok.svg';
+import { RootState } from 'config/store';
 import S from './styles';
 
-type LogoProps = { src: string; href: string };
-
-const Logo = ({ src, href }: LogoProps) => (
-  <a href={href} target="_blank" rel="noopener noreferrer">
-    <S.LogoImg src={src} />
-  </a>
-);
-
-const SponsorSection = () => (
-  <PageContainer>
-    <S.SponsorsText>Our sponsors</S.SponsorsText>
-    <S.LogosWrapper>
-      <Logo href="https://www.janestreet.com" src={janestreetLogo} />
-      <Logo href="https://www.tiktok.com" src={tiktokLogo} />
-    </S.LogosWrapper>
-  </PageContainer>
-);
+type LogoProps = {
+  src: string;
+  href?: string;
+  size: 'platinum' | 'gold' | 'silver';
+};
+
+type LogoModule = { default: string };
+type Files = Record<string, () => Promise<LogoModule>>;
+
+const URLS = {
+  janestreet: 'https://www.janestreet.com',
+  imc: 'https://www.imc.com/ap/',
+  citadel: 'https://www.citadel.com',
+  thetradedesk: 'https://www.thetradedesk.com/',
+  safetyculture: 'https://www.safetyculture.com',
+  arista: 'https://www.arista.com'
+} as const;
+
+const LOGO_SIZES = {
+  platinum: '350px',
+  gold: '250px',
+  silver: '150px'
+} as const;
+
+const Logo = ({ src, href, size }: LogoProps) => {
+  const image = <S.LogoImg src={src} size={LOGO_SIZES[size]} />;
+
+  return href ? (
+    <a href={href} target="_blank" rel="noopener noreferrer">
+      {image}
+    </a>
+  ) : (
+    image
+  );
+};
+
+// Necessary to do it this way as vite does not support dynamic imports with globs
+// ie needs to be a string literal
+const sponsorAssets = {
+  dark: {
+    platinum: import.meta.glob(
+      '/src/assets/LandingPage/Sponsors/Dark/Platinum/*.(png|jpg|jpeg|svg)'
+    ) as Files,
+    gold: import.meta.glob(
+      '/src/assets/LandingPage/Sponsors/Dark/Gold/*.(png|jpg|jpeg|svg)'
+    ) as Files,
+    silver: import.meta.glob(
+      '/src/assets/LandingPage/Sponsors/Dark/Silver/*.(png|jpg|jpeg|svg)'
+    ) as Files
+  },
+  light: {
+    platinum: import.meta.glob(
+      '/src/assets/LandingPage/Sponsors/Light/Platinum/*.(png|jpg|jpeg|svg)'
+    ) as Files,
+    gold: import.meta.glob(
+      '/src/assets/LandingPage/Sponsors/Light/Gold/*.(png|jpg|jpeg|svg)'
+    ) as Files,
+    silver: import.meta.glob(
+      '/src/assets/LandingPage/Sponsors/Light/Silver/*.(png|jpg|jpeg|svg)'
+    ) as Files
+  }
+};
+
+const SponsorSection = () => {
+  const { theme } = useSelector((state: RootState) => state.settings);
+  const [logos, setLogos] = React.useState<Record<'platinum' | 'gold' | 'silver', string[]>>({
+    platinum: [],
+    gold: [],
+    silver: []
+  });
+
+  React.useEffect(() => {
+    const loadLogos = async () => {
+      const { platinum, gold, silver } = sponsorAssets[theme];
+
+      const loadTier = async (files: Files) => {
+        const paths = Object.keys(files);
+        const modules = await Promise.all(paths.map((path) => files[path]()));
+        return paths.map((path, index) => ({
+          path,
+          url: modules[index].default
+        }));
+      };
+
+      const [platinumLogos, goldLogos, silverLogos] = await Promise.all([
+        loadTier(platinum),
+        loadTier(gold),
+        loadTier(silver)
+      ]);
+
+      setLogos({
+        platinum: platinumLogos.map((p) => p.url),
+        gold: goldLogos.map((g) => g.url),
+        silver: silverLogos.map((s) => s.url)
+      });
+    };
+
+    loadLogos();
+  }, [theme]);
+
+  const renderLogos = (logoUrls: string[], tier: LogoProps['size']) =>
+    logoUrls.map((url) => {
+      const fileName = url.split('/').pop()?.split('.')[0] || '';
+      return (
+        <Logo
+          key={`${tier}-${url}`}
+          src={url}
+          href={URLS[fileName as keyof typeof URLS]}
+          size={tier}
+        />
+      );
+    });
+
+  return (
+    <PageContainer>
+      <S.SponsorsText>Our sponsors</S.SponsorsText>
+      <S.LogosWrapper>
+        <S.TierWrapper>{renderLogos(logos.platinum, 'platinum')}</S.TierWrapper>
+        <S.TierWrapper>{renderLogos(logos.gold, 'gold')}</S.TierWrapper>
+      </S.LogosWrapper>
+    </PageContainer>
+  );
+};
 
 export default SponsorSection;

frontend/src/pages/LandingPage/SponsorSection/styles.ts

@@ -7,22 +7,46 @@ const SponsorsText = styled.h1`
   -webkit-text-fill-color: transparent;
   text-align: center;
   position: relative;
-  margin-bottom: 1rem;
+  margin-bottom: 2rem;
   font-weight: 650;
 `;
 
 const LogosWrapper = styled.div`
   display: flex;
-  justify-content: center;
-  gap: 4rem;
+  flex-direction: column;
+  gap: 3rem;
+  width: 100%;
+`;
+
+const LogoImg = styled.img<{ size: string }>`
+  max-width: ${(props) => props.size};
+  height: auto;
+  object-fit: contain;
+  transition: transform 0.2s ease, filter 0.2s ease;
+
+  &:hover {
+    transform: scale(1.05);
+  }
 `;
 
-const LogoImg = styled.img`
-  height: 100px;
+const TierWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 2rem;
+  width: 100%;
+  flex-wrap: wrap;
+
+  &:not(:last-child) {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    padding-bottom: 3rem;
+  }
 `;
 
 export default {
   SponsorsText,
   LogosWrapper,
-  LogoImg
+  LogoImg,
+  TierWrapper
 };