462 lines
24 KiB
TypeScript
462 lines
24 KiB
TypeScript
import React, { useRef } from "react";
|
|
import { Box, Grid, Typography } from "@mui/material";
|
|
import logo from "../loopslogo2.png";
|
|
import backone from "../components/imageandgif/newbgone.png";
|
|
import backtwo from "../components/imageandgif/newnewtwo.png";
|
|
import backthree from "../components/imageandgif/newthree.png";
|
|
import gifone from "../components/imageandgif/gifone.gif";
|
|
import giftwo from "../components/imageandgif/giftwo.gif";
|
|
import gifthree from "../components/imageandgif/gifthree.gif";
|
|
import giffour from "../components/imageandgif/giffour.gif";
|
|
import giffive from "../components/imageandgif/giffive.gif";
|
|
import gifsix from "../components/imageandgif/gifsix.gif";
|
|
import gifseven from "../components/imageandgif/gifseven.gif";
|
|
import gifeight from "../components/imageandgif/gifeight.gif";
|
|
import loopgreen from "../components/imageandgif/newloop.png";
|
|
import PartnerWork from "./ourwork";
|
|
import Footer from "./footer";
|
|
import loopgreenback from "../components/imageandgif/loopgreenbackground.png"
|
|
import OurTeam from "./ourteam";
|
|
import mobileLogo from "../components/imageandgif/loopsMoblogo.png"
|
|
import { createTheme, ThemeProvider } from "@mui/material/styles";
|
|
|
|
|
|
const HomePage: React.FC = () => {
|
|
// Create refs for each content box
|
|
const mineRef = useRef<HTMLDivElement>(null);
|
|
const manufactureRef = useRef<HTMLDivElement>(null);
|
|
const assembleRef = useRef<HTMLDivElement>(null);
|
|
const useRefBox = useRef<HTMLDivElement>(null);
|
|
const repairRef = useRef<HTMLDivElement>(null);
|
|
const disintegrateRef = useRef<HTMLDivElement>(null);
|
|
const remineRef = useRef<HTMLDivElement>(null);
|
|
const impactRef = useRef<HTMLDivElement>(null);
|
|
const reuseRef = useRef<HTMLDivElement>(null);
|
|
|
|
// 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: {
|
|
xs: 0, // Default
|
|
sm: 600, // Default
|
|
md: 1000, // Default
|
|
lg: 1400, // Default
|
|
xl: 1800, // Default
|
|
|
|
},
|
|
},
|
|
});
|
|
|
|
return (
|
|
<ThemeProvider theme={theme}>
|
|
<Box>
|
|
<Grid container sx={{ position: "relative", marginTop: '119px' }}>
|
|
{/* Grid 1 */}
|
|
<Grid
|
|
item
|
|
xs={12}
|
|
sx={{
|
|
marginTop: "0px",
|
|
height: { xs: "190px", md: "300px" },
|
|
backgroundColor: "white",
|
|
position: "relative",
|
|
backgroundImage: {
|
|
xs: `url(${mobileLogo})`, // Mobile background image
|
|
md: `url(${logo})`, // Desktop background image
|
|
},
|
|
backgroundSize: "contain",
|
|
backgroundPosition: "right center",
|
|
backgroundRepeat: "no-repeat",
|
|
marginBottom: { xs: "10px", md: "399px" },
|
|
}}
|
|
>
|
|
|
|
<Box
|
|
sx={{
|
|
position: "absolute",
|
|
top: { xs: "70%", md: "80%" },
|
|
left: { xs: "2%", md: "5%" },
|
|
transform: "translateY(-30%)",
|
|
height: { xs: "235px", md: "440px" },
|
|
width: { xs: "150px", md: "220px" },
|
|
backgroundColor: "#eee0e0a3",
|
|
zIndex: 1,
|
|
padding: "20px",
|
|
overflowY: "auto",
|
|
borderRadius: "8px",
|
|
display: { xs: "none", md: "block" },
|
|
}}
|
|
>
|
|
<ul style={{
|
|
listStyleType: "none",
|
|
padding: "0",
|
|
margin: "0",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: "10px"
|
|
}}>
|
|
<li onClick={() => scrollToRef(mineRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Mine</li>
|
|
<li onClick={() => scrollToRef(manufactureRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Manufacture</li>
|
|
<li onClick={() => scrollToRef(assembleRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Assemble</li>
|
|
<li onClick={() => scrollToRef(useRefBox)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Use</li>
|
|
<li onClick={() => scrollToRef(reuseRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Reuse</li>
|
|
<li onClick={() => scrollToRef(repairRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Repair</li>
|
|
<li onClick={() => scrollToRef(disintegrateRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Disintegrate</li>
|
|
<li onClick={() => scrollToRef(remineRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Remine</li>
|
|
<li onClick={() => scrollToRef(impactRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Impact</li>
|
|
</ul>
|
|
</Box>
|
|
</Grid>
|
|
|
|
{/* Grid 2 */}
|
|
<Grid
|
|
item
|
|
xs={12}
|
|
sx={{
|
|
height: { xs: "900px", md: "965px" }, // Increased height for mobile view
|
|
backgroundColor: "white",
|
|
position: "relative",
|
|
backgroundImage: {
|
|
xs: null,
|
|
md: `url(${backone})`,
|
|
},
|
|
backgroundSize: "contain",
|
|
backgroundPositionX: "50.5%",
|
|
backgroundPositionY: "60%",
|
|
backgroundRepeat: "no-repeat",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
textAlign: 'center',
|
|
padding: { xs: "20px", md: "0" },
|
|
}}
|
|
>
|
|
<Box
|
|
ref={mineRef}
|
|
sx={{
|
|
position: "absolute",
|
|
top: { xs: "15%", lg: "4%" },
|
|
left: { lg: "10%" },
|
|
transform: "translateY(-50%)",
|
|
height: { xs: "332px", lg: "200px" },
|
|
width: { xs: "80%", lg: "470px" },
|
|
zIndex: 1,
|
|
display: "flex",
|
|
flexDirection: { xs: "column", lg: "row" },
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
padding: "10px",
|
|
textAlign: 'center',
|
|
marginBottom: { xs: "20px", md: "0" }, // Add margin bottom for spacing
|
|
}}
|
|
>
|
|
<Box sx={{ width: { xs: "60%", md: "100%" } }}>
|
|
<img src={gifone} alt="Gif" style={{ width: "100%" }} />
|
|
</Box>
|
|
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" } }}>
|
|
<Typography variant="h4">Mine from nature</Typography>
|
|
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis doloremque architecto eos provident et deserunt temporibus non iusto quis inventore expedita neque</p>
|
|
</Box>
|
|
</Box>
|
|
|
|
<Box
|
|
ref={manufactureRef}
|
|
sx={{
|
|
position: "relative",
|
|
top: { xs: "11%", lg: "-10%" }, // Adjust top for mobile
|
|
right: { lg: "-22%" },
|
|
height: { xs: "300px", md: "215px" },
|
|
width: { xs: "80%", md: "560px" },
|
|
backgroundColor: "white",
|
|
zIndex: 1,
|
|
display: "flex",
|
|
flexDirection: { xs: "column-reverse", lg: "row" },
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
padding: "10px",
|
|
textAlign: 'center',
|
|
marginBottom: { xs: "20px", md: "0" }, // Add margin bottom for spacing
|
|
}}
|
|
>
|
|
<Box sx={{ width: "60%", paddingLeft: { xs: "0", md: "10px" } }}>
|
|
<Typography variant="h4">Manufacture</Typography>
|
|
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis doloremque architecto eos provident et deserunt temporibus non iusto</p>
|
|
</Box>
|
|
<Box sx={{ width: "45%" }}>
|
|
<img src={giftwo} alt="Gif" style={{ width: "70%", height: "auto" }} />
|
|
</Box>
|
|
</Box>
|
|
|
|
<Box
|
|
ref={assembleRef}
|
|
sx={{
|
|
position: "absolute",
|
|
top: { xs: "74%", lg: "66%" },
|
|
left: { lg: "12%" },
|
|
height: { xs: "300px", md: "167px" },
|
|
width: { xs: "80%", md: "534px" },
|
|
backgroundColor: "white",
|
|
display: "flex",
|
|
flexDirection: { xs: "column-reverse", lg: "row" },
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
padding: "10px",
|
|
textAlign: 'center',
|
|
zIndex: 1,
|
|
}}
|
|
>
|
|
<Box sx={{ width: "70%", paddingLeft: { xs: "0", md: "10px" } }}>
|
|
<Typography variant="h4">Assemble</Typography>
|
|
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis!</p>
|
|
</Box>
|
|
<Box sx={{ width: "70%" }}>
|
|
<img src={gifthree} alt="Gif" style={{ width: "85%", height: "auto" }} />
|
|
</Box>
|
|
</Box>
|
|
</Grid>
|
|
|
|
{/* Grid 3 */}
|
|
<Grid
|
|
item
|
|
xs={12}
|
|
sx={{
|
|
height: { xs: "600px", lg: "615px" },
|
|
backgroundColor: "white",
|
|
position: "relative",
|
|
backgroundImage: {
|
|
xs: null,
|
|
md: `url(${backtwo})`,
|
|
},
|
|
backgroundSize: "contain",
|
|
backgroundPositionX: "41.5%",
|
|
backgroundPositionY: "60%",
|
|
backgroundRepeat: "no-repeat",
|
|
display: { xs: "flex" },
|
|
flexDirection: { xs: "column-reverse", lg: "row" },
|
|
justifyContent: { xs: "center" },
|
|
alignItems: { xs: "center" },
|
|
textAlign: { xs: 'center' }
|
|
}}>
|
|
<Box
|
|
ref={useRefBox}
|
|
sx={{
|
|
position: "absolute",
|
|
top: { xs: "65%", lg: "17%" },
|
|
right: { xs: "8%", md: "25%" },
|
|
transform: "translateY(-50%)",
|
|
height: { xs: "150px", md: "167px" },
|
|
width: { xs: "80%", md: "523px" },
|
|
backgroundColor: "white",
|
|
zIndex: 1,
|
|
display: "flex",
|
|
flexDirection: { xs: "column-reverse", lg: 'row' },
|
|
justifyContent: "flex-start",
|
|
alignItems: "center",
|
|
padding: "10px",
|
|
}}
|
|
>
|
|
<Box sx={{ width: "70%", paddingLeft: "10px" }}>
|
|
<Typography variant="h4">Use</Typography>
|
|
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis !</p>
|
|
</Box>
|
|
<Box sx={{ width: "70%" }}>
|
|
<img src={giffour} alt="Gif" style={{ width: "69%", height: "auto" }} />
|
|
</Box>
|
|
</Box>
|
|
</Grid>
|
|
|
|
{/* Grid 4 */}
|
|
<Grid
|
|
item
|
|
xs={12}
|
|
sx={{
|
|
height: { xs: "707px", md: "830px" },
|
|
backgroundColor: "white",
|
|
position: "relative",
|
|
backgroundImage: { lg: `url(${backthree})`, xs: null },
|
|
backgroundSize: "contain",
|
|
backgroundPosition: "46.2% 50%",
|
|
backgroundRepeat: "no-repeat",
|
|
}}>
|
|
<Box
|
|
ref={reuseRef}
|
|
sx={{
|
|
position: "absolute",
|
|
top: { xs: "5%", md: "7%" },
|
|
left: { xs: "-1%", md: "17%" },
|
|
transform: "translateY(-23%)",
|
|
height: { xs: "150px", md: "167px" },
|
|
width: { xs: "49%", md: "388px" },
|
|
backgroundColor: "white",
|
|
zIndex: 1,
|
|
display: "flex",
|
|
flexDirection: { xs: 'column', md: 'row-reverse' }, // Reverse for mobile
|
|
alignItems: "center",
|
|
justifyContent: "center", // Center vertically
|
|
padding: "10px",
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
width: "80%",
|
|
paddingLeft: "10px",
|
|
backgroundColor: { xs: 'green', md: 'transparent' }, // Green background for mobile
|
|
display: 'flex', // Make the text box a flex container to center content vertically
|
|
flexDirection: 'column', // Align text content vertically
|
|
justifyContent: 'center', // Vertically center the text
|
|
}}
|
|
>
|
|
<Typography variant="h4">Reuse</Typography>
|
|
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendisss !</p>
|
|
</Box>
|
|
<Box sx={{
|
|
width: "80%",
|
|
display: 'flex',
|
|
justifyContent: 'center', // Center the gif horizontally
|
|
alignItems: 'center', // Center the gif vertically
|
|
}}>
|
|
<img src={gifsix} alt="Gif" style={{ width: "132%", height: "110%" }} />
|
|
</Box>
|
|
</Box>
|
|
|
|
|
|
<Box
|
|
ref={repairRef}
|
|
sx={{
|
|
position: "absolute",
|
|
top: { xs: "1%", md: "20%" },
|
|
right: { xs: "1%", md: "13%" },
|
|
transform: "translateY(-23%)",
|
|
height: { xs: "150px", md: "167px" },
|
|
width: { xs: "47%", md: "390px" },
|
|
backgroundColor: "white",
|
|
zIndex: 1,
|
|
display: "flex",
|
|
flexDirection: { xs: 'column', md: 'row-reverse' }, // Reverse for mobile
|
|
alignItems: "center",
|
|
justifyContent: "center", // Center vertically
|
|
padding: "10px",
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
width: "80%",
|
|
paddingLeft: "10px",
|
|
backgroundColor: { xs: 'green', md: 'transparent' },
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'center',
|
|
}}
|
|
>
|
|
<Typography variant="h4">Repair</Typography>
|
|
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis !</p>
|
|
</Box>
|
|
<Box sx={{ width: "80%" }}>
|
|
<img src={giffive} alt="Gif" style={{ width: "100%", height: "100%" }} />
|
|
</Box>
|
|
</Box>
|
|
|
|
<Box
|
|
ref={disintegrateRef}
|
|
sx={{
|
|
position: "absolute",
|
|
top: { xs: "61%", md: "61%" },
|
|
left: { xs: "-2%", md: "6%" },
|
|
transform: "translateY(-23%)",
|
|
height: { xs: "150px", md: "167px" },
|
|
width: { xs: "51%", md: "409px" },
|
|
backgroundColor: "white",
|
|
zIndex: 1,
|
|
display: "flex",
|
|
flexDirection: { xs: 'column-reverse', md: 'row-reverse' }, // Reverse for mobile
|
|
alignItems: "center",
|
|
justifyContent: "center", // Center vertically
|
|
padding: "10px",
|
|
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
width: "80%",
|
|
paddingLeft: "10px",
|
|
backgroundColor: { xs: 'green', md: 'transparent' },
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'center',
|
|
}}
|
|
>
|
|
<Typography variant="h4" sx={{fontSize:'2rem'}}>Disintegrate</Typography>
|
|
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis !</p>
|
|
</Box>
|
|
<Box sx={{ width: "70%" }}>
|
|
<img src={gifseven} alt="Gif" style={{ width: "100%", height: "auto" }} />
|
|
</Box>
|
|
</Box>
|
|
|
|
<Box
|
|
ref={remineRef}
|
|
sx={{
|
|
position: "absolute",
|
|
top: { xs: "60%", md: "65%" },
|
|
right: { xs: "-3%", md: "8%" },
|
|
transform: "translateY(-23%)",
|
|
height: { xs: "150px", md: "167px" },
|
|
width: { xs: "50%", md: "309px" },
|
|
backgroundColor: "white",
|
|
zIndex: 1,
|
|
display: "flex",
|
|
flexDirection: { xs: 'column', md: 'row-reverse' }, // Reverse for mobile
|
|
alignItems: "center",
|
|
justifyContent: "center", // Center vertically
|
|
padding: "10px",
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
width: "80%",
|
|
paddingLeft: "10px",
|
|
|
|
}}
|
|
>
|
|
<img src={gifeight} alt="Gif" style={{ width: "100%", height: "auto" }} />
|
|
</Box>
|
|
<Box sx={{ width: "70%", paddingLeft: "10px", backgroundColor: { xs: 'green', md: 'transparent' },
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'center', }}>
|
|
<Typography variant="h4">Remine</Typography>
|
|
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis !</p>
|
|
</Box>
|
|
</Box>
|
|
</Grid>
|
|
|
|
{/* Grid 5 */}
|
|
<Grid
|
|
item
|
|
xs={12}
|
|
ref={mineRef}
|
|
sx={{
|
|
height: { xs: "200px", md: "300px" },
|
|
backgroundImage: `url(${loopgreen})`,
|
|
position: "relative",
|
|
backgroundSize: "contain",
|
|
backgroundPosition: "center",
|
|
backgroundRepeat: "no-repeat",
|
|
}}>
|
|
</Grid>
|
|
</Grid>
|
|
<PartnerWork />
|
|
<OurTeam />
|
|
<Footer />
|
|
</Box>
|
|
</ThemeProvider>
|
|
);
|
|
};
|
|
|
|
export default HomePage; |