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

feature/new_ui #32

Merged
mihir merged 3 commits from feature/new_ui into main 2025-04-01 09:03:14 +05:30
Conversation 0 Commits 3 Files Changed 15 +26 -127
7 changed files with 26 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 50c342f763 - Show all commits

BIN
public/Loop hero 29_04.mp4 Normal file
View File

Binary file not shown.

153
src/components/homepage.tsx
View File

@ -21,12 +21,12 @@ import OurTeam from "./ourteam";
import mobileback from "../components/imageandgif/mobileback.png"
// import { useMediaQuery, useTheme } from "@mui/material";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import newbackground from "../components/imageandgif/full.png"
import newbackground from "../components/imageandgif/loopcentrelaptop.png"
// import sustainability from "../components/imageandgif/Untitled-2.png"
// import wasteimage from "../components/imageandgif/loopwastemanage.png"
import WhyChooseUs from "./whyus";
import WasteImageSection from "./wastemanagement";
import loopgif from "../components/imageandgif/Loopherosectionmobiless.gif"
import loopgif from "../components/imageandgif/Loop hero 29_04 (2).gif"
// import gifsevenm from "../components/imageandgif/disintegrate mobile (2).gif";
// import gifeightm from "../components/imageandgif/reminemobile.gif";
// import giffivem from "../components/imageandgif/repairm.gif";
@ -107,7 +107,7 @@ const HomePage: React.FC = () => {
width: { lg: "100vw" },
backgroundColor: "white",
position: "relative",
paddingTop: { xs: '50px', lg: '5px' , md:'10px' },
paddingTop: { xs: '50px', lg: '5px', md: '10px' },
marginBottom: { xs: "10px", md: "39px", lg: '30px' },
}}
>
@ -177,145 +177,44 @@ const HomePage: React.FC = () => {
</Typography>
</Box>
</Grid>
</Grid>
</Grid >
{/* Grid 2 */}
<Box sx={{ width: '100%', height: 'auto', textAlign: 'center', mb: 20, mt: 20 }}>
<Grid container justifyContent="center">
<Grid item lg={10} xs={12} md={10}>
<Typography variant="h4" fontWeight="bold" gutterBottom textAlign="left">
The Process
</Typography>
<Typography variant="body1" sx={{ fontSize: { xs: '14px', md: '18px' }, textAlign: 'left' }}>
Raw materials are extracted through destructive mining practices, causing habitat loss, soil erosion, and water contamination.
Components are assembled into finished products in factories, further increasing emissions and producing hazardous waste that is hard to dispose of.
Devices are used by consumers and businesses, but their production and usage contribute significantly to carbon footprints, energy consumption, and waste generation.
</Typography>
<Typography variant="h2" fontWeight="bold" color="green" sx={{ mt: 9,mb:10, textAlign: "left" }}>
This is where we come in.
</Typography>
</Grid>
</Grid>
</Box>
<Box
sx={{
height: { xl: 1800, lg: 2000, xs: 2719, sm: 3740, md: 2350 },
height: { xl: 1800, lg: 700 },
width: '100%',
backgroundImage: { lg: `url(${newbackground})`, xs: null },
backgroundSize: "contain",
backgroundPosition: { lg: "center" },
backgroundImage: `url(${newbackground})`,
backgroundSize: "261px 220px",
backgroundPosition: "638px 290px",
backgroundRepeat: "no-repeat",
paddingBottom: { lg: 20, xs: 0 }
}}
>
<Grid
container
sx={{
width: '100%',
}}
>
{/* <Grid item xs={12} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '358px' }, display: "flex", justifyContent: "center", alignItems: "center" }}>
<Box ref={mineRef} sx={{
height: { xs: "70%", lg: "215px" },
width: { xs: "83%", lg: "870px" },
zIndex: 1,
display: "flex",
flexDirection: { xs: "column", lg: "row" },
justifyContent: "center",
alignItems: "center",
padding: "10px",
textAlign: 'center',
marginBottom: { xs: "20px", md: "0" },
}}>
<Box sx={{ width: { xs: "60%", md: "70%" } }}>
<img
src={gifone}
alt="Gif"
style={{ width: "91%" }}
/>
</Box>
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
<Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Mine from nature</Typography>
<Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }} >Raw materials are extracted through destructive mining practices, causing habitat loss, soil erosion, and water contamination. </Typography>
</Box>
</Box>
</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 */}
{/* <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" }}>
<Box ref={manufactureRef} sx={{
height: { xs: "472px", lg: "215px" },
width: { xs: "80%", lg: "552px" },
zIndex: 1,
display: "flex",
flexDirection: { xs: "column-reverse", lg: "row" },
justifyContent: "center",
alignItems: "center",
padding: "10px",
textAlign: 'center',
marginBottom: { xs: "20px", md: "0" },
}}>
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
<Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Manufacturing</Typography>
<Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }}>Materials are processed in energy-intensive factories that rely on fossil fuels, generating high carbon emissions </Typography>
</Box>
<Box sx={{ width: { lg: '50%', md: '67%' } }}>
<img src={giftwo} alt="Gif" style={{ width: "100%" }} />
</Box>
</Box>
</Grid> */}
{/* ROW 3 */}
{/* <Grid item xs={12} lg={6} md={6} sx={{
background: '#ffffff00', height: { xl: "500px", lg: '378px' },
display: "flex", justifyContent: { lg: 'flex-end', xs: 'center' }, alignItems: "center"
}}>
<Box ref={assembleRef} sx={{
height: { xs: "332px", lg: "215px", sm: '500px', md: '500px' },
width: { xs: "80%", lg: "595px" },
zIndex: 1,
display: "flex",
flexDirection: { xs: "column", lg: "row" },
justifyContent: "center",
alignItems: "center",
padding: "10px",
textAlign: 'center',
marginBottom: { xs: "20px", md: "0" },
}}>
<Box sx={{ width: { xs: "60%", md: '70%' } }}>
<img src={gifthree} alt="Gif" style={{ width: "100%" }} />
</Box>
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
<Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Assemble</Typography>
<Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }}>Components are assembled into finished products in factories, further increasing emissions and producing hazardous waste that is hard to dispose. </Typography>
</Box>
</Box>
</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 */}
{/* <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" }}>
<Box ref={useRefBox} sx={{
height: { xs: "451px", lg: "215px", sm: '555px' },
width: { xs: "80%", lg: "550px" },
zIndex: 1,
display: "flex",
flexDirection: { xs: "column-reverse", lg: "row" },
justifyContent: "center",
alignItems: "center",
padding: "10px",
textAlign: 'center',
marginBottom: { xs: "20px", md: "0" },
}}>
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
<Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Use</Typography>
<Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }}>Devices are used by consumers and businesses, but their production and usage contribute significantly to carbon footprints, energy consumption, and waste generation.</Typography>
</Box>
<Box sx={{ width: { xs: "60%", md: '70%' } }}>
<img src={giffour} alt="Gif" style={{ width: "100%" }} />
</Box>
</Box>
</Grid> */}
{/* 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' } }}></Grid> */}
{/* newnew */}
{/* desktop view */}
{/* Reuse Section */}
<Grid item xs={5} sm={6} lg={6}
sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px', xs: '378px' }, display: { lg: 'flex', xs: 'none' }, justifyContent: "center", alignItems: "center" }}>
<Box ref={reuseRef}

BIN
src/components/imageandgif/Loop hero 29_04 (2).gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 MiB

BIN
src/components/imageandgif/Loop hero 29_04-VEED.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 826 KiB

BIN
src/components/imageandgif/Loop hero 29_04.mp4 Normal file
View File

Binary file not shown.

BIN
src/components/imageandgif/Loop-hero-29-04-unscreen.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 MiB

BIN
src/components/imageandgif/loopcentrelaptop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB