Feat: improved Upper Slider,lower Slider,fix Responsiveness of EventPage

dscnitrourkela · Oct 24, 2024 · 8971f9c · 8971f9c
1 parent f683468
commit 8971f9c
Show file tree

Hide file tree

Showing 17 changed files with 133 additions and 111 deletions.
diff --git a/src/components/EventsPage/CardComponents/DetailsCard.jsx b/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>
   );
 }
 

diff --git a/src/components/EventsPage/CardComponents/DetailsCard.style.jsx b/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-5 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`}
 `;
diff --git a/src/components/EventsPage/CardComponents/PreviewCard.jsx b/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>
   );
 }

diff --git a/src/components/EventsPage/CardComponents/PreviewCard.style.jsx b/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`}
+`;
diff --git a/src/components/EventsPage/Carousel/DescriptionCarousel/Description.style.jsx b/src/components/EventsPage/Carousel/DescriptionCarousel/Description.style.jsx
diff --git a/src/components/EventsPage/Carousel/DescriptionCarousel/DescriptionCarousel.jsx b/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)`

diff --git a/src/components/EventsPage/Carousel/SliderCarousel/EventWrapper.jsx b/src/components/EventsPage/Carousel/SliderCarousel/EventWrapper.jsx
@@ -44,7 +44,7 @@ export const SliderEventsWrapper = ({ previewItems, descriptionItems }) => {
   const startAutoSlide = () => {
     autoSlideIntervalRef.current = setInterval(() => {
       swiperRef.current.swiper.slideNext();
-    }, 10000);
+    }, 15000);
   };
 
   const resetAutoSlide = () => {

diff --git a/src/components/EventsPage/Gallery/CardWrapper.jsx b/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';

diff --git a/src/components/EventsPage/Shared/Banner.jsx b/src/components/EventsPage/Shared/Banner.jsx
@@ -13,36 +13,34 @@ export const DescriptionBanner = ({ Prizes, Location, Time, Date }) => {
   return (
     <Container>
       <DescriptionCardBottom>
-        <div className='flex flex-col justify-center gap-2'>
-          <FlexContainer>
-            <StyledImage
-              src='https://res.cloudinary.com/dfe8sdlkc/image/upload/v1729309788/352521_location_on_icon_u8d6am.png'
-              alt='Location'
-              width={60}
-              height={60}
-            />
-            <TextBold>{Location}</TextBold>
-          </FlexContainer>
+        <FlexContainer>
+          <StyledImage
+            src='https://res.cloudinary.com/dfe8sdlkc/image/upload/v1729309788/352521_location_on_icon_u8d6am.png'
+            alt='Location'
+            width={60}
+            height={60}
+          />
+          <TextBold>{Location}</TextBold>
+        </FlexContainer>
 
-          <FlexContainer>
-            <StyledImage
-              src='https://res.cloudinary.com/dfe8sdlkc/image/upload/v1729311717/8981284_deadline_schedule_calendar_event_time_icon_sozwq1.png'
-              alt='Date and Time'
-              width={60}
-              height={60}
-            />
-            <FlexColumnContainer>
-              <TextBold>{Date}</TextBold>
-              <TextSemiBold>{Time}</TextSemiBold>
-            </FlexColumnContainer>
-          </FlexContainer>
-        </div>
+        <FlexContainer>
+          <StyledImage
+            src='https://res.cloudinary.com/dfe8sdlkc/image/upload/v1729311717/8981284_deadline_schedule_calendar_event_time_icon_sozwq1.png'
+            alt='Date and Time'
+            width={60}
+            height={60}
+          />
+          <FlexColumnContainer>
+            <TextBold>{Date}</TextBold>
+            <TextSemiBold>{Time}</TextSemiBold>
+          </FlexColumnContainer>
+        </FlexContainer>
         <FlexContainer>
           <StyledImage
             src='https://res.cloudinary.com/dhv234qct/image/upload/v1729337575/ywb8h5oubo7hlqrmtjxa.svg'
             alt='Prizes'
-            width={40}
-            height={40}
+            width={60}
+            height={60}
           />
           <TextBold>{Prizes}</TextBold>
         </FlexContainer>

diff --git a/src/components/EventsPage/Shared/ReadMoreText.jsx b/src/components/EventsPage/Shared/ReadMoreText.jsx
@@ -0,0 +1,39 @@
+import { useState } from 'react';
+
+function ReadMore({ text, charLimit = 120 }) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const toggleReadMore = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  const renderText = () => {
+    if (text.length <= charLimit) {
+      return text;
+    }
+
+    if (isExpanded) {
+      return (
+        <>
+          {text}...
+          <spa onClick={toggleReadMore} className='text-[#23757e] cursor-pointer'>
+            Show Less
+          </spa>
+        </>
+      );
+    } else {
+      return (
+        <>
+          {text.slice(0, charLimit)}...
+          <span onClick={toggleReadMore} className='text-[#23757e] cursor-pointer'>
+            Read More
+          </span>
+        </>
+      );
+    }
+  };
+
+  return <>{renderText()}</>;
+}
+
+export default ReadMore;
diff --git a/src/components/EventsPage/Shared/banner.styles.jsx b/src/components/EventsPage/Shared/banner.styles.jsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import Image from 'next/image';
 
 export const Container = styled.div`
-  ${tw`max-w-[1550px] w-full px-2  2xs:px-3 xsm:px-6 ssm:px-16 sm:px-24`}
+  ${tw` w-full  `}
 `;
 
 export const FlexContainer = styled.div`
@@ -16,14 +16,11 @@ export const FlexColumnContainer = styled.div`
 
 export const TextBold = styled.div`
   ${tw`font-bold `};
-  word-break: break-word;
-  overflow-wrap: break-word;
-  max-width: 100%;
 `;
 export const TextSemiBold = styled.div`
   ${tw`font-semibold text-xs xsm:text-lg text-gray-500`}
 `;
 
 export const StyledImage = styled(Image)`
-  ${tw`w-8 h-8 sm:w-14 sm:h-14 md:w-[60px] md:h-[60px]`}
+  ${tw``}
 `;
diff --git a/...Section/eventCardComponents/EventCard.jsx → ...ventsSection/eventCardComponents/Card.jsx b/...Section/eventCardComponents/EventCard.jsx → ...ventsSection/eventCardComponents/Card.jsx
diff --git a/src/components/EventsSection/eventCardComponents/Card.styles.jsx b/src/components/EventsSection/eventCardComponents/Card.styles.jsx
@@ -0,0 +1,6 @@
+import tw from 'twin.macro';
+import styled from 'styled-components';
+
+export const CardContainer = styled.div`
+  ${tw`w-[270px] xxs:w-[310px] xsm:w-[347px] h-[416px] flex justify-center items-center text-[24px] font-spaceX leading-[37px] break-words text-center rounded-3xl`};
+`;
diff --git a/...ponents/EventsSection/utils/AllEvents.jsx → ...onents/EventsSection/shared/AllEvents.jsx b/...ponents/EventsSection/utils/AllEvents.jsx → ...onents/EventsSection/shared/AllEvents.jsx
diff --git a/...components/EventsSection/utils/Button.jsx → ...omponents/EventsSection/shared/Button.jsx b/...components/EventsSection/utils/Button.jsx → ...omponents/EventsSection/shared/Button.jsx
diff --git a/src/components/EventsSection/wrapperComponents/Body.jsx b/src/components/EventsSection/wrapperComponents/Body.jsx
@@ -1,6 +1,6 @@
 import { Link } from '@nextui-org/react';
 import { SubHeader } from '../Header.jsx/SubHeader';
-import { Button } from '../utils/Button';
+import { Button } from '../shared/Button';
 import { CardWrapper } from './CardWrapper';
 
 export const Body = () => {