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

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

Reviewed-on: #6
This commit is contained in:
Mihir Motiyani 2025-02-14 10:53:28 +05:30
parent 6383716b8f 7b149652dd
commit a7c6f0c7b8
10 changed files with 118 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/footer.tsx
View File

@ -1,6 +1,6 @@
import React from "react"; import React from "react";
import { Box, Container, Grid, Typography, Link, IconButton, Divider } from "@mui/material"; import { Box, Container, Grid, Typography, Link, IconButton, Divider } from "@mui/material";
import { LocationOn, Email, Phone } from "@mui/icons-material"; import { LocationOn, Email } from "@mui/icons-material";
import InstagramIcon from "@mui/icons-material/Instagram"; import InstagramIcon from "@mui/icons-material/Instagram";
import TwitterIcon from "@mui/icons-material/Twitter"; import TwitterIcon from "@mui/icons-material/Twitter";
import FacebookIcon from "@mui/icons-material/Facebook"; import FacebookIcon from "@mui/icons-material/Facebook";
@ -17,7 +17,7 @@ const Footer: React.FC = () => {
Loop Sustainability Loop Sustainability
</Typography> </Typography>
<Typography variant="body2" sx={{ mt: 1, color: "gray" }}> <Typography variant="body2" sx={{ mt: 1, color: "gray" }}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. Loop Sustainability helps businesses responsibly recycle used electronic items through advanced refining and disintegration processes. We ensure compliance, sustainability, and a circular economy approach to e-waste management.
</Typography> </Typography>
</Grid> </Grid>
@ -26,22 +26,26 @@ const Footer: React.FC = () => {
<Typography variant="h6" fontWeight="bold"> <Typography variant="h6" fontWeight="bold">
Get in Touch Get in Touch
</Typography> </Typography>
<Box display="flex" alignItems="center" sx={{ mt: 1 }}> <Box display="flex" alignItems="flex-start" sx={{ mt: 1 }}>
<LocationOn color="primary" /> <LocationOn color="primary" sx={{ mt: 0.5 }} />
<Typography variant="body2" sx={{ ml: 1 }}>8819 Ohio St. South Gate, CA 90280</Typography> <Typography variant="body2" sx={{ ml: 1 }}>
Hyderabad Office: 3rd Floor, Plot No: 1303 and 1304, Ayyappa Society, Khanamet, Madhapur, Hyderabad 500081, Telangana, India.
</Typography>
</Box>
<Box display="flex" alignItems="flex-start" sx={{ mt: 1 }}>
<LocationOn color="primary" sx={{ mt: 0.5 }} />
<Typography variant="body2" sx={{ ml: 1 }}>
Chennai Office: Plot No 1, Kundrathur Main Road, Sri Guruvayurappan Nagar, Manancherry, Chengalpattu, Chennai 600069, Tamil Nadu, India.
</Typography>
</Box> </Box>
<Box display="flex" alignItems="center" sx={{ mt: 1 }}> <Box display="flex" alignItems="center" sx={{ mt: 1 }}>
<Email color="primary" /> <Email color="primary" />
<Typography variant="body2" sx={{ ml: 1 }}>Ourstudio@hello.com</Typography> <Typography variant="body2" sx={{ ml: 1 }}>reach@letsloop.in</Typography>
</Box>
<Box display="flex" alignItems="center" sx={{ mt: 1 }}>
<Phone color="primary" />
<Typography variant="body2" sx={{ ml: 1 }}>+1 386-688-3295</Typography>
</Box> </Box>
</Grid> </Grid>
{/* Company Links */} {/* Company Links */}
<Grid item xs={12} md={4}> <Grid item xs={12} md={4} textAlign="right">
<Typography variant="h6" fontWeight="bold"> <Typography variant="h6" fontWeight="bold">
Company Company
</Typography> </Typography>
@ -52,25 +56,25 @@ const Footer: React.FC = () => {
</Link> </Link>
))} ))}
</Box> </Box>
{/* Social Media Icons */}
<Box display="flex" justifyContent="flex-end" sx={{ mt: 2 }}>
<IconButton color="default">
<InstagramIcon />
</IconButton>
<IconButton color="default">
<TwitterIcon />
</IconButton>
<IconButton color="default">
<FacebookIcon />
</IconButton>
<IconButton color="default">
<YouTubeIcon />
</IconButton>
</Box>
</Grid> </Grid>
</Grid> </Grid>
{/* Social Media Icons */}
<Box display="flex" justifyContent="flex-end" sx={{ mt: 4 }}>
<IconButton color="default">
<InstagramIcon />
</IconButton>
<IconButton color="default">
<TwitterIcon />
</IconButton>
<IconButton color="default">
<FacebookIcon />
</IconButton>
<IconButton color="default">
<YouTubeIcon />
</IconButton>
</Box>
{/* Footer Links */} {/* Footer Links */}
<Divider sx={{ my: 4 }} /> <Divider sx={{ my: 4 }} />
<Box textAlign="center"> <Box textAlign="center">

2
src/components/header.tsx
View File

@ -22,7 +22,7 @@ const Header: React.FC = () => {
width: { width: {
xs: "91.6vw", xs: "91.6vw",
sm: "95.5vw", sm: "95.5vw",
md: "91.6vw", md: "96.5vw",
lg: "96.8vw", lg: "96.8vw",
xl: "96.4vw" xl: "96.4vw"
}, },

32
src/components/homepage.tsx
View File

@ -113,11 +113,11 @@ const HomePage: React.FC = () => {
{/* Grid 2 */} {/* Grid 2 */}
<Box <Box
sx={{ sx={{
height: { xl: 1800, lg: 2000, xs: 2770, sm: 3580 }, height: { xl: 1800, lg: 2000, xs: 2770, sm: 3580 ,md:2695 },
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% 86%" }, backgroundPosition: { lg: "center", xs: "50% 86%" , md: "50% 80%" },
backgroundRepeat: "no-repeat", backgroundRepeat: "no-repeat",
paddingBottom: { lg: 20, xs: 0 } paddingBottom: { lg: 20, xs: 0 }
}} }}
@ -131,7 +131,7 @@ const HomePage: React.FC = () => {
}} }}
> >
{/* ROW 1 */} {/* ROW 1 */}
<Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '328px' }, display: "flex", justifyContent: "center", alignItems: "center" }}> <Grid item xs={12} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '328px' }, display: "flex", justifyContent: "center", alignItems: "center" }}>
<Box ref={mineRef} sx={{ <Box ref={mineRef} sx={{
height: { xs: "70%", lg: "215px" }, height: { xs: "70%", lg: "215px" },
width: { xs: "80%", lg: "870px" }, width: { xs: "80%", lg: "870px" },
@ -153,11 +153,11 @@ const HomePage: React.FC = () => {
</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} md={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', md:'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' , md:'none' } }}></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} md={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" },
@ -182,7 +182,7 @@ const HomePage: React.FC = () => {
</Grid> </Grid>
{/* ROW 3 */} {/* ROW 3 */}
<Grid item xs={12} lg={6} sx={{ <Grid item xs={12} lg={6} md={6} sx={{
background: '#ffffff00', height: { xl: "500px", lg: '401px' }, background: '#ffffff00', height: { xl: "500px", lg: '401px' },
display: "flex", justifyContent: { lg: 'flex-end', xs: 'center' }, alignItems: "center" display: "flex", justifyContent: { lg: 'flex-end', xs: 'center' }, alignItems: "center"
}}> }}>
@ -209,11 +209,11 @@ const HomePage: React.FC = () => {
</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',md:'none' } }}></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', md:'none' } }}></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} md={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: "451px", lg: "215px", sm: '555px' }, height: { xs: "451px", lg: "215px", sm: '555px' },
width: { xs: "80%", lg: "550px" }, width: { xs: "80%", lg: "550px" },
@ -352,10 +352,10 @@ const HomePage: React.FC = () => {
</Box> </Box>
</Grid> </Grid>
{/* mobile only */} {/* mobile only */}
<Grid container spacing={2} rowSpacing={12} sx={{ display: { xs: "flex", md: "none" } }}> <Grid container spacing={2} rowSpacing={{ xs: 12, sm: 14, md: 34 }} sx={{ display: { xs: "flex", md: "flex" , lg:'none' } }}>
{/* Reuse */} {/* Reuse */}
<Grid item xs={6}> <Grid item xs={6}>
<Box sx={{ p: 2, textAlign: "left", borderRadius: 2 }}> <Box sx={{ p: 2, textAlign:{xs: "left" , md:'center'}, borderRadius: 2 }}>
<Box sx={{ background: "#95CD41", p: 1 }}> <Box sx={{ background: "#95CD41", p: 1 }}>
<Typography variant="h4">Reuse</Typography> <Typography variant="h4">Reuse</Typography>
<Typography variant="body2"> <Typography variant="body2">
@ -370,7 +370,7 @@ const HomePage: React.FC = () => {
{/* Repair */} {/* Repair */}
<Grid item xs={6}> <Grid item xs={6}>
<Box sx={{ p: 2, textAlign: "left", borderRadius: 2 }}> <Box sx={{ p: 2, textAlign:{xs: "left" , md:'center'}, borderRadius: 2 }}>
<Box sx={{ background: "#95CD41", p: 1 }}> <Box sx={{ background: "#95CD41", p: 1 }}>
<Typography variant="h4">Repair</Typography> <Typography variant="h4">Repair</Typography>
<Typography variant="body2"> <Typography variant="body2">
@ -387,7 +387,7 @@ 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: "left", 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>
@ -401,11 +401,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: "center", borderRadius: 2 }}> <Box sx={{ p: 2,textAlign:{xs: "left" , md:'center'}, borderRadius: 2 }}>
<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:'left' }}> <Box sx={{ background: "#95CD41", p: 1, textAlign:{xs: "left" , md:'center'}, }}>
<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>

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 91 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 89 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 111 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 92 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 93 KiB

87
src/components/ourteam.tsx
View File

@ -14,7 +14,12 @@ import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import ExpandLessIcon from "@mui/icons-material/ExpandLess"; import ExpandLessIcon from "@mui/icons-material/ExpandLess";
import robert from "../components/imageandgif/robert.png"; import robert from "../components/imageandgif/robert.png";
import RamanaReddy from "../components/imageandgif/RamanaReddy.png";
import MukeshLamba from "../components/imageandgif/MukeshLamba.png";
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 { interface TeamMember {
name: string; name: string;
role: string; role: string;
@ -22,12 +27,12 @@ interface TeamMember {
} }
const teamMembers: TeamMember[] = [ const teamMembers: TeamMember[] = [
{ name: "John Doe", role: "Software Engineer", image: robert }, { name: "Ramana Reddy", role: "Software Engineer", image: RamanaReddy },
{ name: "Jane Smith", role: "UI/UX Designer", image: robert }, { name: "Mukesh Lamba", role: "UI/UX Designer", image: MukeshLamba },
{ name: "Alice Johnson", role: "Project Manager", image: robert }, { name: "Rama Krishnan", role: "Project Manager", image: RamaKrishnan },
{ name: "Robert Brown", role: "Marketing Lead", image: robert }, { name: "Kartik Reddy", role: "Marketing Lead", image: KartikReddy },
{ name: "Emma Wilson", role: "Backend Developer", image: robert }, { name: "Suresh", role: "Backend Developer", image: Suresh },
{ name: "Michael Davis", role: "Data Analyst", image: robert }, { name: "Palani", role: "Data Analyst", image: Palani },
]; ];
const OurTeam: React.FC = () => { const OurTeam: React.FC = () => {
@ -51,17 +56,18 @@ const OurTeam: React.FC = () => {
display="flex" display="flex"
alignItems="center" alignItems="center"
gap={1} gap={1}
sx={{ cursor: "pointer" }} sx={{ cursor: "pointer", marginBottom: 10 }}
onClick={() => setShowTeam(!showTeam)} onClick={() => setShowTeam(!showTeam)}
> >
<Typography variant="h5" sx={{ fontWeight: "bold" }}> <Typography variant="h4" sx={{ fontWeight: "bold" }}>
Our Team Our Team
</Typography> </Typography>
<IconButton sx={{ color: "black" }}> <IconButton sx={{ color: "black" }}>
{showTeam ? <ExpandLessIcon /> : <ExpandMoreIcon />} {showTeam ? <ExpandLessIcon /> : <ExpandMoreIcon />}
</IconButton> </IconButton>
</Box> </Box>
<Typography variant="body2">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 }}
@ -69,21 +75,71 @@ const OurTeam: React.FC = () => {
transition={{ duration: 0.5, ease: "easeInOut" }} transition={{ duration: 0.5, ease: "easeInOut" }}
style={{ overflow: "hidden", width: "100%" }} style={{ overflow: "hidden", width: "100%" }}
> >
<Grid container spacing={2} justifyContent="center" sx={{ marginTop: "20px" }}> <Grid
container
columnSpacing={1}
rowSpacing={3}
justifyContent="center"
sx={{ marginTop: "20px" }}
>
{teamMembers.map((member, index) => ( {teamMembers.map((member, index) => (
<Grid item xs={12} sm={6} md={4} key={index}> <Grid item xs={12} sm={6} md={4} key={index}>
<Card <Card
sx={{ sx={{
boxShadow: "0 4px 10px rgba(0,0,0,0.15)", boxShadow: "0 4px 10px rgba(0,0,0,0.15)",
borderRadius: "12px", borderRadius: "8px",
textAlign: "center", textAlign: "center",
transition: "transform 0.3s", transition: "transform 0.3s",
"&:hover": { transform: "translateY(-5px)" }, "&:hover": { transform: "translateY(-5px)" },
backgroundColor: "white", backgroundColor: "white",
maxWidth: "230px", maxWidth: "200px",
margin: "0 auto", margin: "0 auto",
position: "relative",
"&::before, &::after": {
content: '""',
position: "absolute",
width: "10px",
height: "10px",
border: "2px solid black",
},
"&::before": {
top: 0,
left: 0,
borderRight: "none",
borderBottom: "none",
},
"&::after": {
top: 0,
right: 0,
borderLeft: "none",
borderBottom: "none",
},
"& .bottom-left": {
content: '""',
position: "absolute",
bottom: 0,
left: 0,
width: "10px",
height: "10px",
border: "2px solid black",
borderTop: "none",
borderRight: "none",
},
"& .bottom-right": {
content: '""',
position: "absolute",
bottom: 0,
right: 0,
width: "10px",
height: "10px",
border: "2px solid black",
borderTop: "none",
borderLeft: "none",
},
}} }}
> >
<Box className="bottom-left" />
<Box className="bottom-right" />
<CardContent sx={{ paddingBottom: 1 }}> <CardContent sx={{ paddingBottom: 1 }}>
<Typography variant="h6" sx={{ fontSize: "1rem", fontWeight: "bold" }}> <Typography variant="h6" sx={{ fontSize: "1rem", fontWeight: "bold" }}>
{member.name} {member.name}
@ -92,10 +148,6 @@ const OurTeam: React.FC = () => {
{member.role} {member.role}
</Typography> </Typography>
</CardContent> </CardContent>
{/* Divider */}
<Divider sx={{ width: "80%", margin: "0 auto 10px auto" }} />
<CardMedia <CardMedia
component="img" component="img"
height="140" height="140"
@ -109,6 +161,7 @@ const OurTeam: React.FC = () => {
}} }}
/> />
</Card> </Card>
</Grid> </Grid>
))} ))}
</Grid> </Grid>