Build Page and form page development

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

@@ -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 Contact from "./pages/Contact";
 
 const router = createBrowserRouter(
   createRoutesFromElements(
@@ -15,6 +16,7 @@ const router = createBrowserRouter(
       <Route index element={<HomePage />} />
       <Route path="LearnPage" element={<LearnPage />} />
       <Route path="BuildPage" element={<BuildPage />} />
+      <Route path="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={"50vh"}
+      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/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/Contact/Form.jsx

@@ -0,0 +1,514 @@
+/* eslint-disable no-unused-vars */
+import {
+  Box,
+  Heading,
+  Text,
+  Container,
+  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 { useEffect, useState } from "react";
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Button,
+} from "@chakra-ui/react";
+import BGimage from "../../assets/images/form.png";
+// import { contactUs } from "../service/api";
+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";
+
+const Contact = () => {
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm();
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [isLoading, setIsLoading] = useState(false);
+
+  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"}
+    >
+      <Container
+        maxW="container.xl"
+        backgroundColor={"transparent"}
+        display={"flex"}
+        justifyContent={"start"}
+        alignItems={"start"}
+        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={"2rem"}
+          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%" },
+            "@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)": {
+                  padding: "1rem",
+                },
+              }}
+            >
+              Start reaching <br /> your digital goals
+            </Text>
+          </Box>
+          <Box>
+            <Badge
+              textAlign={"left"}
+              background={"transparent"}
+              color={"#fff"}
+              textTransform={"capitalize"}
+              fontWeight={"500"}
+              fontFamily={"Poppins"}
+              fontSize={"20px"}
+            >
+              Social Media
+            </Badge>
+          </Box>
+        </Box>
+
+        {/* Form */}
+        <Container
+          maxW="container.xl"
+          //   boxShadow={"0px 4px 18px 0px rgba(65, 65, 65, 0.25)"}
+          textAlign={"center"}
+          marginLeft={"auto"}
+          marginRight={"auto"}
+          // marginTop={"15rem"}
+          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 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)": {},
+                "@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={{ color: "#404040", fontFamily: "Asap" }}>
+                    First Name*
+                  </label>
+                  <input
+                    style={{
+                      width: "100%",
+                      marginBottom: "5px",
+                      background: "transparent",
+                      color: "#404040",
+                      border: "1px solid #C8C8C8",
+                      padding: "10px",
+                      marginTop: "10px",
+                      borderRadius: "2px",
+                    }}
+                    //   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={{ color: "#404040", fontFamily: "Asap" }}>
+                    Last Name*
+                  </label>
+                  <input
+                    style={{
+                      width: "100%",
+                      marginBottom: "5px",
+                      background: "transparent",
+                      color: "#404040",
+                      border: "1px solid #C8C8C8",
+                      padding: "10px",
+                      marginTop: "10px",
+                      borderRadius: "2px",
+                    }}
+                    //   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={{ color: "#404040", fontFamily: "Asap" }}>
+                    E-mail Address*
+                  </label>
+                  <input
+                    style={{
+                      width: "100%",
+                      marginBottom: "5px",
+                      background: "transparent",
+                      color: "#404040",
+                      border: "1px solid #C8C8C8",
+                      padding: "10px",
+                      marginTop: "10px",
+                      borderRadius: "2px",
+                    }}
+                    //   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={{ color: "#404040", fontFamily: "Asap" }}>
+                    Phone Number*
+                  </label>
+                  <input
+                    style={{
+                      width: "100%",
+                      marginBottom: "5px",
+                      background: "transparent",
+                      color: "#404040",
+                      border: "1px solid #C8C8C8",
+                      padding: "10px",
+                      marginTop: "10px",
+                      borderRadius: "2px",
+                    }}
+                    //   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>
+            <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={{ color: "#404040", fontFamily: "Asap" }}>
+                Message*
+              </label>
+              <Textarea
+                placeholder="Type your message here..."
+                size="xl"
+                resize="vertical"
+                minH={"100px"}
+                padding={"1rem"}
+                color={"#404040"}
+                marginTop={"10px"}
+                border={"1px solid #C8C8C8"}
+                borderRadius="2px"
+                type="text"
+                required
+                {...register("Text", { required: true })}
+              />
+            </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>
+          <ModalHeader>Success!</ModalHeader>
+          <ModalBody>Your form has been submitted successfully.</ModalBody>
+          <ModalFooter>
+            <Button colorScheme="blue" onClick={onClose}>
+              Close
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </Box>
+  );
+};
+
+export default Contact;

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/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,7 +79,7 @@ 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%"}
@@ -106,17 +125,48 @@ const NavBar = () => {
                 },
               }}
             >
-              <Link to="/LearnPage">LEARN</Link>
-              <Link to="/BuildPage">BUILD</Link>
-              <Link to="/">USE CASES</Link>
-              <Link to="/">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="/" 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: 22px !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/Contact.jsx

@@ -0,0 +1,16 @@
+import { useEffect } from "react";
+import Form from "../components/Contact/Form";
+
+const Contact = () => {
+  useEffect(() => {
+    // Scroll to the top of the page when the component mounts
+    window.scrollTo(0, 0);
+  }, []);
+  return (
+    <>
+      <Form />
+    </>
+  );
+};
+
+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 />