Merge pull request #4 from scalabridge/add-faq

Add faq section

Author: xingyif

src/App.css

@@ -93,6 +93,11 @@
     max-width: 100%
 }
 
+.faq {
+    background-color: #F4FAFA;
+    padding: 75px;
+}
+
 .code-of-conduct {
     background-color: #A54440;
     padding: 75px;
@@ -111,6 +116,10 @@
 
 /* Tags */
 
+.text-red {
+    color: #A54440;
+}
+
 img {
     max-width: 100%;
     height: auto;

src/App.js

@@ -3,6 +3,7 @@ import './App.css';
 import Navbar from "./Navbar";
 import ImageCard from "./ImageCard";
 import LargeImageCard from "./LargeImageCard";
+import FrequentlyAQ from "./FrequentlyAQ";
 import CodeOfConduct from "./CodeOfConduct";
 import Sponsors from "./Sponsors";
 
@@ -28,6 +29,7 @@ function App() {
                     <ImageCard topText="SUPPORT" bottomText ="Reinforcing our Commitment" image="card2.png" bgColor="#A54440"/>
                     <ImageCard topText="EDUCATION" bottomText ="One Step at a Time" image="card3.png" bgColor="#E2ABA9"/>
                 </div>
+                <FrequentlyAQ />
                 <CodeOfConduct/>
                 <Sponsors/>
             </div>

src/FrequentlyAQ.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+export default function FrequentlyAQ() {
+    return (
+        <div className="faq text-center">
+            <h2 className="p-2 text-red">FAQ</h2>
+            <div className="flex-container">
+                <div>
+                    <p className="p-3 text-center text-red">QUESTION</p>
+                    <p className="p-5 text-left">Enter your answer to the question here. Make sure the writing is clear and concise, and helps visitors get the support they need in the most efficient way. Consider elaborating with examples or visual aids to ensure all users fully understand the information.</p>
+                </div>
+                <div>
+                    <p className="p-3 text-center text-red">QUESTION</p>
+                    <p className="p-5 text-left">Enter your answer to the question here. Make sure the writing is clear and concise, and helps visitors get the support they need in the most efficient way. Consider elaborating with examples or visual aids to ensure all users fully understand the information.</p>
+                </div>
+            </div>
+            <button type="button" className="btn btn-outline-dark text-center">Read More</button>
+        </div>
+    )
+}