create page faq

src/App.js

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

src/pages/FAQPage.jsx

@@ -0,0 +1,81 @@
+import Header from "../components/Header";
+import Footer from "../components/Footer";
+import Breadcrumbs from "../components/Breadcrumbs";
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import {Accordion, AccordionDetails, AccordionSummary, Container, Typography, useMediaQuery} from "@mui/material";
+import {useState} from "react";
+
+const AccordionsItem = ({id, title, content}) => {
+    const matches = useMediaQuery('(max-width:768px)');
+    const [expanded, setExpanded] = useState(false)
+
+    const handleChange = (panel) => (event, isExpanded) => {
+        setExpanded(isExpanded ? panel : false)
+    }
+
+    return (
+        <Accordion
+            expanded={expanded === id}
+            onChange={handleChange(id)}
+            sx={{padding: matches ? '10px' : "20px"}}
+        >
+            <AccordionSummary
+                expandIcon={<ExpandMoreIcon />}
+                aria-controls="panel1a-content"
+                id="panel1a-header"
+            >
+                <Typography
+                    variant={matches ? 'body1' : 'h5'}
+                    letterSpacing='3px'
+                >
+                    {title.toUpperCase()}
+                </Typography>
+            </AccordionSummary>
+            <AccordionDetails>
+                <Typography
+                    variant='body1'
+                    color='#616161'
+                    lineHeight='1.7em'
+                >
+                    {content}
+                </Typography>
+            </AccordionDetails>
+        </Accordion>
+    )
+}
+
+const FAQPage = () => {
+    const matches = useMediaQuery('(max-width:768px)');
+    return (
+        <>
+            <Header/>
+            <Breadcrumbs links={['faq']}/>
+            <main style={{backgroundColor: "#f3f3f3", padding: matches ? "20px 0" : "50px 0"}}>
+                <Container maxWidth="lg">
+                   <AccordionsItem
+                       id={'panel1'}
+                       title={'PAYMENT METHODS'}
+                       content={'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam amet autem, blanditiis cupiditate dolore eum facilis fuga magni, molestias mollitia odio placeat, possimus sit ut vel. Architecto cumque dignissimos distinctio dolorum eos exercitationem fuga molestiae odio optio placeat porro, possimus, repellendus. Accusamus ad ducimus labore quos rerum sed suscipit voluptatibus.'}
+                   />
+                    <AccordionsItem
+                        id={'panel2'}
+                        title={'INTERNATIONAL SHIPPING'}
+                        content={'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam amet autem, blanditiis cupiditate dolore eum facilis fuga magni, molestias mollitia odio placeat, possimus sit ut vel. Architecto cumque dignissimos distinctio dolorum eos exercitationem fuga molestiae odio optio placeat porro, possimus, repellendus. Accusamus ad ducimus labore quos rerum sed suscipit voluptatibus.'}
+                    />
+                    <AccordionsItem
+                        id={'panel3'}
+                        title={'CASHBACK PROGRAM'}
+                        content={'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam amet autem, blanditiis cupiditate dolore eum facilis fuga magni, molestias mollitia odio placeat, possimus sit ut vel. Architecto cumque dignissimos distinctio dolorum eos exercitationem fuga molestiae odio optio placeat porro, possimus, repellendus. Accusamus ad ducimus labore quos rerum sed suscipit voluptatibus.'}
+                    />
+                    <AccordionsItem
+                        id={'panel4'}
+                        title={'MONEY BACK WARRANTY'}
+                        content={'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam amet autem, blanditiis cupiditate dolore eum facilis fuga magni, molestias mollitia odio placeat, possimus sit ut vel. Architecto cumque dignissimos distinctio dolorum eos exercitationem fuga molestiae odio optio placeat porro, possimus, repellendus. Accusamus ad ducimus labore quos rerum sed suscipit voluptatibus.'}
+                    />
+                </Container>
+            </main>
+            <Footer/>
+        </>
+    )
+}
+export default FAQPage