From 59f8464468028a0fa40c13e6d80b2c063b7f0db8 Mon Sep 17 00:00:00 2001
From: jzchenn <jackyc.pata@gmail.com>
Date: Thu, 30 Apr 2026 13:36:51 +1200
Subject: [PATCH 1/4] routed FAQ page

---
 client/src/main.tsx      | 2 ++
 client/src/pages/FAQ.tsx | 7 +++++++
 2 files changed, 9 insertions(+)
 create mode 100644 client/src/pages/FAQ.tsx

diff --git a/client/src/main.tsx b/client/src/main.tsx
index 87ebf0c..936aac4 100644
--- a/client/src/main.tsx
+++ b/client/src/main.tsx
@@ -10,6 +10,7 @@ import ProjectTeam from './pages/Project-Team'
 import Events from './pages/Events'
 import SignUp from './pages/SignUp'
 import Gallery from './pages/Gallery'
+import FAQ from './pages/FAQ'
 
 {/* project team imports */}
 import Pruna from "./pages/project-team/Pruna";
@@ -29,6 +30,7 @@ const router = createBrowserRouter([
       { path: 'project-team',    element: <ProjectTeam /> },
       { path: 'sign-up',         element: <SignUp />},
       { path: 'gallery',         element: <Gallery />},
+      { path: 'faq',             element: <FAQ /> },
       
       { path: 'alanna',          element: <Alanna /> },
       { path: 'tadiwa', element: <Tadiwa />},
diff --git a/client/src/pages/FAQ.tsx b/client/src/pages/FAQ.tsx
new file mode 100644
index 0000000..812856a
--- /dev/null
+++ b/client/src/pages/FAQ.tsx
@@ -0,0 +1,7 @@
+export default function FAQ(){
+    return(
+        <>
+        <span>Frequently Asked Questions</span>
+        </>
+    )
+}
\ No newline at end of file

From d3e6941fd03683acc474b7489ec003d26f183590 Mon Sep 17 00:00:00 2001
From: jzchenn <jackyc.pata@gmail.com>
Date: Thu, 30 Apr 2026 14:06:42 +1200
Subject: [PATCH 2/4] add FAQItem component

---
 client/src/components/FAQItem.tsx            | 18 +++++++++++++++
 client/src/main.tsx                          |  2 +-
 client/src/pages/FAQ.tsx                     |  7 ------
 client/src/pages/Frequent-Asked-Question.tsx | 24 ++++++++++++++++++++
 4 files changed, 43 insertions(+), 8 deletions(-)
 create mode 100644 client/src/components/FAQItem.tsx
 delete mode 100644 client/src/pages/FAQ.tsx
 create mode 100644 client/src/pages/Frequent-Asked-Question.tsx

diff --git a/client/src/components/FAQItem.tsx b/client/src/components/FAQItem.tsx
new file mode 100644
index 0000000..f8efec0
--- /dev/null
+++ b/client/src/components/FAQItem.tsx
@@ -0,0 +1,18 @@
+type FAQItem = {
+    question: string;
+    answer: string;
+};
+
+type Props = {
+    stats: FAQItem;
+}
+
+export default function FAQItem({ stats }: Props) { 
+
+    return(
+        <div>
+            <h2 className="text-3xl font-bold mb-8">{stats.question}</h2>
+            <p className="text-lg mb-4">{stats.answer}</p>
+        </div>
+    );
+}
diff --git a/client/src/main.tsx b/client/src/main.tsx
index 936aac4..e6a0d7e 100644
--- a/client/src/main.tsx
+++ b/client/src/main.tsx
@@ -10,7 +10,7 @@ import ProjectTeam from './pages/Project-Team'
 import Events from './pages/Events'
 import SignUp from './pages/SignUp'
 import Gallery from './pages/Gallery'
-import FAQ from './pages/FAQ'
+import FAQ from './pages/Frequent-Asked-Question'
 
 {/* project team imports */}
 import Pruna from "./pages/project-team/Pruna";
diff --git a/client/src/pages/FAQ.tsx b/client/src/pages/FAQ.tsx
deleted file mode 100644
index 812856a..0000000
--- a/client/src/pages/FAQ.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export default function FAQ(){
-    return(
-        <>
-        <span>Frequently Asked Questions</span>
-        </>
-    )
-}
\ No newline at end of file
diff --git a/client/src/pages/Frequent-Asked-Question.tsx b/client/src/pages/Frequent-Asked-Question.tsx
new file mode 100644
index 0000000..6045e57
--- /dev/null
+++ b/client/src/pages/Frequent-Asked-Question.tsx
@@ -0,0 +1,24 @@
+import FAQItem from "../components/FAQItem";
+
+
+export default function FrequentAskedQuestions(){
+    return(
+        <>
+        <h1 className="text-3xl font-bold mb-8">Frequently Asked Questions</h1>
+
+        <div>
+            <FAQItem
+                stats = {{
+                    question: "Does it cost to join UMSA?",
+                    answer: "The price to join UMSA is $8 - for both new and returning members.",
+                }}/>
+            <FAQItem
+                stats = {{
+                    question: "How do I become a member of UMSA?",
+                    answer: "Shoot an e-mail to our helpful communication officers at comm.umsanz@gmail.com and we will be more the merrier to help you get things sorted out. You can also sign up online! Simply click on this link, and follow the step-by-step guide, and you're good to go! During the first week of every new semester, catch our booth at the University of Auckland's club expo.",
+                }}/>
+                
+        </div>
+        </>
+    )
+}
\ No newline at end of file

From e44ea475423cbd09444c34899f2db24e7dc7bfd1 Mon Sep 17 00:00:00 2001
From: jzchenn <jackyc.pata@gmail.com>
Date: Thu, 30 Apr 2026 14:28:38 +1200
Subject: [PATCH 3/4] style: reformat layout to use columns

---
 client/src/components/FAQItem.tsx            |  4 ++--
 client/src/pages/Frequent-Asked-Question.tsx | 24 +++++++++++++++++++-
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/client/src/components/FAQItem.tsx b/client/src/components/FAQItem.tsx
index f8efec0..65d24b6 100644
--- a/client/src/components/FAQItem.tsx
+++ b/client/src/components/FAQItem.tsx
@@ -10,8 +10,8 @@ type Props = {
 export default function FAQItem({ stats }: Props) { 
 
     return(
-        <div>
-            <h2 className="text-3xl font-bold mb-8">{stats.question}</h2>
+        <div className="mb-8">
+            <h2 className="text-xl font-bold mb-2">{stats.question}</h2>
             <p className="text-lg mb-4">{stats.answer}</p>
         </div>
     );
diff --git a/client/src/pages/Frequent-Asked-Question.tsx b/client/src/pages/Frequent-Asked-Question.tsx
index 6045e57..b9df41f 100644
--- a/client/src/pages/Frequent-Asked-Question.tsx
+++ b/client/src/pages/Frequent-Asked-Question.tsx
@@ -6,7 +6,7 @@ export default function FrequentAskedQuestions(){
         <>
         <h1 className="text-3xl font-bold mb-8">Frequently Asked Questions</h1>
 
-        <div>
+        <div className="columns-1 md:columns-2 gap-8">
             <FAQItem
                 stats = {{
                     question: "Does it cost to join UMSA?",
@@ -17,6 +17,28 @@ export default function FrequentAskedQuestions(){
                     question: "How do I become a member of UMSA?",
                     answer: "Shoot an e-mail to our helpful communication officers at comm.umsanz@gmail.com and we will be more the merrier to help you get things sorted out. You can also sign up online! Simply click on this link, and follow the step-by-step guide, and you're good to go! During the first week of every new semester, catch our booth at the University of Auckland's club expo.",
                 }}/>
+            <FAQItem
+                stats = {{
+                    question: "I'm not Malaysian, can I still join?",
+                    answer: "The more the merrier! You do not have to be a Malaysian to join the UMSA family. We happily welcome people from all cultures and backgrounds.",
+                }}/>
+            <FAQItem
+                stats = {{
+                    question: "I'm not Malaysian, can I still join?",
+                    answer: "The more the merrier! You do not have to be a Malaysian to join the UMSA family. We happily welcome people from all cultures and backgrounds.",
+                }}/>
+            <FAQItem
+                stats = {{
+                    question: "I'm not a UOA student, can I still join?",
+                    answer: "Absolutely! In fact, invite any other friends outside of the University of Auckland to join the family as well!",
+                }}/>
+            <FAQItem
+            stats = {{
+                question: "How do I find out or keep myself updated on UMSA's events?",
+                answer: "Make sure to follow our social media platforms! Keep yourself updated by checking UMSA's website, Facebook and Instagram constantly. We will be updating you with up-coming events, opportunities and what is going on with the community."
+            }}
+            />
+            
                 
         </div>
         </>

From 4b4f70b91447698f5426db67e54e46e4435936df Mon Sep 17 00:00:00 2001
From: jzchenn <jackyc.pata@gmail.com>
Date: Thu, 30 Apr 2026 14:34:27 +1200
Subject: [PATCH 4/4] feat: added FAQ page to navbar

---
 client/src/components/Navbar.tsx             | 1 +
 client/src/pages/Frequent-Asked-Question.tsx | 6 ++++++
 2 files changed, 7 insertions(+)

diff --git a/client/src/components/Navbar.tsx b/client/src/components/Navbar.tsx
index 1b36b22..eabcb47 100644
--- a/client/src/components/Navbar.tsx
+++ b/client/src/components/Navbar.tsx
@@ -16,6 +16,7 @@ export default function Navbar() {
           <NavLink to="/events" className={linkClass}>events</NavLink>
           <NavLink to="/sign-up" className={linkClass}>Sign Up</NavLink>
           <NavLink to="/gallery" className={linkClass}>Gallery</NavLink>
+          <NavLink to="/FAQ" className={linkClass}>FAQ</NavLink>
         </div>
       </div>
     </nav>
diff --git a/client/src/pages/Frequent-Asked-Question.tsx b/client/src/pages/Frequent-Asked-Question.tsx
index b9df41f..d7e7b16 100644
--- a/client/src/pages/Frequent-Asked-Question.tsx
+++ b/client/src/pages/Frequent-Asked-Question.tsx
@@ -1,8 +1,14 @@
 import FAQItem from "../components/FAQItem";
+import { useEffect } from "react";
 
 
 export default function FrequentAskedQuestions(){
+    useEffect(() => {
+            document.title = "FAQ | UMSA";
+            }, []);
+
     return(
+        
         <>
         <h1 className="text-3xl font-bold mb-8">Frequently Asked Questions</h1>