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

fix/layout #23

Merged
mihir merged 3 commits from fix/layout into main 2025-02-20 17:43:32 +05:30
Conversation 0 Commits 3 Files Changed 15 +54 -27
6 changed files with 54 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 1a3d2689f2 - Show all commits

6
src/App.css
View File

@ -42,3 +42,9 @@
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face {
font-family: 'Helvetica Neue';
src: url('../src//fonts/HelveticaNeue.ttc') format('truetype');
font-weight: normal;
font-style: normal;
}

8
src/components/header.tsx
View File

@ -54,13 +54,13 @@ const Header: React.FC = () => {
{/* Desktop Navigation */} {/* Desktop Navigation */}
<Box sx={{ display: { xs: "none", md: "flex" }, gap: 3, fontFamily: "Helvetica" }}> <Box sx={{ display: { xs: "none", md: "flex" }, gap: 3, fontFamily: "Helvetica" }}>
<Button sx={{ fontFamily: "Helvetica", textTransform: "capitalize" }} color="inherit">Home</Button> <Button sx={{ fontFamily: "Helvetica", textTransform: "capitalize" , color:"#2F2E41"}} >Home</Button>
<Button sx={{ fontFamily: "Helvetica", textTransform: "capitalize" }} color="inherit">About</Button> <Button sx={{ fontFamily: "Helvetica", textTransform: "capitalize" , color:"#2F2E41" }} >About</Button>
<Button sx={{ fontFamily: "Helvetica", textTransform: "capitalize" }} color="inherit">Team</Button> <Button sx={{ fontFamily: "Helvetica", textTransform: "capitalize" ,color:"#2F2E41" }} >Team</Button>
<Button <Button
sx={{ sx={{
padding: "7px 20px", padding: "7px 20px",
backgroundColor: "#0841adcc", backgroundColor: "#317AF6",
color: "white", color: "white",
fontFamily: "Helvetica", fontFamily: "Helvetica",
textTransform: "capitalize", textTransform: "capitalize",

17
src/components/homepage.tsx
View File

@ -71,7 +71,7 @@ const HomePage: React.FC = () => {
}, },
}, },
typography: { typography: {
fontFamily: "SF Pro Rounded Regular, Arial, sans-serif", fontFamily: "SF Pro Regular, Arial, sans-serif",
h4: { h4: {
color: "#333333", color: "#333333",
}, },
@ -118,7 +118,8 @@ const HomePage: React.FC = () => {
textAlign: "center", textAlign: "center",
color:'#333333', color:'#333333',
height:'107px', height:'107px',
fontSize:{xs:'12px' , sm:'16px'} fontSize:{xs:'12px' , sm:'16px'},
fontFamily: "SF Pro Regular, Arial, sans-serif",
}} }}
> >
<Typography variant="body1">{text}</Typography> <Typography variant="body1">{text}</Typography>
@ -374,18 +375,18 @@ const HomePage: React.FC = () => {
</Box> </Box>
</Grid> </Grid>
{/* mobile only */} {/* mobile only */}
<Grid container spacing={2} rowSpacing={{ xs: 24, sm: 36, md: 38 }} <Grid container spacing={2} rowSpacing={{ xs: 24, sm: 36, md: 30 }}
sx={{ sx={{
display: { xs: "flex", md: "flex", lg: 'none' }, display: { xs: "flex", md: "flex", lg: 'none' },
backgroundImage: { lg: null, xs: `url(${mobileback})` }, backgroundImage: { lg: null, xs: `url(${mobileback})` },
backgroundSize: { xs: "60%", md: "70%", sm:'70%' }, backgroundSize: { xs: "60%", md: "50%", sm:'70%' },
backgroundPosition: { xs: "50% 60%", md: '50% 57%' }, backgroundPosition: { xs: "50% 60%", md: '50% 57%' },
backgroundRepeat: "no-repeat", backgroundRepeat: "no-repeat",
}}> }}>
{/* Reuse */} {/* Reuse */}
<Grid item xs={6}> <Grid item xs={6}>
<Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}> <Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}>
<Box sx={{ background: "#95CD41", p: 1, height: { xs: 175, sm: 131, md: 118 }, maxHeight: 270 }}> <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="h4" sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Reuse</Typography>
<Typography variant="body2" sx={{fontSize:{xs:"12px" , sm:'16px'}}}> <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. We help businesses reuse their old electronic devices, repurposing functional parts and components for future use or resale, reducing overall environmental impact.
@ -407,7 +408,7 @@ const HomePage: React.FC = () => {
{/* Repair */} {/* Repair */}
<Grid item xs={6}> <Grid item xs={6}>
<Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}> <Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}>
<Box sx={{ background: "#95CD41", p: 1, height: { xs: 175, sm: 131, md: 118 }, maxHeight: 270 }}> <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",}}>Repair</Typography> <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="body2" sx={{fontSize:{xs:"12px" , sm:'16px'}}}>
Loop Sustainability steps in to repair damaged or outdated electronics. Loop Sustainability steps in to repair damaged or outdated electronics.
@ -439,7 +440,7 @@ const HomePage: React.FC = () => {
/> />
</Box> </Box>
</Box> </Box>
<Box sx={{ background: "#95CD41", p: 1, height: { xs: 175, sm: 131 , md:118}, maxHeight: 270 }}> <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="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="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,7 +460,7 @@ const HomePage: React.FC = () => {
/> />
</Box> </Box>
</Box> </Box>
<Box sx={{ background: "#95CD41", p: 1, textAlign: { xs: "left", md: 'center' }, height: { xs: 175, sm: 131 , md:118} }}> <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="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="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>

10
src/components/ourteam.tsx
View File

@ -56,15 +56,15 @@ const OurTeam: React.FC = () => {
display="flex" display="flex"
alignItems="center" alignItems="center"
gap={1} gap={1}
sx={{ cursor: "pointer", marginBottom: 10 }} sx={{ cursor: "pointer", marginBottom: 5 }}
onClick={() => setShowTeam(!showTeam)} onClick={() => setShowTeam(!showTeam)}
> >
<Typography <Typography
variant="h4" variant="h4"
sx={{ sx={{
fontWeight: "bold",
fontSize: { xs: "20px", sm: "48px" }, fontSize: { xs: "20px", sm: "48px" },
fontFamily: "SF Pro Rounded Regular, Arial, sans-serif", fontFamily: "SF Pro Regular, Arial, sans-serif",
color: "#333333", color: "#333333",
}} }}
> >
@ -81,8 +81,8 @@ const OurTeam: React.FC = () => {
sx={{ sx={{
color: "#4D4D4D", color: "#4D4D4D",
fontSize: { xs: "12px", sm: "20px" }, fontSize: { xs: "12px", sm: "20px" },
fontFamily: "SF Pro Rounded Regular, Arial, sans-serif", fontFamily: "SF Pro Regular, Arial, sans-serif",
padding:"20px", padding:"30px",
textAlign:'center' textAlign:'center'
}} }}
> >

40
src/components/whyus.tsx
View File

@ -11,6 +11,8 @@ const Circle = styled(Box)(({ theme }) => ({
justifyContent: "center", justifyContent: "center",
border: "5px solid", border: "5px solid",
transition: "0.3s", transition: "0.3s",
textAlign: "center",
padding: "10px",
[theme.breakpoints.down("sm")]: { [theme.breakpoints.down("sm")]: {
width: 120, // Adjusting for mobile width: 120, // Adjusting for mobile
height: 120, height: 120,
@ -27,22 +29,40 @@ const items = [
const WhyChooseUs: React.FC = () => { const WhyChooseUs: React.FC = () => {
return ( return (
<Box sx={{ textAlign: "center", mt: 5 }}> <Box sx={{ textAlign: "center", mt: 5 }}>
<Typography variant="h4" sx={{ fontWeight: "bold", color: '#333333', mb: 4, fontSize: { xs: "20px", sm: "48px" } }}> <Typography
variant="h4"
sx={{
color: "#333333",
mb: 4,
fontSize: { xs: "20px", sm: "48px" },
fontFamily: "SF Pro Rounded, sans-serif",
}}
>
Why Choose Us? Why Choose Us?
</Typography> </Typography>
<Grid <Grid container spacing={2} justifyContent="center" alignItems="center">
container
spacing={1}
justifyContent="center"
alignItems="center"
>
{items.map((item, index) => ( {items.map((item, index) => (
<Grid item key={index} xs={6} sm={2} display="flex" justifyContent="center"> <Grid
item
key={index}
xs={6}
sm={2}
display="flex"
justifyContent="center"
>
<Circle sx={{ borderColor: item.color }}> <Circle sx={{ borderColor: item.color }}>
<Typography variant="body1" fontWeight="400" fontFamily="Roboto" sx={{fontSize:{xs:'12px', sm:'24px'}}}> <Typography
variant="body1"
fontWeight="400"
sx={{
fontSize: { xs: "12px", sm: "20px" },
fontFamily: "Roboto, sans-serif",
textAlign: "center",
}}
>
{item.text} {item.text}
</Typography> </Typography>
</Circle> </Circle>
</Grid> </Grid>
))} ))}

BIN
src/fonts/HelveticaNeue.ttc Normal file
View File

Binary file not shown.