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

fixed background
continuous-integration/drone/push Build is passing Details
continuous-integration/drone/pr Build is passing Details

This commit is contained in:
hardik 2025-02-19 17:20:11 +05:30
parent f081899d4a
commit 3c074e4a70
5 changed files with 119 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/components/homepage.tsx
View File

@ -19,13 +19,16 @@ import loopgreenback from "../components/imageandgif/lsbg.png"
import OurTeam from "./ourteam"; import OurTeam from "./ourteam";
import mobileLogo from "../components/imageandgif/loopsMoblogo.png" import mobileLogo from "../components/imageandgif/loopsMoblogo.png"
import mobileback from "../components/imageandgif/mobileback.png" import mobileback from "../components/imageandgif/mobileback.png"
import { useMediaQuery, useTheme } from "@mui/material"; import { useMediaQuery, useTheme } from "@mui/material";
import { createTheme, ThemeProvider } from "@mui/material/styles"; import { createTheme, ThemeProvider } from "@mui/material/styles";
import newbackground from "../components/imageandgif/full.png" import newbackground from "../components/imageandgif/full.png"
import sustainability from "../components/imageandgif/Untitled-2.png" import sustainability from "../components/imageandgif/Untitled-2.png"
import wasteimage from "../components/imageandgif/loopwastemanage.png" import wasteimage from "../components/imageandgif/loopwastemanage.png"
import WhyChooseUs from "./whyus"; import WhyChooseUs from "./whyus";
import WasteImageSection from "./wastemanagement"; 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";
@ -48,14 +51,14 @@ const HomePage: React.FC = () => {
]; ];
// const theme = useTheme(); // const theme = useTheme();
// const isMobile = useMediaQuery(theme.breakpoints.down("sm")); // const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
// Function to scroll to the ref // Function to scroll to the ref
const scrollToRef = (ref: React.RefObject<HTMLDivElement>) => { const scrollToRef = (ref: React.RefObject<HTMLDivElement>) => {
if (ref.current) { if (ref.current) {
ref.current.scrollIntoView({ behavior: "smooth", block: "center" }); ref.current.scrollIntoView({ behavior: "smooth", block: "center" });
} }
}; };
const theme = createTheme({ const theme = createTheme({
breakpoints: { breakpoints: {
values: { values: {
@ -76,7 +79,7 @@ const HomePage: React.FC = () => {
// color:"#77808B" // color:"#77808B"
// } // }
// }, // },
}); });
return ( return (
@ -93,25 +96,19 @@ const HomePage: React.FC = () => {
width: { lg: "100vw" }, width: { lg: "100vw" },
backgroundColor: "white", backgroundColor: "white",
position: "relative", position: "relative",
backgroundImage: paddingTop:{xs:'50px', lg:'5px'},
`url(${loopgreenback})`
,
backgroundSize: "contain",
backgroundPosition: " center",
backgroundRepeat: "no-repeat",
marginBottom: { xs: "10px", md: "39px", lg: '60px' }, marginBottom: { xs: "10px", md: "39px", lg: '60px' },
}} }}
> >
<img src={loopgif} alt="Gif" style={{ width: "100%" }} />
</Grid> </Grid>
</Grid> </Grid>
<Grid container spacing={4} justifyContent="center" sx={{ padding: 4 }}> <Grid container spacing={4} justifyContent="center" sx={{ padding: 4 }}>
{items.map((text, index) => ( {items.map((text, index) => (
<Grid item xs={12} sm={6} md={4} key={index} > <Grid item xs={12} sm={6} md={4} key={index} >
<Box <Box
sx={{ sx={{
@ -134,11 +131,12 @@ const HomePage: React.FC = () => {
width: '100%', width: '100%',
backgroundImage: { lg: `url(${newbackground})`, xs: null }, backgroundImage: { lg: `url(${newbackground})`, xs: null },
backgroundSize: "contain", backgroundSize: "contain",
backgroundPosition: { lg: "center"}, backgroundPosition: { lg: "center" },
backgroundRepeat: "no-repeat", backgroundRepeat: "no-repeat",
paddingBottom: { lg: 20, xs: 0 } paddingBottom: { lg: 20, xs: 0 }
}} }}
> >
<Grid <Grid
container container
@ -147,6 +145,10 @@ const HomePage: React.FC = () => {
width: '100%', 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 */} {/* ROW 1 */}
<Grid item xs={12} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '358px' }, display: "flex", justifyContent: "center", alignItems: "center" }}> <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={{ <Box ref={mineRef} sx={{
@ -191,7 +193,7 @@ const HomePage: React.FC = () => {
<Typography variant="h4">Manufacturing</Typography> <Typography variant="h4">Manufacturing</Typography>
<Typography variant="body2">Materials are processed in energy-intensive factories that rely on fossil fuels, generating high carbon emissions </Typography> <Typography variant="body2">Materials are processed in energy-intensive factories that rely on fossil fuels, generating high carbon emissions </Typography>
</Box> </Box>
<Box sx={{ width: { lg: '50%' , md:'67%' } }}> <Box sx={{ width: { lg: '50%', md: '67%' } }}>
<img src={giftwo} alt="Gif" style={{ width: "100%" }} /> <img src={giftwo} alt="Gif" style={{ width: "100%" }} />
</Box> </Box>
@ -204,7 +206,7 @@ const HomePage: React.FC = () => {
display: "flex", justifyContent: { lg: 'flex-end', xs: 'center' }, alignItems: "center" display: "flex", justifyContent: { lg: 'flex-end', xs: 'center' }, alignItems: "center"
}}> }}>
<Box ref={assembleRef} sx={{ <Box ref={assembleRef} sx={{
height: { xs: "332px", lg: "215px", sm: '500px' , md:'500px' }, height: { xs: "332px", lg: "215px", sm: '500px', md: '500px' },
width: { xs: "80%", lg: "595px" }, width: { xs: "80%", lg: "595px" },
zIndex: 1, zIndex: 1,
display: "flex", display: "flex",
@ -216,7 +218,7 @@ const HomePage: React.FC = () => {
marginBottom: { xs: "20px", md: "0" }, marginBottom: { xs: "20px", md: "0" },
}}> }}>
<Box sx={{ width: { xs: "60%", md:'70%' } }}> <Box sx={{ width: { xs: "60%", md: '70%' } }}>
<img src={gifthree} alt="Gif" style={{ width: "100%" }} /> <img src={gifthree} alt="Gif" style={{ width: "100%" }} />
</Box> </Box>
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}> <Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
@ -248,7 +250,7 @@ const HomePage: React.FC = () => {
<Typography variant="body2">Devices are used by consumers and businesses, but their production and usage contribute significantly to carbon footprints, energy consumption, and waste generation.</Typography> <Typography variant="body2">Devices are used by consumers and businesses, but their production and usage contribute significantly to carbon footprints, energy consumption, and waste generation.</Typography>
</Box> </Box>
<Box sx={{ width: { xs: "60%",md:'70%' } }}> <Box sx={{ width: { xs: "60%", md: '70%' } }}>
<img src={giffour} alt="Gif" style={{ width: "100%" }} /> <img src={giffour} alt="Gif" style={{ width: "100%" }} />
</Box> </Box>
</Box> </Box>
@ -374,13 +376,13 @@ const HomePage: React.FC = () => {
display: { xs: "flex", md: "flex", lg: 'none' }, display: { xs: "flex", md: "flex", lg: 'none' },
backgroundImage: { lg: null, xs: `url(${mobileback})` }, backgroundImage: { lg: null, xs: `url(${mobileback})` },
backgroundSize: "contain", backgroundSize: "contain",
backgroundPosition: { xs: "50% 60%", md:'50% 63%' }, backgroundPosition: { xs: "50% 60%", md: '50% 63%' },
backgroundRepeat: "no-repeat", backgroundRepeat: "no-repeat",
}}> }}>
{/* Reuse */} {/* Reuse */}
<Grid item xs={6}> <Grid item xs={6}>
<Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}> <Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}>
<Box sx={{ background: "#95CD41", p: 1 ,height:{xs:256 , sm:200}, maxHeight:270 }}> <Box sx={{ background: "#95CD41", p: 1, height: { xs: 256, sm: 200 }, maxHeight: 270 }}>
<Typography variant="h4">Reuse</Typography> <Typography variant="h4">Reuse</Typography>
<Typography variant="body2"> <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. We help businesses reuse their old electronic devices, repurposing functional parts and components for future use or resale, reducing overall environmental impact.
@ -395,7 +397,7 @@ const HomePage: React.FC = () => {
{/* Repair */} {/* Repair */}
<Grid item xs={6}> <Grid item xs={6}>
<Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}> <Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}>
<Box sx={{ background: "#95CD41", p: 1 ,height:{xs:256 , sm:200} , maxHeight:270 }}> <Box sx={{ background: "#95CD41", p: 1, height: { xs: 256, sm: 200 }, maxHeight: 270 }}>
<Typography variant="h4">Repair</Typography> <Typography variant="h4">Repair</Typography>
<Typography variant="body2"> <Typography variant="body2">
Loop Sustainability steps in to repair damaged or outdated electronics. Loop Sustainability steps in to repair damaged or outdated electronics.
@ -411,11 +413,11 @@ const HomePage: React.FC = () => {
{/* Disintegrate (Added Extra Margin to Separate from Top Row) */} {/* Disintegrate (Added Extra Margin to Separate from Top Row) */}
<Grid item xs={6} sx={{ mt: 2 }}> <Grid item xs={6} sx={{ mt: 2 }}>
<Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}> <Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}>
<Box sx={{ width: "100%" }}> <Box sx={{ width: "100%" }}>
<img src={gifseven} alt="Disintegrate Gif" style={{ width: "100%" }} /> <img src={gifseven} alt="Disintegrate Gif" style={{ width: "100%" }} />
</Box> </Box>
<Box sx={{ background: "#95CD41", p: 1 ,height:{xs:256 , sm:200} , maxHeight:270 }}> <Box sx={{ background: "#95CD41", p: 1, height: { xs: 256, sm: 200 }, maxHeight: 270 }}>
<Typography variant="h4" sx={{ fontSize: "1.3rem" }}>Disintegrate</Typography> <Typography variant="h4" sx={{ fontSize: "1.3rem" }}>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> <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>
@ -425,11 +427,11 @@ const HomePage: React.FC = () => {
{/* Remine */} {/* Remine */}
<Grid item xs={6} sx={{ mt: 2 }}> <Grid item xs={6} sx={{ mt: 2 }}>
<Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 , maxHeight:270 }}> <Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2, maxHeight: 270 }}>
<Box sx={{ width: "100%" }}> <Box sx={{ width: "100%" }}>
<img src={gifeight} alt="Remine Gif" style={{ width: "100%" }} /> <img src={gifeight} alt="Remine Gif" style={{ width: "100%" }} />
</Box> </Box>
<Box sx={{ background: "#95CD41", p: 1, textAlign: { xs: "left", md: 'center' },height:{xs:256 , sm:200} }}> <Box sx={{ background: "#95CD41", p: 1, textAlign: { xs: "left", md: 'center' }, height: { xs: 256, sm: 200 } }}>
<Typography variant="h4" sx={{ fontSize: '1.6rem' }}>Remine</Typography> <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> <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>
@ -440,7 +442,7 @@ const HomePage: React.FC = () => {
</Grid> </Grid>
</Box> </Box>
<WasteImageSection/> <WasteImageSection />
<WhyChooseUs /> <WhyChooseUs />
<OurTeam /> <OurTeam />

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