36 lines
1.2 KiB
TypeScript
36 lines
1.2 KiB
TypeScript
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;
|