rubix/src/components/LearnPage/WhyRubix.jsx

import { Box, Container, Image, Text } from "@chakra-ui/react";
import {
  Accordion,
  AccordionItem,
  AccordionButton,
  AccordionPanel,
  AccordionIcon,
} from "@chakra-ui/react";
import bg from "../../assets/images/whyRubix.png";
import cube from "../../assets/images/cube.png";

const accordion = [
  {
    id: 1,
    title: `Unlimited concurrent transactions`,
    content: `The Rubix network supports millions of concurrent transactions
    by eliminating the need to queue transactions for the
    blockchain.`,
  },
  {
    id: 2,
    title: `Scalability`,
    content: `The Rubix network supports millions of concurrent transactions
    by eliminating the need to queue transactions for the
    blockchain.`,
  },
  {
    id: 3,
    title: `Truly decentralised, secure and private`,
    content: `The Rubix network supports millions of concurrent transactions
    by eliminating the need to queue transactions for the
    blockchain.`,
  },
  {
    id: 4,
    title: `ROI friendly`,
    content: `The Rubix network supports millions of concurrent transactions
    by eliminating the need to queue transactions for the
    blockchain.`,
  },
];

const WhyRubix = () => {
  return (
    <Box
      backgroundImage={`url(${bg})`}
      backgroundRepeat={"no-repeat"}
      backgroundSize={"cover"}
    >
      <Container maxW={"container.xl"} padding={"0 5rem"}>
        <Text
          as={"h2"}
          paddingTop={"3rem"}
          paddingBottom={"2rem"}
          fontWeight={700}
          fontSize={"40px"}
          textAlign={"left"}
          textTransform={"capitalize"}
          color={"#fff"}
          sx={{
            "@media (max-width: 435px)": {
              fontSize: "35px",
            },
            "@media (max-width: 375px)": {
              fontSize: "28px",
            },
          }}
        >
          Why developers choose Rubix
        </Text>
        <Box
          display={"flex"}
          alignItems={"flex-start"}
          justifyContent={"space-between"}
          gap={"2rem"}
        >
          <Box width={"70%"}>
            <Accordion allowToggle defaultIndex={[0]}>
              {accordion.map((accord) => (
                <>
                  <AccordionItem
                    borderTop={"none"}
                    borderBottom={"1px solid white"}
                    marginBottom={"1rem"}
                    padding={"1rem 0"}
                    key={accord.id}
                  >
                    <h2>
                      <AccordionButton outline={"none"} paddingLeft={"0px"}>
                        <Box
                          as="span"
                          flex="1"
                          textAlign="left"
                          fontFamily={"Mona Sans"}
                          fontWeight={"500"}
                          fontSize={"30px"}
                          color={"#fff"}
                        >
                          {accord.title}
                        </Box>
                        <AccordionIcon color={"#fff"} fontSize={"40px"} />
                      </AccordionButton>
                    </h2>
                    <AccordionPanel
                      pb={4}
                      fontFamily={"Poppins"}
                      fontWeight={"400"}
                      color={"#E8E8E8"}
                      width={"80%"}
                      fontSize={"21px"}
                      paddingLeft={"0px"}
                    >
                      {accord.content}
                    </AccordionPanel>
                  </AccordionItem>
                </>
              ))}
            </Accordion>
          </Box>
          <Box>
            <Image src={cube} width={"550px"} />
          </Box>
        </Box>
      </Container>
    </Box>
  );
};

export default WhyRubix;