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

updated fonts

This commit is contained in:
hardik 2025-02-16 11:57:23 +05:30
parent ebbb137d16
commit cf5e68cd29
4 changed files with 28 additions and 4 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); 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;
}

18
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 ( return (
@ -156,7 +166,7 @@ const HomePage: React.FC = () => {
</Box> </Box>
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}> <Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
<Typography variant="h4">Mine from nature</Typography> <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>
</Box> </Box>
</Grid> </Grid>
@ -179,7 +189,7 @@ const HomePage: React.FC = () => {
}}> }}>
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}> <Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
<Typography variant="h4">Manufacturing</Typography> <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>
<Box sx={{ width: { lg: '50%' , md:'67%' } }}> <Box sx={{ width: { lg: '50%' , md:'67%' } }}>
<img src={giftwo} alt="Gif" style={{ width: "100%" }} /> <img src={giftwo} alt="Gif" style={{ width: "100%" }} />
@ -211,7 +221,7 @@ const HomePage: React.FC = () => {
</Box> </Box>
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}> <Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
<Typography variant="h4">Assemble</Typography> <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>
</Box> </Box>
@ -235,7 +245,7 @@ const HomePage: React.FC = () => {
}}> }}>
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}> <Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
<Typography variant="h4">Use</Typography> <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>
<Box sx={{ width: { xs: "60%",md:'70%' } }}> <Box sx={{ width: { xs: "60%",md:'70%' } }}>

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', font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace; monospace;
} }
@font-face {
font-family: 'SF Pro Medium';
src: url('../src//fonts//SF-Pro-Medium.otf') format('opentype');
font-weight: normal;
font-style: normal;
}