Updated MUI Hackerpack & Home Page Styling

frontend/src/components/generic/PageHeader/index.js

@@ -1,6 +1,5 @@
 import React from 'react'
-
-import { Link, Typography } from '@mui/material'
+import { Link, Typography, Box } from '@mui/material'
 
 const PageHeader = ({
     heading,
@@ -9,32 +8,45 @@ const PageHeader = ({
     link = null,
     alignment = 'center',
 }) => {
-    const styling = {
-        center: 'tw-items-center tw-text-center',
-        left: 'tw-items-start tw-text-left',
-        right: 'tw-items-end tw-text-right',
+    const alignmentMap = {
+        center: 'center',
+        left: 'flex-start',
+        right: 'flex-end',
     }
 
     return (
-        <div className={`tw-flex tw-flex-col tw-gap-2 ${styling[alignment]}`}>
+        <Box
+            display="flex"
+            flexDirection="column"
+            gap={2}
+            alignItems={alignmentMap[alignment]}
+            textAlign={alignment}
+        >
             <Typography
-                className="tw-font-bold tw-tracking-tight"
                 variant="h3"
                 component="h3"
+                fontWeight="bold"
+                sx={{ letterSpacing: '-0.5px' }}
             >
                 {heading}
             </Typography>
-            <div className="tw-flex tw-gap-2">
-                <Typography
-                    className="tw-tracking-tight tw-font-medium"
-                    variant="h6"
-                    component="h6"
-                >
-                    {subheading}
-                </Typography>
-                <Typography variant="body1" color="secondary" component="p">
-                    {details}
-                </Typography>
+
+            <Box display="flex" flexDirection="column" gap={1}>
+                {subheading && (
+                    <Typography
+                        variant="h6"
+                        component="h6"
+                        fontWeight="medium"
+                        sx={{ letterSpacing: '-0.25px' }}
+                    >
+                        {subheading}
+                    </Typography>
+                )}
+                {details && (
+                    <Typography variant="body1" color="secondary">
+                        {details}
+                    </Typography>
+                )}
                 {!!link && (
                     <Link
                         component="a"
@@ -45,8 +57,8 @@ const PageHeader = ({
                         Open in new tab
                     </Link>
                 )}
-            </div>
-        </div>
+            </Box>
+        </Box>
     )
 }
 

frontend/src/pages/_hackerpack/index.js

@@ -1,37 +1,20 @@
 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',
-//     },
-// }))
+import PageHeader from 'components/generic/PageHeader'
 
 export default () => {
     const navigate = useNavigate()
-    // const classes = useStyles()
-
     const { slug } = useParams()
     const event = useSelector(DashboardSelectors.event)
 
@@ -42,7 +25,6 @@ export default () => {
             setHackerpacks(event.hackerpacks)
         }
     }, [event, slug])
-    console.log(event)
 
     return (
         <PageWrapper
@@ -61,7 +43,6 @@ export default () => {
                     property="og:title"
                     content="Junction App || Hackerpack"
                 />
-
                 <meta
                     name="twitter:title"
                     content="Junction App || Hackerpack"
@@ -78,7 +59,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 +71,7 @@ export default () => {
                     content={config.SEO_TWITTER_HANDLE}
                 />
             </Helmet>
+
             <Container center wrapperClass={'classes.backButtonWrapper'}>
                 <Button onClick={() => navigate('/')}>
                     <ArrowBackIosIcon style={{ color: 'black' }} />
@@ -99,20 +80,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_')}