rubix/src/components/LearnPage/Faq.jsx

import banner from "../../assets/images/faqBg.png";
import {
  Accordion,
  AccordionButton,
  //   AccordionIcon,
  AccordionItem,
  AccordionPanel,
  Box,
  Container,
  Text,
} from "@chakra-ui/react";
import { AddIcon, MinusIcon } from "@chakra-ui/icons";

const accordion = [
  {
    id: 1,
    title: `What is blockchain?`,
    content: `Blockchain technology is an advanced database mechanism that allows transparent information sharing within a business network. 
    A blockchain database stories data in blocks that are linked together in a chain. The data is chronologically consistent because you cannot delete or modify the chain without consensus from the network. 
    As a result, you can use blockchain technology to create an immutable ledger, ensuring data security.\n\n
    
    Blockchain technology is one of the most innovative and disruptive developments in the digital world.\n\n
     It has the potential to transform various sectors and industries – from finance to healthcare to energy to agriculture and beyond. 
     The main benefits of blockchain technology `,
  },
  {
    id: 2,
    title: `What is Proof-Of-Pledge?`,
    content: `Blockchain technology is one of the most innovative and disruptive developments in the digital world.\n\n
     It has the potential to transform various sectors and industries – from finance to healthcare to energy to agriculture and beyond. 
     The main benefits of blockchain technology`,
  },
  {
    id: 3,
    title: `What are RBT Tokens?`,
    content: `Blockchain technology is one of the most innovative and disruptive developments in the digital world.\n\n
     It has the potential to transform various sectors and industries – from finance to healthcare to energy to agriculture and beyond. 
     The main benefits of blockchain technology`,
  },
  {
    id: 4,
    title: `What are Nodes?`,
    content: `Blockchain technology is one of the most innovative and disruptive developments in the digital world.\n\n
     It has the potential to transform various sectors and industries – from finance to healthcare to energy to agriculture and beyond. 
     The main benefits of blockchain technology`,
  },
];

export const Faq = () => {
  return (
    <Box
      backgroundImage={`url(${banner})`}
      backgroundSize={"cover"}
      backgroundRepeat={"no-repeat"}
    >
      <Container
        maxW={"container.xl"}
        padding={"5rem 4rem"}
        sx={{
          "@media (max-width: 435px)": {
            padding: "2rem",
          },
        }}
      >
        <Text
          as={"h2"}
          // paddingTop={"3rem"}
          paddingBottom={"2rem"}
          fontWeight={700}
          fontSize={"40px"}
          textAlign={"center"}
          textTransform={"capitalize"}
          color={"#fff"}
          sx={{
            "@media (max-width: 435px)": {
              fontSize: "35px",
            },
            "@media (max-width: 375px)": {
              fontSize: "28px",
            },
          }}
        >
          Frequently Asked Questions
        </Text>

        <Box>
          <Accordion allowToggle defaultIndex={[0]}>
            {accordion.map((accord) => (
              <>
                <AccordionItem
                  key={accord.id}
                  borderTop={"none"}
                  borderBottom={"none"}
                  marginBottom={"1rem"}
                  padding={"1.5rem"}
                  borderRadius={"10px"}
                  background={"#161616"}
                >
                  {({ isExpanded }) => (
                    <>
                      <h2>
                        <AccordionButton outline={"none"} paddingLeft={"0px"}>
                          <Box
                            as="span"
                            flex="1"
                            textAlign="left"
                            fontFamily={"Mona Sans"}
                            fontWeight={"500"}
                            fontSize={"30px"}
                            color={"#fff"}
                            sx={{
                              "@media (max-width: 1024px)": {},
                              "@media (max-width: 435px)": {
                                fontSize: "18px",
                              },
                            }}
                          >
                            {accord.title}
                          </Box>
                          {isExpanded ? (
                            <MinusIcon color={"#fff"} fontSize={"20px"} />
                          ) : (
                            <AddIcon color={"#fff"} fontSize={"20px"} />
                          )}
                        </AccordionButton>
                      </h2>
                      <AccordionPanel
                        pb={4}
                        fontFamily={"Poppins"}
                        fontWeight={"300"}
                        color={"#BDBDBD"}
                        width={"100%"}
                        fontSize={"21px"}
                        paddingLeft={"0px"}
                        sx={{
                          "@media (max-width: 1024px)": {},
                          "@media (max-width: 435px)": {
                            fontSize: "18px",
                          },
                          "@media (max-width: 375px)": {
                            fontSize: "16px",
                          },
                        }}
                      >
                        {accord.content}
                      </AccordionPanel>
                    </>
                  )}
                </AccordionItem>
              </>
            ))}
          </Accordion>
        </Box>
      </Container>
    </Box>
  );
};