Data Population Updates

src/components/SponsorshipCard/SponsorshipCard.tsx

@@ -1,4 +1,4 @@
-import { Box, Typography } from "@mui/material";
+import { Box, SxProps, Typography } from "@mui/material";
 import { useNavigate } from "react-router-dom";
 
 function SponsorshipCard(props: {
@@ -7,21 +7,22 @@ function SponsorshipCard(props: {
   price: number;
   benefits: string[];
   prereq?: string;
-  width: string;
-  aspectRatio: string;
+  width?: string;
+  aspectRatio?: string;
+  sx?: SxProps
 }) {
   return (
     <Box
       sx={{
+        ...props?.sx,
         display: "flex",
         flexDirection: "column",
         justifyContent: "space-between",
         alignItems: "center",
         width: props.width,
-        aspectRatio: props.aspectRatio,
         backgroundColor: "white",
         borderRadius: "5px",
-        boxShadow: "-5px 5px 10px gray",
+        boxShadow: 5,
         color: "black",
         wordBreak: "break-word", // To avoid overflow
       }}
@@ -85,7 +86,7 @@ function DetailsButton(props: { tier: string; backgroundColor: string }) {
       sx={{
         marginTop: "0.75rem",
         padding: "0.5rem 1rem",
-        boxShadow: "-5px 5px 10px gray",
+        boxShadow: 1,
         backgroundColor: props.backgroundColor,
         borderRadius: "5px",
         width: "80%",
@@ -114,8 +115,8 @@ function TierDescription(props: {
         backgroundColor: props.backgroundColor,
         borderRadius: "5px",
         padding: "1.5rem",
-        boxShadow: "-5px 5px 10px gray",
-        width: "103.5%",
+        boxShadow: 12,
+        width: "105.5%",
         height: "40%",
         boxSizing: "border-box" // To make width and height include padding
       }}

src/integrals/WebLandingPage.tsx

@@ -201,7 +201,6 @@ export default function WebLandingPage() {
     queryKey: ["projects"],
     queryFn: async () => {
       let res = await ProjectAPI.getAll();
-      res = res.concat(res).concat(res); //testing
       return res;
     },
   });

src/integrals/WebSponsorTiers.tsx

@@ -0,0 +1,53 @@
+import { Box, Typography } from "@mui/material";
+import SponsorshipCard from "../components/SponsorshipCard";
+
+export default function WebSponsorTiers(props?: {}) {
+    return (
+        <Box
+            sx={{
+                display: 'flex',
+                flexDirection: 'column',
+                width: '100%',
+                justifyContent: 'center',
+                alignItems: 'center',
+                gap: '35px',
+                marginBottom: '100px'
+            }}
+        >
+            <Typography sx={{ textAlign: 'center' }} variant="h3">Sponsorship Tiers</Typography>
+            <Box
+                sx={{
+                    marginTop: '40px',
+                    width: { xs: '100%', md: '75%' },
+                    display: 'flex',
+                    flexDirection: 'row',
+                    gap: '100px',
+                    height: '100vh',
+                    flexWrap: 'wrap'
+                }}
+            >
+                <SponsorshipCard
+                    tier="Gold"
+                    backgroundColor="gold"
+                    price={500}
+                    benefits={["Apple", "ball", "cat"]}
+                    sx={{ height: '100%', flexGrow: 1 }}
+                />
+                <SponsorshipCard
+                    tier="Silver"
+                    backgroundColor="silver"
+                    price={500}
+                    benefits={["Apple", "ball", "cat"]}
+                    sx={{ height: '100%', flexGrow: 1 }}
+                />
+                <SponsorshipCard
+                    tier="Bronze"
+                    backgroundColor="#CD7F32"
+                    price={500}
+                    benefits={["Apple", "ball", "cat"]}
+                    sx={{ height: '100%', flexGrow: 1 }}
+                />
+            </Box>
+        </Box>
+    );
+}

src/main.tsx

@@ -9,6 +9,8 @@ import WebProjectsPage from './integrals/WebProjectsPage'
 import WebTierPage from './integrals/WebTierPage'
 import 'atropos/css'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import SponsorshipCard from "./components/SponsorshipCard/SponsorshipCard.tsx";
+import WebSponsorTiers from "./integrals/WebSponsorTiers.tsx";
 
 const queryClient = new QueryClient();
 
@@ -22,6 +24,7 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
           <Route path="/" element={<App />}>
             <Route path="/project/:projectId" element={<WebProjectsPage />} />
             <Route path="tier/:tier" element={<WebTierPage />} />
+            <Route path="/sponsor-us" element={<WebSponsorTiers />} />
           </Route>
         </Routes>
       </ThemeProvider>