From a5f5e3eb7fa0208aa3f85621c5da42abaa794940 Mon Sep 17 00:00:00 2001 From: Chloe-Xiao Date: Sun, 17 Aug 2025 10:41:46 +1000 Subject: [PATCH 1/9] banner-spacing --- src/app/(public)/about/components/AboutBanner.tsx | 3 +-- src/app/(public)/about/components/InfoBody.tsx | 4 +--- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/src/app/(public)/about/components/AboutBanner.tsx b/src/app/(public)/about/components/AboutBanner.tsx index 1601ab2..e71f920 100644 --- a/src/app/(public)/about/components/AboutBanner.tsx +++ b/src/app/(public)/about/components/AboutBanner.tsx @@ -9,7 +9,6 @@ export const AboutHeader = styled(Box)(({ theme }) => ({ padding: theme.spacing(10, 50), marginTop: theme.spacing(8), color: theme.palette.text.primary, - gap: theme.spacing(10), [theme.breakpoints.down('xl')]: { padding: theme.spacing(8, 20), }, @@ -29,7 +28,7 @@ export const HeaderContainer = styled(Container)(({ theme }) => ({ display: 'flex', alignItems: 'center', justifyContent: 'center', - gap: theme.spacing(10), + gap: theme.spacing(4), [theme.breakpoints.down('sm')]: { padding: theme.spacing(1, 1), flexDirection: 'column-reverse', diff --git a/src/app/(public)/about/components/InfoBody.tsx b/src/app/(public)/about/components/InfoBody.tsx index b4f4190..3bf57e1 100644 --- a/src/app/(public)/about/components/InfoBody.tsx +++ b/src/app/(public)/about/components/InfoBody.tsx @@ -22,7 +22,6 @@ export const SectionTitle = styled('h2')(({ theme }) => ({ fontSize: theme.typography.h2.fontSize, fontFamily: theme.typography.h2.fontFamily, fontWeight: theme.typography.h2.fontWeight, - margin: theme.spacing(4, 0, 2), })); export const SectionWrapper = styled(Box)(({ theme }) => ({ @@ -30,7 +29,6 @@ export const SectionWrapper = styled(Box)(({ theme }) => ({ alignItems: 'center', flexDirection: 'column', backgroundColor: theme.palette.background.default, - paddingTop: theme.spacing(10), - paddingBottom: theme.spacing(7), + paddingTop: theme.spacing(6), color: theme.palette.text.primary, })); From 5b285c6dc01231c91d60c70d8a0290d123bdd6a0 Mon Sep 17 00:00:00 2001 From: Chloe-Xiao Date: Sun, 17 Aug 2025 16:56:45 +1000 Subject: [PATCH 2/9] CTA-spacing --- src/app/(public)/about/components/AboutBanner.tsx | 1 + src/app/(public)/about/components/CallToAction.tsx | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/app/(public)/about/components/AboutBanner.tsx b/src/app/(public)/about/components/AboutBanner.tsx index e71f920..2f19215 100644 --- a/src/app/(public)/about/components/AboutBanner.tsx +++ b/src/app/(public)/about/components/AboutBanner.tsx @@ -11,6 +11,7 @@ export const AboutHeader = styled(Box)(({ theme }) => ({ color: theme.palette.text.primary, [theme.breakpoints.down('xl')]: { padding: theme.spacing(8, 20), + marginTop: theme.spacing(4), }, [theme.breakpoints.down('sm')]: { padding: theme.spacing(5, 5), diff --git a/src/app/(public)/about/components/CallToAction.tsx b/src/app/(public)/about/components/CallToAction.tsx index 718e2a6..459b0e4 100644 --- a/src/app/(public)/about/components/CallToAction.tsx +++ b/src/app/(public)/about/components/CallToAction.tsx @@ -10,7 +10,7 @@ export const CallToActionText = styled('h3')(({ theme }) => ({ fontSize: theme.typography.h3.fontSize, fontFamily: theme.typography.h3.fontFamily, fontWeight: theme.typography.h3.fontWeight, - margin: theme.spacing(1, 0, 5), + margin: 0, })); export const CallToActionTitle = styled('h2')(({ theme }) => ({ @@ -30,7 +30,7 @@ export const CallToActionWrapper = styled(Box)(({ theme }) => ({ backgroundColor: theme.palette.background.dark, padding: theme.spacing(10, 4), color: theme.palette.text.primary, - gap: theme.spacing(5), + gap: theme.spacing(3), [theme.breakpoints.down('sm')]: { padding: theme.spacing(4, 1), }, From 6a60380e7657e5003eaa2009e11ef7b1d50d6e8a Mon Sep 17 00:00:00 2001 From: Chloe-Xiao Date: Sun, 17 Aug 2025 17:08:02 +1000 Subject: [PATCH 3/9] info-width --- src/app/(public)/about/components/InfoBody.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/(public)/about/components/InfoBody.tsx b/src/app/(public)/about/components/InfoBody.tsx index 3bf57e1..a1be5f9 100644 --- a/src/app/(public)/about/components/InfoBody.tsx +++ b/src/app/(public)/about/components/InfoBody.tsx @@ -7,8 +7,8 @@ export const SectionText = styled('p')(({ theme }) => ({ fontSize: theme.typography.body1.fontSize, fontFamily: theme.typography.fontFamily, lineHeight: theme.spacing(3), - maxWidth: '60%', - marginBottom: theme.spacing(8), + maxWidth: '100%', + marginBottom: theme.spacing(6), [theme.breakpoints.up('sm')]: { fontSize: theme.typography.body2.fontSize, }, From 98907737c4a5f71110052f5545b6e8fc75505fd6 Mon Sep 17 00:00:00 2001 From: Chloe-Xiao Date: Sun, 17 Aug 2025 17:11:41 +1000 Subject: [PATCH 4/9] info-2 --- src/app/(public)/about/components/InfoBody.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/app/(public)/about/components/InfoBody.tsx b/src/app/(public)/about/components/InfoBody.tsx index a1be5f9..24c1db5 100644 --- a/src/app/(public)/about/components/InfoBody.tsx +++ b/src/app/(public)/about/components/InfoBody.tsx @@ -7,10 +7,11 @@ export const SectionText = styled('p')(({ theme }) => ({ fontSize: theme.typography.body1.fontSize, fontFamily: theme.typography.fontFamily, lineHeight: theme.spacing(3), - maxWidth: '100%', + maxWidth: '60%', marginBottom: theme.spacing(6), - [theme.breakpoints.up('sm')]: { + [theme.breakpoints.down('sm')]: { fontSize: theme.typography.body2.fontSize, + maxWidth: '100%', }, })); From 299a7711a357b70f2537679e820547a7e1bd8e1f Mon Sep 17 00:00:00 2001 From: Chloe-Xiao Date: Sun, 17 Aug 2025 17:19:30 +1000 Subject: [PATCH 5/9] teamcard-square-avatar --- src/app/(public)/about/components/TeamCard.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/app/(public)/about/components/TeamCard.tsx b/src/app/(public)/about/components/TeamCard.tsx index 8452237..4aa08a2 100644 --- a/src/app/(public)/about/components/TeamCard.tsx +++ b/src/app/(public)/about/components/TeamCard.tsx @@ -46,7 +46,8 @@ export const TeamMemberImage = styled('div')<{ backgroundImage: string }>( backgroundImage: `url(${backgroundImage})`, [theme.breakpoints.down('sm')]: { width: '100%', - height: '200px', + aspectRatio: '1 / 1', + height: 'auto', }, }), ); From 31f0a0b4970b446d18d851b4398770524cbe6c94 Mon Sep 17 00:00:00 2001 From: Chloe-Xiao Date: Tue, 19 Aug 2025 20:50:23 +1000 Subject: [PATCH 6/9] banner-spacing-image-header --- src/app/(public)/about/components/AboutBanner.tsx | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/app/(public)/about/components/AboutBanner.tsx b/src/app/(public)/about/components/AboutBanner.tsx index 2f19215..946c9e9 100644 --- a/src/app/(public)/about/components/AboutBanner.tsx +++ b/src/app/(public)/about/components/AboutBanner.tsx @@ -1,5 +1,6 @@ import { Box, Container } from '@mui/material'; import { styled } from '@mui/material/styles'; +import { minWidth } from '@mui/system'; export const AboutHeader = styled(Box)(({ theme }) => ({ display: 'flex', @@ -48,20 +49,26 @@ export const HeaderImage = styled('img')(({ theme }) => ({ maxWidth: '576px', height: 'auto', objectFit: 'cover', + [theme.breakpoints.down('sm')]: { + minWidth: '343px', + }, })); export const HeaderTitle = styled('h1')(({ theme }) => ({ color: 'white', - fontSize: theme.typography.h1.fontSize, + fontSize: '28px', fontFamily: theme.typography.h1.fontFamily, fontWeight: theme.typography.h1.fontWeight, margin: 0, - lineHeight: 1.2, + lineHeight: 1.14, + [theme.breakpoints.down('sm')]: { + minWidth: '343px', + }, })); export const HeaderText = styled('p')(({ theme }) => ({ color: 'white', - marginTop: theme.spacing(1), + marginTop: theme.spacing(2), marginBottom: 0, fontSize: theme.typography.body1.fontSize, fontFamily: theme.typography.fontFamily, From 21b6efbbf646a0c2737dc16e97bf1ca59fbfd84a Mon Sep 17 00:00:00 2001 From: Chloe-Xiao Date: Tue, 19 Aug 2025 21:24:55 +1000 Subject: [PATCH 7/9] update-spacing-CTA --- .../about/components/CallToAction.tsx | 30 ++++++++- .../CallToAction/CallToActionSection.tsx | 62 +++++++++++-------- 2 files changed, 64 insertions(+), 28 deletions(-) diff --git a/src/app/(public)/about/components/CallToAction.tsx b/src/app/(public)/about/components/CallToAction.tsx index 459b0e4..a1377d8 100644 --- a/src/app/(public)/about/components/CallToAction.tsx +++ b/src/app/(public)/about/components/CallToAction.tsx @@ -7,10 +7,11 @@ export const CallToActionText = styled('h3')(({ theme }) => ({ flexDirection: 'column', textAlign: 'center', color: 'white', + margin: 0, + marginBottom: '16px', fontSize: theme.typography.h3.fontSize, fontFamily: theme.typography.h3.fontFamily, fontWeight: theme.typography.h3.fontWeight, - margin: 0, })); export const CallToActionTitle = styled('h2')(({ theme }) => ({ @@ -18,11 +19,34 @@ export const CallToActionTitle = styled('h2')(({ theme }) => ({ flexDirection: 'column', textAlign: 'center', color: 'white', + margin: 0, fontSize: theme.typography.h2.fontSize, fontFamily: theme.typography.h2.fontFamily, fontWeight: theme.typography.h2.fontWeight, })); +export const ContactText = styled('p')(({ theme }) => ({ + color: 'white', + marginTop: '12px', + marginBottom: '16px', + fontSize: theme.typography.body1.fontSize, + fontFamily: theme.typography.fontFamily, + whiteSpace: 'nowrap', + [theme.breakpoints.down('lg')]: { + fontSize: theme.typography.body2.fontSize, + whiteSpace: 'normal', + }, + [theme.breakpoints.down('md')]: { + fontSize: theme.typography.body2.fontSize, + whiteSpace: 'normal', + }, + [theme.breakpoints.down('sm')]: { + fontSize: theme.typography.body2.fontSize, + textAlign: 'center', + whiteSpace: 'normal', + }, +})); + export const CallToActionWrapper = styled(Box)(({ theme }) => ({ display: 'flex', alignItems: 'center', @@ -30,9 +54,9 @@ export const CallToActionWrapper = styled(Box)(({ theme }) => ({ backgroundColor: theme.palette.background.dark, padding: theme.spacing(10, 4), color: theme.palette.text.primary, - gap: theme.spacing(3), + gap: theme.spacing(2), [theme.breakpoints.down('sm')]: { - padding: theme.spacing(4, 1), + padding: theme.spacing(6, 2), }, })); diff --git a/src/components/layout/aboutus-layout/CallToAction/CallToActionSection.tsx b/src/components/layout/aboutus-layout/CallToAction/CallToActionSection.tsx index ed2c159..436ffac 100644 --- a/src/components/layout/aboutus-layout/CallToAction/CallToActionSection.tsx +++ b/src/components/layout/aboutus-layout/CallToAction/CallToActionSection.tsx @@ -5,7 +5,7 @@ import InstagramIcon from '@mui/icons-material/Instagram'; import LinkedInIcon from '@mui/icons-material/LinkedIn'; import XIcon from '@mui/icons-material/X'; import YouTubeIcon from '@mui/icons-material/YouTube'; -import { Stack } from '@mui/material'; +import { Box, Stack } from '@mui/material'; import React from 'react'; import { HeaderText } from '@/app/(public)/about/components/AboutBanner'; @@ -13,6 +13,7 @@ import { CallToActionText, CallToActionTitle, CallToActionWrapper, + ContactText, SocialMediaButton, } from '@/app/(public)/about/components/CallToAction'; @@ -20,7 +21,7 @@ const CallToActionSection = () => { return ( Want to work with us? - + Email us at{' '} { hello@jiangren.com.au {' '} with your resume and tell us why you're a great fit! - + Address 217 Flinders St, Adelaide, South Australia 5000, AU @@ -38,30 +39,41 @@ const CallToActionSection = () => { +63 4233365542 - Find us on social media - - + + + Find us on social media + + + + + + + + + + + + + + + + - + - - - - - - - - - - - - - - + + ); }; From e836694cfd18424eda1e2a38316de7928bd4ab81 Mon Sep 17 00:00:00 2001 From: Chloe-Xiao Date: Tue, 19 Aug 2025 21:39:16 +1000 Subject: [PATCH 8/9] update-team-card-no-border --- src/app/(public)/about/components/TeamCard.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/app/(public)/about/components/TeamCard.tsx b/src/app/(public)/about/components/TeamCard.tsx index 4aa08a2..1d82104 100644 --- a/src/app/(public)/about/components/TeamCard.tsx +++ b/src/app/(public)/about/components/TeamCard.tsx @@ -4,7 +4,7 @@ import { styled } from '@mui/material/styles'; export const TeamCardContainer = styled(Box)(({ theme }) => ({ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', - gap: theme.spacing(4), + gap: theme.spacing(3), marginBottom: theme.spacing(10), maxWidth: `calc(3 * 324px + 2 * ${theme.spacing(4)})`, marginLeft: 'auto', @@ -24,9 +24,9 @@ export const TeamMemberCard = styled(Card)(({ theme }) => ({ maxWidth: '324px', height: '464px', padding: theme.spacing(2), - borderRadius: theme.shape.borderRadius, - boxShadow: theme.shadows[3], textAlign: 'center', + backgroundColor: 'transparent', + boxShadow: 'none', [theme.breakpoints.down('sm')]: { maxWidth: '100%', height: 'auto', @@ -38,9 +38,7 @@ export const TeamMemberImage = styled('div')<{ backgroundImage: string }>( ({ theme, backgroundImage }) => ({ width: '300px', height: '300px', - borderRadius: theme.shape.borderRadius, - backgroundColor: theme.palette.grey[300], - marginBottom: theme.spacing(1), + borderRadius: theme.spacing(2), backgroundSize: 'cover', backgroundPosition: 'center', backgroundImage: `url(${backgroundImage})`, From 4eed93d36f0c29198b3c86e9ccce217b42b54246 Mon Sep 17 00:00:00 2001 From: Chloe-Xiao Date: Sun, 24 Aug 2025 11:04:17 +1000 Subject: [PATCH 9/9] info-body-spacing --- src/app/(public)/about/components/InfoBody.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/app/(public)/about/components/InfoBody.tsx b/src/app/(public)/about/components/InfoBody.tsx index 24c1db5..268c84a 100644 --- a/src/app/(public)/about/components/InfoBody.tsx +++ b/src/app/(public)/about/components/InfoBody.tsx @@ -8,15 +8,19 @@ export const SectionText = styled('p')(({ theme }) => ({ fontFamily: theme.typography.fontFamily, lineHeight: theme.spacing(3), maxWidth: '60%', - marginBottom: theme.spacing(6), + marginTop: theme.spacing(6), + marginBottom: '118px', [theme.breakpoints.down('sm')]: { fontSize: theme.typography.body2.fontSize, maxWidth: '100%', + marginTop: theme.spacing(3), + marginBottom: theme.spacing(6), }, })); export const SectionTitle = styled('h2')(({ theme }) => ({ display: 'flex', + margin: 0, flexDirection: 'column', alignItems: 'center', color: theme.palette.text.primary, @@ -30,6 +34,9 @@ export const SectionWrapper = styled(Box)(({ theme }) => ({ alignItems: 'center', flexDirection: 'column', backgroundColor: theme.palette.background.default, - paddingTop: theme.spacing(6), + paddingTop: '150px', color: theme.palette.text.primary, + [theme.breakpoints.down('sm')]: { + paddingTop: theme.spacing(6), + }, }));