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

fix/layout #13

Merged
mihir merged 2 commits from fix/layout into main 2025-02-16 12:09:41 +05:30
Conversation 0 Commits 2 Files Changed 4 +29 -5
4 changed files with 29 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.css
View File

@ -36,3 +36,9 @@
transform: rotate(360deg);
}
}
@font-face {
font-family: 'SF Pro Medium';
src: url('../src/fonts/SF-Pro-Medium.otf') format('opentype');
font-weight: normal;
font-style: normal;
}

20
src/components/homepage.tsx
View File

@ -67,6 +67,16 @@ const HomePage: React.FC = () => {
},
},
typography: {
fontFamily: "SF Pro Rounded Medium, Arial, sans-serif",
h4: {
color: "#333333",
},
body2:{
color:"#4D4D4D"
}
},
});
return (
@ -156,7 +166,7 @@ const HomePage: React.FC = () => {
</Box>
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
<Typography variant="h4">Mine from nature</Typography>
<p>Raw materials are extracted through destructive mining practices, causing habitat loss, soil erosion, and water contamination. </p>
<Typography variant="body2">Raw materials are extracted through destructive mining practices, causing habitat loss, soil erosion, and water contamination. </Typography>
</Box>
</Box>
</Grid>
@ -179,7 +189,7 @@ const HomePage: React.FC = () => {
}}>
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
<Typography variant="h4">Manufacturing</Typography>
<p>Materials are processed in energy-intensive factories that rely on fossil fuels, generating high carbon emissions </p>
<Typography variant="body2">Materials are processed in energy-intensive factories that rely on fossil fuels, generating high carbon emissions </Typography>
</Box>
<Box sx={{ width: { lg: '50%' , md:'67%' } }}>
<img src={giftwo} alt="Gif" style={{ width: "100%" }} />
@ -211,7 +221,7 @@ const HomePage: React.FC = () => {
</Box>
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
<Typography variant="h4">Assemble</Typography>
<p>Materials are processed in energy-intensive factories that rely on fossil fuels, generating high carbon emissions </p>
<Typography variant="body2">Materials are processed in energy-intensive factories that rely on fossil fuels, generating high carbon emissions </Typography>
</Box>
</Box>
@ -235,7 +245,7 @@ const HomePage: React.FC = () => {
}}>
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
<Typography variant="h4">Use</Typography>
<p>Devices are used by consumers and businesses, but their production and usage contribute significantly to carbon footprints, energy consumption, and waste generation.</p>
<Typography variant="body2">Devices are used by consumers and businesses, but their production and usage contribute significantly to carbon footprints, energy consumption, and waste generation.</Typography>
</Box>
<Box sx={{ width: { xs: "60%",md:'70%' } }}>
@ -359,7 +369,7 @@ const HomePage: React.FC = () => {
</Box>
</Grid>
{/* mobile only */}
<Grid container spacing={2} rowSpacing={{ xs: 12, sm: 26, md: 40 }}
<Grid container spacing={2} rowSpacing={{ xs: 18, sm: 26, md: 40 }}
sx={{
display: { xs: "flex", md: "flex", lg: 'none' },
backgroundImage: { lg: null, xs: `url(${mobileback})` },

0
public/SF-Pro-Rounded-Medium (1).otf → src/fonts/SF-Pro-Medium.otf
View File

8
src/index.css
View File

@ -11,3 +11,11 @@ code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
@font-face {
font-family: 'SF Pro Medium';
src: url('../src//fonts//SF-Pro-Medium.otf') format('opentype');
font-weight: normal;
font-style: normal;
}