Merge pull request 'fix/layout' (#11) from fix/layout into main

Reviewed-on: #11

src/components/footer.tsx

@@ -12,7 +12,7 @@ const Footer: React.FC = () => {
       <Container maxWidth="lg">
         <Grid container spacing={4}>
           {/* Loop Sustainability */}
-          <Grid item xs={12} md={4}>
+          <Grid item xs={12} md={3}>
             <Typography variant="h6" fontWeight="bold">
               Loop Sustainability
             </Typography>
@@ -22,7 +22,7 @@ const Footer: React.FC = () => {
           </Grid>
 
           {/* Get in Touch */}
-          <Grid item xs={12} md={4}>
+          <Grid item xs={7} md={3}>
             <Typography variant="h6" fontWeight="bold">
               Get in Touch
             </Typography>
@@ -45,11 +45,11 @@ const Footer: React.FC = () => {
           </Grid>
 
           {/* Company Links */}
-          <Grid item xs={12} md={4} textAlign="right">
+          <Grid item xs={5} md={3} textAlign="center">
             <Typography variant="h6" fontWeight="bold">
               Company
             </Typography>
-            <Box sx={{ mt: 1 }}>
+            <Box sx={{ mt: 1  }}>
               {["Service", "Features", "Our Team", "Portfolio", "Blog", "Contact Us"].map((text) => (
                 <Link href="#" key={text} variant="body2" display="block" sx={{ color: "gray", mt: 0.5, textDecoration: "none", "&:hover": { textDecoration: "underline" } }}>
                   {text}
@@ -58,7 +58,10 @@ const Footer: React.FC = () => {
             </Box>
 
             {/* Social Media Icons */}
-            <Box display="flex" justifyContent="flex-end" sx={{ mt: 2 }}>
+
+          </Grid>
+          <Grid item xs={12} md={3} textAlign="center">
+            <Box display="flex" justifyContent="center" sx={{ mt: 2 }}>
               <IconButton color="default">
                 <InstagramIcon />
               </IconButton>

src/components/homepage.tsx

@@ -72,7 +72,7 @@ const HomePage: React.FC = () => {
     return (
         <ThemeProvider theme={theme}>
             <Box>
-                <Grid container sx={{ position: "relative", marginTop: { lg: '119px', xs: '65px' } }}>
+                <Grid container sx={{ position: "relative", marginTop: { lg: '79px', xs: '65px' } }}>
                     {/* Grid 1 */}
                     <Grid
                         item
@@ -90,7 +90,7 @@ const HomePage: React.FC = () => {
                             backgroundSize: "contain",
                             backgroundPosition: " center",
                             backgroundRepeat: "no-repeat",
-                            marginBottom: { xs: "10px", md: "39px", lg: '120px' },
+                            marginBottom: { xs: "10px", md: "39px", lg: '60px' },
                         }}
                     >
 
@@ -98,7 +98,11 @@ const HomePage: React.FC = () => {
                     </Grid>
                 </Grid>
                 <Grid container spacing={4} justifyContent="center" sx={{ padding: 4 }}>
+                    <Grid item xs={12} md={12} lg={12}  textAlign={"center"}>
+                        <Typography variant="h4">Sustainability</Typography>
+                        </Grid>
                     {items.map((text, index) => (
+                        
                         <Grid item xs={12} sm={6} md={4} key={index}  >
                             <Box
                                 sx={{
@@ -117,7 +121,7 @@ const HomePage: React.FC = () => {
                 {/* Grid 2 */}
                 <Box
                     sx={{
-                        height: { xl: 1800, lg: 2000, xs: 2770, sm: 3580, md: 3095 },
+                        height: { xl: 1800, lg: 2000, xs: 2770, sm: 3580, md: 3075 },
                         width: '100%',
                         backgroundImage: { lg: `url(${newbackground})`, xs: null },
                         backgroundSize: "contain",
@@ -135,7 +139,7 @@ const HomePage: React.FC = () => {
                         }}
                     >
                         {/* ROW 1 */}
-                        <Grid item xs={12} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '328px' }, display: "flex", justifyContent: "center", alignItems: "center" }}>
+                        <Grid item xs={12} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '358px' }, display: "flex", justifyContent: "center", alignItems: "center" }}>
                             <Box ref={mineRef} sx={{
                                 height: { xs: "70%", lg: "215px" },
                                 width: { xs: "83%", lg: "870px" },
@@ -187,7 +191,7 @@ const HomePage: React.FC = () => {
 
                         {/* ROW 3 */}
                         <Grid item xs={12} lg={6} md={6} sx={{
-                            background: '#ffffff00', height: { xl: "500px", lg: '401px' },
+                            background: '#ffffff00', height: { xl: "500px", lg: '378px' },
                             display: "flex", justifyContent: { lg: 'flex-end', xs: 'center' }, alignItems: "center"
                         }}>
                             <Box ref={assembleRef} sx={{

src/components/wastemanagement.tsx

@@ -1,17 +1,35 @@
-import { Grid, useMediaQuery, useTheme } from "@mui/material";
+import { createTheme, ThemeProvider, useMediaQuery, useTheme, Box, Grid } from "@mui/material";
-import wasteimage from "../components/imageandgif/loopwastemanage.png";  // Desktop Image
+import wasteimage from "../components/imageandgif/loopwastemanage.png"; 
-import mobileWasteImage from "../components/imageandgif/Soil & Water Contamination mob.png";  // Mobile Image
+import mobileWasteImage from "../components/imageandgif/Soil & Water Contamination mob.png"; 
+const customTheme = createTheme({
+    breakpoints: {
+        values: {
+            xs: 0,
+            sm: 600,
+            md: 1000,
+            lg: 1400,
+            xl: 1800,
+        },
+    },
+});
 
 const WasteImageSection = () => {
-    const theme = useTheme(); // Use the existing theme, don't redeclare it
+    const theme = useTheme(); // Use the theme inside the component
-    const isMobile = useMediaQuery(theme.breakpoints.down("sm")); // For screens < 600px
+    const isMobile = useMediaQuery(theme.breakpoints.down("md"));
+
+    // Function to scroll to the ref
+    const scrollToRef = (ref: React.RefObject<HTMLDivElement>) => {
+        if (ref.current) {
+            ref.current.scrollIntoView({ behavior: "smooth", block: "center" });
+        }
+    };
 
     return (
         <Grid
             container
             xs={12}
             sx={{
-                height: "660px",
+                height: {lg:"820px", xs:'900px' , md:"900px"},
                 marginTop: { lg: 20, xs: 0 },
                 display: "flex",
                 justifyContent: "center",
@@ -25,7 +43,7 @@ const WasteImageSection = () => {
                 style={{
                     width: "100%",
                     height: "100%",
-                    objectFit: "cover"
+                    objectFit: "contain"
                 }}
             />
         </Grid>