rubix/src/components/Community/Place.jsx

/* eslint-disable no-unused-vars */
import { Box, Container, Text, Image, Button } from "@chakra-ui/react";
import Partner from "../../assets/images/partner.png";
import PlaceCard from "../Card/PlaceCard";
import Enterprise from "../../assets/images/enterprise.png";
import Banner from "../../assets/images/place-banner.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 Content = {
  heading: `Find your place at the table`,
};

const Place = () => {
  return (
    <Box
      // height={"100vh"}
      background={"#000"}
      paddingTop={"4rem"}
      paddingBottom={"4rem"}
      backgroundSize={"cover"}
      backgroundRepeat={"no-repeat"}
      backgroundImage={`url(${Banner})`}
      sx={{
        "@media (max-width: 500px)": {
          backgroundImage: "inherit",
        },
      }}
    >
      <Box
        paddingLeft={"7rem"}
        // height={"50vh"}
        sx={{
          "@media (max-width: 500px)": {
            paddingLeft: "1rem",
          },
        }}
      >
        <Text
          as={"h2"}
          paddingBottom={"3rem"}
          fontWeight={700}
          fontSize={"38px"}
          textTransform={"capitalize"}
          color={"#fff"}
          sx={{
            "@media (max-width: 500px)": {
              fontSize: "22px",
              fontWeight: "400",
            },
          }}
        >
          {Content.heading}
        </Text>
        <Container
          maxW="1440px"
          display={"flex"}
          alignItems={"center"}
          gap={"25px"}
          overflowX={"auto"}
          sx={{
            "&::-webkit-scrollbar": {
              width: "0px",
            },
          }}
        >
          {content.map((item) => (
            <PlaceCard
              key={item.id}
              cardicon={item.cardicon}
              title={item.title}
              date={item.date}
              text={item.text}
              button={item.button}
              link={item.link}
            />
          ))}
        </Container>
      </Box>
    </Box>
  );
};

export default Place;