internal
/
Loops_Sustainability
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: internal:3279d3254b714761773dc00442c5e1be37b5eedb
Branches Tags
internal:main
..
compare: internal:5b71630412e454ebcc1869a1222a1441d631d60e
Branches Tags
internal:main

No commits in common. "3279d3254b714761773dc00442c5e1be37b5eedb" and "5b71630412e454ebcc1869a1222a1441d631d60e" have entirely different histories.
3279d3254b ... 5b71630412

2 changed files with 22 additions and 37 deletions
Show Stats Expand all files Collapse all files

24
src/components/homepage.tsx
View File

@ -25,7 +25,6 @@ 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";
@ -427,7 +426,28 @@ const HomePage: React.FC = () => {
</Grid>
</Box>
<WasteImageSection/>
<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>
<WhyChooseUs />
<OurTeam />

35
src/components/wastemanagement.tsx
View File

@ -1,35 +0,0 @@
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;