feat: add bg to FAQ section

safe-global · Nov 9, 2023 · c4320d6 · c4320d6
1 parent 75c3160
commit c4320d6
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 34 deletions.
diff --git a/public/images/Campaigns/faq-bg.png b/public/images/Campaigns/faq-bg.png
diff --git a/src/components/Campaign/Faq/index.tsx b/src/components/Campaign/Faq/index.tsx
@@ -14,6 +14,8 @@ import type { TypeFaqSkeleton } from '@/contentful/types'
 import type { Entry } from 'contentful'
 import layoutCss from '@/components/common/styles.module.css'
 import css from './styles.module.css'
+import BackgroundImage from '@/public/images/Campaigns/faq-bg.png'
+import Image from 'next/image'
 
 type FaqEntry = Entry<TypeFaqSkeleton, undefined, string>
 
@@ -24,42 +26,52 @@ const Faq = (props: FaqEntry) => {
   if (!Array.isArray(faqData)) return null
 
   return (
-    <Container className={layoutCss.containerMedium}>
-      <Grid container position="relative">
-        <div className={css.spot} />
-        <Grid item md={1} />
-        <Grid item md={4}>
-          <Typography variant="h1">{props.fields.title}</Typography>
-        </Grid>
-        <Grid item md={7}>
-          {faqData.map((item, index) => {
-            const handleChange: AccordionProps['onChange'] = (_, expanded) => {
-              setOpenMap((prev) => ({
-                ...prev,
-                [index]: expanded,
-              }))
-            }
+    <>
+      <Image className={css.bg} src={BackgroundImage} alt="blocks background" />
+      <Container className={layoutCss.containerMedium}>
+        <Grid container className={css.gridContainer}>
+          <div className={css.spot} />
+          <Grid item md={1} />
+
+          <Grid item md={2} width="100%">
+            <Typography variant="h1" className={css.title}>
+              {props.fields.title}
+            </Typography>
+          </Grid>
+
+          <Grid item md={2} />
+
+          <Grid item md={7}>
+            {faqData.map((item, index) => {
+              const handleChange: AccordionProps['onChange'] = (_, expanded) => {
+                setOpenMap((prev) => ({
+                  ...prev,
+                  [index]: expanded,
+                }))
+              }
 
-            return (
-              <Accordion
-                className={css.accordion}
-                expanded={openMap?.[index] ?? false}
-                onChange={handleChange}
-                key={item.question}
-                disableGutters
-              >
-                <AccordionSummary expandIcon={openMap?.[index] ? <MinusIcon /> : <PlusIcon />}>
-                  <Typography variant="h4">{item.question}</Typography>
-                </AccordionSummary>
-                <AccordionDetails>
-                  <Typography>{item.answer}</Typography>
-                </AccordionDetails>
-              </Accordion>
-            )
-          })}
+              return (
+                <Accordion
+                  className={css.accordion}
+                  expanded={openMap?.[index] ?? false}
+                  onChange={handleChange}
+                  key={item.question}
+                  disableGutters
+                  square
+                >
+                  <AccordionSummary expandIcon={openMap?.[index] ? <MinusIcon /> : <PlusIcon />}>
+                    <Typography variant="h4">{item.question}</Typography>
+                  </AccordionSummary>
+                  <AccordionDetails>
+                    <Typography>{item.answer}</Typography>
+                  </AccordionDetails>
+                </Accordion>
+              )
+            })}
+          </Grid>
         </Grid>
-      </Grid>
-    </Container>
+      </Container>
+    </>
   )
 }
 

diff --git a/src/components/Campaign/Faq/styles.module.css b/src/components/Campaign/Faq/styles.module.css
@@ -1,3 +1,11 @@
+.bg {
+  margin-bottom: -225px;
+}
+
+.gridContainer {
+  position: relative;
+}
+
 .spot {
   position: absolute;
   left: -300px;
@@ -9,6 +17,10 @@
   filter: blur(50px);
 }
 
+.title {
+  text-align: center;
+}
+
 .accordion {
   background-color: unset;
   box-shadow: none;
@@ -30,3 +42,11 @@
 .accordion :global .MuiAccordionDetails-root {
   padding: 0 0 32px;
 }
+
+@media (min-width: 900px) {
+  .bg {
+    position: absolute;
+    left: 0px;
+    width: 66%;
+  }
+}