add faq

src/components/join/Question.astro

@@ -0,0 +1,14 @@
+---
+const {question, answer} = Astro.props;
+---
+<div class = "text-white w-full flex flex-col mb-[2vh]">
+    <p class = "text-ieee-yellow text-[1.4vw] mb-[2vh] font-semibold pl-[1vw]">
+    {question}
+    </p>
+    <p class = "w-[60%] mb-[2vh] pl-[1vw]">
+        {answer}
+    </p>    
+    <dev>
+        <hr class="w-[17%] h-[0.1vw] my-[1vw] bg-white/40">
+    </dev>
+</div>

src/components/join/Questions.astro

@@ -0,0 +1,21 @@
+---
+import Question from "./Question.astro"
+import { LiaDotCircle } from "react-icons/lia";
+import faq from "../../data/faq.json"
+---
+<div class = "text-white w-full h-[90vh] ml-[9vw]">
+    <div class = "text-[2.5vw] flex items-center my-[7vh]">
+        <LiaDotCircle className = "mr-[1vw]" />
+        <p>
+            Frequently Asked Questions
+        </p>
+    </div>
+    <div class = "w-full ml-[10vw]">
+        {faq.map((question)=>(
+           <Question
+            question = {question.question}
+            answer = {question.answer}
+           /> 
+        ))}
+    </div>
+</div>

src/data/faq.json

@@ -0,0 +1,21 @@
+[
+    {
+        "question": "What skills will you gain?",
+        "answer": "Ante aptent fringilla cubilia pretium egestas vivamus quisque bibendum erat Ante aptent fringilla cubilia pretium egestas vivamus quisque bibendum erat Ante aptent fringilla cubilia pretium egestas vivamus quisque bibendum erat"
+    },
+
+    {
+        "question": "What skills will you gain?",
+        "answer": "Ante aptent fringilla cubilia pretium egestas vivamus quisque bibendum erat Ante aptent fringilla cubilia pretium egestas vivamus quisque bibendum erat Ante aptent fringilla cubilia pretium egestas vivamus quisque bibendum erat"
+    },
+
+    {
+        "question": "What skills will you gain?",
+        "answer": "Ante aptent fringilla cubilia pretium egestas vivamus quisque bibendum erat Ante aptent fringilla cubilia pretium egestas vivamus quisque bibendum erat Ante aptent fringilla cubilia pretium egestas vivamus quisque bibendum erat"
+    },
+
+    {
+        "question": "What skills will you gain?",
+        "answer": "Ante aptent fringilla cubilia pretium egestas vivamus quisque bibendum erat Ante aptent fringilla cubilia pretium egestas vivamus quisque bibendum erat Ante aptent fringilla cubilia pretium egestas vivamus quisque bibendum erat"
+    }
+]

src/pages/join.astro

@@ -3,10 +3,12 @@ import Layout from "../layouts/Layout.astro";
 import Social from "../components/core/Social.astro";
 import JoinTitle from "../components/join/JoinTitle.astro";
 import Resources from "../components/join/Resources.jsx";
+import Questions from "../components/join/Questions.astro";
 ---
 
 <Layout>
     <JoinTitle/>
     <Social/>
+    <Questions/>
     <Resources/>
 </Layout>