refactor: update Typography variants in BlogAccordion, MainAccordion, MainCard, and Landing components for consistency

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) => (

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

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>

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",