#135-Implement "Frequently asked questions" block (#34)

* feat[faq]: implement accordion component and update modal styles in StudentHome

* feat[faq]: refactor Faq component and styles

* feat[faq]: update styles for title and description in Faq component

Author: lyubomyrb

src/containers/student-home-page/faq/Faq.styles.ts

@@ -1,19 +1,17 @@
 export const styles = {
   container: {
-    flexDirection: 'column',
-    mb: 0,
-    pb: 10
+    flexDirection: 'column'
   },
   titleWithDescription: {
     wrapper: {
       textAlign: 'center',
-      mb: '32px'
+      mb: { xs: '16px', sm: '32px' }
     },
     title: {
-      typography: { xs: 'h4' }
+      typography: { xs: 'h5', sm: 'h4' }
     },
     description: {
-      typography: { xs: 'subtitle1' }
+      typography: { xs: 'body2', sm: 'body1' }
     }
   }
 }

src/containers/student-home-page/faq/Faq.tsx

@@ -1,14 +1,24 @@
 import { useTranslation } from 'react-i18next'
 
 import Box from '@mui/material/Box'
+import ExpandMoreRoundedIcon from '@mui/icons-material/ExpandMoreRounded'
 
 import TitleWithDescription from '~/components/title-with-description/TitleWithDescription'
 import { studentRoutes } from '~/router/constants/studentRoutes'
 
 import { styles } from '~/containers/student-home-page/faq/Faq.styles'
+import Accordions from '~/components/accordion/Accordions'
+import { useState } from 'react'
+import { accordionItems } from './accordionItems'
+import { TypographyVariantEnum } from '~/types'
 
 const Faq = () => {
   const { t } = useTranslation()
+  const [activeItemId, setActiveItemId] = useState<number | null>(null)
+
+  const handleAccordionChange = (index: number) => {
+    setActiveItemId(index === activeItemId ? null : index)
+  }
 
   return (
     <Box
@@ -21,6 +31,14 @@ const Faq = () => {
         style={styles.titleWithDescription}
         title={t('studentHomePage.faq.title')}
       />
+      <Accordions
+        activeIndex={activeItemId}
+        descriptionVariant={TypographyVariantEnum.Body2}
+        icon={<ExpandMoreRoundedIcon />}
+        items={accordionItems}
+        onChange={handleAccordionChange}
+        titleVariant={TypographyVariantEnum.H6}
+      />
     </Box>
   )
 }

src/pages/student-home/StudentHome.styles.ts

@@ -0,0 +1,12 @@
+export const styles = {
+  modal: {
+    maxHeight: { sm: '652px' },
+    height: '100%',
+    maxWidth: '1130px',
+    width: '100%'
+  },
+  pageWrapper: {
+    flex: 1,
+    gap: '80px'
+  }
+}

src/pages/student-home/StudentHome.tsx

@@ -1,12 +1,14 @@
 import { useEffect } from 'react'
-import Container from '@mui/material/Container'
 
 import { useAppSelector } from '~/hooks/use-redux'
 import { useModalContext } from '~/context/modal-context'
+
 import UserStepsWrapper from '~/components/user-steps-wrapper/UserStepsWrapper'
+import PageWrapper from '~/components/page-wrapper/PageWrapper'
 import FindBlock from '~/components/find-block/FindBlock'
 import Faq from '~/containers/student-home-page/faq/Faq'
 
+import { styles } from './StudentHome.styles'
 import { translationKey } from '~/components/find-block/find-tutor-constants'
 
 const StudentHome = () => {
@@ -18,23 +20,18 @@ const StudentHome = () => {
       openModal({
         component: <UserStepsWrapper userRole={userRole} />,
         paperProps: {
-          sx: {
-            maxHeight: { sm: '652px' },
-            height: '100%',
-            maxWidth: '1130px',
-            width: '100%'
-          }
+          sx: styles.modal
         },
         requireConfirmOnClose: true
       })
     }
   }, [openModal, isFirstLogin, userRole])
 
   return (
-    <Container data-testid='studentHome' sx={{ flex: 1 }}>
+    <PageWrapper data-testid='studentHome' sx={styles.pageWrapper}>
       <FindBlock translationKey={translationKey} />
       <Faq />
-    </Container>
+    </PageWrapper>
   )
 }