Updated MUI Hackerpack & Home Page Styling

frontend/src/pages/_hackerpack/index.js

@@ -1,37 +1,33 @@
 import React, { useState, useEffect } from 'react'
 import { Box, Typography, Divider, Button } from '@mui/material'
-
 import { useNavigate, useParams } from 'react-router'
 import HackerpackDetail from 'components/hackerpack/HackerpackDetail'
-import PageHeader from 'components/generic/PageHeader'
 import Footer from 'components/layouts/Footer'
 import PageWrapper from 'components/layouts/PageWrapper'
 import GlobalNavBar from 'components/navbars/GlobalNavBar'
 import Container from 'components/generic/Container'
-
 import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'
 import { Helmet } from 'react-helmet'
 import config from 'constants/config'
 import * as DashboardSelectors from 'reducers/dashboard/selectors'
 import { useSelector } from 'react-redux'
 
-// const useStyles = styled(theme => ({
-//     wrapper: {
-//         height: '100%',
-//         display: 'flex',
-//         flexDirection: 'column',
-//         alignItems: 'center',
-//         justifyContent: 'center',
-//         padding: theme.spacing(3),
-//         background: 'black',
-//         color: 'white',
-//     },
-// }))
+//  Updated PageHeader components
+const PageHeader = ({ heading, subheading }) => {
+    return (
+        <Box textAlign="center" my={1}>
+            <Typography variant="h3" component="h1" fontWeight="bold">
+                {heading}
+            </Typography>
+            <Typography variant="subtitle1" color="black" mt={2}>
+                {subheading}
+            </Typography>
+        </Box>
+    )
+}
 
 export default () => {
     const navigate = useNavigate()
-    // const classes = useStyles()
-
     const { slug } = useParams()
     const event = useSelector(DashboardSelectors.event)
 
@@ -42,7 +38,6 @@ export default () => {
             setHackerpacks(event.hackerpacks)
         }
     }, [event, slug])
-    console.log(event)
 
     return (
         <PageWrapper
@@ -61,7 +56,6 @@ export default () => {
                     property="og:title"
                     content="Junction App || Hackerpack"
                 />
-
                 <meta
                     name="twitter:title"
                     content="Junction App || Hackerpack"
@@ -78,7 +72,6 @@ export default () => {
                     name="twitter:description"
                     content="Login to redeem our awesome hackerpack offers!"
                 />
-
                 <meta name="og:type" content="website" />
                 <meta property="og:image" content={config.SEO_IMAGE_URL} />
                 <meta name="twitter:image" content={config.SEO_IMAGE_URL} />
@@ -91,6 +84,7 @@ export default () => {
                     content={config.SEO_TWITTER_HANDLE}
                 />
             </Helmet>
+
             <Container center wrapperClass={'classes.backButtonWrapper'}>
                 <Button onClick={() => navigate('/')}>
                     <ArrowBackIosIcon style={{ color: 'black' }} />
@@ -99,20 +93,27 @@ export default () => {
                     </Typography>
                 </Button>
             </Container>
+
             <Container center>
                 <PageHeader
                     heading="Hackerpack"
                     subheading="We want you to be able to fully focus on making your hackathon project as cool as possible! These software provided by our partners will help you unleash your creativity and maximize your learning during our events."
                 />
                 <Divider variant="middle" />
                 {hackerpacks.map(hackerpack => (
-                    <HackerpackDetail hackerpack={hackerpack} />
+                    <HackerpackDetail
+                        key={hackerpack.id}
+                        hackerpack={hackerpack}
+                    />
                 ))}
                 <Box p={2}>
                     <Typography color="textSecondary" variant="subtitle1">
                         Anything you would like to see here in the future?
-                        Contact us at partnerships@hackjunction.com with your
-                        suggestion.
+                        Contact us at{' '}
+                        <a href="mailto:partnerships@hackjunction.com">
+                            partnerships@hackjunction.com
+                        </a>{' '}
+                        with your suggestion.
                     </Typography>
                 </Box>
             </Container>

frontend/src/pages/_home/index.js

@@ -105,20 +105,36 @@ export default () => {
                 </Container>
                 <Divider size={20} />
                 <Container center small>
-                    <Grid>
+                    {/* Logo Centered */}
+                    <Box
+                        sx={{
+                            display: 'flex',
+                            justifyContent: 'center',
+                            mb: 2,
+                        }}
+                    >
                         <Image
                             defaultImage={require('assets/logos/emblem_black.png')}
-                            transformation={{
-                                width: 150,
-                            }}
+                            transformation={{ width: 150 }}
                         />
-                        <Typography variant="h4" align="center">
-                            {t('Platform_organise_hack_', {
-                                owner: config.PLATFORM_OWNER_NAME,
-                            })}
-                        </Typography>
-                    </Grid>
-                    <Grid container justifyContent="center" alignItems="center">
+                    </Box>
+
+                    {/* Heading Centered */}
+                    <Typography variant="h4" align="center" sx={{ mb: 3 }}>
+                        {t('Platform_organise_hack_', {
+                            owner: config.PLATFORM_OWNER_NAME,
+                        })}
+                    </Typography>
+
+                    {/* Buttons Centered Horizontally with Spacing */}
+                    <Box
+                        sx={{
+                            display: 'flex',
+                            justifyContent: 'center',
+                            gap: 2,
+                            mb: 4,
+                        }}
+                    >
                         <Button
                             color="theme_lightgray"
                             variant="outlinedNew"
@@ -135,52 +151,50 @@ export default () => {
                         >
                             {t('Pricing_')}
                         </Button>
-                    </Grid>
+                    </Box>
+
                     <Divider size={4} />
                 </Container>
+
                 <Divider size={20} />
-                <Container center small>
-                    <Divider size={1} />
-                    <Typography variant="h3" align="center">
+
+                <Container maxWidth="sm" sx={{ textAlign: 'center', py: 8 }}>
+                    <Typography variant="h3" gutterBottom>
                         {t('New_to_', {
                             owner: config.PLATFORM_OWNER_NAME_CAPS,
                         })}
                     </Typography>
-                    <Divider size={3} />
 
                     <Typography
                         variant="body1"
-                        align="center"
-                        style={{ fontSize: '24px' }}
+                        sx={{ fontSize: '20px', mb: 3 }}
                     >
                         {t('Junction_info_', {
                             owner: config.PLATFORM_OWNER_NAME,
                         })}
                     </Typography>
-                    <Divider size={3} />
+
                     <Typography
                         variant="body1"
-                        align="center"
-                        style={{ fontSize: '24px' }}
+                        sx={{ fontSize: '20px', mb: 5 }}
                     >
                         {t('More_info_', {
                             owner: config.PLATFORM_OWNER_NAME,
-                        })}
+                        })}{' '}
                         <ExternalLink href={config.PLATFORM_OWNER_WEBSITE}>
                             {t('More_info_link_')}
                         </ExternalLink>
                     </Typography>
-                </Container>
 
-                <Divider size={20} />
-                <Container center>
-                    <Typography variant="h4" align="center">
+                    <Typography variant="h4" sx={{ mb: 3 }}>
                         {t('Join_hackerpack_')}
                     </Typography>
+
                     <Button
                         color="theme_lightgray"
                         variant="outlinedNew"
                         strong
+                        size="large"
                         onClick={() => navigate('/hackerpack')}
                     >
                         {t('To_hackerpack_')}