From 44eeae2db3cd62a7206377b573dae68ec2d35870 Mon Sep 17 00:00:00 2001
From: Dan Dobos <dan@prowarehouse.nl>
Date: Mon, 20 Oct 2025 18:39:34 +0200
Subject: [PATCH] refactor: update Typography variants in BlogAccordion,
 MainAccordion, MainCard, and Landing components for consistency

---
 .../blog-accordion/BlogAccordion.jsx           |  4 +++-
 .../main-accordion/MainAccordion.jsx           |  4 +++-
 src/components/main-card/MainCard.jsx          |  2 +-
 src/pages/landing/Landing.jsx                  | 18 +++++++++++++++---
 4 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/components/blog-accordion/BlogAccordion.jsx b/src/components/blog-accordion/BlogAccordion.jsx
index f65e899..d8259b0 100644
--- a/src/components/blog-accordion/BlogAccordion.jsx
+++ b/src/components/blog-accordion/BlogAccordion.jsx
@@ -31,7 +31,9 @@ const BlogAccordion = ({ blogContent }) => {
 					expandIcon={<ExpandMoreIcon />}
 					aria-controls={`panel-${itemIdx}-content`}
 					id={`panel-${itemIdx}-header`}>
-					<Typography variant="h4">{title}</Typography>
+					<Typography variant="h5" component="h3">
+						{title}
+					</Typography>
 				</AccordionSummary>
 				<AccordionDetails>
 					{lines.map((lineContent, idx) => (
diff --git a/src/components/main-accordion/MainAccordion.jsx b/src/components/main-accordion/MainAccordion.jsx
index 4e66b9a..36868af 100644
--- a/src/components/main-accordion/MainAccordion.jsx
+++ b/src/components/main-accordion/MainAccordion.jsx
@@ -18,7 +18,9 @@ const MainAccordion = ({ items, title }) => {
 				expandIcon={<ExpandMoreIcon />}
 				aria-controls="panel1a-content"
 				id="panel1a-header">
-				<Typography variant="h4">{title}</Typography>
+				<Typography variant="h5" component="h3">
+					{title}
+				</Typography>
 			</AccordionSummary>
 			<AccordionDetails>
 				<Grid2
diff --git a/src/components/main-card/MainCard.jsx b/src/components/main-card/MainCard.jsx
index fcc5107..73b1833 100644
--- a/src/components/main-card/MainCard.jsx
+++ b/src/components/main-card/MainCard.jsx
@@ -47,7 +47,7 @@ const MainCard = ({ imageURL, title, description, url }) => {
 						<CardContent
 							color="white"
 							onClick={() => window.open(url, "_blank")}>
-							<Typography gutterBottom variant="h5" component="div">
+							<Typography gutterBottom variant="h6" component="h4">
 								{title}
 							</Typography>
 						</CardContent>
diff --git a/src/pages/landing/Landing.jsx b/src/pages/landing/Landing.jsx
index 043d05c..ac6efe4 100644
--- a/src/pages/landing/Landing.jsx
+++ b/src/pages/landing/Landing.jsx
@@ -12,7 +12,11 @@ const Home = () => {
 		<Grid2 container direction="column" alignItems="stretch">
 			<Grid2 container direction="column">
 				<Grid2>
-					<Typography variant="h3" marginTop={4} marginBottom={2}>
+					<Typography
+						variant="h4"
+						component="h2"
+						marginTop={4}
+						marginBottom={2}>
 						{t.formatMessage({
 							id: "navigation.projects",
 							defaultMessage: "Projects",
@@ -27,7 +31,11 @@ const Home = () => {
 
 			<Grid2 container direction="column">
 				<Grid2>
-					<Typography variant="h3" marginTop={4} marginBottom={2}>
+					<Typography
+						variant="h4"
+						component="h2"
+						marginTop={4}
+						marginBottom={2}>
 						{t.formatMessage({
 							id: "navigation.best-practices",
 							defaultMessage: "Best Practices",
@@ -42,7 +50,11 @@ const Home = () => {
 
 			<Grid2 container direction="column">
 				<Grid2>
-					<Typography variant="h3" marginTop={4} marginBottom={2}>
+					<Typography
+						variant="h4"
+						component="h2"
+						marginTop={4}
+						marginBottom={2}>
 						{t.formatMessage({
 							id: "navigation.blog",
 							defaultMessage: "Blog",