fix/layout #23
|
|
@ -26,7 +26,7 @@ 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 new (1).gif"
|
||||
import gifsevenm from "../components/imageandgif/disintegrate mobile (2).gif";
|
||||
import gifeightm from "../components/imageandgif/reminemobile.gif";
|
||||
import giffivem from "../components/imageandgif/repairm.gif";
|
||||
|
|
@ -94,7 +94,7 @@ const HomePage: React.FC = () => {
|
|||
xs={12}
|
||||
sx={{
|
||||
marginTop: "0px",
|
||||
height: { xs: "190px", lg: "55vh", sm: "300px", md: '400px' },
|
||||
height: { xs: "190px", lg: "100px", sm: "300px", md: '400px' },
|
||||
width: { lg: "100vw" },
|
||||
backgroundColor: "white",
|
||||
position: "relative",
|
||||
|
|
@ -118,9 +118,9 @@ const HomePage: React.FC = () => {
|
|||
borderRadius: "12px",
|
||||
backgroundColor: "#7c77770d",
|
||||
textAlign: "center",
|
||||
color:'#333333',
|
||||
height:'107px',
|
||||
fontSize:{xs:'12px' , sm:'16px'},
|
||||
color: '#333333',
|
||||
height: '107px',
|
||||
fontSize: { xs: '12px', sm: '16px' },
|
||||
fontFamily: "SF Pro Regular, Arial, sans-serif",
|
||||
}}
|
||||
>
|
||||
|
|
@ -167,14 +167,19 @@ const HomePage: React.FC = () => {
|
|||
padding: "10px",
|
||||
textAlign: 'center',
|
||||
marginBottom: { xs: "20px", md: "0" },
|
||||
|
||||
|
||||
}}>
|
||||
<Box sx={{ width: { xs: "60%", md: "70%" } }}>
|
||||
<img src={gifonem} alt="Gif" style={{ width: "91%" }} />
|
||||
<img
|
||||
src={window.innerWidth <= 1400 ? gifone : gifonem}
|
||||
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>
|
||||
<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>
|
||||
|
|
@ -196,8 +201,8 @@ const HomePage: React.FC = () => {
|
|||
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>
|
||||
<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%" }} />
|
||||
|
|
@ -228,8 +233,8 @@ const HomePage: React.FC = () => {
|
|||
<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'}}}>Materials are processed in energy-intensive factories that rely on fossil fuels, generating high carbon emissions </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>
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
|
|
@ -252,8 +257,8 @@ const HomePage: React.FC = () => {
|
|||
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>
|
||||
<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%' } }}>
|
||||
|
|
@ -284,8 +289,8 @@ const HomePage: React.FC = () => {
|
|||
margin: { xs: 1 }
|
||||
}}>
|
||||
<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="body2" sx={{fontSize:{xs:"12px" , sm:'16px'}}}>
|
||||
<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.
|
||||
</Typography>
|
||||
</Box>
|
||||
|
|
@ -310,8 +315,8 @@ const HomePage: React.FC = () => {
|
|||
margin: { xs: 1 }
|
||||
}}>
|
||||
<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="body2"sx={{fontSize:{xs:"12px" , sm:'16px'}}}>
|
||||
<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.
|
||||
Our repair services extend the life of devices, minimizing waste and
|
||||
reducing the need for new products.
|
||||
|
|
@ -344,8 +349,8 @@ const HomePage: React.FC = () => {
|
|||
<img src={gifseven} alt="Gif" style={{ width: "100%" }} />
|
||||
</Box>
|
||||
<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="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="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>
|
||||
</Box>
|
||||
|
||||
|
||||
|
|
@ -369,28 +374,28 @@ const HomePage: React.FC = () => {
|
|||
<img src={gifeight} alt="Gif" style={{ width: "100%" }} />
|
||||
</Box>
|
||||
<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="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="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>
|
||||
|
||||
|
||||
</Box>
|
||||
</Grid>
|
||||
{/* mobile only */}
|
||||
<Grid container spacing={2} rowSpacing={{ xs: 24, sm: 36, md: 30 }}
|
||||
<Grid container spacing={2} rowSpacing={{ xs: 24, sm: 36, md: 30 }}
|
||||
sx={{
|
||||
display: { xs: "flex", md: "flex", lg: 'none' },
|
||||
backgroundImage: { lg: null, xs: `url(${mobileback})` },
|
||||
backgroundSize: { xs: "60%", md: "50%", sm:'70%' },
|
||||
backgroundSize: { xs: "60%", md: "50%", sm: '70%' },
|
||||
backgroundPosition: { xs: "50% 60%", md: '50% 57%' },
|
||||
backgroundRepeat: "no-repeat",
|
||||
}}>
|
||||
{/* Reuse */}
|
||||
{/* Reuse */}
|
||||
<Grid item xs={6}>
|
||||
<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 }}>
|
||||
<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="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.
|
||||
</Typography>
|
||||
</Box>
|
||||
|
|
@ -410,15 +415,15 @@ const HomePage: React.FC = () => {
|
|||
{/* Repair */}
|
||||
<Grid item xs={6}>
|
||||
<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 }}>
|
||||
<Typography variant="h4" sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Repair</Typography>
|
||||
<Typography variant="body2" sx={{fontSize:{xs:"12px" , sm:'16px'}}}>
|
||||
<Box sx={{ background: "#95CD41", marginBottom: '30px', p: 1, height: { xs: 175, 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.
|
||||
Our repair services extend the life of devices, minimizing waste and
|
||||
reducing the need for new products.
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ display: "flex", justifyContent: "center" }}>
|
||||
<Box sx={{ display: "flex", justifyContent: "center" }}>
|
||||
<Box sx={{ width: { xs: "100%", md: "60%" } }}>
|
||||
<img
|
||||
src={giffivem}
|
||||
|
|
@ -433,7 +438,7 @@ const HomePage: React.FC = () => {
|
|||
{/* Disintegrate (Added Extra Margin to Separate from Top Row) */}
|
||||
<Grid item xs={6} sx={{ mt: 2 }}>
|
||||
<Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}>
|
||||
<Box sx={{ display: "flex", justifyContent: "center" }}>
|
||||
<Box sx={{ display: "flex", justifyContent: "center" }}>
|
||||
<Box sx={{ width: { xs: "100%", md: "60%" } }}>
|
||||
<img
|
||||
src={gifsevenm}
|
||||
|
|
@ -442,9 +447,9 @@ const HomePage: React.FC = () => {
|
|||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box sx={{ background: "#95CD41", p: 1, height: { xs: 175, 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>
|
||||
<Box sx={{ background: "#95CD41", p: 1, height: { xs: 175, 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>
|
||||
|
||||
</Box>
|
||||
</Box>
|
||||
|
|
@ -453,8 +458,8 @@ const HomePage: React.FC = () => {
|
|||
{/* Remine */}
|
||||
<Grid item xs={6} sx={{ mt: 2 }}>
|
||||
<Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2, maxHeight: 270 }}>
|
||||
<Box sx={{ display: "flex", justifyContent: "center" }}>
|
||||
<Box sx={{ width: { xs: "100%", md: "60%" } ,marginTop:'27px' }}>
|
||||
<Box sx={{ display: "flex", justifyContent: "center" }}>
|
||||
<Box sx={{ width: { xs: "100%", md: "60%" }, marginTop: '27px' }}>
|
||||
<img
|
||||
src={gifeightm}
|
||||
alt="Reuse Gif"
|
||||
|
|
@ -462,9 +467,9 @@ const HomePage: React.FC = () => {
|
|||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box sx={{ background: "#95CD41", p: 1, textAlign: { xs: "left", md: 'center' }, height: { xs: 175, 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 sx={{ background: "#95CD41", p: 1, textAlign: { xs: "left", md: 'center' }, height: { xs: 175, 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>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
|
|
|||
Loading…
Reference in New Issue