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

fixed tablet view

This commit is contained in:
hardik 2025-02-14 10:23:53 +05:30
parent 6383716b8f
commit cc327002dd
2 changed files with 17 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/header.tsx
View File

@ -22,7 +22,7 @@ const Header: React.FC = () => {
width: { width: {
xs: "91.6vw", xs: "91.6vw",
sm: "95.5vw", sm: "95.5vw",
md: "91.6vw", md: "96.5vw",
lg: "96.8vw", lg: "96.8vw",
xl: "96.4vw" xl: "96.4vw"
}, },

32
src/components/homepage.tsx
View File

@ -113,11 +113,11 @@ const HomePage: React.FC = () => {
{/* Grid 2 */} {/* Grid 2 */}
<Box <Box
sx={{ sx={{
height: { xl: 1800, lg: 2000, xs: 2770, sm: 3580 }, height: { xl: 1800, lg: 2000, xs: 2770, sm: 3580 ,md:2695 },
width: '100%', width: '100%',
backgroundImage: { lg: `url(${newbackground})`, xs: `url(${mobileback})` }, backgroundImage: { lg: `url(${newbackground})`, xs: `url(${mobileback})` },
backgroundSize: "contain", backgroundSize: "contain",
backgroundPosition: { lg: "center", xs: "50% 86%" }, backgroundPosition: { lg: "center", xs: "50% 86%" , md: "50% 80%" },
backgroundRepeat: "no-repeat", backgroundRepeat: "no-repeat",
paddingBottom: { lg: 20, xs: 0 } paddingBottom: { lg: 20, xs: 0 }
}} }}
@ -131,7 +131,7 @@ const HomePage: React.FC = () => {
}} }}
> >
{/* ROW 1 */} {/* ROW 1 */}
<Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '328px' }, display: "flex", justifyContent: "center", alignItems: "center" }}> <Grid item xs={12} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '328px' }, display: "flex", justifyContent: "center", alignItems: "center" }}>
<Box ref={mineRef} sx={{ <Box ref={mineRef} sx={{
height: { xs: "70%", lg: "215px" }, height: { xs: "70%", lg: "215px" },
width: { xs: "80%", lg: "870px" }, width: { xs: "80%", lg: "870px" },
@ -153,11 +153,11 @@ const HomePage: React.FC = () => {
</Box> </Box>
</Box> </Box>
</Grid> </Grid>
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid> <Grid item xs={6} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', md:'none', sm: 'block' } }}></Grid>
{/* ROW 2 */} {/* ROW 2 */}
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid> <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' , md:'none' } }}></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" }}> <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={{ <Box ref={manufactureRef} sx={{
height: { xs: "472px", lg: "215px" }, height: { xs: "472px", lg: "215px" },
width: { xs: "80%", lg: "552px" }, width: { xs: "80%", lg: "552px" },
@ -182,7 +182,7 @@ const HomePage: React.FC = () => {
</Grid> </Grid>
{/* ROW 3 */} {/* ROW 3 */}
<Grid item xs={12} lg={6} sx={{ <Grid item xs={12} lg={6} md={6} sx={{
background: '#ffffff00', height: { xl: "500px", lg: '401px' }, background: '#ffffff00', height: { xl: "500px", lg: '401px' },
display: "flex", justifyContent: { lg: 'flex-end', xs: 'center' }, alignItems: "center" display: "flex", justifyContent: { lg: 'flex-end', xs: 'center' }, alignItems: "center"
}}> }}>
@ -209,11 +209,11 @@ const HomePage: React.FC = () => {
</Box> </Box>
</Grid> </Grid>
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid> <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block',md:'none' } }}></Grid>
{/* ROW 4 */} {/* ROW 4 */}
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid> <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block', md:'none' } }}></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" }}> <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={{ <Box ref={useRefBox} sx={{
height: { xs: "451px", lg: "215px", sm: '555px' }, height: { xs: "451px", lg: "215px", sm: '555px' },
width: { xs: "80%", lg: "550px" }, width: { xs: "80%", lg: "550px" },
@ -352,10 +352,10 @@ const HomePage: React.FC = () => {
</Box> </Box>
</Grid> </Grid>
{/* mobile only */} {/* mobile only */}
<Grid container spacing={2} rowSpacing={12} sx={{ display: { xs: "flex", md: "none" } }}> <Grid container spacing={2} rowSpacing={{ xs: 12, sm: 14, md: 34 }} sx={{ display: { xs: "flex", md: "flex" , lg:'none' } }}>
{/* Reuse */} {/* Reuse */}
<Grid item xs={6}> <Grid item xs={6}>
<Box sx={{ p: 2, textAlign: "left", borderRadius: 2 }}> <Box sx={{ p: 2, textAlign:{xs: "left" , md:'center'}, borderRadius: 2 }}>
<Box sx={{ background: "#95CD41", p: 1 }}> <Box sx={{ background: "#95CD41", p: 1 }}>
<Typography variant="h4">Reuse</Typography> <Typography variant="h4">Reuse</Typography>
<Typography variant="body2"> <Typography variant="body2">
@ -370,7 +370,7 @@ const HomePage: React.FC = () => {
{/* Repair */} {/* Repair */}
<Grid item xs={6}> <Grid item xs={6}>
<Box sx={{ p: 2, textAlign: "left", borderRadius: 2 }}> <Box sx={{ p: 2, textAlign:{xs: "left" , md:'center'}, borderRadius: 2 }}>
<Box sx={{ background: "#95CD41", p: 1 }}> <Box sx={{ background: "#95CD41", p: 1 }}>
<Typography variant="h4">Repair</Typography> <Typography variant="h4">Repair</Typography>
<Typography variant="body2"> <Typography variant="body2">
@ -387,7 +387,7 @@ const HomePage: React.FC = () => {
{/* Disintegrate (Added Extra Margin to Separate from Top Row) */} {/* Disintegrate (Added Extra Margin to Separate from Top Row) */}
<Grid item xs={6} sx={{ mt: 2 }}> <Grid item xs={6} sx={{ mt: 2 }}>
<Box sx={{ p: 2, textAlign: "left", borderRadius: 2 }}> <Box sx={{ p: 2, textAlign:{xs: "left" , md:'center'}, borderRadius: 2 }}>
<Box sx={{ width: "100%" }}> <Box sx={{ width: "100%" }}>
<img src={gifseven} alt="Disintegrate Gif" style={{ width: "100%" }} /> <img src={gifseven} alt="Disintegrate Gif" style={{ width: "100%" }} />
</Box> </Box>
@ -401,11 +401,11 @@ const HomePage: React.FC = () => {
{/* Remine */} {/* Remine */}
<Grid item xs={6} sx={{ mt: 2 } }> <Grid item xs={6} sx={{ mt: 2 } }>
<Box sx={{ p: 2, textAlign: "center", borderRadius: 2 }}> <Box sx={{ p: 2,textAlign:{xs: "left" , md:'center'}, borderRadius: 2 }}>
<Box sx={{ width: "100%" }}> <Box sx={{ width: "100%" }}>
<img src={gifeight} alt="Remine Gif" style={{ width: "100%" }} /> <img src={gifeight} alt="Remine Gif" style={{ width: "100%" }} />
</Box> </Box>
<Box sx={{ background: "#95CD41", p: 1 ,textAlign:'left' }}> <Box sx={{ background: "#95CD41", p: 1, textAlign:{xs: "left" , md:'center'}, }}>
<Typography variant="h4" sx={{fontSize:'1.6rem'}}>Remine</Typography> <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> <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>