updates

components/InfoCard.jsx

@@ -0,0 +1,23 @@
+import styled from '@emotion/styled'
+import { Grid, Card, Box, Typography, Container } from '@mui/material';
+import React from 'react'
+
+const InfoCard = (props) => {
+  return (
+    <Card sx={{height: 450}}>
+      <Container>
+        <Typography variant="h5" align='center' marginY={4}>{props.title}</Typography>
+        <Box>
+          <Box marginBottom={4} sx={{textAlign: 'center'}}>
+            {props.picture} 
+          </Box>
+          <Box>
+            <Typography>{props.text}</Typography>
+          </Box>
+        </Box>
+      </Container>
+    </Card>
+  )
+}
+
+export default InfoCard

components/WinningDialog.jsx

@@ -0,0 +1,21 @@
+import { Dialog, Button, DialogActions, DialogContent, DialogTitle } from '@mui/material'
+import React from 'react'
+
+const WinningDialog = (props) => {
+
+    const okHandler = () => {
+        props.close(false);
+    }
+
+  return (
+    <Dialog open={props.open}>
+        <DialogTitle>You Win!</DialogTitle>
+        <DialogContent>You won {props.prizeAmount}! Come to our next meeting and show your ID to claim your prize.</DialogContent>
+        <DialogActions>
+            <Button onClick={okHandler}>Ok</Button>
+        </DialogActions>
+    </Dialog>
+  )
+}
+
+export default WinningDialog