From 5cc6b583d305257712cf3ca4cb03a38b4468fd24 Mon Sep 17 00:00:00 2001
From: raihahahan <mraihandev@gmail.com>
Date: Tue, 29 Oct 2024 03:54:49 +0800
Subject: [PATCH 1/4] Add FAQAccordian for FAQ page

---
 src/app/faq/page.tsx                | 66 +++++++++++++++++++++++++++++
 src/components/faq/FAQAccordian.tsx | 65 ++++++++++++++++++++++++++++
 src/components/faq/FAQItem.tsx      |  6 +--
 3 files changed, 134 insertions(+), 3 deletions(-)
 create mode 100644 src/app/faq/page.tsx
 create mode 100644 src/components/faq/FAQAccordian.tsx

diff --git a/src/app/faq/page.tsx b/src/app/faq/page.tsx
new file mode 100644
index 0000000..a2def79
--- /dev/null
+++ b/src/app/faq/page.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+import FaqAccordion, { mockData } from "../../components/faq/FAQAccordian";
+import Image from "next/image";
+
+export default function Page() {
+  return (
+    <>
+      <div className="bg-white p-24 min-h-screen">
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            justifyContent: "space-between",
+          }}
+        >
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "space-between",
+            }}
+          >
+            <h1 className="text-9xl text-black font-bold mb-8">
+              <div className="[text-shadow:_2px_3px_4px_#AAAAAA]">FAQs</div>
+            </h1>
+            <h2
+              className="text-7xl mb-8 font-bold"
+              style={{ color: "#6c93d6" }}
+            >
+              Opening Ceremony
+            </h2>
+          </div>
+          <Image
+            src="/HomeLogoFull.png"
+            alt="Fintech Summit Logo"
+            width={500}
+            height={500}
+            className="mb-8"
+          />
+        </div>
+        <FaqAccordion items={mockData.openingCeremony} />
+        <h2
+          className="text-7xl mb-8 mt-8 font-bold"
+          style={{ color: "#6c93d6" }}
+        >
+          Hackathon
+        </h2>
+        <FaqAccordion items={mockData.workshops} />
+        <h2
+          className="text-7xl mb-8 mt-8 font-bold"
+          style={{ color: "#6c93d6" }}
+        >
+          Workshops
+        </h2>
+        <FaqAccordion items={mockData.demo} />
+        <h2
+          className="text-7xl mb-8  mt-8font-bold"
+          style={{ color: "#6c93d6" }}
+        >
+          Demo day
+        </h2>
+      </div>
+    </>
+  );
+}
diff --git a/src/components/faq/FAQAccordian.tsx b/src/components/faq/FAQAccordian.tsx
new file mode 100644
index 0000000..268b923
--- /dev/null
+++ b/src/components/faq/FAQAccordian.tsx
@@ -0,0 +1,65 @@
+"use client";
+import { useState } from "react";
+import { FaPlus, FaMinus } from "react-icons/fa";
+import { FAQItemProps } from "./FAQItem";
+
+export const FaqAccordion = ({ items }: { items: FAQItemProps[] }) => {
+  const [activeIndex, setActiveIndex] = useState<number | null>(null);
+
+  const handleClick = (index: number) => {
+    setActiveIndex(index === activeIndex ? null : index);
+  };
+
+  return (
+    <div className="space-y-2">
+      {items.map((item, index) => (
+        <div key={index} className="bg-gray-100 rounded-lg p-4 shadow-sm">
+          <div
+            className="flex items-center justify-between cursor-pointer"
+            onClick={() => handleClick(index)}
+          >
+            <div className="flex items-center space-x-2">
+              <span className="text-gray-400 font-bold text-lg">
+                {String(index + 1).padStart(2, "0")}
+              </span>
+              <h3 className="text-black font-semibold">{item.question}</h3>
+            </div>
+            <span className="text-gray-500">
+              {activeIndex === index ? <FaMinus /> : <FaPlus />}
+            </span>
+          </div>
+          {activeIndex === index && (
+            <div className="mt-2 text-gray-600">{item.answer}</div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export const mockData: Record<
+  "openingCeremony" | "hackathon" | "workshops" | "demo",
+  FAQItemProps[]
+> = {
+  openingCeremony: [
+    { question: "When is the Opening Ceremony?", answer: "Insert answer here" },
+    {
+      question: "Where is the Opening Ceremony?",
+      answer: "Insert answer here",
+    },
+  ],
+  hackathon: [
+    { question: "When is the Hackathon?", answer: "Insert answer here" },
+    { question: "Where is the Hackathon?", answer: "Insert answer here" },
+  ],
+  workshops: [
+    { question: "When is the Workshop?", answer: "Insert answer here" },
+    { question: "Where is the Workshop?", answer: "Insert answer here" },
+  ],
+  demo: [
+    { question: "When is the Demo?", answer: "Insert answer here" },
+    { question: "Where is the Demo?", answer: "Insert answer here" },
+  ],
+};
+
+export default FaqAccordion;
diff --git a/src/components/faq/FAQItem.tsx b/src/components/faq/FAQItem.tsx
index 6872c90..c50eea4 100644
--- a/src/components/faq/FAQItem.tsx
+++ b/src/components/faq/FAQItem.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
+import React from "react";
 
-interface FAQItemProps {
+export interface FAQItemProps {
   question: string;
   answer: string;
 }
@@ -14,4 +14,4 @@ const FAQItem: React.FC<FAQItemProps> = ({ question, answer }) => {
   );
 };
 
-export default FAQItem;
\ No newline at end of file
+export default FAQItem;

From a8427a8d865c7a74448ab29abc4bde5cbf24bc86 Mon Sep 17 00:00:00 2001
From: raihahahan <mraihandev@gmail.com>
Date: Tue, 29 Oct 2024 03:55:18 +0800
Subject: [PATCH 2/4] Add react icons for Accordian

---
 package-lock.json | 11 ++++++++++-
 package.json      |  3 ++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e92efdf..115cde6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,8 @@
         "firebase": "^10.13.0",
         "next": "14.2.6",
         "react": "^18",
-        "react-dom": "^18"
+        "react-dom": "^18",
+        "react-icons": "^5.3.0"
       },
       "devDependencies": {
         "@types/node": "^20",
@@ -2355,6 +2356,14 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz",
+      "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/package.json b/package.json
index 14a7f82..60d1f2d 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,8 @@
     "firebase": "^10.13.0",
     "next": "14.2.6",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "react-icons": "^5.3.0"
   },
   "devDependencies": {
     "@types/node": "^20",

From 1d693bab03d26226d3d0367f0551dc5a183f87d9 Mon Sep 17 00:00:00 2001
From: raihahahan <mraihandev@gmail.com>
Date: Tue, 29 Oct 2024 03:56:05 +0800
Subject: [PATCH 3/4] Fix data for faq

---
 src/app/faq/page.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/app/faq/page.tsx b/src/app/faq/page.tsx
index a2def79..1c4dd47 100644
--- a/src/app/faq/page.tsx
+++ b/src/app/faq/page.tsx
@@ -46,20 +46,21 @@ export default function Page() {
         >
           Hackathon
         </h2>
-        <FaqAccordion items={mockData.workshops} />
+        <FaqAccordion items={mockData.hackathon} />
         <h2
           className="text-7xl mb-8 mt-8 font-bold"
           style={{ color: "#6c93d6" }}
         >
           Workshops
         </h2>
-        <FaqAccordion items={mockData.demo} />
+        <FaqAccordion items={mockData.workshops} />
         <h2
-          className="text-7xl mb-8  mt-8font-bold"
+          className="text-7xl mb-8  mt-8 font-bold"
           style={{ color: "#6c93d6" }}
         >
           Demo day
         </h2>
+        <FaqAccordion items={mockData.demo} />
       </div>
     </>
   );

From 657a506cddadfd75afc47d4c8a44b3e1b4ce8640 Mon Sep 17 00:00:00 2001
From: raihahahan <mraihandev@gmail.com>
Date: Tue, 29 Oct 2024 03:59:29 +0800
Subject: [PATCH 4/4] Fix styling

---
 src/components/faq/FAQAccordian.tsx | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/faq/FAQAccordian.tsx b/src/components/faq/FAQAccordian.tsx
index 268b923..c4461f8 100644
--- a/src/components/faq/FAQAccordian.tsx
+++ b/src/components/faq/FAQAccordian.tsx
@@ -1,6 +1,6 @@
 "use client";
 import { useState } from "react";
-import { FaPlus, FaMinus } from "react-icons/fa";
+import { FaPlus, FaMinus, FaMinusCircle, FaPlusCircle } from "react-icons/fa";
 import { FAQItemProps } from "./FAQItem";
 
 export const FaqAccordion = ({ items }: { items: FAQItemProps[] }) => {
@@ -13,7 +13,11 @@ export const FaqAccordion = ({ items }: { items: FAQItemProps[] }) => {
   return (
     <div className="space-y-2">
       {items.map((item, index) => (
-        <div key={index} className="bg-gray-100 rounded-lg p-4 shadow-sm">
+        <div
+          key={index}
+          style={{ backgroundColor: "#dee6f2" }}
+          className="rounded-lg p-8 shadow-sm"
+        >
           <div
             className="flex items-center justify-between cursor-pointer"
             onClick={() => handleClick(index)}
@@ -22,10 +26,16 @@ export const FaqAccordion = ({ items }: { items: FAQItemProps[] }) => {
               <span className="text-gray-400 font-bold text-lg">
                 {String(index + 1).padStart(2, "0")}
               </span>
-              <h3 className="text-black font-semibold">{item.question}</h3>
+              <h3 className="text-black text-lg font-semibold">
+                {item.question}
+              </h3>
             </div>
             <span className="text-gray-500">
-              {activeIndex === index ? <FaMinus /> : <FaPlus />}
+              {activeIndex === index ? (
+                <FaMinusCircle size={24} />
+              ) : (
+                <FaPlusCircle size={24} />
+              )}
             </span>
           </div>
           {activeIndex === index && (