diff --git a/public/images/Campaigns/faq-bg.png b/public/images/Campaigns/faq-bg.png new file mode 100644 index 000000000..8f82263f4 Binary files /dev/null and b/public/images/Campaigns/faq-bg.png differ diff --git a/src/components/Campaign/Faq/index.tsx b/src/components/Campaign/Faq/index.tsx index 42720c1b4..3654e164e 100644 --- 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 @@ -24,42 +26,52 @@ const Faq = (props: FaqEntry) => { if (!Array.isArray(faqData)) return null return ( - - -
- - - {props.fields.title} - - - {faqData.map((item, index) => { - const handleChange: AccordionProps['onChange'] = (_, expanded) => { - setOpenMap((prev) => ({ - ...prev, - [index]: expanded, - })) - } + <> + blocks background + + +
+ + + + + {props.fields.title} + + + + + + + {faqData.map((item, index) => { + const handleChange: AccordionProps['onChange'] = (_, expanded) => { + setOpenMap((prev) => ({ + ...prev, + [index]: expanded, + })) + } - return ( - - : }> - {item.question} - - - {item.answer} - - - ) - })} + return ( + + : }> + {item.question} + + + {item.answer} + + + ) + })} + - - + + ) } diff --git a/src/components/Campaign/Faq/styles.module.css b/src/components/Campaign/Faq/styles.module.css index eec8dba72..61a9d8b5a 100644 --- 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%; + } +}