Merge pull request 'fix/layout' (#5) from fix/layout into main
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
Reviewed-on: #5
This commit is contained in:
commit
6383716b8f
|
|
@ -26,7 +26,8 @@ const Header: React.FC = () => {
|
|||
lg: "96.8vw",
|
||||
xl: "96.4vw"
|
||||
},
|
||||
color: "black"
|
||||
color: "black",
|
||||
zIndex:11111
|
||||
}}
|
||||
>
|
||||
<Toolbar sx={{ display: "flex", justifyContent: "space-between" }}>
|
||||
|
|
@ -35,7 +36,7 @@ const Header: React.FC = () => {
|
|||
<img
|
||||
src={headerlogo}
|
||||
alt="Logo"
|
||||
style={{ height: "40px", cursor: "pointer", width:'159px' }}
|
||||
style={{ height: "50px", cursor: "pointer", width:'159px' }}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@ import { createTheme, ThemeProvider } from "@mui/material/styles";
|
|||
import newbackground from "../components/imageandgif/full.png"
|
||||
import newbackgroundtwo from "../components/imageandgif/newbacktwo.png"
|
||||
import wasteimage from "../components/imageandgif/loopwastemanage.png"
|
||||
import WhyChooseUs from "./whyus";
|
||||
|
||||
|
||||
|
||||
|
|
@ -67,7 +68,7 @@ const HomePage: React.FC = () => {
|
|||
return (
|
||||
<ThemeProvider theme={theme}>
|
||||
<Box>
|
||||
<Grid container sx={{ position: "relative", marginTop: '119px' }}>
|
||||
<Grid container sx={{ position: "relative", marginTop: {lg :'119px' , xs:'65px'} }}>
|
||||
{/* Grid 1 */}
|
||||
<Grid
|
||||
item
|
||||
|
|
@ -100,7 +101,7 @@ const HomePage: React.FC = () => {
|
|||
p: 3,
|
||||
borderRadius: "12px",
|
||||
backgroundColor: "#7c77770d",
|
||||
textAlign: "left",
|
||||
textAlign: "center",
|
||||
|
||||
}}
|
||||
>
|
||||
|
|
@ -112,17 +113,18 @@ const HomePage: React.FC = () => {
|
|||
{/* Grid 2 */}
|
||||
<Box
|
||||
sx={{
|
||||
height: { xl: 1800, lg: 2000, xs: 2830, sm: 3580 },
|
||||
height: { xl: 1800, lg: 2000, xs: 2770, sm: 3580 },
|
||||
width: '100%',
|
||||
backgroundImage: { lg: `url(${newbackground})`, xs: `url(${mobileback})` },
|
||||
backgroundSize: "contain",
|
||||
backgroundPosition: { lg: "center", xs: "50% 87%" },
|
||||
backgroundPosition: { lg: "center", xs: "50% 86%" },
|
||||
backgroundRepeat: "no-repeat",
|
||||
paddingBottom: { lg: 20, xs: 0 }
|
||||
}}
|
||||
>
|
||||
<Grid
|
||||
container
|
||||
|
||||
sx={{
|
||||
|
||||
width: '100%',
|
||||
|
|
@ -131,7 +133,7 @@ const HomePage: React.FC = () => {
|
|||
{/* ROW 1 */}
|
||||
<Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '328px' }, display: "flex", justifyContent: "center", alignItems: "center" }}>
|
||||
<Box ref={mineRef} sx={{
|
||||
height: { xs: "495px", lg: "215px" },
|
||||
height: { xs: "70%", lg: "215px" },
|
||||
width: { xs: "80%", lg: "870px" },
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
|
|
@ -155,7 +157,7 @@ const HomePage: React.FC = () => {
|
|||
|
||||
{/* ROW 2 */}
|
||||
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid>
|
||||
<Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: "flex", justifyContent: { lg: "flex-start", xs: "center" }, alignItems: "center" }}>
|
||||
<Grid item xs={12} lg={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" },
|
||||
width: { xs: "80%", lg: "552px" },
|
||||
|
|
@ -180,8 +182,10 @@ const HomePage: React.FC = () => {
|
|||
</Grid>
|
||||
|
||||
{/* ROW 3 */}
|
||||
<Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '401px' },
|
||||
display: "flex", justifyContent: { lg: 'flex-end', xs: 'center' }, alignItems: "center" }}>
|
||||
<Grid item xs={12} lg={6} sx={{
|
||||
background: '#ffffff00', height: { xl: "500px", lg: '401px' },
|
||||
display: "flex", justifyContent: { lg: 'flex-end', xs: 'center' }, alignItems: "center"
|
||||
}}>
|
||||
<Box ref={assembleRef} sx={{
|
||||
height: { xs: "332px", lg: "215px", sm: '500px' },
|
||||
width: { xs: "80%", lg: "595px" },
|
||||
|
|
@ -211,7 +215,7 @@ const HomePage: React.FC = () => {
|
|||
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid>
|
||||
<Grid item xs={12} lg={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: "332px", lg: "215px" ,sm:'555px' },
|
||||
height: { xs: "451px", lg: "215px", sm: '555px' },
|
||||
width: { xs: "80%", lg: "550px" },
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
|
|
@ -226,11 +230,12 @@ const HomePage: React.FC = () => {
|
|||
<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>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ width: { xs: "60%", md: "100%" } }}>
|
||||
<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' } }}></Grid>
|
||||
|
|
@ -238,45 +243,48 @@ const HomePage: React.FC = () => {
|
|||
|
||||
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid>
|
||||
{/* newnew */}
|
||||
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' , sm:"center" }, alignItems: "center" }}>
|
||||
<Box ref={reuseRef} >
|
||||
<Box
|
||||
{/* desktop view */}
|
||||
{/* Reuse Section */}
|
||||
<Grid item xs={5} sm={6} lg={6}
|
||||
sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px', xs: '378px' }, display: { lg: 'flex', xs: 'none' }, justifyContent: "center", alignItems: "center" }}>
|
||||
<Box ref={reuseRef}
|
||||
sx={{
|
||||
width: { xs: "90%", lg: "350px" }, // Set fixed width
|
||||
height: { xs: "241px", lg: "180px" }, // Set fixed height
|
||||
paddingLeft: { xs: "10px", md: "10px" },
|
||||
paddingRight: { xs: "2px" },
|
||||
textAlign: { lg: "left", xs: "left" },
|
||||
backgroundColor: { xs: "#95CD41", lg: "white" },
|
||||
width: { xs: "90%", lg: "350px" },
|
||||
height: { xs: "340px", lg: "240px" },
|
||||
textAlign: "left",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
alignItems: "center",
|
||||
margin: { xs: 1 }
|
||||
}}>
|
||||
<Box sx={{ width: "100%", textAlign: "left", background: { xs: '#95CD41', lg: 'white' }, p: 2 }}>
|
||||
<Typography variant="h4">Reuse</Typography>
|
||||
<Typography variant="body2" >We help businesses reuse their old electronic devices, repurposing functional parts and components for future use or resale, reducing overall environmental impact.</Typography>
|
||||
<Typography variant="body2">
|
||||
We help businesses reuse their old electronic devices, repurposing functional parts and components for future use or resale, reducing overall environmental impact.
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ width: { xs: "100%", md: "100%" } }}>
|
||||
<Box sx={{ width: "100%", maxWidth: "300px", mt: 2 }}>
|
||||
<img src={gifsix} alt="Gif" style={{ width: "100%" }} />
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}>
|
||||
<Box ref={reuseRef} >
|
||||
<Box
|
||||
|
||||
{/* Repair Section */}
|
||||
<Grid item xs={5} sm={6} lg={6}
|
||||
sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px', xs: '378px' }, display: { lg: 'flex', xs: 'none' }, justifyContent: "center", alignItems: "center" }}>
|
||||
<Box ref={reuseRef}
|
||||
sx={{
|
||||
width: { xs: "90%", lg: "350px" }, // Set fixed width
|
||||
height: { xs: "241px", lg: "180px" }, // Set fixed height
|
||||
paddingLeft: { xs: "10px", md: "10px" },
|
||||
paddingRight: { xs: "2px" },
|
||||
textAlign: { lg: "left", xs: "left" },
|
||||
backgroundColor: { xs: "#95CD41", lg: "white" },
|
||||
width: { xs: "90%", lg: "350px" },
|
||||
height: { xs: "340px", lg: "240px" },
|
||||
textAlign: "left",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
alignItems: "center",
|
||||
margin: { xs: 1 }
|
||||
}}>
|
||||
<Box sx={{ width: "100%", textAlign: "left", background: { xs: '#95CD41', lg: 'white' }, p: 2 }}>
|
||||
<Typography variant="h4">Repair</Typography>
|
||||
<Typography variant="body2">
|
||||
Loop Sustainability steps in to repair damaged or outdated electronics.
|
||||
|
|
@ -284,16 +292,17 @@ const HomePage: React.FC = () => {
|
|||
reducing the need for new products.
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ width: { xs: "100%", md: "100%" } }}>
|
||||
<Box sx={{ width: "100%", maxWidth: "300px", mt: 2 }}>
|
||||
<img src={giffive} alt="Gif" style={{ width: "100%" }} />
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
|
||||
{/* newnewnwe */}
|
||||
<Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px', xs: '800px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}>
|
||||
<Box ref={disintegrateRef} sx={{
|
||||
<Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px', xs: '363px' }, display: { lg: 'flex', xs: 'none' }, justifyContent: { lg: 'center' }, alignItems: "center" }}>
|
||||
<Box ref={disintegrateRef}
|
||||
sx={{
|
||||
height: { xs: "332px", lg: "115px" },
|
||||
width: { xs: "92%", lg: "250px" },
|
||||
zIndex: 1,
|
||||
|
|
@ -317,7 +326,7 @@ const HomePage: React.FC = () => {
|
|||
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}>
|
||||
<Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px', xs: '363px' }, display: { lg: 'flex', xs: 'none' }, justifyContent: { lg: 'center' }, alignItems: "center" }}>
|
||||
<Box ref={remineRef} sx={{
|
||||
height: { xs: "332px", lg: "115px" },
|
||||
width: { xs: "92%", lg: "250px" },
|
||||
|
|
@ -342,6 +351,68 @@ const HomePage: React.FC = () => {
|
|||
|
||||
</Box>
|
||||
</Grid>
|
||||
{/* mobile only */}
|
||||
<Grid container spacing={2} rowSpacing={12} sx={{ display: { xs: "flex", md: "none" } }}>
|
||||
{/* Reuse */}
|
||||
<Grid item xs={6}>
|
||||
<Box sx={{ p: 2, textAlign: "left", borderRadius: 2 }}>
|
||||
<Box sx={{ background: "#95CD41", p: 1 }}>
|
||||
<Typography variant="h4">Reuse</Typography>
|
||||
<Typography variant="body2">
|
||||
We help businesses reuse their old electronic devices, repurposing functional parts and components for future use or resale, reducing overall environmental impact.
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<img src={gifsix} alt="Reuse Gif" style={{ width: "100%" }} />
|
||||
</Box>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
{/* Repair */}
|
||||
<Grid item xs={6}>
|
||||
<Box sx={{ p: 2, textAlign: "left", borderRadius: 2 }}>
|
||||
<Box sx={{ background: "#95CD41", p: 1 }}>
|
||||
<Typography variant="h4">Repair</Typography>
|
||||
<Typography variant="body2">
|
||||
Loop Sustainability steps in to repair damaged or outdated electronics.
|
||||
Our repair services extend the life of devices, minimizing waste and
|
||||
reducing the need for new products.
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<img src={giffive} alt="Repair Gif" style={{ width: "100%" }} />
|
||||
</Box>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
{/* Disintegrate (Added Extra Margin to Separate from Top Row) */}
|
||||
<Grid item xs={6} sx={{ mt: 2 }}>
|
||||
<Box sx={{ p: 2, textAlign: "left", 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="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>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
{/* Remine */}
|
||||
<Grid item xs={6} sx={{ mt: 2 } }>
|
||||
<Box sx={{ p: 2, textAlign: "center", borderRadius: 2 }}>
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<img src={gifeight} alt="Remine Gif" style={{ width: "100%" }} />
|
||||
</Box>
|
||||
<Box sx={{ background: "#95CD41", p: 1 ,textAlign:'left' }}>
|
||||
<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>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
</Grid>
|
||||
|
||||
</Box>
|
||||
|
|
@ -368,8 +439,11 @@ const HomePage: React.FC = () => {
|
|||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<WhyChooseUs/>
|
||||
<OurTeam />
|
||||
|
||||
<Footer />
|
||||
|
||||
</Box>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,53 @@
|
|||
import React from "react";
|
||||
import { Box, Grid, Typography } from "@mui/material";
|
||||
import { styled } from "@mui/system";
|
||||
|
||||
const Circle = styled(Box)(({ theme }) => ({
|
||||
width: 150, // Increased size
|
||||
height: 150,
|
||||
borderRadius: "50%",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
border: "5px solid",
|
||||
transition: "0.3s",
|
||||
[theme.breakpoints.down("sm")]: {
|
||||
width: 120, // Adjusting for mobile
|
||||
height: 120,
|
||||
},
|
||||
}));
|
||||
|
||||
const items = [
|
||||
{ text: "Partnerships", color: "#E3C34D" },
|
||||
{ text: "Technology", color: "#90B5D4" },
|
||||
{ text: "Professionalism", color: "#A2C08A" },
|
||||
{ text: "Transparency", color: "#EDEAE3" },
|
||||
];
|
||||
|
||||
const WhyChooseUs: React.FC = () => {
|
||||
return (
|
||||
<Box sx={{ textAlign: "center", mt: 5 }}>
|
||||
<Typography variant="h5" fontWeight="bold" mb={3}>
|
||||
Why Choose Us?
|
||||
</Typography>
|
||||
<Grid
|
||||
container
|
||||
spacing={1}
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
>
|
||||
{items.map((item, index) => (
|
||||
<Grid item key={index} xs={6} sm={2} display="flex" justifyContent="center">
|
||||
<Circle sx={{ borderColor: item.color }}>
|
||||
<Typography variant="body1" fontWeight="500">
|
||||
{item.text}
|
||||
</Typography>
|
||||
</Circle>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default WhyChooseUs;
|
||||
Loading…
Reference in New Issue