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

fixed green box #25

Merged
mihir merged 1 commits from fix/layout into main 2025-02-20 20:59:28 +05:30
Conversation 0 Commits 1 Files Changed 1 +13 -13
1 changed files with 13 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/homepage.tsx
View File

@ -132,7 +132,7 @@ const HomePage: React.FC = () => {
{/* Grid 2 */}
<Box
sx={{
height: { xl: 1800, lg: 2000, xs: 2729, sm: 3630, md: 2790 },
height: { xl: 1800, lg: 2000, xs: 2729, sm: 3630, md: 2390 },
width: '100%',
backgroundImage: { lg: `url(${newbackground})`, xs: null },
backgroundSize: "contain",
@ -382,18 +382,18 @@ const HomePage: React.FC = () => {
</Box>
</Grid>
{/* mobile only */}
<Grid container spacing={2} rowSpacing={{ xs: 24, sm: 36, md: 30 }}
<Grid container spacing={2} rowSpacing={{ xs: 9, sm: 36, md: 16 }}
sx={{
display: { xs: "flex", md: "flex", lg: 'none' },
backgroundImage: { lg: null, xs: `url(${mobileback})` },
backgroundSize: { xs: "60%", md: "50%", sm: '70%' },
backgroundPosition: { xs: "50% 60%", md: '50% 57%' },
backgroundSize: { xs: "60%", md: "40%", sm: '70%' },
backgroundPosition: { xs: "50% 54%", md: '50% 52%' },
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: 175, sm: 138, md: 118 }, maxHeight: 270 }}>
<Box sx={{ background: "#95CD41", p: 1, height: { xs: 172, 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' } }}>
We help businesses reuse their old electronic devices, repurposing functional parts and components for future use or resale, reducing overall environmental impact.
@ -402,7 +402,7 @@ const HomePage: React.FC = () => {
<Box sx={{ display: "flex", justifyContent: "center" }}>
<Box sx={{ width: { xs: "100%", md: "60%" } }}>
<img
src={gifsixm}
src={gifsix}
alt="Reuse Gif"
style={{ width: "100%" }}
/>
@ -415,7 +415,7 @@ 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 }}>
<Box sx={{ background: "#95CD41", p: 1, height: { xs: 172, 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.
@ -426,7 +426,7 @@ const HomePage: React.FC = () => {
<Box sx={{ display: "flex", justifyContent: "center" }}>
<Box sx={{ width: { xs: "100%", md: "60%" } }}>
<img
src={giffivem}
src={giffive}
alt="Reuse Gif"
style={{ width: "100%" }}
/>
@ -441,13 +441,13 @@ const HomePage: React.FC = () => {
<Box sx={{ display: "flex", justifyContent: "center" }}>
<Box sx={{ width: { xs: "100%", md: "60%" } }}>
<img
src={gifsevenm}
src={gifseven}
alt="Reuse Gif"
style={{ width: "100%" }}
/>
</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: 172, 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>
@ -459,15 +459,15 @@ const HomePage: React.FC = () => {
<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={{ width: { xs: "100%", md: "60%" } }}>
<img
src={gifeightm}
src={gifeight}
alt="Reuse Gif"
style={{ width: "100%" }}
/>
</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: 172, 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>