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

added a new segment #3

Merged
mihir merged 2 commits from fix/layout into main 2025-02-13 14:12:09 +05:30
Conversation 0 Commits 2 Files Changed 4 +117 -127
4 changed files with 117 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/manifest.json
View File

@ -3,7 +3,7 @@
"name": "Create React App Sample", "name": "Create React App Sample",
"icons": [ "icons": [
{ {
"src": "favicon.ico", "src": "loops",
"sizes": "64x64 32x32 24x24 16x16", "sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon" "type": "image/x-icon"
}, },

44
src/components/header.tsx
View File

@ -1,13 +1,10 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { import {
AppBar, Toolbar, Typography, Button, IconButton, Menu, AppBar, Toolbar, Typography, Button, IconButton, Box, Drawer, List,
MenuItem, Box, Drawer, List, ListItem, ListItemButton, ListItem, ListItemButton, ListItemText
ListItemIcon, ListItemText, Divider
} from "@mui/material"; } from "@mui/material";
import MenuIcon from "@mui/icons-material/Menu"; import MenuIcon from "@mui/icons-material/Menu";
import HomeIcon from "@mui/icons-material/Home"; import headerlogo from "../components/imageandgif/newlogo.png"
import BuildIcon from "@mui/icons-material/Build";
import FileDownloadIcon from "@mui/icons-material/FileDownload";
const Header: React.FC = () => { const Header: React.FC = () => {
const [mobileOpen, setMobileOpen] = useState<boolean>(false); const [mobileOpen, setMobileOpen] = useState<boolean>(false);
@ -20,7 +17,7 @@ const Header: React.FC = () => {
<AppBar <AppBar
position="fixed" position="fixed"
sx={{ sx={{
backgroundColor: "#e6e6e6cf", backgroundColor: "#7c77770d",
margin: "20px 20px 10px 20px", margin: "20px 20px 10px 20px",
width: { width: {
xs: "91.6vw", xs: "91.6vw",
@ -32,10 +29,19 @@ const Header: React.FC = () => {
color: "black" color: "black"
}} }}
> >
<Toolbar> <Toolbar sx={{ display: "flex", justifyContent: "space-between" }}>
{/* Mobile Menu Button */} {/* Logo in Desktop, Centered in Mobile */}
<Box sx={{ display: "flex", alignItems: "center", flexGrow: { xs: 1, md: 0 } }}>
<img
src={headerlogo}
alt="Logo"
style={{ height: "40px", cursor: "pointer", width:'190px' }}
/>
</Box>
{/* Mobile Menu Button on the Right */}
<IconButton <IconButton
edge="start" edge="end"
color="inherit" color="inherit"
aria-label="menu" aria-label="menu"
sx={{ display: { xs: "block", md: "none" } }} sx={{ display: { xs: "block", md: "none" } }}
@ -44,49 +50,39 @@ const Header: React.FC = () => {
<MenuIcon /> <MenuIcon />
</IconButton> </IconButton>
{/* Logo or Title */}
<Typography variant="h6" sx={{ flexGrow: 1, textAlign: { xs: "center", md: "left" } }}>
My Website
</Typography>
{/* Desktop Navigation */} {/* Desktop Navigation */}
<Box sx={{ display: { xs: "none", md: "flex" }, gap: 3 }}> <Box sx={{ display: { xs: "none", md: "flex" }, gap: 3 }}>
<Button color="inherit">Home</Button> <Button color="inherit">Home</Button>
<Button color="inherit" >About</Button> <Button color="inherit">About</Button>
<Button color="inherit" >Team</Button> <Button color="inherit">Team</Button>
{/* Download Button */}
<Button <Button
sx={{ sx={{
padding:'7px 20px 7px 20px', padding: "7px 20px",
backgroundColor: "#0841adcc", backgroundColor: "#0841adcc",
color: "white", color: "white",
"&:hover": { backgroundColor: "darkblue" } "&:hover": { backgroundColor: "darkblue" }
}} }}
> >
Contact-Us Contact-Us
</Button> </Button>
</Box> </Box>
{/* Mobile Drawer Menu */} {/* Mobile Drawer Menu */}
<Drawer anchor="left" open={mobileOpen} onClose={toggleMobileMenu}> <Drawer anchor="right" open={mobileOpen} onClose={toggleMobileMenu}>
<Box sx={{ width: 250 }} role="presentation" onClick={toggleMobileMenu} onKeyDown={toggleMobileMenu}> <Box sx={{ width: 250 }} role="presentation" onClick={toggleMobileMenu} onKeyDown={toggleMobileMenu}>
<List> <List>
<ListItem disablePadding> <ListItem disablePadding>
<ListItemButton> <ListItemButton>
<ListItemText primary="Home" /> <ListItemText primary="Home" />
</ListItemButton> </ListItemButton>
</ListItem> </ListItem>
<ListItem disablePadding> <ListItem disablePadding>
<ListItemButton> <ListItemButton>
<ListItemText primary="Services" /> <ListItemText primary="Services" />
</ListItemButton> </ListItemButton>
</ListItem> </ListItem>
<ListItem disablePadding> <ListItem disablePadding>
<ListItemButton sx={{ backgroundColor: "blue", color: "white", "&:hover": { backgroundColor: "darkblue" } }}> <ListItemButton sx={{ backgroundColor: "blue", color: "white", "&:hover": { backgroundColor: "darkblue" } }}>
<ListItemText primary="Download" /> <ListItemText primary="Download" />
</ListItemButton> </ListItemButton>
</ListItem> </ListItem>

184
src/components/homepage.tsx
View File

@ -15,7 +15,7 @@ import gifeight from "../components/imageandgif/gifeight.gif";
import loopgreen from "../components/imageandgif/newloop.png"; import loopgreen from "../components/imageandgif/newloop.png";
import PartnerWork from "./ourwork"; import PartnerWork from "./ourwork";
import Footer from "./footer"; import Footer from "./footer";
import loopgreenback from "../components/imageandgif/loopgreenbackground.png" import loopgreenback from "../components/imageandgif/newloop.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"
@ -23,6 +23,7 @@ import mobileback from "../components/imageandgif/mobileback.png"
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 newbackgroundtwo from "../components/imageandgif/newbacktwo.png" import newbackgroundtwo from "../components/imageandgif/newbacktwo.png"
import wasteimage from "../components/imageandgif/loopwastemanage.png"
@ -39,7 +40,11 @@ const HomePage: React.FC = () => {
const remineRef = useRef<HTMLDivElement>(null); const remineRef = useRef<HTMLDivElement>(null);
const impactRef = useRef<HTMLDivElement>(null); const impactRef = useRef<HTMLDivElement>(null);
const reuseRef = useRef<HTMLDivElement>(null); const reuseRef = useRef<HTMLDivElement>(null);
const items = [
"Our mission is to maximize the reuse of nature’s precious resources, fostering a circular economy and driving true sustainability.",
"Loop Sustainability extends the life cycle of electronics through advanced technology and smart algorithms, enabling efficient reuse and responsible recycling.",
"We collaborate with consumer brands, retailers, recyclers, repair centers, policymakers, and more—all working together to reduce e-waste and drive sustainability.",
];
// 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) {
@ -69,68 +74,51 @@ const HomePage: React.FC = () => {
xs={12} xs={12}
sx={{ sx={{
marginTop: "0px", marginTop: "0px",
height: { xs: "190px", lg: "337px" }, height: { xs: "190px", lg: "58vh" },
width: { lg: "100vw" },
backgroundColor: "white", backgroundColor: "white",
position: "relative", position: "relative",
backgroundImage: { backgroundImage:
xs: `url(${mobileLogo})`, // Mobile background image
lg: `url(${logo})`, // Desktop background image `url(${loopgreenback})`
}, ,
backgroundSize: "contain", backgroundSize: "contain",
backgroundPosition: "right center", backgroundPosition: " center",
backgroundRepeat: "no-repeat", backgroundRepeat: "no-repeat",
marginBottom: { xs: "10px", md: "399px" }, marginBottom: { xs: "10px", md: "39px" },
}} }}
> >
</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 <Box
sx={{ sx={{
position: "absolute", p: 3,
top: { xs: "70%", md: "80%" }, borderRadius: "12px",
left: { xs: "2%", md: "5%" }, backgroundColor: "#7c77770d",
transform: "translateY(-30%)", textAlign: "left",
height: { xs: "235px", md: "440px" },
width: { xs: "150px", md: "220px" },
// backgroundColor: "#eee0e0a3",
backgroundColor: "white",
zIndex: 1,
padding: "20px",
overflowY: "auto",
borderRadius: "8px",
display: { xs: "none", md: "block" },
}} }}
> >
<ul style={{ <Typography variant="body1">{text}</Typography>
listStyleType: "none",
padding: "0",
margin: "0",
display: "flex",
flexDirection: "column",
gap: "10px"
}}>
<li onClick={() => scrollToRef(mineRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Mine</li>
<li onClick={() => scrollToRef(manufactureRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Manufacture</li>
<li onClick={() => scrollToRef(assembleRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Assemble</li>
<li onClick={() => scrollToRef(useRefBox)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Use</li>
<li onClick={() => scrollToRef(reuseRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Reuse</li>
<li onClick={() => scrollToRef(repairRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Repair</li>
<li onClick={() => scrollToRef(disintegrateRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Disintegrate</li>
<li onClick={() => scrollToRef(remineRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Remine</li>
<li onClick={() => scrollToRef(impactRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Impact</li>
</ul>
</Box> </Box>
</Grid> </Grid>
))}
</Grid> </Grid>
{/* Grid 2 */} {/* Grid 2 */}
<Box <Box
sx={{ sx={{
height: { xl: 1800, lg: 2000 , xs:2500 }, height: { xl: 1800, lg: 2000, xs: 2830, sm: 2400 },
width: '100%', width: '100%',
backgroundImage:{lg: `url(${newbackground})`, xs:`url(${mobileback})`}, backgroundImage: { lg: `url(${newbackground})`, xs: `url(${mobileback})` },
backgroundSize: "contain", backgroundSize: "contain",
backgroundPosition: { lg: "center", xs: "50% 93%" }, backgroundPosition: { lg: "center", xs: "50% 87%" },
backgroundRepeat: "no-repeat", backgroundRepeat: "no-repeat",
paddingBottom: {lg:20,xs:0} paddingBottom: { lg: 20, xs: 0 }
}} }}
> >
<Grid <Grid
@ -157,17 +145,17 @@ const HomePage: React.FC = () => {
<Box sx={{ width: { xs: "60%", md: "100%" } }}> <Box sx={{ width: { xs: "60%", md: "100%" } }}>
<img src={gifone} alt="Gif" style={{ width: "100%" }} /> <img src={gifone} 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' } }}>
<Typography variant="h4">Mine from nature</Typography> <Typography variant="h4">Mine from nature</Typography>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> <p>Raw materials are extracted through destructive mining practices, causing habitat loss, soil erosion, and water contamination. </p>
</Box> </Box>
</Box> </Box>
</Grid> </Grid>
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' } , display: { xs: 'none', sm: 'block' } }}></Grid> <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid>
{/* ROW 2 */} {/* ROW 2 */}
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' } , display: { xs: 'none', sm: 'block' } }}></Grid> <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid>
<Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: "flex", justifyContent: { lg: "flex-start" ,xs:"center" }, alignItems: "center" }}> <Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: "flex", justifyContent: { lg: "flex-start", xs: "center" }, alignItems: "center" }}>
<Box ref={manufactureRef} sx={{ <Box ref={manufactureRef} sx={{
height: { xs: "472px", lg: "215px" }, height: { xs: "472px", lg: "215px" },
width: { xs: "80%", lg: "552px" }, width: { xs: "80%", lg: "552px" },
@ -180,9 +168,9 @@ const HomePage: React.FC = () => {
textAlign: 'center', textAlign: 'center',
marginBottom: { xs: "20px", md: "0" }, marginBottom: { xs: "20px", md: "0" },
}}> }}>
<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' } }}>
<Typography variant="h4">Manufacturing</Typography> <Typography variant="h4">Manufacturing</Typography>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p> <p>Materials are processed in energy-intensive factories that rely on fossil fuels, generating high carbon emissions </p>
</Box> </Box>
<Box sx={{ width: { lg: '50%' } }}> <Box sx={{ width: { lg: '50%' } }}>
<img src={giftwo} alt="Gif" style={{ width: "100%" }} /> <img src={giftwo} alt="Gif" style={{ width: "100%" }} />
@ -192,7 +180,7 @@ const HomePage: React.FC = () => {
</Grid> </Grid>
{/* ROW 3 */} {/* ROW 3 */}
<Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '401px' }, display: "flex", justifyContent: { lg: 'flex-end' ,xs:'center' }, alignItems: "center" }}> <Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '401px' }, display: "flex", justifyContent: { lg: 'flex-end', xs: 'center' }, alignItems: "center" }}>
<Box ref={assembleRef} sx={{ <Box ref={assembleRef} sx={{
height: { xs: "332px", lg: "215px" }, height: { xs: "332px", lg: "215px" },
width: { xs: "80%", lg: "595px" }, width: { xs: "80%", lg: "595px" },
@ -209,18 +197,18 @@ const HomePage: React.FC = () => {
<Box sx={{ width: { xs: "60%", md: "100%" } }}> <Box sx={{ width: { xs: "60%", md: "100%" } }}>
<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' } }}>
<Typography variant="h4">Assemble</Typography> <Typography variant="h4">Assemble</Typography>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p> <p>Materials are processed in energy-intensive factories that rely on fossil fuels, generating high carbon emissions </p>
</Box> </Box>
</Box> </Box>
</Grid> </Grid>
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' } ,display: { xs: 'none', sm: 'block' } }}></Grid> <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid>
{/* ROW 4 */} {/* ROW 4 */}
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' } , display: { xs: 'none', sm: 'block' }}}></Grid> <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid>
<Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: "flex", justifyContent: { lg: 'flex-start' ,xs:'center' }, alignItems: "center" }}> <Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: "flex", justifyContent: { lg: 'flex-start', xs: 'center' }, alignItems: "center" }}>
<Box ref={useRefBox} sx={{ <Box ref={useRefBox} sx={{
height: { xs: "332px", lg: "215px" }, height: { xs: "332px", lg: "215px" },
width: { xs: "80%", lg: "550px" }, width: { xs: "80%", lg: "550px" },
@ -233,9 +221,9 @@ const HomePage: React.FC = () => {
textAlign: 'center', textAlign: 'center',
marginBottom: { xs: "20px", md: "0" }, marginBottom: { xs: "20px", md: "0" },
}}> }}>
<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' } }}>
<Typography variant="h4">Use</Typography> <Typography variant="h4">Use</Typography>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p> <p>Devices are used by consumers and businesses, but their production and usage contribute significantly to carbon footprints, energy consumption, and waste generation.</p>
</Box> </Box>
<Box sx={{ width: { xs: "60%", md: "100%" } }}> <Box sx={{ width: { xs: "60%", md: "100%" } }}>
<img src={giffour} alt="Gif" style={{ width: "100%" }} /> <img src={giffour} alt="Gif" style={{ width: "100%" }} />
@ -244,29 +232,29 @@ const HomePage: React.FC = () => {
</Box> </Box>
</Grid> </Grid>
{/* new2 */} {/* new2 */}
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' } , display: { xs: 'none', sm: 'block' } }}></Grid> <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid>
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid> <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid>
{/* newnew */} {/* newnew */}
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}> <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}>
<Box ref={reuseRef} sx={{ <Box ref={reuseRef} sx={{
height: { xs: "332px", lg: "115px" }, height: { xs: "442px", lg: "115px" },
width: { xs: "80%", lg: "250px" }, width: { xs: "100%", lg: "250px" },
zIndex: 1, zIndex: 1,
display: "flex", display: "flex",
flexDirection: { xs: "column", lg: "column" }, flexDirection: { xs: "column", lg: "column" },
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
padding: "10px", padding: "10px",
textAlign: 'center', textAlign: 'left',
marginBottom: { xs: "20px", md: "0" }, marginBottom: { xs: "20px", md: "0" },
}}> }}>
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: {lg:'left' , xs:'center'}, background:{xs:'green', lg:'white'} }}> <Box sx={{ width: "100%", paddingLeft: { xs: "8px", md: "10px" }, textAlign: { lg: 'left', xs: 'left' }, background: { xs: '#95CD41', lg: 'white' } }}>
<Typography variant="h4">Reuse</Typography> <Typography variant="h4">Reuse</Typography>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p> <p>We help businesses reuse their old electronic devices, repurposing functional parts and components for future use or resale, reducing overall environmental impact.</p>
</Box> </Box>
<Box sx={{ width: { xs: "60%", md: "100%" } }}> <Box sx={{ width: { xs: "100%", md: "100%" } }}>
<img src={giffive} alt="Gif" style={{ width: "100%" }} /> <img src={giffive} alt="Gif" style={{ width: "100%" }} />
</Box> </Box>
@ -275,21 +263,21 @@ const HomePage: React.FC = () => {
<Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}> <Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}>
<Box ref={repairRef} sx={{ <Box ref={repairRef} sx={{
height: { xs: "332px", lg: "115px" }, height: { xs: "332px", lg: "115px" },
width: { xs: "80%", lg: "250px" }, width: { xs: "87%", lg: "250px" },
zIndex: 1, zIndex: 1,
display: "flex", display: "flex",
flexDirection: { xs: "column", lg: "column" }, flexDirection: { xs: "column", lg: "column" },
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
padding: "10px", padding: "10px",
textAlign: 'center', textAlign: 'left',
marginBottom: { xs: "20px", md: "0" }, marginBottom: { xs: "20px", md: "0" },
}}> }}>
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: {lg:'left' , xs:'center'}, background:{xs:'green', lg:'white'} }}> <Box sx={{ width: "100%", paddingLeft: { xs: "10px", md: "10px" }, paddingRight: { xs: "2px" }, textAlign: { lg: 'left', xs: 'left' }, background: { xs: '#95CD41', lg: 'white' } }}>
<Typography variant="h4">Repair</Typography> <Typography variant="h4">Repair</Typography>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p> <p>Loop Sustainability steps in to repair damaged or outdated electronics. Our repair services extend the life of devices, minimizing waste and reducing the need for new products.</p>
</Box> </Box>
<Box sx={{ width: { xs: "60%", md: "100%" } }}> <Box sx={{ width: { xs: "100%", md: "100%" } }}>
<img src={gifsix} alt="Gif" style={{ width: "100%" }} /> <img src={gifsix} alt="Gif" style={{ width: "100%" }} />
</Box> </Box>
@ -298,7 +286,7 @@ const HomePage: React.FC = () => {
{/* newnewnwe */} {/* newnewnwe */}
<Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}> <Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}>
<Box ref={disintegrateRef} sx={{ <Box ref={disintegrateRef} sx={{
height: { xs: "332px", lg: "115px" }, height: { xs: "600px", lg: "115px" },
width: { xs: "92%", lg: "250px" }, width: { xs: "92%", lg: "250px" },
zIndex: 1, zIndex: 1,
display: "flex", display: "flex",
@ -306,16 +294,16 @@ const HomePage: React.FC = () => {
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
padding: "10px", padding: "10px",
textAlign: 'center', textAlign: 'left',
marginBottom: { xs: "20px", md: "0" }, marginBottom: { xs: "20px", md: "0" },
marginTop: { xs: "20px"}, marginTop: { xs: "20px" },
}}> }}>
<Box sx={{ width: { xs: "60%", md: "100%" } }}> <Box sx={{ width: { xs: "60%", md: "100%" } }}>
<img src={gifseven} alt="Gif" style={{ width: "100%" }} /> <img src={gifseven} alt="Gif" style={{ width: "100%" }} />
</Box> </Box>
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: {lg:'left' , xs:'center'}, background:{xs:'green', lg:'white'} }}> <Box sx={{ width: "100%", paddingLeft: { xs: "10px", md: "10px" }, textAlign: { lg: 'left', xs: 'left' }, background: { xs: '#95CD41', lg: 'white' } }}>
<Typography variant="h4">Disintegrate</Typography> <Typography variant="h4">Disintegrate</Typography>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p> <p>When electronics can no longer be repaired or reused, we safely disintegrate them into valuable materials, ensuring they are properly processed and recycled.</p>
</Box> </Box>
@ -323,7 +311,7 @@ const HomePage: React.FC = () => {
</Grid> </Grid>
<Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}> <Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}>
<Box ref={remineRef} sx={{ <Box ref={remineRef} sx={{
height: { xs: "332px", lg: "115px" }, height: { xs: "660px", lg: "115px" },
width: { xs: "92%", lg: "250px" }, width: { xs: "92%", lg: "250px" },
zIndex: 1, zIndex: 1,
display: "flex", display: "flex",
@ -333,41 +321,47 @@ const HomePage: React.FC = () => {
padding: "10px", padding: "10px",
textAlign: 'center', textAlign: 'center',
marginBottom: { xs: "20px", md: "0" }, marginBottom: { xs: "20px", md: "0" },
marginTop: { xs: "20px"}, marginTop: { xs: "20px" },
}}> }}>
<Box sx={{ width: { xs: "60%", md: "100%" } }}> <Box sx={{ width: { xs: "60%", md: "100%" } }}>
<img src={gifeight} alt="Gif" style={{ width: "100%" }} /> <img src={gifeight} alt="Gif" style={{ width: "100%" }} />
</Box> </Box>
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: {lg:'left' , xs:'center'} , background:{xs:'green', lg:'white'} }}> <Box sx={{ width: "100%", paddingLeft: { xs: "10px", md: "10px" }, textAlign: { lg: 'left', xs: 'left' }, background: { xs: '#95CD41', lg: 'white' } }}>
<Typography variant="h4">Remine</Typography> <Typography variant="h4">Remine</Typography>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p> <p>We take the disintegrated materials and remines them for precious metals ,turning waste back into usable resources, closing the loop on electronic waste.</p>
</Box> </Box>
</Box> </Box>
</Grid> </Grid>
</Grid> </Grid>
</Box> </Box>
<Grid <Grid
item container
xs={12} xs={12}
ref={mineRef} // Attach ref here
sx={{ sx={{
height: "300px", height: "66 0px",
backgroundImage: `url(${loopgreen})`, marginTop: { lg: 20, xs: 0 },
marginTop:{lg:20 , xs:0}, display: "flex",
position: "relative", justifyContent: "center",
backgroundSize: "contain", alignItems: "center",
backgroundPosition: "center", overflow: "hidden"
backgroundRepeat: "no-repeat", }}
}}> >
<img
src={wasteimage}
alt="Waste Image"
style={{
width: "100%",
height: "100%",
objectFit: "fill"
}}
/>
</Grid> </Grid>
<PartnerWork /> <PartnerWork />
<OurTeam /> <OurTeam />
<Footer /> <Footer />
</Box> </Box>

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 550 KiB