update and fixes

src/components/Card/DevCards.jsx

@@ -60,8 +60,13 @@ const DevCards = ({ id, src, alt, text, href }) => {
             fontFamily={"Poppins"}
             marginBottom={"20px"}
             // fontWeight={"100"}
-            minHeight={"100px"}
+            m
+            minHeight={"85px"}
             sx={{
+              display: "-webkit-box",
+              WebkitBoxOrient: "vertical",
+              overflow: "hidden",
+              WebkitLineClamp: 3,
               "@media (max-width: 500px)": {
                 fontSize: "14px",
               },

src/components/Card/HappenCard.jsx

@@ -7,7 +7,7 @@ import Loader from "../Loader/Loader";
 import { Link } from "react-router-dom";
 import { useGetEventsViewQuery } from "../../Redux/slice/eventsViewSlice";
 
-const HappenCard = ({ key, date, text, para, loader, title }) => {
+const HappenCard = ({ key, date, text, para, loader, title, img }) => {
   const { data, isLoading, error } = useGetEventsViewQuery();
   const eventsCard = data?.data?.rows;
   console.log(eventsCard);
@@ -43,7 +43,7 @@ const HappenCard = ({ key, date, text, para, loader, title }) => {
             background={"#151419"}
             borderRadius={"10px"}
             position={"relative"}
-            minHeight={"355px"}
+            minHeight={"410px"}
             key={key}
             sx={{
               "@media (max-width: 500px)": {
@@ -66,7 +66,10 @@ const HappenCard = ({ key, date, text, para, loader, title }) => {
               {day}
             </Text>
             <Image
-              src={CardImg2}
+              src={`https://rubix.betadelivery.com/${img}`}
+              height={"250px"}
+              width={"100%"}
+              objectFit={"cover"}
               borderTopLeftRadius={"10px"}
               borderTopRightRadius={"10px"}
               sx={{

src/components/Card/LearnCard.jsx

@@ -60,8 +60,12 @@ const LearnCard = ({ id, src, text, href }) => {
             fontFamily={"Poppins"}
             marginBottom={"20px"}
             // fontWeight={"100"}
-            minHeight={"100px"}
+            minHeight={"85px"}
             sx={{
+              display: "-webkit-box",
+              WebkitBoxOrient: "vertical",
+              overflow: "hidden",
+              WebkitLineClamp: 3,
               "@media (max-width: 500px)": {
                 fontSize: "14px",
               },

src/components/EventsPage/NewestEvents.jsx

@@ -1,7 +1,31 @@
 import { Badge, Box, Container, Image, Text } from "@chakra-ui/react";
 import pic from "../../assets/images/eventsPic.png";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Autoplay, Navigation, Pagination } from "swiper/modules";
+import { Link } from "react-router-dom";
+import { useGetEventsViewQuery } from "../../Redux/slice/eventsViewSlice";
+import Loader from "../Loader/Loader";
 
 const NewestEvent = () => {
+  const { data, isLoading, error } = useGetEventsViewQuery();
+  const eventsCard = data?.data?.rows;
+  console.log(eventsCard);
+  // const dateString = date;
+  // const newDate = new Date(dateString);
+  // const day = newDate.getDate();
+  // const month = new Intl.DateTimeFormat("en-US", { month: "long" }).format(
+  //   newDate
+  // );
+
+  // console.log(date);
+
+  if (isLoading) {
+    return (
+      <div>
+        <Loader />
+      </div>
+    );
+  }
   return (
     <Box backgroundColor={"#000"}>
       <Container
@@ -32,7 +56,94 @@ const NewestEvent = () => {
           >
             Newest Post
           </Text>
-          <Box
+          <Swiper
+            pagination={true}
+            navigation={true}
+            modules={[Navigation, Pagination, Autoplay]}
+            autoplay={{
+              delay: 10000,
+              disableOnInteraction: true,
+            }}
+            loop={true}
+          >
+            {eventsCard?.slice(0, 3).map((item) => (
+              <SwiperSlide key={item.id}>
+                <Link to={`/events/${item.title_slug}`}>
+                  <Box
+                    display={"flex"}
+                    alignItems={"start"}
+                    justifyContent={"start"}
+                    gap={"2rem"}
+                    sx={{
+                      "@media (max-width: 820px)": {
+                        flexDirection: "column",
+                        alignItems: "center",
+                      },
+                    }}
+                  >
+                    <Box>
+                      <Image
+                        src={`https://rubix.betadelivery.com/${item.banner_image}`}
+                        maxW={"418px"}
+                        minH={"280px"}
+                        objectFit={"cover"}
+                        sx={{
+                          "@media (max-width: 820px)": {
+                            maxW: "100%",
+                            minH: "auto",
+                          },
+                        }}
+                      />
+                    </Box>
+                    <Box flex={"1"}>
+                      {item.eventDates.map((date) => (
+                        <Badge
+                          key={date.id}
+                          backgroundColor={"transparent"}
+                          color={"#fff"}
+                          fontWeight={"500"}
+                          fontFamily={"Poppins"}
+                          fontSize={"14px"}
+                          marginBottom={"1rem"}
+                        >
+                          Event :{" "}
+                          {(function () {
+                            const createdAtDate = new Date(date.date);
+                            const formattedDate = createdAtDate
+                              .toLocaleDateString("en-GB", {
+                                day: "2-digit",
+                                month: "2-digit",
+                                year: "2-digit",
+                              })
+                              .replace(/\//g, "-");
+                            return (
+                              <Text
+                                fontSize={"14px"}
+                                color={"#979797"}
+                                margin={"10px 0"}
+                              >
+                                {formattedDate}
+                              </Text>
+                            );
+                          })()}
+                        </Badge>
+                      ))}
+                      <Text
+                        as={"h2"}
+                        className="rubix-text-subheading"
+                        marginBottom={"1rem"}
+                        color={"#fff"}
+                      >
+                        {item.title}
+                      </Text>
+                      <Text className="rubix-text-small">{item.content}</Text>
+                    </Box>
+                  </Box>
+                </Link>
+              </SwiperSlide>
+            ))}
+          </Swiper>
+          {/* <Box
             display={"flex"}
             alignItems={"center"}
             justifyContent={"start"}
@@ -107,7 +218,7 @@ const NewestEvent = () => {
                 Sunday, 10 May 2024
               </Text>
             </Box>
-          </Box>
+          </Box> */}
         </Box>
       </Container>
     </Box>

src/components/EventsPage/UpcomingEvents.jsx

@@ -125,6 +125,7 @@ const UpcomingEvents = () => {
               {eventsCard?.map((item) =>
                 item.eventDates.map((dateItem) => (
                   <HappenCard
+                    img={item.banner_image}
                     key={item.id}
                     date={dateItem.date}
                     text={item.title}

src/components/ResourcesPage/tableContent/ArticlesTable.jsx

@@ -150,8 +150,14 @@ const ArticlesTable = () => {
                   color={"#fff"}
                   fontSize={"18px"}
                   marginBottom={"20px"}
-                  minHeight={"90px"}
+                  minHeight={"60px"}
                   maxWidth={"420px"}
+                  sx={{
+                    display: "-webkit-box",
+                    WebkitBoxOrient: "vertical",
+                    overflow: "hidden",
+                    WebkitLineClamp: 2,
+                  }}
                 >
                   {content.title}
                 </Text>