From ba215567c12b1c5a4ec9f66fee7db3657be70349 Mon Sep 17 00:00:00 2001
From: dreifusjack <dreifus.j@northeastern.edu>
Date: Fri, 27 Sep 2024 16:53:31 -0400
Subject: [PATCH 1/2] #2714 mapped faqs with new dropdown component

---
 .../pages/HomePage/components/Dropdown.tsx    | 32 +++++++++++++++++++
 .../pages/HomePage/components/FAQsSection.tsx | 21 ++++++++++--
 2 files changed, 50 insertions(+), 3 deletions(-)
 create mode 100644 src/frontend/src/pages/HomePage/components/Dropdown.tsx

diff --git a/src/frontend/src/pages/HomePage/components/Dropdown.tsx b/src/frontend/src/pages/HomePage/components/Dropdown.tsx
new file mode 100644
index 0000000000..3c1e52cd3b
--- /dev/null
+++ b/src/frontend/src/pages/HomePage/components/Dropdown.tsx
@@ -0,0 +1,32 @@
+import { Box, Accordion, AccordionSummary, Typography, AccordionDetails } from '@mui/material';
+
+import { KeyboardArrowDown } from '@mui/icons-material';
+
+interface DropdownProps {
+  title: string;
+  description: string;
+}
+
+const Dropdown = ({ title, description }: DropdownProps) => {
+  return (
+    <Box marginBottom={2}>
+      <Accordion
+        sx={{
+          backgroundColor: '#ef4244'
+        }}
+      >
+        <AccordionSummary
+          expandIcon={<KeyboardArrowDown />}
+          sx={{ flexDirection: 'row-reverse', borderBottomLeftRadius: '100px', borderBottomRightRadius: '100px' }}
+        >
+          <Typography sx={{ color: 'white', fontWeight: 'bold', fontSize: 20 }}>{title}</Typography>
+        </AccordionSummary>
+        <AccordionDetails sx={{ backgroundColor: 'white', borderBottomLeftRadius: '4px', borderBottomRightRadius: '4px' }}>
+          <Typography sx={{ color: 'black' }}>{description}</Typography>
+        </AccordionDetails>
+      </Accordion>
+    </Box>
+  );
+};
+
+export default Dropdown;
diff --git a/src/frontend/src/pages/HomePage/components/FAQsSection.tsx b/src/frontend/src/pages/HomePage/components/FAQsSection.tsx
index 45b23c3dac..041d7059bd 100644
--- a/src/frontend/src/pages/HomePage/components/FAQsSection.tsx
+++ b/src/frontend/src/pages/HomePage/components/FAQsSection.tsx
@@ -1,8 +1,23 @@
-import { Typography } from '@mui/material';
+import { Box } from '@mui/system';
+import LoadingIndicator from '../../../components/LoadingIndicator';
+import { useAllFaqs } from '../../../hooks/recruitment.hooks';
+import ErrorPage from '../../ErrorPage';
+import Dropdown from './Dropdown';
+import React from 'react';
 
 const FAQsSection = () => {
-  // TODO: Ticket #2714
-  return <Typography>FAQ section</Typography>;
+  const { isLoading, isError, error, data: faqs } = useAllFaqs();
+  if (isLoading || !faqs) return <LoadingIndicator />;
+
+  if (isError) return <ErrorPage message={error.message} />;
+
+  return (
+    <Box sx={{ width: '100%' }}>
+      {faqs.map((faq) => (
+        <Dropdown title={faq.question} description={faq.answer} />
+      ))}
+    </Box>
+  );
 };
 
 export default FAQsSection;

From b465e85e8e0e95b5059c35bbd5ce59b699b08a2f Mon Sep 17 00:00:00 2001
From: dreifusjack <dreifus.j@northeastern.edu>
Date: Sat, 28 Sep 2024 11:10:15 -0400
Subject: [PATCH 2/2] Icon change for dropdown

---
 .../src/pages/HomePage/components/Dropdown.tsx    | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/pages/HomePage/components/Dropdown.tsx b/src/frontend/src/pages/HomePage/components/Dropdown.tsx
index 3c1e52cd3b..a6bdf6f400 100644
--- a/src/frontend/src/pages/HomePage/components/Dropdown.tsx
+++ b/src/frontend/src/pages/HomePage/components/Dropdown.tsx
@@ -1,6 +1,7 @@
 import { Box, Accordion, AccordionSummary, Typography, AccordionDetails } from '@mui/material';
 
-import { KeyboardArrowDown } from '@mui/icons-material';
+import { ChevronRight } from '@mui/icons-material';
+import React, { useState } from 'react';
 
 interface DropdownProps {
   title: string;
@@ -8,17 +9,27 @@ interface DropdownProps {
 }
 
 const Dropdown = ({ title, description }: DropdownProps) => {
+  const [expanded, setExpanded] = useState(false);
+
   return (
     <Box marginBottom={2}>
       <Accordion
+        expanded={expanded}
+        onChange={() => setExpanded(!expanded)}
         sx={{
           backgroundColor: '#ef4244'
         }}
       >
         <AccordionSummary
-          expandIcon={<KeyboardArrowDown />}
           sx={{ flexDirection: 'row-reverse', borderBottomLeftRadius: '100px', borderBottomRightRadius: '100px' }}
         >
+          <ChevronRight
+            sx={{
+              transition: 'transform 0.3s ease',
+              transform: expanded ? 'rotate(90deg)' : 'rotate(0deg)',
+              fontSize: 30
+            }}
+          />
           <Typography sx={{ color: 'white', fontWeight: 'bold', fontSize: 20 }}>{title}</Typography>
         </AccordionSummary>
         <AccordionDetails sx={{ backgroundColor: 'white', borderBottomLeftRadius: '4px', borderBottomRightRadius: '4px' }}>