48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
import React from "react";
|
|
import { useMediaQuery, useTheme, Grid } from "@mui/material";
|
|
import wasteimage from "../components/imageandgif/Loop Transforming waste.svg";
|
|
import { ReactComponent as MobileWasteImage } from "../components/imageandgif/Soil & Water Contamination.svg";
|
|
|
|
const WasteImageSection = () => {
|
|
const theme = useTheme();
|
|
const isMobile = useMediaQuery(theme.breakpoints.down("md"));
|
|
|
|
return (
|
|
<Grid
|
|
container
|
|
xs={12}
|
|
sx={{
|
|
height: { lg: "820px", xs: "900px", md: "900px" },
|
|
marginTop: { lg: 20, xs: 0 },
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
overflow: "hidden",
|
|
background:'#fafafa'
|
|
}}
|
|
>
|
|
{isMobile ? (
|
|
<MobileWasteImage
|
|
style={{
|
|
width: "100%",
|
|
height: "100%",
|
|
objectFit: "contain"
|
|
}}
|
|
/>
|
|
) : (
|
|
<img
|
|
src={wasteimage}
|
|
alt="Waste Image"
|
|
style={{
|
|
width: "100%",
|
|
height: "100%",
|
|
objectFit: "contain"
|
|
}}
|
|
/>
|
|
)}
|
|
</Grid>
|
|
);
|
|
};
|
|
|
|
export default WasteImageSection;
|