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

fixed background #18

Merged
mihir merged 1 commits from fix/layout into main 2025-02-19 17:29:24 +05:30
Conversation 0 Commits 1 Files Changed 5 +119 -30
5 changed files with 119 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/homepage.tsx
View File

@ -26,6 +26,9 @@ import sustainability from "../components/imageandgif/Untitled-2.png"
import wasteimage from "../components/imageandgif/loopwastemanage.png"
import WhyChooseUs from "./whyus";
import WasteImageSection from "./wastemanagement";
import loopgif from "../components/imageandgif/loop hero new (1).gif"
import gifsevenm from "../components/imageandgif/disintegrate mobile.gif";
import gifeightm from "../components/imageandgif/gifeight.gif";
@ -93,17 +96,11 @@ const HomePage: React.FC = () => {
width: { lg: "100vw" },
backgroundColor: "white",
position: "relative",
backgroundImage:
`url(${loopgreenback})`
,
backgroundSize: "contain",
backgroundPosition: " center",
backgroundRepeat: "no-repeat",
paddingTop:{xs:'50px', lg:'5px'},
marginBottom: { xs: "10px", md: "39px", lg: '60px' },
}}
>
<img src={loopgif} alt="Gif" style={{ width: "100%" }} />
</Grid>
@ -139,6 +136,7 @@ const HomePage: React.FC = () => {
paddingBottom: { lg: 20, xs: 0 }
}}
>
<Grid
container
@ -147,6 +145,10 @@ const HomePage: React.FC = () => {
width: '100%',
}}
>
{/* <Grid item xs={6} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "200px", 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: "200px", lg: '221px' }, display: { xs: 'none', md: 'none', sm: 'block', lg: 'block' } }}></Grid> */}
{/* ROW 1 */}
<Grid item xs={12} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '358px' }, display: "flex", justifyContent: "center", alignItems: "center" }}>
<Box ref={mineRef} sx={{

BIN
src/components/imageandgif/disintegrate mobile.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

BIN
src/components/imageandgif/loop hero new (1).gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 MiB

BIN
src/components/imageandgif/remine mobile.mp4 Normal file
View File

Binary file not shown.

87
src/components/imageandgif/roadnew.svg Normal file
View File

@ -0,0 +1,87 @@
<svg width="1091" height="2413" viewBox="0 0 1091 2413" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M579.04 40H1031.04V190.5H40.04V578.5H1050.54V975.5H40.04V1397H535.54" stroke="#D9DADA" stroke-width="80"/>
<circle cx="540" cy="2141" r="232" stroke="#D9DADA" stroke-width="80"/>
<path d="M557.5 1357L553.961 1898" stroke="#D9DADA" stroke-width="80"/>
<rect x="627.06" y="41.3304" width="8" height="44" transform="rotate(-90.4306 627.06 41.3304)" fill="white"/>
<rect x="728.06" y="41.3304" width="8" height="44" transform="rotate(-90.4306 728.06 41.3304)" fill="white"/>
<rect x="821.06" y="41.3304" width="8" height="44" transform="rotate(-90.4306 821.06 41.3304)" fill="white"/>
<rect x="922.06" y="41.3304" width="8" height="44" transform="rotate(-90.4306 922.06 41.3304)" fill="white"/>
<rect x="81.0601" y="189.33" width="8" height="44" transform="rotate(-90.4306 81.0601 189.33)" fill="white"/>
<rect x="182.06" y="189.33" width="8" height="44" transform="rotate(-90.4306 182.06 189.33)" fill="white"/>
<rect x="275.06" y="189.33" width="8" height="44" transform="rotate(-90.4306 275.06 189.33)" fill="white"/>
<rect x="376.06" y="189.33" width="8" height="44" transform="rotate(-90.4306 376.06 189.33)" fill="white"/>
<rect x="469.06" y="189.33" width="8" height="44" transform="rotate(-90.4306 469.06 189.33)" fill="white"/>
<rect x="570.06" y="189.33" width="8" height="44" transform="rotate(-90.4306 570.06 189.33)" fill="white"/>
<rect x="663.06" y="189.33" width="8" height="44" transform="rotate(-90.4306 663.06 189.33)" fill="white"/>
<rect x="764.06" y="189.33" width="8" height="44" transform="rotate(-90.4306 764.06 189.33)" fill="white"/>
<rect x="857.06" y="189.33" width="8" height="44" transform="rotate(-90.4306 857.06 189.33)" fill="white"/>
<rect x="958.06" y="189.33" width="8" height="44" transform="rotate(-90.4306 958.06 189.33)" fill="white"/>
<rect x="76.0601" y="581.33" width="8" height="44" transform="rotate(-90.4306 76.0601 581.33)" fill="white"/>
<rect x="177.06" y="581.33" width="8" height="44" transform="rotate(-90.4306 177.06 581.33)" fill="white"/>
<rect x="270.06" y="581.33" width="8" height="44" transform="rotate(-90.4306 270.06 581.33)" fill="white"/>
<rect x="371.06" y="581.33" width="8" height="44" transform="rotate(-90.4306 371.06 581.33)" fill="white"/>
<rect x="464.06" y="581.33" width="8" height="44" transform="rotate(-90.4306 464.06 581.33)" fill="white"/>
<rect x="565.06" y="581.33" width="8" height="44" transform="rotate(-90.4306 565.06 581.33)" fill="white"/>
<rect x="658.06" y="581.33" width="8" height="44" transform="rotate(-90.4306 658.06 581.33)" fill="white"/>
<rect x="759.06" y="581.33" width="8" height="44" transform="rotate(-90.4306 759.06 581.33)" fill="white"/>
<rect x="852.06" y="581.33" width="8" height="44" transform="rotate(-90.4306 852.06 581.33)" fill="white"/>
<rect x="953.06" y="581.33" width="8" height="44" transform="rotate(-90.4306 953.06 581.33)" fill="white"/>
<rect x="72.0601" y="981.33" width="8" height="44" transform="rotate(-90.4306 72.0601 981.33)" fill="white"/>
<rect x="173.06" y="981.33" width="8" height="44" transform="rotate(-90.4306 173.06 981.33)" fill="white"/>
<rect x="266.06" y="981.33" width="8" height="44" transform="rotate(-90.4306 266.06 981.33)" fill="white"/>
<rect x="367.06" y="981.33" width="8" height="44" transform="rotate(-90.4306 367.06 981.33)" fill="white"/>
<rect x="460.06" y="981.33" width="8" height="44" transform="rotate(-90.4306 460.06 981.33)" fill="white"/>
<rect x="561.06" y="981.33" width="8" height="44" transform="rotate(-90.4306 561.06 981.33)" fill="white"/>
<rect x="654.06" y="981.33" width="8" height="44" transform="rotate(-90.4306 654.06 981.33)" fill="white"/>
<rect x="755.06" y="981.33" width="8" height="44" transform="rotate(-90.4306 755.06 981.33)" fill="white"/>
<rect x="848.06" y="981.33" width="8" height="44" transform="rotate(-90.4306 848.06 981.33)" fill="white"/>
<rect x="949.06" y="981.33" width="8" height="44" transform="rotate(-90.4306 949.06 981.33)" fill="white"/>
<rect x="76.0601" y="1393.33" width="8" height="44" transform="rotate(-90.4306 76.0601 1393.33)" fill="white"/>
<rect x="177.06" y="1393.33" width="8" height="44" transform="rotate(-90.4306 177.06 1393.33)" fill="white"/>
<rect x="270.06" y="1393.33" width="8" height="44" transform="rotate(-90.4306 270.06 1393.33)" fill="white"/>
<rect x="371.06" y="1393.33" width="8" height="44" transform="rotate(-90.4306 371.06 1393.33)" fill="white"/>
<rect x="464.06" y="1393.33" width="8" height="44" transform="rotate(-90.4306 464.06 1393.33)" fill="white"/>
<rect x="565.06" y="1393.33" width="8" height="44" transform="rotate(-90.4306 565.06 1393.33)" fill="white"/>
<rect x="658.06" y="1393.33" width="8" height="44" transform="rotate(-90.4306 658.06 1393.33)" fill="white"/>
<rect x="759.06" y="1393.33" width="8" height="44" transform="rotate(-90.4306 759.06 1393.33)" fill="white"/>
<rect x="852.06" y="1393.33" width="8" height="44" transform="rotate(-90.4306 852.06 1393.33)" fill="white"/>
<rect x="953.06" y="1393.33" width="8" height="44" transform="rotate(-90.4306 953.06 1393.33)" fill="white"/>
<rect x="27.604" y="981.048" width="8" height="44" transform="rotate(-0.341438 27.604 981.048)" fill="white"/>
<rect x="27.4468" y="1082.05" width="8" height="44" transform="rotate(-0.341438 27.4468 1082.05)" fill="white"/>
<rect x="27.3018" y="1175.05" width="8" height="44" transform="rotate(-0.341438 27.3018 1175.05)" fill="white"/>
<rect x="27.1445" y="1276.05" width="8" height="44" transform="rotate(-0.341438 27.1445 1276.05)" fill="white"/>
<rect x="27" y="1369.05" width="8" height="44" transform="rotate(-0.341438 27 1369.05)" fill="white"/>
<rect x="1044.6" y="571.048" width="8" height="44" transform="rotate(-0.341438 1044.6 571.048)" fill="white"/>
<rect x="1044.45" y="672.048" width="8" height="44" transform="rotate(-0.341438 1044.45 672.048)" fill="white"/>
<rect x="1044.3" y="765.047" width="8" height="44" transform="rotate(-0.341438 1044.3 765.047)" fill="white"/>
<rect x="1044.14" y="866.047" width="8" height="44" transform="rotate(-0.341438 1044.14 866.047)" fill="white"/>
<rect x="1044" y="959.047" width="8" height="44" transform="rotate(-0.341438 1044 959.047)" fill="white"/>
<rect x="32.6035" y="195.048" width="8" height="44" transform="rotate(-0.341438 32.6035 195.048)" fill="white"/>
<rect x="32.4463" y="296.048" width="8" height="44" transform="rotate(-0.341438 32.4463 296.048)" fill="white"/>
<rect x="32.3018" y="389.047" width="8" height="44" transform="rotate(-0.341438 32.3018 389.047)" fill="white"/>
<rect x="32.1445" y="490.047" width="8" height="44" transform="rotate(-0.341438 32.1445 490.047)" fill="white"/>
<rect x="1020.14" y="28.0474" width="8" height="44" transform="rotate(-0.341438 1020.14 28.0474)" fill="white"/>
<rect x="1020" y="121.047" width="8" height="44" transform="rotate(-0.341438 1020 121.047)" fill="white"/>
<rect x="550.604" y="1385.05" width="8" height="44" transform="rotate(-0.341438 550.604 1385.05)" fill="white"/>
<rect x="550.446" y="1486.05" width="8" height="44" transform="rotate(-0.341438 550.446 1486.05)" fill="white"/>
<rect x="550.302" y="1579.05" width="8" height="44" transform="rotate(-0.341438 550.302 1579.05)" fill="white"/>
<rect x="550.145" y="1680.05" width="8" height="44" transform="rotate(-0.341438 550.145 1680.05)" fill="white"/>
<rect x="550" y="1789.05" width="8" height="44" transform="rotate(-0.341438 550 1789.05)" fill="white"/>
<rect x="566.766" y="1892.15" width="5.78723" height="31.8298" transform="rotate(89.8736 566.766 1892.15)" fill="white"/>
<rect x="463.447" y="1905.9" width="5.78723" height="31.8298" transform="rotate(64.6439 463.447 1905.9)" fill="white"/>
<rect x="365.869" y="1965.98" width="5.78723" height="31.8298" transform="rotate(46.7426 365.869 1965.98)" fill="white"/>
<rect x="736.895" y="1988.42" width="5.78723" height="31.8298" transform="rotate(135.961 736.895 1988.42)" fill="white"/>
<rect x="317.834" y="2035.94" width="5.78723" height="31.8298" transform="rotate(28.2246 317.834 2035.94)" fill="white"/>
<rect x="776.28" y="2064.69" width="5.78723" height="31.8298" transform="rotate(155.963 776.28 2064.69)" fill="white"/>
<rect x="301.458" y="2119.12" width="5.78723" height="31.8298" transform="rotate(5.79739 301.458 2119.12)" fill="white"/>
<rect x="788.994" y="2150.79" width="5.78723" height="31.8298" transform="rotate(174.238 788.994 2150.79)" fill="white"/>
<rect x="316.641" y="2226.24" width="5.78723" height="31.8298" transform="rotate(161.951 316.641 2226.24)" fill="white"/>
<rect x="779.71" y="2196.7" width="5.78723" height="31.8298" transform="rotate(26.1104 779.71 2196.7)" fill="white"/>
<rect x="355.455" y="2297.04" width="5.78723" height="31.8298" transform="rotate(141.268 355.455 2297.04)" fill="white"/>
<rect x="744.245" y="2272.95" width="5.78723" height="31.8298" transform="rotate(43.771 744.245 2272.95)" fill="white"/>
<rect x="416.843" y="2349.01" width="5.78723" height="31.8298" transform="rotate(128.293 416.843 2349.01)" fill="white"/>
<rect x="691.879" y="2329.38" width="5.78723" height="31.8298" transform="rotate(52.2356 691.879 2329.38)" fill="white"/>
<rect x="514.944" y="2375.78" width="5.78723" height="31.8298" transform="rotate(101.591 514.944 2375.78)" fill="white"/>
<rect x="602.842" y="2367.99" width="5.78723" height="31.8298" transform="rotate(72.9547 602.842 2367.99)" fill="white"/>
<rect x="669.575" y="1926.93" width="5.78723" height="31.8298" transform="rotate(115.692 669.575 1926.93)" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB