rubix/src/components/MobileComponent/MobilePlace.jsx

import { Swiper, SwiperSlide } from "swiper/react";
import { Box, Container, Text } from "@chakra-ui/react";
import "swiper/css";
import "swiper/css/pagination";
import { Navigation, Pagination, Autoplay } from "swiper/modules";
import Partner from "../../assets/images/partner.png";
import PlaceCard from "../Card/PlaceCard";
import Enterprise from "../../assets/images/enterprise.png";

const content = [
  {
    id: 1,
    title: "Partners",
    cardicon: Partner,
    text: `Our partners strengthen our foundation and the utility offered by the revolutionary L1 Rubix platform through the development and scaling of groundbreaking apps for ESG, media, real estate, construction, telecom, pharma, NFT, metaverse, DeFi, GameFi, cybersecurity, cloud, and more.`,
    button: "Explore our ecosystem",
    link: `/`,
  },
  {
    id: 2,
    title: "Enterprises",
    cardicon: Enterprise,
    text: `Rubix’s unique, lightweight subnet architecture and revolutionary Proof-of-Pledge protocol enables our partner DEVS to build secure, reliable, and efficient dApps that enable enterprises to realize their transformation goals.`,
    button: "See how it works",
    link: `/LearnPage`,
  },
  {
    id: 3,
    title: "Developers",
    cardicon: Enterprise,
    text: `Our developers bring the passion, knowledge, and technical resources needed to deliver next-generation Web3 and Web5 platforms and through innovative, scalable solutions.`,
    button: "Start Building",
    link: `/BuildPage`,
  },
  {
    id: 4,
    title: "Advisors",
    cardicon: Enterprise,
    text: `Our Advisors Share Our Passion For Making This Word A Better Place Through Web3. They Inspire Our Core Team To Change The Status Quo And Make The Impossible Possible.`,
    button: "Contact Us",
    link: `/Contact`,
  },
];

const MobilePlace = () => {
  return (
    <>
      <Box backgroundColor={"#000"}>
        <Container maxW={"container.xl"} padding={"4rem 1rem"}>
          <Text
            as={"h2"}
            paddingBottom={"35px"}
            fontWeight={400}
            fontSize={"22px"}
            textAlign={"center"}
            textTransform={"capitalize"}
            color={"#fff"}
          >
            Tools And Resources To Help You Succeed
          </Text>
          <Swiper
            spaceBetween={20}
            slidesPerView={1}
            style={{ paddingBottom: "3rem", position: "relative" }}
            pagination={true}
            modules={[Navigation, Pagination, Autoplay]}
            loop={true}
            autoplay={{
              delay: 2500,
              disableOnInteraction: false,
            }}
          >
            {content.map((item) => (
              <SwiperSlide
                // height={"100vh"}
                background={"#101015"}
                backgroundSize={"cover"}
                backgroundRepeat={"no-repeat"}
                key={item.id}
              >
                <PlaceCard
                  cardicon={item.cardicon}
                  title={item.title}
                  date={item.date}
                  text={item.text}
                  button={item.button}
                  link={item.link}
                />
              </SwiperSlide>
            ))}
          </Swiper>
        </Container>
      </Box>
    </>
  );
};

export default MobilePlace;