fixed 820px view #4
|
|
@ -35,7 +35,7 @@ const Header: React.FC = () => {
|
|||
<img
|
||||
src={headerlogo}
|
||||
alt="Logo"
|
||||
style={{ height: "40px", cursor: "pointer", width:'190px' }}
|
||||
style={{ height: "40px", cursor: "pointer", width:'159px' }}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
|
|
|
|||
|
|
@ -112,7 +112,7 @@ const HomePage: React.FC = () => {
|
|||
{/* Grid 2 */}
|
||||
<Box
|
||||
sx={{
|
||||
height: { xl: 1800, lg: 2000, xs: 2830, sm: 2400 },
|
||||
height: { xl: 1800, lg: 2000, xs: 2830, sm: 3580 },
|
||||
width: '100%',
|
||||
backgroundImage: { lg: `url(${newbackground})`, xs: `url(${mobileback})` },
|
||||
backgroundSize: "contain",
|
||||
|
|
@ -180,9 +180,10 @@ const HomePage: React.FC = () => {
|
|||
</Grid>
|
||||
|
||||
{/* ROW 3 */}
|
||||
<Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '401px' }, display: "flex", justifyContent: { lg: 'flex-end', xs: 'center' }, alignItems: "center" }}>
|
||||
<Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '401px' },
|
||||
display: "flex", justifyContent: { lg: 'flex-end', xs: 'center' }, alignItems: "center" }}>
|
||||
<Box ref={assembleRef} sx={{
|
||||
height: { xs: "332px", lg: "215px" },
|
||||
height: { xs: "332px", lg: "215px" ,sm:'500px' },
|
||||
width: { xs: "80%", lg: "595px" },
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
|
|
@ -210,7 +211,7 @@ const HomePage: React.FC = () => {
|
|||
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid>
|
||||
<Grid item xs={12} lg={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: "332px", lg: "215px" },
|
||||
height: { xs: "332px", lg: "215px" ,sm:'555px' },
|
||||
width: { xs: "80%", lg: "550px" },
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
|
|
@ -237,45 +238,23 @@ const HomePage: React.FC = () => {
|
|||
|
||||
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid>
|
||||
{/* newnew */}
|
||||
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}>
|
||||
<Box ref={reuseRef} sx={{
|
||||
height: { xs: "442px", lg: "115px" },
|
||||
width: { xs: "100%", lg: "250px" },
|
||||
zIndex: 1,
|
||||
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' , sm:"center" }, alignItems: "center" }}>
|
||||
<Box ref={reuseRef} >
|
||||
<Box
|
||||
sx={{
|
||||
width: { xs: "90%", lg: "350px" }, // Set fixed width
|
||||
height: { xs: "241px", lg: "180px" }, // Set fixed height
|
||||
paddingLeft: { xs: "10px", md: "10px" },
|
||||
paddingRight: { xs: "2px" },
|
||||
textAlign: { lg: "left", xs: "left" },
|
||||
backgroundColor: { xs: "#95CD41", lg: "white" },
|
||||
display: "flex",
|
||||
flexDirection: { xs: "column", lg: "column" },
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
padding: "10px",
|
||||
textAlign: 'left',
|
||||
marginBottom: { xs: "20px", md: "0" },
|
||||
}}>
|
||||
<Box sx={{ width: "100%", paddingLeft: { xs: "8px", md: "10px" }, textAlign: { lg: 'left', xs: 'left' }, background: { xs: '#95CD41', lg: 'white' } }}>
|
||||
}}
|
||||
>
|
||||
<Typography variant="h4">Reuse</Typography>
|
||||
<p>We help businesses reuse their old electronic devices, repurposing functional parts and components for future use or resale, reducing overall environmental impact.</p>
|
||||
</Box>
|
||||
<Box sx={{ width: { xs: "100%", md: "100%" } }}>
|
||||
<img src={giffive} alt="Gif" style={{ width: "100%" }} />
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}>
|
||||
<Box ref={repairRef} sx={{
|
||||
height: { xs: "332px", lg: "115px" },
|
||||
width: { xs: "87%", lg: "250px" },
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
flexDirection: { xs: "column", lg: "column" },
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
padding: "10px",
|
||||
textAlign: 'left',
|
||||
marginBottom: { xs: "20px", md: "0" },
|
||||
}}>
|
||||
<Box sx={{ width: "100%", paddingLeft: { xs: "10px", md: "10px" }, paddingRight: { xs: "2px" }, textAlign: { lg: 'left', xs: 'left' }, background: { xs: '#95CD41', lg: 'white' } }}>
|
||||
<Typography variant="h4">Repair</Typography>
|
||||
<p>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.</p>
|
||||
<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: { xs: "100%", md: "100%" } }}>
|
||||
<img src={gifsix} alt="Gif" style={{ width: "100%" }} />
|
||||
|
|
@ -283,10 +262,39 @@ const HomePage: React.FC = () => {
|
|||
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}>
|
||||
<Box ref={reuseRef} >
|
||||
<Box
|
||||
sx={{
|
||||
width: { xs: "90%", lg: "350px" }, // Set fixed width
|
||||
height: { xs: "241px", lg: "180px" }, // Set fixed height
|
||||
paddingLeft: { xs: "10px", md: "10px" },
|
||||
paddingRight: { xs: "2px" },
|
||||
textAlign: { lg: "left", xs: "left" },
|
||||
backgroundColor: { xs: "#95CD41", lg: "white" },
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<Typography variant="h4">Repair</Typography>
|
||||
<Typography variant="body2">
|
||||
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={{ width: { xs: "100%", md: "100%" } }}>
|
||||
<img src={giffive} alt="Gif" style={{ width: "100%" }} />
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
</Grid>
|
||||
{/* newnewnwe */}
|
||||
<Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}>
|
||||
<Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px', xs: '800px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}>
|
||||
<Box ref={disintegrateRef} sx={{
|
||||
height: { xs: "600px", lg: "115px" },
|
||||
height: { xs: "332px", lg: "115px" },
|
||||
width: { xs: "92%", lg: "250px" },
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
|
|
@ -303,7 +311,7 @@ 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">Disintegrate</Typography>
|
||||
<p>When electronics can no longer be repaired or reused, we safely disintegrate them into valuable materials, ensuring they are properly processed and recycled.</p>
|
||||
<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>
|
||||
</Box>
|
||||
|
||||
|
||||
|
|
@ -311,7 +319,7 @@ const HomePage: React.FC = () => {
|
|||
</Grid>
|
||||
<Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}>
|
||||
<Box ref={remineRef} sx={{
|
||||
height: { xs: "660px", lg: "115px" },
|
||||
height: { xs: "332px", lg: "115px" },
|
||||
width: { xs: "92%", lg: "250px" },
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
|
|
@ -328,7 +336,7 @@ 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>
|
||||
<p>We take the disintegrated materials and remines them for precious metals ,turning waste back into usable resources, closing the loop on electronic waste.</p>
|
||||
<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>
|
||||
|
||||
|
||||
|
|
@ -360,8 +368,6 @@ const HomePage: React.FC = () => {
|
|||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<PartnerWork />
|
||||
|
||||
<OurTeam />
|
||||
<Footer />
|
||||
</Box>
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 196 KiB After Width: | Height: | Size: 738 KiB |
Loading…
Reference in New Issue