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

Compare commits

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

6 Commits
349e73b7fd ... a5b1d1cde7

Author SHA1 Message Date
Mihir Motiyani a5b1d1cde7 mobileback not used, lint issue solved
continuous-integration/drone/push Build is failing Details
continuous-integration/drone/pr Build is passing Details
2025-04-01 09:55:40 +05:30
Mihir Motiyani bd917fb285 Merge pull request 'background color change' (#33) from feature/new_ui into main
continuous-integration/drone/push Build is passing Details 
Reviewed-on: #33
Reviewed-by: Mihir Motiyani <mihir@midastix.com>
 2025-04-01 09:52:13 +05:30
hardik d186426d9e background color change
continuous-integration/drone/push Build is passing Details
2025-04-01 09:33:31 +05:30
Mihir Motiyani 57ba5dc462 Merge pull request 'feature/new_ui' (#32) from feature/new_ui into main
continuous-integration/drone/push Build is passing Details 
Reviewed-on: #32
Reviewed-by: Mihir Motiyani <mihir@midastix.com>
 2025-04-01 09:03:13 +05:30
hardik 90e7948fd6 fixed
continuous-integration/drone/push Build is passing Details
continuous-integration/drone/pr Build is passing Details
2025-04-01 08:04:34 +05:30
hardik 50c342f763 update
continuous-integration/drone/push Build is passing Details
2025-04-01 00:56:38 +05:30
9 changed files with 66 additions and 136 deletions
Show Stats Expand all files Collapse all files

BIN
public/Loop hero 29_04.mp4 Normal file
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 OurTeam from "./ourteam";
// 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 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,74 @@ const HomePage: React.FC = () => {
</Typography>
</Box>
</Grid>
</Grid>
</Grid >
{/* 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
sx={{
height: { xl: 1800, lg: 2000, xs: 2719, sm: 3740, md: 2350 },
height: { xl: 800, lg: 700 },
width: '100%',
backgroundImage: { lg: `url(${newbackground})`, xs: null },
backgroundSize: "contain",
backgroundPosition: { lg: "center" },
backgroundImage: { xs: 'none', lg: `url(${newbackground})` },
backgroundSize: "261px 220px",
// backgroundPosition: "638px 290px",
background : 'center',
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}
@ -426,15 +355,15 @@ const HomePage: React.FC = () => {
<Grid container spacing={2} rowSpacing={{ xs: 9, sm: 36, md: 16 }}
sx={{
display: { xs: "flex", md: "flex", lg: 'none' },
backgroundImage: { lg: null, xs: `url(${mobileback})` },
backgroundSize: { xs: "60%", md: "40%", sm: '70%' },
backgroundImage: { lg: null, xs: `url(${newbackground})` },
backgroundSize: { xs: "30%", md: "22%", sm: '50%' },
backgroundPosition: { xs: "50% 54%", md: '50% 52%' },
backgroundRepeat: "no-repeat",
}}>
{/* Reuse */}
<Grid item xs={6}>
<Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}>
<Box sx={{ background: "#95CD41", p: 1, height: { xs: 172, sm: 138, md: 118 }, maxHeight: 270 }}>
<Box sx={{ 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="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.
@ -456,7 +385,7 @@ const HomePage: React.FC = () => {
{/* Repair */}
<Grid item xs={6}>
<Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}>
<Box sx={{ background: "#95CD41", p: 1, height: { xs: 172, sm: 138, md: 118 }, maxHeight: 270 }}>
<Box sx={{ 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="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }}>
Loop Sustainability steps in to repair damaged or outdated electronics.
@ -488,7 +417,7 @@ const HomePage: React.FC = () => {
/>
</Box>
</Box>
<Box sx={{ background: "#95CD41", p: 1, height: { xs: 172, sm: 138, md: 118 }, maxHeight: 270 }}>
<Box sx={{ 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="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>
@ -508,7 +437,7 @@ const HomePage: React.FC = () => {
/>
</Box>
</Box>
<Box sx={{ background: "#95CD41", p: 1, textAlign: { xs: "left", md: 'center' }, height: { xs: 172, sm: 138, md: 118 } }}>
<Box sx={{ 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="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>

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

2
src/components/ourteam.tsx
View File

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

3
src/components/whyus.tsx
View File

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