fixed alignment issue of Box and img components #9
|
|
@ -19,7 +19,7 @@ import loopgreenback from "../components/imageandgif/newloop.png"
|
|||
import OurTeam from "./ourteam";
|
||||
import mobileLogo from "../components/imageandgif/loopsMoblogo.png"
|
||||
import mobileback from "../components/imageandgif/mobileback.png"
|
||||
|
||||
import { useMediaQuery, useTheme } from "@mui/material";
|
||||
import { createTheme, ThemeProvider } from "@mui/material/styles";
|
||||
import newbackground from "../components/imageandgif/full.png"
|
||||
import newbackgroundtwo from "../components/imageandgif/newbacktwo.png"
|
||||
|
|
@ -29,7 +29,6 @@ import WhyChooseUs from "./whyus";
|
|||
|
||||
|
||||
|
||||
|
||||
const HomePage: React.FC = () => {
|
||||
// Create refs for each content box
|
||||
const mineRef = useRef<HTMLDivElement>(null);
|
||||
|
|
@ -46,12 +45,16 @@ const HomePage: React.FC = () => {
|
|||
"Loop Sustainability extends the life cycle of electronics through advanced technology and smart algorithms, enabling efficient reuse and responsible recycling.",
|
||||
"We collaborate with consumer brands, retailers, recyclers, repair centers, policymakers, and more—all working together to reduce e-waste and drive sustainability.",
|
||||
];
|
||||
// const theme = useTheme();
|
||||
// const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
|
||||
|
||||
// Function to scroll to the ref
|
||||
const scrollToRef = (ref: React.RefObject<HTMLDivElement>) => {
|
||||
if (ref.current) {
|
||||
ref.current.scrollIntoView({ behavior: "smooth", block: "center" });
|
||||
}
|
||||
};
|
||||
|
||||
const theme = createTheme({
|
||||
breakpoints: {
|
||||
values: {
|
||||
|
|
@ -59,7 +62,7 @@ const HomePage: React.FC = () => {
|
|||
sm: 600, // Default
|
||||
md: 1000, // Default
|
||||
lg: 1400, // Default
|
||||
xl: 1800, // Default
|
||||
xl: 1600, // Default
|
||||
|
||||
},
|
||||
},
|
||||
|
|
@ -68,7 +71,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: '119px', xs: '65px' } }}>
|
||||
{/* Grid 1 */}
|
||||
<Grid
|
||||
item
|
||||
|
|
@ -86,7 +89,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: '120px' },
|
||||
}}
|
||||
>
|
||||
|
||||
|
|
@ -113,11 +116,11 @@ const HomePage: React.FC = () => {
|
|||
{/* Grid 2 */}
|
||||
<Box
|
||||
sx={{
|
||||
height: { xl: 1800, lg: 2000, xs: 2770, sm: 3580 ,md:2695 },
|
||||
height: { xl: 1800, lg: 2000, xs: 2770, sm: 3580, md: 3095 },
|
||||
width: '100%',
|
||||
backgroundImage: { lg: `url(${newbackground})`, xs: `url(${mobileback})` },
|
||||
backgroundImage: { lg: `url(${newbackground})`, xs: null },
|
||||
backgroundSize: "contain",
|
||||
backgroundPosition: { lg: "center", xs: "50% 86%" , md: "50% 80%" },
|
||||
backgroundPosition: { lg: "center"},
|
||||
backgroundRepeat: "no-repeat",
|
||||
paddingBottom: { lg: 20, xs: 0 }
|
||||
}}
|
||||
|
|
@ -134,7 +137,7 @@ const HomePage: React.FC = () => {
|
|||
<Grid item xs={12} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '328px' }, display: "flex", justifyContent: "center", alignItems: "center" }}>
|
||||
<Box ref={mineRef} sx={{
|
||||
height: { xs: "70%", lg: "215px" },
|
||||
width: { xs: "80%", lg: "870px" },
|
||||
width: { xs: "83%", lg: "870px" },
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
flexDirection: { xs: "column", lg: "row" },
|
||||
|
|
@ -144,8 +147,8 @@ const HomePage: React.FC = () => {
|
|||
textAlign: 'center',
|
||||
marginBottom: { xs: "20px", md: "0" },
|
||||
}}>
|
||||
<Box sx={{ width: { xs: "60%", md: "100%" } }}>
|
||||
<img src={gifone} alt="Gif" style={{ width: "100%" }} />
|
||||
<Box sx={{ width: { xs: "60%", md: "70%" } }}>
|
||||
<img src={gifone} alt="Gif" style={{ width: "91%" }} />
|
||||
</Box>
|
||||
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
|
||||
<Typography variant="h4">Mine from nature</Typography>
|
||||
|
|
@ -153,10 +156,10 @@ const HomePage: React.FC = () => {
|
|||
</Box>
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item xs={6} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', md:'none', sm: 'block' , lg:'block' } }}></Grid>
|
||||
<Grid item xs={6} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', md: 'none', sm: 'block', lg: 'block' } }}></Grid>
|
||||
|
||||
{/* ROW 2 */}
|
||||
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' , md:'none',lg:'block' } }}></Grid>
|
||||
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block', md: 'none', lg: 'block' } }}></Grid>
|
||||
<Grid item xs={12} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px', }, display: "flex", justifyContent: { lg: "flex-start", xs: "center" }, alignItems: "center" }}>
|
||||
<Box ref={manufactureRef} sx={{
|
||||
height: { xs: "472px", lg: "215px" },
|
||||
|
|
@ -174,7 +177,7 @@ const HomePage: React.FC = () => {
|
|||
<Typography variant="h4">Manufacturing</Typography>
|
||||
<p>Materials are processed in energy-intensive factories that rely on fossil fuels, generating high carbon emissions </p>
|
||||
</Box>
|
||||
<Box sx={{ width: { lg: '50%' } }}>
|
||||
<Box sx={{ width: { lg: '50%' , md:'67%' } }}>
|
||||
<img src={giftwo} alt="Gif" style={{ width: "100%" }} />
|
||||
</Box>
|
||||
|
||||
|
|
@ -187,7 +190,7 @@ const HomePage: React.FC = () => {
|
|||
display: "flex", justifyContent: { lg: 'flex-end', xs: 'center' }, alignItems: "center"
|
||||
}}>
|
||||
<Box ref={assembleRef} sx={{
|
||||
height: { xs: "332px", lg: "215px", sm: '500px' },
|
||||
height: { xs: "332px", lg: "215px", sm: '500px' , md:'500px' },
|
||||
width: { xs: "80%", lg: "595px" },
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
|
|
@ -199,7 +202,7 @@ const HomePage: React.FC = () => {
|
|||
marginBottom: { xs: "20px", md: "0" },
|
||||
}}>
|
||||
|
||||
<Box sx={{ width: { xs: "60%", md: "100%" } }}>
|
||||
<Box sx={{ width: { xs: "60%", md:'70%' } }}>
|
||||
<img src={gifthree} alt="Gif" style={{ width: "100%" }} />
|
||||
</Box>
|
||||
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
|
||||
|
|
@ -209,10 +212,10 @@ const HomePage: React.FC = () => {
|
|||
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block',md:'none' ,lg:'block'} }}></Grid>
|
||||
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block', md: 'none', lg: 'block' } }}></Grid>
|
||||
|
||||
{/* ROW 4 */}
|
||||
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block', md:'none',lg:'block' } }}></Grid>
|
||||
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block', md: 'none', lg: 'block' } }}></Grid>
|
||||
<Grid item xs={12} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: "flex", justifyContent: { lg: 'flex-start', xs: 'center' }, alignItems: "center" }}>
|
||||
<Box ref={useRefBox} sx={{
|
||||
height: { xs: "451px", lg: "215px", sm: '555px' },
|
||||
|
|
@ -231,14 +234,14 @@ const HomePage: React.FC = () => {
|
|||
<p>Devices are used by consumers and businesses, but their production and usage contribute significantly to carbon footprints, energy consumption, and waste generation.</p>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ width: { xs: "60%", md: "100%" } }}>
|
||||
<Box sx={{ width: { xs: "60%",md:'70%' } }}>
|
||||
<img src={giffour} alt="Gif" style={{ width: "100%" }} />
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
</Grid>
|
||||
{/* new2 */}
|
||||
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block',lg:'block' } }}></Grid>
|
||||
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block', lg: 'block' } }}></Grid>
|
||||
|
||||
|
||||
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid>
|
||||
|
|
@ -352,10 +355,17 @@ const HomePage: React.FC = () => {
|
|||
</Box>
|
||||
</Grid>
|
||||
{/* mobile only */}
|
||||
<Grid container spacing={2} rowSpacing={{ xs: 12, sm: 14, md: 34 }} sx={{ display: { xs: "flex", md: "flex" , lg:'none' } }}>
|
||||
<Grid container spacing={2} rowSpacing={{ xs: 12, sm: 26, md: 40 }}
|
||||
sx={{
|
||||
display: { xs: "flex", md: "flex", lg: 'none' },
|
||||
backgroundImage: { lg: null, xs: `url(${mobileback})` },
|
||||
backgroundSize: "contain",
|
||||
backgroundPosition: { xs: "50% 60%", md:'50% 63%' },
|
||||
backgroundRepeat: "no-repeat",
|
||||
}}>
|
||||
{/* Reuse */}
|
||||
<Grid item xs={6}>
|
||||
<Box sx={{ p: 2, textAlign:{xs: "left" , md:'center'}, borderRadius: 2 }}>
|
||||
<Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}>
|
||||
<Box sx={{ background: "#95CD41", p: 1 }}>
|
||||
<Typography variant="h4">Reuse</Typography>
|
||||
<Typography variant="body2">
|
||||
|
|
@ -370,7 +380,7 @@ const HomePage: React.FC = () => {
|
|||
|
||||
{/* Repair */}
|
||||
<Grid item xs={6}>
|
||||
<Box sx={{ p: 2, textAlign:{xs: "left" , md:'center'}, borderRadius: 2 }}>
|
||||
<Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}>
|
||||
<Box sx={{ background: "#95CD41", p: 1 }}>
|
||||
<Typography variant="h4">Repair</Typography>
|
||||
<Typography variant="body2">
|
||||
|
|
@ -387,12 +397,12 @@ const HomePage: React.FC = () => {
|
|||
|
||||
{/* Disintegrate (Added Extra Margin to Separate from Top Row) */}
|
||||
<Grid item xs={6} sx={{ mt: 2 }}>
|
||||
<Box sx={{ p: 2, textAlign:{xs: "left" , md:'center'}, borderRadius: 2 }}>
|
||||
<Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}>
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<img src={gifseven} alt="Disintegrate Gif" style={{ width: "100%" }} />
|
||||
</Box>
|
||||
<Box sx={{ background: "#95CD41", p: 1 }}>
|
||||
<Typography variant="h4" sx={{fontSize:"1.6rem"}}>Disintegrate</Typography>
|
||||
<Typography variant="h4" sx={{ fontSize: "1.3rem" }}>Disintegrate</Typography>
|
||||
<Typography variant="body2" >When electronics can no longer be repaired or reused, we safely disintegrate them into valuable materials, ensuring they are properly processed and recycled.</Typography>
|
||||
|
||||
</Box>
|
||||
|
|
@ -400,13 +410,13 @@ const HomePage: React.FC = () => {
|
|||
</Grid>
|
||||
|
||||
{/* Remine */}
|
||||
<Grid item xs={6} sx={{ mt: 2 } }>
|
||||
<Box sx={{ p: 2,textAlign:{xs: "left" , md:'center'}, borderRadius: 2 }}>
|
||||
<Grid item xs={6} sx={{ mt: 2 }}>
|
||||
<Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}>
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<img src={gifeight} alt="Remine Gif" style={{ width: "100%" }} />
|
||||
</Box>
|
||||
<Box sx={{ background: "#95CD41", p: 1, textAlign:{xs: "left" , md:'center'}, }}>
|
||||
<Typography variant="h4" sx={{fontSize:'1.6rem'}}>Remine</Typography>
|
||||
<Box sx={{ background: "#95CD41", p: 1, textAlign: { xs: "left", md: 'center' }, }}>
|
||||
<Typography variant="h4" sx={{ fontSize: '1.6rem' }}>Remine</Typography>
|
||||
<Typography variant="body2" >We take the disintegrated materials and remines them for precious metals ,turning waste back into usable resources .closing the loop on electronic waste.</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
|
@ -419,7 +429,6 @@ const HomePage: React.FC = () => {
|
|||
<Grid
|
||||
container
|
||||
xs={12}
|
||||
|
||||
sx={{
|
||||
height: "660px",
|
||||
marginTop: { lg: 20, xs: 0 },
|
||||
|
|
@ -430,7 +439,7 @@ const HomePage: React.FC = () => {
|
|||
}}
|
||||
>
|
||||
<img
|
||||
src={wasteimage}
|
||||
src={ wasteimage} // Different image for mobile
|
||||
alt="Waste Image"
|
||||
style={{
|
||||
width: "100%",
|
||||
|
|
@ -439,7 +448,7 @@ const HomePage: React.FC = () => {
|
|||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<WhyChooseUs/>
|
||||
<WhyChooseUs />
|
||||
<OurTeam />
|
||||
|
||||
<Footer />
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 156 KiB |
Loading…
Reference in New Issue