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

feature/new_ui #32

Merged
mihir merged 3 commits from feature/new_ui into main 2025-04-01 09:03:14 +05:30
Conversation 0 Commits 3 Files Changed 15 +38 -9
2 changed files with 38 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 90e7948fd6 - Show all commits

45
src/components/homepage.tsx
View File

@ -179,29 +179,58 @@ const HomePage: React.FC = () => {
</Grid>
</Grid >
{/* Grid 2 */}
<Box sx={{ width: '100%', height: 'auto', textAlign: 'center', mb: 20, mt: 20 }}>
<Box sx={{ width: '100%', height: 'auto', textAlign: 'center', mb: { xs: 10, md: 20 }, mt: { xs: 10, md: 20 } }}>
<Grid container justifyContent="center">
<Grid item lg={10} xs={12} md={10}>
<Typography variant="h4" fontWeight="bold" gutterBottom textAlign="left">
<Grid item lg={10} xs={10} md={10}>
<Typography
variant="h4"
sx={{
fontSize: { xs: '28px', md: '36px', lg: '42px' },
textAlign: "left",
fontFamily: "Helvetica Neue, Arial, sans-serif",
fontWeight: "bold"
}}
gutterBottom
>
The Process
</Typography>
<Typography variant="body1" sx={{ fontSize: { xs: '14px', md: '18px' }, textAlign: 'left' }}>
<Typography
variant="body1"
sx={{
fontSize: { xs: '14px', md: '18px', lg: '20px' },
textAlign: 'left',
fontFamily: "SF Pro Regular, Arial, sans-serif",
lineHeight: { xs: '1.4', md: '1.6' }
}}
>
Raw materials are extracted through destructive mining practices, causing habitat loss, soil erosion, and water contamination.
Components are assembled into finished products in factories, further increasing emissions and producing hazardous waste that is hard to dispose of.
Devices are used by consumers and businesses, but their production and usage contribute significantly to carbon footprints, energy consumption, and waste generation.
</Typography>
<Typography variant="h2" fontWeight="bold" color="green" sx={{ mt: 9,mb:10, textAlign: "left" }}>
<Typography
variant="h2"
sx={{
mt: { xs: 5, md: 9 },
mb: { xs: 5, md: 10 },
textAlign: "left",
fontFamily: "SF Pro Regular, Arial, sans-serif",
fontSize: { xs: '32px', md: '48px', lg: '64px' },
color: "#95CD41",
fontWeight: "bold"
}}
>
This is where we come in.
</Typography>
</Grid>
</Grid>
</Box>
<Box
sx={{
height: { xl: 1800, lg: 700 },
width: '100%',
backgroundImage: `url(${newbackground})`,
backgroundImage: { xs: 'none', lg: `url(${newbackground})` },
backgroundSize: "261px 220px",
backgroundPosition: "638px 290px",
backgroundRepeat: "no-repeat",
@ -325,8 +354,8 @@ const HomePage: React.FC = () => {
<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: "40%", sm: '70%' },
backgroundImage: { lg: null, xs: `url(${newbackground})` },
backgroundSize: { xs: "30%", md: "22%", sm: '50%' },
backgroundPosition: { xs: "50% 54%", md: '50% 52%' },
backgroundRepeat: "no-repeat",
}}>

2
src/components/whyus.tsx
View File

@ -47,7 +47,7 @@ const WhyChooseUs: React.FC = () => {
item
key={index}
xs={6}
sm={2}
sm={6}
display="flex"
justifyContent="center"
>