|
@@ -0,0 +1,186 @@
|
|
|
+import Footer from "../components/Footer";
|
|
|
+import Breadcrumb from "../components/Breadcrumbs";
|
|
|
+import Header from "../components/Header";
|
|
|
+import {Box, Container, Grid, Typography, useMediaQuery} from "@mui/material";
|
|
|
+import FacebookIcon from "@mui/icons-material/Facebook";
|
|
|
+import InstagramIcon from "@mui/icons-material/Instagram";
|
|
|
+import TwitterIcon from "@mui/icons-material/Twitter";
|
|
|
+import YouTubeIcon from "@mui/icons-material/YouTube";
|
|
|
+import Social from "../components/SocialLink";
|
|
|
+import LocalPhoneIcon from '@mui/icons-material/LocalPhone';
|
|
|
+import EmailIcon from '@mui/icons-material/Email';
|
|
|
+import rom from "../img/our team/romb.png"
|
|
|
+import one from "../img/our team/1.jpg"
|
|
|
+import two from "../img/our team/2.jpg"
|
|
|
+import three from "../img/our team/3.jpg"
|
|
|
+import four from "../img/our team/4.jpg"
|
|
|
+
|
|
|
+let defaultTeam = [
|
|
|
+ {
|
|
|
+ img: one,
|
|
|
+ name: 'MARIA CULHANE',
|
|
|
+ spec: 'online seller',
|
|
|
+ desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusamus blanditiis distinctio eum mollitia nisi nostrum nulla omnis quia, veniam!',
|
|
|
+ links: [
|
|
|
+ {icon: FacebookIcon, url: 'https://www.facebook.com/'},
|
|
|
+ {icon: InstagramIcon, url: 'https://www.instagram.com/'},
|
|
|
+ {icon: TwitterIcon, url: 'https://twitter.com/home'},
|
|
|
+ {icon: YouTubeIcon, url: 'https://www.youtube.com/'},
|
|
|
+ ],
|
|
|
+ phone: '+123 456 77 88',
|
|
|
+ email: 'info@gmail.com'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: two,
|
|
|
+ name: 'EMERY HERWITZ',
|
|
|
+ spec: 'online seller',
|
|
|
+ desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusamus blanditiis distinctio eum mollitia nisi nostrum nulla omnis quia, veniam!',
|
|
|
+ links: [
|
|
|
+ {icon: FacebookIcon, url: 'https://www.facebook.com/'},
|
|
|
+ {icon: InstagramIcon, url: 'https://www.instagram.com/'},
|
|
|
+ {icon: TwitterIcon, url: 'https://twitter.com/home'},
|
|
|
+ {icon: YouTubeIcon, url: 'https://www.youtube.com/'},
|
|
|
+ ],
|
|
|
+ phone: '+123 456 77 88',
|
|
|
+ email: 'info@gmail.com'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: three,
|
|
|
+ name: 'ALLISON WORKMAN',
|
|
|
+ spec: 'online seller',
|
|
|
+ desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusamus blanditiis distinctio eum mollitia nisi nostrum nulla omnis quia, veniam!',
|
|
|
+ links: [
|
|
|
+ {icon: FacebookIcon, url: 'https://www.facebook.com/'},
|
|
|
+ {icon: InstagramIcon, url: 'https://www.instagram.com/'},
|
|
|
+ {icon: TwitterIcon, url: 'https://twitter.com/home'},
|
|
|
+ {icon: YouTubeIcon, url: 'https://www.youtube.com/'},
|
|
|
+ ],
|
|
|
+ phone: '+123 456 77 88',
|
|
|
+ email: 'info@gmail.com'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: four,
|
|
|
+ name: 'MADELYN BATOR',
|
|
|
+ spec: 'online seller',
|
|
|
+ desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusamus blanditiis distinctio eum mollitia nisi nostrum nulla omnis quia, veniam!',
|
|
|
+ links: [
|
|
|
+ {icon: FacebookIcon, url: 'https://www.facebook.com/'},
|
|
|
+ {icon: InstagramIcon, url: 'https://www.instagram.com/'},
|
|
|
+ {icon: TwitterIcon, url: 'https://twitter.com/home'},
|
|
|
+ {icon: YouTubeIcon, url: 'https://www.youtube.com/'},
|
|
|
+ ],
|
|
|
+ phone: '+123 456 77 88',
|
|
|
+ email: 'info@gmail.com'
|
|
|
+ }
|
|
|
+]
|
|
|
+
|
|
|
+const ItemTeam = ({item: {img, name, spec, desc, links, phone, email}, breakpoint}) => {
|
|
|
+ return (
|
|
|
+ <Grid sx={{
|
|
|
+ backgroundColor: '#fff',
|
|
|
+ marginBottom: '50px'
|
|
|
+ }}
|
|
|
+ item xs={12} sm={5.5}
|
|
|
+ >
|
|
|
+ <Box>
|
|
|
+ <img style={{maxWidth: '100%'}} src={img} alt='face'/>
|
|
|
+ </Box>
|
|
|
+ <Box
|
|
|
+ display='flex'
|
|
|
+ flexDirection='column'
|
|
|
+ justifyContent='center'
|
|
|
+ alignItems='center'
|
|
|
+ padding='50px'
|
|
|
+ >
|
|
|
+ <Typography
|
|
|
+ textAlign="center"
|
|
|
+ variant='h5'
|
|
|
+ fontFamily='sarif'
|
|
|
+ letterSpacing='7px'
|
|
|
+ marginBottom='10px'
|
|
|
+ >
|
|
|
+ {name}
|
|
|
+ </Typography>
|
|
|
+ <img style={{
|
|
|
+ width: '7px',
|
|
|
+ maxHeight: '7px',
|
|
|
+ }} src={rom} alt='item'/>
|
|
|
+ <Typography
|
|
|
+ textAlign="center"
|
|
|
+ variant='body1'
|
|
|
+ letterSpacing='5px'
|
|
|
+ marginBottom='10px'
|
|
|
+ marginTop='8px'
|
|
|
+ color="#616161"
|
|
|
+ >
|
|
|
+ {spec}
|
|
|
+ </Typography>
|
|
|
+ <Typography
|
|
|
+ textAlign="center"
|
|
|
+ variant='body2'
|
|
|
+ marginBottom='30px'
|
|
|
+ fontWeight='300'
|
|
|
+ color="#616161"
|
|
|
+ lineHeight='1.7em'
|
|
|
+ >
|
|
|
+ {desc}
|
|
|
+ </Typography>
|
|
|
+ <Box marginBottom='30px'>
|
|
|
+ {links.map(item => <Social Icon={item.icon} link={item.url}/>)}
|
|
|
+ </Box>
|
|
|
+ <Box
|
|
|
+ display='flex'
|
|
|
+ flexDirection={breakpoint? 'column': 'row'}
|
|
|
+ justifyContent='space-between'
|
|
|
+ alignItems='center'
|
|
|
+ width='100%'
|
|
|
+ >
|
|
|
+ <Typography
|
|
|
+ variant='body2'
|
|
|
+ fontWeight='400'
|
|
|
+ color="#616161"
|
|
|
+ display='flex'
|
|
|
+ flexDirection='row'
|
|
|
+ justifyContent='space-between'
|
|
|
+ alignItems='center'
|
|
|
+ marginBottom={breakpoint ? '15px': '0'}
|
|
|
+ >
|
|
|
+ <LocalPhoneIcon sx={{width: '15px', marginRight: '5px'}}/>
|
|
|
+ {phone}
|
|
|
+ </Typography>
|
|
|
+ <Typography
|
|
|
+ variant='body2'
|
|
|
+ fontWeight='400'
|
|
|
+ color="#616161"
|
|
|
+ display='flex'
|
|
|
+ flexDirection='row'
|
|
|
+ justifyContent='space-between'
|
|
|
+ alignItems='center'
|
|
|
+ >
|
|
|
+ <EmailIcon sx={{maxWidth: '15px', marginRight: '5px'}}/>
|
|
|
+ {email}
|
|
|
+ </Typography>
|
|
|
+ </Box>
|
|
|
+ </Box>
|
|
|
+ </Grid>
|
|
|
+ )
|
|
|
+}
|
|
|
+
|
|
|
+const OurTeamPage = ({specialist=defaultTeam}) => {
|
|
|
+ const matches = useMediaQuery('(max-width:768px)');
|
|
|
+ return (
|
|
|
+ <>
|
|
|
+ <Header/>
|
|
|
+ <Breadcrumb links={['our team']}/>
|
|
|
+ <main style={{backgroundColor: "#f3f3f3", padding: matches ? "20px 0" : "50px 0"}}>
|
|
|
+ <Container maxWidth="lg">
|
|
|
+ <Grid sx={{padding: '0px 0px'}} container justifyContent='space-between'>
|
|
|
+ {(specialist).map(item => <ItemTeam item={item} breakpoint={matches}/>)}
|
|
|
+ </Grid>
|
|
|
+ </Container>
|
|
|
+ </main>
|
|
|
+ <Footer/>
|
|
|
+ </>
|
|
|
+ )
|
|
|
+}
|
|
|
+export default OurTeamPage
|