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 { Box, Grid, Typography } from "@mui/material";
import logo from "../loopslogo2.png";
import backone from "../components/imageandgif/backgroundone.png";
import backthree from "../components/imageandgif/backgroundthree.png";
import backfour from "../components/imageandgif/backgroundfour.png";
import backfive from "../components/imageandgif/backgroundfive.png";
import backsix from "../components/imageandgif/backgroundsix.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"
@ -52,6 +50,7 @@ const HomePage: React.FC = () => {
backgroundSize: "contain",
backgroundPosition: "right center",
backgroundRepeat: "no-repeat",
marginBottom: "399px",
}}
>
<Box
@ -93,24 +92,25 @@ const HomePage: React.FC = () => {
<Grid
item
xs={12}
sx={{
height: "400px",
height: "965px",
backgroundColor: "white",
position: "relative",
backgroundImage: `url(${backone})`,
backgroundSize: "contain",
backgroundPosition: "center",
backgroundPositionX: "50.5%",
backgroundPositionY: "60%",
backgroundRepeat: "no-repeat",
}}>
<Box
ref={mineRef} // Attach ref here
sx={{
position: "absolute",
top: "80%",
right: "3%",
top: "4%",
left: "10%",
transform: "translateY(-50%)",
height: "400px",
height: "200px",
width: "630px",
backgroundColor: "white",
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>
</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
ref={manufactureRef} // Attach ref here
sx={{
position: "absolute",
top: "73%",
left: "2%",
top: "38%",
right: "4%",
transform: "translateY(-50%)",
height: "400px",
width: "630px",
height: "215px",
width: "560px",
backgroundColor: "white",
zIndex: 1,
display: "flex",
@ -170,29 +153,12 @@ const HomePage: React.FC = () => {
<img src={giftwo} alt="Gif" style={{ width: "100%", height: "auto" }} />
</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
ref={assembleRef}
sx={{
position: "absolute",
top: "-12%",
right: "5%",
top: "75%",
left: "5%",
transform: "translateY(-50%)",
height: "167px",
width: "534px",
@ -212,19 +178,22 @@ const HomePage: React.FC = () => {
<img src={gifthree} alt="Gif" style={{ width: "100%", height: "auto" }} />
</Box>
</Box>
</Grid>
{/* Grid 5 */}
{/* Grid 3 */}
<Grid
item
xs={12}
sx={{
height: "408px",
height: "615px",
backgroundColor: "white",
position: "relative",
backgroundImage: `url(${backfour})`,
backgroundImage: `url(${backtwo})`,
backgroundSize: "contain",
backgroundPosition: "58% 50%",
backgroundPositionX: "41.5%",
backgroundPositionY: "60%",
backgroundRepeat: "no-repeat",
}}>
@ -232,8 +201,8 @@ const HomePage: React.FC = () => {
ref={useRefBox}
sx={{
position: "absolute",
top: "10%",
left: "8%",
top: "17%",
right: "25%",
transform: "translateY(-50%)",
height: "167px",
width: "523px",
@ -253,19 +222,36 @@ const HomePage: React.FC = () => {
<img src={giffour} alt="Gif" style={{ width: "100%", height: "auto" }} />
</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
ref={reuseRef}
sx={{
position: "absolute",
top: "60%",
left: "7%",
top: "7%",
left: "17%",
transform: "translateY(-23%)",
height: "167px",
width: "388px",
backgroundColor: "white",
zIndex: 1,
display: "flex",
flexDirection: 'column',
flexDirection: 'row-reverse',
alignItems: "center",
padding: "10px",
}}
@ -278,28 +264,13 @@ const HomePage: React.FC = () => {
<img src={gifsix} alt="Gif" style={{ width: "100%", height: "100%" }} />
</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
ref={repairRef}
sx={{
position: "absolute",
top: "12%",
left: "39%",
top: "20%",
right: "13%",
transform: "translateY(-23%)",
height: "167px",
width: "390px",
@ -319,12 +290,13 @@ const HomePage: React.FC = () => {
<img src={giffive} alt="Gif" style={{ width: "100%", height: "100%" }} />
</Box>
</Box>
{/* */}
<Box
ref={disintegrateRef}
sx={{
position: "absolute",
top: "70%",
left: "22%",
top: "61%",
left: "6%",
transform: "translateY(-23%)",
height: "167px",
width: "409px",
@ -344,27 +316,13 @@ const HomePage: React.FC = () => {
<img src={gifseven} alt="Gif" style={{ width: "100%", height: "auto" }} />
</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
ref={remineRef}
sx={{
position: "absolute",
top: "44%",
left: "56%",
top: "65%",
right: "8%",
transform: "translateY(-23%)",
height: "167px",
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