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

font
continuous-integration/drone/push Build is passing Details
continuous-integration/drone/pr Build is passing Details

This commit is contained in:
hardik 2025-02-20 12:48:46 +05:30
parent 5a99fb5b16
commit 17c336e67c
4 changed files with 71 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
src/components/header.tsx
View File

@ -4,7 +4,7 @@ import {
ListItem, ListItemButton, ListItemText ListItem, ListItemButton, ListItemText
} from "@mui/material"; } from "@mui/material";
import MenuIcon from "@mui/icons-material/Menu"; import MenuIcon from "@mui/icons-material/Menu";
import headerlogo from "../components/imageandgif/newlogo.png" import headerlogo from "../components/imageandgif/newlogo.png";
const Header: React.FC = () => { const Header: React.FC = () => {
const [mobileOpen, setMobileOpen] = useState<boolean>(false); const [mobileOpen, setMobileOpen] = useState<boolean>(false);
@ -17,9 +17,8 @@ const Header: React.FC = () => {
<AppBar <AppBar
position="fixed" position="fixed"
sx={{ sx={{
backgroundColor: {md:"#f7f7f7" , xs:'white'}, backgroundColor: { md: "#f7f7f7", xs: "white" },
margin: "20px 20px 10px 20px", margin: "20px 20px 10px 20px",
boxShadow: "none", boxShadow: "none",
width: { width: {
xs: "91.6vw", xs: "91.6vw",
@ -29,7 +28,7 @@ const Header: React.FC = () => {
xl: "96.4vw" xl: "96.4vw"
}, },
color: "black", color: "black",
zIndex:11111 zIndex: 11111
}} }}
> >
<Toolbar sx={{ display: "flex", justifyContent: "space-between" }}> <Toolbar sx={{ display: "flex", justifyContent: "space-between" }}>
@ -38,7 +37,7 @@ const Header: React.FC = () => {
<img <img
src={headerlogo} src={headerlogo}
alt="Logo" alt="Logo"
style={{ height: "50px", cursor: "pointer", width:'176px' }} style={{ height: "50px", cursor: "pointer", width: "176px" }}
/> />
</Box> </Box>
@ -54,49 +53,49 @@ const Header: React.FC = () => {
</IconButton> </IconButton>
{/* Desktop Navigation */} {/* Desktop Navigation */}
<Box sx={{ display: { xs: "none", md: "flex" }, gap: 3 }}> <Box sx={{ display: { xs: "none", md: "flex" }, gap: 3, fontFamily: "Helvetica" }}>
<Button color="inherit">Home</Button> <Button sx={{ fontFamily: "Helvetica", textTransform: "capitalize" }} color="inherit">Home</Button>
<Button color="inherit">About</Button> <Button sx={{ fontFamily: "Helvetica", textTransform: "capitalize" }} color="inherit">About</Button>
<Button color="inherit">Team</Button> <Button sx={{ fontFamily: "Helvetica", textTransform: "capitalize" }} color="inherit">Team</Button>
<Button <Button
sx={{ sx={{
padding: "7px 20px", padding: "7px 20px",
backgroundColor: "#0841adcc", backgroundColor: "#0841adcc",
color: "white", color: "white",
fontFamily: "Helvetica",
textTransform: "capitalize",
"&:hover": { backgroundColor: "darkblue" } "&:hover": { backgroundColor: "darkblue" }
}} }}
> >
Contact-Us Contact us
</Button> </Button>
</Box> </Box>
{/* Mobile Drawer Menu */} {/* Mobile Drawer Menu */}
<Drawer anchor="right" open={mobileOpen} onClose={toggleMobileMenu} sx={{zIndex:111111}}> <Drawer anchor="right" open={mobileOpen} onClose={toggleMobileMenu} sx={{ zIndex: 111111 }}>
<Box sx={{ width: 250 }} role="presentation" onClick={toggleMobileMenu} onKeyDown={toggleMobileMenu}> <Box sx={{ width: 250 }} role="presentation" onClick={toggleMobileMenu} onKeyDown={toggleMobileMenu}>
<List> <List>
<ListItem disablePadding> {["Home", "What we do", "Our philosophy", "Our team"].map((text) => (
<ListItemButton> <ListItem key={text} disablePadding>
<ListItemText primary="Home" /> <ListItemButton>
</ListItemButton> <ListItemText
</ListItem> primary={text}
<ListItem disablePadding> sx={{ fontFamily: "Helvetica", textTransform: "capitalize" }}
<ListItemButton> />
<ListItemText primary="What we do" /> </ListItemButton>
</ListItemButton> </ListItem>
</ListItem> ))}
<ListItem disablePadding> <ListItem>
<ListItemButton> <ListItemButton
<ListItemText primary="Our philosophy" /> sx={{
</ListItemButton> backgroundColor: "blue",
</ListItem> color: "white",
<ListItem disablePadding> fontFamily: "Helvetica",
<ListItemButton> textTransform: "capitalize",
<ListItemText primary="Our team" /> "&:hover": { backgroundColor: "darkblue" }
</ListItemButton> }}
</ListItem> >
<ListItem > <ListItemText primary="Contact us" />
<ListItemButton sx={{ backgroundColor: "blue", color: "white", "&:hover": { backgroundColor: "darkblue" } }}>
<ListItemText primary="Contact Us" />
</ListItemButton> </ListItemButton>
</ListItem> </ListItem>
</List> </List>

89
src/components/homepage.tsx
View File

@ -116,6 +116,7 @@ const HomePage: React.FC = () => {
borderRadius: "12px", borderRadius: "12px",
backgroundColor: "#7c77770d", backgroundColor: "#7c77770d",
textAlign: "center", textAlign: "center",
color:'#333333'
}} }}
> >
@ -167,8 +168,8 @@ const HomePage: React.FC = () => {
<img src={gifone} alt="Gif" style={{ width: "91%" }} /> <img src={gifone} alt="Gif" style={{ width: "91%" }} />
</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" sx={{fontSize:{xs:"18px" , sm:'36px'}}}>Mine from nature</Typography>
<Typography variant="body2">Raw materials are extracted through destructive mining practices, causing habitat loss, soil erosion, and water contamination. </Typography> <Typography variant="body2" sx={{fontSize:{xs:"12px" , sm:'16px'}}} >Raw materials are extracted through destructive mining practices, causing habitat loss, soil erosion, and water contamination. </Typography>
</Box> </Box>
</Box> </Box>
</Grid> </Grid>
@ -190,8 +191,8 @@ const HomePage: React.FC = () => {
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" sx={{fontSize:{xs:"18px" , sm:'36px'}}}>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" sx={{fontSize:{xs:"12px" , sm:'16px'}}}>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%" }} />
@ -222,8 +223,8 @@ const HomePage: React.FC = () => {
<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" sx={{fontSize:{xs:"18px" , sm:'36px'}}}>Assemble</Typography>
<Typography variant="body2">Materials are processed in energy-intensive factories that rely on fossil fuels, generating high carbon emissions </Typography> <Typography variant="body2" sx={{fontSize:{xs:"12px" , sm:'16px'}}}>Materials are processed in energy-intensive factories that rely on fossil fuels, generating high carbon emissions </Typography>
</Box> </Box>
</Box> </Box>
@ -246,8 +247,8 @@ const HomePage: React.FC = () => {
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" sx={{fontSize:{xs:"18px" , sm:'36px'}}}>Use</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> <Typography variant="body2" sx={{fontSize:{xs:"12px" , sm:'16px'}}}>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%' } }}>
@ -278,8 +279,8 @@ const HomePage: React.FC = () => {
margin: { xs: 1 } margin: { xs: 1 }
}}> }}>
<Box sx={{ width: "100%", textAlign: "left", background: { xs: '#95CD41', lg: 'white' }, p: 2 }}> <Box sx={{ width: "100%", textAlign: "left", background: { xs: '#95CD41', lg: 'white' }, p: 2 }}>
<Typography variant="h4">Reuse</Typography> <Typography variant="h4"sx={{fontSize:{xs:"18px" , sm:'36px'}}}>Reuse</Typography>
<Typography variant="body2"> <Typography variant="body2" sx={{fontSize:{xs:"12px" , sm:'16px'}}}>
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.
</Typography> </Typography>
</Box> </Box>
@ -304,8 +305,8 @@ const HomePage: React.FC = () => {
margin: { xs: 1 } margin: { xs: 1 }
}}> }}>
<Box sx={{ width: "100%", textAlign: "left", background: { xs: '#95CD41', lg: 'white' }, p: 2 }}> <Box sx={{ width: "100%", textAlign: "left", background: { xs: '#95CD41', lg: 'white' }, p: 2 }}>
<Typography variant="h4">Repair</Typography> <Typography variant="h4"sx={{fontSize:{xs:"18px" , sm:'36px'}}}>Repair</Typography>
<Typography variant="body2"> <Typography variant="body2"sx={{fontSize:{xs:"12px" , sm:'16px'}}}>
Loop Sustainability steps in to repair damaged or outdated electronics. Loop Sustainability steps in to repair damaged or outdated electronics.
Our repair services extend the life of devices, minimizing waste and Our repair services extend the life of devices, minimizing waste and
reducing the need for new products. reducing the need for new products.
@ -338,8 +339,8 @@ const HomePage: React.FC = () => {
<img src={gifseven} alt="Gif" style={{ width: "100%" }} /> <img src={gifseven} alt="Gif" style={{ width: "100%" }} />
</Box> </Box>
<Box sx={{ width: "100%", paddingLeft: { xs: "10px", md: "10px" }, textAlign: { lg: 'left', xs: 'left' }, background: { xs: '#95CD41', 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"sx={{fontSize:{xs:"18px" , sm:'36px'}}}>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" sx={{fontSize:{xs:"12px" , sm:'16px'}}}>When electronics can no longer be repaired or reused, we safely disintegrate them into valuable materials, ensuring they are properly processed and recycled.</Typography>
</Box> </Box>
@ -363,56 +364,28 @@ const HomePage: React.FC = () => {
<img src={gifeight} alt="Gif" style={{ width: "100%" }} /> <img src={gifeight} alt="Gif" style={{ width: "100%" }} />
</Box> </Box>
<Box sx={{ width: "100%", paddingLeft: { xs: "10px", md: "10px" }, textAlign: { lg: 'left', xs: 'left' }, background: { xs: '#95CD41', 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"sx={{fontSize:{xs:"18px" , sm:'36px'}}}>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 variant="body2"sx={{fontSize:{xs:"12px" , sm:'16px'}}} >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>
</Box> </Box>
</Box> </Box>
</Grid> </Grid>
{/* mobile only */} {/* mobile only */}
<Grid container spacing={2} rowSpacing={{ xs: 24, sm: 36, md: 38 , }} <Grid container spacing={2} rowSpacing={{ xs: 24, sm: 36, md: 38 }}
sx={{ sx={{
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: { xs: "contain", md: "70%", sm:'70%' }, backgroundSize: { xs: "60%", md: "70%", sm:'70%' },
backgroundPosition: { xs: "50% 60%", md: '50% 57%' }, backgroundPosition: { xs: "50% 60%", md: '50% 57%' },
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: 131, md: 118 }, maxHeight: 270 }}> <Box sx={{ background: "#95CD41", p: 1, height: { xs: 175, sm: 131, md: 118 }, maxHeight: 270 }}>
<Typography variant="h4">Reuse</Typography> <Typography variant="h4" sx={{fontSize:{xs:"18px"}}}>Reuse</Typography>
<Typography variant="body2"> <Typography variant="body2" sx={{fontSize:{xs:"12px"}}}>
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.
</Typography> </Typography>
</Box> </Box>
@ -432,9 +405,9 @@ 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: 131, md: 118 }, maxHeight: 270 }}> <Box sx={{ background: "#95CD41", p: 1, height: { xs: 175, sm: 131, md: 118 }, maxHeight: 270 }}>
<Typography variant="h4">Repair</Typography> <Typography variant="h4" sx={{fontSize:{xs:"18px"}}}>Repair</Typography>
<Typography variant="body2"> <Typography variant="body2" sx={{fontSize:{xs:"12px"}}}>
Loop Sustainability steps in to repair damaged or outdated electronics. Loop Sustainability steps in to repair damaged or outdated electronics.
Our repair services extend the life of devices, minimizing waste and Our repair services extend the life of devices, minimizing waste and
reducing the need for new products. reducing the need for new products.
@ -464,9 +437,9 @@ const HomePage: React.FC = () => {
/> />
</Box> </Box>
</Box> </Box>
<Box sx={{ background: "#95CD41", p: 1, height: { xs: 256, sm: 131 , md:118}, maxHeight: 270 }}> <Box sx={{ background: "#95CD41", p: 1, height: { xs: 175, sm: 131 , md:118}, maxHeight: 270 }}>
<Typography variant="h4" sx={{ fontSize: "1.3rem" }}>Disintegrate</Typography> <Typography variant="h4" sx={{fontSize:{xs:"18px"}}}>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"sx={{fontSize:{xs:"12px"}}} >When electronics can no longer be repaired or reused, we safely disintegrate them into valuable materials, ensuring they are properly processed and recycled.</Typography>
</Box> </Box>
</Box> </Box>
@ -484,9 +457,9 @@ const HomePage: React.FC = () => {
/> />
</Box> </Box>
</Box> </Box>
<Box sx={{ background: "#95CD41", p: 1, textAlign: { xs: "left", md: 'center' }, height: { xs: 256, sm: 131 , md:118} }}> <Box sx={{ background: "#95CD41", p: 1, textAlign: { xs: "left", md: 'center' }, height: { xs: 175, sm: 131 , md:118} }}>
<Typography variant="h4" sx={{ fontSize: '1.6rem' }}>Remine</Typography> <Typography variant="h4" sx={{ fontSize: '18px' }}>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"sx={{fontSize:{xs:"12px"}}} >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>
</Box> </Box>
</Grid> </Grid>

4
src/components/ourteam.tsx
View File

@ -59,7 +59,7 @@ const OurTeam: React.FC = () => {
sx={{ cursor: "pointer", marginBottom: 10 }} sx={{ cursor: "pointer", marginBottom: 10 }}
onClick={() => setShowTeam(!showTeam)} onClick={() => setShowTeam(!showTeam)}
> >
<Typography variant="h4" sx={{ fontWeight: "bold" , color:'#333333'}}> <Typography variant="h4" sx={{ fontWeight: "bold" , color:'#333333' ,fontSize: { xs: "20px", sm: "48px" }}}>
Our Team Our Team
</Typography> </Typography>
@ -67,7 +67,7 @@ const OurTeam: React.FC = () => {
{showTeam ? <ExpandLessIcon /> : <ExpandMoreIcon />} {showTeam ? <ExpandLessIcon /> : <ExpandMoreIcon />}
</IconButton> </IconButton>
</Box> </Box>
<Typography variant="body2" sx={{color:'#4D4D4D'}}>For over a decade, our team members have been actively involved in institutional reuse and recycling across various organizations and projects in India. We take pride in our leadership, strong industry relationships, regulatory expertise, process efficiency, and technical proficiency.</Typography> <Typography variant="body2" sx={{color:'#4D4D4D' , fontSize: { xs: "12px", sm: "20px" }}}>For over a decade, our team members have been actively involved in institutional reuse and recycling across various organizations and projects in India. We take pride in our leadership, strong industry relationships, regulatory expertise, process efficiency, and technical proficiency.</Typography>
{/* Expanding Team Section */} {/* Expanding Team Section */}
<motion.div <motion.div
initial={{ opacity: 0, height: 0 }} initial={{ opacity: 0, height: 0 }}

5
src/components/whyus.tsx
View File

@ -27,7 +27,7 @@ const items = [
const WhyChooseUs: React.FC = () => { const WhyChooseUs: React.FC = () => {
return ( return (
<Box sx={{ textAlign: "center", mt: 5 }}> <Box sx={{ textAlign: "center", mt: 5 }}>
<Typography variant="h4" sx={{ fontWeight: "bold" , color:'#333333' ,mb:4}}> <Typography variant="h4" sx={{ fontWeight: "bold", color: '#333333', mb: 4, fontSize: { xs: "20px", sm: "48px" } }}>
Why Choose Us? Why Choose Us?
</Typography> </Typography>
<Grid <Grid
@ -39,9 +39,10 @@ const WhyChooseUs: React.FC = () => {
{items.map((item, index) => ( {items.map((item, index) => (
<Grid item key={index} xs={6} sm={2} display="flex" justifyContent="center"> <Grid item key={index} xs={6} sm={2} display="flex" justifyContent="center">
<Circle sx={{ borderColor: item.color }}> <Circle sx={{ borderColor: item.color }}>
<Typography variant="body1" fontWeight="500"> <Typography variant="body1" fontWeight="400" fontFamily="Roboto" sx={{fontSize:{xs:'12px', sm:'24px'}}}>
{item.text} {item.text}
</Typography> </Typography>
</Circle> </Circle>
</Grid> </Grid>
))} ))}