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

changed background

This commit is contained in:
hardik 2025-02-09 09:49:34 +05:30
parent db696178cc
commit 50007649b1
8 changed files with 59 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

148
src/components/homepage.tsx
View File

@ -1,11 +1,9 @@
import React, { useRef } from "react"; import React, { useRef } from "react";
import { Box, Grid, Typography } from "@mui/material"; import { Box, Grid, Typography } from "@mui/material";
import logo from "../loopslogo2.png"; import logo from "../loopslogo2.png";
import backone from "../components/imageandgif/backgroundone.png"; import backone from "../components/imageandgif/newbgone.png";
import backthree from "../components/imageandgif/backgroundthree.png"; import backtwo from "../components/imageandgif/newnewtwo.png";
import backfour from "../components/imageandgif/backgroundfour.png"; import backthree from "../components/imageandgif/newthree.png";
import backfive from "../components/imageandgif/backgroundfive.png";
import backsix from "../components/imageandgif/backgroundsix.png";
import gifone from "../components/imageandgif/gifone.gif" import gifone from "../components/imageandgif/gifone.gif"
import giftwo from "../components/imageandgif/giftwo.gif" import giftwo from "../components/imageandgif/giftwo.gif"
import gifthree from "../components/imageandgif/gifthree.gif" import gifthree from "../components/imageandgif/gifthree.gif"
@ -52,6 +50,7 @@ const HomePage: React.FC = () => {
backgroundSize: "contain", backgroundSize: "contain",
backgroundPosition: "right center", backgroundPosition: "right center",
backgroundRepeat: "no-repeat", backgroundRepeat: "no-repeat",
marginBottom: "399px",
}} }}
> >
<Box <Box
@ -93,24 +92,25 @@ const HomePage: React.FC = () => {
<Grid <Grid
item item
xs={12} xs={12}
sx={{ sx={{
height: "400px",
height: "965px",
backgroundColor: "white", backgroundColor: "white",
position: "relative", position: "relative",
backgroundImage: `url(${backone})`, backgroundImage: `url(${backone})`,
backgroundSize: "contain", backgroundSize: "contain",
backgroundPosition: "center", backgroundPositionX: "50.5%",
backgroundPositionY: "60%",
backgroundRepeat: "no-repeat", backgroundRepeat: "no-repeat",
}}> }}>
<Box <Box
ref={mineRef} // Attach ref here ref={mineRef} // Attach ref here
sx={{ sx={{
position: "absolute", position: "absolute",
top: "80%", top: "4%",
right: "3%", left: "10%",
transform: "translateY(-50%)", transform: "translateY(-50%)",
height: "400px", height: "200px",
width: "630px", width: "630px",
backgroundColor: "white", backgroundColor: "white",
zIndex: 1, zIndex: 1,
@ -128,32 +128,15 @@ const HomePage: React.FC = () => {
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis doloremque architecto eos provident et deserunt temporibus non iusto quis inventore expedita neque, dolorum ea consectetur repudiandae iste. Aliquid, aspernatur in!</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis doloremque architecto eos provident et deserunt temporibus non iusto quis inventore expedita neque, dolorum ea consectetur repudiandae iste. Aliquid, aspernatur in!</p>
</Box> </Box>
</Box> </Box>
</Grid>
{/* Grid 3 */}
<Grid
item
xs={12}
sx={{
height: "400px",
backgroundColor: "white",
position: "relative",
backgroundImage: `url(${backone})`,
backgroundSize: "contain",
backgroundPosition: "50.5% 50%",
backgroundRepeat: "no-repeat",
}}>
<Box <Box
ref={manufactureRef} // Attach ref here ref={manufactureRef} // Attach ref here
sx={{ sx={{
position: "absolute", position: "absolute",
top: "73%", top: "38%",
left: "2%", right: "4%",
transform: "translateY(-50%)", transform: "translateY(-50%)",
height: "400px", height: "215px",
width: "630px", width: "560px",
backgroundColor: "white", backgroundColor: "white",
zIndex: 1, zIndex: 1,
display: "flex", display: "flex",
@ -170,29 +153,12 @@ const HomePage: React.FC = () => {
<img src={giftwo} alt="Gif" style={{ width: "100%", height: "auto" }} /> <img src={giftwo} alt="Gif" style={{ width: "100%", height: "auto" }} />
</Box> </Box>
</Box> </Box>
</Grid>
{/* Grid 4 */}
<Grid
item
xs={12}
sx={{
height: "308px",
backgroundColor: "white",
position: "relative",
backgroundImage: `url(${backthree})`,
backgroundSize: "contain",
backgroundPosition: "61.2% 50%",
backgroundRepeat: "no-repeat",
}}>
<Box <Box
ref={assembleRef} ref={assembleRef}
sx={{ sx={{
position: "absolute", position: "absolute",
top: "-12%", top: "75%",
right: "5%", left: "5%",
transform: "translateY(-50%)", transform: "translateY(-50%)",
height: "167px", height: "167px",
width: "534px", width: "534px",
@ -212,19 +178,22 @@ const HomePage: React.FC = () => {
<img src={gifthree} alt="Gif" style={{ width: "100%", height: "auto" }} /> <img src={gifthree} alt="Gif" style={{ width: "100%", height: "auto" }} />
</Box> </Box>
</Box> </Box>
</Grid> </Grid>
{/* Grid 5 */} {/* Grid 3 */}
<Grid <Grid
item item
xs={12} xs={12}
sx={{ sx={{
height: "408px", height: "615px",
backgroundColor: "white", backgroundColor: "white",
position: "relative", position: "relative",
backgroundImage: `url(${backfour})`, backgroundImage: `url(${backtwo})`,
backgroundSize: "contain", backgroundSize: "contain",
backgroundPosition: "58% 50%", backgroundPositionX: "41.5%",
backgroundPositionY: "60%",
backgroundRepeat: "no-repeat", backgroundRepeat: "no-repeat",
}}> }}>
@ -232,8 +201,8 @@ const HomePage: React.FC = () => {
ref={useRefBox} ref={useRefBox}
sx={{ sx={{
position: "absolute", position: "absolute",
top: "10%", top: "17%",
left: "8%", right: "25%",
transform: "translateY(-50%)", transform: "translateY(-50%)",
height: "167px", height: "167px",
width: "523px", width: "523px",
@ -253,19 +222,36 @@ const HomePage: React.FC = () => {
<img src={giffour} alt="Gif" style={{ width: "100%", height: "auto" }} /> <img src={giffour} alt="Gif" style={{ width: "100%", height: "auto" }} />
</Box> </Box>
</Box> </Box>
</Grid>
{/* Grid 4 */}
<Grid
item
xs={12}
sx={{
height: "778px",
backgroundColor: "white",
position: "relative",
backgroundImage: `url(${backthree})`,
backgroundSize: "contain",
backgroundPosition: "47.2% 50%",
backgroundRepeat: "no-repeat",
}}>
<Box <Box
ref={reuseRef} ref={reuseRef}
sx={{ sx={{
position: "absolute", position: "absolute",
top: "60%", top: "7%",
left: "7%", left: "17%",
transform: "translateY(-23%)", transform: "translateY(-23%)",
height: "167px", height: "167px",
width: "388px", width: "388px",
backgroundColor: "white", backgroundColor: "white",
zIndex: 1, zIndex: 1,
display: "flex", display: "flex",
flexDirection: 'column', flexDirection: 'row-reverse',
alignItems: "center", alignItems: "center",
padding: "10px", padding: "10px",
}} }}
@ -278,28 +264,13 @@ const HomePage: React.FC = () => {
<img src={gifsix} alt="Gif" style={{ width: "100%", height: "100%" }} /> <img src={gifsix} alt="Gif" style={{ width: "100%", height: "100%" }} />
</Box> </Box>
</Box> </Box>
</Grid>
{/* Grid 6 */}
<Grid
item
xs={12}
sx={{
height: "400px",
position: "relative",
backgroundImage: `url(${backfive})`,
backgroundSize: "contain",
backgroundPosition: "63% 50%",
backgroundRepeat: "no-repeat",
}}>
<Box <Box
ref={repairRef} ref={repairRef}
sx={{ sx={{
position: "absolute", position: "absolute",
top: "12%", top: "20%",
left: "39%", right: "13%",
transform: "translateY(-23%)", transform: "translateY(-23%)",
height: "167px", height: "167px",
width: "390px", width: "390px",
@ -319,12 +290,13 @@ const HomePage: React.FC = () => {
<img src={giffive} alt="Gif" style={{ width: "100%", height: "100%" }} /> <img src={giffive} alt="Gif" style={{ width: "100%", height: "100%" }} />
</Box> </Box>
</Box> </Box>
{/* */}
<Box <Box
ref={disintegrateRef} ref={disintegrateRef}
sx={{ sx={{
position: "absolute", position: "absolute",
top: "70%", top: "61%",
left: "22%", left: "6%",
transform: "translateY(-23%)", transform: "translateY(-23%)",
height: "167px", height: "167px",
width: "409px", width: "409px",
@ -344,27 +316,13 @@ const HomePage: React.FC = () => {
<img src={gifseven} alt="Gif" style={{ width: "100%", height: "auto" }} /> <img src={gifseven} alt="Gif" style={{ width: "100%", height: "auto" }} />
</Box> </Box>
</Box> </Box>
</Grid>
{/* grid */}
<Grid
item
xs={12}
// Attach ref here
sx={{
height: "285px",
position: "relative",
backgroundImage: `url(${backsix})`,
backgroundSize: "contain",
backgroundPosition: "56% 50%",
backgroundRepeat: "no-repeat",
}}>
<Box <Box
ref={remineRef} ref={remineRef}
sx={{ sx={{
position: "absolute", position: "absolute",
top: "44%", top: "65%",
left: "56%", right: "8%",
transform: "translateY(-23%)", transform: "translateY(-23%)",
height: "167px", height: "167px",
width: "309px", width: "309px",

BIN
src/components/imageandgif/backgroundnewone.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

BIN
src/components/imageandgif/backgroundnewtwo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
src/components/imageandgif/bgone.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
src/components/imageandgif/newbgone.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

BIN
src/components/imageandgif/newbgtwo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

BIN
src/components/imageandgif/newnewtwo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
src/components/imageandgif/newthree.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB