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
Showing only changes of commit 5c41c55c51 - Show all commits

13
src/components/footer.tsx
View File

@ -12,7 +12,7 @@ const Footer: React.FC = () => {
<Container maxWidth="lg"> <Container maxWidth="lg">
<Grid container spacing={4}> <Grid container spacing={4}>
{/* Loop Sustainability */} {/* Loop Sustainability */}
<Grid item xs={12} md={4}> <Grid item xs={12} md={3}>
<Typography variant="h6" fontWeight="bold"> <Typography variant="h6" fontWeight="bold">
Loop Sustainability Loop Sustainability
</Typography> </Typography>
@ -22,7 +22,7 @@ const Footer: React.FC = () => {
</Grid> </Grid>
{/* Get in Touch */} {/* Get in Touch */}
<Grid item xs={12} md={4}> <Grid item xs={7} md={3}>
<Typography variant="h6" fontWeight="bold"> <Typography variant="h6" fontWeight="bold">
Get in Touch Get in Touch
</Typography> </Typography>
@ -45,11 +45,11 @@ const Footer: React.FC = () => {
</Grid> </Grid>
{/* Company Links */} {/* Company Links */}
<Grid item xs={12} md={4} textAlign="right"> <Grid item xs={5} md={3} textAlign="center">
<Typography variant="h6" fontWeight="bold"> <Typography variant="h6" fontWeight="bold">
Company Company
</Typography> </Typography>
<Box sx={{ mt: 1 }}> <Box sx={{ mt: 1 }}>
{["Service", "Features", "Our Team", "Portfolio", "Blog", "Contact Us"].map((text) => ( {["Service", "Features", "Our Team", "Portfolio", "Blog", "Contact Us"].map((text) => (
<Link href="#" key={text} variant="body2" display="block" sx={{ color: "gray", mt: 0.5, textDecoration: "none", "&:hover": { textDecoration: "underline" } }}> <Link href="#" key={text} variant="body2" display="block" sx={{ color: "gray", mt: 0.5, textDecoration: "none", "&:hover": { textDecoration: "underline" } }}>
{text} {text}
@ -58,7 +58,10 @@ const Footer: React.FC = () => {
</Box> </Box>
{/* Social Media Icons */} {/* 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"> <IconButton color="default">
<InstagramIcon /> <InstagramIcon />
</IconButton> </IconButton>

14
src/components/homepage.tsx
View File

@ -72,7 +72,7 @@ const HomePage: React.FC = () => {
return ( return (
<ThemeProvider theme={theme}> <ThemeProvider theme={theme}>
<Box> <Box>
<Grid container sx={{ position: "relative", marginTop: { lg: '119px', xs: '65px' } }}> <Grid container sx={{ position: "relative", marginTop: { lg: '79px', xs: '65px' } }}>
{/* Grid 1 */} {/* Grid 1 */}
<Grid <Grid
item item
@ -90,7 +90,7 @@ const HomePage: React.FC = () => {
backgroundSize: "contain", backgroundSize: "contain",
backgroundPosition: " center", backgroundPosition: " center",
backgroundRepeat: "no-repeat", 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> </Grid>
<Grid container spacing={4} justifyContent="center" sx={{ padding: 4 }}> <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) => ( {items.map((text, index) => (
<Grid item xs={12} sm={6} md={4} key={index} > <Grid item xs={12} sm={6} md={4} key={index} >
<Box <Box
sx={{ sx={{
@ -117,7 +121,7 @@ const HomePage: React.FC = () => {
{/* Grid 2 */} {/* Grid 2 */}
<Box <Box
sx={{ 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%', width: '100%',
backgroundImage: { lg: `url(${newbackground})`, xs: null }, backgroundImage: { lg: `url(${newbackground})`, xs: null },
backgroundSize: "contain", backgroundSize: "contain",
@ -135,7 +139,7 @@ const HomePage: React.FC = () => {
}} }}
> >
{/* ROW 1 */} {/* 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={{ <Box ref={mineRef} sx={{
height: { xs: "70%", lg: "215px" }, height: { xs: "70%", lg: "215px" },
width: { xs: "83%", lg: "870px" }, width: { xs: "83%", lg: "870px" },
@ -187,7 +191,7 @@ const HomePage: React.FC = () => {
{/* ROW 3 */} {/* ROW 3 */}
<Grid item xs={12} lg={6} md={6} sx={{ <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" display: "flex", justifyContent: { lg: 'flex-end', xs: 'center' }, alignItems: "center"
}}> }}>
<Box ref={assembleRef} sx={{ <Box ref={assembleRef} sx={{

32
src/components/wastemanagement.tsx
View File

@ -1,17 +1,35 @@
import { Grid, useMediaQuery, useTheme } from "@mui/material"; import { createTheme, ThemeProvider, useMediaQuery, useTheme, Box, Grid } from "@mui/material";
import wasteimage from "../components/imageandgif/loopwastemanage.png"; // Desktop Image import wasteimage from "../components/imageandgif/loopwastemanage.png";
import mobileWasteImage from "../components/imageandgif/Soil & Water Contamination mob.png"; // Mobile Image 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 WasteImageSection = () => {
const theme = useTheme(); // Use the existing theme, don't redeclare it const theme = useTheme(); // Use the theme inside the component
const isMobile = useMediaQuery(theme.breakpoints.down("sm")); // For screens < 600px 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 ( return (
<Grid <Grid
container container
xs={12} xs={12}
sx={{ sx={{
height: {lg:"660px", xs:'900px'}, height: {lg:"820px", xs:'900px' , md:"900px"},
marginTop: { lg: 20, xs: 0 }, marginTop: { lg: 20, xs: 0 },
display: "flex", display: "flex",
justifyContent: "center", justifyContent: "center",
@ -25,7 +43,7 @@ const WasteImageSection = () => {
style={{ style={{
width: "100%", width: "100%",
height: "100%", height: "100%",
objectFit: "cover" objectFit: "contain"
}} }}
/> />
</Grid> </Grid>