new #21
|
|
@ -37,8 +37,8 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'SF Pro Medium';
|
font-family: 'SF Pro Regular';
|
||||||
src: url('../src/fonts/SF-Pro-Medium.otf') format('opentype');
|
src: url('../src/fonts/SF-Pro-Rounded-Regular.otf') format('opentype');
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -71,7 +71,7 @@ const HomePage: React.FC = () => {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
typography: {
|
typography: {
|
||||||
fontFamily: "SF Pro Rounded Medium, Arial, sans-serif",
|
fontFamily: "SF Pro Rounded Regular, Arial, sans-serif",
|
||||||
h4: {
|
h4: {
|
||||||
color: "#333333",
|
color: "#333333",
|
||||||
},
|
},
|
||||||
|
|
@ -116,8 +116,9 @@ const HomePage: React.FC = () => {
|
||||||
borderRadius: "12px",
|
borderRadius: "12px",
|
||||||
backgroundColor: "#7c77770d",
|
backgroundColor: "#7c77770d",
|
||||||
textAlign: "center",
|
textAlign: "center",
|
||||||
color:'#333333'
|
color:'#333333',
|
||||||
|
height:'107px',
|
||||||
|
fontSize:{xs:'12px' , sm:'16px'}
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Typography variant="body1">{text}</Typography>
|
<Typography variant="body1">{text}</Typography>
|
||||||
|
|
@ -128,7 +129,7 @@ const HomePage: React.FC = () => {
|
||||||
{/* Grid 2 */}
|
{/* Grid 2 */}
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
height: { xl: 1800, lg: 2000, xs: 2857, sm: 3630, md: 2550 },
|
height: { xl: 1800, lg: 2000, xs: 2857, sm: 3630, md: 2790 },
|
||||||
width: '100%',
|
width: '100%',
|
||||||
backgroundImage: { lg: `url(${newbackground})`, xs: null },
|
backgroundImage: { lg: `url(${newbackground})`, xs: null },
|
||||||
backgroundSize: "contain",
|
backgroundSize: "contain",
|
||||||
|
|
@ -163,12 +164,13 @@ const HomePage: React.FC = () => {
|
||||||
padding: "10px",
|
padding: "10px",
|
||||||
textAlign: 'center',
|
textAlign: 'center',
|
||||||
marginBottom: { xs: "20px", md: "0" },
|
marginBottom: { xs: "20px", md: "0" },
|
||||||
|
|
||||||
}}>
|
}}>
|
||||||
<Box sx={{ width: { xs: "60%", md: "70%" } }}>
|
<Box sx={{ width: { xs: "60%", md: "70%" } }}>
|
||||||
<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" sx={{fontSize:{xs:"18px" , sm:'36px'}}}>Mine from nature</Typography>
|
<Typography variant="h4" sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>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>
|
<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>
|
||||||
|
|
@ -191,7 +193,7 @@ 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" sx={{fontSize:{xs:"18px" , sm:'36px'}}}>Manufacturing</Typography>
|
<Typography variant="h4" sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>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>
|
<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%' } }}>
|
||||||
|
|
@ -223,7 +225,7 @@ 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" sx={{fontSize:{xs:"18px" , sm:'36px'}}}>Assemble</Typography>
|
<Typography variant="h4" sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>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>
|
<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>
|
||||||
|
|
||||||
|
|
@ -247,7 +249,7 @@ 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" sx={{fontSize:{xs:"18px" , sm:'36px'}}}>Use</Typography>
|
<Typography variant="h4" sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>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>
|
<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>
|
||||||
|
|
||||||
|
|
@ -279,7 +281,7 @@ 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"sx={{fontSize:{xs:"18px" , sm:'36px'}}}>Reuse</Typography>
|
<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="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>
|
||||||
|
|
@ -305,7 +307,7 @@ 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"sx={{fontSize:{xs:"18px" , sm:'36px'}}}>Repair</Typography>
|
<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="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
|
||||||
|
|
@ -339,7 +341,7 @@ 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"sx={{fontSize:{xs:"18px" , sm:'36px'}}}>Disintegrate</Typography>
|
<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="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>
|
||||||
|
|
||||||
|
|
@ -364,7 +366,7 @@ 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"sx={{fontSize:{xs:"18px" , sm:'36px'}}}>Remine</Typography>
|
<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="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>
|
</Box>
|
||||||
|
|
||||||
|
|
@ -384,13 +386,13 @@ const HomePage: React.FC = () => {
|
||||||
<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: 175, 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:{xs:"18px"}}}>Reuse</Typography>
|
<Typography variant="h4" sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Reuse</Typography>
|
||||||
<Typography variant="body2" sx={{fontSize:{xs:"12px"}}}>
|
<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>
|
||||||
<Box sx={{ display: "flex", justifyContent: "center" }}>
|
<Box sx={{ display: "flex", justifyContent: "center" }}>
|
||||||
<Box sx={{ width: { xs: "100%", md: "80%" } }}>
|
<Box sx={{ width: { xs: "100%", md: "60%" } }}>
|
||||||
<img
|
<img
|
||||||
src={gifsix}
|
src={gifsix}
|
||||||
alt="Reuse Gif"
|
alt="Reuse Gif"
|
||||||
|
|
@ -406,15 +408,15 @@ const HomePage: React.FC = () => {
|
||||||
<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: 175, 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:{xs:"18px"}}}>Repair</Typography>
|
<Typography variant="h4" sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Repair</Typography>
|
||||||
<Typography variant="body2" sx={{fontSize:{xs:"12px"}}}>
|
<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.
|
||||||
</Typography>
|
</Typography>
|
||||||
</Box>
|
</Box>
|
||||||
<Box sx={{ display: "flex", justifyContent: "center" }}>
|
<Box sx={{ display: "flex", justifyContent: "center" }}>
|
||||||
<Box sx={{ width: { xs: "100%", md: "80%" } }}>
|
<Box sx={{ width: { xs: "100%", md: "60%" } }}>
|
||||||
<img
|
<img
|
||||||
src={giffive}
|
src={giffive}
|
||||||
alt="Reuse Gif"
|
alt="Reuse Gif"
|
||||||
|
|
@ -429,7 +431,7 @@ const HomePage: React.FC = () => {
|
||||||
<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 }}>
|
||||||
<Box sx={{ display: "flex", justifyContent: "center" }}>
|
<Box sx={{ display: "flex", justifyContent: "center" }}>
|
||||||
<Box sx={{ width: { xs: "100%", md: "80%" } }}>
|
<Box sx={{ width: { xs: "100%", md: "60%" } }}>
|
||||||
<img
|
<img
|
||||||
src={gifseven}
|
src={gifseven}
|
||||||
alt="Reuse Gif"
|
alt="Reuse Gif"
|
||||||
|
|
@ -438,8 +440,8 @@ const HomePage: React.FC = () => {
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
<Box sx={{ background: "#95CD41", p: 1, height: { xs: 175, 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:{xs:"18px"}}}>Disintegrate</Typography>
|
<Typography variant="h4" sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>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>
|
<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>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
@ -449,7 +451,7 @@ const HomePage: React.FC = () => {
|
||||||
<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, maxHeight: 270 }}>
|
<Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2, maxHeight: 270 }}>
|
||||||
<Box sx={{ display: "flex", justifyContent: "center" }}>
|
<Box sx={{ display: "flex", justifyContent: "center" }}>
|
||||||
<Box sx={{ width: { xs: "100%", md: "80%" } }}>
|
<Box sx={{ width: { xs: "100%", md: "60%" } }}>
|
||||||
<img
|
<img
|
||||||
src={gifeight}
|
src={gifeight}
|
||||||
alt="Reuse Gif"
|
alt="Reuse Gif"
|
||||||
|
|
@ -458,8 +460,8 @@ const HomePage: React.FC = () => {
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
<Box sx={{ background: "#95CD41", p: 1, textAlign: { xs: "left", md: 'center' }, height: { xs: 175, 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: '18px' }}>Remine</Typography>
|
<Typography variant="h4" sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>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>
|
<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>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
</Grid>
|
</Grid>
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,6 @@ import {
|
||||||
Card,
|
Card,
|
||||||
CardContent,
|
CardContent,
|
||||||
CardMedia,
|
CardMedia,
|
||||||
Divider,
|
|
||||||
IconButton,
|
IconButton,
|
||||||
Box,
|
Box,
|
||||||
} from "@mui/material";
|
} from "@mui/material";
|
||||||
|
|
@ -20,6 +19,7 @@ import RamaKrishnan from "../components/imageandgif/RamaKrishnan.png";
|
||||||
import KartikReddy from "../components/imageandgif/KartikReddy.png";
|
import KartikReddy from "../components/imageandgif/KartikReddy.png";
|
||||||
import Suresh from "../components/imageandgif/Suresh.png";
|
import Suresh from "../components/imageandgif/Suresh.png";
|
||||||
import Palani from "../components/imageandgif/Palani.png";
|
import Palani from "../components/imageandgif/Palani.png";
|
||||||
|
|
||||||
interface TeamMember {
|
interface TeamMember {
|
||||||
name: string;
|
name: string;
|
||||||
role: string;
|
role: string;
|
||||||
|
|
@ -59,7 +59,15 @@ 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' ,fontSize: { xs: "20px", sm: "48px" }}}>
|
<Typography
|
||||||
|
variant="h4"
|
||||||
|
sx={{
|
||||||
|
fontWeight: "bold",
|
||||||
|
fontSize: { xs: "20px", sm: "48px" },
|
||||||
|
fontFamily: "SF Pro Rounded Regular, Arial, sans-serif",
|
||||||
|
color: "#333333",
|
||||||
|
}}
|
||||||
|
>
|
||||||
Our Team
|
Our Team
|
||||||
</Typography>
|
</Typography>
|
||||||
|
|
||||||
|
|
@ -67,18 +75,35 @@ const OurTeam: React.FC = () => {
|
||||||
{showTeam ? <ExpandLessIcon /> : <ExpandMoreIcon />}
|
{showTeam ? <ExpandLessIcon /> : <ExpandMoreIcon />}
|
||||||
</IconButton>
|
</IconButton>
|
||||||
</Box>
|
</Box>
|
||||||
<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>
|
|
||||||
|
<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>
|
||||||
|
|
||||||
{/* Expanding Team Section */}
|
{/* Expanding Team Section */}
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0, height: 0 }}
|
initial={{ opacity: 0, height: 0 }}
|
||||||
animate={{ opacity: showTeam ? 1 : 0, height: showTeam ? "auto" : 0 }}
|
animate={{ opacity: showTeam ? 1 : 0, height: showTeam ? "auto" : 0 }}
|
||||||
transition={{ duration: 0.5, ease: "easeInOut" }}
|
transition={{ duration: 0.5, ease: "easeInOut" }}
|
||||||
style={{ overflow: "hidden", width: "100%" }}
|
style={{ overflow: "hidden", width: "100%", height: "375px" }}
|
||||||
>
|
>
|
||||||
<Grid
|
<Grid
|
||||||
container
|
container
|
||||||
columnSpacing={1}
|
columnSpacing={1}
|
||||||
rowSpacing={3}
|
rowSpacing={3}
|
||||||
justifyContent="center"
|
justifyContent="center"
|
||||||
sx={{ marginTop: "20px" }}
|
sx={{ marginTop: "20px" }}
|
||||||
>
|
>
|
||||||
|
|
@ -92,7 +117,8 @@ const OurTeam: React.FC = () => {
|
||||||
transition: "transform 0.3s",
|
transition: "transform 0.3s",
|
||||||
"&:hover": { transform: "translateY(-5px)" },
|
"&:hover": { transform: "translateY(-5px)" },
|
||||||
backgroundColor: "white",
|
backgroundColor: "white",
|
||||||
maxWidth: "200px",
|
width: "283px",
|
||||||
|
height: "375px",
|
||||||
margin: "0 auto",
|
margin: "0 auto",
|
||||||
position: "relative",
|
position: "relative",
|
||||||
"&::before, &::after": {
|
"&::before, &::after": {
|
||||||
|
|
@ -141,25 +167,30 @@ const OurTeam: React.FC = () => {
|
||||||
<Box className="bottom-left" />
|
<Box className="bottom-left" />
|
||||||
<Box className="bottom-right" />
|
<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: "20px",
|
||||||
|
fontWeight: "bold",
|
||||||
|
fontFamily: "Helvetica Neue",
|
||||||
|
}}
|
||||||
|
>
|
||||||
{member.name}
|
{member.name}
|
||||||
</Typography>
|
</Typography>
|
||||||
|
|
||||||
</CardContent>
|
</CardContent>
|
||||||
<CardMedia
|
<CardMedia
|
||||||
component="img"
|
component="img"
|
||||||
height="140"
|
height="213"
|
||||||
image={member.image}
|
image={member.image}
|
||||||
alt={member.name}
|
alt={member.name}
|
||||||
sx={{
|
sx={{
|
||||||
objectFit: "contain",
|
objectFit: "contain",
|
||||||
width: "80%",
|
width: "200px",
|
||||||
margin: "0 auto",
|
margin: "0 auto",
|
||||||
padding: "10px",
|
padding: "10px",
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
</Grid>
|
</Grid>
|
||||||
))}
|
))}
|
||||||
</Grid>
|
</Grid>
|
||||||
|
|
|
||||||
Binary file not shown.
Loading…
Reference in New Issue