Merge branch 'dev'

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";
 import Contact from "./pages/Contact";
 
 const router = createBrowserRouter(
@@ -16,6 +17,7 @@ const router = createBrowserRouter(
       <Route index element={<HomePage />} />
       <Route path="LearnPage" element={<LearnPage />} />
       <Route path="BuildPage" element={<BuildPage />} />
+      <Route path="community" element={<Community />} />
       <Route path="Contact" element={<Contact />} />
     </Route>
   )

src/components/BuildPage/BuildBanner.jsx

@@ -1,5 +1,5 @@
 import { Box, Button, Container, Text } from "@chakra-ui/react";
-import banner from "../../assets/images/BuildBanner.png";
+import banner from "../../assets/images/BuildBanner.webp";
 
 const BannerContent = [
   {
@@ -37,7 +37,7 @@ const BuildBanner = () => {
         maxW="container.xl"
         textAlign={"left"}
         marginTop={"2rem"}
-        paddingLeft={"5rem"}
+        paddingLeft={"4rem"}
         sx={{
           "@media (max-width: 435px)": {
             paddingLeft: "2rem",
@@ -56,7 +56,7 @@ const BuildBanner = () => {
             as={"h2"}
             fontWeight={700}
             fontSize={"60px"}
-            textTransform={"upperCase"}
+            textTransform={"capitalize"}
             color={"#DE858E"}
             sx={{
               "@media (max-width: 996px)": {
@@ -107,7 +107,7 @@ const BuildBanner = () => {
         maxW="container.xl"
         textAlign={"left"}
         marginTop={"3rem"}
-        paddingLeft={"5rem"}
+        paddingLeft={"4rem"}
         sx={{
           "@media (max-width: 435px)": {
             paddingLeft: "2rem",

src/components/BuildPage/Connect.jsx

@@ -108,6 +108,7 @@ const Connect = () => {
                   background={"#000"}
                   borderRadius={"10px"}
                   minH={"270px"}
+                  height={"100%"}
                   border={"1px solid #454545"}
                 >
                   <CardHeader

src/components/BuildPage/LearnMore.jsx

@@ -10,7 +10,7 @@ const SectionContent = {
 const LearnMore = () => {
   return (
     <Box
-      height={"50vh"}
+      height={"auto"}
       backgroundImage={`url(${banner})`}
       backgroundSize={"cover"}
       backgroundRepeat={"no-repeat"}
@@ -47,7 +47,7 @@ const LearnMore = () => {
         textAlign={"center"}
         display={"grid"}
         placeContent={"center"}
-        height={"30vh"}
+        // height={"30vh"}
         paddingBottom={"3rem"}
       >
         <Text

src/components/BuildPage/Tools.jsx

@@ -92,7 +92,7 @@ const Tools = () => {
                 <Card
                   background={"#131313"}
                   borderRadius={"10px"}
-                  minH={"270px"}
+                  height={"100%"}
                 >
                   <CardHeader display={"flex"} justifyContent={"center"}>
                     <Image src={item.img} />
@@ -130,7 +130,7 @@ const Tools = () => {
           position={"relative"}
           backgroundColor={"transparent"}
           cursor={"pointer"}
-          transition="0.3s ease-in-out"
+          transition="0.3s ease-in"
           color={"#fff"}
           width={"227px"}
           height={"60px"}
@@ -153,7 +153,7 @@ const Tools = () => {
               width: "65px",
               height: "65px",
               borderRadius: "50%",
-              transition: "0.35s linear",
+              transition: "0.35s ease-in",
               zIndex: -1,
               bgGradient:
                 "radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",

src/components/BuildPage/WhyBuild.jsx

@@ -8,7 +8,7 @@ import {
   AccordionPanel,
   AccordionIcon,
 } from "@chakra-ui/react";
-import bg from "../../assets/images/whyRubix.png";
+import bg from "../../assets/images/whyRubix.webp";
 import cube from "../../assets/images/cube.png";
 
 const accordion = [
@@ -46,7 +46,7 @@ const WhyBuild = () => {
     >
       <Container
         maxW={"container.xl"}
-        padding={"5rem"}
+        padding={"4rem"}
         sx={{
           "@media (max-width: 1024px)": {
             padding: "3rem",

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={"16px"}
+        marginTop={"15px"}
+        maxWidth={"460px"}
+      >
+        {name}
+      </Text>
+      <Text fontSize={"12px"} color={"#DEDEDE"} margin={"4px 0px"}>
+        {jobTitle}
+      </Text>
+      <Text fontSize={"11px"} color={"#DEDEDE"} margin={"6px 0px"}>
+        {description}
+      </Text>
+    </Box>
+  );
+};
+
+export default CommCard;

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,66 @@
+/* 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}
+        transition={"all 1s"}
+      >
+        <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"}
+              transition={"all 1s"}
+            >
+              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,173 @@
+import { Box, Button, Container, Text } from "@chakra-ui/react";
+import banner from "../../assets/images/learnBanner.webp";
+
+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: 500px)": {
+            paddingLeft: "1rem", // Correctly target paddingLeft instead of padding
+          },
+        }}
+      >
+        <Box
+          width={"90%"}
+          sx={{
+            "@media (max-width: 500px)": {
+              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: 500px)": {
+                marginTop: "2rem",
+                marginBottom:'2rem',
+                fontSize:'36px'
+              },
+            }}
+          >
+            {BannerContent[0].heading1} <br />
+            <span
+              style={{
+                color: "#fff",
+                fontWeight: "600",
+              }}
+            >
+              {BannerContent[0].heading2}
+            </span>
+          </Text>
+          <Box marginTop={"1.5rem"} width={"80%"}
+            sx={{
+              "@media (max-width: 500px)": {
+                width: "100%",
+              },
+            }}
+          >
+            <Text
+              color={"#fff"}
+              fontSize={"25px"}
+              fontWeight={"400"}
+              lineHeight={"37.5px"}
+              fontFamily={"Poppins"}
+              textTransform={"capitalize"}
+              sx={{
+                "@media (max-width: 1024px)": {
+                  fontSize: "22px",
+                },
+                "@media (max-width: 500px)": {
+                  fontSize: "16px",
+                },
+              }}
+            >
+              {BannerContent[1].subheading}
+            </Text>
+          </Box>
+        </Box>
+        <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"}
+          marginTop={"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",
+            },
+            "@media (max-width: 500px)": {
+              fontSize: "14px",
+              width:'230px',
+              height:'44px',
+              marginTop:"2rem"
+            },
+            
+          }}
+          _hover={{
+            color: "#000",
+            border: "none",
+            zIndex: 1,
+          }}
+        >
+          {BannerContent[2].btn}
+        </Button>
+      </Container>
+    </Box>
+  );
+};
+
+export default CommunityBanner;

src/components/Community/CommunityCard.jsx

@@ -0,0 +1,183 @@
+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";
+import imgten from "../../assets/images/Component128.png";
+import imgeleven from "../../assets/images/Component127.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: "Chief Growth Officer",
+    description:
+      "Deeply passionate about Cryptography, Zero Knowledge Proofs, and Number Theory.",
+    imageUrl: imgthree,
+  },
+  {
+    location: "india",
+    name: "Eser Torun, CFA",
+    jobTitle: "Chief Growth Officer",
+    description:
+      "Deeply passionate about Cryptography, Zero Knowledge Proofs, and Number Theory.",
+    imageUrl: imgten,
+  },
+  {
+    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: "Arnab Ghose",
+    jobTitle: "Senior Blockchain Engineer",
+    description:
+      "Developed revolutionary PoP protocol, P2P data transfer and transaction processing functions.",
+    imageUrl: imgeleven,
+  },
+  {
+    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: imgnine,
+  },
+  {
+    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: imgnine,
+  },
+];
+
+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
+            spacing={10}
+            templateColumns="repeat(auto-fill, minmax(250px, 1fr))"
+          >
+            {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,164 @@
+/* eslint-disable no-undef */
+/* eslint-disable no-unused-vars */
+import {
+  Box,
+  Button,
+  Card,
+  CardBody,
+  CardFooter,
+  CardHeader,
+  Container,
+  Heading,
+  Image,
+  SimpleGrid,
+  Text,
+} from "@chakra-ui/react";
+import banner from "../../assets/images/Statsbanner.png";
+import tel from "../../assets/images/tel.png";
+import red from "../../assets/images/red.png";
+import git from "../../assets/images/git.png";
+import twitch from "../../assets/images/twitch.png";
+import twit from "../../assets/images/twit.png";
+import face from "../../assets/images/face.png";
+import lin from "../../assets/images/lin.png";
+import { Link } from "react-router-dom";
+
+const items = [
+  {
+    id: 1,
+    head: `Innovator Dialogue`,
+    logo1: tel,
+    logo2: red,
+    social1: `Telegram`,
+    social2: `Reddit`,
+  },
+  {
+    id: 2,
+    head: `Developer Resources`,
+    logo1: git,
+    logo2: twitch,
+    social1: `GitHub`,
+    social2: `Discord`,
+  },
+  {
+    id: 3,
+    head: `Social Media`,
+    logo1: twit,
+    logo2: face,
+    logo3: lin,
+    social1: `Twitter`,
+    social2: `Facebook`,
+    social3: `LinkedIn`,
+  },
+];
+
+const Connect = () => {
+  return (
+    <Box
+      //   height={"80vh"}
+      //   backgroundImage={`url(${banner})`}
+      //   backgroundSize={"cover"}
+      //   backgroundRepeat={"no-repeat"}
+      backgroundColor={"#101015"}
+      backgroundSize={"cover"}
+      backgroundRepeat={"no-repeat"}
+    >
+      <Container
+         maxW={"container.xl"}
+         padding={"0 5rem"}
+         paddingBottom={"2rem"}
+         sx={{
+           "@media (max-width: 1024px)": {
+             padding: "3rem",
+           },
+           "@media (max-width: 435px)": {},
+         }}
+      >
+        <Text
+          className="rubix-text-title"
+          fontFamily={"Mona Sans"}
+          fontWeight={"700"}
+          //   fontSize={"40px"}
+          color={"#fff"}
+          marginBottom={"35px"}
+        >
+          Connect with Rubix community
+        </Text>
+          <SimpleGrid
+            spacing={4}
+            templateColumns="repeat(auto-fill, minmax(300px, 1fr))"
+          >
+            {items.map((item) => (
+              <>
+                <Box
+                  padding={"1px"}
+                  borderRadius={"10px"}
+                  key={item.id}
+                  _hover={{
+                    backgroundImage:
+                      "-webkit-gradient(linear, left bottom, left top, color-stop(0.33, #8D54F8), color-stop(0.67, #F8697A))",
+                  }}
+                >
+                  <Card
+                    background={"#000"}
+                    borderRadius={"10px"}
+                    minH={"270px"}
+                    border={"1px solid #454545"}
+                  >
+                    <CardHeader
+                      textAlign={"center"}
+                      paddingBottom={"0px"}
+                      marginTop={"2rem"}
+                    >
+                      {/* <Image src={item.img} /> */}
+                      <Heading
+                        size="md"
+                        className="rubix-text-large"
+                        fontWeight={"500"}
+                      >
+                        {item.head}
+                      </Heading>
+                    </CardHeader>
+                    <CardBody
+                      padding={"0px"}
+                      display={"flex"}
+                      alignItems={"center"}
+                      justifyContent={"center"}
+                      gap={"2.5rem"}
+                    >
+                      <Link placeContent={"center"}>
+                        <Box>
+                          <Image src={item.logo1} margin={"0 auto 20px auto"} />
+                        </Box>
+                        <Text className="rubix-text-small" fontWeight={"400"}>
+                          {item.social1}
+                        </Text>
+                      </Link>
+                      <Link placeContent={"center"}>
+                        <Image src={item.logo2} margin={"0 auto 20px auto"} />
+                        <Text className="rubix-text-small" fontWeight={"400"}>
+                          {item.social2}
+                        </Text>
+                      </Link>
+                      {item.social3 ? (
+                        <Link display={"grid"} placeContent={"center"}>
+                          <Image src={item.logo3} margin={"0 auto 20px auto"} />
+                          <Text className="rubix-text-small" fontWeight={"400"}>
+                            {item.social3}
+                          </Text>
+                        </Link>
+                      ) : (
+                        ""
+                      )}
+                    </CardBody>
+                  </Card>
+                </Box>
+              </>
+            ))}
+          </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={"2rem"}
+        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
+             spacing={4}
+             templateColumns="repeat(auto-fill, minmax(300px, 1fr))"
+            >
+              {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,134 @@
+/* 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={"#101015"}
+      backgroundSize={"cover"}
+      backgroundRepeat={"no-repeat"}
+      paddingBottom={"4rem"}
+    >
+      <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>
+      <Box textAlign={"center"} marginTop={"1rem"}>
+          <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>
+  );
+};
+
+export default Insights;

src/components/Community/LearnMore.jsx

@@ -0,0 +1,160 @@
+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 countless applications, there's a place for everyone in the Rubix community.`,
+  btnContent: `Contact Us`,
+  btnBild:"Build with Rubix",
+};
+
+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>
+        <Text>
+        <Button
+          fontSize={"20px"}
+          //   minW={"284px"}
+          minH={"60px"}
+          fontFamily={"Poppins"}
+          backgroundColor={"transparent"}
+          border={"1px solid #fff"}
+          color={"#fff"}
+          fontWeight={"400"}
+          margin={"0 10px"}
+          // 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.btnBild}
+        </Button>
+        <Button
+          fontSize={"20px"}
+          //   minW={"284px"}
+          minH={"60px"}
+          fontFamily={"Poppins"}
+          backgroundColor={"transparent"}
+          border={"1px solid #fff"}
+          color={"#fff"}
+          fontWeight={"400"}
+          margin={"0 10px"}
+          // 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>
+        </Text>
+      </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/Contact/Form.jsx

@@ -7,17 +7,10 @@ import {
   useDisclosure,
   Image,
   Badge,
-} from "@chakra-ui/react";
-// import { Link } from "react-router-dom";
-import {
-  // FormControl,
-  // FormLabel,
-  //   FormErrorMessage,
-  //   FormHelperText,
-  //   Input,
   Textarea,
 } from "@chakra-ui/react";
-import { useForm } from "react-hook-form";
+
+import { Controller, useForm } from "react-hook-form";
 import { useEffect, useState } from "react";
 import {
   Modal,
@@ -28,23 +21,25 @@ import {
   ModalFooter,
   Button,
 } from "@chakra-ui/react";
-import BGimage from "../../assets/images/form.png";
-// import { contactUs } from "../service/api";
+import BGimage from "../../assets/images/form.webp";
 import formx from "../../assets/images/formx.png";
-// import location from "../../src/assets/contactLocation.svg";
-// import mail from "../../src/assets/contactMail.svg";
-// import mobile from "../../src/assets/mobile.svg";
+import formfb from "../../assets/images/formfb.png";
+import forml from "../../assets/images/forml.png";
+import { Link } from "react-router-dom";
 
 const Contact = () => {
   const {
     register,
     handleSubmit,
     reset,
+    control,
     formState: { errors },
   } = useForm();
   const { isOpen, onOpen, onClose } = useDisclosure();
   const [isLoading, setIsLoading] = useState(false);
 
+  const email = "rubix@gmail.com";
+
   const onSubmit = async (data) => {
     // console.log(data);
     setIsLoading(true);
@@ -78,13 +73,14 @@ const Contact = () => {
       paddingTop={"4rem"}
       backgroundRepeat={"no-repeat"}
       backgroundSize={"cover"}
+      backgroundPosition={"0 25%"}
     >
       <Container
         maxW="container.xl"
         backgroundColor={"transparent"}
         display={"flex"}
         justifyContent={"start"}
-        alignItems={"start"}
+        alignItems={"baseline"}
         gap={"2rem"}
         padding={"3rem 0rem"}
         sx={{
@@ -110,7 +106,7 @@ const Contact = () => {
           zIndex={"99"}
           backgroundColor={"#transparent"}
           // width={"30%"}
-          padding={"2rem"}
+          padding={"4rem"}
           minH={"583px"}
           // flex={"1"}
           sx={{
@@ -126,7 +122,7 @@ const Contact = () => {
               minH: "490px",
             },
             "@media (max-width: 820px)": { width: "55%" },
-            "@media (max-width: 535px)": { width: "95%" },
+            "@media (max-width: 535px)": { width: "95%", padding: "10px" },
             "@media (max-width: 375px)": {},
           }}
         >
@@ -151,15 +147,13 @@ const Contact = () => {
               sx={{
                 "@media (max-width: 1024px)": {},
                 "@media (max-width: 768px)": {},
-                "@media (max-width: 535px)": {
-                  padding: "1rem",
-                },
+                "@media (max-width: 535px)": {},
               }}
             >
               Start reaching <br /> your digital goals
             </Text>
           </Box>
-          <Box>
+          <Box marginBottom={"2rem"}>
             <Badge
               textAlign={"left"}
               background={"transparent"}
@@ -171,17 +165,78 @@ const Contact = () => {
             >
               Social Media
             </Badge>
+            <Box
+              display={"flex"}
+              alignItems={"center"}
+              marginTop={"20px"}
+              gap={"2rem"}
+            >
+              <Image src={formx} />
+              <Image src={formfb} />
+              <Image src={forml} />
+            </Box>
+          </Box>
+
+          <Box marginBottom={"2rem"}>
+            <Badge
+              textAlign={"left"}
+              background={"transparent"}
+              color={"#fff"}
+              textTransform={"capitalize"}
+              fontWeight={"500"}
+              fontFamily={"Poppins"}
+              fontSize={"18px"}
+            >
+              Chat to us
+            </Badge>
+            <Box marginTop={"10px"}>
+              <Link
+                to={`mailto:${email}`}
+                style={{
+                  fontSize: "18px",
+                  color: "#969696",
+                  fontWeight: "400",
+                  fontFamily: "Poppins",
+                }}
+              >
+                rubix@gmail.com
+              </Link>
+            </Box>
+          </Box>
+
+          <Box>
+            <Badge
+              textAlign={"left"}
+              background={"transparent"}
+              color={"#fff"}
+              textTransform={"capitalize"}
+              fontWeight={"500"}
+              fontFamily={"Poppins"}
+              fontSize={"18px"}
+            >
+              Call us
+            </Badge>
+            <Box marginTop={"10px"}>
+              <Text
+                style={{
+                  fontSize: "18px",
+                  color: "#969696",
+                  fontWeight: "400",
+                  fontFamily: "Poppins",
+                }}
+              >
+                914 578 1245
+              </Text>
+            </Box>
           </Box>
         </Box>
 
         {/* Form */}
         <Container
           maxW="container.xl"
-          //   boxShadow={"0px 4px 18px 0px rgba(65, 65, 65, 0.25)"}
-          textAlign={"center"}
+          textAlign={"left"}
           marginLeft={"auto"}
           marginRight={"auto"}
-          // marginTop={"15rem"}
           backgroundColor={"transparent"}
           sx={{
             "@media (max-width: 1080px)": {
@@ -193,34 +248,8 @@ const Contact = () => {
           // flex={"1"}
         >
           <form onSubmit={handleSubmit(onSubmit)}>
-            <Box textAlign={"center"}>
-              <Heading
-                as="h2"
-                color={"#404040"}
-                fontFamily={"Asap"}
-                fontSize={"35px"}
-                fontWeight={"600"}
-                lineHeight={"135%"}
-                marginBottom={"1rem"}
-                padding={"20px"}
-                marginTop={"1.5rem"}
-                sx={{
-                  "@media (max-width: 1024px)": {},
-                  "@media (max-width: 768px)": {},
-                  "@media (max-width: 535px)": {
-                    padding: "1rem",
-                  },
-                }}
-              >
-                Send us a Message
-              </Heading>
-            </Box>
             <Box
-              // display={"flex"}
-              // justifyContent={"space-between"}
-              // alignItems={"start"}
               padding={"0rem 2rem 0rem 2rem"}
-              // flexDirection={"column"}
               gap={"20px"}
               sx={{
                 "@media (max-width: 1024px)": {},
@@ -253,19 +282,24 @@ const Contact = () => {
                 }}
               >
                 <Box width={"100%"} minH={"120px"}>
-                  <label style={{ color: "#404040", fontFamily: "Asap" }}>
+                  <label
+                    style={{
+                      fontSize: "22px",
+                      color: "#fff",
+                      fontFamily: "Poppins",
+                    }}
+                  >
                     First Name*
                   </label>
                   <input
                     style={{
                       width: "100%",
                       marginBottom: "5px",
-                      background: "transparent",
-                      color: "#404040",
-                      border: "1px solid #C8C8C8",
+                      background: "#1E1E23",
+                      color: "#fff",
                       padding: "10px",
                       marginTop: "10px",
-                      borderRadius: "2px",
+                      borderRadius: "5px",
                     }}
                     //   placeholder="First Name"
                     {...register("firstName", {
@@ -285,19 +319,24 @@ const Contact = () => {
                   )}
                 </Box>
                 <Box width={"100%"} minH={"120px"}>
-                  <label style={{ color: "#404040", fontFamily: "Asap" }}>
+                  <label
+                    style={{
+                      fontSize: "22px",
+                      color: "#fff",
+                      fontFamily: "Poppins",
+                    }}
+                  >
                     Last Name*
                   </label>
                   <input
                     style={{
                       width: "100%",
                       marginBottom: "5px",
-                      background: "transparent",
-                      color: "#404040",
-                      border: "1px solid #C8C8C8",
+                      background: "#1E1E23",
+                      color: "#fff",
                       padding: "10px",
                       marginTop: "10px",
-                      borderRadius: "2px",
+                      borderRadius: "5px",
                     }}
                     //   placeholder="Last Name"
                     {...register("lastName", {
@@ -338,19 +377,24 @@ const Contact = () => {
                 }}
               >
                 <Box width={"100%"} minH={"120px"}>
-                  <label style={{ color: "#404040", fontFamily: "Asap" }}>
-                    E-mail Address*
+                  <label
+                    style={{
+                      fontSize: "22px",
+                      color: "#fff",
+                      fontFamily: "Poppins",
+                    }}
+                  >
+                    Email*
                   </label>
                   <input
                     style={{
                       width: "100%",
                       marginBottom: "5px",
-                      background: "transparent",
-                      color: "#404040",
-                      border: "1px solid #C8C8C8",
+                      background: "#1E1E23",
+                      color: "#fff",
                       padding: "10px",
                       marginTop: "10px",
-                      borderRadius: "2px",
+                      borderRadius: "5px",
                     }}
                     //   placeholder="Email"
                     type="email"
@@ -370,19 +414,24 @@ const Contact = () => {
                 </Box>
 
                 <Box width={"100%"} minH={"120px"}>
-                  <label style={{ color: "#404040", fontFamily: "Asap" }}>
-                    Phone Number*
+                  <label
+                    style={{
+                      fontSize: "22px",
+                      color: "#fff",
+                      fontFamily: "Poppins",
+                    }}
+                  >
+                    Phone*
                   </label>
                   <input
                     style={{
                       width: "100%",
                       marginBottom: "5px",
-                      background: "transparent",
-                      color: "#404040",
-                      border: "1px solid #C8C8C8",
+                      background: "#1E1E23",
+                      color: "#fff",
                       padding: "10px",
                       marginTop: "10px",
-                      borderRadius: "2px",
+                      borderRadius: "5px",
                     }}
                     //   placeholder="Phone"
                     type="tel"
@@ -409,6 +458,52 @@ const Contact = () => {
                   )}
                 </Box>
               </Box>
+              <Box width={"100%"} minH={"120px"}>
+                <label
+                  style={{
+                    fontSize: "22px",
+                    color: "#fff",
+                    fontFamily: "Poppins",
+                  }}
+                >
+                  Choose type of inquiry
+                </label>
+
+                <Controller
+                  name="selectOption"
+                  control={control}
+                  defaultValue=""
+                  rules={{ required: "Please select an option" }}
+                  render={({ field }) => (
+                    <select
+                      {...field}
+                      placeholder="Select option"
+                      style={{
+                        width: "100%",
+                        marginBottom: "5px",
+                        background: "#1E1E23",
+                        color: "#fff",
+                        padding: "15px",
+                        marginTop: "10px",
+                        borderRadius: "5px",
+                        textAlign: "left",
+                      }}
+                    >
+                      <option value="" disabled>
+                        Select Options
+                      </option>
+                      <option value="option1">Option 1</option>
+                      <option value="option2">Option 2</option>
+                      <option value="option3">Option 3</option>
+                    </select>
+                  )}
+                />
+                {errors.selectOption && (
+                  <p style={{ fontSize: "13px", color: "red" }}>
+                    {errors.selectOption.message}
+                  </p>
+                )}
+              </Box>
             </Box>
             <Container
               maxW="container.lg"
@@ -422,86 +517,71 @@ const Contact = () => {
                 },
               }}
             >
-              <label style={{ color: "#404040", fontFamily: "Asap" }}>
+              <label
+                style={{
+                  fontSize: "22px",
+                  color: "#fff",
+                  fontFamily: "Poppins",
+                }}
+              >
                 Message*
               </label>
               <Textarea
                 placeholder="Type your message here..."
                 size="xl"
                 resize="vertical"
-                minH={"100px"}
+                minH={"200px"}
                 padding={"1rem"}
-                color={"#404040"}
+                color={"#fff"}
+                backgroundColor={"#1E1E23"}
+                border={"none"}
                 marginTop={"10px"}
-                border={"1px solid #C8C8C8"}
-                borderRadius="2px"
+                borderRadius="5px"
                 type="text"
                 required
                 {...register("Text", { required: true })}
               />
+              <Button
+                type="submit"
+                isLoading={isLoading}
+                loadingText="Submitting"
+                fontFamily={"poppins"}
+                fontSize={"22px"}
+                variant="outline"
+                margin={"4rem 0"}
+                background={"#DE858E"}
+                minWidth={"210px"}
+                color={"#fff"}
+                fontWeight={"400"}
+                minHeight={"55px"}
+                padding={"0rem 2rem 0rem 2rem"}
+                _hover={{
+                  background: "#ef843c",
+                  color: "#fff",
+                }}
+              >
+                Submit
+              </Button>
             </Container>
-
-            {/* <textarea
-              style={{
-                resize: "none",
-                minHeight: "130px",
-                padding: "1rem",
-                color: '"#404040"',
-                marginTop: "20px",
-                border: "1px solid #C8C8C8",
-                borderRadius: "2px",
-                type: "text",
-                width: "87%",
-                display: "block",
-                margin: "0rem 4rem 0rem 4rem",
-              }}
-              {...register("textarea", {
-                required: "This field is required",
-              })}
-            /> */}
-
-            {/* <input
-              type="submit"
-              style={{
-                padding: "10px 20px",
-                color: "#fff",
-                background: "#F46E15",
-                minWidth: "255px",
-                cursor: "pointer",
-                margin: "3rem 0",
-                borderRadius: "2px",
-              }}
-            /> */}
-            <Button
-              type="submit"
-              isLoading={isLoading}
-              loadingText="Submitting"
-              // colorScheme="teal"
-              variant="outline"
-              margin={"2rem 0"}
-              background={"#F46E15"}
-              minWidth={"255px"}
-              color={"#fff"}
-              fontWeight={"500"}
-              minHeight={"55px"}
-              _hover={{
-                background: "#ef843c",
-                color: "#fff",
-              }}
-            >
-              Submit
-            </Button>
           </form>
         </Container>
       </Container>
 
       <Modal isOpen={isOpen}>
         <ModalOverlay />
-        <ModalContent>
+        <ModalContent backgroundColor="#1E1E23" color="#fff">
           <ModalHeader>Success!</ModalHeader>
           <ModalBody>Your form has been submitted successfully.</ModalBody>
           <ModalFooter>
-            <Button colorScheme="blue" onClick={onClose}>
+            <Button
+              backgroundColor={"#DE858E"}
+              color="#fff"
+              onClick={onClose}
+              _hover={{
+                backgroundColor: "#DE858E",
+                color: "#fff",
+              }}
+            >
               Close
             </Button>
           </ModalFooter>

src/components/Footer/Footer.jsx

@@ -38,8 +38,8 @@ const Footer = () => {
           padding={"4rem"}
           sx={{
             "@media (max-width: 1024px)": {},
-            "@media (max-width: 412px)": {
-              padding: "2rem",
+            "@media (max-width: 535px)": {
+              padding: "1rem",
             },
           }}
         >
@@ -257,7 +257,7 @@ const Footer = () => {
             "@media (max-width: 600px)": {
               flexDirection: "column",
               alignItems: "flex-start",
-              padding: "2rem",
+              padding: "1rem",
             },
           }}
         >

src/components/HomePage/Client.jsx

@@ -28,10 +28,11 @@ const Client = () => {
   };
   return (
     <Box
-      height={"90vh"}
+      height={"auto"}
       background={"#101015"}
       backgroundSize={"cover"}
       backgroundRepeat={"no-repeat"}
+      padding={"3rem"}
       sx={{
         "@media (max-width: 1024px)": {
           height: "auto",
@@ -44,7 +45,7 @@ const Client = () => {
       <Text
         as={"h2"}
         paddingTop={"2rem"}
-        paddingBottom={"2rem"}
+        paddingBottom={"4rem"}
         fontWeight={700}
         fontSize={"40px"}
         textAlign={"center"}
@@ -65,7 +66,7 @@ const Client = () => {
         maxW="container.xl"
         display={"grid"}
         placeContent={"center"}
-        height={"65vh"}
+        paddingBottom={"3rem"}
         sx={{
           "@media (max-width: 1024px)": {
             height: "40vh",

src/components/HomePage/Resources.jsx

@@ -65,6 +65,7 @@ const Resources = () => {
         <Box
           display={"flex"}
           alignItems={"center"}
+          justifyContent={"flex-end"}
           gap={"25px"}
           overflowX={"auto"}
           sx={{
@@ -95,7 +96,7 @@ const Resources = () => {
             overflow={"hidden"}
             sx={{
               "::before": {
-                content: '""',
+                content: '""',  
                 position: "absolute",
                 top: "50%",
                 left: "50%",

src/components/HomePage/Stats.jsx

@@ -9,15 +9,17 @@ const StatsContent = {
 
 const Stats = () => {
   const { ref, inView } = useInView({
-    threshold: 0.3,
+    threshold: 0.5,
     triggerOnce: false,
   });
   return (
     <Box
-      height={"80vh"}
+      ref={ref}
+      height={"auto"}
       backgroundImage={`url(${banner})`}
       backgroundSize={"cover"}
       backgroundRepeat={"no-repeat"}
+      padding={"3rem"}
       sx={{
         "@media (max-width: 1024px)": {
           height: "auto",
@@ -25,7 +27,7 @@ const Stats = () => {
         "@media (max-width: 600px)": {
           fontSize: "28px",
         },
-      }}
+      }} 
     >
       <Text
         as={"h2"}
@@ -49,7 +51,7 @@ const Stats = () => {
         maxW="container.lg"
         display={"grid"}
         placeContent={"center"}
-        height={"50vh"}
+        paddingBottom="3rem"
         sx={{
           "@media (max-width: 996px)": {
             height: "auto",
@@ -79,7 +81,6 @@ const Stats = () => {
         >
           <Box
             color={"#fff"}
-            ref={ref}
             textAlign={"center"}
             position={"relative"}
             _before={{

src/components/HomePage/WhitePaper.jsx

@@ -10,7 +10,7 @@ const SectionContent = {
 const WhitePaper = () => {
   return (
     <Box
-      height={"50vh"}
+      height={"auto"}
       backgroundImage={`url(${banner})`}
       backgroundSize={"cover"}
       backgroundRepeat={"no-repeat"}
@@ -46,7 +46,6 @@ const WhitePaper = () => {
         textAlign={"center"}
         display={"grid"}
         placeContent={"center"}
-        height={"30vh"}
         paddingBottom={"3rem"}
       >
         <Text

src/components/LearnPage/Faq.jsx

@@ -1,4 +1,4 @@
-import banner from "../../assets/images/faqBg.png";
+import banner from "../../assets/images/faqBg.webp";
 import {
   Accordion,
   AccordionButton,
@@ -55,7 +55,7 @@ export const Faq = () => {
     >
       <Container
         maxW={"container.xl"}
-        padding={"5rem"}
+        padding={"5rem 4rem"}
         sx={{
           "@media (max-width: 435px)": {
             padding: "2rem",

src/components/LearnPage/GetStarted.jsx

@@ -10,7 +10,7 @@ const GetStarted = () => {
     <Box backgroundColor={"#000"}>
       <Container
         maxW={"container.xl"}
-        padding={"0 5rem"}
+        padding={"4rem 4rem"}
         sx={{
           "@media (max-width: 1024px)": {
             padding: "3rem",
@@ -87,7 +87,7 @@ const GetStarted = () => {
                 "@media (max-width: 375px)": {},
               }}
             >
-              <TabPanel>
+              <TabPanel padding={"0px"}>
                 <Image
                   fit="cover"
                   src={getStarted}
@@ -99,7 +99,7 @@ const GetStarted = () => {
                   }}
                 />
               </TabPanel>
-              <TabPanel>
+              <TabPanel padding={"0px"}>
                 <Image
                   fit="cover"
                   src={getStarted2}
@@ -111,7 +111,7 @@ const GetStarted = () => {
                   }}
                 />
               </TabPanel>
-              <TabPanel>
+              <TabPanel padding={"0px"}>
                 <Image
                   fit="cover"
                   src={getStarted}
@@ -123,7 +123,7 @@ const GetStarted = () => {
                   }}
                 />
               </TabPanel>
-              <TabPanel>
+              <TabPanel padding={"0px"}>
                 <Image
                   fit="cover"
                   src={getStarted3}

src/components/LearnPage/LearnBanner.jsx

@@ -1,5 +1,5 @@
 import { Box, Button, Container, Text } from "@chakra-ui/react";
-import banner from "../../assets/images/learnBanner.png";
+import banner from "../../assets/images/learnBanner.webp";
 
 const BannerContent = [
   {
@@ -38,7 +38,7 @@ const LearnBanner = () => {
         maxW="container.xl"
         textAlign={"left"}
         marginTop={"2rem"}
-        paddingLeft={"5rem"}
+        paddingLeft={"3.5rem"}
         sx={{
           "@media (max-width: 435px)": {
             paddingLeft: "2rem",
@@ -57,7 +57,7 @@ const LearnBanner = () => {
             as={"h2"}
             fontWeight={700}
             fontSize={"60px"}
-            textTransform={"upperCase"}
+            textTransform={"Capitalize"}
             color={"#DE858E"}
             sx={{
               "@media (max-width: 996px)": {
@@ -108,7 +108,7 @@ const LearnBanner = () => {
         maxW="container.xl"
         textAlign={"left"}
         marginTop={"3rem"}
-        paddingLeft={"5rem"}
+        paddingLeft={"3.5rem"}
         sx={{
           "@media (max-width: 435px)": {
             paddingLeft: "2rem",

src/components/LearnPage/LearnDev.jsx

@@ -62,7 +62,7 @@ const LearnDev = () => {
           as={"h2"}
           paddingTop={"2rem"}
           paddingBottom={"2rem"}
-          paddingLeft={"4rem"}
+          paddingLeft={"3rem"}
           fontWeight={700}
           fontSize={"40px"}
           textAlign={"left"}
@@ -85,8 +85,9 @@ const LearnDev = () => {
           {Content.span}
         </Text>
       </Container>
-      <Box
-        paddingLeft={"7rem"}
+      <Container
+        maxW="container.xl"
+        paddingLeft={"4rem"}
         paddingBottom={"2rem"}
         // height={"50vh"}
         sx={{
@@ -119,7 +120,7 @@ const LearnDev = () => {
             />
           ))}
         </Box>
-      </Box>
+      </Container>
     </Box>
   );
 };

src/components/LearnPage/WhyRubix.jsx

@@ -6,7 +6,7 @@ import {
   AccordionPanel,
   AccordionIcon,
 } from "@chakra-ui/react";
-import bg from "../../assets/images/whyRubix.png";
+import bg from "../../assets/images/whyRubix.webp";
 import cube from "../../assets/images/cube.png";
 
 const accordion = [
@@ -49,7 +49,7 @@ const WhyRubix = () => {
     >
       <Container
         maxW={"container.xl"}
-        padding={"5rem"}
+        padding={"5rem 4rem"}
         sx={{
           "@media (max-width: 1024px)": {
             padding: "3rem",

src/components/NavBar/NavBar.jsx

@@ -84,7 +84,7 @@ const NavBar = () => {
             zIndex={"999"}
             width={"100%"}
             top={"0px"}
-            padding={"2rem 0rem"}
+            padding={"2.5rem 0 2rem 0"}
             sx={{
               "@media (max-width: 996px)": {
                 justifyContent: "space-between",
@@ -153,7 +153,7 @@ const NavBar = () => {
               <Link to="/" className="link" style={{ position: "relative" }}>
                 USE CASES
               </Link>
-              <Link to="/" className="link" style={{ position: "relative" }}>
+              <Link to="/community" className="link" style={{ position: "relative" }}>
                 COMMUNITY
               </Link>
               <Link to="/" className="link" style={{ position: "relative" }}>

src/components/SubnetsComponent/NewSubnetComp.jsx

@@ -18,11 +18,11 @@ const SubnetContent = {
   heading: `decentralised Auto Syncing subnets`,
 };
 
-export const NewSubnetComp = ({ showSubnet }) => {
+export const NewSubnetComp = () => {
   const firstBoxRef = useRef(null);
   const secondBoxRef = useRef(null);
   const thirdBoxRef = useRef(null);
-  const mainBox = useRef(null);
+  const textBox = useRef(null);
 
   useEffect(() => {
     const animateBox = (boxRef) => {
@@ -40,13 +40,36 @@ export const NewSubnetComp = ({ showSubnet }) => {
         {
           position: "sticky",
           top: "-116px",
+          opacity: 0,
+          autoAlpha: 1,
         },
         {
-          transform: "translateX(0)",
+          // transform: "translateX(0)",
+          // duration: 0.5,
+          opacity: 1,
+          duration: 1,
+          autoAlpha: 0,
+        }
+      );
+      const tl2 = gsap.timeline({
+        scrollTrigger: {
+          trigger: textBox.current,
+          start: "top center+=50",
+          end: "bottom bottom+=100",
+          scrub: 1,
+          markers: false,
+        },
+      });
+      tl2.fromTo(
+        textBox.current,
+        {
+          opacity: 0,
+        },
+        {
+          opacity: 1,
           duration: 0.5,
         }
       );
-
       return () => {
         // Clean up
         tl.kill();
@@ -55,33 +78,10 @@ export const NewSubnetComp = ({ showSubnet }) => {
     animateBox(firstBoxRef);
     animateBox(secondBoxRef);
     animateBox(thirdBoxRef);
-
-    // const tl2 = gsap.timeline({
-    //   scrollTrigger: {
-    //     trigger: mainBox.current,
-    //     start: "top top",
-    //     end: "bottom bottom",
-    //     scrub: 1,
-    //     markers: false,
-    //   },
-    // });
-    // tl2.fromTo(
-    //   mainBox.current,
-    //   {
-    //     position: "sticky",
-    //     top: 60,
-    //     left: 0,
-    //     duration: 0.5,
-    //   },
-    //   {
-    //     position: "relative",
-    //     duration: 0.5,
-    //   }
-    // );
   }, []);
 
   return (
-    <Box ref={mainBox} backgroundColor={"#000"}>
+    <Box backgroundColor={"#000"}>
       <Box
         // height={"100vh"}
         backgroundColor={"#000"}
@@ -100,6 +100,7 @@ export const NewSubnetComp = ({ showSubnet }) => {
             fontSize={"40px"}
             textTransform={"capitalize"}
             color={"#fff"}
+            ref={textBox}
             sx={{
               "@media (max-width: 1024px)": {},
               "@media (max-width: 600px)": {
@@ -118,6 +119,7 @@ export const NewSubnetComp = ({ showSubnet }) => {
             position={"relative"}
             padding={"0 4rem"}
             paddingBottom={"50px"}
+            ref={textBox}
           >
             <Image
               src={cube}
@@ -148,6 +150,7 @@ export const NewSubnetComp = ({ showSubnet }) => {
               textAlign={"left"}
               position={"relative"}
               width={"383px"}
+              ref={textBox}
             >
               <Component1 />
             </Box>
@@ -158,6 +161,7 @@ export const NewSubnetComp = ({ showSubnet }) => {
               textAlign={"left"}
               position={"relative"}
               width={"383px"}
+              ref={textBox}
             >
               <Component2 />
             </Box>
@@ -168,6 +172,7 @@ export const NewSubnetComp = ({ showSubnet }) => {
               textAlign={"left"}
               position={"relative"}
               width={"383px"}
+              ref={textBox}
             >
               <Component3 />
             </Box>
@@ -177,6 +182,7 @@ export const NewSubnetComp = ({ showSubnet }) => {
               textAlign={"left"}
               position={"relative"}
               width={"383px"}
+              ref={textBox}
             >
               <Component4 />
             </Box>
@@ -190,104 +196,118 @@ export const NewSubnetComp = ({ showSubnet }) => {
         paddingBottom={"2rem"}
         ref={secondBoxRef}
       >
-        <Fade in={true}>
-          <Text
-            as={"h2"}
-            paddingTop={"2rem"}
-            fontWeight={700}
-            fontSize={"40px"}
-            textTransform={"capitalize"}
-            color={"#fff"}
-            marginBottom={"5rem"}
-            textAlign={"center"}
-            sx={{
-              "@media (max-width: 1024px)": {},
-              "@media (max-width: 600px)": {
-                fontSize: "28px",
-              },
-            }}
-          >
-            With Unmatched Privacy and Scalability
-          </Text>
-          <Container maxW="container.xl" textAlign={"center"}>
-            <Box display={"flex"} alignItems={"center"} gap={"8rem"}>
-              <Box>
-                <Image
-                  src={cube}
-                  width={"480px"}
-                  //   position={"absolute"}
-                  left={"0"}
-                  right={"0"}
-                  marginLeft={"auto"}
-                  marginRight={"auto"}
-                  cursor={"pointer"}
-                  transform="translateY(-10%)"
-                  animation="floatAnimation 2s infinite alternate"
-                  // onClick={click}
-                  sx={{
-                    "@keyframes floatAnimation": {
-                      "0%": {
-                        transform: "translateY(0)",
-                      },
-                      "100%": {
-                        transform: "translateY(-20px)",
-                      },
+        <Text
+          ref={textBox}
+          as={"h2"}
+          paddingTop={"2rem"}
+          fontWeight={700}
+          fontSize={"40px"}
+          textTransform={"capitalize"}
+          color={"#fff"}
+          marginBottom={"5rem"}
+          textAlign={"center"}
+          sx={{
+            "@media (max-width: 1024px)": {},
+            "@media (max-width: 600px)": {
+              fontSize: "28px",
+            },
+          }}
+        >
+          With Unmatched Privacy and Scalability
+        </Text>
+        <Container maxW="container.xl" textAlign={"center"}>
+          <Box display={"flex"} alignItems={"center"} gap={"8rem"}>
+            <Box ref={textBox}>
+              <Image
+                src={cube}
+                width={"480px"}
+                //   position={"absolute"}
+                left={"0"}
+                right={"0"}
+                marginLeft={"auto"}
+                marginRight={"auto"}
+                cursor={"pointer"}
+                transform="translateY(-10%)"
+                animation="floatAnimation 2s infinite alternate"
+                // onClick={click}
+                sx={{
+                  "@keyframes floatAnimation": {
+                    "0%": {
+                      transform: "translateY(0)",
                     },
-                  }}
-                />
+                    "100%": {
+                      transform: "translateY(-20px)",
+                    },
+                  },
+                }}
+              />
+            </Box>
+            <Box width={"50%"}>
+              <Box
+                color={"#E1E1E1"}
+                textAlign={"left"}
+                marginBottom={"2rem"}
+                ref={textBox}
+              >
+                <Text
+                  as={"h2"}
+                  fontSize={"24px"}
+                  color={"#fff"}
+                  marginBottom={"10px"}
+                >
+                  01. Decentralisation
+                </Text>
+                <Text fontSize={"18px"}>
+                  Rubix Decentralised Identity( DID) issued at L1 is the
+                  foundation for building digital ownership enhancing
+                  applications.
+                </Text>
               </Box>
-              <Box width={"50%"}>
-                <Box color={"#E1E1E1"} textAlign={"left"} marginBottom={"2rem"}>
-                  <Text
-                    as={"h2"}
-                    fontSize={"24px"}
-                    color={"#fff"}
-                    marginBottom={"10px"}
-                  >
-                    01. Decentralisation
-                  </Text>
-                  <Text fontSize={"18px"}>
-                    Rubix Decentralised Identity( DID) issued at L1 is the
-                    foundation for building digital ownership enhancing
-                    applications.
-                  </Text>
-                </Box>
-                <Box color={"#E1E1E1"} textAlign={"left"} marginBottom={"2rem"}>
-                  <Text
-                    as={"h2"}
-                    fontSize={"24px"}
-                    color={"#fff"}
-                    marginBottom={"10px"}
-                  >
-                    02. Ultra Scalability
-                  </Text>
-                  <Text fontSize={"18px"}>
-                    Unlike monolithic chains which become centralized and
-                    introduce latency to achieve high throughput, in the Rubix
-                    object chain architecture, where mobile nodes have real time
-                    full state data, the network TPS will increase with increase
-                    in numbers of nodes.
-                  </Text>
-                </Box>
-                <Box color={"#E1E1E1"} textAlign={"left"} marginBottom={"2rem"}>
-                  <Text
-                    as={"h2"}
-                    fontSize={"24px"}
-                    color={"#fff"}
-                    marginBottom={"10px"}
-                  >
-                    03. Data Security and Privacy
-                  </Text>
-                  <Text fontSize={"18px"}>
-                    Rubix Decentralised Identity(DID) issued at L1 is the
-                    foundation for building digital ownership enhancing
-                    applications
-                  </Text>
-                </Box>
+              <Box
+                color={"#E1E1E1"}
+                textAlign={"left"}
+                marginBottom={"2rem"}
+                ref={textBox}
+              >
+                <Text
+                  as={"h2"}
+                  fontSize={"24px"}
+                  color={"#fff"}
+                  marginBottom={"10px"}
+                >
+                  02. Ultra Scalability
+                </Text>
+                <Text fontSize={"18px"}>
+                  Unlike monolithic chains which become centralized and
+                  introduce latency to achieve high throughput, in the Rubix
+                  object chain architecture, where mobile nodes have real time
+                  full state data, the network TPS will increase with increase
+                  in numbers of nodes.
+                </Text>
+              </Box>
+              <Box
+                color={"#E1E1E1"}
+                textAlign={"left"}
+                marginBottom={"2rem"}
+                ref={textBox}
+              >
+                <Text
+                  as={"h2"}
+                  fontSize={"24px"}
+                  color={"#fff"}
+                  marginBottom={"10px"}
+                >
+                  03. Data Security and Privacy
+                </Text>
+                <Text fontSize={"18px"}>
+                  Rubix Decentralised Identity(DID) issued at L1 is the
+                  foundation for building digital ownership enhancing
+                  applications
+                </Text>
               </Box>
             </Box>
-          </Container>
-        </Fade>
+          </Box>
+        </Container>
       </Box>
       <Box
         backgroundColor={"#000"}
@@ -332,7 +352,7 @@ export const NewSubnetComp = ({ showSubnet }) => {
                     Single Comprehensive Stack:
                   </Text>
                   <Text fontSize={"16px"}>
-                    Full Mobile node SDK, Smart Contracts, DID's, Secondary
+                    Full Mobile node SDK, Smart Contracts, DID&apos;s, Secondary
                     tokens ( FTs and NFTs) all in one place.
                   </Text>
                 </Box>

src/index.css

@@ -20,7 +20,7 @@
 }
 
 .rubix-text-large {
-  font-size: 22px !important;
+  font-size: 25px !important;
   font-family: "Poppins" !important;
   color: #fff !important;
 }

src/pages/Community.jsx

@@ -0,0 +1,26 @@
+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'
+import Footer from '../components/Footer/Footer'
+
+const Community = () => {
+  return (
+    <>
+      <CommunityBanner/>
+      <CommunityCard/>
+      <Place />
+      <Connect/>
+      <Happen />
+      <Insights/>
+      <LearnMore />
+      <Footer />
+    </>
+  )
+}
+
+export default Community

src/pages/Contact.jsx

@@ -1,5 +1,6 @@
 import { useEffect } from "react";
 import Form from "../components/Contact/Form";
+import Footer from "../components/Footer/Footer";
 
 const Contact = () => {
   useEffect(() => {
@@ -9,6 +10,7 @@ const Contact = () => {
   return (
     <>
       <Form />
+      <Footer />
     </>
   );
 };

src/pages/LearnPage.jsx

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