Feat: improved Upper Slider,lower Slider in eventsPage.fix Responsiveness of EventPage

src/components/EventsPage/CardComponents/DetailsCard.jsx

@@ -1,43 +1,31 @@
-import Image from 'next/image';
 import {
   DescriptionCardContainer,
   DescriptionCardInner,
   DescriptionCardHeading,
   DescriptionCardContent,
+  DetailsCardcontainer,
+  DetailsCardImage,
 } from './DetailsCard.style';
 import { DescriptionBanner } from '../Shared/Banner';
-import { FlexContainer, StyledImage, TextBold } from '../Shared/banner.styles';
+import ReadMore from '../Shared/ReadMoreText';
 
 function DetailsCard({ ImageURL, Heading, Description, Location, Date, Time, Prizes }) {
   return (
-    <div className='flex flex-col items-center gap-5'>
+    <DetailsCardcontainer>
       <DescriptionCardContainer>
         <DescriptionCardInner>
           <DescriptionCardHeading>{Heading}</DescriptionCardHeading>
-          <DescriptionCardContent>{Description}</DescriptionCardContent>
-          {/* <div className='flex justify-end'>
-          <FlexContainer >
-            <Image
-              src='https://res.cloudinary.com/dhv234qct/image/upload/v1729337575/ywb8h5oubo7hlqrmtjxa.svg'
-              alt='Prizes'
-              width={40}
-              height={40}
-            />
-            <TextBold>Prize-{Prizes}</TextBold>
-          </FlexContainer></div> */}
+
+          <DescriptionCardContent>
+            <ReadMore text={Description} charLimit={450} />
+          </DescriptionCardContent>
+
+          <DescriptionBanner Location={Location} Date={Date} Time={Time} Prizes={Prizes} />
         </DescriptionCardInner>
-        <>
-          <Image
-            src={ImageURL}
-            alt='image'
-            width={500}
-            height={500}
-            className='w-full lg:w-[416px] object-cover mb-4 rounded-2xl'
-          />
-        </>
+
+        <DetailsCardImage src={ImageURL} alt='image' width={500} height={500} />
       </DescriptionCardContainer>
-      <DescriptionBanner Location={Location} Date={Date} Time={Time} Prizes={Prizes} />
-    </div>
+    </DetailsCardcontainer>
   );
 }
 

src/components/EventsPage/CardComponents/DetailsCard.style.jsx

@@ -2,40 +2,37 @@ import tw from 'twin.macro';
 import styled from 'styled-components';
 import { Heading1 } from '@/components/shared/Typography/Headings';
 import { SmallParagraph } from '@/components/shared/Typography/Paragraphs';
+import Image from 'next/image';
+
+export const DetailsCardcontainer = styled.div`
+  ${tw`flex flex-col  gap-5`}
+`;
 
 export const DescriptionCardContainer = styled.div`
-  ${tw`w-full flex flex-col-reverse lg:flex-row justify-between items-center bg-transparent pl-2 pr-2 xxs:pl-4 xxs:pr-4 2xs:pl-8 2xs:pr-8 xsm:pl-12 xsm:pr-12 ssm:pl-16 ssm:pr-16 sm:pl-24 sm:pr-24 `}
+  ${tw`w-full flex flex-col-reverse lg:flex-row justify-between items-start gap-10 bg-transparent p-3 xsm:pl-12 xsm:pr-12 ssm:pl-16 ssm:pr-16 sm:pl-24 sm:pr-24 `}
 `;
 
 export const DescriptionCardHeading = styled(Heading1)`
-  ${tw`text-[#e0e5ed] text-2xl sm:text-3xl md:text-4xl w-full lg:text-6xl pl-0 ml-0 font-bold font-orbitron pb-2 md:pb-4 flex justify-start items-center text-left `}
+  ${tw`text-[#e0e5ed] text-2xl sm:text-3xl md:text-4xl w-full lg:text-6xl m-0 py-0 font-bold font-orbitron text-left `}
 `;
 
 export const DescriptionCardInner = styled.div`
-  ${tw`flex flex-col max-w-[812px] justify-between gap-4`}
+  ${tw`flex flex-col h-full w-full content-start lg:w-2/3 justify-center gap-6`}
 `;
 
 export const DescriptionCardContent = styled(SmallParagraph)`
-  ${tw`text-white text-base sm:text-lg md:text-base lg:text-lg font-normal font-montserrat [word-wrap: break-word]  lg:h-[200px] overflow-y-auto leading-normal lg:leading-10 pr-0 mb-4 w-[350px]  w-full text-left`}
-
-  @media (min-width: 700px) {
-    ${tw`w-full mb-0`}
-  }
-
-  @media (min-width: 1024px) {
-    ${tw`w-full h-[332px]`}
-  }
-
-  @media (min-width: 1280px) {
-    ${tw`w-full`}
-  }
+  ${tw`text-white text-base sm:text-lg md:text-base lg:text-lg 2xl:text-xl  font-normal font-montserrat text-wrap  overflow-y-auto leading-normal lg:leading-10 pr-0 w-full text-left`}
 `;
 export const DescriptionCardBottom = styled.div`
-  ${tw`flex  justify-between h-auto  bg-white/[0.05] items-center p-5 xsm:p-10 rounded-xl border-[1px] border-white/[0.4]`};
+  ${tw`flex flex-col gap-5 h-auto  rounded-xl`};
+
+  // backdrop-filter: blur(30px);
+  // background-color: rgba(255, 255, 255, 0.05);
 
-  backdrop-filter: blur(30px);
-  background-color: rgba(255, 255, 255, 0.05);
+  // background-image: linear-gradient(120deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.2));
+  // background-size: 35px 35px;
+`;
 
-  background-image: linear-gradient(120deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.2));
-  background-size: 35px 35px;
+export const DetailsCardImage = styled(Image)`
+  ${tw`w-full lg:w-1/3 aspect-[4/3] lg:aspect-[5/6]  rounded-2xl`}
 `;

src/components/EventsPage/CardComponents/PreviewCard.jsx

@@ -1,30 +1,25 @@
-import Image from 'next/image';
 import {
+  PreviewButtonContainer,
   PreviewCardContainer,
   PreviewCardContent,
+  PreviewCardImage,
   PreviewMoreInfoButton,
   PreviewMoreInfoButton2,
 } from './PreviewCard.style';
 
 function PreviewCard({ ImageURL, PreviewDescription = '' }) {
   const words = PreviewDescription?.split(' ') || [];
   const truncatedDescription =
-    words.length > 20 ? words.slice(0, 30).join(' ') + '...' : PreviewDescription;
+    words.length > 30 ? words.slice(0, 50).join(' ') + '...' : PreviewDescription;
 
   return (
     <PreviewCardContainer>
-      <Image
-        src={ImageURL}
-        alt='image'
-        width={500}
-        height={500}
-        className='w-full lg:w-[416px] xlg:w-[372px] object-cover rounded-2xl'
-      />
+      <PreviewCardImage src={ImageURL} alt='image' width={500} height={500} />
       <PreviewCardContent>{truncatedDescription}</PreviewCardContent>
-      <div className='flex justify-center gap-10 sm:gap-10 xlg:gap-10 mt-2 '>
+      <PreviewButtonContainer>
         <PreviewMoreInfoButton2>Rulebook</PreviewMoreInfoButton2>
         <PreviewMoreInfoButton>Register</PreviewMoreInfoButton>
-      </div>
+      </PreviewButtonContainer>
     </PreviewCardContainer>
   );
 }

src/components/EventsPage/CardComponents/PreviewCard.style.jsx

@@ -1,20 +1,25 @@
 import tw from 'twin.macro';
 import styled from 'styled-components';
 import { HeroGreenPrimaryButton, HeroPrimaryButton } from '@/components/HeroSection/styles';
+import Image from 'next/image';
 
 export const PreviewCardContainer = styled.div`
-  ${tw`w-full h-[450px] xxs:h-[550px] max-w-[390px] slg:h-[550px] lg:h-[600px] bg-gradient-to-b from-[#002929] to-[#22002b] rounded-lg shadow-lg border border-[#074870] flex flex-col justify-between items-center p-5  mb-16`}
+  ${tw`w-full h-auto max-w-[390px] bg-gradient-to-b from-[#002929] to-[#22002b] rounded-lg shadow-lg border border-[#074870] flex flex-col justify-between items-center gap-7 md:gap-8 pl-7 pr-7 pt-5 pb-7 lg:pl-10 lg:pr-10  mb-16 xxs:ml-6 xxs:mr-6 lg:mr-0 lg:ml-0`}
 
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   box-shadow: 0 0 15px 4px rgba(255, 255, 255, 0.4);
 
   @media (max-width: 390px) {
-    ${tw`p-4`}// Adjust padding for smaller screens
+    ${tw`p-4`}
   }
 `;
 
+export const PreviewButtonContainer = styled.div`
+  ${tw`flex justify-center gap-10 `}
+`;
+
 export const PreviewCardContent = styled.div`
-  ${tw`w-full max-w-[350px] text-center text-white text-xs lg:text-sm font-normal font-montserrat leading-[21px] tracking-wide`}
+  ${tw`w-full max-w-[350px] text-center text-white text-xs xsm:text-sm xl:text-base font-normal h-[100px] lg:h-[130px] overflow-y-auto font-montserrat leading-[21px] tracking-wide `}
 `;
 
 export const PreviewMoreInfoButton = styled(HeroPrimaryButton)`
@@ -44,3 +49,7 @@ export const PreviewMoreInfoButton2 = styled(HeroGreenPrimaryButton)`
     transform: scale(1.05);
   }
 `;
+
+export const PreviewCardImage = styled(Image)`
+  ${tw`w-full aspect-[5/4] rounded-2xl`}
+`;

src/components/EventsPage/Carousel/DescriptionCarousel/DescriptionCarousel.jsx

@@ -1,12 +1,12 @@
-import { motion, AnimatePresence } from 'framer-motion';
+import { motion, AnimatePresence, easeIn } from 'framer-motion';
 import DetailsCard from '../../CardComponents/DetailsCard';
 import tw, { styled } from 'twin.macro';
 import { memo } from 'react';
 
 const slideVariants = {
-  enter: { x: 50, opacity: 0 },
+  enter: { x: 180, opacity: 0 },
   center: { x: 0, opacity: 1 },
-  exit: { x: -50, opacity: 0 },
+  exit: { x: -180, opacity: 0, scale: 0.9 },
 };
 
 const MemoizedDetailsCard = memo(DetailsCard);
@@ -21,7 +21,11 @@ const DescriptionCarousel = ({ currentIndex, descriptionItems }) => {
           initial='enter'
           animate='center'
           exit='exit'
-          transition={{ duration: 0.5 }}
+          transition={{
+            duration: 0.5,
+            typr: 'tween',
+            ease: [0.25, 0.1, 0.25, 1],
+          }}
         >
           <MemoizedDetailsCard {...descriptionItems[currentIndex]} />
         </DescriptionSlide>
@@ -33,7 +37,7 @@ const DescriptionCarousel = ({ currentIndex, descriptionItems }) => {
 export default DescriptionCarousel;
 
 const DescriptionContainer = styled.div`
-  ${tw`w-full mt-8 mb-20 h-auto relative`};
+  ${tw`w-full mt-8 mb-20 h-auto relative p-5`};
 `;
 
 const DescriptionSlide = styled(motion.div)`

src/components/EventsPage/Carousel/SliderCarousel/EventWrapper.jsx

@@ -5,7 +5,7 @@ import { useAnimate } from 'framer-motion';
 import { LeftArrowButton, RightArrowButton } from '../../Shared/ArrowButton';
 import { MobileView } from './MobileView';
 import { LargeScreenView } from './DesktopView';
-import { Wrapper } from './EventWrapper.styles';
+import { LargeScreenViewContainer, Wrapper } from './EventWrapper.styles';
 import DescriptionCarousel from '../DescriptionCarousel/DescriptionCarousel';
 
 export const SliderEventsWrapper = ({ previewItems, descriptionItems }) => {
@@ -44,7 +44,7 @@ export const SliderEventsWrapper = ({ previewItems, descriptionItems }) => {
   const startAutoSlide = () => {
     autoSlideIntervalRef.current = setInterval(() => {
       swiperRef.current.swiper.slideNext();
-    }, 10000);
+    }, 15000);
   };
 
   const resetAutoSlide = () => {
@@ -80,7 +80,7 @@ export const SliderEventsWrapper = ({ previewItems, descriptionItems }) => {
 
   return !isMobile ? (
     <Wrapper>
-      <div className='relative flex justify-center items-center h-auto'>
+      <LargeScreenViewContainer>
         <LeftArrowButton
           onClick={handlePrev}
           style={{
@@ -106,7 +106,7 @@ export const SliderEventsWrapper = ({ previewItems, descriptionItems }) => {
             zIndex: 10,
           }}
         />
-      </div>
+      </LargeScreenViewContainer>
       <DescriptionCarousel descriptionItems={descriptionItems} currentIndex={currentIndex} />
     </Wrapper>
   ) : (

src/components/EventsPage/Carousel/SliderCarousel/EventWrapper.styles.jsx

@@ -5,6 +5,10 @@ export const Wrapper = styled.div`
   ${tw`w-full min-h-screen h-auto flex flex-col `}
 `;
 
+export const LargeScreenViewContainer = styled.div`
+  ${tw`relative flex justify-center items-center h-auto`}
+`;
+
 export const SliderContainer = styled.div`
   ${tw`pb-5 overflow-x-hidden h-auto relative`}
 `;

src/components/EventsPage/Carousel/SliderCarousel/swiper.css

@@ -66,6 +66,7 @@
 .mySwiper .swiper-slide-prev-prev,
 .mySwiper .swiper-slide-next-next {
   display: none;
+  opacity: 0.3;
 }
 
 .mySwiper3 .swiper-slide-active {

src/components/EventsPage/Gallery/CardWrapper.jsx

@@ -1,4 +1,4 @@
-import { AllEvents } from '@/components/EventsSection/utils/AllEvents';
+import { AllEvents } from '@/components/EventsSection/shared/AllEvents';
 import { GalleryCard } from './card';
 import { useEffect, useRef, useState } from 'react';
 import { GalleryData } from '@/config/content/EventsPage/GalleryData';