Merge pull request 'fixed tablet view' (#10) from fix/layout into main

Reviewed-on: #10

src/components/homepage.tsx

@@ -25,6 +25,7 @@ import newbackground from "../components/imageandgif/full.png"
 import newbackgroundtwo from "../components/imageandgif/newbacktwo.png"
 import wasteimage from "../components/imageandgif/loopwastemanage.png"
 import WhyChooseUs from "./whyus";
+import WasteImageSection from "./wastemanagement";
 
 
 
@@ -426,28 +427,7 @@ const HomePage: React.FC = () => {
                     </Grid>
 
                 </Box>
-                <Grid
-                    container
-                    xs={12}
-                    sx={{
-                        height: "660px",
-                        marginTop: { lg: 20, xs: 0 },
-                        display: "flex",
-                        justifyContent: "center",
-                        alignItems: "center",
-                        overflow: "hidden"
-                    }}
-                >
-                    <img
-                        src={ wasteimage} // Different image for mobile
-                        alt="Waste Image"
-                        style={{
-                            width: "100%",
-                            height: "100%",
-                            objectFit: "fill"
-                        }}
-                    />
-                </Grid>
+                <WasteImageSection/>
                 <WhyChooseUs />
                 <OurTeam />
 

src/components/wastemanagement.tsx

@@ -0,0 +1,35 @@
+import { Grid, useMediaQuery, useTheme } from "@mui/material";
+import wasteimage from "../components/imageandgif/loopwastemanage.png";  // Desktop Image
+import mobileWasteImage from "../components/imageandgif/Soil & Water Contamination mob.png";  // Mobile Image
+
+const WasteImageSection = () => {
+    const theme = useTheme(); // Use the existing theme, don't redeclare it
+    const isMobile = useMediaQuery(theme.breakpoints.down("sm")); // For screens < 600px
+
+    return (
+        <Grid
+            container
+            xs={12}
+            sx={{
+                height: "660px",
+                marginTop: { lg: 20, xs: 0 },
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                overflow: "hidden"
+            }}
+        >
+            <img
+                src={isMobile ? mobileWasteImage : wasteimage} // Different images for mobile & desktop
+                alt="Waste Image"
+                style={{
+                    width: "100%",
+                    height: "100%",
+                    objectFit: "cover"
+                }}
+            />
+        </Grid>
+    );
+};
+
+export default WasteImageSection;