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

Compare commits

base: internal:333697ea887db610a1f4c8832e46c66ecbe8b94b
Branches Tags
internal:main
..
compare: internal:970508cce21e155d26a9d9b621917bce07f4a815
Branches Tags
internal:main

No commits in common. "333697ea887db610a1f4c8832e46c66ecbe8b94b" and "970508cce21e155d26a9d9b621917bce07f4a815" have entirely different histories.
333697ea88 ... 970508cce2

4 changed files with 38 additions and 71 deletions
Show Stats Expand all files Collapse all files

4
src/App.css
View File

@ -37,8 +37,8 @@
}
}
@font-face {
font-family: 'SF Pro Regular';
src: url('../src/fonts/SF-Pro-Rounded-Regular.otf') format('opentype');
font-family: 'SF Pro Medium';
src: url('../src/fonts/SF-Pro-Medium.otf') format('opentype');
font-weight: normal;
font-style: normal;
}

50
src/components/homepage.tsx
View File

@ -71,7 +71,7 @@ const HomePage: React.FC = () => {
},
},
typography: {
fontFamily: "SF Pro Rounded Regular, Arial, sans-serif",
fontFamily: "SF Pro Rounded Medium, Arial, sans-serif",
h4: {
color: "#333333",
},
@ -116,9 +116,8 @@ const HomePage: React.FC = () => {
borderRadius: "12px",
backgroundColor: "#7c77770d",
textAlign: "center",
color:'#333333',
height:'107px',
fontSize:{xs:'12px' , sm:'16px'}
color:'#333333'
}}
>
<Typography variant="body1">{text}</Typography>
@ -129,7 +128,7 @@ const HomePage: React.FC = () => {
{/* Grid 2 */}
<Box
sx={{
height: { xl: 1800, lg: 2000, xs: 2857, sm: 3630, md: 2790 },
height: { xl: 1800, lg: 2000, xs: 2857, sm: 3630, md: 2550 },
width: '100%',
backgroundImage: { lg: `url(${newbackground})`, xs: null },
backgroundSize: "contain",
@ -164,13 +163,12 @@ const HomePage: React.FC = () => {
padding: "10px",
textAlign: 'center',
marginBottom: { xs: "20px", md: "0" },
}}>
<Box sx={{ width: { xs: "60%", md: "70%" } }}>
<img src={gifone} alt="Gif" style={{ width: "91%" }} />
</Box>
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
<Typography variant="h4" sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Mine from nature</Typography>
<Typography variant="h4" sx={{fontSize:{xs:"18px" , sm:'36px'}}}>Mine from nature</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>
@ -193,7 +191,7 @@ const HomePage: React.FC = () => {
marginBottom: { xs: "20px", md: "0" },
}}>
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
<Typography variant="h4" sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Manufacturing</Typography>
<Typography variant="h4" sx={{fontSize:{xs:"18px" , sm:'36px'}}}>Manufacturing</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 sx={{ width: { lg: '50%', md: '67%' } }}>
@ -225,7 +223,7 @@ const HomePage: React.FC = () => {
<img src={gifthree} alt="Gif" style={{ width: "100%" }} />
</Box>
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
<Typography variant="h4" sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Assemble</Typography>
<Typography variant="h4" sx={{fontSize:{xs:"18px" , sm:'36px'}}}>Assemble</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>
@ -249,7 +247,7 @@ const HomePage: React.FC = () => {
marginBottom: { xs: "20px", md: "0" },
}}>
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
<Typography variant="h4" sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Use</Typography>
<Typography variant="h4" sx={{fontSize:{xs:"18px" , sm:'36px'}}}>Use</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>
@ -281,7 +279,7 @@ const HomePage: React.FC = () => {
margin: { xs: 1 }
}}>
<Box sx={{ width: "100%", textAlign: "left", background: { xs: '#95CD41', lg: 'white' }, p: 2 }}>
<Typography variant="h4"sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Reuse</Typography>
<Typography variant="h4"sx={{fontSize:{xs:"18px" , sm:'36px'}}}>Reuse</Typography>
<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.
</Typography>
@ -307,7 +305,7 @@ const HomePage: React.FC = () => {
margin: { xs: 1 }
}}>
<Box sx={{ width: "100%", textAlign: "left", background: { xs: '#95CD41', lg: 'white' }, p: 2 }}>
<Typography variant="h4"sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Repair</Typography>
<Typography variant="h4"sx={{fontSize:{xs:"18px" , sm:'36px'}}}>Repair</Typography>
<Typography variant="body2"sx={{fontSize:{xs:"12px" , sm:'16px'}}}>
Loop Sustainability steps in to repair damaged or outdated electronics.
Our repair services extend the life of devices, minimizing waste and
@ -341,7 +339,7 @@ const HomePage: React.FC = () => {
<img src={gifseven} alt="Gif" style={{ width: "100%" }} />
</Box>
<Box sx={{ width: "100%", paddingLeft: { xs: "10px", md: "10px" }, textAlign: { lg: 'left', xs: 'left' }, background: { xs: '#95CD41', lg: 'white' } }}>
<Typography variant="h4"sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Disintegrate</Typography>
<Typography variant="h4"sx={{fontSize:{xs:"18px" , sm:'36px'}}}>Disintegrate</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>
@ -366,7 +364,7 @@ const HomePage: React.FC = () => {
<img src={gifeight} alt="Gif" style={{ width: "100%" }} />
</Box>
<Box sx={{ width: "100%", paddingLeft: { xs: "10px", md: "10px" }, textAlign: { lg: 'left', xs: 'left' }, background: { xs: '#95CD41', lg: 'white' } }}>
<Typography variant="h4"sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Remine</Typography>
<Typography variant="h4"sx={{fontSize:{xs:"18px" , sm:'36px'}}}>Remine</Typography>
<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>
</Box>
@ -386,13 +384,13 @@ const HomePage: React.FC = () => {
<Grid item xs={6}>
<Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}>
<Box sx={{ background: "#95CD41", p: 1, height: { xs: 175, sm: 131, md: 118 }, maxHeight: 270 }}>
<Typography variant="h4" sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Reuse</Typography>
<Typography variant="body2" sx={{fontSize:{xs:"12px" , sm:'16px'}}}>
<Typography variant="h4" sx={{fontSize:{xs:"18px"}}}>Reuse</Typography>
<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.
</Typography>
</Box>
<Box sx={{ display: "flex", justifyContent: "center" }}>
<Box sx={{ width: { xs: "100%", md: "60%" } }}>
<Box sx={{ width: { xs: "100%", md: "80%" } }}>
<img
src={gifsix}
alt="Reuse Gif"
@ -408,15 +406,15 @@ const HomePage: React.FC = () => {
<Grid item xs={6}>
<Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}>
<Box sx={{ background: "#95CD41", p: 1, height: { xs: 175, sm: 131, md: 118 }, maxHeight: 270 }}>
<Typography variant="h4" sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Repair</Typography>
<Typography variant="body2" sx={{fontSize:{xs:"12px" , sm:'16px'}}}>
<Typography variant="h4" sx={{fontSize:{xs:"18px"}}}>Repair</Typography>
<Typography variant="body2" sx={{fontSize:{xs:"12px"}}}>
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.
</Typography>
</Box>
<Box sx={{ display: "flex", justifyContent: "center" }}>
<Box sx={{ width: { xs: "100%", md: "60%" } }}>
<Box sx={{ width: { xs: "100%", md: "80%" } }}>
<img
src={giffive}
alt="Reuse Gif"
@ -431,7 +429,7 @@ const HomePage: React.FC = () => {
<Grid item xs={6} sx={{ mt: 2 }}>
<Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}>
<Box sx={{ display: "flex", justifyContent: "center" }}>
<Box sx={{ width: { xs: "100%", md: "60%" } }}>
<Box sx={{ width: { xs: "100%", md: "80%" } }}>
<img
src={gifseven}
alt="Reuse Gif"
@ -440,8 +438,8 @@ const HomePage: React.FC = () => {
</Box>
</Box>
<Box sx={{ background: "#95CD41", p: 1, height: { xs: 175, sm: 131 , md:118}, maxHeight: 270 }}>
<Typography variant="h4" sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Disintegrate</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>
<Typography variant="h4" sx={{fontSize:{xs:"18px"}}}>Disintegrate</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>
@ -451,7 +449,7 @@ const HomePage: React.FC = () => {
<Grid item xs={6} sx={{ mt: 2 }}>
<Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2, maxHeight: 270 }}>
<Box sx={{ display: "flex", justifyContent: "center" }}>
<Box sx={{ width: { xs: "100%", md: "60%" } }}>
<Box sx={{ width: { xs: "100%", md: "80%" } }}>
<img
src={gifeight}
alt="Reuse Gif"
@ -460,8 +458,8 @@ const HomePage: React.FC = () => {
</Box>
</Box>
<Box sx={{ background: "#95CD41", p: 1, textAlign: { xs: "left", md: 'center' }, height: { xs: 175, sm: 131 , md:118} }}>
<Typography variant="h4" sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Remine</Typography>
<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 variant="h4" sx={{ fontSize: '18px' }}>Remine</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>
</Grid>

51
src/components/ourteam.tsx
View File

@ -5,6 +5,7 @@ import {
Card,
CardContent,
CardMedia,
Divider,
IconButton,
Box,
} from "@mui/material";
@ -19,7 +20,6 @@ import RamaKrishnan from "../components/imageandgif/RamaKrishnan.png";
import KartikReddy from "../components/imageandgif/KartikReddy.png";
import Suresh from "../components/imageandgif/Suresh.png";
import Palani from "../components/imageandgif/Palani.png";
interface TeamMember {
name: string;
role: string;
@ -59,15 +59,7 @@ const OurTeam: React.FC = () => {
sx={{ cursor: "pointer", marginBottom: 10 }}
onClick={() => setShowTeam(!showTeam)}
>
<Typography
variant="h4"
sx={{
fontWeight: "bold",
fontSize: { xs: "20px", sm: "48px" },
fontFamily: "SF Pro Rounded Regular, Arial, sans-serif",
color: "#333333",
}}
>
<Typography variant="h4" sx={{ fontWeight: "bold" , color:'#333333' ,fontSize: { xs: "20px", sm: "48px" }}}>
Our Team
</Typography>
@ -75,30 +67,13 @@ const OurTeam: React.FC = () => {
{showTeam ? <ExpandLessIcon /> : <ExpandMoreIcon />}
</IconButton>
</Box>
<Typography
variant="body2"
sx={{
color: "#4D4D4D",
fontSize: { xs: "12px", sm: "20px" },
fontFamily: "SF Pro Rounded Regular, Arial, sans-serif",
padding:"20px",
textAlign:'center'
}}
>
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 */}
<motion.div
initial={{ opacity: 0, height: 0 }}
animate={{ opacity: showTeam ? 1 : 0, height: showTeam ? "auto" : 0 }}
transition={{ duration: 0.5, ease: "easeInOut" }}
style={{ overflow: "hidden", width: "100%", height: "375px" }}
style={{ overflow: "hidden", width: "100%" }}
>
<Grid
container
@ -117,8 +92,7 @@ const OurTeam: React.FC = () => {
transition: "transform 0.3s",
"&:hover": { transform: "translateY(-5px)" },
backgroundColor: "white",
width: "283px",
height: "375px",
maxWidth: "200px",
margin: "0 auto",
position: "relative",
"&::before, &::after": {
@ -167,30 +141,25 @@ const OurTeam: React.FC = () => {
<Box className="bottom-left" />
<Box className="bottom-right" />
<CardContent sx={{ paddingBottom: 1 }}>
<Typography
variant="h6"
sx={{
fontSize: "20px",
fontWeight: "bold",
fontFamily: "Helvetica Neue",
}}
>
<Typography variant="h6" sx={{ fontSize: "1rem", fontWeight: "bold" }}>
{member.name}
</Typography>
</CardContent>
<CardMedia
component="img"
height="213"
height="140"
image={member.image}
alt={member.name}
sx={{
objectFit: "contain",
width: "200px",
width: "80%",
margin: "0 auto",
padding: "10px",
}}
/>
</Card>
</Grid>
))}
</Grid>

BIN
src/fonts/SF-Pro-Rounded-Regular.otf
View File

Binary file not shown.