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

Compare commits

base: internal:a5b1d1cde706166f09becba19f6142458b947218
Branches Tags
internal:main
..
compare: internal:349e73b7fd15925413d37accbe341d9108c4dfb4
Branches Tags
internal:main

No commits in common. "a5b1d1cde706166f09becba19f6142458b947218" and "349e73b7fd15925413d37accbe341d9108c4dfb4" have entirely different histories.
a5b1d1cde7 ... 349e73b7fd

9 changed files with 136 additions and 66 deletions
Show Stats Expand all files Collapse all files

BIN
public/Loop hero 29_04.mp4
View File

Binary file not shown.

197
src/components/homepage.tsx
View File

@ -18,15 +18,15 @@ import Footer from "./footer";
// import loopgreenback from "../components/imageandgif/lsbg.png" // import loopgreenback from "../components/imageandgif/lsbg.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 { useMediaQuery, useTheme } from "@mui/material";
import { createTheme, ThemeProvider } from "@mui/material/styles"; import { createTheme, ThemeProvider } from "@mui/material/styles";
import newbackground from "../components/imageandgif/loopcentrelaptop.png" import newbackground from "../components/imageandgif/full.png"
// import sustainability from "../components/imageandgif/Untitled-2.png" // import sustainability from "../components/imageandgif/Untitled-2.png"
// import wasteimage from "../components/imageandgif/loopwastemanage.png" // import wasteimage from "../components/imageandgif/loopwastemanage.png"
import WhyChooseUs from "./whyus"; import WhyChooseUs from "./whyus";
import WasteImageSection from "./wastemanagement"; import WasteImageSection from "./wastemanagement";
import loopgif from "../components/imageandgif/Loop hero 29_04 (2).gif" import loopgif from "../components/imageandgif/Loopherosectionmobiless.gif"
// import gifsevenm from "../components/imageandgif/disintegrate mobile (2).gif"; // import gifsevenm from "../components/imageandgif/disintegrate mobile (2).gif";
// import gifeightm from "../components/imageandgif/reminemobile.gif"; // import gifeightm from "../components/imageandgif/reminemobile.gif";
// import giffivem from "../components/imageandgif/repairm.gif"; // import giffivem from "../components/imageandgif/repairm.gif";
@ -107,7 +107,7 @@ const HomePage: React.FC = () => {
width: { lg: "100vw" }, width: { lg: "100vw" },
backgroundColor: "white", backgroundColor: "white",
position: "relative", position: "relative",
paddingTop: { xs: '50px', lg: '5px', md: '10px' }, paddingTop: { xs: '50px', lg: '5px' , md:'10px' },
marginBottom: { xs: "10px", md: "39px", lg: '30px' }, marginBottom: { xs: "10px", md: "39px", lg: '30px' },
}} }}
> >
@ -177,74 +177,145 @@ const HomePage: React.FC = () => {
</Typography> </Typography>
</Box> </Box>
</Grid> </Grid>
</Grid > </Grid>
{/* Grid 2 */} {/* Grid 2 */}
<Box sx={{ width: '100%', height: 'auto', textAlign: 'center', mb: { xs: 5, md: 5 }, mt: { xs: 5, md: 5 } }}>
<Grid container justifyContent="center">
<Grid item lg={10} xs={10} md={10}>
<Typography
variant="h4"
sx={{
fontSize: { xs: '28px', md: '36px', lg: '42px' },
textAlign: "left",
fontFamily: "Helvetica Neue, Arial, sans-serif",
fontWeight: "bold"
}}
gutterBottom
>
The Process
</Typography>
<Typography
variant="body1"
sx={{
fontSize: { xs: '14px', md: '18px', lg: '20px' },
textAlign: 'left',
fontFamily: "SF Pro Regular, Arial, sans-serif",
lineHeight: { xs: '1.4', md: '1.6' }
}}
>
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"
sx={{
mt: { xs: 5, md: 9 },
mb: { xs: 5, md: 10 },
textAlign: "left",
fontFamily: "SF Pro Regular, Arial, sans-serif",
fontSize: { xs: '32px', md: '48px', lg: '64px' },
color: "#95CD41",
fontWeight: "bold"
}}
>
This is where we come in.
</Typography>
</Grid>
</Grid>
</Box>
<Box <Box
sx={{ sx={{
height: { xl: 800, lg: 700 }, height: { xl: 1800, lg: 2000, xs: 2719, sm: 3740, md: 2350 },
width: '100%', width: '100%',
backgroundImage: { xs: 'none', lg: `url(${newbackground})` }, backgroundImage: { lg: `url(${newbackground})`, xs: null },
backgroundSize: "261px 220px", backgroundSize: "contain",
// backgroundPosition: "638px 290px", backgroundPosition: { lg: "center" },
background : 'center',
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%',
}} }}
> >
{/* <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} <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" }}> sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px', xs: '378px' }, display: { lg: 'flex', xs: 'none' }, justifyContent: "center", alignItems: "center" }}>
<Box ref={reuseRef} <Box ref={reuseRef}
@ -355,15 +426,15 @@ const HomePage: React.FC = () => {
<Grid container spacing={2} rowSpacing={{ xs: 9, sm: 36, md: 16 }} <Grid container spacing={2} rowSpacing={{ xs: 9, sm: 36, md: 16 }}
sx={{ sx={{
display: { xs: "flex", md: "flex", lg: 'none' }, display: { xs: "flex", md: "flex", lg: 'none' },
backgroundImage: { lg: null, xs: `url(${newbackground})` }, backgroundImage: { lg: null, xs: `url(${mobileback})` },
backgroundSize: { xs: "30%", md: "22%", sm: '50%' }, backgroundSize: { xs: "60%", md: "40%", sm: '70%' },
backgroundPosition: { xs: "50% 54%", md: '50% 52%' }, backgroundPosition: { xs: "50% 54%", md: '50% 52%' },
backgroundRepeat: "no-repeat", 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={{ p: 1, height: { xs: 172, sm: 138, md: 118 }, maxHeight: 270 }}> <Box sx={{ background: "#95CD41", p: 1, height: { xs: 172, sm: 138, md: 118 }, maxHeight: 270 }}>
<Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Reuse</Typography> <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Reuse</Typography>
<Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }}> <Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }}>
We help businesses reuse their old electronic devices, repurposing functional parts and components for future use or resale, reducing overall environmental impact. We help businesses reuse their old electronic devices, repurposing functional parts and components for future use or resale, reducing overall environmental impact.
@ -385,7 +456,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={{ p: 1, height: { xs: 172, sm: 138, md: 118 }, maxHeight: 270 }}> <Box sx={{ background: "#95CD41", p: 1, height: { xs: 172, sm: 138, md: 118 }, maxHeight: 270 }}>
<Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Repair</Typography> <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Repair</Typography>
<Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }}> <Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }}>
Loop Sustainability steps in to repair damaged or outdated electronics. Loop Sustainability steps in to repair damaged or outdated electronics.
@ -417,7 +488,7 @@ const HomePage: React.FC = () => {
/> />
</Box> </Box>
</Box> </Box>
<Box sx={{ p: 1, height: { xs: 172, sm: 138, md: 118 }, maxHeight: 270 }}> <Box sx={{ background: "#95CD41", p: 1, height: { xs: 172, sm: 138, md: 118 }, maxHeight: 270 }}>
<Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Disintegrate</Typography> <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Disintegrate</Typography>
<Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }} >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" sx={{ fontSize: { xs: "12px", sm: '16px' } }} >When electronics can no longer be repaired or reused, we safely disintegrate them into valuable materials, ensuring they are properly processed and recycled.</Typography>
@ -437,7 +508,7 @@ const HomePage: React.FC = () => {
/> />
</Box> </Box>
</Box> </Box>
<Box sx={{ p: 1, textAlign: { xs: "left", md: 'center' }, height: { xs: 172, sm: 138, md: 118 } }}> <Box sx={{ background: "#95CD41", p: 1, textAlign: { xs: "left", md: 'center' }, height: { xs: 172, sm: 138, md: 118 } }}>
<Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Remine</Typography> <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Remine</Typography>
<Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }} >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" sx={{ fontSize: { xs: "12px", sm: '16px' } }} >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>

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

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 MiB

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

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 826 KiB

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

Binary file not shown.

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

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.5 MiB

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

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 16 KiB

2
src/components/ourteam.tsx
View File

@ -36,7 +36,7 @@ const teamMembers: TeamMember[] = [
]; ];
const OurTeam: React.FC = () => { const OurTeam: React.FC = () => {
const [showTeam, setShowTeam] = useState(true); const [showTeam, setShowTeam] = useState(false);
return ( return (
<Grid <Grid

3
src/components/whyus.tsx
View File

@ -47,8 +47,7 @@ const WhyChooseUs: React.FC = () => {
item item
key={index} key={index}
xs={6} xs={6}
sm={6} sm={2}
lg={3}
display="flex" display="flex"
justifyContent="center" justifyContent="center"
> >