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

fixed alignment issue of Box and img components #9

Merged
mihir merged 1 commits from fix/layout into main 2025-02-14 12:38:14 +05:30
Conversation 0 Commits 1 Files Changed 2 +48 -39
2 changed files with 48 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 247b384ced - Show all commits

87
src/components/homepage.tsx
View File

@ -19,8 +19,8 @@ import loopgreenback from "../components/imageandgif/newloop.png"
import OurTeam from "./ourteam"; import OurTeam from "./ourteam";
import mobileLogo from "../components/imageandgif/loopsMoblogo.png" import mobileLogo from "../components/imageandgif/loopsMoblogo.png"
import mobileback from "../components/imageandgif/mobileback.png" import mobileback from "../components/imageandgif/mobileback.png"
import { useMediaQuery, useTheme } from "@mui/material";
import { createTheme, ThemeProvider } from "@mui/material/styles"; import { createTheme, ThemeProvider } from "@mui/material/styles";
import newbackground from "../components/imageandgif/full.png" import newbackground from "../components/imageandgif/full.png"
import newbackgroundtwo from "../components/imageandgif/newbacktwo.png" import newbackgroundtwo from "../components/imageandgif/newbacktwo.png"
import wasteimage from "../components/imageandgif/loopwastemanage.png" import wasteimage from "../components/imageandgif/loopwastemanage.png"
@ -29,7 +29,6 @@ import WhyChooseUs from "./whyus";
const HomePage: React.FC = () => { const HomePage: React.FC = () => {
// Create refs for each content box // Create refs for each content box
const mineRef = useRef<HTMLDivElement>(null); const mineRef = useRef<HTMLDivElement>(null);
@ -46,12 +45,16 @@ const HomePage: React.FC = () => {
"Loop Sustainability extends the life cycle of electronics through advanced technology and smart algorithms, enabling efficient reuse and responsible recycling.", "Loop Sustainability extends the life cycle of electronics through advanced technology and smart algorithms, enabling efficient reuse and responsible recycling.",
"We collaborate with consumer brands, retailers, recyclers, repair centers, policymakers, and more—all working together to reduce e-waste and drive sustainability.", "We collaborate with consumer brands, retailers, recyclers, repair centers, policymakers, and more—all working together to reduce e-waste and drive sustainability.",
]; ];
// const theme = useTheme();
// const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
// Function to scroll to the ref // Function to scroll to the ref
const scrollToRef = (ref: React.RefObject<HTMLDivElement>) => { const scrollToRef = (ref: React.RefObject<HTMLDivElement>) => {
if (ref.current) { if (ref.current) {
ref.current.scrollIntoView({ behavior: "smooth", block: "center" }); ref.current.scrollIntoView({ behavior: "smooth", block: "center" });
} }
}; };
const theme = createTheme({ const theme = createTheme({
breakpoints: { breakpoints: {
values: { values: {
@ -59,7 +62,7 @@ const HomePage: React.FC = () => {
sm: 600, // Default sm: 600, // Default
md: 1000, // Default md: 1000, // Default
lg: 1400, // Default lg: 1400, // Default
xl: 1800, // Default xl: 1600, // Default
}, },
}, },
@ -68,7 +71,7 @@ const HomePage: React.FC = () => {
return ( return (
<ThemeProvider theme={theme}> <ThemeProvider theme={theme}>
<Box> <Box>
<Grid container sx={{ position: "relative", marginTop: {lg :'119px' , xs:'65px'} }}> <Grid container sx={{ position: "relative", marginTop: { lg: '119px', xs: '65px' } }}>
{/* Grid 1 */} {/* Grid 1 */}
<Grid <Grid
item item
@ -86,7 +89,7 @@ const HomePage: React.FC = () => {
backgroundSize: "contain", backgroundSize: "contain",
backgroundPosition: " center", backgroundPosition: " center",
backgroundRepeat: "no-repeat", backgroundRepeat: "no-repeat",
marginBottom: { xs: "10px", md: "39px" ,lg :'120px' }, marginBottom: { xs: "10px", md: "39px", lg: '120px' },
}} }}
> >
@ -113,11 +116,11 @@ const HomePage: React.FC = () => {
{/* Grid 2 */} {/* Grid 2 */}
<Box <Box
sx={{ sx={{
height: { xl: 1800, lg: 2000, xs: 2770, sm: 3580 ,md:2695 }, height: { xl: 1800, lg: 2000, xs: 2770, sm: 3580, md: 3095 },
width: '100%', width: '100%',
backgroundImage: { lg: `url(${newbackground})`, xs: `url(${mobileback})` }, backgroundImage: { lg: `url(${newbackground})`, xs: null },
backgroundSize: "contain", backgroundSize: "contain",
backgroundPosition: { lg: "center", xs: "50% 86%" , md: "50% 80%" }, backgroundPosition: { lg: "center"},
backgroundRepeat: "no-repeat", backgroundRepeat: "no-repeat",
paddingBottom: { lg: 20, xs: 0 } paddingBottom: { lg: 20, xs: 0 }
}} }}
@ -134,7 +137,7 @@ const HomePage: React.FC = () => {
<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: '328px' }, display: "flex", justifyContent: "center", alignItems: "center" }}>
<Box ref={mineRef} sx={{ <Box ref={mineRef} sx={{
height: { xs: "70%", lg: "215px" }, height: { xs: "70%", lg: "215px" },
width: { xs: "80%", lg: "870px" }, width: { xs: "83%", lg: "870px" },
zIndex: 1, zIndex: 1,
display: "flex", display: "flex",
flexDirection: { xs: "column", lg: "row" }, flexDirection: { xs: "column", lg: "row" },
@ -144,8 +147,8 @@ const HomePage: React.FC = () => {
textAlign: 'center', textAlign: 'center',
marginBottom: { xs: "20px", md: "0" }, marginBottom: { xs: "20px", md: "0" },
}}> }}>
<Box sx={{ width: { xs: "60%", md: "100%" } }}> <Box sx={{ width: { xs: "60%", md: "70%" } }}>
<img src={gifone} alt="Gif" style={{ width: "100%" }} /> <img src={gifone} alt="Gif" style={{ width: "91%" }} />
</Box> </Box>
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}> <Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
<Typography variant="h4">Mine from nature</Typography> <Typography variant="h4">Mine from nature</Typography>
@ -153,10 +156,10 @@ const HomePage: React.FC = () => {
</Box> </Box>
</Box> </Box>
</Grid> </Grid>
<Grid item xs={6} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', md:'none', sm: 'block' , lg:'block' } }}></Grid> <Grid item xs={6} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', md: 'none', sm: 'block', lg: 'block' } }}></Grid>
{/* ROW 2 */} {/* ROW 2 */}
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' , md:'none',lg:'block' } }}></Grid> <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block', md: 'none', lg: 'block' } }}></Grid>
<Grid item xs={12} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px', }, display: "flex", justifyContent: { lg: "flex-start", xs: "center" }, alignItems: "center" }}> <Grid item xs={12} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px', }, display: "flex", justifyContent: { lg: "flex-start", xs: "center" }, alignItems: "center" }}>
<Box ref={manufactureRef} sx={{ <Box ref={manufactureRef} sx={{
height: { xs: "472px", lg: "215px" }, height: { xs: "472px", lg: "215px" },
@ -174,7 +177,7 @@ const HomePage: React.FC = () => {
<Typography variant="h4">Manufacturing</Typography> <Typography variant="h4">Manufacturing</Typography>
<p>Materials are processed in energy-intensive factories that rely on fossil fuels, generating high carbon emissions </p> <p>Materials are processed in energy-intensive factories that rely on fossil fuels, generating high carbon emissions </p>
</Box> </Box>
<Box sx={{ width: { lg: '50%' } }}> <Box sx={{ width: { lg: '50%' , md:'67%' } }}>
<img src={giftwo} alt="Gif" style={{ width: "100%" }} /> <img src={giftwo} alt="Gif" style={{ width: "100%" }} />
</Box> </Box>
@ -187,7 +190,7 @@ const HomePage: React.FC = () => {
display: "flex", justifyContent: { lg: 'flex-end', xs: 'center' }, alignItems: "center" display: "flex", justifyContent: { lg: 'flex-end', xs: 'center' }, alignItems: "center"
}}> }}>
<Box ref={assembleRef} sx={{ <Box ref={assembleRef} sx={{
height: { xs: "332px", lg: "215px", sm: '500px' }, height: { xs: "332px", lg: "215px", sm: '500px' , md:'500px' },
width: { xs: "80%", lg: "595px" }, width: { xs: "80%", lg: "595px" },
zIndex: 1, zIndex: 1,
display: "flex", display: "flex",
@ -199,7 +202,7 @@ const HomePage: React.FC = () => {
marginBottom: { xs: "20px", md: "0" }, marginBottom: { xs: "20px", md: "0" },
}}> }}>
<Box sx={{ width: { xs: "60%", md: "100%" } }}> <Box sx={{ width: { xs: "60%", md:'70%' } }}>
<img src={gifthree} alt="Gif" style={{ width: "100%" }} /> <img src={gifthree} alt="Gif" style={{ width: "100%" }} />
</Box> </Box>
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}> <Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
@ -209,10 +212,10 @@ const HomePage: React.FC = () => {
</Box> </Box>
</Grid> </Grid>
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block',md:'none' ,lg:'block'} }}></Grid> <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block', md: 'none', lg: 'block' } }}></Grid>
{/* ROW 4 */} {/* ROW 4 */}
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block', md:'none',lg:'block' } }}></Grid> <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block', md: 'none', lg: 'block' } }}></Grid>
<Grid item xs={12} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: "flex", justifyContent: { lg: 'flex-start', xs: 'center' }, alignItems: "center" }}> <Grid item xs={12} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: "flex", justifyContent: { lg: 'flex-start', xs: 'center' }, alignItems: "center" }}>
<Box ref={useRefBox} sx={{ <Box ref={useRefBox} sx={{
height: { xs: "451px", lg: "215px", sm: '555px' }, height: { xs: "451px", lg: "215px", sm: '555px' },
@ -231,14 +234,14 @@ const HomePage: React.FC = () => {
<p>Devices are used by consumers and businesses, but their production and usage contribute significantly to carbon footprints, energy consumption, and waste generation.</p> <p>Devices are used by consumers and businesses, but their production and usage contribute significantly to carbon footprints, energy consumption, and waste generation.</p>
</Box> </Box>
<Box sx={{ width: { xs: "60%", md: "100%" } }}> <Box sx={{ width: { xs: "60%",md:'70%' } }}>
<img src={giffour} alt="Gif" style={{ width: "100%" }} /> <img src={giffour} alt="Gif" style={{ width: "100%" }} />
</Box> </Box>
</Box> </Box>
</Grid> </Grid>
{/* new2 */} {/* new2 */}
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block',lg:'block' } }}></Grid> <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block', lg: 'block' } }}></Grid>
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid> <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid>
@ -352,10 +355,17 @@ const HomePage: React.FC = () => {
</Box> </Box>
</Grid> </Grid>
{/* mobile only */} {/* mobile only */}
<Grid container spacing={2} rowSpacing={{ xs: 12, sm: 14, md: 34 }} sx={{ display: { xs: "flex", md: "flex" , lg:'none' } }}> <Grid container spacing={2} rowSpacing={{ xs: 12, sm: 26, md: 40 }}
sx={{
display: { xs: "flex", md: "flex", lg: 'none' },
backgroundImage: { lg: null, xs: `url(${mobileback})` },
backgroundSize: "contain",
backgroundPosition: { xs: "50% 60%", md:'50% 63%' },
backgroundRepeat: "no-repeat",
}}>
{/* Reuse */} {/* Reuse */}
<Grid item xs={6}> <Grid item xs={6}>
<Box sx={{ p: 2, textAlign:{xs: "left" , md:'center'}, borderRadius: 2 }}> <Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}>
<Box sx={{ background: "#95CD41", p: 1 }}> <Box sx={{ background: "#95CD41", p: 1 }}>
<Typography variant="h4">Reuse</Typography> <Typography variant="h4">Reuse</Typography>
<Typography variant="body2"> <Typography variant="body2">
@ -370,14 +380,14 @@ const HomePage: React.FC = () => {
{/* Repair */} {/* Repair */}
<Grid item xs={6}> <Grid item xs={6}>
<Box sx={{ p: 2, textAlign:{xs: "left" , md:'center'}, borderRadius: 2 }}> <Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}>
<Box sx={{ background: "#95CD41", p: 1 }}> <Box sx={{ background: "#95CD41", p: 1 }}>
<Typography variant="h4">Repair</Typography> <Typography variant="h4">Repair</Typography>
<Typography variant="body2"> <Typography variant="body2">
Loop Sustainability steps in to repair damaged or outdated electronics. Loop Sustainability steps in to repair damaged or outdated electronics.
Our repair services extend the life of devices, minimizing waste and Our repair services extend the life of devices, minimizing waste and
reducing the need for new products. reducing the need for new products.
</Typography> </Typography>
</Box> </Box>
<Box sx={{ width: "100%" }}> <Box sx={{ width: "100%" }}>
<img src={giffive} alt="Repair Gif" style={{ width: "100%" }} /> <img src={giffive} alt="Repair Gif" style={{ width: "100%" }} />
@ -387,27 +397,27 @@ const HomePage: React.FC = () => {
{/* Disintegrate (Added Extra Margin to Separate from Top Row) */} {/* Disintegrate (Added Extra Margin to Separate from Top Row) */}
<Grid item xs={6} sx={{ mt: 2 }}> <Grid item xs={6} sx={{ mt: 2 }}>
<Box sx={{ p: 2, textAlign:{xs: "left" , md:'center'}, borderRadius: 2 }}> <Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}>
<Box sx={{ width: "100%" }}> <Box sx={{ width: "100%" }}>
<img src={gifseven} alt="Disintegrate Gif" style={{ width: "100%" }} /> <img src={gifseven} alt="Disintegrate Gif" style={{ width: "100%" }} />
</Box> </Box>
<Box sx={{ background: "#95CD41", p: 1 }}> <Box sx={{ background: "#95CD41", p: 1 }}>
<Typography variant="h4" sx={{fontSize:"1.6rem"}}>Disintegrate</Typography> <Typography variant="h4" sx={{ fontSize: "1.3rem" }}>Disintegrate</Typography>
<Typography variant="body2" >When electronics can no longer be repaired or reused, we safely disintegrate them into valuable materials, ensuring they are properly processed and recycled.</Typography> <Typography variant="body2" >When electronics can no longer be repaired or reused, we safely disintegrate them into valuable materials, ensuring they are properly processed and recycled.</Typography>
</Box> </Box>
</Box> </Box>
</Grid> </Grid>
{/* Remine */} {/* Remine */}
<Grid item xs={6} sx={{ mt: 2 } }> <Grid item xs={6} sx={{ mt: 2 }}>
<Box sx={{ p: 2,textAlign:{xs: "left" , md:'center'}, borderRadius: 2 }}> <Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}>
<Box sx={{ width: "100%" }}> <Box sx={{ width: "100%" }}>
<img src={gifeight} alt="Remine Gif" style={{ width: "100%" }} /> <img src={gifeight} alt="Remine Gif" style={{ width: "100%" }} />
</Box> </Box>
<Box sx={{ background: "#95CD41", p: 1, textAlign:{xs: "left" , md:'center'}, }}> <Box sx={{ background: "#95CD41", p: 1, textAlign: { xs: "left", md: 'center' }, }}>
<Typography variant="h4" sx={{fontSize:'1.6rem'}}>Remine</Typography> <Typography variant="h4" sx={{ fontSize: '1.6rem' }}>Remine</Typography>
<Typography variant="body2" >We take the disintegrated materials and remines them for precious metals ,turning waste back into usable resources .closing the loop on electronic waste.</Typography> <Typography variant="body2" >We take the disintegrated materials and remines them for precious metals ,turning waste back into usable resources .closing the loop on electronic waste.</Typography>
</Box> </Box>
</Box> </Box>
</Grid> </Grid>
@ -419,7 +429,6 @@ const HomePage: React.FC = () => {
<Grid <Grid
container container
xs={12} xs={12}
sx={{ sx={{
height: "660px", height: "660px",
marginTop: { lg: 20, xs: 0 }, marginTop: { lg: 20, xs: 0 },
@ -430,7 +439,7 @@ const HomePage: React.FC = () => {
}} }}
> >
<img <img
src={wasteimage} src={ wasteimage} // Different image for mobile
alt="Waste Image" alt="Waste Image"
style={{ style={{
width: "100%", width: "100%",
@ -439,7 +448,7 @@ const HomePage: React.FC = () => {
}} }}
/> />
</Grid> </Grid>
<WhyChooseUs/> <WhyChooseUs />
<OurTeam /> <OurTeam />
<Footer /> <Footer />

BIN
src/components/imageandgif/Soil & Water Contamination mob.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 156 KiB