From 33b115c1dca0f4fb669ee5082d2a6177e40c1c33 Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Wed, 10 Apr 2024 20:37:28 +0530
Subject: [PATCH] community page

---
 src/components/Card/HappenCard.jsx            |  41 ++-
 src/components/Card/InsightsCard.jsx          |  30 ++-
 src/components/Card/PlaceCard.jsx             |  62 +++--
 src/components/Community/CommunityBanner.jsx  |  17 +-
 src/components/Community/Connect.jsx          | 228 +++++++++++------
 src/components/Community/Happen.jsx           |  45 +++-
 src/components/Community/Insights.jsx         | 123 +++++----
 src/components/Community/LearnMore.jsx        |  44 +++-
 src/components/Community/Place.jsx            |  17 +-
 .../MobileComponent/MobileCommunityCard.jsx   | 236 ++++++++++++++++++
 src/index.css                                 |  37 ++-
 src/pages/Community.jsx                       |  27 +-
 12 files changed, 726 insertions(+), 181 deletions(-)
 create mode 100644 src/components/MobileComponent/MobileCommunityCard.jsx

diff --git a/src/components/Card/HappenCard.jsx b/src/components/Card/HappenCard.jsx
index d7ff43d..e0e5a3a 100644
--- a/src/components/Card/HappenCard.jsx
+++ b/src/components/Card/HappenCard.jsx
@@ -12,6 +12,12 @@ const HappenCard = ({ key, date, text, para, month, curentDate }) => {
         position={"relative"}
         // minHeight={"402px"}
         key={key}
+        sx={{
+          "@media (max-width: 500px)": {
+            width:'320px',
+            minHeight:'300px'
+          },
+        }}
       >
         <Text
           color={"#fff"}
@@ -26,15 +32,44 @@ const HappenCard = ({ key, date, text, para, month, curentDate }) => {
           <br />
           {curentDate}
         </Text>
-        <Image src={CardImg2} borderTopLeftRadius={"10px"} borderTopRightRadius={"10px"} />
+        <Image
+          src={CardImg2}
+          borderTopLeftRadius={"10px"}
+          borderTopRightRadius={"10px"}
+          sx={{
+            "@media (max-width: 500px)": {
+              width: "100%",
+            },
+          }}
+        />
         <Box padding={"1rem"}>
           <Text fontSize={"14px"} color={"#979797"} marginBottom={"10px"}>
             {date}
           </Text>
-          <Text color={"#fff"} fontSize={"20px"} marginBottom={"10px"}>
+          <Text
+            color={"#fff"}
+            fontSize={"20px"}
+            marginBottom={"10px"}
+            sx={{
+              "@media (max-width: 500px)": {
+                fontSize: "16px",
+                fontWeight: "400",
+              },
+            }}
+          >
             {text}
           </Text>
-          <Text color={"#E1E1E1"}>{para}</Text>
+          <Text
+            color={"#E1E1E1"}
+            sx={{
+              "@media (max-width: 500px)": {
+                fontSize: "14px",
+                fontWeight: "400",
+              },
+            }}
+          >
+            {para}
+          </Text>
         </Box>
       </Box>
     </Box>
diff --git a/src/components/Card/InsightsCard.jsx b/src/components/Card/InsightsCard.jsx
index 6dc96a0..b11ba0e 100644
--- a/src/components/Card/InsightsCard.jsx
+++ b/src/components/Card/InsightsCard.jsx
@@ -13,6 +13,11 @@ const InsightsCard = ({ key, title, text }) => {
       }
       padding={"1px"}
       borderRadius={"10px"}
+      sx={{
+        "@media (max-width: 500px)": {
+          marginBottom:'2rem'
+        },
+      }}
     >
       <Box
         className="card__container"
@@ -24,6 +29,12 @@ const InsightsCard = ({ key, title, text }) => {
         minHeight={"430px"}
         key={key}
         transition={"all 1s"}
+        sx={{
+          "@media (max-width: 500px)": {
+            width:'320px',
+            minHeight:'300px'
+          },
+        }}
       >
         <Text position={"relative"}>
           <Image src={cardimg} />
@@ -39,13 +50,25 @@ const InsightsCard = ({ key, title, text }) => {
               bottom={"14px"}
               left={"12px"}
               transition={"all 1s"}
+              sx={{
+                "@media (max-width: 500px)": {
+                  fontSize:'12px',
+                },
+              }}
             >
               INSIGHT
             </Badge>
           )}
         </Text>
         <Box padding={"1rem"}>
-          <Text fontSize={"20px"} color={"#ffffff"} margin={"10px 0px"}>
+          <Text fontSize={"20px"} color={"#ffffff"} margin={"10px 0px"}
+          sx={{
+            "@media (max-width: 500px)": {
+              fontSize:'16px',
+              margin:'0px 0px 5px'
+            },
+          }}
+          >
             {title}
           </Text>
           <Text
@@ -54,6 +77,11 @@ const InsightsCard = ({ key, title, text }) => {
             marginBottom={"20px"}
             minHeight={"73px"}
             maxWidth={"460px"}
+            sx={{
+              "@media (max-width: 500px)": {
+                fontSize:'14px',
+              },
+            }}
           >
             {text}
           </Text>
diff --git a/src/components/Card/PlaceCard.jsx b/src/components/Card/PlaceCard.jsx
index 69b56db..a41c604 100644
--- a/src/components/Card/PlaceCard.jsx
+++ b/src/components/Card/PlaceCard.jsx
@@ -1,14 +1,11 @@
 /* eslint-disable no-unused-vars */
 import { Box, Container, Text, Image, Button } from "@chakra-ui/react";
-import {ArrowForwardIcon } from '@chakra-ui/icons'
-import Arrow from "../../assets/images/arrow-right.png"
+import { ArrowForwardIcon } from "@chakra-ui/icons";
+import Arrow from "../../assets/images/arrow-right.png";
 
-const PlaceCard = ({ key, text, cardicon ,title,button}) => {
+const PlaceCard = ({ key, text, cardicon, title, button }) => {
   return (
-    <Box
-      padding={"1px"}
-      borderRadius={"10px"}
-    >
+    <Box padding={"1px"} borderRadius={"10px"}>
       <Box
         width={"502px"}
         background={"#46464647"}
@@ -16,11 +13,32 @@ const PlaceCard = ({ key, text, cardicon ,title,button}) => {
         minHeight={"350px"}
         key={key}
         padding={"15px 20px"}
+        sx={{
+          "@media (max-width: 500px)": {
+            width: "320px",
+            fontWeight: "400",
+            minHeight:'290px'
+          },
+        }}
       >
-        <Image src={cardicon} />
+        <Image
+          src={cardicon}
+          sx={{
+            "@media (max-width: 500px)": {
+              height: "40px",
+            },
+          }}
+        />
         <Box>
-          <Text fontSize={"22px"} color={"#fff"} margin={"25px 0px"} >
-            <span style={{borderBottom:'1px solid #DE858E'}}>{title}</span>
+          <Text fontSize={"22px"} color={"#fff"} margin={"25px 0px"}
+            sx={{
+              "@media (max-width: 500px)": {
+                fontSize: "15px",
+                margin:'10px 0'
+              },
+            }}
+          >
+            <span style={{ borderBottom: "1px solid #DE858E" }}>{title}</span>
           </Text>
           <Text
             color={"#D4D4D4"}
@@ -28,13 +46,15 @@ const PlaceCard = ({ key, text, cardicon ,title,button}) => {
             marginBottom={"20px"}
             minHeight={"73px"}
             maxWidth={"460px"}
+            sx={{
+              "@media (max-width: 500px)": {
+                fontSize: "12px",
+              },
+            }}
           >
             {text}
           </Text>
-          <Box
-            display={"flex"}
-            alignItems={"center"}
-          >
+          <Box display={"flex"} alignItems={"center"}>
             <Text
               position={"relative"}
               backgroundColor={"transparent"}
@@ -43,8 +63,20 @@ const PlaceCard = ({ key, text, cardicon ,title,button}) => {
               fontWeight={"400"}
               display={"flex"}
               alignItems={"center"}
+              sx={{
+                "@media (max-width: 500px)": {
+                  fontSize: "12px",
+                },
+              }}
             >
-              {button} <Image src={Arrow} style={{width:'30px',marginLeft:'8px'}} />
+              {button}
+              <Image src={Arrow} style={{ width: "30px", marginLeft: "8px" }} 
+                 sx={{
+                  "@media (max-width: 500px)": {
+                    width: "25px",
+                  },
+                }}
+              />
             </Text>
           </Box>
         </Box>
diff --git a/src/components/Community/CommunityBanner.jsx b/src/components/Community/CommunityBanner.jsx
index f34f9da..fba7458 100644
--- a/src/components/Community/CommunityBanner.jsx
+++ b/src/components/Community/CommunityBanner.jsx
@@ -68,16 +68,12 @@ const CommunityBanner = () => {
             letterSpacing={"1px"}
             sx={{
               "@media (max-width: 996px)": {
-                fontSize: "35px",
+                fontSize: "46px",
               },
               "@media (max-width: 600px)": {
-                fontSize: "28px",
-                marginBottom: "2rem",
-              },
-              "@media (max-width: 500px)": {
-                marginTop: "2rem",
-                marginBottom: "2rem",
-                fontSize: "36px",
+                fontSize: "40px",
+                marginBottom: "0rem",
+                lineHeight:'54px'
               },
             }}
           >
@@ -113,6 +109,7 @@ const CommunityBanner = () => {
                 },
                 "@media (max-width: 500px)": {
                   fontSize: "16px",
+                  lineHeight:'28px'
                 },
               }}
             >
@@ -162,6 +159,10 @@ const CommunityBanner = () => {
                 width: "230px",
                 height: "44px",
                 marginTop: "2rem",
+                bgGradient:
+                  "radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
+                color:'#000',
+                fontWeight:'600'
               },
             }}
             _hover={{
diff --git a/src/components/Community/Connect.jsx b/src/components/Community/Connect.jsx
index d1fba9f..831313c 100644
--- a/src/components/Community/Connect.jsx
+++ b/src/components/Community/Connect.jsx
@@ -64,99 +64,175 @@ const Connect = () => {
       backgroundRepeat={"no-repeat"}
     >
       <Container
-         maxW={"container.xl"}
-         padding={"0 5rem"}
-         paddingBottom={"5rem"}
-         paddingTop={"5rem"}
-         sx={{
-           "@media (max-width: 1024px)": {
-             padding: "3rem",
-           },
-           "@media (max-width: 435px)": {},
-         }}
+        maxW={"container.xl"}
+        padding={"0 5rem"}
+        paddingBottom={"5rem"}
+        paddingTop={"5rem"}
+        sx={{
+          "@media (max-width: 1024px)": {
+            padding: "3rem",
+          },
+          "@media (max-width: 500px)": {
+            padding: "4rem 1rem",
+          },
+        }}
       >
         <Text
-          className="rubix-text-title"
           fontFamily={"Mona Sans"}
           fontWeight={"700"}
-          //   fontSize={"40px"}
+          fontSize={"38px"}
           color={"#fff"}
           marginBottom={"3rem"}
+          sx={{
+            "@media (max-width: 500px)": {
+              fontSize: "22px",
+              fontWeight: "400",
+              marginBottom: "30px",
+            },
+          }}
         >
           Connect with Rubix community
         </Text>
-          <SimpleGrid
-            spacing={4}
-            templateColumns="repeat(auto-fill, minmax(300px, 1fr))"
-          >
-            {items.map((item) => (
-              <>
-                <Box
-                  padding={"1px"}
+        <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"}
-                  key={item.id}
-                  _hover={{
-                    backgroundImage:
-                      "-webkit-gradient(linear, left bottom, left top, color-stop(0.33, #8D54F8), color-stop(0.67, #F8697A))",
+                  minH={"270px"}
+                  border={"1px solid #454545"}
+                  sx={{
+                    "@media (max-width: 500px)": {
+                      minHeight: "200px",
+                    },
                   }}
                 >
-                  <Card
-                    background={"#000"}
-                    borderRadius={"10px"}
-                    minH={"270px"}
-                    border={"1px solid #454545"}
+                  <CardHeader
+                    textAlign={"center"}
+                    paddingBottom={"0px"}
+                    marginTop={"2rem"}
+                    sx={{
+                      "@media (max-width: 500px)": {
+                        marginTop: "0px",
+                      },
+                    }}
                   >
-                    <CardHeader
-                      textAlign={"center"}
-                      paddingBottom={"0px"}
-                      marginTop={"2rem"}
+                    {/* <Image src={item.img} /> */}
+                    <Heading
+                      size="md"
+                      fontSize={"22px"}
+                      fontWeight={"500"}
+                      color={"#fff"}
+                      sx={{
+                        "@media (max-width: 500px)": {
+                          fontSize: "17px",
+                          fontWeight: "400",
+                        },
+                      }}
                     >
-                      {/* <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"}
+                          sx={{
+                            "@media (max-width: 500px)": {
+                              width: "50px",
+                            },
+                          }}
+                        />
+                      </Box>
+                      <Text
+                        fontSize={"17px"}
+                        color={"#fff"}
+                        fontWeight={"400"}
+                        sx={{
+                          "@media (max-width: 500px)": {
+                            fontSize: "12px",
+                          },
+                        }}
                       >
-                        {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}
+                        {item.social1}
+                      </Text>
+                    </Link>
+                    <Link placeContent={"center"}>
+                      <Image
+                        src={item.logo2}
+                        margin={"0 auto 20px auto"}
+                        sx={{
+                          "@media (max-width: 500px)": {
+                            width: "50px",
+                          },
+                        }}
+                      />
+                      <Text
+                        fontSize={"17px"}
+                        color={"#fff"}
+                        fontWeight={"400"}
+                        sx={{
+                          "@media (max-width: 500px)": {
+                            fontSize: "12px",
+                          },
+                        }}
+                      >
+                        {item.social2}
+                      </Text>
+                    </Link>
+                    {item.social3 ? (
+                      <Link display={"grid"} placeContent={"center"}>
+                        <Image
+                          src={item.logo3}
+                          margin={"0 auto 20px auto"}
+                          sx={{
+                            "@media (max-width: 500px)": {
+                              width: "50px",
+                            },
+                          }}
+                        />
+                        <Text
+                          fontSize={"17px"}
+                          color={"#fff"}
+                          fontWeight={"400"}
+                          sx={{
+                            "@media (max-width: 500px)": {
+                              fontSize: "12px",
+                            },
+                          }}
+                        >
+                          {item.social3}
                         </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>
+                    ) : (
+                      ""
+                    )}
+                  </CardBody>
+                </Card>
+              </Box>
+            </>
+          ))}
+        </SimpleGrid>
       </Container>
     </Box>
   );
diff --git a/src/components/Community/Happen.jsx b/src/components/Community/Happen.jsx
index 58b1e1d..2ac1b3f 100644
--- a/src/components/Community/Happen.jsx
+++ b/src/components/Community/Happen.jsx
@@ -40,8 +40,7 @@ const Content = {
   heading: `Latest Happenings`,
 };
 
-const Happen = () => {
-  return (
+const Happen = () => {  return (
     <Box
       // height={"100vh"}
       background={"#000"}
@@ -56,7 +55,9 @@ const Happen = () => {
           "@media (max-width: 1024px)": {
             padding: "3rem",
           },
-          "@media (max-width: 435px)": {},
+          "@media (max-width: 500px)": {
+            padding:'1rem'
+          },
         }}
       >
         <Text
@@ -67,6 +68,12 @@ const Happen = () => {
           fontSize={"40px"}
           textTransform={"capitalize"}
           color={"#fff"}
+          sx={{
+            "@media (max-width: 500px)": {
+              fontSize: "22px",
+              fontWeight:'400'
+            },
+          }}
         >
           {Content.heading}
         </Text>
@@ -74,8 +81,8 @@ const Happen = () => {
           paddingBottom={"2rem"}
           // height={"50vh"}
           sx={{
-            "@media (max-width: 435px)": {
-              paddingLeft: "3rem",
+            "@media (max-width: 500px)": {
+              paddingLeft: "0rem",
             },
           }}
         >
@@ -83,6 +90,15 @@ const Happen = () => {
             <SimpleGrid
              spacing={5}
              templateColumns="repeat(auto-fill, minmax(300px, 1fr))"
+             sx={{
+              "@media (max-width: 500px)": {
+                display:'flex',
+                overflowX:'scroll',
+                "&::-webkit-scrollbar": {
+                  width: "0px",
+                },
+              },
+            }}
             >
               {Latest.map((item) => (
                 <HappenCard
@@ -96,7 +112,13 @@ const Happen = () => {
               ))}
             </SimpleGrid>
           </Box>
-          <Box textAlign={"center"} marginTop={"4rem"}>
+          <Box textAlign={"center"} marginTop={"4rem"}
+          sx={{
+            "@media (max-width: 500px)": {
+              marginTop:'2rem',
+            },
+          }}
+          >
           <Button
             position={"relative"}
             backgroundColor={"transparent"}
@@ -134,6 +156,17 @@ const Happen = () => {
                 borderRadius: "0px",
                 opacity: "1",
               },
+              "@media (max-width: 500px)": {
+                fontSize: "14px",
+                fontWeight:'400',
+                height:'40px',
+                width:'140px',
+                bgGradient:
+                "radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
+                color: "#000",
+                fontWeight: "600",
+                
+              },
             }}
             _hover={{
               color: "#000",
diff --git a/src/components/Community/Insights.jsx b/src/components/Community/Insights.jsx
index 9687954..e29cdb3 100644
--- a/src/components/Community/Insights.jsx
+++ b/src/components/Community/Insights.jsx
@@ -39,8 +39,8 @@ const Insights = () => {
         paddingBottom={"2rem"}
         // height={"50vh"}
         sx={{
-          "@media (max-width: 435px)": {
-            paddingLeft: "3rem",
+          "@media (max-width: 500px)": {
+            padding: "1rem",
           },
         }}
       >
@@ -53,11 +53,9 @@ const Insights = () => {
           textTransform={"capitalize"}
           color={"#fff"}
           sx={{
-            "@media (max-width: 435px)": {
-              fontSize: "35px",
-            },
-            "@media (max-width: 375px)": {
-              fontSize: "28px",
+            "@media (max-width: 500px)": {
+              fontSize: "22px",
+              fontWeight: "400",
             },
           }}
         >
@@ -79,54 +77,71 @@ const Insights = () => {
           ))}
         </Box>
       </Box>
-      <Box textAlign={"center"} marginTop={"1rem"}>
-          <Button
-            position={"relative"}
-            backgroundColor={"transparent"}
-            cursor={"pointer"}
-            transition="background-color 0.3s ease-in-out, color 0.1s ease-in-out"
-            color={"#fff"}
-            width={"210px"}
-            height={"54px"}
-            fontFamily={"Poppins"}
-            fontWeight={"400"}
-            border={"1px solid white"}
-            borderRadius={"10px"}
-            fontSize={"20px"}
-            zIndex={"1"}
-            overflow={"hidden"}
-            sx={{
-              "::before": {
-                content: '""',
-                position: "absolute",
-                top: "50%",
-                left: "50%",
-                transform: "translate(-50%, -50%)",
-                width: "65px",
-                height: "65px",
-                borderRadius: "50%",
-                transition: "0.35s linear",
-                zIndex: -1,
-                bgGradient:
-                  "radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
-                opacity: "0",
-              },
-              "&:hover::before": {
-                width: "100%",
-                height: "120%",
-                borderRadius: "0px",
-                opacity: "1",
-              },
-            }}
-            _hover={{
+      <Box
+        textAlign={"center"}
+        marginTop={"1rem"}
+        sx={{
+          "@media (max-width: 500px)": {
+            marginTop: "0px",
+          },
+        }}
+      >
+        <Button
+          position={"relative"}
+          backgroundColor={"transparent"}
+          cursor={"pointer"}
+          transition="background-color 0.3s ease-in-out, color 0.1s ease-in-out"
+          color={"#fff"}
+          width={"210px"}
+          height={"54px"}
+          fontFamily={"Poppins"}
+          fontWeight={"400"}
+          border={"1px solid white"}
+          borderRadius={"10px"}
+          fontSize={"20px"}
+          zIndex={"1"}
+          overflow={"hidden"}
+          sx={{
+            "::before": {
+              content: '""',
+              position: "absolute",
+              top: "50%",
+              left: "50%",
+              transform: "translate(-50%, -50%)",
+              width: "65px",
+              height: "65px",
+              borderRadius: "50%",
+              transition: "0.35s linear",
+              zIndex: -1,
+              bgGradient:
+                "radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
+              opacity: "0",
+            },
+            "&:hover::before": {
+              width: "100%",
+              height: "120%",
+              borderRadius: "0px",
+              opacity: "1",
+            },
+            "@media (max-width: 500px)": {
+              fontSize: "14px",
+              height: "40px",
+              width: "140px",
+              bgGradient:
+                "radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
               color: "#000",
-              border: "none",
-              zIndex: 1,
-            }}
-          >
-            View More
-          </Button>
-        </Box>
+              fontWeight: "600",
+            },
+          }}
+          _hover={{
+            color: "#000",
+            border: "none",
+            zIndex: 1,
+          }}
+        >
+          View More
+        </Button>
+      </Box>
     </Box>
   );
 };
diff --git a/src/components/Community/LearnMore.jsx b/src/components/Community/LearnMore.jsx
index 7e77a94..b10bb74 100644
--- a/src/components/Community/LearnMore.jsx
+++ b/src/components/Community/LearnMore.jsx
@@ -29,15 +29,16 @@ const LearnMore = () => {
         paddingTop={"3rem"}
         paddingBottom={"1rem"}
         fontWeight={700}
-        // fontSize={"40px"}
-        className="rubix-text-title"
+        fontSize={"38px"}
         textAlign={"center"}
         textTransform={"capitalize"}
         color={"#fff"}
         sx={{
           "@media (max-width: 1024px)": {},
-          "@media (max-width: 600px)": {
-            fontSize: "28px",
+          "@media (max-width: 500px)": {
+            fontSize: "20px",
+            fontWeight:'500',
+            marginBottom:'5px'
           },
         }}
       >
@@ -53,10 +54,17 @@ const LearnMore = () => {
       >
         <Text
           color={"#E4E4E4"}
-          //   fontSize={"22px"}
-          className="rubix-text-large"
+            fontSize={"22px"}
           marginBottom={"2rem"}
           fontFamily={"Poppins"}
+          sx={{
+            "@media (max-width: 500px)": {
+              fontSize: "14px",
+              fontWeight:'100',
+              marginBottom:'5px',
+              marginBottom:'30px'
+            },
+          }}
         >
           {SectionContent.subContent}
         </Text>
@@ -64,7 +72,7 @@ const LearnMore = () => {
         <Button
           fontSize={"20px"}
           //   minW={"284px"}
-          minH={"60px"}
+          height={"54px"}
           fontFamily={"Poppins"}
           backgroundColor={"transparent"}
           border={"1px solid #fff"}
@@ -97,6 +105,16 @@ const LearnMore = () => {
               borderRadius: "0px",
               opacity: "1",
             },
+            "@media (max-width: 500px)": {
+              padding:'5px 15px',
+              height:'40px',
+              fontSize:'14px',
+              margin:'0 7px',
+              bgGradient:
+                  "radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
+                color:'#000',
+                fontWeight:'600'
+             },
           }}
           _hover={{
             color: "#000",
@@ -109,7 +127,7 @@ const LearnMore = () => {
         <Button
           fontSize={"20px"}
           //   minW={"284px"}
-          minH={"60px"}
+          height={"54px"}
           fontFamily={"Poppins"}
           backgroundColor={"transparent"}
           border={"1px solid #fff"}
@@ -142,6 +160,16 @@ const LearnMore = () => {
               borderRadius: "0px",
               opacity: "1",
             },
+            "@media (max-width: 500px)": {
+              padding:'5px 15px',
+              height:'40px',
+              fontSize:'14px',
+              margin:'0 7px',
+              bgGradient:
+                  "radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
+                color:'#000',
+                fontWeight:'600'
+             },
           }}
           _hover={{
             color: "#000",
diff --git a/src/components/Community/Place.jsx b/src/components/Community/Place.jsx
index 26ca2c7..39dce4a 100644
--- a/src/components/Community/Place.jsx
+++ b/src/components/Community/Place.jsx
@@ -50,13 +50,18 @@ const Place = () => {
       backgroundSize={"cover"}
       backgroundRepeat={"no-repeat"}
       backgroundImage={`url(${Banner})`}
+      sx={{
+        "@media (max-width: 500px)": {
+          backgroundImage: "inherit",
+        },
+      }}
     >
       <Box
         paddingLeft={"7rem"}
         // height={"50vh"}
         sx={{
-          "@media (max-width: 435px)": {
-            paddingLeft: "3rem",
+          "@media (max-width: 500px)": {
+            paddingLeft: "1rem",
           },
         }}
       >
@@ -68,11 +73,9 @@ const Place = () => {
           textTransform={"capitalize"}
           color={"#fff"}
           sx={{
-            "@media (max-width: 435px)": {
-              fontSize: "35px",
-            },
-            "@media (max-width: 375px)": {
-              fontSize: "28px",
+            "@media (max-width: 500px)": {  
+              fontSize: "22px",
+              fontWeight:'400',
             },
           }}
         >
diff --git a/src/components/MobileComponent/MobileCommunityCard.jsx b/src/components/MobileComponent/MobileCommunityCard.jsx
new file mode 100644
index 0000000..b95a46c
--- /dev/null
+++ b/src/components/MobileComponent/MobileCommunityCard.jsx
@@ -0,0 +1,236 @@
+import React from "react";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Box, Container, SimpleGrid, Text, Image } from "@chakra-ui/react";
+import "swiper/css";
+import "swiper/css/pagination";
+import imgOne from "../../assets/images/Component115.png";
+import imgtwo from "../../assets/images/Component116.png";
+import imgthree from "../../assets/images/Component117.png";
+import imgfour from "../../assets/images/Component118.png";
+import imgfive from "../../assets/images/Component119.png";
+import imgsix from "../../assets/images/Component120.png";
+import imgseven from "../../assets/images/Component121.png";
+import imgeight from "../../assets/images/Component122.png";
+import imgnine from "../../assets/images/Component123.png";
+import imgten from "../../assets/images/Component128.png";
+import imgeleven from "../../assets/images/Component127.png";
+import linkedin from "../../assets/images/linkedin.png";
+import games from "../../assets/images/discot.png";
+import {Pagination,Navigation} from "swiper/modules"
+
+const individuals = [
+  {
+    location: "india",
+    name: "KC Reddy",
+    jobTitle: "Founder/CTO",
+    description:
+      "A visionary poised to deliver trustless, secure internet and passwordless cyber security",
+    imageUrl: imgOne,
+  },
+  {
+    location: "india",
+    name: "Ravi Srinivasa Murty",
+    jobTitle: "Chief Strategy Officer",
+    description:
+      "Global business leader with a technology orientation and a vision to drive economic value.",
+    imageUrl: imgtwo,
+  },
+  {
+    location: "india",
+    name: "Hari Krishnan",
+    jobTitle: "Chief Growth Officer",
+    description:
+      "Deeply passionate about Cryptography, Zero Knowledge Proofs, and Number Theory.",
+    imageUrl: imgthree,
+  },
+  {
+    location: "india",
+    name: "Eser Torun, CFA",
+    jobTitle: "Chief Growth Officer",
+    description:
+      "Deeply passionate about Cryptography, Zero Knowledge Proofs, and Number Theory.",
+    imageUrl: imgten,
+  },
+  {
+    location: "india",
+    name: "Gokul P S",
+    jobTitle: "Core Blockchain Developer",
+    description:
+      "A proactive Web3 enthusiast ensuring the security and scalability of our 51.4M proofchains.",
+    imageUrl: imgfour,
+  },
+  {
+    location: "india",
+    name: "Allen Iype P Cherian",
+    jobTitle: "Blockchain Engineer",
+    description:
+      "A motivated and responsible B tech Graduate, with a strong work ethic.",
+    imageUrl: imgfive,
+  },
+  {
+    location: "india",
+    name: "Nidhin M.",
+    jobTitle: "Lead Engineer",
+    description:
+      "Developed revolutionary PoP protocol, P2P data transfer and transaction processing functions.",
+    imageUrl: imgsix,
+  },
+  {
+    location: "india",
+    name: "Arnab Ghose",
+    jobTitle: "Senior Blockchain Engineer",
+    description:
+      "Developed revolutionary PoP protocol, P2P data transfer and transaction processing functions.",
+    imageUrl: imgeleven,
+  },
+  {
+    location: "india",
+    name: "ASHITA GUPTA",
+    jobTitle: "Blockchain Developer",
+    description:
+      "Enthusiastic blockchain developer who pushes herself every day to excel at work.",
+    imageUrl: imgseven,
+  },
+  {
+    location: "india",
+    name: "Vaishnav C H",
+    jobTitle: "Blockchain Developer",
+    description:
+      "A very humble and talented Golang developer and mechatronics and blockchain engineer",
+    imageUrl: imgeight,
+  },
+  {
+    location: "india",
+    name: "Maneesha Panda",
+    jobTitle: "Blockchain Engineer",
+    description:
+      "A highly keen blockchain engineer with a zeal for innovation who brings new ideas to the table.",
+    imageUrl: imgnine,
+  },
+  {
+    location: "india",
+    name: "Maneesha Panda",
+    jobTitle: "Blockchain Engineer",
+    description:
+      "A highly keen blockchain engineer with a zeal for innovation who brings new ideas to the table.",
+    imageUrl: imgnine,
+  },
+];
+
+const MobileCommunityCard = () => {
+  return (
+    <>
+      <Box backgroundColor={"#101015"}>
+        <Container
+          maxW={"container.xl"}
+          padding={"0 5rem"}
+          paddingBottom={"6rem"}
+          sx={{
+            "@media (max-width: 1024px)": {
+              padding: "3rem",
+            },
+            "@media (max-width: 500px)": {
+                padding:'0 1rem',
+                paddingBottom:'5rem'
+            },
+          }}
+        >
+          <Text
+            as={"h2"}
+            paddingTop={"3rem"}
+            paddingBottom={"3rem"}
+            fontWeight={700}
+            fontSize={"38px"}
+            textAlign={"left"}
+            textTransform={"capitalize"}
+            color={"#fff"}
+            sx={{
+              "@media (max-width: 500px)": {
+                fontSize: "22px",
+                fontWeight:'400',
+                marginBottom:'0px',
+                paddingBottom:'30px'
+              },
+            }}
+          >
+            Rubix Community
+          </Text>
+            <Swiper   className="team-slider"
+              spaceBetween={20}
+              slidesPerView={2}
+              navigation={true}
+              pagination={{ clickable: true }} 
+              modules={[ Navigation]} // Enables pagination and navigation modules
+              autoplay={{ delay: 3000 }}
+              onSlideChange={() => console.log("slide change")}
+              onSwiper={(swiper) => console.log(swiper)}
+              style={{paddingBottom:'60px',position:'relative'}}
+              
+            >
+              {individuals.map((item) => (
+                <SwiperSlide
+                  // height={"100vh"}
+                  background={"#101015"}
+                  backgroundSize={"cover"}
+                  backgroundRepeat={"no-repeat"}
+                >
+                  <Text>
+                    <Text
+                      position="relative"
+                      overflow="hidden"
+                      _hover={{
+                        "&::before": {
+                          content: '""',
+                          position: "absolute",
+                          top: 0,
+                          left: 0,
+                          width: "100%",
+                          height: "100%",
+                          background:
+                            "linear-gradient(to bottom, #f8697a8c  0%, #8d54f86e  86%)",
+                          borderRadius: "5px",
+                        },
+                      }}
+                    >
+                      <Image src={item.imageUrl} />
+                    </Text>
+                  </Text>
+                  <Text
+                    color={"#fff"}
+                    fontSize={"16px"}
+                    marginTop={"15px"}
+                    maxWidth={"460px"}
+                  >
+                    {item.name}
+                  </Text>
+                  <Text fontSize={"12px"} color={"#DEDEDE"} margin={"4px 0px"}>
+                    {item.jobTitle}
+                  </Text>
+                  <Text fontSize={"11px"} color={"#DEDEDE"} margin={"6px 0px"}>
+                    {item.description}
+                  </Text>
+                  <Text display={"flex"} marginTop={"20px"}>
+                    <img
+                      src={linkedin}
+                      style={{
+                        minWidth: "34px",
+                        height: "34px",
+                        marginBottom: "10px",
+                        marginRight: "10px",
+                      }}
+                    />
+                    <img
+                      src={games}
+                      style={{ minWidth: "34px", height: "34px" }}
+                    />
+                  </Text>
+                </SwiperSlide>
+              ))}
+            </Swiper>
+        </Container>
+      </Box>
+    </>
+  );
+};
+
+export default MobileCommunityCard;
diff --git a/src/index.css b/src/index.css
index 6a332f1..a76ba1c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -48,7 +48,42 @@
   color: #de858e;
   /* background-color: #de858e; */
 }
-
+span.swiper-pagination-bullet {
+  background: #de858e;
+  width: 35px;
+  height: 3px;
+  border-radius: 0;
+}
+.team-slider .swiper-button-next:after {
+  position: absolute;
+  top: 185px; 
+  width: 38px;
+  height: 38px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50px;
+  font-size: 18px;
+  color: #000;
+  font-weight: 700;
+  right: 110px;
+  background-image: radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e);
+}
+.team-slider .swiper-button-prev:after {
+  position: absolute;
+  top: 185px;
+  width: 38px;
+  height: 38px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50px;
+  font-size: 18px;
+  color: #000;
+  font-weight: 700;
+  left: 110px;
+  background-image: radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e);
+}
 /* html {
   font-family: "Mona Sans";
 } */
diff --git a/src/pages/Community.jsx b/src/pages/Community.jsx
index 1b013a6..858cf24 100644
--- a/src/pages/Community.jsx
+++ b/src/pages/Community.jsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import CommunityBanner from '../components/Community/CommunityBanner'
 import CommunityCard from '../components/Community/CommunityCard'
 import Place from '../components/Community/Place'
@@ -7,12 +7,35 @@ import Happen from '../components/Community/Happen'
 import Insights from '../components/Community/Insights'
 import LearnMore from '../components/Community/LearnMore'
 import Footer from '../components/Footer/Footer'
+import MobileCommunityCard from '../components/MobileComponent/MobileCommunityCard'
 
 const Community = () => {
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowWidth(window.innerWidth);
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  useEffect(() => {
+    // Scroll to the top of the page when the component mounts
+    window.scrollTo(0, 0);
+  }, []);
+
+  const isMobile = windowWidth <= 996;
+
+
   return (
     <>
       <CommunityBanner/>
-      <CommunityCard/>
+      {!isMobile ? <CommunityCard /> : <MobileCommunityCard />}
       <Place />
       <Connect/>
       <Happen />