add sponsors

src/Data/Sponsors.json

@@ -0,0 +1,8 @@
+[
+  {
+    "about": "Datový portál data.Brno je moderní platforma, která poskytuje široký katalog otevřených dat o městě Brně. Umožňuje přístup k více než 100 datasetům z různých oblastí, včetně dopravy, infrastruktury, životního prostředí a veřejných služeb. Data jsou volně dostupná k použití pro vývoj aplikací, analýz nebo pro osobní účely. Portál podporuje inovace a digitální transformaci města a je skvělým zdrojem pro programátory, kteří chtějí vytvářet nové služby nebo produkty. Interaktivní dashboardy, mapy a sociologické průzkumy poskytují uživatelům ucelený pohled na městské dění.",
+    "logo": "/img/sponsors/DataBrno.svg",
+    "name": "Data Brno",
+    "link": "https://data.brno.cz/"
+  }
+]

src/Pages/Home/Home.tsx

@@ -5,6 +5,7 @@ import {
   Theme,
   Container,
   Grid,
+  Typography,
   // useTheme,
   // Card,
   // CardActionArea,
@@ -17,10 +18,12 @@ import {
 // import { ChevronRight, ChevronLeft } from "@material-ui/icons";
 // import news from "../../Data/Mock/News.json";
 import team from "../../Data/Team.json";
+import sponsors from "../../Data/Sponsors.json";
 import TeamMemberCard from "./TeamMemberCard";
 import DataCard from "../../Components/DataCard";
 import HomeRoutingIcon from "../../Components/HomeRoutingIcon";
 import { getThemeStoredCode } from "../../Utils/Common";
+import SponsorCard from "./SponsorCard";
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -182,29 +185,26 @@ export default function Home() {
         theme="dark"
       />
 
-      <Container
-        maxWidth="xl"
-        style={{ position: "relative", zIndex: 10, backgroundColor: getThemeStoredCode() === "light" ? "white" : "#212121" }}
-      >
+      <Container maxWidth="xl" style={{ position: "relative", zIndex: 10, backgroundColor: getThemeStoredCode() === "light" ? "white" : "#212121" }}>
         <br />
         <br />
         <Grid container>
           {team.map((t, i) => (
             <Grid className={classes.cardContainer} key={i} item xs={12} md={6} lg={4}>
-              <TeamMemberCard
-                photo={t.photo}
-                name={t.name}
-                age={new Date().getUTCFullYear() - new Date(t.birthDate).getUTCFullYear()}
-                motto={t.motto}
-                email={t.email}
-                github={t.github}
-                about={t.about}
-                web={undefined}
-              />
+              <TeamMemberCard photo={t.photo} name={t.name} age={new Date().getUTCFullYear() - new Date(t.birthDate).getUTCFullYear()} motto={t.motto} email={t.email} github={t.github} about={t.about} web={undefined} />
             </Grid>
           ))}
         </Grid>
         <br />
+        <Typography variant="h3">Sponzoři</Typography>
+        <br />
+        <Grid container>
+          {sponsors.map((t, i) => (
+            <Grid className={classes.cardContainer} key={i} item xs={12} lg={6}>
+              <SponsorCard logo={t.logo} name={t.name} about={t.about} link={t.link} />
+            </Grid>
+          ))}
+        </Grid>
       </Container>
     </>
   );

src/Pages/Home/SponsorCard.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { Avatar, Box, Card, CardContent, createStyles, Grid, makeStyles, Theme, Typography } from "@material-ui/core";
+
+interface IProps {
+  logo: string;
+  about: string;
+  name: string;
+  link: string;
+}
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      display: "flex",
+      // margin: theme.spacing(1),
+      // "& > *": {
+      //   margin: theme.spacing(1),
+      // },
+      height: "100%",
+      cursor: "pointer",
+    },
+    large: {
+      width: "80%",
+      marginLeft: "10%",
+      height: "100%",
+    },
+    dummy: {
+      position: "fixed",
+      marginTop: "50%",
+    },
+    link: {
+      textDecoration: "none",
+      color: "#007bff",
+    },
+    greyText: {
+      color: theme.palette.type === "dark" ? "#c4c4c4" : "#5c5c5c",
+    },
+  })
+);
+
+export default function SponsorCard({ name, about, link, logo }: IProps) {
+  const classes = useStyles();
+
+  return (
+    <Card className={classes.root} onClick={() => window.open(link, "_blank")}>
+      <CardContent>
+        <Grid container justify="center" alignContent="center" alignItems="center">
+          <Grid item xs={12} sm={4}>
+            <Box width="100%">
+              <div className={classes.dummy}></div>
+              <img src={logo} alt="" className={classes.large} />
+            </Box>
+          </Grid>
+          <Grid item xs={12} sm={8}>
+            <Typography variant="h5">{name}</Typography>
+            <hr />
+            <Typography variant="caption">{about}</Typography>
+          </Grid>
+        </Grid>
+      </CardContent>
+    </Card>
+  );
+}