Modify UI for faq page

pages/about/index.js

@@ -7,7 +7,7 @@ const About = () => (
   <div className='home-container'>
     <PageHeader />
     <AboutHeader />
-    <div className="border-top border-bottom bg-light">
+    <div className="faqs-container 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>
@@ -15,19 +15,19 @@ const About = () => (
           <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="faq-item">
         <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="faq-item">
         <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="faq-item">
         <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>

pages/about/style.scss

@@ -1,8 +1,16 @@
-.faq-item {
+.faqs-container {
-  padding: 40px 20px;
+  padding: 40px 0;
 
-  p:last-child {
+  .faq-item {
-    margin-bottom: 0;
+    padding: 20px 20px;
+
+    p {
+      color: #333;
+    }
+    p:last-child {
+      margin-bottom: 0;
+    }
   }
 }
 
+