Merge pull request 'fixed background' (#18) from fix/layout into main
continuous-integration/drone/push Build is passing Details

Reviewed-on: #18
Reviewed-by: Mihir Motiyani <mihir@midastix.com>
This commit is contained in:
Mihir Motiyani 2025-02-19 17:29:23 +05:30
commit 7f8d4e95bf
5 changed files with 119 additions and 30 deletions

View File

@ -19,13 +19,16 @@ import loopgreenback from "../components/imageandgif/lsbg.png"
import OurTeam from "./ourteam";
import mobileLogo from "../components/imageandgif/loopsMoblogo.png"
import mobileback from "../components/imageandgif/mobileback.png"
import { useMediaQuery, useTheme } from "@mui/material";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import { useMediaQuery, useTheme } from "@mui/material";
import { createTheme, ThemeProvider } from "@mui/material/styles";
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 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";
@ -48,14 +51,14 @@ const HomePage: React.FC = () => {
];
// const theme = useTheme();
// const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
// 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: {
@ -76,7 +79,7 @@ const HomePage: React.FC = () => {
// color:"#77808B"
// }
// },
});
return (
@ -93,25 +96,19 @@ 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>
</Grid>
<Grid container spacing={4} justifyContent="center" sx={{ padding: 4 }}>
{items.map((text, index) => (
<Grid item xs={12} sm={6} md={4} key={index} >
<Box
sx={{
@ -134,11 +131,12 @@ const HomePage: React.FC = () => {
width: '100%',
backgroundImage: { lg: `url(${newbackground})`, xs: null },
backgroundSize: "contain",
backgroundPosition: { lg: "center"},
backgroundPosition: { lg: "center" },
backgroundRepeat: "no-repeat",
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={{
@ -191,7 +193,7 @@ const HomePage: React.FC = () => {
<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>
</Box>
<Box sx={{ width: { lg: '50%' , md:'67%' } }}>
<Box sx={{ width: { lg: '50%', md: '67%' } }}>
<img src={giftwo} alt="Gif" style={{ width: "100%" }} />
</Box>
@ -204,7 +206,7 @@ const HomePage: React.FC = () => {
display: "flex", justifyContent: { lg: 'flex-end', xs: 'center' }, alignItems: "center"
}}>
<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" },
zIndex: 1,
display: "flex",
@ -216,7 +218,7 @@ const HomePage: React.FC = () => {
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%" }} />
</Box>
<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>
</Box>
<Box sx={{ width: { xs: "60%",md:'70%' } }}>
<Box sx={{ width: { xs: "60%", md: '70%' } }}>
<img src={giffour} alt="Gif" style={{ width: "100%" }} />
</Box>
</Box>
@ -374,13 +376,13 @@ const HomePage: React.FC = () => {
display: { xs: "flex", md: "flex", lg: 'none' },
backgroundImage: { lg: null, xs: `url(${mobileback})` },
backgroundSize: "contain",
backgroundPosition: { xs: "50% 60%", md:'50% 63%' },
backgroundPosition: { xs: "50% 60%", md: '50% 63%' },
backgroundRepeat: "no-repeat",
}}>
{/* Reuse */}
<Grid item xs={6}>
<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="body2">
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 */}
<Grid item xs={6}>
<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="body2">
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) */}
<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%" }}>
<img src={gifseven} alt="Disintegrate Gif" style={{ width: "100%" }} />
</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="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 */}
<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%" }}>
<img src={gifeight} alt="Remine Gif" style={{ width: "100%" }} />
</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="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>
@ -440,7 +442,7 @@ const HomePage: React.FC = () => {
</Grid>
</Box>
<WasteImageSection/>
<WasteImageSection />
<WhyChooseUs />
<OurTeam />

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 MiB

Binary file not shown.

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>

After

Width:  |  Height:  |  Size: 9.3 KiB