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

Compare commits

base: internal:3854592475e154bc77f8766b2e05310d3bfaea53
Branches Tags
internal:main
..
compare: internal:0c882a3203b7c662138abbd3d4a5f724e2da1263
Branches Tags
internal:main

No commits in common. "3854592475e154bc77f8766b2e05310d3bfaea53" and "0c882a3203b7c662138abbd3d4a5f724e2da1263" have entirely different histories.
3854592475 ... 0c882a3203

15 changed files with 72 additions and 107 deletions
Show Stats Expand all files Collapse all files

6
src/App.css
View File

@ -42,9 +42,3 @@
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face {
font-family: 'Helvetica Neue';
src: url('../src//fonts/HelveticaNeue.ttc') format('truetype');
font-weight: normal;
font-style: normal;
}

8
src/components/footer.tsx
View File

@ -13,7 +13,7 @@ const Footer: React.FC = () => {
<Grid container spacing={4}> <Grid container spacing={4}>
{/* Loop Sustainability */} {/* Loop Sustainability */}
<Grid item xs={12} md={3}> <Grid item xs={12} md={3}>
<Typography variant="h6" sx={{ color: "#333333", fontFamily: "Helvetica, Arial, sans-serif" }}> <Typography variant="h6" fontWeight="bold" sx={{ color: "#333333", fontFamily: "Helvetica, Arial, sans-serif" }}>
Loop Sustainability Loop Sustainability
</Typography> </Typography>
<Typography variant="body2" sx={{ mt: 1, color: "#77808B", fontFamily: "Helvetica, Arial, sans-serif" }}> <Typography variant="body2" sx={{ mt: 1, color: "#77808B", fontFamily: "Helvetica, Arial, sans-serif" }}>
@ -23,7 +23,7 @@ const Footer: React.FC = () => {
{/* Get in Touch */} {/* Get in Touch */}
<Grid item xs={7} md={3}> <Grid item xs={7} md={3}>
<Typography variant="h6" sx={{ color: "#333333", fontFamily: "Helvetica, Arial, sans-serif" }}> <Typography variant="h6" fontWeight="bold" sx={{ color: "#333333", fontFamily: "Helvetica, Arial, sans-serif" }}>
Get in Touch Get in Touch
</Typography> </Typography>
<Box display="flex" alignItems="flex-start" sx={{ mt: 1, color: "#77808B" }}> <Box display="flex" alignItems="flex-start" sx={{ mt: 1, color: "#77808B" }}>
@ -48,7 +48,7 @@ const Footer: React.FC = () => {
{/* Company Links */} {/* Company Links */}
<Grid item xs={5} md={3} textAlign="center"> <Grid item xs={5} md={3} textAlign="center">
<Typography variant="h6" sx={{ color: "#333333", fontFamily: "Helvetica, Arial, sans-serif" }}> <Typography variant="h6" fontWeight="bold" sx={{ color: "#333333", fontFamily: "Helvetica, Arial, sans-serif" }}>
Company Company
</Typography> </Typography>
<Box sx={{ mt: 1 }}> <Box sx={{ mt: 1 }}>
@ -60,7 +60,7 @@ const Footer: React.FC = () => {
display="block" display="block"
sx={{ sx={{
color: "#77808B", color: "#77808B",
mt: 1, mt: 0.5,
textDecoration: "none", textDecoration: "none",
fontFamily: "Helvetica, Arial, sans-serif", fontFamily: "Helvetica, Arial, sans-serif",
"&:hover": { textDecoration: "underline" }, "&:hover": { textDecoration: "underline" },

8
src/components/header.tsx
View File

@ -54,13 +54,13 @@ const Header: React.FC = () => {
{/* Desktop Navigation */} {/* Desktop Navigation */}
<Box sx={{ display: { xs: "none", md: "flex" }, gap: 3, fontFamily: "Helvetica" }}> <Box sx={{ display: { xs: "none", md: "flex" }, gap: 3, fontFamily: "Helvetica" }}>
<Button sx={{ fontFamily: "Helvetica", textTransform: "capitalize" , color:"#2F2E41"}} >Home</Button> <Button sx={{ fontFamily: "Helvetica", textTransform: "capitalize" }} color="inherit">Home</Button>
<Button sx={{ fontFamily: "Helvetica", textTransform: "capitalize" , color:"#2F2E41" }} >About</Button> <Button sx={{ fontFamily: "Helvetica", textTransform: "capitalize" }} color="inherit">About</Button>
<Button sx={{ fontFamily: "Helvetica", textTransform: "capitalize" ,color:"#2F2E41" }} >Team</Button> <Button sx={{ fontFamily: "Helvetica", textTransform: "capitalize" }} color="inherit">Team</Button>
<Button <Button
sx={{ sx={{
padding: "7px 20px", padding: "7px 20px",
backgroundColor: "#317AF6", backgroundColor: "#0841adcc",
color: "white", color: "white",
fontFamily: "Helvetica", fontFamily: "Helvetica",
textTransform: "capitalize", textTransform: "capitalize",

96
src/components/homepage.tsx
View File

@ -27,11 +27,9 @@ 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 new (1).gif" import loopgif from "../components/imageandgif/loop hero new (1).gif"
import gifsevenm from "../components/imageandgif/disintegrate mobile (2).gif"; import gifsevenm from "../components/imageandgif/disintegrate mobile.gif";
import gifeightm from "../components/imageandgif/reminemobile.gif"; import gifeightm from "../components/imageandgif/gifeight.gif";
import giffivem from "../components/imageandgif/repairm.gif";
import gifsixm from "../components/imageandgif/newusenewuse.gif";
import gifonem from "../components/imageandgif/mine mobile.gif";
@ -73,7 +71,7 @@ const HomePage: React.FC = () => {
}, },
}, },
typography: { typography: {
fontFamily: "SF Pro Regular, Arial, sans-serif", fontFamily: "SF Pro Rounded Regular, Arial, sans-serif",
h4: { h4: {
color: "#333333", color: "#333333",
}, },
@ -94,7 +92,7 @@ const HomePage: React.FC = () => {
xs={12} xs={12}
sx={{ sx={{
marginTop: "0px", marginTop: "0px",
height: { xs: "190px", lg: "100px", sm: "300px", md: '400px' }, height: { xs: "190px", lg: "55vh", sm: "300px", md: '400px' },
width: { lg: "100vw" }, width: { lg: "100vw" },
backgroundColor: "white", backgroundColor: "white",
position: "relative", position: "relative",
@ -118,10 +116,9 @@ const HomePage: React.FC = () => {
borderRadius: "12px", borderRadius: "12px",
backgroundColor: "#7c77770d", backgroundColor: "#7c77770d",
textAlign: "center", textAlign: "center",
color: '#333333', color:'#333333',
height: '107px', height:'107px',
fontSize: { xs: '12px', sm: '16px' }, fontSize:{xs:'12px' , sm:'16px'}
fontFamily: "SF Pro Regular, Arial, sans-serif",
}} }}
> >
<Typography variant="body1">{text}</Typography> <Typography variant="body1">{text}</Typography>
@ -170,16 +167,11 @@ const HomePage: React.FC = () => {
}}> }}>
<Box sx={{ width: { xs: "60%", md: "70%" } }}> <Box sx={{ width: { xs: "60%", md: "70%" } }}>
<img <img src={gifone} alt="Gif" style={{ width: "91%" }} />
src={window.innerWidth <= 1400 ? gifone : gifonem}
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" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Mine from nature</Typography> <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> <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>
</Box> </Box>
</Grid> </Grid>
@ -201,8 +193,8 @@ const HomePage: React.FC = () => {
marginBottom: { xs: "20px", md: "0" }, marginBottom: { xs: "20px", md: "0" },
}}> }}>
<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" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Manufacturing</Typography> <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> <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>
<Box sx={{ width: { lg: '50%', md: '67%' } }}> <Box sx={{ width: { lg: '50%', md: '67%' } }}>
<img src={giftwo} alt="Gif" style={{ width: "100%" }} /> <img src={giftwo} alt="Gif" style={{ width: "100%" }} />
@ -233,8 +225,8 @@ const HomePage: React.FC = () => {
<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' } }}>
<Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Assemble</Typography> <Typography variant="h4" sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Assemble</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> <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>
</Box> </Box>
@ -257,8 +249,8 @@ const HomePage: React.FC = () => {
marginBottom: { xs: "20px", md: "0" }, marginBottom: { xs: "20px", md: "0" },
}}> }}>
<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" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Use</Typography> <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> <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>
<Box sx={{ width: { xs: "60%", md: '70%' } }}> <Box sx={{ width: { xs: "60%", md: '70%' } }}>
@ -289,8 +281,8 @@ const HomePage: React.FC = () => {
margin: { xs: 1 } margin: { xs: 1 }
}}> }}>
<Box sx={{ width: "100%", textAlign: "left", background: { xs: '#95CD41', lg: 'white' }, p: 2 }}> <Box sx={{ width: "100%", textAlign: "left", background: { xs: '#95CD41', lg: 'white' }, p: 2 }}>
<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.
</Typography> </Typography>
</Box> </Box>
@ -315,8 +307,8 @@ const HomePage: React.FC = () => {
margin: { xs: 1 } margin: { xs: 1 }
}}> }}>
<Box sx={{ width: "100%", textAlign: "left", background: { xs: '#95CD41', lg: 'white' }, p: 2 }}> <Box sx={{ width: "100%", textAlign: "left", background: { xs: '#95CD41', lg: 'white' }, p: 2 }}>
<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.
Our repair services extend the life of devices, minimizing waste and Our repair services extend the life of devices, minimizing waste and
reducing the need for new products. reducing the need for new products.
@ -349,8 +341,8 @@ const HomePage: React.FC = () => {
<img src={gifseven} alt="Gif" style={{ width: "100%" }} /> <img src={gifseven} alt="Gif" style={{ width: "100%" }} />
</Box> </Box>
<Box sx={{ width: "100%", paddingLeft: { xs: "10px", md: "10px" }, textAlign: { lg: 'left', xs: 'left' }, background: { xs: '#95CD41', lg: 'white' } }}> <Box sx={{ width: "100%", paddingLeft: { xs: "10px", md: "10px" }, textAlign: { lg: 'left', xs: 'left' }, background: { xs: '#95CD41', lg: 'white' } }}>
<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>
</Box> </Box>
@ -374,35 +366,35 @@ const HomePage: React.FC = () => {
<img src={gifeight} alt="Gif" style={{ width: "100%" }} /> <img src={gifeight} alt="Gif" style={{ width: "100%" }} />
</Box> </Box>
<Box sx={{ width: "100%", paddingLeft: { xs: "10px", md: "10px" }, textAlign: { lg: 'left', xs: 'left' }, background: { xs: '#95CD41', lg: 'white' } }}> <Box sx={{ width: "100%", paddingLeft: { xs: "10px", md: "10px" }, textAlign: { lg: 'left', xs: 'left' }, background: { xs: '#95CD41', lg: 'white' } }}>
<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>
</Box> </Box>
</Grid> </Grid>
{/* mobile only */} {/* mobile only */}
<Grid container spacing={2} rowSpacing={{ xs: 24, sm: 36, md: 30 }} <Grid container spacing={2} rowSpacing={{ xs: 24, sm: 36, md: 38 }}
sx={{ sx={{
display: { xs: "flex", md: "flex", lg: 'none' }, display: { xs: "flex", md: "flex", lg: 'none' },
backgroundImage: { lg: null, xs: `url(${mobileback})` }, backgroundImage: { lg: null, xs: `url(${mobileback})` },
backgroundSize: { xs: "60%", md: "50%", sm: '70%' }, backgroundSize: { xs: "60%", md: "70%", sm:'70%' },
backgroundPosition: { xs: "50% 60%", md: '50% 57%' }, backgroundPosition: { xs: "50% 60%", md: '50% 57%' },
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={{ background: "#95CD41", p: 1, height: { xs: 175, sm: 138, md: 118 }, maxHeight: 270 }}> <Box sx={{ background: "#95CD41", p: 1, height: { xs: 175, sm: 131, 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.
</Typography> </Typography>
</Box> </Box>
<Box sx={{ display: "flex", justifyContent: "center" }}> <Box sx={{ display: "flex", justifyContent: "center" }}>
<Box sx={{ width: { xs: "100%", md: "60%" } }}> <Box sx={{ width: { xs: "100%", md: "60%" } }}>
<img <img
src={gifsixm} src={gifsix}
alt="Reuse Gif" alt="Reuse Gif"
style={{ width: "100%" }} style={{ width: "100%" }}
/> />
@ -415,9 +407,9 @@ 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", marginBottom: '30px', p: 1, height: { xs: 175, sm: 138, md: 118 }, maxHeight: 270 }}> <Box sx={{ background: "#95CD41", p: 1, height: { xs: 175, sm: 131, 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.
Our repair services extend the life of devices, minimizing waste and Our repair services extend the life of devices, minimizing waste and
reducing the need for new products. reducing the need for new products.
@ -426,7 +418,7 @@ const HomePage: React.FC = () => {
<Box sx={{ display: "flex", justifyContent: "center" }}> <Box sx={{ display: "flex", justifyContent: "center" }}>
<Box sx={{ width: { xs: "100%", md: "60%" } }}> <Box sx={{ width: { xs: "100%", md: "60%" } }}>
<img <img
src={giffivem} src={giffive}
alt="Reuse Gif" alt="Reuse Gif"
style={{ width: "100%" }} style={{ width: "100%" }}
/> />
@ -441,15 +433,15 @@ const HomePage: React.FC = () => {
<Box sx={{ display: "flex", justifyContent: "center" }}> <Box sx={{ display: "flex", justifyContent: "center" }}>
<Box sx={{ width: { xs: "100%", md: "60%" } }}> <Box sx={{ width: { xs: "100%", md: "60%" } }}>
<img <img
src={gifsevenm} src={gifseven}
alt="Reuse Gif" alt="Reuse Gif"
style={{ width: "100%" }} style={{ width: "100%" }}
/> />
</Box> </Box>
</Box> </Box>
<Box sx={{ background: "#95CD41", p: 1, height: { xs: 175, sm: 138, md: 118 }, maxHeight: 270 }}> <Box sx={{ background: "#95CD41", p: 1, height: { xs: 175, sm: 131 , 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>
</Box> </Box>
</Box> </Box>
@ -459,17 +451,17 @@ const HomePage: React.FC = () => {
<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, maxHeight: 270 }}> <Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2, maxHeight: 270 }}>
<Box sx={{ display: "flex", justifyContent: "center" }}> <Box sx={{ display: "flex", justifyContent: "center" }}>
<Box sx={{ width: { xs: "100%", md: "60%" }, marginTop: '27px' }}> <Box sx={{ width: { xs: "100%", md: "60%" } }}>
<img <img
src={gifeightm} src={gifeight}
alt="Reuse Gif" alt="Reuse Gif"
style={{ width: "100%" }} style={{ width: "100%" }}
/> />
</Box> </Box>
</Box> </Box>
<Box sx={{ background: "#95CD41", p: 1, textAlign: { xs: "left", md: 'center' }, height: { xs: 175, sm: 138, md: 118 } }}> <Box sx={{ background: "#95CD41", p: 1, textAlign: { xs: "left", md: 'center' }, height: { xs: 175, sm: 131 , 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>
</Box> </Box>
</Grid> </Grid>

BIN
src/components/imageandgif/Loopherosectionmobiless.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 22 MiB

BIN
src/components/imageandgif/disintegrate mobile (2).gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 49 KiB

BIN
src/components/imageandgif/mine mobile.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 62 KiB

BIN
src/components/imageandgif/newusenewuse.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 48 KiB

0
public/reminemobile.mp4 → src/components/imageandgif/remine mobile.mp4
View File

BIN
src/components/imageandgif/reminemobile.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 50 KiB

BIN
src/components/imageandgif/repairm.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 121 KiB

BIN
src/components/imageandgif/reusem (1) (1).gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 872 KiB

13
src/components/ourteam.tsx
View File

@ -56,15 +56,15 @@ const OurTeam: React.FC = () => {
display="flex" display="flex"
alignItems="center" alignItems="center"
gap={1} gap={1}
sx={{ cursor: "pointer", marginBottom: 5 }} sx={{ cursor: "pointer", marginBottom: 10 }}
onClick={() => setShowTeam(!showTeam)} onClick={() => setShowTeam(!showTeam)}
> >
<Typography <Typography
variant="h4" variant="h4"
sx={{ sx={{
fontWeight: "bold",
fontSize: { xs: "20px", sm: "48px" }, fontSize: { xs: "20px", sm: "48px" },
fontFamily: "SF Pro Regular, Arial, sans-serif", fontFamily: "SF Pro Rounded Regular, Arial, sans-serif",
color: "#333333", color: "#333333",
}} }}
> >
@ -81,10 +81,9 @@ const OurTeam: React.FC = () => {
sx={{ sx={{
color: "#4D4D4D", color: "#4D4D4D",
fontSize: { xs: "12px", sm: "20px" }, fontSize: { xs: "12px", sm: "20px" },
fontFamily: "SF Pro Regular, Arial, sans-serif", fontFamily: "SF Pro Rounded Regular, Arial, sans-serif",
paddingLeft:"60px", padding:"20px",
textAlign:'center', textAlign:'center'
paddingRight:"60px",
}} }}
> >
For over a decade, our team members have been actively involved in For over a decade, our team members have been actively involved in

36
src/components/whyus.tsx
View File

@ -11,8 +11,6 @@ const Circle = styled(Box)(({ theme }) => ({
justifyContent: "center", justifyContent: "center",
border: "5px solid", border: "5px solid",
transition: "0.3s", transition: "0.3s",
textAlign: "center",
padding: "10px",
[theme.breakpoints.down("sm")]: { [theme.breakpoints.down("sm")]: {
width: 120, // Adjusting for mobile width: 120, // Adjusting for mobile
height: 120, height: 120,
@ -29,40 +27,22 @@ const items = [
const WhyChooseUs: React.FC = () => { const WhyChooseUs: React.FC = () => {
return ( return (
<Box sx={{ textAlign: "center", mt: 5 }}> <Box sx={{ textAlign: "center", mt: 5 }}>
<Typography <Typography variant="h4" sx={{ fontWeight: "bold", color: '#333333', mb: 4, fontSize: { xs: "20px", sm: "48px" } }}>
variant="h4"
sx={{
color: "#333333",
mb: 4,
fontSize: { xs: "20px", sm: "48px" },
fontFamily: "SF Pro Rounded, sans-serif",
}}
>
Why Choose Us? Why Choose Us?
</Typography> </Typography>
<Grid container spacing={2} justifyContent="center" alignItems="center">
{items.map((item, index) => (
<Grid <Grid
item container
key={index} spacing={1}
xs={6}
sm={2}
display="flex"
justifyContent="center" 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 }}> <Circle sx={{ borderColor: item.color }}>
<Typography <Typography variant="body1" fontWeight="400" fontFamily="Roboto" sx={{fontSize:{xs:'12px', sm:'24px'}}}>
variant="body1"
fontWeight="400"
sx={{
fontSize: { xs: "12px", sm: "20px" },
fontFamily: "Roboto, sans-serif",
textAlign: "center",
}}
>
{item.text} {item.text}
</Typography> </Typography>
</Circle> </Circle>
</Grid> </Grid>
))} ))}

BIN
src/fonts/HelveticaNeue.ttc
View File

Binary file not shown.