Add about page

components/about-header/index.js

@@ -2,11 +2,18 @@ import './style.scss';
 
 const AboutHeader = () => (
   <div className='about-header'>
-    <div className="container">
-      <h2>Hello, I'm Kamran Ahmed.</h2>
-      <p>I created <span className='flow-black'>roadmap.sh</span> to help people grow their careers.</p>
-
-      <img className='author-img' src="/static/kamran.jpeg" alt="" />
+    <div className="container container-small">
+      <div className="author-info">
+        <img className='author-img d-none d-sm-none d-md-block d-lg-block d-xl-block' src="/static/kamran.jpeg" />
+        <div className="author-msg">
+          <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="mailto:kamran@roadmap.sh">kamran@roadmap.sh</a>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 );

components/about-header/style.scss

@@ -1,10 +1,12 @@
 .about-header {
-  text-align: center;
+  text-align: left;
   padding: 70px 20px;
   margin: 0 auto;
 
-  .container {
-    max-width: 800px;
+  .author-info {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
   }
 
   h2 {
@@ -25,11 +27,21 @@
   }
 
   .author-img {
-    height: 145px;
-    border-radius: 100%;
-    margin-top: 25px;
-    margin-bottom: -125px;
-    border: 10px solid white;
-    box-shadow: 0 1px 0 0 #dee2e6;
+    height: 160px;
+    margin-right: 25px;
+    margin-top: 8px;
+    border-radius: 9px;
+  }
+
+  .author-links a {
+    display: inline-block;
+    margin-right: 5px;
+    background: #2d2d2d;
+    color: white;
+    padding: 5px 10px;
+    font-weight: 500;
+    margin-top: 12px;
+    border-radius: 5px;
+    text-decoration: none;
   }
 }

components/page-footer/index.js

@@ -1,6 +1,6 @@
 import './style.scss';
 
-const Footer = () => (
+const PageFooter = () => (
   <div className="page-footer">
     <div className="container">
       <div className="foot-cols-wrap row">
@@ -54,4 +54,4 @@ const Footer = () => (
   </div>
 );
 
-export default Footer;
+export default PageFooter;

components/page-header/index.js

@@ -1,6 +1,6 @@
 import './style.scss';
 
-const Header = () => (
+const PageHeader = () => (
   <div className='page-header'>
     <div className="top-row container">
       <div className="flex-grow-1 brand">
@@ -19,4 +19,4 @@ const Header = () => (
   </div>
 );
 
-export default Header;
+export default PageHeader;

pages/about/index.js

@@ -1,16 +1,40 @@
 import AboutHeader from '../../components/about-header';
-import Footer from '../../components/footer';
-import Header from '../../components/header';
+import PageFooter from '../../components/page-footer';
+import PageHeader from '../../components/page-header';
 import './style.scss';
 
 const About = () => (
   <div className='home-container'>
-    <Header />
+    <PageHeader />
     <AboutHeader />
-    <div className="p-5 border-top border-bottom bg-light">
-
+    <div className="border-top border-bottom bg-light">
+      <div className="faq-item">
+        <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>
+      </div>
+      <div className="faq-item border-top">
+        <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>
+      </div>
+      <div className="faq-item border-top">
+        <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>
+      </div>
+      <div className="faq-item border-top">
+        <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>
+      </div>
     </div>
-    <Footer />
+    <PageFooter />
   </div>
 );
 

pages/about/style.scss

@@ -0,0 +1,8 @@
+.faq-item {
+  padding: 40px 20px;
+
+  p:last-child {
+    margin-bottom: 0;
+  }
+}
+

pages/global.scss

@@ -1,3 +1,7 @@
+.container-small {
+  max-width: 800px;
+}
+
 .border-top {
   border-top: 1px solid #eaeaea;
 }

pages/home/index.js

@@ -1,17 +1,17 @@
-import Header from '../../components/header/index';
 import FeaturedContent from '../../components/featured-content';
-import './style.scss';
 import HeroSection from '../../components/hero-section';
-import Footer from '../../components/footer';
+import PageFooter from '../../components/page-footer';
+import PageHeader from '../../components/page-header';
+import './style.scss';
 
 const Home = (props) => (
   <div className='home-container'>
-    <Header />
+    <PageHeader />
     <HeroSection />
     <div className="featured-content border-top border-bottom bg-light">
       <FeaturedContent />
     </div>
-    <Footer />
+    <PageFooter />
   </div>
 );
 

pages/index.js

@@ -1,10 +1,10 @@
 import { library } from '@fortawesome/fontawesome-svg-core';
-import { faGithub, fab } from '@fortawesome/free-brands-svg-icons';
+import { faGithub, fab, faTwitter } from '@fortawesome/free-brands-svg-icons';
 import { faArrowRight } from '@fortawesome/free-solid-svg-icons'
 
-import 'bootstrap/dist/css/bootstrap.min.css';
-import './global.scss';
+import 'bootstrap/scss/bootstrap.scss';
 import Home from './home/index';
+import './global.scss';
 
 library.add(fab, faGithub, faArrowRight);
 

pages/privacy/index.js

@@ -1,10 +1,10 @@
-import Header from '../../components/header';
-import Footer from '../../components/footer';
+import PageHeader from '../../components/page-header';
+import PageFooter from '../../components/page-footer';
 import './style.scss';
 
 const Privacy = () => (
   <div className='terms-container'>
-    <Header />
+    <PageHeader />
     <div className="bg-light border-top border-bottom privacy-wrap">
       <div className="container pt-5 pb-5">
         <h2 className='font-weight-bold mb-3'>Privacy Policy</h2>
@@ -59,7 +59,7 @@ const Privacy = () => (
         <p>If you have any questions or concerns regarding our privacy policies, please send us a detailed message to <a href="mailto:contact@roadmap.sh">contact@roadmap.sh</a>, and we will try to resolve your concerns.</p>
       </div>
     </div>
-    <Footer />
+    <PageFooter />
   </div>
 );
 

pages/terms/index.js

@@ -1,10 +1,10 @@
-import Header from '../../components/header';
-import Footer from '../../components/footer';
+import PageFooter from '../../components/page-footer';
+import PageHeader from '../../components/page-header';
 import './style.scss';
 
 const Terms = () => (
   <div className='terms-container'>
-    <Header />
+    <PageHeader />
     <div className="bg-light border-top border-bottom tos-wrap">
       <div className="container pt-5 pb-5">
         <h2 className='font-weight-bold mb-3'>Terms of Service</h2>
@@ -140,10 +140,11 @@ const Terms = () => (
         <p>Miscellaneous. You will be responsible for paying, withholding, filing, and reporting all taxes, duties, and other governmental assessments associated with your activity in connection with the Services, provided that roadmap.sh may, in its sole discretion, do any of the foregoing on your behalf or for itself as it sees fit.
           The failure of either you or us to exercise, in any way, any right herein shall not be deemed a waiver of any further rights hereunder. If any provision of these Terms is found to be unenforceable or invalid, that provision will be limited or eliminated, to the minimum extent necessary, so that these Terms shall otherwise remain
           in full force and effect and enforceable. You and roadmap.sh agree that these Terms are the complete and exclusive statement of the mutual understanding between you and roadmap.sh, and that it supersedes and cancels all previous written and oral agreements, communications and other understandings relating to the subject
-          matter of these Terms. You hereby acknowledge and agree that you are not an employee, agent, partner, or joint venture of roadmap.sh, and you do not have any authority of any kind to bind roadmap.sh in any respect whatsoever. Except as expressly set forth in the section above regarding the Apple Application, you and roadmap.sh agree there are no third party beneficiaries intended under these Terms.</p>
+          matter of these Terms. You hereby acknowledge and agree that you are not an employee, agent, partner, or joint venture of roadmap.sh, and you do not have any authority of any kind to bind roadmap.sh in any respect whatsoever. Except as expressly set forth in the section above regarding the Apple Application, you and roadmap.sh
+          agree there are no third party beneficiaries intended under these Terms.</p>
       </div>
     </div>
-    <Footer />
+    <PageFooter />
   </div>
 );