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

fix/layout #11

Merged
mihir merged 2 commits from fix/layout into main 2025-02-14 22:40:40 +05:30
Conversation 0 Commits 2 Files Changed 3 +42 -17
3 changed files with 42 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/footer.tsx
View File

@ -12,7 +12,7 @@ const Footer: React.FC = () => {
<Container maxWidth="lg">
<Grid container spacing={4}>
{/* Loop Sustainability */}
<Grid item xs={12} md={4}>
<Grid item xs={12} md={3}>
<Typography variant="h6" fontWeight="bold">
Loop Sustainability
</Typography>
@ -22,7 +22,7 @@ const Footer: React.FC = () => {
</Grid>
{/* Get in Touch */}
<Grid item xs={12} md={4}>
<Grid item xs={7} md={3}>
<Typography variant="h6" fontWeight="bold">
Get in Touch
</Typography>
@ -45,7 +45,7 @@ const Footer: React.FC = () => {
</Grid>
{/* Company Links */}
<Grid item xs={12} md={4} textAlign="right">
<Grid item xs={5} md={3} textAlign="center">
<Typography variant="h6" fontWeight="bold">
Company
</Typography>
@ -58,7 +58,10 @@ const Footer: React.FC = () => {
</Box>
{/* Social Media Icons */}
<Box display="flex" justifyContent="flex-end" sx={{ mt: 2 }}>
</Grid>
<Grid item xs={12} md={3} textAlign="center">
<Box display="flex" justifyContent="center" sx={{ mt: 2 }}>
<IconButton color="default">
<InstagramIcon />
</IconButton>

14
src/components/homepage.tsx
View File

@ -72,7 +72,7 @@ const HomePage: React.FC = () => {
return (
<ThemeProvider theme={theme}>
<Box>
<Grid container sx={{ position: "relative", marginTop: { lg: '119px', xs: '65px' } }}>
<Grid container sx={{ position: "relative", marginTop: { lg: '79px', xs: '65px' } }}>
{/* Grid 1 */}
<Grid
item
@ -90,7 +90,7 @@ const HomePage: React.FC = () => {
backgroundSize: "contain",
backgroundPosition: " center",
backgroundRepeat: "no-repeat",
marginBottom: { xs: "10px", md: "39px", lg: '120px' },
marginBottom: { xs: "10px", md: "39px", lg: '60px' },
}}
>
@ -98,7 +98,11 @@ const HomePage: React.FC = () => {
</Grid>
</Grid>
<Grid container spacing={4} justifyContent="center" sx={{ padding: 4 }}>
<Grid item xs={12} md={12} lg={12} textAlign={"center"}>
<Typography variant="h4">Sustainability</Typography>
</Grid>
{items.map((text, index) => (
<Grid item xs={12} sm={6} md={4} key={index} >
<Box
sx={{
@ -117,7 +121,7 @@ const HomePage: React.FC = () => {
{/* Grid 2 */}
<Box
sx={{
height: { xl: 1800, lg: 2000, xs: 2770, sm: 3580, md: 3095 },
height: { xl: 1800, lg: 2000, xs: 2770, sm: 3580, md: 3075 },
width: '100%',
backgroundImage: { lg: `url(${newbackground})`, xs: null },
backgroundSize: "contain",
@ -135,7 +139,7 @@ const HomePage: React.FC = () => {
}}
>
{/* ROW 1 */}
<Grid item xs={12} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '328px' }, display: "flex", justifyContent: "center", alignItems: "center" }}>
<Grid item xs={12} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '358px' }, display: "flex", justifyContent: "center", alignItems: "center" }}>
<Box ref={mineRef} sx={{
height: { xs: "70%", lg: "215px" },
width: { xs: "83%", lg: "870px" },
@ -187,7 +191,7 @@ const HomePage: React.FC = () => {
{/* ROW 3 */}
<Grid item xs={12} lg={6} md={6} sx={{
background: '#ffffff00', height: { xl: "500px", lg: '401px' },
background: '#ffffff00', height: { xl: "500px", lg: '378px' },
display: "flex", justifyContent: { lg: 'flex-end', xs: 'center' }, alignItems: "center"
}}>
<Box ref={assembleRef} sx={{

32
src/components/wastemanagement.tsx
View File

@ -1,17 +1,35 @@
import { Grid, useMediaQuery, useTheme } from "@mui/material";
import wasteimage from "../components/imageandgif/loopwastemanage.png"; // Desktop Image
import mobileWasteImage from "../components/imageandgif/Soil & Water Contamination mob.png"; // Mobile Image
import { createTheme, ThemeProvider, useMediaQuery, useTheme, Box, Grid } from "@mui/material";
import wasteimage from "../components/imageandgif/loopwastemanage.png";
import mobileWasteImage from "../components/imageandgif/Soil & Water Contamination mob.png";
const customTheme = createTheme({
breakpoints: {
values: {
xs: 0,
sm: 600,
md: 1000,
lg: 1400,
xl: 1800,
},
},
});
const WasteImageSection = () => {
const theme = useTheme(); // Use the existing theme, don't redeclare it
const isMobile = useMediaQuery(theme.breakpoints.down("sm")); // For screens < 600px
const theme = useTheme(); // Use the theme inside the component
const isMobile = useMediaQuery(theme.breakpoints.down("md"));
// Function to scroll to the ref
const scrollToRef = (ref: React.RefObject<HTMLDivElement>) => {
if (ref.current) {
ref.current.scrollIntoView({ behavior: "smooth", block: "center" });
}
};
return (
<Grid
container
xs={12}
sx={{
height: "660px",
height: {lg:"820px", xs:'900px' , md:"900px"},
marginTop: { lg: 20, xs: 0 },
display: "flex",
justifyContent: "center",
@ -25,7 +43,7 @@ const WasteImageSection = () => {
style={{
width: "100%",
height: "100%",
objectFit: "cover"
objectFit: "contain"
}}
/>
</Grid>