new things #19
|
|
@ -17,7 +17,7 @@ const Header: React.FC = () => {
|
|||
<AppBar
|
||||
position="fixed"
|
||||
sx={{
|
||||
backgroundColor: "#7c77770d",
|
||||
backgroundColor: {md:"#f7f7f7" , xs:'white'},
|
||||
margin: "20px 20px 10px 20px",
|
||||
|
||||
boxShadow: "none",
|
||||
|
|
|
|||
|
|
@ -70,15 +70,15 @@ const HomePage: React.FC = () => {
|
|||
|
||||
},
|
||||
},
|
||||
// typography: {
|
||||
// fontFamily: "SF Pro Rounded Medium, Arial, sans-serif",
|
||||
// h4: {
|
||||
// color: "#333333",
|
||||
// },
|
||||
// body2:{
|
||||
// color:"#77808B"
|
||||
// }
|
||||
// },
|
||||
typography: {
|
||||
fontFamily: "SF Pro Rounded Medium, Arial, sans-serif",
|
||||
h4: {
|
||||
color: "#333333",
|
||||
},
|
||||
body2: {
|
||||
color: "#4D4D4D"
|
||||
}
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
|
|
@ -92,7 +92,7 @@ const HomePage: React.FC = () => {
|
|||
xs={12}
|
||||
sx={{
|
||||
marginTop: "0px",
|
||||
height: { xs: "190px", lg: "55vh" },
|
||||
height: { xs: "190px", lg: "55vh", sm: "300px", md: '400px' },
|
||||
width: { lg: "100vw" },
|
||||
backgroundColor: "white",
|
||||
position: "relative",
|
||||
|
|
@ -127,7 +127,7 @@ const HomePage: React.FC = () => {
|
|||
{/* Grid 2 */}
|
||||
<Box
|
||||
sx={{
|
||||
height: { xl: 1800, lg: 2000, xs: 2770, sm: 3580, md: 3075 },
|
||||
height: { xl: 1800, lg: 2000, xs: 2857, sm: 3630, md: 2550 },
|
||||
width: '100%',
|
||||
backgroundImage: { lg: `url(${newbackground})`, xs: null },
|
||||
backgroundSize: "contain",
|
||||
|
|
@ -364,40 +364,75 @@ const HomePage: React.FC = () => {
|
|||
</Box>
|
||||
<Box sx={{ width: "100%", paddingLeft: { xs: "10px", md: "10px" }, textAlign: { lg: 'left', xs: 'left' }, background: { xs: '#95CD41', lg: 'white' } }}>
|
||||
<Typography variant="h4">Remine</Typography>
|
||||
<Typography variant="body2" >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" >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: 18, sm: 26, md: 40 }}
|
||||
<Grid container spacing={2} rowSpacing={{ xs: 24, sm: 36, md: 38 , }}
|
||||
sx={{
|
||||
display: { xs: "flex", md: "flex", lg: 'none' },
|
||||
backgroundImage: { lg: null, xs: `url(${mobileback})` },
|
||||
backgroundSize: "contain",
|
||||
backgroundPosition: { xs: "50% 60%", md: '50% 63%' },
|
||||
backgroundSize: { xs: "contain", md: "70%", sm:'70%' },
|
||||
backgroundPosition: { xs: "50% 60%", md: '50% 57%' },
|
||||
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: 256, sm: 200 }, maxHeight: 270 }}>
|
||||
<Box sx={{ background: "#95CD41", p: 1, height: { xs: 256, sm: 131, md: 118 }, maxHeight: 270 }}>
|
||||
<Typography variant="h4">Reuse</Typography>
|
||||
<Typography variant="body2">
|
||||
We help businesses reuse their old electronic devices, repurposing functional parts and components for future use or resale, reducing overall environmental impact.
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<img src={gifsix} alt="Reuse Gif" style={{ width: "100%" }} />
|
||||
<Box sx={{ display: "flex", justifyContent: "center" }}>
|
||||
<Box sx={{ width: { xs: "100%", md: "80%" } }}>
|
||||
<img
|
||||
src={gifsix}
|
||||
alt="Reuse Gif"
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
{/* Repair */}
|
||||
<Grid item xs={6}>
|
||||
<Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}>
|
||||
<Box sx={{ background: "#95CD41", p: 1, height: { xs: 256, sm: 200 }, maxHeight: 270 }}>
|
||||
<Box sx={{ background: "#95CD41", p: 1, height: { xs: 256, sm: 131, md: 118 }, maxHeight: 270 }}>
|
||||
<Typography variant="h4">Repair</Typography>
|
||||
<Typography variant="body2">
|
||||
Loop Sustainability steps in to repair damaged or outdated electronics.
|
||||
|
|
@ -405,8 +440,14 @@ const HomePage: React.FC = () => {
|
|||
reducing the need for new products.
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<img src={giffive} alt="Repair Gif" style={{ width: "100%" }} />
|
||||
<Box sx={{ display: "flex", justifyContent: "center" }}>
|
||||
<Box sx={{ width: { xs: "100%", md: "80%" } }}>
|
||||
<img
|
||||
src={giffive}
|
||||
alt="Reuse Gif"
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
|
@ -414,10 +455,16 @@ 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={{ width: "100%" }}>
|
||||
<img src={gifseven} alt="Disintegrate Gif" style={{ width: "100%" }} />
|
||||
<Box sx={{ display: "flex", justifyContent: "center" }}>
|
||||
<Box sx={{ width: { xs: "100%", md: "80%" } }}>
|
||||
<img
|
||||
src={gifseven}
|
||||
alt="Reuse Gif"
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</Box>
|
||||
<Box sx={{ background: "#95CD41", p: 1, height: { xs: 256, sm: 200 }, maxHeight: 270 }}>
|
||||
</Box>
|
||||
<Box sx={{ background: "#95CD41", p: 1, height: { xs: 256, sm: 131 , md:118}, maxHeight: 270 }}>
|
||||
<Typography variant="h4" sx={{ fontSize: "1.3rem" }}>Disintegrate</Typography>
|
||||
<Typography variant="body2" >When electronics can no longer be repaired or reused, we safely disintegrate them into valuable materials, ensuring they are properly processed and recycled.</Typography>
|
||||
|
||||
|
|
@ -428,10 +475,16 @@ 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={{ width: "100%" }}>
|
||||
<img src={gifeight} alt="Remine Gif" style={{ width: "100%" }} />
|
||||
<Box sx={{ display: "flex", justifyContent: "center" }}>
|
||||
<Box sx={{ width: { xs: "100%", md: "80%" } }}>
|
||||
<img
|
||||
src={gifeight}
|
||||
alt="Reuse Gif"
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</Box>
|
||||
<Box sx={{ background: "#95CD41", p: 1, textAlign: { xs: "left", md: 'center' }, height: { xs: 256, sm: 200 } }}>
|
||||
</Box>
|
||||
<Box sx={{ background: "#95CD41", p: 1, textAlign: { xs: "left", md: 'center' }, height: { xs: 256, sm: 131 , md:118} }}>
|
||||
<Typography variant="h4" sx={{ fontSize: '1.6rem' }}>Remine</Typography>
|
||||
<Typography variant="body2" >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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue