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

Merge pull request 'fixed alignment issue of Box and img components' (#9) from fix/layout into main
continuous-integration/drone/push Build is passing Details 

Reviewed-on: #9
This commit is contained in:
Mihir Motiyani 2025-02-14 12:38:13 +05:30
parent a66cad5fda 247b384ced
commit 5b71630412
2 changed files with 48 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
src/components/homepage.tsx
View File

@ -19,7 +19,7 @@ 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"
@ -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,7 +380,7 @@ 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">
@ -387,12 +397,12 @@ 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>
@ -400,13 +410,13 @@ const HomePage: React.FC = () => {
</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>
@ -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