Add about page

components/about-header/index.js

@@ -1,4 +1,5 @@
 import { AboutHeaderWrap } from './style';
+import siteConfig from "storage/site";
 
 const AboutHeader = () => (
   <AboutHeaderWrap>
@@ -9,7 +10,7 @@ const AboutHeader = () => (
           <h2>Hello, I'm Kamran Ahmed.</h2>
           <p>I created <span className='flow-black'>roadmap.sh</span> to help developers find their path if they are confused and help them grow in their career.</p>
           <div className="author-links">
-            <a href="mailto:kamran@roadmap.sh">@kamranahmedse</a>
+            <a href={`https://twitter.com/${siteConfig.twitter}`} target="_blank">@kamranahmedse</a>
             <a href="mailto:kamran@roadmap.sh">kamran@roadmap.sh</a>
           </div>
         </div>
@@ -18,4 +19,4 @@ const AboutHeader = () => (
   </AboutHeaderWrap>
 );
 
-export default AboutHeader;
+export default AboutHeader;

components/faq-list/index.js

@@ -1,33 +1,16 @@
-import { FaqContainer, FaqItem } from './style';
+import { FaqContainer } from './style';
+import GuideBody from 'components/guide-body';
+
+const AboutPage = require(`../../storage/pages/about.md`).default;
 
 const FaqList = () => (
   <FaqContainer className='border-top bg-light'>
-    <FaqItem>
-      <div className="container container-small">
-        <h4 className='font-weight-bolder'>What is roadmap.sh?</h4>
-        <p>Roadmap.sh is the community curated roadmaps and paths for the budding developers. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid assumenda iure maiores nemo nihil odio perspiciatis recusandae repellendus sed vero. Adipisci consectetur esse explicabo illum natus neque perferendis quis ullam.</p>
-        <p>If you really want to Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab asperiores commodi consequatur, culpa cumque dolorum, eos hic illo obcaecati odit quam quod reiciendis, rem reprehenderit saepe sed tempore tenetur vitae!</p>
-      </div>
-    </FaqItem>
-    <FaqItem>
-      <div className="container container-small">
-        <h4 className="font-weight-bolder">What are the plans for roadmap.sh?</h4>
-        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore eaque eius esse, facere id ipsum, minima nam, nisi quos reprehenderit saepe tempora vitae voluptate. Atque deleniti dolores eos laboriosam repellat.</p>
-      </div>
-    </FaqItem>
-    <FaqItem>
-      <div className="container container-small">
-        <h4 className="font-weight-bolder">What is the source of revenue?</h4>
-        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi consequuntur, harum impedit numquam porro quod unde! Aperiam dolorum ducimus expedita fugiat, impedit nesciunt, quaerat qui recusandae repellendus tenetur ut voluptatibus!</p>
-      </div>
-    </FaqItem>
-    <FaqItem>
-      <div className="container container-small">
-        <h4 className="font-weight-bolder">Can I contribute?</h4>
-        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi consequuntur, harum impedit numquam porro quod unde! Aperiam dolorum ducimus expedita fugiat, impedit nesciunt, quaerat qui recusandae repellendus tenetur ut voluptatibus!</p>
-      </div>
-    </FaqItem>
+    <div className="container container-small">
+      <GuideBody>
+        <AboutPage />
+      </GuideBody>
+    </div>
   </FaqContainer>
 );
 
-export default FaqList;
+export default FaqList;

components/faq-list/style.js

@@ -2,10 +2,15 @@ import styled from 'styled-components';
 
 export const FaqContainer = styled.div`
   padding: 40px 0;
-`;
-
-export const FaqItem = styled.div`
-  padding: 20px 20px;
+  
+  h4 {
+    margin-top: 30px;
+    font-weight: 700;
+  }
+  
+  h4:first-child {
+    margin-top: 0;  
+  }
 
   p {
     color: #333;
@@ -14,4 +19,7 @@ export const FaqItem = styled.div`
   p:last-child {
     margin-bottom: 0;
   }
-`;
+
+  .container {
+  }
+`;