Merge pull request #45 from Rajesh-Nagarajan-11/faq-upgrade

Added FAQ for Certifications

Author: Rajesh-Nagarajan-11

src/pages/index.js

@@ -267,10 +267,18 @@ const App = () => {
                 for details of when and how each badge is awarded.
               </p>     
               <section className="faq">
-              {/* <h1>Frequently Asked Questions</h1> */}
+              <h2>General</h2>
                 <Faq
                   category={['Layer5 Badges']}
-                  display-category-title={'false'}
+                  display-category-title={'true'}
+                />
+              </section>
+
+                <section className="faq">
+              <h2>Certifications</h2>
+                <Faq
+                  category={['certifications']}
+                  display-category-title={'true'}
                 />
               </section>
 
@@ -328,6 +336,7 @@ const App = () => {
               {/* <p className="caption">Launch and learn with Meshery</p>
             <p className="byline">The cloud native playground contains a set of learning paths that incorporate an application networking centric curriculum featuring training on 200+ integrations.</p> */}
 
+
                   <BadgePreview theme={theme}>
                     <PreviewText theme={theme}>
                       Your badge will appear in your GitHub profile, showcasing your milestones!

src/sitecomponents/App.style.js

@@ -341,8 +341,12 @@ export const Main = styled.main`
     margin: 1rem;
   }
   .faq {
-    text-align: center;
+    text-align: left;
     margin: 0rem auto 0rem auto;
+    
+    h2 {
+      text-align: left;
+    }
   }
   @media screen and (max-width: 1230px) {
     .display-badge {

src/sitecomponents/Faq/faqSection.style.js

@@ -1,7 +1,7 @@
 import styled from "styled-components";
 
 const FaqSectionWrapper = styled.section`
-  margin: 2.5rem auto;
+  margin: 1.75rem auto 2.5rem auto;
   position: relative;
   overflow: hidden;
 
@@ -14,11 +14,11 @@ const FaqSectionWrapper = styled.section`
     border-color: transparent;
   }
   .reusecore__accordion {
-    margin-bottom: 5rem;
+    margin-bottom: 1rem;
   }
   .accordion__item {
     .accordion__header {
-      padding:0;
+      padding:0.5px;
       background: #00b39f;
       h5 {
         font-weight: 700;