Fix - Page styles not being applied

components/faq-list/index.js

@@ -0,0 +1,33 @@
+import { FaqContainer, FaqItem } from './style';
+
+const FaqList = () => (
+  <FaqContainer className='border-top border-bottom 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>
+  </FaqContainer>
+);
+
+export default FaqList;

components/faq-list/style.js

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+
+export const FaqContainer = styled.div`
+  padding: 40px 0;
+`;
+
+export const FaqItem = styled.div`
+  padding: 20px 20px;
+
+  p {
+    color: #333;
+  }
+
+  p:last-child {
+    margin-bottom: 0;
+  }
+`;

components/featured-content/index.js

@@ -1,7 +1,7 @@
-import { FeaturedContentWrap } from './style';
+import { FeaturedContentWrap, FeaturedWrap } from './style';
 
 const FeaturedContent = (props) => (
-  <>
+  <FeaturedWrap className="border-top border-bottom bg-light">
     <FeaturedContentWrap className="featured-content-wrap">
       <div className="container">
         <div className="featured-head">
@@ -131,7 +131,7 @@ const FeaturedContent = (props) => (
         </div>
       </div>
     </FeaturedContentWrap>
-  </>
+  </FeaturedWrap>
 );
 
 FeaturedContent.defaultProps = {

components/featured-content/style.js

@@ -1,5 +1,9 @@
 import styled from 'styled-components';
 
+export const FeaturedWrap = styled.div`
+  padding: 50px 0;
+`;
+
 export const FeaturedContentWrap = styled.div`
   .featured-head {
     text-align: center;

components/tos-page/index.js

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+
+export const TosPage = styled.div`
+  h2 {
+    font-weight: 700;
+    margin-bottom: 16px;
+  }
+
+  h4 {
+    margin-top: 25px;
+    margin-bottom: 10px;
+    font-weight: 600;
+  }
+  
+  p {
+    color: #999;
+  }
+  
+  a {
+    color: #333;
+  }
+`;