Create about card

src/components/AboutCard.tsx

+import { Box, Theme, Typography } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import React from 'react';
+
+const useStyles = makeStyles((theme: Theme) => ({
+  card: {
+    padding: theme.spacing(8),
+    borderRadius: theme.spacing(0.5),
+    backgroundColor: theme.palette.background.paper,
+    maxWidth: 800,
+  },
+}));
+
+const text = [
+  {
+    id: 1,
+    text:
+      'A kör múltja igencsak régre nyúlik vissza, a kör alakulásának idejéről pontos adatok nincsenek. VIR-es rendszer szerinti alakulásunk 2002, amikor is a konditerem üzemeltetését a Body-Kör elnevezéssel ellátott csoport végezte. A kör legfőbb feladatai közé tartozik a terem tisztaságának és berendezési tárgyainak megőrzése, karbantartása, belépők gyártása, osztása és ellenőrzése, valamint a féléves testnevelés aláírások felügyelete.',
+  },
+  {
+    id: 2,
+    text:
+      '2007 márciusáig üzemelt az SCH kondi, a kollégium felújítása miatt viszont megoldást kellett találni arra, hogy a terem a PPP alatt is tovább üzemelhessen. Az SCH konditerem gépeinek nagy részét áthelyeztük a Kármán Kollégiumba, és ugyanitt megnyitottuk újra a kardió termet. A Terminus Hotel-ben is létrehozásra került egy terem, melybe nem kevés munkát beleölve, a kezdeti lepusztult állapotból sikerült egy lehetőségekhez mérten igényes konditermet kialakítani.',
+  },
+  {
+    id: 3,
+    text:
+      '2008 júliusában, több mint 1 év várakozás után az SCH Body újra megnyitotta kapuit a sportolni vágyók előtt. A Schönherz Zoltán Kollégium PPP keretében történő felújítása befejeződött, melynek során az alagsor és az itt elhelyezkedő konditerem is jelentős változásokon esett át. Megnövekedett alapterülettel (240nm), jelentős kondi géppark bővítéssel, férfi és női öltözővel, zuhanyzási lehetőséggel, valamint zárható öltözőszekrényekkel várjuk az edzeni vágyókat. A beruházást a Schönherz Kollégiumért Alapítvány támogatása révén valósítottuk meg.',
+  },
+];
+
+const AboutCard: React.FC = () => {
+  const { card } = useStyles();
+
+  return (
+    <Box className={card}>
+      {text.map((p) => (
+        <Box mb={2} key={p.id}>
+          {' '}
+          <Typography variant="body1" color="textPrimary">
+            {p.text}
+          </Typography>
+          {' '}
+        </Box>
+      ))}
+    </Box>
+  );
+};
+
+export default AboutCard;