learnmore

src/App.jsx

@@ -8,6 +8,7 @@ import HomePage from "./pages/HomePage";
 import NavBar from "./components/NavBar/NavBar";
 import LearnPage from "./pages/LearnPage";
 import BuildPage from "./pages/BuildPage";
+import Community from "./pages/Community";
 
 const router = createBrowserRouter(
   createRoutesFromElements(
@@ -15,6 +16,7 @@ const router = createBrowserRouter(
       <Route index element={<HomePage />} />
       <Route path="LearnPage" element={<LearnPage />} />
       <Route path="BuildPage" element={<BuildPage />} />
+      <Route path="community" element={<Community />} />
     </Route>
   )
 );

src/components/Card/CommCard.jsx

@@ -0,0 +1,82 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable no-unused-vars */
+import { Text, SimpleGrid, Card, Image, Box, Flex } from "@chakra-ui/react";
+import map from "../../assets/images/map-pin.png";
+import linkedin from "../../assets/images/linkedin.png";
+import games from "../../assets/images/discot.png";
+
+const CommCard = ({ id, imageUrl, name, jobTitle, description, location }) => {
+  return (
+    <Box
+      // height={"100vh"}
+      background={"#101015"}
+      backgroundSize={"cover"}
+      backgroundRepeat={"no-repeat"}
+    >
+      <Text display={"flex"}>
+        <Text 
+         position="relative"
+         overflow="hidden"
+         _hover={{
+           "&::before": {
+             content: '""',
+             position: "absolute",
+             top: 0,
+             left: 0,
+             width: "100%",
+             height: "100%",
+             background: "linear-gradient(to bottom, #f8697a8c  0%, #8d54f86e  86%)", 
+             borderRadius:"5px"
+           }
+         }}
+        >
+            <Image src={imageUrl} />
+        </Text>
+        <Text
+          position={"relative"}
+          marginLeft={"10px"}
+          _before={{
+            content: "''",
+            position: "absolute",
+            bottom: 0,
+            left: "20px",
+            height: "67%",
+            width: "100%",
+            borderLeft: "1px solid #ffffff70",
+          }}
+        >
+          <img
+            src={linkedin}
+            style={{ minWidth: "42px", height: "42px", marginBottom: "10px" }}
+          />
+          <img src={games} style={{ minWidth: "42px", height: "42px" }} />
+        </Text>
+      </Text>
+      <Text
+        color={"#fff"}
+        fontSize={"16px"}
+        marginTop={"12px"}
+        maxWidth={"460px"}
+        display={"flex"}
+      >
+        <img src={map} style={{ marginRight: "10px" }} /> {location}
+      </Text>
+      <Text
+        color={"#fff"}
+        fontSize={"20px"}
+        marginTop={"5px"}
+        maxWidth={"460px"}
+      >
+        {name}
+      </Text>
+      <Text fontSize={"16px"} color={"#DEDEDE"} margin={"8px 0px"}>
+        {jobTitle}
+      </Text>
+      <Text fontSize={"14px"} color={"#DEDEDE"} margin={"10px 0px"}>
+        {description}
+      </Text>
+    </Box>
+  );
+};
+
+export default CommCard;

src/components/Card/ConnectCard.jsx

@@ -0,0 +1,92 @@
+import React from "react";
+import { Box, SimpleGrid, Text } from "@chakra-ui/react";
+
+const ConnectCard = ({
+  title,
+  imageOne,
+  imageTwo,
+  textOne,
+  textTwo,
+  imageThree,
+  textThree,
+}) => {
+    
+  return (
+    <div>
+      <Box
+        // height={"100vh"}
+        background={"#000"}
+        backgroundSize={"cover"}
+        backgroundRepeat={"no-repeat"}
+        textAlign={"center"}
+        height={"280px"}
+        display={"flex"}
+        justifyContent={"center"}
+        flexDirection={"column"}
+        borderRadius={"5px"}
+        border={"1px solid #454545"}
+        _hover={{
+            border:'1px solid #fff'
+          }}
+      >
+        <Text
+          color={"#fff"}
+          fontSize={"22px"}
+          fontFamily={"Poppins"}
+          marginBottom={"25px"}
+          fontWeight={"300"}
+        >
+          {title}
+        </Text>
+        <Text display={"flex"} justifyContent={"space-around"} width={"80%"} margin={"0 auto"}>
+          <Text
+            display={"flex"}
+            flexDirection={"column"}
+            justifyContent={"center"}
+            alignItems={"center"}
+          >
+            <img
+              src={imageOne}
+              style={{ width: "60px", marginBottom: "10px" }}
+            />
+            <Text color={"#fff"} fontSize={"16px"}>
+              {textOne}
+            </Text>
+          </Text>
+          <Text
+            display={"flex"}
+            flexDirection={"column"}
+            justifyContent={"center"}
+            alignItems={"center"}
+          >
+            <img
+              src={imageTwo}
+              style={{ width: "60px", marginBottom: "10px" }}
+            />
+            <Text color={"#fff"} fontSize={"16px"}>
+              {textTwo}
+            </Text>
+          </Text>
+          {imageThree && (
+            <Text
+              display={"flex"}
+              flexDirection={"column"}
+              justifyContent={"center"}
+              alignItems={"center"}
+            >
+              <img
+                src={imageThree}
+                style={{ width: "60px", marginBottom: "10px" }}
+              />
+              <Text color={"#fff"} fontSize={"16px"}>
+                {textThree}
+              </Text>
+            </Text>
+          )}
+        </Text>
+      </Box>
+    </div>
+  );
+};
+
+export default ConnectCard;

src/components/Card/HappenCard.jsx

@@ -0,0 +1,44 @@
+/* eslint-disable no-unused-vars */
+import { Box, Container, Text, Image, Button } from "@chakra-ui/react";
+import CardImg2 from "../../assets/images/cardimg2.png";
+import { Badge } from "@chakra-ui/react";
+
+const HappenCard = ({ key, date, text, para, month, curentDate }) => {
+  return (
+    <Box padding={"1px"} borderRadius={"10px"}>
+      <Box
+        background={"#151419"}
+        borderRadius={"10px"}
+        position={"relative"}
+        // minHeight={"402px"}
+        key={key}
+      >
+        <Text
+          color={"#fff"}
+          backgroundColor={"#DE858E"}
+          position={"absolute"}
+          top={"0"}
+          left={"17"}
+          padding={"6px 13px"}
+          textAlign={"center"}
+        >
+          {month}
+          <br />
+          {curentDate}
+        </Text>
+        <Image src={CardImg2} />
+        <Box padding={"1rem"}>
+          <Text fontSize={"14px"} color={"#979797"} marginBottom={"10px"}>
+            {date}
+          </Text>
+          <Text color={"#fff"} fontSize={"20px"} marginBottom={"10px"}>
+            {text}
+          </Text>
+          <Text color={"#E1E1E1"}>{para}</Text>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default HappenCard;

src/components/Card/InsightsCard.jsx

@@ -0,0 +1,64 @@
+/* eslint-disable no-unused-vars */
+import { Box, Container, Text, Image, Button } from "@chakra-ui/react";
+import cardimg from "../../assets/images/CardImg.png";
+import { Badge } from "@chakra-ui/react";
+import { useState } from "react";
+
+const InsightsCard = ({ key, title, text }) => {
+  const [showBrideBox, setShowBrideBox] = useState(false);
+  return (
+    <Box
+      backgroundImage={
+        "-webkit-gradient(linear, left bottom, left top, color-stop(0.33, #8D54F8), color-stop(0.67, #F8697A));"
+      }
+      padding={"1px"}
+      borderRadius={"10px"}
+    >
+      <Box
+        className="card__container"
+        onMouseEnter={() => setShowBrideBox(true)}
+        onMouseLeave={() => setShowBrideBox(false)}
+        width={"502px"}
+        background={"#151419"}
+        borderRadius={"10px"}
+        minHeight={"430px"}
+        key={key}
+      >
+        <Text position={"relative"}>
+          <Image src={cardimg} />
+          {showBrideBox && (
+            <Badge
+              className="bride-box"
+              backgroundColor={"#565263"}
+              color={"#fff"}
+              fontWeight={"400"}
+              borderRadius={"20px"}
+              padding={"3px 16px"}
+              position={"absolute"}
+              bottom={"14px"}
+              left={"12px"}
+            >
+              INSIGHT
+            </Badge>
+          )}
+        </Text>
+        <Box padding={"1rem"}>
+          <Text fontSize={"20px"} color={"#ffffff"} margin={"10px 0px"}>
+            {title}
+          </Text>
+          <Text
+            color={"#BCBCBC"}
+            fontSize={"16px"}
+            marginBottom={"20px"}
+            minHeight={"73px"}
+            maxWidth={"460px"}
+          >
+            {text}
+          </Text>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default InsightsCard;

src/components/Card/PlaceCard.jsx

@@ -0,0 +1,56 @@
+/* eslint-disable no-unused-vars */
+import { Box, Container, Text, Image, Button } from "@chakra-ui/react";
+import {ArrowForwardIcon } from '@chakra-ui/icons'
+import Arrow from "../../assets/images/arrow-right.png"
+
+const PlaceCard = ({ key, text, cardicon ,title,button}) => {
+  return (
+    <Box
+      padding={"1px"}
+      borderRadius={"10px"}
+    >
+      <Box
+        width={"502px"}
+        background={"#46464647"}
+        borderRadius={"10px"}
+        minHeight={"350px"}
+        key={key}
+        padding={"15px 20px"}
+      >
+        <Image src={cardicon} />
+        <Box>
+          <Text fontSize={"22px"} color={"#fff"} margin={"25px 0px"} >
+            <span style={{borderBottom:'1px solid #DE858E'}}>{title}</span>
+          </Text>
+          <Text
+            color={"#D4D4D4"}
+            fontSize={"16px"}
+            marginBottom={"20px"}
+            minHeight={"73px"}
+            maxWidth={"460px"}
+          >
+            {text}
+          </Text>
+          <Box
+            display={"flex"}
+            alignItems={"center"}
+          >
+            <Text
+              position={"relative"}
+              backgroundColor={"transparent"}
+              color={"#DE858E"}
+              fontFamily={"Poppins"}
+              fontWeight={"400"}
+              display={"flex"}
+              alignItems={"center"}
+            >
+              {button} <Image src={Arrow} style={{width:'30px',marginLeft:'8px'}} />
+            </Text>
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default PlaceCard;

src/components/Community/CommunityBanner.jsx

@@ -0,0 +1,172 @@
+import { Box, Button, Container, Text } from "@chakra-ui/react";
+import banner from "../../assets/images/learnBanner.png";
+
+const BannerContent = [
+  {
+    heading1: `Welcome To The`,
+    heading2: `Rubix Community`,
+  },
+  {
+    subheading: `This is a space for enterprises, dApp developers, stakeholders 
+    and blockchain advocates to aggregate resources and ideas to make a difference
+     through our green blockchain technology.`,
+  },
+  {
+    btn: `Explore our community`,
+  },
+];
+
+const CommunityBanner = () => {
+  return (
+    <Box
+      height={"100vh"}
+      backgroundImage={`url(${banner})`}
+      backgroundRepeat={"no-repeat"}
+      backgroundSize={"cover"}
+      display={"grid"}
+      placeContent={"center"}
+      sx={{
+        "@media (max-width: 1024px)": {
+          height: "70vh",
+        },
+        "@media (max-width: 600px)": {
+          height: "85vh",
+        },
+      }}
+    >
+      <Container
+        maxW="container.xl"
+        textAlign={"left"}
+        marginTop={"2rem"}
+        paddingLeft={"5rem"}
+        sx={{
+          "@media (max-width: 435px)": {
+            paddingLeft: "2rem",
+          },
+        }}
+      >
+        <Box
+          width={"90%"}
+          sx={{
+            "@media (max-width: 435px)": {
+              width: "100%",
+            },
+          }}
+        >
+          <Text
+            as={"h2"}
+            fontWeight={700}
+            fontSize={"60px"}
+            // textTransform={"upperCase"}
+            color={"#DE858E"}
+            sx={{
+              "@media (max-width: 996px)": {
+                fontSize: "35px",
+              },
+              "@media (max-width: 600px)": {
+                fontSize: "28px",
+                marginBottom: "2rem",
+              },
+              "@media (max-width: 412px)": {
+                fontSize: "24px",
+                marginTop: "2rem",
+              },
+            }}
+          >
+            {BannerContent[0].heading1} <br />
+            <span
+              style={{
+                color: "#fff",
+                fontWeight: "600",
+              }}
+            >
+              {BannerContent[0].heading2}
+            </span>
+          </Text>
+          <Box marginTop={"1.5rem"} width={"80%"}>
+            <Text
+              color={"#fff"}
+              fontSize={"25px"}
+              fontWeight={"400"}
+              lineHeight={"37.5px"}
+              fontFamily={"Poppins"}
+              sx={{
+                "@media (max-width: 1024px)": {
+                  fontSize: "22px",
+                },
+                "@media (max-width: 600px)": {
+                  fontSize: "17px",
+                },
+              }}
+            >
+              {BannerContent[1].subheading}
+            </Text>
+          </Box>
+        </Box>
+      </Container>
+      <Container
+        maxW="container.xl"
+        textAlign={"left"}
+        marginTop={"3rem"}
+        paddingLeft={"5rem"}
+        sx={{
+          "@media (max-width: 435px)": {
+            paddingLeft: "2rem",
+          },
+          "@media (max-width: 375px)": {
+            marginTop: "1rem",
+          },
+        }}
+      >
+        <Button
+          position={"relative"}
+          backgroundColor={"transparent"}
+          cursor={"pointer"}
+          transition="0.3s ease-in-out"
+          color={"#fff"}
+          width={"320px"}
+          height={"60px"}
+          fontFamily={"Poppins"}
+          fontWeight={"400"}
+          border={"1px solid white"}
+          borderRadius={"10px"}
+          fontSize={"20px"}
+          zIndex={"1"}
+          overflow={"hidden"}
+          sx={{
+            "::before": {
+              content: '""',
+              position: "absolute",
+              top: "50%",
+              left: "50%",
+              transform: "translate(-50%, -50%)",
+              width: "65px",
+              height: "65px",
+              borderRadius: "50%",
+              transition: "0.35s linear",
+              zIndex: -1,
+              bgGradient:
+                "radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
+              opacity: "0",
+            },
+            "&:hover::before": {
+              width: "100%",
+              height: "120%",
+              borderRadius: "0px",
+              opacity: "1",
+            },
+          }}
+          _hover={{
+            color: "#000",
+            border: "none",
+            zIndex: 1,
+          }}
+        >
+          {BannerContent[2].btn}
+        </Button>
+      </Container>
+    </Box>
+  );
+};
+
+export default CommunityBanner;

src/components/Community/CommunityCard.jsx

@@ -0,0 +1,157 @@
+import {
+  Box,
+  Card,
+  CardBody,
+  CardHeader,
+  Container,
+  Heading,
+  Image,
+  SimpleGrid,
+  Text,
+} from "@chakra-ui/react";
+import React from "react";
+import CommCard from "../Card/CommCard";
+import imgOne from "../../assets/images/Component115.png";
+import imgtwo from "../../assets/images/Component116.png";
+import imgthree from "../../assets/images/Component117.png";
+import imgfour from "../../assets/images/Component118.png";
+import imgfive from "../../assets/images/Component119.png";
+import imgsix from "../../assets/images/Component120.png";
+import imgseven from "../../assets/images/Component121.png";
+import imgeight from "../../assets/images/Component122.png";
+import imgnine from "../../assets/images/Component123.png";
+
+
+const individuals = [
+  {
+    location: "india",
+    name: "KC Reddy",
+    jobTitle: "Founder/CTO",
+    description:
+      "A visionary poised to deliver trustless, secure internet and passwordless cyber security",
+    imageUrl: imgOne,
+  },
+  {
+    location: "india",
+    name: "Ravi Srinivasa Murty",
+    jobTitle: "Chief Strategy Officer",
+    description:
+      "Global business leader with a technology orientation and a vision to drive economic value.",
+    imageUrl: imgtwo,
+  },
+  {
+    location: "india",
+    name: "Hari Krishnan",
+    jobTitle: "Head of Technology",
+    description:
+      "Deeply passionate about Cryptography, Zero Knowledge Proofs, and Number Theory.",
+    imageUrl: imgthree,
+  },
+  {
+    location: "india",
+    name: "Gokul P S",
+    jobTitle: "Core Blockchain Developer",
+    description:
+      "A proactive Web3 enthusiast ensuring the security and scalability of our 51.4M proofchains.",
+    imageUrl: imgfour,
+  },
+  {
+    location: "india",
+    name: "Allen Iype P Cherian",
+    jobTitle: "Blockchain Engineer",
+    description:
+      "A motivated and responsible B tech Graduate, with a strong work ethic.",
+    imageUrl: imgfive,
+  },
+  {
+    location: "india",
+    name: "Nidhin M.",
+    jobTitle: "Lead Engineer",
+    description:
+      "Developed revolutionary PoP protocol, P2P data transfer and transaction processing functions.",
+    imageUrl: imgsix,
+  },
+  {
+    location: "india",
+    name: "ASHITA GUPTA",
+    jobTitle: "Blockchain Developer",
+    description:
+      "Enthusiastic blockchain developer who pushes herself every day to excel at work.",
+    imageUrl: imgseven,
+  },
+  {
+    location: "india",
+    name: "Vaishnav C H",
+    jobTitle: "Blockchain Developer",
+    description:
+      "A very humble and talented Golang developer and mechatronics and blockchain engineer",
+    imageUrl: imgeight,
+  },
+  {
+    location: "india",
+    name: "Maneesha Panda",
+    jobTitle: "Blockchain Engineer",
+    description:
+      "A highly keen blockchain engineer with a zeal for innovation who brings new ideas to the table.",
+    imageUrl: imgOne,
+  },
+];
+
+const CommunityCard = () => {
+  return (
+    <>
+      <Box backgroundColor={"#101015"}>
+        <Container
+          maxW={"container.xl"}
+          padding={"0 5rem"}
+          paddingBottom={"5rem"}
+          sx={{
+            "@media (max-width: 1024px)": {
+              padding: "3rem",
+            },
+            "@media (max-width: 435px)": {},
+          }}
+        >
+          <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",
+                textAlign: "center",
+              },
+            }}
+          >
+            Rubix Community
+          </Text>
+          <SimpleGrid
+             templateColumns="repeat(3, 1fr)" // Adjusted to display 3 cards in a row
+             gap={"4rem"}
+          >
+            {individuals.map((item) => (
+              <CommCard
+                key={item.id}
+                location={item.location}
+                name={item.name}
+                jobTitle={item.jobTitle}
+                description={item.description}
+                imageUrl={item.imageUrl}
+              />
+            ))}
+          </SimpleGrid>
+        </Container>
+      </Box>
+    </>
+  );
+};
+
+export default CommunityCard;

src/components/Community/Connect.jsx

@@ -0,0 +1,100 @@
+import { Box, Container, SimpleGrid, Text } from "@chakra-ui/react";
+import React from "react";
+import Telegram from "../../assets/images/telegram.png";
+import Reddit from "../../assets/images/reddit2.png";
+import ConnectCard from "../Card/ConnectCard";
+import Twitter from "../../assets/images/twitter.png";
+import Facebook from "../../assets/images/facebook.png";
+import linkedin from "../../assets/images/linkedn.png";
+import Discort from "../../assets/images/Discort.png";
+import GitHub from "../../assets/images/GitHub2.png";
+
+const ConnectRubix = [
+  {
+    id: "1",
+    title: "Developer Resources",
+    imageOne: Telegram,
+    imageTwo: Reddit,
+    textOne: "Telegram",
+    textTwo: "Reddit",
+  },
+  {
+    id: "2",
+    title: "Innovator Dialogue",
+    imageOne: Telegram,
+    imageTwo: GitHub,
+    textOne: "GitHub",
+    textTwo: "Discord",
+  },
+  {
+    id: "3",
+    title: "Social Media",
+    imageOne: Twitter,
+    imageTwo: Facebook,
+    imageThree:linkedin,
+    textOne: "Twitter",
+    textTwo: "Facebook",
+    textThree:'LinkedIn',
+  },
+];
+
+const Connect = () => {
+  return (
+    <>
+      <Box backgroundColor={"#101015"}>
+        <Container
+          maxW={"container.xl"}
+          padding={"0 5rem"}
+          paddingBottom={"5rem"}
+          sx={{
+            "@media (max-width: 1024px)": {
+              padding: "3rem",
+            },
+            "@media (max-width: 435px)": {},
+          }}
+        >
+          <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",
+                textAlign: "center",
+              },
+            }}
+          >
+            Connect with Rubix community
+          </Text>
+          <SimpleGrid
+            templateColumns="repeat(3, 1fr)" // Adjusted to display 3 cards in a row
+            gap={"1rem"}
+          >
+            {ConnectRubix.map((item) => (
+              <ConnectCard
+                key={item.id}
+                title={item.title}
+                imageOne={item.imageOne}
+                imageTwo={item.imageTwo}
+                imageThree={item.imageThree}
+                textOne={item.textOne}
+                textTwo={item.textTwo}
+                textThree={item.textThree}
+              />
+            ))}
+          </SimpleGrid>
+        </Container>
+      </Box>
+    </>
+  );
+};
+
+export default Connect;

src/components/Community/Happen.jsx

@@ -0,0 +1,153 @@
+/* eslint-disable no-unused-vars */
+import {
+  Box,
+  Container,
+  Text,
+  Image,
+  Button,
+  SimpleGrid,
+} from "@chakra-ui/react";
+import HappenCard from "../Card/HappenCard";
+
+const Latest = [
+  {
+    id: 1,
+    date: `Sunday, 10 May 2024`,
+    text: `Financial Times Crypto & Digital Assets Summit Panel`,
+    para: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. ",
+    curentDate: "10",
+    month: "MAY",
+  },
+  {
+    id: 2,
+    date: `Sunday, 15 Jan 2024`,
+    text: `Financial Times Crypto & Digital Assets Summit Panel`,
+    para: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. ",
+    curentDate: "10",
+    month: "MAY",
+  },
+  {
+    id: 3,
+    date: `Sunday, 14 Feb 2024`,
+    text: `Financial Times Crypto & Digital Assets Summit Panel`,
+    para: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. ",
+    curentDate: "10",
+    month: "MAY",
+  },
+];
+
+const Content = {
+  heading: `Latest Happenings`,
+};
+
+const Happen = () => {
+  return (
+    <Box
+      // height={"100vh"}
+      background={"#000"}
+      backgroundSize={"cover"}
+      backgroundRepeat={"no-repeat"}
+    >
+      <Container
+        maxW={"container.xl"}
+        padding={"0 5rem"}
+        paddingBottom={"5rem"}
+        sx={{
+          "@media (max-width: 1024px)": {
+            padding: "3rem",
+          },
+          "@media (max-width: 435px)": {},
+        }}
+      >
+        <Text
+          as={"h2"}
+          paddingTop={"2rem"}
+          paddingBottom={"2rem"}
+          fontWeight={700}
+          fontSize={"40px"}
+          textTransform={"capitalize"}
+          color={"#fff"}
+        >
+          {Content.heading}
+        </Text>
+        <Box
+          paddingBottom={"2rem"}
+          // height={"50vh"}
+          sx={{
+            "@media (max-width: 435px)": {
+              paddingLeft: "3rem",
+            },
+          }}
+        >
+          <Box>
+            <SimpleGrid
+              templateColumns="repeat(3, 1fr)" // Adjusted to display 3 cards in a row
+              gap={"1rem"}
+            >
+              {Latest.map((item) => (
+                <HappenCard
+                  key={item.id}
+                  date={item.date}
+                  text={item.text}
+                  para={item.para}
+                  curentDate={item.curentDate}
+                  month={item.month}
+                />
+              ))}
+            </SimpleGrid>
+          </Box>
+          <Box textAlign={"center"} marginTop={"4rem"}>
+          <Button
+            position={"relative"}
+            backgroundColor={"transparent"}
+            cursor={"pointer"}
+            transition="background-color 0.3s ease-in-out, color 0.1s ease-in-out"
+            color={"#fff"}
+            width={"227px"}
+            height={"60px"}
+            fontFamily={"Poppins"}
+            fontWeight={"400"}
+            border={"1px solid white"}
+            borderRadius={"10px"}
+            fontSize={"20px"}
+            zIndex={"1"}
+            overflow={"hidden"}
+            sx={{
+              "::before": {
+                content: '""',  
+                position: "absolute",
+                top: "50%",
+                left: "50%",
+                transform: "translate(-50%, -50%)",
+                width: "65px",
+                height: "65px",
+                borderRadius: "50%",
+                transition: "0.35s linear",
+                zIndex: -1,
+                bgGradient:
+                  "radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
+                opacity: "0",
+              },
+              "&:hover::before": {
+                width: "100%",
+                height: "120%",
+                borderRadius: "0px",
+                opacity: "1",
+              },
+            }}
+            _hover={{
+              color: "#000",
+              border: "none",
+              zIndex: 1,
+            }}
+          >
+            View More
+          </Button>
+        </Box>
+        </Box>
+      </Container>
+    </Box>
+  );
+};
+
+export default Happen;

src/components/Community/Insights.jsx

@@ -0,0 +1,133 @@
+/* eslint-disable no-unused-vars */
+import { Box, Container, Text, Image, Button } from "@chakra-ui/react";
+import HomeCard from "../Card/HomeCard";
+import InsightsCard from "../Card/InsightsCard";
+
+const content = [
+  {
+    id: 1,
+    title: `Rubix Hackathon`,
+    text: `Start 2023 off right by registering for the next Top Rubix Start-up Hackathon! Join the community and build any project that leverages Rubix blockchain technology.`,
+  },
+  {
+    id: 2,
+    title: `Rubix Hackathon`,
+    text: `Start 2023 off right by registering for the next Top Rubix Start-up Hackathon! Join the community and build any project that leverages Rubix blockchain technology.`,
+  },
+  {
+    id: 3,
+    title: `Rubix Hackathon`,
+    text: `Start 2023 off right by registering for the next Top Rubix Start-up Hackathon! Join the community and build any project that leverages Rubix blockchain technology.`,
+  },
+];
+
+const Content = {
+  heading: `Current news & insights`,
+};
+
+const Insights = () => {
+  return (
+    <Box
+      // height={"100vh"}
+      background={"#000"}
+      backgroundSize={"cover"}
+      backgroundRepeat={"no-repeat"}
+    >
+      <Box
+        paddingLeft={"7rem"}
+        paddingBottom={"2rem"}
+        // height={"50vh"}
+        sx={{
+          "@media (max-width: 435px)": {
+            paddingLeft: "3rem",
+          },
+        }}
+      >
+        <Text
+          as={"h2"}
+          paddingTop={"2rem"}
+          paddingBottom={"2rem"}
+          fontWeight={700}
+          fontSize={"40px"}
+          textTransform={"capitalize"}
+          color={"#fff"}
+          sx={{
+            "@media (max-width: 435px)": {
+              fontSize: "35px",
+            },
+            "@media (max-width: 375px)": {
+              fontSize: "28px",
+            },
+          }}
+        >
+          {Content.heading}
+        </Text>
+        <Box
+          display={"flex"}
+          alignItems={"center"}
+          gap={"25px"}
+          overflowX={"auto"}
+          sx={{
+            "&::-webkit-scrollbar": {
+              width: "0px",
+            },
+          }}
+        >
+          {content.map((item) => (
+            <InsightsCard key={item.id} title={item.title} text={item.text} />
+          ))}
+        </Box>
+        <Box textAlign={"center"} marginTop={"4rem"}>
+          <Button
+            position={"relative"}
+            backgroundColor={"transparent"}
+            cursor={"pointer"}
+            transition="background-color 0.3s ease-in-out, color 0.1s ease-in-out"
+            color={"#fff"}
+            width={"227px"}
+            height={"60px"}
+            fontFamily={"Poppins"}
+            fontWeight={"400"}
+            border={"1px solid white"}
+            borderRadius={"10px"}
+            fontSize={"20px"}
+            zIndex={"1"}
+            overflow={"hidden"}
+            sx={{
+              "::before": {
+                content: '""',
+                position: "absolute",
+                top: "50%",
+                left: "50%",
+                transform: "translate(-50%, -50%)",
+                width: "65px",
+                height: "65px",
+                borderRadius: "50%",
+                transition: "0.35s linear",
+                zIndex: -1,
+                bgGradient:
+                  "radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
+                opacity: "0",
+              },
+              "&:hover::before": {
+                width: "100%",
+                height: "120%",
+                borderRadius: "0px",
+                opacity: "1",
+              },
+            }}
+            _hover={{
+              color: "#000",
+              border: "none",
+              zIndex: 1,
+            }}
+          >
+            View More
+          </Button>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default Insights;

src/components/Community/LearnMore.jsx

@@ -0,0 +1,112 @@
+import { Box, Button, Container, Text } from "@chakra-ui/react";
+// import banner from "../../assets/images/moreBanner.png";
+
+const SectionContent = {
+  heading: `Connect with us to learn more!`,
+  subContent: `With minimal computing power and curiosity to explore Web3 and its potential, anyone can build with the Rubix community.`,
+  btnContent: `Contact Us`,
+};
+
+const LearnMore = () => {
+  return (
+    <Box
+      height={"auto"}
+      // backgroundImage={`url(${banner})`}
+      backgroundSize={"cover"}
+      backgroundRepeat={"no-repeat"}
+      sx={{
+        "@media (max-width: 1024px)": {
+          height: "auto",
+        },
+        "@media (max-width: 600px)": {
+          fontSize: "28px",
+        },
+      }}
+    >
+      <Text
+        as={"h2"}
+        paddingTop={"2rem"}
+        paddingBottom={"2rem"}
+        fontWeight={700}
+        // fontSize={"40px"}
+        className="rubix-text-title"
+        textAlign={"center"}
+        textTransform={"capitalize"}
+        color={"#fff"}
+        sx={{
+          "@media (max-width: 1024px)": {},
+          "@media (max-width: 600px)": {
+            fontSize: "28px",
+          },
+        }}
+      >
+        {SectionContent.heading}
+      </Text>
+      <Container
+        maxW="container.md"
+        textAlign={"center"}
+        display={"grid"}
+        placeContent={"center"}
+        // height={"30vh"}
+        paddingBottom={"3rem"}
+      >
+        <Text
+          color={"#E4E4E4"}
+          //   fontSize={"22px"}
+          className="rubix-text-large"
+          marginBottom={"2rem"}
+          fontFamily={"Poppins"}
+        >
+          {SectionContent.subContent}
+        </Text>
+        <Button
+          fontSize={"20px"}
+          //   minW={"284px"}
+          minH={"60px"}
+          fontFamily={"Poppins"}
+          backgroundColor={"transparent"}
+          border={"1px solid #fff"}
+          color={"#fff"}
+          fontWeight={"400"}
+          margin={"0 auto"}
+          // transition="0.3s ease-in-out"
+          zIndex={"1"}
+          overflow={"hidden"}
+          padding={"0 3rem"}
+          sx={{
+            "::before": {
+              content: '""',
+              position: "absolute",
+              top: "50%",
+              left: "50%",
+              transform: "translate(-50%, -50%)",
+              width: "65px",
+              height: "65px",
+              borderRadius: "50%",
+              transition: "0.35s linear",
+              zIndex: -1,
+              bgGradient:
+                "radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
+              opacity: "0",
+            },
+            "&:hover::before": {
+              width: "100%",
+              height: "120%",
+              borderRadius: "0px",
+              opacity: "1",
+            },
+          }}
+          _hover={{
+            color: "#000",
+            border: "none",
+            zIndex: 1,
+          }}
+        >
+          {SectionContent.btnContent}
+        </Button>
+      </Container>
+    </Box>
+  );
+};
+
+export default LearnMore;

src/components/Community/Place.jsx

@@ -0,0 +1,108 @@
+/* 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',
+  },
+  {
+    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',
+  },
+  {
+    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',
+  },
+  {
+    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',
+  },
+];
+
+const Content = {
+  heading: `Find your place at the table`,
+};
+
+const Place = () => {
+  return (
+    <Box
+      // height={"100vh"}
+      background={"#000"}
+      backgroundSize={"cover"}
+      backgroundRepeat={"no-repeat"}
+      backgroundImage={`url(${Banner})`}
+    >
+      <Box
+        paddingLeft={"7rem"}
+        paddingBottom={"2rem"}
+        // height={"50vh"}
+        sx={{
+          "@media (max-width: 435px)": {
+            paddingLeft: "3rem",
+          },
+        }}
+      >
+        <Text
+          as={"h2"}
+          paddingTop={"2rem"}
+          paddingBottom={"2rem"}
+          fontWeight={700}
+          fontSize={"40px"}
+          textTransform={"capitalize"}
+          color={"#fff"}
+          sx={{
+            "@media (max-width: 435px)": {
+              fontSize: "35px",
+            },
+            "@media (max-width: 375px)": {
+              fontSize: "28px",
+            },
+          }}
+        >
+          {Content.heading}
+        </Text>
+        <Box
+          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}
+            />
+          ))}
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default Place;

src/components/HomePage/Resources.jsx

@@ -95,7 +95,7 @@ const Resources = () => {
             overflow={"hidden"}
             sx={{
               "::before": {
-                content: '""',
+                content: '""',  
                 position: "absolute",
                 top: "50%",
                 left: "50%",

src/components/HomePage/Stats.jsx

@@ -25,7 +25,7 @@ const Stats = () => {
         "@media (max-width: 600px)": {
           fontSize: "28px",
         },
-      }}
+      }} 
     >
       <Text
         as={"h2"}

src/components/NavBar/NavBar.jsx

@@ -109,7 +109,7 @@ const NavBar = () => {
               <Link to="/LearnPage">LEARN</Link>
               <Link to="/BuildPage">BUILD</Link>
               <Link to="/">USE CASES</Link>
-              <Link to="/">COMMUNITY</Link>
+              <Link to="/community">COMMUNITY</Link>
               <Link to="/">FOUNDATION</Link>
               <Link
                 to="/"

src/pages/Community.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import CommunityBanner from '../components/Community/CommunityBanner'
+import CommunityCard from '../components/Community/CommunityCard'
+import Place from '../components/Community/Place'
+import Connect from '../components/Community/Connect'
+import Happen from '../components/Community/Happen'
+import Insights from '../components/Community/Insights'
+import LearnMore from '../components/Community/LearnMore'
+
+const Community = () => {
+  return (
+    <>
+      <CommunityBanner/>
+      <CommunityCard/>
+      <Place />
+      <Connect/>
+      <Happen />
+      <Insights/>
+      <LearnMore />
+    </>
+  )
+}
+
+export default Community

src/pages/LearnPage.jsx

@@ -11,7 +11,7 @@ const LearnPage = () => {
       <LearnBanner />
       <LearnDev />
       <WhyRubix />
-      <GetStarted />
+      <GetStarted /> 
       <Faq />
       <Footer />
     </>