create about us page

src/App.js

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

src/components/Title.jsx

@@ -0,0 +1,40 @@
+import {Box, Typography} from "@mui/material";
+import rom from "../img/our team/romb.png";
+
+const Title = ({subtitle, title}) => {
+    return (
+        <Box
+            display='flex'
+            flexDirection='column'
+            justifyContent='center'
+            alignItems='center'
+        >
+            <Typography
+                fontFamily='sarif'
+                variant='h5'
+                color='#000'
+                letterSpacing='5px'
+                textAlign='center'
+                marginLeft='5px'
+                marginBottom='10px'
+            >
+                {subtitle}
+            </Typography>
+            <img style={{
+                width: '7px',
+                maxHeight: '7px',
+            }} src={rom} alt='item'/>
+            <Typography
+                variant='h4'
+                color='#000'
+                letterSpacing='5px'
+                textAlign='center'
+                marginLeft='5px'
+                marginTop='10px'
+            >
+                {title}
+            </Typography>
+        </Box>
+    )
+}
+export default Title

src/pages/AboutUsPage.jsx

@@ -0,0 +1,104 @@
+import Footer from "../components/Footer";
+import Header from "../components/Header";
+import Breadcrumb from "../components/Breadcrumbs";
+import {Box, Container, Grid, Typography, useMediaQuery} from "@mui/material";
+import Title from "../components/Title";
+import image1 from "../img/about us/1.jpg";
+import SavingsIcon from '@mui/icons-material/Savings';
+import AlarmIcon from '@mui/icons-material/Alarm';
+import AutoGraphIcon from '@mui/icons-material/AutoGraph';
+
+const BlockContentItem = ({content}) => {
+    return (
+        <Grid item xs={12} sm={5}>
+            <Typography
+                variant='body1'
+                fontWeight='300'
+                lineHeight='1.8em'
+                color='#616161'
+                marginBottom='10px'
+                textAlign='justify'
+            >
+                {content}
+            </Typography>
+        </Grid>
+    )
+}
+const BlockQualityItem = ({Icon, title, content}) => {
+    return (
+        <Grid sx={{padding: '0 20px'}} item xs={12} md={4}>
+            <Box
+                display='flex'
+                justifyContent='center'
+                marginBottom='20px'
+            >
+                <Icon/>
+            </Box>
+            <Title subtitle={title} />
+            <Typography
+                variant='body1'
+                fontWeight='300'
+                lineHeight='1.8em'
+                color='#616161'
+                marginBottom='10px'
+                textAlign='center'
+            >
+                {content}
+            </Typography>
+        </Grid>
+    )
+}
+
+const AboutUsPage = () => {
+    const matches = useMediaQuery('(max-width:768px)');
+    return (
+        <>
+            <Header/>
+            <Breadcrumb links={['about us']}/>
+            <main style={{backgroundColor: "#f3f3f3", padding: matches ? "20px 0" : "50px 0"}}>
+                <Container maxWidth="lg">
+                    <Title subtitle={'OUR'} title={'MISSION'} />
+                    <Grid sx={{padding: matches ? "20px 0" : "50px 0"}} container justifyContent='space-around'>
+                        <BlockContentItem content={'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aut blanditiis, cum explicabo laudantium maiores nihil non odio, ratione, sit temporibus totam ullam voluptatibus? Animi at corporis dolore dolorum explicabo harum laboriosam laborum minima non, odio quidem similique temporibus vel. Architecto illo illum labore mollitia, recusandae repellendus similique soluta vitae?'}/>
+                        <BlockContentItem content={'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aut blanditiis, cum explicabo laudantium maiores nihil non odio, ratione, sit temporibus totam ullam voluptatibus? Animi at corporis dolore dolorum explicabo harum laboriosam laborum minima non, odio quidem similique temporibus vel. Architecto illo illum labore mollitia, recusandae repellendus similique soluta vitae?'}/>
+                    </Grid>
+                    <Grid sx={{padding: matches ? "20px 0" : "50px 0", overflow: 'hidden'}} container justifyContent='space-between'>
+                        <Grid marginTop='45px' height='100%' item xs={12} lg={6}>
+                            <img style={{
+                                width: '100%',
+                                maxHeight: matches ? '300px': '545px',
+                                objectFit: 'cover',
+                                objectPosition: 'center top'
+                            }} src={image1} alt='background'/>
+                        </Grid>
+                        <Grid sx={{backgroundColor: '#fff', padding: matches ? "20px" : "50px 50px 40px 50px", height: '100%'}} item xs={12} lg={6}>
+                            <Title subtitle={'HELLO FROM'} title={'CEO'} />
+                            <Typography
+                                variant='body1'
+                                fontWeight='300'
+                                lineHeight='1.8em'
+                                color='#616161'
+                                marginBottom='10px'
+                                textAlign='justify'
+                            >
+                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aut commodi dicta ducimus laboriosam laborum, magnam mollitia nobis non obcaecati quis quisquam, rem tempore vel voluptas voluptatem voluptatum. Adipisci dignissimos dolorem ex, magnam minima modi molestias mollitia numquam sint. Assumenda cupiditate dicta dolorem dolorum eligendi, est eum facere itaque minus nulla pariatur, placeat quasi repellendus sed sint tempora velit, veritatis?</p>
+                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium asperiores dolores eius fuga harum hic nulla recusandae reprehenderit sint voluptatum?</p>
+                            </Typography>
+                        </Grid>
+                    </Grid>
+                </Container>
+                <Box sx={{backgroundColor: '#fff', padding: matches ? "20px 0" : "50px 0"}}>
+                    <Container maxWidth="lg">
+                        <Grid container justifyContent='space-between'>
+                            <BlockQualityItem Icon={SavingsIcon} title={'10% CASHBACK'} content={'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque dolore doloremque fugiat quaerat quas temporibus.'}/>
+                            <BlockQualityItem Icon={AlarmIcon} title={'FAST DELIVERY'} content={'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque dolore doloremque fugiat quaerat quas temporibus.'}/>
+                            <BlockQualityItem Icon={AutoGraphIcon} title={'TOP QUALITY'} content={'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque dolore doloremque fugiat quaerat quas temporibus.'}/>
+                        </Grid>
+                    </Container>
+                </Box>
+            </main>
+            <Footer/>
+        </>
+    )
+}
+export default AboutUsPage