rubix/src/components/LearnPage/GetStarted.jsx

import { Box, Container, Image, Text } from "@chakra-ui/react";
import { Tabs, TabList, TabPanels, Tab, TabPanel } from "@chakra-ui/react";
import getStarted from "../../assets/images/getStarted.png";
import getStarted1 from "../../assets/images/getStarted.png";
import getStarted2 from "../../assets/images/getStarted.png";
import getStarted3 from "../../assets/images/getStarted.png";

const GetStarted = () => {
  return (
    <Box backgroundColor={"#000"}>
      <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",
            },
          }}
        >
          Get Started With Rubix
        </Text>
        <Text
          fontFamily={"Poppins"}
          fontWeight={"400"}
          fontSize={"20px"}
          width={"70%"}
          color={"#CFCFCF"}
        >
          Rubix allows developers to build on a fast, secure, and scalable chain
          that has a unique approach to data sharing, objects.
        </Text>

        <Box padding={"4rem 0"}>
          <Tabs
            defaultIndex={1}
            display={"flex"}
            flexDirection={"row-reverse"}
            justifyContent={"space-between"}
            width={"100%"}
          >
            <TabPanels display={"flex"} justifyContent={"center"}>
              <TabPanel>
                <Image
                  boxSize="200px"
                  fit="cover"
                  src="https://images5.alphacoders.com/810/thumbbig-810547.webp"
                />
              </TabPanel>
              <TabPanel>
                <Image fit="cover" src={getStarted} />
              </TabPanel>
              <TabPanel>
                <Image
                  boxSize="200px"
                  fit="cover"
                  src="https://images5.alphacoders.com/810/thumbbig-810547.webp"
                />
              </TabPanel>
              <TabPanel>
                <Image fit="cover" src={getStarted} />
              </TabPanel>
            </TabPanels>
            <TabList flexDirection={"column"} width={"100%"} border={"none"}>
              <Tab color="#fff" justifyContent={"left"}>
                - Start by reading our whitepaper
              </Tab>
              <Tab color="#fff" justifyContent={"left"}>
                - Start by reading our whitepaper
              </Tab>
              <Tab color="#fff" justifyContent={"left"}>
                - Start by reading our whitepaper
              </Tab>
              <Tab color="#fff" justifyContent={"left"}>
                - Start by reading our whitepaper
              </Tab>
            </TabList>
          </Tabs>
        </Box>
      </Container>
    </Box>
  );
};

export default GetStarted;