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

fix/layout #5

Merged
mihir merged 2 commits from fix/layout into main 2025-02-14 00:09:38 +05:30
Conversation 0 Commits 2 Files Changed 3 +193 -65
3 changed files with 193 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/header.tsx
View File

@ -26,7 +26,8 @@ const Header: React.FC = () => {
lg: "96.8vw", lg: "96.8vw",
xl: "96.4vw" xl: "96.4vw"
}, },
color: "black" color: "black",
zIndex:11111
}} }}
> >
<Toolbar sx={{ display: "flex", justifyContent: "space-between" }}> <Toolbar sx={{ display: "flex", justifyContent: "space-between" }}>
@ -35,7 +36,7 @@ const Header: React.FC = () => {
<img <img
src={headerlogo} src={headerlogo}
alt="Logo" alt="Logo"
style={{ height: "40px", cursor: "pointer", width:'159px' }} style={{ height: "50px", cursor: "pointer", width:'159px' }}
/> />
</Box> </Box>

200
src/components/homepage.tsx
View File

@ -24,6 +24,7 @@ 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"
import WhyChooseUs from "./whyus";
@ -67,7 +68,7 @@ const HomePage: React.FC = () => {
return ( return (
<ThemeProvider theme={theme}> <ThemeProvider theme={theme}>
<Box> <Box>
<Grid container sx={{ position: "relative", marginTop: '119px' }}> <Grid container sx={{ position: "relative", marginTop: {lg :'119px' , xs:'65px'} }}>
{/* Grid 1 */} {/* Grid 1 */}
<Grid <Grid
item item
@ -100,7 +101,7 @@ const HomePage: React.FC = () => {
p: 3, p: 3,
borderRadius: "12px", borderRadius: "12px",
backgroundColor: "#7c77770d", backgroundColor: "#7c77770d",
textAlign: "left", textAlign: "center",
}} }}
> >
@ -112,17 +113,18 @@ const HomePage: React.FC = () => {
{/* Grid 2 */} {/* Grid 2 */}
<Box <Box
sx={{ sx={{
height: { xl: 1800, lg: 2000, xs: 2830, sm: 3580 }, height: { xl: 1800, lg: 2000, xs: 2770, sm: 3580 },
width: '100%', width: '100%',
backgroundImage: { lg: `url(${newbackground})`, xs: `url(${mobileback})` }, backgroundImage: { lg: `url(${newbackground})`, xs: `url(${mobileback})` },
backgroundSize: "contain", backgroundSize: "contain",
backgroundPosition: { lg: "center", xs: "50% 87%" }, backgroundPosition: { lg: "center", xs: "50% 86%" },
backgroundRepeat: "no-repeat", backgroundRepeat: "no-repeat",
paddingBottom: { lg: 20, xs: 0 } paddingBottom: { lg: 20, xs: 0 }
}} }}
> >
<Grid <Grid
container container
sx={{ sx={{
width: '100%', width: '100%',
@ -131,7 +133,7 @@ const HomePage: React.FC = () => {
{/* ROW 1 */} {/* ROW 1 */}
<Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '328px' }, display: "flex", justifyContent: "center", alignItems: "center" }}> <Grid item xs={12} lg={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: "495px", lg: "215px" }, height: { xs: "70%", lg: "215px" },
width: { xs: "80%", lg: "870px" }, width: { xs: "80%", lg: "870px" },
zIndex: 1, zIndex: 1,
display: "flex", display: "flex",
@ -155,7 +157,7 @@ const HomePage: React.FC = () => {
{/* ROW 2 */} {/* ROW 2 */}
<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>
<Grid item xs={12} lg={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} 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" },
width: { xs: "80%", lg: "552px" }, width: { xs: "80%", lg: "552px" },
@ -180,10 +182,12 @@ const HomePage: React.FC = () => {
</Grid> </Grid>
{/* ROW 3 */} {/* ROW 3 */}
<Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '401px' }, <Grid item xs={12} lg={6} sx={{
display: "flex", justifyContent: { lg: 'flex-end', xs: 'center' }, alignItems: "center" }}> background: '#ffffff00', height: { xl: "500px", lg: '401px' },
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' },
width: { xs: "80%", lg: "595px" }, width: { xs: "80%", lg: "595px" },
zIndex: 1, zIndex: 1,
display: "flex", display: "flex",
@ -211,7 +215,7 @@ const HomePage: React.FC = () => {
<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>
<Grid item xs={12} lg={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} 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: "332px", lg: "215px" ,sm:'555px' }, height: { xs: "451px", lg: "215px", sm: '555px' },
width: { xs: "80%", lg: "550px" }, width: { xs: "80%", lg: "550px" },
zIndex: 1, zIndex: 1,
display: "flex", display: "flex",
@ -226,11 +230,12 @@ const HomePage: React.FC = () => {
<Typography variant="h4">Use</Typography> <Typography variant="h4">Use</Typography>
<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: "100%" } }}>
<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' } }}></Grid> <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid>
@ -238,45 +243,48 @@ const HomePage: React.FC = () => {
<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>
{/* newnew */} {/* newnew */}
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' , sm:"center" }, alignItems: "center" }}> {/* desktop view */}
<Box ref={reuseRef} > {/* Reuse Section */}
<Box <Grid item xs={5} sm={6} lg={6}
sx={{ sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px', xs: '378px' }, display: { lg: 'flex', xs: 'none' }, justifyContent: "center", alignItems: "center" }}>
width: { xs: "90%", lg: "350px" }, // Set fixed width <Box ref={reuseRef}
height: { xs: "241px", lg: "180px" }, // Set fixed height sx={{
paddingLeft: { xs: "10px", md: "10px" }, width: { xs: "90%", lg: "350px" },
paddingRight: { xs: "2px" }, height: { xs: "340px", lg: "240px" },
textAlign: { lg: "left", xs: "left" }, textAlign: "left",
backgroundColor: { xs: "#95CD41", lg: "white" }, display: "flex",
display: "flex", flexDirection: "column",
flexDirection: "column", justifyContent: "center",
justifyContent: "center", alignItems: "center",
}} margin: { xs: 1 }
> }}>
<Box sx={{ width: "100%", textAlign: "left", background: { xs: '#95CD41', lg: 'white' }, p: 2 }}>
<Typography variant="h4">Reuse</Typography> <Typography variant="h4">Reuse</Typography>
<Typography variant="body2" >We help businesses reuse their old electronic devices, repurposing functional parts and components for future use or resale, reducing overall environmental impact.</Typography> <Typography variant="body2">
We help businesses reuse their old electronic devices, repurposing functional parts and components for future use or resale, reducing overall environmental impact.
</Typography>
</Box> </Box>
<Box sx={{ width: { xs: "100%", md: "100%" } }}> <Box sx={{ width: "100%", maxWidth: "300px", mt: 2 }}>
<img src={gifsix} alt="Gif" style={{ width: "100%" }} /> <img src={gifsix} alt="Gif" style={{ width: "100%" }} />
</Box> </Box>
</Box> </Box>
</Grid> </Grid>
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}>
<Box ref={reuseRef} > {/* Repair Section */}
<Box <Grid item xs={5} sm={6} lg={6}
sx={{ sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px', xs: '378px' }, display: { lg: 'flex', xs: 'none' }, justifyContent: "center", alignItems: "center" }}>
width: { xs: "90%", lg: "350px" }, // Set fixed width <Box ref={reuseRef}
height: { xs: "241px", lg: "180px" }, // Set fixed height sx={{
paddingLeft: { xs: "10px", md: "10px" }, width: { xs: "90%", lg: "350px" },
paddingRight: { xs: "2px" }, height: { xs: "340px", lg: "240px" },
textAlign: { lg: "left", xs: "left" }, textAlign: "left",
backgroundColor: { xs: "#95CD41", lg: "white" }, display: "flex",
display: "flex", flexDirection: "column",
flexDirection: "column", justifyContent: "center",
justifyContent: "center", alignItems: "center",
}} margin: { xs: 1 }
> }}>
<Box sx={{ width: "100%", textAlign: "left", background: { xs: '#95CD41', lg: 'white' }, p: 2 }}>
<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.
@ -284,28 +292,29 @@ const HomePage: React.FC = () => {
reducing the need for new products. reducing the need for new products.
</Typography> </Typography>
</Box> </Box>
<Box sx={{ width: "100%", maxWidth: "300px", mt: 2 }}>
<Box sx={{ width: { xs: "100%", md: "100%" } }}>
<img src={giffive} alt="Gif" style={{ width: "100%" }} /> <img src={giffive} alt="Gif" style={{ width: "100%" }} />
</Box> </Box>
</Box> </Box>
</Grid> </Grid>
{/* newnewnwe */} {/* newnewnwe */}
<Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px', xs: '800px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}> <Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px', xs: '363px' }, display: { lg: 'flex', xs: 'none' }, justifyContent: { lg: 'center' }, alignItems: "center" }}>
<Box ref={disintegrateRef} sx={{ <Box ref={disintegrateRef}
height: { xs: "332px", lg: "115px" }, sx={{
width: { xs: "92%", lg: "250px" }, height: { xs: "332px", lg: "115px" },
zIndex: 1, width: { xs: "92%", lg: "250px" },
display: "flex", zIndex: 1,
flexDirection: { xs: "column", lg: "column" }, display: "flex",
justifyContent: "center", flexDirection: { xs: "column", lg: "column" },
alignItems: "center", justifyContent: "center",
padding: "10px", alignItems: "center",
textAlign: 'left', padding: "10px",
marginBottom: { xs: "20px", md: "0" }, textAlign: 'left',
marginTop: { xs: "20px" }, marginBottom: { xs: "20px", md: "0" },
}}> marginTop: { xs: "20px" },
}}>
<Box sx={{ width: { xs: "60%", md: "100%" } }}> <Box sx={{ width: { xs: "60%", md: "100%" } }}>
<img src={gifseven} alt="Gif" style={{ width: "100%" }} /> <img src={gifseven} alt="Gif" style={{ width: "100%" }} />
</Box> </Box>
@ -317,7 +326,7 @@ const HomePage: React.FC = () => {
</Box> </Box>
</Grid> </Grid>
<Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}> <Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px', xs: '363px' }, display: { lg: 'flex', xs: 'none' }, justifyContent: { lg: 'center' }, alignItems: "center" }}>
<Box ref={remineRef} sx={{ <Box ref={remineRef} sx={{
height: { xs: "332px", lg: "115px" }, height: { xs: "332px", lg: "115px" },
width: { xs: "92%", lg: "250px" }, width: { xs: "92%", lg: "250px" },
@ -342,6 +351,68 @@ const HomePage: React.FC = () => {
</Box> </Box>
</Grid> </Grid>
{/* mobile only */}
<Grid container spacing={2} rowSpacing={12} sx={{ display: { xs: "flex", md: "none" } }}>
{/* Reuse */}
<Grid item xs={6}>
<Box sx={{ p: 2, textAlign: "left", borderRadius: 2 }}>
<Box sx={{ background: "#95CD41", p: 1 }}>
<Typography variant="h4">Reuse</Typography>
<Typography variant="body2">
We help businesses reuse their old electronic devices, repurposing functional parts and components for future use or resale, reducing overall environmental impact.
</Typography>
</Box>
<Box sx={{ width: "100%" }}>
<img src={gifsix} alt="Reuse Gif" style={{ width: "100%" }} />
</Box>
</Box>
</Grid>
{/* Repair */}
<Grid item xs={6}>
<Box sx={{ p: 2, textAlign: "left", borderRadius: 2 }}>
<Box sx={{ background: "#95CD41", p: 1 }}>
<Typography variant="h4">Repair</Typography>
<Typography variant="body2">
Loop Sustainability steps in to repair damaged or outdated electronics.
Our repair services extend the life of devices, minimizing waste and
reducing the need for new products.
</Typography>
</Box>
<Box sx={{ width: "100%" }}>
<img src={giffive} alt="Repair Gif" style={{ width: "100%" }} />
</Box>
</Box>
</Grid>
{/* Disintegrate (Added Extra Margin to Separate from Top Row) */}
<Grid item xs={6} sx={{ mt: 2 }}>
<Box sx={{ p: 2, textAlign: "left", borderRadius: 2 }}>
<Box sx={{ width: "100%" }}>
<img src={gifseven} alt="Disintegrate Gif" style={{ width: "100%" }} />
</Box>
<Box sx={{ background: "#95CD41", p: 1 }}>
<Typography variant="h4" sx={{fontSize:"1.6rem"}}>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>
</Box>
</Box>
</Grid>
{/* Remine */}
<Grid item xs={6} sx={{ mt: 2 } }>
<Box sx={{ p: 2, textAlign: "center", borderRadius: 2 }}>
<Box sx={{ width: "100%" }}>
<img src={gifeight} alt="Remine Gif" style={{ width: "100%" }} />
</Box>
<Box sx={{ background: "#95CD41", p: 1 ,textAlign:'left' }}>
<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>
</Box>
</Box>
</Grid>
</Grid>
</Grid> </Grid>
</Box> </Box>
@ -350,7 +421,7 @@ const HomePage: React.FC = () => {
xs={12} xs={12}
sx={{ sx={{
height: "66 0px", height: "660px",
marginTop: { lg: 20, xs: 0 }, marginTop: { lg: 20, xs: 0 },
display: "flex", display: "flex",
justifyContent: "center", justifyContent: "center",
@ -368,8 +439,11 @@ const HomePage: React.FC = () => {
}} }}
/> />
</Grid> </Grid>
<WhyChooseUs/>
<OurTeam /> <OurTeam />
<Footer /> <Footer />
</Box> </Box>
</ThemeProvider> </ThemeProvider>
); );

53
src/components/whyus.tsx Normal file
View File

@ -0,0 +1,53 @@
import React from "react";
import { Box, Grid, Typography } from "@mui/material";
import { styled } from "@mui/system";
const Circle = styled(Box)(({ theme }) => ({
width: 150, // Increased size
height: 150,
borderRadius: "50%",
display: "flex",
alignItems: "center",
justifyContent: "center",
border: "5px solid",
transition: "0.3s",
[theme.breakpoints.down("sm")]: {
width: 120, // Adjusting for mobile
height: 120,
},
}));
const items = [
{ text: "Partnerships", color: "#E3C34D" },
{ text: "Technology", color: "#90B5D4" },
{ text: "Professionalism", color: "#A2C08A" },
{ text: "Transparency", color: "#EDEAE3" },
];
const WhyChooseUs: React.FC = () => {
return (
<Box sx={{ textAlign: "center", mt: 5 }}>
<Typography variant="h5" fontWeight="bold" mb={3}>
Why Choose Us?
</Typography>
<Grid
container
spacing={1}
justifyContent="center"
alignItems="center"
>
{items.map((item, index) => (
<Grid item key={index} xs={6} sm={2} display="flex" justifyContent="center">
<Circle sx={{ borderColor: item.color }}>
<Typography variant="body1" fontWeight="500">
{item.text}
</Typography>
</Circle>
</Grid>
))}
</Grid>
</Box>
);
};
export default WhyChooseUs;