community page

package.json

@@ -15,10 +15,12 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
     "@fontsource/poppins": "^5.0.12",
+    "@gsap/react": "^2.1.0",
     "framer-motion": "^11.0.15",
     "react": "^18.2.0",
     "react-countup": "^6.5.2",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.51.2",
     "react-intersection-observer": "^9.8.1",
     "react-router-dom": "^6.22.3",
     "swiper": "^11.1.0"
@@ -27,6 +29,10 @@
     "@types/react": "^18.2.64",
     "@types/react-dom": "^18.2.21",
     "@vitejs/plugin-react-swc": "^3.5.0",
+    "eslint": "^8.55.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
     "vite": "^5.1.6"
   }
 }

src/App.jsx

@@ -9,6 +9,7 @@ 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(
   createRoutesFromElements(
@@ -17,6 +18,7 @@ const router = createBrowserRouter(
       <Route path="LearnPage" element={<LearnPage />} />
       <Route path="BuildPage" element={<BuildPage />} />
       <Route path="community" element={<Community />} />
+      <Route path="Contact" element={<Contact />} />
     </Route>
   )
 );

src/components/BuildPage/Connect.jsx

@@ -0,0 +1,216 @@
+/* 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={"#000"}
+      padding={"5rem"}
+      sx={{
+        "@media (max-width: 1024px)": {
+          height: "auto",
+        },
+        "@media (max-width: 600px)": {
+          fontSize: "28px",
+        },
+      }}
+    >
+      <Container maxW="container.xl">
+        <Text
+          className="rubix-text-title"
+          fontFamily={"Mona Sans"}
+          fontWeight={"700"}
+          //   fontSize={"40px"}
+          color={"#fff"}
+          textAlign={"center"}
+        >
+          Connect with Rubix community
+        </Text>
+      </Container>
+
+      <Container
+        maxW="container.xl"
+        justifyContent={"center"}
+        marginTop={"4rem"}
+        textAlign={"center"}
+      >
+        <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
+                    display={"flex"}
+                    justifyContent={"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 display={"grid"} 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 display={"grid"} placeContent={"center"}>
+                      <Image src={item.logo2} margin={"0 auto 20px auto"} />
+                      <Text className="rubix-text-small" fontWeight={"400"}>
+                        {item.social2}
+                      </Text>
+                    </Link>
+                    <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>
+                    {/* <>{console.log(item.logo1)}</> */}
+                  </CardBody>
+                </Card>
+              </Box>
+            </>
+          ))}
+        </SimpleGrid>
+        <Button
+          //   className="rubix-text-medium"
+          position={"relative"}
+          backgroundColor={"transparent"}
+          cursor={"pointer"}
+          transition="0.3s ease-in-out"
+          color={"#fff"}
+          height={"60px"}
+          fontFamily={"Poppins"}
+          fontWeight={"400"}
+          border={"1px solid white"}
+          borderRadius={"10px"}
+          fontSize={"20px"}
+          zIndex={"1"}
+          overflow={"hidden"}
+          marginTop={"4rem"}
+          textAlign={"center"}
+          padding={"0 2rem"}
+          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,
+          }}
+        >
+          Explore our community
+        </Button>
+      </Container>
+    </Box>
+  );
+};
+
+export default Connect;

src/components/BuildPage/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/BuildPage/Solve.jsx

@@ -0,0 +1,176 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable no-unused-vars */
+import {
+  Card,
+  CardHeader,
+  CardBody,
+  CardFooter,
+  Box,
+  Container,
+  SimpleGrid,
+  Heading,
+  Button,
+  Text,
+  Image,
+  Divider,
+  Collapse,
+} from "@chakra-ui/react";
+import image1 from "../../assets/images/dollar.png";
+import token from "../../assets/images/token.png";
+import collab from "../../assets/images/collab.png";
+import loyalty from "../../assets/images/loyalty.png";
+import logistics from "../../assets/images/logistics.png";
+import action from "../../assets/images/action.png";
+import { useState } from "react";
+
+const items = [
+  {
+    id: 1,
+    img: image1,
+    title: "DeFi Apps",
+    content: `Use Rubix to develop DeFi apps with improved payment processing,
+                money transfers, record keeping, and compliance reporting.</br>
+                </br>
+                Use Rubix to develop a variety of DeFi apps. Rubix can also help
+                you with improving payment processing, money transfers, record
+                keeping, and compliance reporting.`,
+  },
+  {
+    id: 2,
+    img: token,
+    title: "Tokenization",
+    content: `Rubix allows you to build ultra-scalable, interoperable, 
+    and permissioned networks across industries at low or no cost, without any intermediaries.</br>
+                </br>
+                Rubix allows you to build ultra-scalable, interoperable, and permissioned 
+                networks to build asset tokenization use cases across industries at low or no cost, without any intermediaries.
+`,
+  },
+  {
+    id: 3,
+    img: collab,
+    title: "Data Collaboration",
+    content: `Rubix in tandem with the right privacy-enhancing tools, 
+    can help organisations build trustless and permissionless data collaboration use cases.</br>
+              </br>
+              
+                Rubix in tandem with the right privacy-enhancing tools, can help organisations build trustless and permissionless data collaboration use cases.
+                The plethora of use cases could range from simple insight sharing to running acquisition campaigns on second-party data or 
+                non-competing brands building federated learning-based look-alike models without sharing PII data with each other.`,
+  },
+  {
+    id: 4,
+    img: loyalty,
+    title: "Brand Loyalty",
+    content: `RBuild token-gated NFTs to provide a tiered experience to different segments. Mount ROI enhancing cross-brand open loyalty programs.</br>
+              </br>
+              
+               Brands looking for innovative mechanisms to engage and retain customers can quickly build token-gated NFTs to provide a tiered experience to different segments.</br>
+               </br>
+               Using smart contracts and secondary tokens, ROI enhancing cross-brand open loyalty programs can easily be mounted
+               `,
+  },
+  {
+    id: 5,
+    img: logistics,
+    title: "Supply Chain And logistics",
+    content: `Supply chain management is complex. Leverage Rubix to track goods, automate your process, improve your workflow, share data transparently, increase efficiency, deliver quality, and save money.`,
+  },
+  {
+    id: 6,
+    img: action,
+    title: "ESG & Climate Action",
+    content: `Rubix has a number of applications, from decentralising and gamifying climate action to enabling businesses to meet net zero targets, streamlining ESG reporting, and improving carbon markets, climate finance, and beyond`,
+  },
+];
+
+const Solve = () => {
+  const [collapseStates, setCollapseStates] = useState(items.map(() => false));
+  const [expandedCardIndex, setExpandedCardIndex] = useState(null);
+  const handleToggle = (index) => {
+    setExpandedCardIndex((prevIndex) => (prevIndex === index ? null : index));
+    setCollapseStates((prevStates) => {
+      const updatedStates = [...prevStates]; // Create a copy of previous states
+      updatedStates[index] = !updatedStates[index]; // Toggle the state of the clicked card
+      return updatedStates; // Return the updated states
+    });
+  };
+
+  return (
+    <Box backgroundColor={"#00020E"} padding={"5rem"}>
+      <Container maxW="container.xl">
+        <Text
+          fontFamily={"Mona Sans"}
+          fontWeight={"700"}
+          fontSize={"40px"}
+          color={"#fff"}
+        >
+          Solving Real-World Issues And Business Problems
+        </Text>
+      </Container>
+      <Container
+        maxW="container.xl"
+        justifyContent={"center"}
+        marginTop={"4rem"}
+      >
+        <SimpleGrid
+          spacing={20}
+          templateColumns="repeat(auto-fill, minmax(300px, 1fr))"
+        >
+          {items.map((item, index) => (
+            <Card
+              backgroundColor={"#00020E"}
+              key={item.id}
+              //   marginBottom={"20px"}
+            >
+              <CardHeader paddingLeft={"0px"} paddingRight={"0px"}>
+                <Image src={item.img} marginBottom={"20px"} />
+                <Heading
+                  size="md"
+                  fontFamily={"Mona Sans"}
+                  fontWeight={"600"}
+                  fontSize={"20px"}
+                  color={"#fff"}
+                >
+                  {" "}
+                  {item.title}
+                </Heading>
+              </CardHeader>
+              <Divider color={"#fff"} />
+              <CardBody
+                paddingLeft={"0px"}
+                paddingRight={"0px"}
+                paddingBottom={"0px"}
+                color={"#E8E8E8"}
+                fontFamily={"Poppins"}
+                fontWeight={"500"}
+                fontSize={"17px"}
+              >
+                <Collapse startingHeight={55} in={expandedCardIndex === index}>
+                  <Text dangerouslySetInnerHTML={{ __html: item.content }} />
+                </Collapse>
+                <Button
+                  onClick={() => handleToggle(index)}
+                  background={"transparent"}
+                  color={"#fff"}
+                  fontFamily={"Poppins"}
+                  //   fontWeight={"500"}
+                  fontSize={"18px"}
+                  padding={"0px"}
+                  _hover={{
+                    background: "transparent",
+                  }}
+                >
+                  {expandedCardIndex === index ? "Less" : "....More"}
+                </Button>
+              </CardBody>
+              <CardFooter padding={"0px"}></CardFooter>
+            </Card>
+          ))}
+        </SimpleGrid>
+      </Container>
+    </Box>
+  );
+};
+
+export default Solve;

src/components/BuildPage/Tools.jsx

@@ -0,0 +1,182 @@
+/* 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 read from "../../assets/images/read.png";
+import support from "../../assets/images/support.png";
+import access from "../../assets/images/access.png";
+import wallet from "../../assets/images/wallet.png";
+import arrow from "../../assets/images/toolArrow.png";
+
+const items = [
+  {
+    id: 1,
+    img: read,
+    title: "Read our </br> Resources",
+  },
+  {
+    id: 2,
+    img: support,
+    title: "Reach Out To Us </br> For Support",
+  },
+  {
+    id: 3,
+    img: access,
+    title: "Access The </br> Developer Portal",
+  },
+  {
+    id: 4,
+    img: wallet,
+    title: "Wallet",
+  },
+];
+
+const Tools = () => {
+  return (
+    <Box
+      //   height={"80vh"}
+      backgroundImage={`url(${banner})`}
+      backgroundSize={"cover"}
+      backgroundRepeat={"no-repeat"}
+      padding={"5rem"}
+      sx={{
+        "@media (max-width: 1024px)": {
+          height: "auto",
+        },
+        "@media (max-width: 600px)": {
+          fontSize: "28px",
+        },
+      }}
+    >
+      <Container maxW="container.xl">
+        <Text
+          fontFamily={"Mona Sans"}
+          fontWeight={"700"}
+          fontSize={"40px"}
+          color={"#fff"}
+        >
+          Tools and resources to help you succeed
+        </Text>
+      </Container>
+      <Container
+        maxW="container.xl"
+        justifyContent={"center"}
+        marginTop={"4rem"}
+        textAlign={"center"}
+      >
+        <SimpleGrid
+          spacing={4}
+          templateColumns="repeat(auto-fill, minmax(250px, 1fr))"
+        >
+          {items.map((item) => (
+            <>
+              <Box
+                backgroundImage={
+                  "-webkit-gradient(linear, left bottom, left top, color-stop(0.33, #8D54F8), color-stop(0.67, #F8697A));"
+                }
+                padding={"1px"}
+                borderRadius={"10px"}
+                key={item.id}
+              >
+                <Card
+                  background={"#131313"}
+                  borderRadius={"10px"}
+                  minH={"270px"}
+                >
+                  <CardHeader display={"flex"} justifyContent={"center"}>
+                    <Image src={item.img} />
+                    {/* <Heading size="md"></Heading> */}
+                  </CardHeader>
+                  <CardBody
+                    padding={"0px"}
+                    display={"grid"}
+                    placeContent={"center"}
+                  >
+                    <Text
+                      color={"#fff"}
+                      fontFamily={"Poppins"}
+                      fontSize={"20px"}
+                      textAlign={"center"}
+                      fontWeight={"400"}
+                      dangerouslySetInnerHTML={{ __html: item.title }}
+                    />
+                  </CardBody>
+                  <CardFooter justifyContent={"center"} cursor={"pointer"}>
+                    <Image
+                      src={arrow}
+                      transition="all .5s"
+                      _hover={{
+                        transform: "rotate(45deg)",
+                      }}
+                    />
+                  </CardFooter>
+                </Card>
+              </Box>
+            </>
+          ))}
+        </SimpleGrid>
+        <Button
+          position={"relative"}
+          backgroundColor={"transparent"}
+          cursor={"pointer"}
+          transition="0.3s 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"}
+          marginTop={"4rem"}
+          textAlign={"center"}
+          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,
+          }}
+        >
+          Learn Now
+        </Button>
+      </Container>
+    </Box>
+  );
+};
+
+export default Tools;

src/components/BuildPage/WhyBuild.jsx

@@ -1,3 +1,5 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable no-unused-vars */
 import { Box, Container, Image, Text } from "@chakra-ui/react";
 import {
   Accordion,
@@ -12,40 +14,35 @@ import cube from "../../assets/images/cube.png";
 const accordion = [
   {
     id: 1,
-    title: `Unlimited concurrent transactions`,
-    content: `The Rubix network supports millions of concurrent transactions
-    by eliminating the need to queue transactions for the
-    blockchain.`,
+    title: `Truly Decentralised, Fully Scalable`,
+    content: `With its peer-to-peer and decentralised architecture, Rubix is a one-of-a-kind network that can rapidly grow its validators – a critical threshold to realise the full potential of Web3. A Rubix node can run on any laptop, computer, or server. Once Rubix is installed on a system, 
+    it’s automatically connected to the peers in the network to start validation.
+This is why Rubix is able to offer unlimited concurrent transactions and validators, 
+as each transaction happens between peers without the need to queue transactions to commit to the blockchain.
+`,
   },
   {
     id: 2,
-    title: `Scalability`,
-    content: `The Rubix network supports millions of concurrent transactions
-    by eliminating the need to queue transactions for the
-    blockchain.`,
+    title: `A Network of Subnets`,
+    content: `With its peer-to-peer and decentralised architecture, Rubix is a one-of-a-kind network that can rapidly grow its validators – a critical threshold to realise the full potential of Web3. 
+    A Rubix node can run on any laptop, computer, or server. 
+    Once Rubix is installed on a system, it’s automatically connected to the peers in the network to start validation.`,
   },
   {
     id: 3,
-    title: `Truly decentralised, secure and private`,
-    content: `The Rubix network supports millions of concurrent transactions
-    by eliminating the need to queue transactions for the
-    blockchain.`,
-  },
-  {
-    id: 4,
-    title: `ROI friendly`,
-    content: `The Rubix network supports millions of concurrent transactions
-    by eliminating the need to queue transactions for the
-    blockchain.`,
+    title: `Highly Secure`,
+    content: `With its peer-to-peer and decentralised architecture, Rubix is a one-of-a-kind network that can rapidly grow its validators – a critical threshold to realise the full potential of Web3. 
+    A Rubix node can run on any laptop, computer, or server.`,
   },
 ];
 
 const WhyBuild = () => {
   return (
     <Box
-      backgroundImage={`url(${bg})`}
-      backgroundRepeat={"no-repeat"}
-      backgroundSize={"cover"}
+      //   backgroundImage={`url(${bg})`}
+      //   backgroundRepeat={"no-repeat"}
+      //   backgroundSize={"cover"}
+      backgroundColor={"#000"}
     >
       <Container
         maxW={"container.xl"}
@@ -76,7 +73,7 @@ const WhyBuild = () => {
             },
           }}
         >
-          Why developers choose Rubix
+          Why Build On Rubix
         </Text>
         <Box
           display={"flex"}
@@ -137,7 +134,7 @@ const WhyBuild = () => {
                       fontFamily={"Poppins"}
                       fontWeight={"400"}
                       color={"#E8E8E8"}
-                      width={"80%"}
+                      width={"100%"}
                       fontSize={"21px"}
                       paddingLeft={"0px"}
                       sx={{

src/components/Card/CommCard.jsx

@@ -1,7 +1,7 @@
 /* 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 map from "../../assets/images/map-pin.png";
 import linkedin from "../../assets/images/linkedin.png";
 import games from "../../assets/images/discot.png";
 
@@ -52,7 +52,7 @@ const CommCard = ({ id, imageUrl, name, jobTitle, description, location }) => {
           <img src={games} style={{ minWidth: "42px", height: "42px" }} />
         </Text>
       </Text>
-      <Text
+      {/* <Text
         color={"#fff"}
         fontSize={"16px"}
         marginTop={"12px"}
@@ -60,19 +60,19 @@ const CommCard = ({ id, imageUrl, name, jobTitle, description, location }) => {
         display={"flex"}
       >
         <img src={map} style={{ marginRight: "10px" }} /> {location}
-      </Text>
+      </Text> */}
       <Text
         color={"#fff"}
-        fontSize={"20px"}
-        marginTop={"5px"}
+        fontSize={"16px"}
+        marginTop={"15px"}
         maxWidth={"460px"}
       >
         {name}
       </Text>
-      <Text fontSize={"16px"} color={"#DEDEDE"} margin={"8px 0px"}>
+      <Text fontSize={"12px"} color={"#DEDEDE"} margin={"4px 0px"}>
         {jobTitle}
       </Text>
-      <Text fontSize={"14px"} color={"#DEDEDE"} margin={"10px 0px"}>
+      <Text fontSize={"11px"} color={"#DEDEDE"} margin={"6px 0px"}>
         {description}
       </Text>
     </Box>

src/components/Card/ConnectCard.jsx

@@ -1,92 +0,0 @@
-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/HomeCard.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 /* eslint-disable no-unused-vars */
 import { Box, Container, Text, Image, Button } from "@chakra-ui/react";
 import cardimg from "../../assets/images/CardImg.png";

src/components/Card/InsightsCard.jsx

@@ -23,6 +23,7 @@ const InsightsCard = ({ key, title, text }) => {
         borderRadius={"10px"}
         minHeight={"430px"}
         key={key}
+        transition={"all 1s"}
       >
         <Text position={"relative"}>
           <Image src={cardimg} />
@@ -37,6 +38,7 @@ const InsightsCard = ({ key, title, text }) => {
               position={"absolute"}
               bottom={"14px"}
               left={"12px"}
+              transition={"all 1s"}
             >
               INSIGHT
             </Badge>

src/components/Community/CommunityBanner.jsx

@@ -40,15 +40,15 @@ const CommunityBanner = () => {
         marginTop={"2rem"}
         paddingLeft={"5rem"}
         sx={{
-          "@media (max-width: 435px)": {
-            paddingLeft: "2rem",
+          "@media (max-width: 500px)": {
+            paddingLeft: "1rem", // Correctly target paddingLeft instead of padding
           },
         }}
       >
         <Box
           width={"90%"}
           sx={{
-            "@media (max-width: 435px)": {
+            "@media (max-width: 500px)": {
               width: "100%",
             },
           }}
@@ -67,9 +67,10 @@ const CommunityBanner = () => {
                 fontSize: "28px",
                 marginBottom: "2rem",
               },
-              "@media (max-width: 412px)": {
-                fontSize: "24px",
+              "@media (max-width: 500px)": {
                 marginTop: "2rem",
+                marginBottom:'2rem',
+                fontSize:'36px'
               },
             }}
           >
@@ -83,19 +84,26 @@ const CommunityBanner = () => {
               {BannerContent[0].heading2}
             </span>
           </Text>
-          <Box marginTop={"1.5rem"} width={"80%"}>
+          <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: 600px)": {
-                  fontSize: "17px",
+                "@media (max-width: 500px)": {
+                  fontSize: "16px",
                 },
               }}
             >
@@ -103,21 +111,6 @@ const CommunityBanner = () => {
             </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"}
@@ -133,6 +126,7 @@ const CommunityBanner = () => {
           fontSize={"20px"}
           zIndex={"1"}
           overflow={"hidden"}
+          marginTop={"3rem"}
           sx={{
             "::before": {
               content: '""',
@@ -155,6 +149,13 @@ const CommunityBanner = () => {
               borderRadius: "0px",
               opacity: "1",
             },
+            "@media (max-width: 500px)": {
+              fontSize: "14px",
+              width:'230px',
+              height:'44px',
+              marginTop:"2rem"
+            },
+            
           }}
           _hover={{
             color: "#000",

src/components/Community/CommunityCard.jsx

@@ -20,6 +20,8 @@ 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 = [
@@ -42,11 +44,19 @@ const individuals = [
   {
     location: "india",
     name: "Hari Krishnan",
-    jobTitle: "Head of Technology",
+    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",
@@ -71,6 +81,14 @@ const individuals = [
       "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",
@@ -93,7 +111,15 @@ const individuals = [
     jobTitle: "Blockchain Engineer",
     description:
       "A highly keen blockchain engineer with a zeal for innovation who brings new ideas to the table.",
-    imageUrl: imgOne,
+    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,
   },
 ];
 
@@ -134,8 +160,8 @@ const CommunityCard = () => {
             Rubix Community
           </Text>
           <SimpleGrid
-             templateColumns="repeat(3, 1fr)" // Adjusted to display 3 cards in a row
-             gap={"4rem"}
+            spacing={10}
+            templateColumns="repeat(auto-fill, minmax(250px, 1fr))"
           >
             {individuals.map((item) => (
               <CommCard

src/components/Community/Connect.jsx

@@ -1,99 +1,163 @@
-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";
+/* 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 ConnectRubix = [
+const items = [
   {
-    id: "1",
-    title: "Developer Resources",
-    imageOne: Telegram,
-    imageTwo: Reddit,
-    textOne: "Telegram",
-    textTwo: "Reddit",
+    id: 1,
+    head: `Innovator Dialogue`,
+    logo1: tel,
+    logo2: red,
+    social1: `Telegram`,
+    social2: `Reddit`,
   },
   {
-    id: "2",
-    title: "Innovator Dialogue",
-    imageOne: Telegram,
-    imageTwo: GitHub,
-    textOne: "GitHub",
-    textTwo: "Discord",
+    id: 2,
+    head: `Developer Resources`,
+    logo1: git,
+    logo2: twitch,
+    social1: `GitHub`,
+    social2: `Discord`,
   },
   {
-    id: "3",
-    title: "Social Media",
-    imageOne: Twitter,
-    imageTwo: Facebook,
-    imageThree:linkedin,
-    textOne: "Twitter",
-    textTwo: "Facebook",
-    textThree:'LinkedIn',
+    id: 3,
+    head: `Social Media`,
+    logo1: twit,
+    logo2: face,
+    logo3: lin,
+    social1: `Twitter`,
+    social2: `Facebook`,
+    social3: `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)": {},
-          }}
+    <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"}
         >
-          <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>
+          Connect with Rubix community
+        </Text>
           <SimpleGrid
-            templateColumns="repeat(3, 1fr)" // Adjusted to display 3 cards in a row
-            gap={"1rem"}
+            spacing={4}
+            templateColumns="repeat(auto-fill, minmax(300px, 1fr))"
           >
-            {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}
-              />
+            {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>
-    </>
+      </Container>
+    </Box>
   );
 };
 

src/components/Community/Happen.jsx

@@ -51,7 +51,7 @@ const Happen = () => {
       <Container
         maxW={"container.xl"}
         padding={"0 5rem"}
-        paddingBottom={"5rem"}
+        paddingBottom={"2rem"}
         sx={{
           "@media (max-width: 1024px)": {
             padding: "3rem",
@@ -81,8 +81,8 @@ const Happen = () => {
         >
           <Box>
             <SimpleGrid
-              templateColumns="repeat(3, 1fr)" // Adjusted to display 3 cards in a row
-              gap={"1rem"}
+             spacing={4}
+             templateColumns="repeat(auto-fill, minmax(300px, 1fr))"
             >
               {Latest.map((item) => (
                 <HappenCard

src/components/Community/Insights.jsx

@@ -29,9 +29,10 @@ const Insights = () => {
   return (
     <Box
       // height={"100vh"}
-      background={"#000"}
+      background={"#101015"}
       backgroundSize={"cover"}
       backgroundRepeat={"no-repeat"}
+      paddingBottom={"4rem"}
     >
       <Box
         paddingLeft={"7rem"}
@@ -77,7 +78,8 @@ const Insights = () => {
             <InsightsCard key={item.id} title={item.title} text={item.text} />
           ))}
         </Box>
-        <Box textAlign={"center"} marginTop={"4rem"}>
+      </Box>
+      <Box textAlign={"center"} marginTop={"1rem"}>
           <Button
             position={"relative"}
             backgroundColor={"transparent"}
@@ -125,7 +127,6 @@ const Insights = () => {
             View More
           </Button>
         </Box>
-      </Box>
     </Box>
   );
 };

src/components/Community/LearnMore.jsx

@@ -1,17 +1,18 @@
 import { Box, Button, Container, Text } from "@chakra-ui/react";
-// import banner from "../../assets/images/moreBanner.png";
+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.`,
+  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})`}
+      backgroundImage={`url(${banner})`}
       backgroundSize={"cover"}
       backgroundRepeat={"no-repeat"}
       sx={{
@@ -59,6 +60,7 @@ const LearnMore = () => {
         >
           {SectionContent.subContent}
         </Text>
+        <Text>
         <Button
           fontSize={"20px"}
           //   minW={"284px"}
@@ -68,7 +70,52 @@ const LearnMore = () => {
           border={"1px solid #fff"}
           color={"#fff"}
           fontWeight={"400"}
-          margin={"0 auto"}
+          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"}
@@ -104,6 +151,7 @@ const LearnMore = () => {
         >
           {SectionContent.btnContent}
         </Button>
+        </Text>
       </Container>
     </Box>
   );

src/components/Contact/Form.jsx

@@ -0,0 +1,596 @@
+/* eslint-disable no-unused-vars */
+import {
+  Box,
+  Heading,
+  Text,
+  Container,
+  useDisclosure,
+  Image,
+  Badge,
+  Textarea,
+} from "@chakra-ui/react";
+
+import { Controller, useForm } from "react-hook-form";
+import { useEffect, useState } from "react";
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Button,
+} from "@chakra-ui/react";
+import BGimage from "../../assets/images/form.png";
+import formx from "../../assets/images/formx.png";
+import formfb from "../../assets/images/formfb.png";
+import forml from "../../assets/images/forml.png";
+import { Link } from "react-router-dom";
+import { ChevronDownIcon } from "@chakra-ui/icons";
+
+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);
+    try {
+      const formdata = new FormData();
+      formdata.append("Email", data.Email);
+      formdata.append("Phone", data.Phone);
+      formdata.append("Text", data.Text);
+      formdata.append("firstName", data.firstName);
+      formdata.append("lastName", data.lastName);
+      formdata.append(
+        "subject",
+        `Thank you for cantact us | ${data.firstName + " " + data.lastName}`
+      );
+      // formdata.append("html", html);
+      //   await contactUs(formdata);
+      setIsLoading(false);
+    } catch (error) {
+      setIsLoading(false);
+      console.log(error);
+    }
+    reset();
+    onOpen();
+  };
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+  return (
+    <Box
+      backgroundImage={`url(${BGimage})`}
+      paddingTop={"4rem"}
+      backgroundRepeat={"no-repeat"}
+      backgroundSize={"cover"}
+      backgroundPosition={"0 25%"}
+    >
+      <Container
+        maxW="container.xl"
+        backgroundColor={"transparent"}
+        display={"flex"}
+        justifyContent={"start"}
+        alignItems={"baseline"}
+        gap={"2rem"}
+        padding={"3rem 0rem"}
+        sx={{
+          "@media (max-width: 2160px)": {},
+          "@media (max-width: 1440px)": {},
+          "@media (max-width: 1080px)": {
+            flexDirection: "column",
+          },
+          "@media (max-width: 1024px)": {
+            flexDirection: "column",
+          },
+          "@media (max-width: 820px)": {},
+          "@media (max-width: 535px)": {},
+          "@media (max-width: 375px)": {},
+        }}
+      >
+        <Box
+          textAlign={"left"}
+          left={"0"}
+          right={"0"}
+          marginLeft={"auto"}
+          marginRight={"auto"}
+          zIndex={"99"}
+          backgroundColor={"#transparent"}
+          // width={"30%"}
+          padding={"4rem"}
+          minH={"583px"}
+          // flex={"1"}
+          sx={{
+            "@media (max-width: 2160px)": {
+              width: "60%",
+              minH: "621px",
+            },
+            "@media (max-width: 1440px)": {
+              width: "60%",
+            },
+            "@media (max-width: 1080px)": {
+              width: "42%",
+              minH: "490px",
+            },
+            "@media (max-width: 820px)": { width: "55%" },
+            "@media (max-width: 535px)": { width: "95%", padding: "10px" },
+            "@media (max-width: 375px)": {},
+          }}
+        >
+          <Badge
+            textAlign={"left"}
+            background={"transparent"}
+            color={"#fff"}
+            textTransform={"capitalize"}
+            fontWeight={"500"}
+            fontFamily={"Poppins"}
+            fontSize={"20px"}
+          >
+            Contact Us
+          </Badge>
+          <Box textAlign={"left"} marginBottom={"2rem"}>
+            <Text
+              as={"h2"}
+              className="rubix-text-title"
+              fontWeight={"700"}
+              textTransform={"capitalize"}
+              lineHeight={"54px"}
+              sx={{
+                "@media (max-width: 1024px)": {},
+                "@media (max-width: 768px)": {},
+                "@media (max-width: 535px)": {},
+              }}
+            >
+              Start reaching <br /> your digital goals
+            </Text>
+          </Box>
+          <Box marginBottom={"2rem"}>
+            <Badge
+              textAlign={"left"}
+              background={"transparent"}
+              color={"#fff"}
+              textTransform={"capitalize"}
+              fontWeight={"500"}
+              fontFamily={"Poppins"}
+              fontSize={"20px"}
+            >
+              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"}>
+              <Link
+                to={`mailto:${email}`}
+                style={{
+                  fontSize: "18px",
+                  color: "#969696",
+                  fontWeight: "400",
+                  fontFamily: "Poppins",
+                }}
+              >
+                914 578 1245
+              </Link>
+            </Box>
+          </Box>
+        </Box>
+
+        {/* Form */}
+        <Container
+          maxW="container.xl"
+          textAlign={"left"}
+          marginLeft={"auto"}
+          marginRight={"auto"}
+          backgroundColor={"transparent"}
+          sx={{
+            "@media (max-width: 1080px)": {
+              maxW: "container.lg",
+            },
+            "@media (max-width: 768px)": {},
+            "@media (max-width: 535px)": {},
+          }}
+          // flex={"1"}
+        >
+          <form onSubmit={handleSubmit(onSubmit)}>
+            <Box
+              padding={"0rem 2rem 0rem 2rem"}
+              gap={"20px"}
+              sx={{
+                "@media (max-width: 1024px)": {},
+                "@media (max-width: 768px)": {},
+                "@media (max-width: 535px)": {
+                  flexDirection: "column",
+                  gap: "0rem",
+                  padding: "0rem",
+                },
+              }}
+            >
+              <Box
+                textAlign={"left"}
+                display={"flex"}
+                justifyContent={"space-between"}
+                alignItems={"center"}
+                gap={"20px"}
+                sx={{
+                  "@media (max-width: 2160px)": {},
+                  "@media (max-width: 1440px)": {},
+                  "@media (max-width: 1080px)": {},
+                  "@media (max-width: 1024px)": {
+                    flexDirection: "column",
+                  },
+                  "@media (max-width: 820px)": {},
+                  "@media (max-width: 535px)": {
+                    gap: "0px",
+                  },
+                  "@media (max-width: 375px)": {},
+                }}
+              >
+                <Box width={"100%"} minH={"120px"}>
+                  <label
+                    style={{
+                      fontSize: "22px",
+                      color: "#fff",
+                      fontFamily: "Poppins",
+                    }}
+                  >
+                    First Name*
+                  </label>
+                  <input
+                    style={{
+                      width: "100%",
+                      marginBottom: "5px",
+                      background: "#1E1E23",
+                      color: "#fff",
+                      padding: "10px",
+                      marginTop: "10px",
+                      borderRadius: "5px",
+                    }}
+                    //   placeholder="First Name"
+                    {...register("firstName", {
+                      pattern: {
+                        value: /^[A-Za-z]+$/i,
+                        message:
+                          "Please enter a valid First Name with only letters",
+                      },
+                      required: true,
+                      maxLength: 20,
+                    })}
+                  />
+                  {errors.firstName && (
+                    <p style={{ fontSize: "13px", color: "red" }}>
+                      {errors.firstName.message}
+                    </p>
+                  )}
+                </Box>
+                <Box width={"100%"} minH={"120px"}>
+                  <label
+                    style={{
+                      fontSize: "22px",
+                      color: "#fff",
+                      fontFamily: "Poppins",
+                    }}
+                  >
+                    Last Name*
+                  </label>
+                  <input
+                    style={{
+                      width: "100%",
+                      marginBottom: "5px",
+                      background: "#1E1E23",
+                      color: "#fff",
+                      padding: "10px",
+                      marginTop: "10px",
+                      borderRadius: "5px",
+                    }}
+                    //   placeholder="Last Name"
+                    {...register("lastName", {
+                      pattern: {
+                        value: /^[A-Za-z]+$/i,
+                        message:
+                          "Please enter a valid Last Name with only letters",
+                      },
+                      required: true,
+                    })}
+                  />
+                  {errors.lastName && (
+                    <p style={{ fontSize: "13px", color: "red" }}>
+                      {errors.lastName.message}
+                    </p>
+                  )}
+                </Box>
+              </Box>
+
+              <Box
+                textAlign={"left"}
+                display={"flex"}
+                justifyContent={"space-between"}
+                alignItems={"center"}
+                gap={"20px"}
+                sx={{
+                  "@media (max-width: 2160px)": {},
+                  "@media (max-width: 1440px)": {},
+                  "@media (max-width: 1080px)": {},
+                  "@media (max-width: 1024px)": {
+                    flexDirection: "column",
+                  },
+                  "@media (max-width: 820px)": {},
+                  "@media (max-width: 535px)": {
+                    gap: "0px",
+                  },
+                  "@media (max-width: 375px)": {},
+                }}
+              >
+                <Box width={"100%"} minH={"120px"}>
+                  <label
+                    style={{
+                      fontSize: "22px",
+                      color: "#fff",
+                      fontFamily: "Poppins",
+                    }}
+                  >
+                    Email*
+                  </label>
+                  <input
+                    style={{
+                      width: "100%",
+                      marginBottom: "5px",
+                      background: "#1E1E23",
+                      color: "#fff",
+                      padding: "10px",
+                      marginTop: "10px",
+                      borderRadius: "5px",
+                    }}
+                    //   placeholder="Email"
+                    type="email"
+                    {...register("Email", {
+                      pattern: {
+                        value: /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
+                        message: "Please enter a valid email address",
+                      },
+                      required: true,
+                    })}
+                  />
+                  {errors.Email && (
+                    <p style={{ fontSize: "13px", color: "red" }}>
+                      {errors.Email.message}
+                    </p>
+                  )}
+                </Box>
+
+                <Box width={"100%"} minH={"120px"}>
+                  <label
+                    style={{
+                      fontSize: "22px",
+                      color: "#fff",
+                      fontFamily: "Poppins",
+                    }}
+                  >
+                    Phone*
+                  </label>
+                  <input
+                    style={{
+                      width: "100%",
+                      marginBottom: "5px",
+                      background: "#1E1E23",
+                      color: "#fff",
+                      padding: "10px",
+                      marginTop: "10px",
+                      borderRadius: "5px",
+                    }}
+                    //   placeholder="Phone"
+                    type="tel"
+                    {...register("Phone", {
+                      pattern: {
+                        value: /^[0-9]*$/,
+                        message: "Phone number should contain only digits",
+                      },
+                      minLength: {
+                        value: 10,
+                        message: "Phone number should be at least 10 digits",
+                      },
+                      maxLength: {
+                        value: 10,
+                        message: "Phone number should not exceed 10 digits",
+                      },
+                      required: true,
+                    })}
+                  />
+                  {errors.Phone && (
+                    <p style={{ fontSize: "13px", color: "red" }}>
+                      {errors.Phone.message}
+                    </p>
+                  )}
+                </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"
+              padding={"0rem 2rem 0rem 2rem"}
+              textAlign={"left"}
+              sx={{
+                "@media (max-width: 1024px)": {},
+                "@media (max-width: 768px)": {},
+                "@media (max-width: 535px)": {
+                  padding: "0rem",
+                },
+              }}
+            >
+              <label
+                style={{
+                  fontSize: "22px",
+                  color: "#fff",
+                  fontFamily: "Poppins",
+                }}
+              >
+                Message*
+              </label>
+              <Textarea
+                placeholder="Type your message here..."
+                size="xl"
+                resize="vertical"
+                minH={"200px"}
+                padding={"1rem"}
+                color={"#fff"}
+                backgroundColor={"#1E1E23"}
+                border={"none"}
+                marginTop={"10px"}
+                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>
+          </form>
+        </Container>
+      </Container>
+
+      <Modal isOpen={isOpen}>
+        <ModalOverlay />
+        <ModalContent backgroundColor="#1E1E23" color="#fff">
+          <ModalHeader>Success!</ModalHeader>
+          <ModalBody>Your form has been submitted successfully.</ModalBody>
+          <ModalFooter>
+            <Button
+              backgroundColor={"#DE858E"}
+              color="#fff"
+              onClick={onClose}
+              _hover={{
+                backgroundColor: "#DE858E",
+                color: "#fff",
+              }}
+            >
+              Close
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </Box>
+  );
+};
+
+export default Contact;

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/HomeBanner.jsx

@@ -1,7 +1,6 @@
 import { Box, Button, Text } from "@chakra-ui/react";
 import { Container } from "@chakra-ui/react";
 import banner from "../../assets/images/bannerBg.gif";
-import { ScaleFade } from "@chakra-ui/react";
 
 const BannerContent = [
   {

src/components/HomePage/Resources.jsx

@@ -65,6 +65,7 @@ const Resources = () => {
         <Box
           display={"flex"}
           alignItems={"center"}
+          justifyContent={"flex-end"}
           gap={"25px"}
           overflowX={"auto"}
           sx={{

src/components/HomePage/Stats.jsx

@@ -14,10 +14,11 @@ const Stats = () => {
   });
   return (
     <Box
-      height={"80vh"}
+      height={"auto"}
       backgroundImage={`url(${banner})`}
       backgroundSize={"cover"}
       backgroundRepeat={"no-repeat"}
+      padding={"3rem"}
       sx={{
         "@media (max-width: 1024px)": {
           height: "auto",
@@ -49,7 +50,7 @@ const Stats = () => {
         maxW="container.lg"
         display={"grid"}
         placeContent={"center"}
-        height={"50vh"}
+        paddingBottom="3rem"
         sx={{
           "@media (max-width: 996px)": {
             height: "auto",

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

@@ -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",

src/components/LearnPage/LearnBanner.jsx

@@ -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

@@ -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

@@ -11,6 +11,23 @@ const NavBar = () => {
   const [windowWidth, setWindowWidth] = useState(window.innerWidth);
   const location = useLocation();
 
+  const linkStyle = {
+    width: "0",
+  };
+
+  const active = {
+    content: "''",
+    position: "absolute",
+    bottom: "-5px",
+    left: "50%",
+    width: "130%",
+    height: "3px",
+    backgroundColor: "#DE858E",
+    borderRadius: "10px",
+    transform: "translateX(-50%)",
+    transition: "all .3s",
+  };
+
   useEffect(() => {
     const handleScroll = () => {
       const scrollPosition = window.scrollY;
@@ -41,6 +58,7 @@ const NavBar = () => {
             zIndex={"9999"}
             width={"100%"}
             textAlign={"right"}
+            padding={"0.5px 0px"}
           >
             <Box marginRight={"6%"}>
               <Link to="/" style={{ color: "#fff", marginRight: "2.5rem" }}>
@@ -51,6 +69,7 @@ const NavBar = () => {
               </Link>
             </Box>
           </Box>
+
           <Box
             display="flex"
             color={"#fff"}
@@ -60,12 +79,12 @@ const NavBar = () => {
               isScrolled ? "#0B0B27" : "transparent"
               // "linear-gradient(to right, #9c5d67, #86455f, #6b3059, #4c1f54, #23144e)"
             }
-            boxShadow={"0px 0px 4px 0px rgba(0, 0, 0, 0.25)"}
+            // boxShadow={"0px 0px 4px 0px rgba(0, 0, 0, 0.25)"}
             position={"fixed"}
             zIndex={"999"}
             width={"100%"}
             top={"0px"}
-            padding={"2rem 0rem"}
+            padding={"2.5rem 0 2rem 0"}
             sx={{
               "@media (max-width: 996px)": {
                 justifyContent: "space-between",
@@ -106,17 +125,48 @@ const NavBar = () => {
                 },
               }}
             >
-              <Link to="/LearnPage">LEARN</Link>
-              <Link to="/BuildPage">BUILD</Link>
-              <Link to="/">USE CASES</Link>
-              <Link to="/community">COMMUNITY</Link>
-              <Link to="/">FOUNDATION</Link>
               <Link
-                to="/"
+                to="/LearnPage"
+                className="link"
+                style={{ position: "relative" }}
+              >
+                LEARN
+                <span
+                  style={
+                    location.pathname === "/LearnPage" ? active : linkStyle
+                  }
+                />
+              </Link>
+
+              <Link
+                to="/BuildPage"
+                className="link"
+                style={{ position: "relative" }}
+              >
+                BUILD
+                <span
+                  style={
+                    location.pathname === "/BuildPage" ? active : linkStyle
+                  }
+                />
+              </Link>
+              <Link to="/" className="link" style={{ position: "relative" }}>
+                USE CASES
+              </Link>
+              <Link to="/community" className="link" style={{ position: "relative" }}>
+                COMMUNITY
+              </Link>
+              <Link to="/" className="link" style={{ position: "relative" }}>
+                FOUNDATION
+              </Link>
+              <Link
+                to="/Contact"
+                className="link"
                 style={{
                   display: "flex",
                   alignItems: "center",
                   gap: "5px",
+                  position: "relative",
                 }}
                 onMouseEnter={(e) => {
                   const arrowRight = document.querySelector(".arrow");
@@ -128,6 +178,9 @@ const NavBar = () => {
                 }}
               >
                 CONTACT US
+                <span
+                  style={location.pathname === "/Contact" ? active : linkStyle}
+                />
                 <Image
                   src={arrow}
                   className="arrow"

src/components/SubnetsComponent/NewSubnetComp.jsx

@@ -8,19 +8,84 @@ import { Component4 } from "./Component4";
 // import { SubnetPage2 } from "./SubnetPage2";
 import cube from "../../assets/images/cube.png";
 import stack from "../../assets/images/stackNew.webp";
-import { useInView, motion } from "framer-motion";
-import { Swiper, SwiperSlide } from "swiper/react";
-import "swiper/css";
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+
+// Initialize ScrollTrigger
+gsap.registerPlugin(ScrollTrigger);
+
 const SubnetContent = {
   heading: `decentralised Auto Syncing subnets`,
 };
 
 export const NewSubnetComp = ({ showSubnet }) => {
+  const firstBoxRef = useRef(null);
+  const secondBoxRef = useRef(null);
+  const thirdBoxRef = useRef(null);
+  const mainBox = useRef(null);
+
+  useEffect(() => {
+    const animateBox = (boxRef) => {
+      const tl = gsap.timeline({
+        scrollTrigger: {
+          trigger: boxRef.current,
+          start: "top center+=50",
+          end: "bottom bottom+=100",
+          scrub: 1,
+          markers: false,
+        },
+      });
+      tl.fromTo(
+        boxRef.current,
+        {
+          position: "sticky",
+          top: "-116px",
+        },
+        {
+          transform: "translateX(0)",
+          duration: 0.5,
+        }
+      );
+
+      return () => {
+        // Clean up
+        tl.kill();
+      };
+    };
+    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
         // height={"100vh"}
         backgroundColor={"#000"}
+        ref={firstBoxRef}
       >
         <Container
           maxW="container.xl"
@@ -123,6 +188,7 @@ export const NewSubnetComp = ({ showSubnet }) => {
         height={"auto"}
         padding={"0 5rem"}
         paddingBottom={"2rem"}
+        ref={secondBoxRef}
       >
         <Fade in={true}>
           <Text
@@ -213,9 +279,9 @@ export const NewSubnetComp = ({ showSubnet }) => {
                     03. Data Security and Privacy
                   </Text>
                   <Text fontSize={"18px"}>
-                    Ideal for building automated, tokenized , consent-based
-                    data/insight exchange apps which require secure,
-                    decentralised identity-based encryption 
+                    Rubix Decentralised Identity(DID) issued at L1 is the
+                    foundation for building digital ownership enhancing
+                    applications
                   </Text>
                 </Box>
               </Box>
@@ -228,6 +294,7 @@ export const NewSubnetComp = ({ showSubnet }) => {
         height={"auto"}
         padding={"0 5rem"}
         paddingBottom={"2rem"}
+        ref={thirdBoxRef}
       >
         <Fade in={true}>
           <Text
@@ -379,7 +446,7 @@ export const NewSubnetComp = ({ showSubnet }) => {
           </Container>
         </Fade>
       </Box>
-    </>
+    </Box>
   );
 };
 

src/index.css

@@ -6,6 +6,43 @@
   font-stretch: 75% 125%;
 }
 
+.rubix-text-heading {
+  font-size: 60px !important;
+  font-family: "Mona Sans";
+  color: #fff;
+}
+.rubix-text-subheading {
+  font-size: 25px !important;
+}
+.rubix-text-title {
+  font-size: 40px !important;
+  color: #fff;
+}
+
+.rubix-text-large {
+  font-size: 25px !important;
+  font-family: "Poppins" !important;
+  color: #fff !important;
+}
+.rubix-text-medium {
+  font-size: 20px !important;
+  font-family: "Poppins" !important;
+  color: #fff !important;
+}
+.rubix-text-small {
+  font-size: 17px !important;
+  font-family: "Poppins" !important;
+  color: #fff !important;
+}
+
+.link {
+  color: #ffff;
+}
+
+.link:hover {
+  color: #de858e;
+}
+
 /* html {
   font-family: "Mona Sans";
 } */

src/pages/BuildPage.jsx

@@ -1,12 +1,26 @@
-import React from "react";
 import BuildBanner from "../components/BuildPage/BuildBanner";
 import WhyBuild from "../components/BuildPage/WhyBuild";
+import Solve from "../components/BuildPage/Solve";
+import Tools from "../components/BuildPage/Tools";
+import Connect from "../components/BuildPage/Connect";
+import { useEffect } from "react";
+import Footer from "../components/Footer/Footer";
+import LearnMore from "../components/BuildPage/LearnMore";
 
 const BuildPage = () => {
+  useEffect(() => {
+    // Scroll to the top of the page when the component mounts
+    window.scrollTo(0, 0);
+  }, []);
   return (
     <>
       <BuildBanner />
       <WhyBuild />
+      <Solve />
+      <Tools />
+      <Connect />
+      <LearnMore />
+      <Footer />
     </>
   );
 };

src/pages/Community.jsx

@@ -6,6 +6,7 @@ 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 (
@@ -17,6 +18,7 @@ const Community = () => {
       <Happen />
       <Insights/>
       <LearnMore />
+      <Footer />
     </>
   )
 }

src/pages/Contact.jsx

@@ -0,0 +1,18 @@
+import { useEffect } from "react";
+import Form from "../components/Contact/Form";
+import Footer from "../components/Footer/Footer";
+
+const Contact = () => {
+  useEffect(() => {
+    // Scroll to the top of the page when the component mounts
+    window.scrollTo(0, 0);
+  }, []);
+  return (
+    <>
+      <Form />
+      <Footer />
+    </>
+  );
+};
+
+export default Contact;

src/pages/HomePage.jsx

@@ -25,6 +25,11 @@ const HomePage = () => {
     };
   }, []);
 
+  useEffect(() => {
+    // Scroll to the top of the page when the component mounts
+    window.scrollTo(0, 0);
+  }, []);
+
   const isMobile = windowWidth <= 996;
   return (
     <>

src/pages/LearnPage.jsx

@@ -1,3 +1,4 @@
+import { useEffect } from "react";
 import Footer from "../components/Footer/Footer";
 import { Faq } from "../components/LearnPage/Faq";
 import GetStarted from "../components/LearnPage/GetStarted";
@@ -6,6 +7,10 @@ import LearnDev from "../components/LearnPage/LearnDev";
 import WhyRubix from "../components/LearnPage/WhyRubix";
 
 const LearnPage = () => {
+  useEffect(() => {
+    // Scroll to the top of the page when the component mounts
+    window.scrollTo(0, 0);
+  }, []);
   return (
     <>
       <LearnBanner />