(WIP) Adding FAQ page to dapp

src/App.jsx

@@ -21,6 +21,7 @@ import EditProfile from './views/Profile/EditProfile';
 import Profiles from './views/Landing/Profiles';
 import Careers from './views/Landing/Careers';
 import Privacy from './views/Landing/Privacy';
+import FAQ from './views/Landing/FAQ';
 import Terms from './views/Landing/Terms';
 import Create from './views/Landing/Create';
 import NavLanding from './components/NavLanding';
@@ -362,6 +363,17 @@ class App extends Component {
             )}
           />
 
+          <Route
+            exact
+            path={routes.FAQ}
+            render={() => (
+              <FAQ
+                handleSignInUp={this.handleSignInUp}
+                isLoggedIn={isLoggedIn}
+              />
+            )}
+          />
+
           <Route
             path={routes.API}
             render={() => (

src/components/NavLanding.jsx

@@ -109,6 +109,9 @@ class NavLanding extends Component {
           <a href="https://medium.com/3box" target="_blank" rel="noopener noreferrer" className="landing_nav_link">
             Blog
           </a>
+          <Link to={routes.FAQ} className="landing_nav_link">
+            FAQs
+          </Link>
         </div>
         {(route !== 'hub' && !isProfilePage) && (
           <div id="actionButtons">
@@ -237,6 +240,12 @@ class NavLanding extends Component {
               </li>
             </Link>
 
+            <Link to={routes.FAQ}  className="landing_nav_apiLink">
+              <li className={normalizedPath === routes.FAQ ? 'nav__activePage' : ''}>
+                FAQ
+              </li>
+            </Link>
+
             <Link to={routes.API} className="landing_nav_apiLink">
               <li className={normalizedPath === routes.API ? 'nav__activePage' : ''}>
                 API Products

src/utils/routes.js

@@ -19,6 +19,7 @@ export const DETAILS = 'details';
 export const EDIT = 'edit';
 export const COLLECTIBLES = 'collectibles';
 export const CONTACTS = 'contacts';
+export const FAQ = '/faq';
 
 // FORMAT STRUCTURE FOR REACT ROUTER
 export const FORMAT_PROFILE_ACTIVITY = `/:ethAddress/${ACTIVITY}`;

src/views/Landing/FAQ.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import propTypes from 'prop-types';
+import Footer from './components/Footer';
+import '../styles/Landing.css';
+import '../styles/Info.css';
+
+const FAQ = ({ isLoggedIn, handleSignInUp }) => {
+  const FAQItems = [{ question: 'Question 1?', answer: '3Box!' },
+    { question: 'What am I doing here?', answer: '3Box!' },
+    { question: 'Aaaaaaaaaaaaaaa', answer: '3Box!' },
+    { question: 'Bee-Movie Script?', answer: '3Box!' },
+    { question: 'IPFS', answer: '3Box!' },
+    { question: 'OrbitDB', answer: '3Box!' },
+  ];
+  return (
+    <div className="info">
+      <div className="info__page">
+        <div className="info__banner">
+          <h1>FAQ</h1>
+          <br />
+          <h2>Frequently asked questions</h2>
+        </div>
+        <div className="info__content lr-auto-mg">
+          &nbsp;
+          <br />
+          <br />
+          {
+            FAQItems.map(q => (
+              <section>
+                <h3>{q.question}</h3>
+                <p>
+                  {q.answer}
+                </p>
+                <br />
+              </section>
+            ))
+          }
+          &nbsp;
+        </div>
+      </div>
+      <Footer
+        handleSignInUp={handleSignInUp}
+        isLoggedIn={isLoggedIn}
+      />
+    </div>
+  );
+};
+FAQ.defaultProps = {
+  handleSignInUp: null,
+  isLoggedIn: false,
+};
+
+FAQ.propTypes = {
+  handleSignInUp: propTypes.func,
+  isLoggedIn: propTypes.bool,
+};
+
+export default FAQ;

src/views/styles/NewLanding.css

@@ -1396,3 +1396,11 @@ pre {
   .careers_positions_button {
     width: 90%;
     justify-content: flex-start; } }
+
+
+.lr-auto-mg {
+  margin-left: auto;
+  margin-right: auto;
+  align-content: start;
+  align-items: start !important;
+}