refactor: update layout structure in Landing and Projects components for improved responsiveness

src/pages/landing/Landing.jsx

@@ -9,7 +9,7 @@ import { useIntl } from "react-intl";
 const Home = () => {
 	const t = useIntl();
 	return (
-		<Grid2 container direction="row" alignItems="stretch" spacing={3}>
+		<Grid2 container direction="column" alignItems="stretch">
 			<Grid2 item container direction="column">
 				<Grid2 item>
 					<Typography variant="h3">

src/pages/projects/Projects.jsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { Box } from "@mui/material";
 import {
 	// AngularData,
 	ReactData,
@@ -11,14 +12,19 @@ import MainAccordion from "components/main-accordion/MainAccordion";
 
 const Projects = () => {
 	return (
-    <>
+		<Box
-      {/* <MainAccordion items={AngularData} title='Angular' /> */}
+			sx={{
+				display: "flex",
+				flexDirection: "column",
+				width: "100%", // added so children can take full width
+				alignItems: "stretch", // optional, ensures flex children stretch
+			}}>
 			<MainAccordion items={ReactData} title="React" />
 			<MainAccordion items={WebsitesData} title="HTML" />
 			<MainAccordion items={VueData} title="Vue" />
 			<MainAccordion items={GoData} title="Golang" />
 			<MainAccordion items={JavaData} title="Java" />
-    </>
+		</Box>
 	);
 };