Sponsors new

src/components/SponsorsList.tsx

@@ -1,26 +1,21 @@
 import SponsorsMember, { SponsorsMemberProps } from './SponsorsMember';
-import { Box } from '@mui/material';
+import { Grid, ListItem} from '@mui/material';
 import sponsors from '../data/sponsors';
-
-export interface SponsorsListProps {
-  numColumns?: number;
-}
-
-export default function SponsorsList({ numColumns = 3 }: SponsorsListProps) {
+export default function SponsorsList() {
   const sponsorArray = Object.values(sponsors).flat();
-
   return (
-    <Box sx={{
-      display: 'grid',
-      gridTemplateColumns: `repeat(${numColumns}, 1fr)`,
-      gridTemplateRows: 'auto',
-      justifyItems: 'center', 
-      alignItems: 'center', 
-      gridRowGap: 32, 
-    }}>
+    <Grid container
+      columnGap={2}
+      rowGap={2}
+      direction="row"
+      justifyContent="center"
+      alignItems="center"
+      gridTemplateColumns="repeat(3, 1fr)">
       {sponsorArray.map((sponsor: SponsorsMemberProps, index: number) => (
-        <SponsorsMember key={index} {...sponsor} />
+          <Grid item sx={{justifyContent: "center", alignItems: "center"}}>
+            <ListItem> <SponsorsMember key={index} {...sponsor} /> </ListItem>
+          </Grid>
       ))}
-    </Box>
+    </Grid>
   );
-}
+}

src/components/SponsorsMember.tsx

@@ -1,19 +1,53 @@
-import { Box, Typography } from "@mui/material";
-
+import { Card, Box } from "@mui/material";
 export interface SponsorsMemberProps {
   imgSrc: string;
   name: string;
   size?: string;
+  color: string;
 }
-
 export default function SponsorsMember(props: SponsorsMemberProps) {
   const { imgSrc, name } = props;
   const size = props.size ?? "inherit";
-
+  const color = props.color;
   return (
-    <Box sx={{ maxWidth: size, textAlign: "center", margin: 5 }}>
-      <img src={imgSrc} style={{ width: "100%", height: "100%", maxHeight:"100px" }} alt={name} />
-      <Typography sx={{ mt: "5px" }}>{name}</Typography>
+    <Box sx={{
+      maxWidth: size,
+      textAlign: "center",}}>
+      <Box
+        sx={{
+          width: 250,
+          height: 120,
+          backgroundColor: "white",
+          boxSizing: "border-box",
+          border: 4,
+          borderColor: "#22262C",
+          borderBottomLeftRadius: 15,
+          borderBottomRightRadius: 15,
+          borderTopRightRadius: 15,
+          borderTopLeftRadius: 60,
+          overflow: "hidden",
+          alignItems: "center",
+          position: "relative",
+          zIndex: 500,
+        }}
+      >
+        <img src={imgSrc} style={{overflow: 'hidden', width: "80%", height: "80%", objectFit: "contain", paddingTop: 10}} alt={name} />
+      </Box>
+      <Card
+        sx={{
+          width: 250,
+          height: 110,
+          backgroundColor: color,
+          borderBottomLeftRadius: 10,
+          borderBottomRightRadius: 15,
+          borderTopRightRadius: 15,
+          borderTopLeftRadius: 60,
+          overflow: "hidden",
+          left: 2,
+          top: 13,
+          position: "absolute",
+        }}>
+      </Card>
     </Box>
   );
-}
+}

src/data/sponsors.ts

@@ -1,39 +1,45 @@
 const sponsors = {
     'MainSponsors': [
-    { imgSrc: '/sponsors/accenture.png', 
-        name: 'Accenture', 
-        size: '100%' 
-    },
-    { imgSrc: '/sponsors/bloomberg.png', 
-        name: 'Bloomberg', 
-        size: '100%' 
-    },
-    { imgSrc: '/sponsors/contrary.png', 
-        name: 'Contrary', 
-        size: '100%' 
-    },
-    { imgSrc: '/sponsors/ey.png', 
-        name: 'EY', 
-        size: '75%' 
-    },
-    { imgSrc: '/sponsors/mt.png', 
-        name: 'M&T Bank', 
-        size: '100%' 
-    },
-    { imgSrc: '/sponsors/palantir.png', 
-        name: 'Palantir', 
-        size: '100%' 
-    },
-    { imgSrc: '/sponsors/pwc.png', 
-        name: 'PWC', 
-        size: '75%' 
-    },
-    { imgSrc: '/sponsors/wayfair.png', 
-        name: 'Wayfair', 
-        size: '100%' 
+    { imgSrc: '/sponsors/accenture.png',
+        name: 'Accenture',
+        size: '100%',
+        color: '#FF77BB'
+    },
+    { imgSrc: '/sponsors/bloomberg.png',
+        name: 'Bloomberg',
+        size: '100%',
+        color: '#EEFF65'
+    },
+    { imgSrc: '/sponsors/contrary.png',
+        name: 'Contrary',
+        size: '100%',
+        color: '#4CC9F0'
+    },
+    { imgSrc: '/sponsors/ey.png',
+        name: 'EY',
+        size: '75%',
+        color: '#4461ED'
+    },
+    { imgSrc: '/sponsors/mt.png',
+        name: 'M&T Bank',
+        size: '100%',
+        color: '#FE3126'
+    },
+    { imgSrc: '/sponsors/palantir.png',
+        name: 'Palantir',
+        size: '100%',
+        color: '#FF77BB'
+    },
+    { imgSrc: '/sponsors/pwc.png',
+        name: 'PWC',
+        size: '75%',
+        color: '#EEFF65'
+    },
+    { imgSrc: '/sponsors/wayfair.png',
+        name: 'Wayfair',
+        size: '100%',
+        color: '#4CC9F0'
     },
     ],
   };
-
-  export default sponsors;
-
+  export default sponsors;

src/pages/home.tsx

@@ -18,11 +18,12 @@ export default function HomePage() {
         <Box bgcolor={"primary.main"} color="white">
           <Events />
           <FAQPage />
+          <SponsorsPage />
         </Box>
         <BottomBorder />
       </Box>
 
-      <SponsorsPage />
+      {/* <SponsorsPage /> */}
       {/* <Countdown targetDate={1709960400000}></Countdown> */}
     </Stack>
   );

src/pages/sponsors.tsx

@@ -1,48 +1,35 @@
-import { Typography, Box, Link } from "@mui/material";
+import { Container, Typography, Box } from '@mui/material';
 import SponsorsList from "../components/SponsorsList";
-import "@fontsource/inter";
+import "@fontsource/inter"; 
 import "@fontsource/museomoderno";
 
 export default function SponsorsPage() {
-  const rainbowColors = [
-    "#FF0000",
-    "#FF7F00",
-    "#FFD700",
-    "#77dd77",
-    "#0000FF",
-    "#4B0082",
-    "#9400D3",
-  ];
-  const letters = "past partners".split("");
+  const textColors = ['#fe3126', '#fe3126', '#4cc9f0', '#4cc9f0', '#eeff65', '#eeff65', '#ff77bb', '#ff77bb'];
+  const letters = 'partners'.split('');
 
   return (
-    <Box
-      sx={{
-        mx: 12,
-        textAlign: "center",
-      }}
-    >
-      <Typography variant="h3" gutterBottom fontFamily={"museomoderno"}>
-        meet our{" "}
-        {letters.map((letter, index) => (
-          <span
-            key={index}
-            style={{ color: rainbowColors[index % rainbowColors.length] }}
-          >
-            {letter}
-          </span>
-        ))}
-      </Typography>
-      <Typography variant="body1" sx={{ marginBottom: 3, fontFamily: "inter" }}>
-        Nothing would be possible without the support of our sponsors.
-      </Typography>
-      <SponsorsList numColumns={3} />
-      <Typography variant="body1" sx={{ marginTop: 3, fontFamily: "inter" }}>
-        Interested in sponsoring BigRed//Hacks 2024?
-      </Typography>
-      <Typography variant="body1" sx={{ fontFamily: "inter" }}>
-        Email us at <Link href="mailto:bigredhacks@cornell.edu">bigredhacks@cornell.edu</Link>!
-      </Typography>
-    </Box>
+    <Container>
+      <Box sx={{ backgroundColor: "#22262C", color: 'white', padding: 4, textAlign: 'center' }}>
+
+        <Typography variant="h3" gutterBottom fontFamily={"museomoderno"}>
+          meet our{' '}
+          {letters.map((letter, index) => (
+            <span key={index} style={{ color: textColors[index % textColors.length] }}>
+              {letter}
+            </span>
+          ))}
+        </Typography>
+        <Typography variant="body1" sx={{ marginBottom: 3, fontFamily: "inter"}}>
+          Nothing would be possible without the support of our sponsors.
+        </Typography>
+        <SponsorsList/>
+        <Typography variant="body1" sx={{ marginTop: 3 , fontFamily: "inter"}}>
+          Interested in sponsoring BigRedHacks 2023?
+        </Typography>
+        <Typography variant="body1" sx={{fontFamily: "inter"}}>
+          Email us at bigredhacks@cornell.edu!
+        </Typography>
+      </Box>
+    </Container>
   );
-}
+}