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

updated fonts and backgrounds #12

Merged
mihir merged 1 commits from fix/layout into main 2025-02-15 13:36:20 +05:30
Conversation 0 Commits 1 Files Changed 6 +51 -29
6 changed files with 51 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 0c1d7ad35f - Show all commits

BIN
public/SF-Pro-Rounded-Medium (1).otf Normal file
View File

Binary file not shown.

49
src/components/footer.tsx
View File

@ -13,53 +13,66 @@ const Footer: React.FC = () => {
<Grid container spacing={4}> <Grid container spacing={4}>
{/* Loop Sustainability */} {/* Loop Sustainability */}
<Grid item xs={12} md={3}> <Grid item xs={12} md={3}>
<Typography variant="h6" fontWeight="bold"> <Typography variant="h6" fontWeight="bold" sx={{ color: "#333333", fontFamily: "Helvetica, Arial, sans-serif" }}>
Loop Sustainability Loop Sustainability
</Typography> </Typography>
<Typography variant="body2" sx={{ mt: 1, color: "gray" }}> <Typography variant="body2" sx={{ mt: 1, color: "#77808B", fontFamily: "Helvetica, Arial, sans-serif" }}>
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. 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>
{/* Get in Touch */} {/* Get in Touch */}
<Grid item xs={7} md={3}> <Grid item xs={7} md={3}>
<Typography variant="h6" fontWeight="bold"> <Typography variant="h6" fontWeight="bold" sx={{ color: "#333333", fontFamily: "Helvetica, Arial, sans-serif" }}>
Get in Touch Get in Touch
</Typography> </Typography>
<Box display="flex" alignItems="flex-start" sx={{ mt: 1 }}> <Box display="flex" alignItems="flex-start" sx={{ mt: 1, color: "#77808B" }}>
<LocationOn color="primary" sx={{ mt: 0.5 }} /> <LocationOn color="primary" sx={{ mt: 0.5 }} />
<Typography variant="body2" sx={{ ml: 1 }}> <Typography variant="body2" sx={{ ml: 1, color: "#77808B", fontFamily: "Helvetica, Arial, sans-serif" }}>
Hyderabad Office: 3rd Floor, Plot No: 1303 and 1304, Ayyappa Society, Khanamet, Madhapur, Hyderabad 500081, Telangana, India. Hyderabad Office: 3rd Floor, Plot No: 1303 and 1304, Ayyappa Society, Khanamet, Madhapur, Hyderabad 500081, Telangana, India.
</Typography> </Typography>
</Box> </Box>
<Box display="flex" alignItems="flex-start" sx={{ mt: 1 }}> <Box display="flex" alignItems="flex-start" sx={{ mt: 1 }}>
<LocationOn color="primary" sx={{ mt: 0.5 }} /> <LocationOn color="primary" sx={{ mt: 0.5 }} />
<Typography variant="body2" sx={{ ml: 1 }}> <Typography variant="body2" sx={{ ml: 1, color: "#77808B", fontFamily: "Helvetica, Arial, sans-serif" }}>
Chennai Office: Plot No 1, Kundrathur Main Road, Sri Guruvayurappan Nagar, Manancherry, Chengalpattu, Chennai 600069, Tamil Nadu, India. Chennai Office: Plot No 1, Kundrathur Main Road, Sri Guruvayurappan Nagar, Manancherry, Chengalpattu, Chennai 600069, Tamil Nadu, India.
</Typography> </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 }}>reach@letsloop.in</Typography> <Typography variant="body2" sx={{ ml: 1, color: "#77808B", fontFamily: "Helvetica, Arial, sans-serif" }}>
reach@letsloop.in
</Typography>
</Box> </Box>
</Grid> </Grid>
{/* Company Links */} {/* Company Links */}
<Grid item xs={5} md={3} textAlign="center"> <Grid item xs={5} md={3} textAlign="center">
<Typography variant="h6" fontWeight="bold"> <Typography variant="h6" fontWeight="bold" sx={{ color: "#333333", fontFamily: "Helvetica, Arial, sans-serif" }}>
Company Company
</Typography> </Typography>
<Box sx={{ mt: 1 }}> <Box sx={{ mt: 1 }}>
{["Service", "Features", "Our Team", "Portfolio", "Blog", "Contact Us"].map((text) => ( {["Service", "Features", "Our Team", "Portfolio", "Blog", "Contact Us"].map((text) => (
<Link href="#" key={text} variant="body2" display="block" sx={{ color: "gray", mt: 0.5, textDecoration: "none", "&:hover": { textDecoration: "underline" } }}> <Link
href="#"
key={text}
variant="body2"
display="block"
sx={{
color: "#77808B",
mt: 0.5,
textDecoration: "none",
fontFamily: "Helvetica, Arial, sans-serif",
"&:hover": { textDecoration: "underline" },
}}
>
{text} {text}
</Link> </Link>
))} ))}
</Box> </Box>
</Grid>
{/* Social Media Icons */} {/* Social Media Icons */}
</Grid>
<Grid item xs={12} md={3} textAlign="center"> <Grid item xs={12} md={3} textAlign="center">
<Box display="flex" justifyContent="center" sx={{ mt: 2 }}> <Box display="flex" justifyContent="center" sx={{ mt: 2 }}>
<IconButton color="default"> <IconButton color="default">
@ -83,12 +96,22 @@ const Footer: React.FC = () => {
<Box textAlign="center"> <Box textAlign="center">
<Box display="flex" justifyContent="center" gap={3}> <Box display="flex" justifyContent="center" gap={3}>
{["Privacy Policy", "Terms of Use", "Sales and Refunds", "Legal", "Site Map"].map((text) => ( {["Privacy Policy", "Terms of Use", "Sales and Refunds", "Legal", "Site Map"].map((text) => (
<Link href="#" key={text} variant="body2" sx={{ color: "gray", textDecoration: "none", "&:hover": { textDecoration: "underline" } }}> <Link
href="#"
key={text}
variant="body2"
sx={{
color: "gray",
textDecoration: "none",
fontFamily: "Helvetica, Arial, sans-serif",
"&:hover": { textDecoration: "underline" },
}}
>
{text} {text}
</Link> </Link>
))} ))}
</Box> </Box>
<Typography variant="body2" sx={{ mt: 2, color: "gray" }}> <Typography variant="body2" sx={{ mt: 2, color: "gray", fontFamily: "Helvetica, Arial, sans-serif" }}>
© 2021 All Rights Reserved © 2021 All Rights Reserved
</Typography> </Typography>
</Box> </Box>

21
src/components/homepage.tsx
View File

@ -15,14 +15,14 @@ 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/newloop.png" import loopgreenback from "../components/imageandgif/lsbg.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"
import { useMediaQuery, useTheme } from "@mui/material"; import { useMediaQuery, useTheme } from "@mui/material";
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 sustainability from "../components/imageandgif/Untitled-2.png"
import wasteimage from "../components/imageandgif/loopwastemanage.png" import wasteimage from "../components/imageandgif/loopwastemanage.png"
import WhyChooseUs from "./whyus"; import WhyChooseUs from "./whyus";
import WasteImageSection from "./wastemanagement"; import WasteImageSection from "./wastemanagement";
@ -79,7 +79,7 @@ const HomePage: React.FC = () => {
xs={12} xs={12}
sx={{ sx={{
marginTop: "0px", marginTop: "0px",
height: { xs: "190px", lg: "58vh" }, height: { xs: "190px", lg: "55vh" },
width: { lg: "100vw" }, width: { lg: "100vw" },
backgroundColor: "white", backgroundColor: "white",
position: "relative", position: "relative",
@ -96,11 +96,10 @@ const HomePage: React.FC = () => {
</Grid> </Grid>
</Grid> </Grid>
<Grid container spacing={4} justifyContent="center" sx={{ padding: 4 }}> <Grid container spacing={4} justifyContent="center" sx={{ padding: 4 }}>
<Grid item xs={12} md={12} lg={12} textAlign={"center"}>
<Typography variant="h4">Sustainability</Typography>
</Grid>
{items.map((text, index) => ( {items.map((text, index) => (
<Grid item xs={12} sm={6} md={4} key={index} > <Grid item xs={12} sm={6} md={4} key={index} >
@ -371,7 +370,7 @@ const HomePage: React.FC = () => {
{/* 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 }}> <Box sx={{ background: "#95CD41", p: 1 ,height:{xs:256 , sm:200}, maxHeight:270 }}>
<Typography variant="h4">Reuse</Typography> <Typography variant="h4">Reuse</Typography>
<Typography variant="body2"> <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. We help businesses reuse their old electronic devices, repurposing functional parts and components for future use or resale, reducing overall environmental impact.
@ -386,7 +385,7 @@ 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 }}> <Box sx={{ background: "#95CD41", p: 1 ,height:{xs:256 , sm:200} , maxHeight:270 }}>
<Typography variant="h4">Repair</Typography> <Typography variant="h4">Repair</Typography>
<Typography variant="body2"> <Typography variant="body2">
Loop Sustainability steps in to repair damaged or outdated electronics. Loop Sustainability steps in to repair damaged or outdated electronics.
@ -406,7 +405,7 @@ const HomePage: React.FC = () => {
<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>
<Box sx={{ background: "#95CD41", p: 1 }}> <Box sx={{ background: "#95CD41", p: 1 ,height:{xs:256 , sm:200} , maxHeight:270 }}>
<Typography variant="h4" sx={{ fontSize: "1.3rem" }}>Disintegrate</Typography> <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> <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>
@ -416,11 +415,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: { xs: "left", md: 'center' }, borderRadius: 2 }}> <Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 , maxHeight:270 }}>
<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: { xs: "left", md: 'center' }, }}> <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="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/Untitled-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 183 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 187 KiB

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" }}> <Typography variant="h4" sx={{ fontWeight: "bold" , color:'#333333'}}>
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">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'}}>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 }}