98 lines
4.1 KiB
TypeScript
98 lines
4.1 KiB
TypeScript
import React from "react";
|
|
import { Box, Container, Grid, Typography, Link, IconButton, Divider } from "@mui/material";
|
|
import { LocationOn, Email } from "@mui/icons-material";
|
|
import InstagramIcon from "@mui/icons-material/Instagram";
|
|
import TwitterIcon from "@mui/icons-material/Twitter";
|
|
import FacebookIcon from "@mui/icons-material/Facebook";
|
|
import YouTubeIcon from "@mui/icons-material/YouTube";
|
|
|
|
const Footer: React.FC = () => {
|
|
return (
|
|
<Box component="footer" sx={{ bgcolor: "#f7f7f7", py: 6 }}>
|
|
<Container maxWidth="lg">
|
|
<Grid container spacing={4}>
|
|
{/* Loop Sustainability */}
|
|
<Grid item xs={12} md={4}>
|
|
<Typography variant="h6" fontWeight="bold">
|
|
Loop Sustainability
|
|
</Typography>
|
|
<Typography variant="body2" sx={{ mt: 1, color: "gray" }}>
|
|
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>
|
|
</Grid>
|
|
|
|
{/* Get in Touch */}
|
|
<Grid item xs={12} md={4}>
|
|
<Typography variant="h6" fontWeight="bold">
|
|
Get in Touch
|
|
</Typography>
|
|
<Box display="flex" alignItems="flex-start" sx={{ mt: 1 }}>
|
|
<LocationOn color="primary" sx={{ mt: 0.5 }} />
|
|
<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 display="flex" alignItems="center" sx={{ mt: 1 }}>
|
|
<Email color="primary" />
|
|
<Typography variant="body2" sx={{ ml: 1 }}>reach@letsloop.in</Typography>
|
|
</Box>
|
|
</Grid>
|
|
|
|
{/* Company Links */}
|
|
<Grid item xs={12} md={4} textAlign="right">
|
|
<Typography variant="h6" fontWeight="bold">
|
|
Company
|
|
</Typography>
|
|
<Box sx={{ mt: 1 }}>
|
|
{["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" } }}>
|
|
{text}
|
|
</Link>
|
|
))}
|
|
</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>
|
|
|
|
{/* Footer Links */}
|
|
<Divider sx={{ my: 4 }} />
|
|
<Box textAlign="center">
|
|
<Box display="flex" justifyContent="center" gap={3}>
|
|
{["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" } }}>
|
|
{text}
|
|
</Link>
|
|
))}
|
|
</Box>
|
|
<Typography variant="body2" sx={{ mt: 2, color: "gray" }}>
|
|
© 2021 All Rights Reserved
|
|
</Typography>
|
|
</Box>
|
|
</Container>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default Footer;
|