create our team page

src/App.js

@@ -7,6 +7,7 @@ import ContactPage from "./pages/ContactPage";
 import Switch from "react-router-dom/es/Switch";
 import PrivacyPolicy from "./pages/PrivacyPolicyPage";
 import FAQPage from "./pages/FAQPage";
+import OurTeamPage from "./pages/OurTeamPage";
 
 const history = createHistory();
 
@@ -15,6 +16,7 @@ function App() {
       <Router history={history}>
           <Switch>
               <Route path="/" component={MainPage} exact/>
+              <Route path="/our-team" component={OurTeamPage} />
               <Route path="/faq" component={FAQPage} />
               <Route path="/contact" component={ContactPage} />
               <Route path="/privacy-policy" component={PrivacyPolicy} />

src/pages/FAQPage.jsx

@@ -36,6 +36,7 @@ const AccordionsItem = ({id, title, content}) => {
                     variant='body1'
                     color='#616161'
                     lineHeight='1.7em'
+                    fontWeight='300'
                 >
                     {content}
                 </Typography>

src/pages/OurTeamPage.jsx

@@ -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