Curate new FAQ sections and add more answers (graphql#982)

* Initial design - not pretty

* Add missing answers

* Fix sentence structure

* Apply suggestions from Benjie's code review

Co-authored-by: Benjie Gillam <[email protected]>

* Apply suggestions from Ivan's code review

Co-authored-by: Ivan Goncharov <[email protected]>

Author: carolstran

src/components/FAQLayout/index.tsx

@@ -5,23 +5,80 @@ import { toSlug } from '../../utils/slug'
 
 interface Props {
   title: string
-  questions: string
+  gettingStartedQuestions: string
+  generalQuestions: string
+  bestPracticesQuestions: string
+  specificationQuestions: string
+  frontendQuestions: string
   rawMarkdownBody: string
 }
 
-const index = ({ title, questions, rawMarkdownBody }: Props) => {
+const index = ({ title, gettingStartedQuestions, generalQuestions, bestPracticesQuestions, specificationQuestions, frontendQuestions, rawMarkdownBody }: Props) => {
   return (
     <section>
       <div className="documentationContent">
         <div className="inner-content">
           <h1>{title}</h1>
-          {questions && (
+          {gettingStartedQuestions && (
               <div>
-                  {questions
+                  <h2>Getting Started</h2>
+                  {gettingStartedQuestions
                     .split(',')
-                    .map(question => (
-                        <Link className="faq-questions" key={question} to={`#${toSlug( question )}`}>
-                            {question}
+                    .map(gettingStartedQuestion => (
+                        <Link className="faq-questions" key={gettingStartedQuestion} to={`#${toSlug( gettingStartedQuestion )}`}>
+                            {gettingStartedQuestion}
+                        </Link>
+                    ))
+                  }
+              </div>
+          )}
+          {generalQuestions && (
+              <div>
+                  <h2>General</h2>
+                  {generalQuestions
+                    .split(',')
+                    .map(generalQuestion => (
+                        <Link className="faq-questions" key={generalQuestion} to={`#${toSlug( generalQuestion )}`}>
+                            {generalQuestion}
+                        </Link>
+                    ))
+                  }
+              </div>
+          )}
+          {bestPracticesQuestions && (
+              <div>
+                  <h2>Best Practices</h2>
+                  {bestPracticesQuestions
+                    .split(',')
+                    .map(bestPracticesQuestion => (
+                        <Link className="faq-questions" key={bestPracticesQuestion} to={`#${toSlug( bestPracticesQuestion )}`}>
+                            {bestPracticesQuestion}
+                        </Link>
+                    ))
+                  }
+              </div>
+          )}
+          {specificationQuestions && (
+              <div>
+                  <h2>Specification</h2>
+                  {specificationQuestions
+                    .split(',')
+                    .map(specificationQuestion => (
+                        <Link className="faq-questions" key={specificationQuestion} to={`#${toSlug( specificationQuestion )}`}>
+                            {specificationQuestion}
+                        </Link>
+                    ))
+                  }
+              </div>
+          )}
+          {frontendQuestions && (
+              <div>
+                  <h2>Frontend</h2>
+                  {frontendQuestions
+                    .split(',')
+                    .map(frontendQuestion => (
+                        <Link className="faq-questions" key={frontendQuestion} to={`#${toSlug( frontendQuestion )}`}>
+                            {frontendQuestion}
                         </Link>
                     ))
                   }