Feat:fix minor changes

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

Hide file tree

Showing 12 changed files with 58 additions and 140 deletions.
diff --git a/src/components/EventsPage/CardComponents/DetailsCard.style.jsx b/src/components/EventsPage/CardComponents/DetailsCard.style.jsx
@@ -9,7 +9,7 @@ export const DetailsCardcontainer = styled.div`
 `;
 
 export const DescriptionCardContainer = styled.div`
-  ${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 `}
+  ${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)`

diff --git a/src/components/EventsPage/CardData.js b/src/components/EventsPage/CardData.js
diff --git a/src/components/EventsPage/Carousel/SliderCarousel/EventWrapper.jsx b/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 }) => {
@@ -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>
   ) : (

diff --git a/src/components/EventsPage/Carousel/SliderCarousel/EventWrapper.styles.jsx b/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`}
 `;

diff --git a/src/components/EventsPage/Carousel/SliderCarousel/PreviewCarousel.jsx b/src/components/EventsPage/Carousel/SliderCarousel/PreviewCarousel.jsx
diff --git a/src/components/EventsPage/Carousel/SliderCarousel/swiper.css b/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 {

diff --git a/src/components/EventsPage/Shared/Banner.jsx b/src/components/EventsPage/Shared/Banner.jsx
@@ -1,49 +1,22 @@
-import Image from 'next/image';
+// import { BannerData } from '@/config/content/EventsPage/bannerData';
+import { BannerData } from '@/config/content/EventsPage/BannerData';
 import { DescriptionCardBottom } from '../CardComponents/DetailsCard.style';
-import {
-  Container,
-  FlexColumnContainer,
-  FlexContainer,
-  StyledImage,
-  TextBold,
-  TextSemiBold,
-} from './banner.styles';
+import { Container, FlexContainer, StyledImage, TextBold } from './banner.styles';
 
 export const DescriptionBanner = ({ Prizes, Location, Time, Date }) => {
+  const data = BannerData(Prizes, Location, Time, Date);
+
   return (
     <Container>
       <DescriptionCardBottom>
-        <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>
-        <FlexContainer>
-          <StyledImage
-            src='https://res.cloudinary.com/dhv234qct/image/upload/v1729337575/ywb8h5oubo7hlqrmtjxa.svg'
-            alt='Prizes'
-            width={60}
-            height={60}
-          />
-          <TextBold>{Prizes}</TextBold>
-        </FlexContainer>
+        {data.map((items, index) => (
+          <div key={index}>
+            <FlexContainer>
+              <StyledImage src={items.Url} alt={items.Title} width={60} height={60} />
+              <TextBold>{items.Title}</TextBold>
+            </FlexContainer>
+          </div>
+        ))}
       </DescriptionCardBottom>
     </Container>
   );

diff --git a/src/components/EventsPage/Shared/banner.styles.jsx b/src/components/EventsPage/Shared/banner.styles.jsx
@@ -18,7 +18,7 @@ export const TextBold = styled.div`
   ${tw`font-bold `};
 `;
 export const TextSemiBold = styled.div`
-  ${tw`font-semibold text-xs xsm:text-lg text-gray-500`}
+  ${tw`font-semibold text-xs xsm:text-lg text-white/[0.8]`}
 `;
 
 export const StyledImage = styled(Image)`

diff --git a/src/components/EventsSection/eventCardComponents/Card.jsx b/src/components/EventsSection/eventCardComponents/Card.jsx
@@ -1,20 +1,23 @@
 import Image from 'next/image';
+import Link from 'next/link';
 
 export const EventCard = ({ label, isTranslatedUp }) => {
   console.log(label);
   return (
     <>
-      <div
-        style={{
-          background: 'linear-gradient(180deg, #002A2A 0%, #17001D 100%)',
-          boxShadow:
-            '0px 10px 50px rgba(255, 255, 255, 0.3), 0px 5px 15px rgba(255, 255, 255, 0.6)',
-          position: 'relative',
-        }}
-        className=' w-[270px] xxsm:w-[310px] xsm:w-[347px] h-[416px]  flex justify-center items-center text-[24px] font-spaceX leading-[37px] break-words text-center rounded-3xl'
-      >
-        <Image src={label} alt='alt' fill style={{ objectFit: 'fill', borderRadius: '16px' }} />
-      </div>
+      <Link href={'/events'}>
+        <div
+          style={{
+            background: 'linear-gradient(180deg, #002A2A 0%, #17001D 100%)',
+            boxShadow:
+              '0px 10px 50px rgba(255, 255, 255, 0.3), 0px 5px 15px rgba(255, 255, 255, 0.6)',
+            position: 'relative',
+          }}
+          className=' w-[270px] xxsm:w-[310px] xsm:w-[347px] h-[416px]  flex justify-center items-center text-[24px] font-spaceX leading-[37px] break-words text-center rounded-3xl'
+        >
+          <Image src={label} alt='alt' fill style={{ objectFit: 'fill', borderRadius: '16px' }} />
+        </div>
+      </Link>
     </>
   );
 };
diff --git a/src/components/EventsSection/shared/Button.jsx b/src/components/EventsSection/shared/Button.jsx
@@ -1,10 +1,13 @@
 import { RegisterButton } from '@/components/Marginals/navbar/navbar.styles';
 import { PrimaryButton } from '@/components/shared/Typography/Buttons';
+import Link from 'next/link';
 
 export const Button = () => {
   return (
     <>
-      <PrimaryButton>Explore More</PrimaryButton>
+      <Link href='/events'>
+        <PrimaryButton>Explore More</PrimaryButton>
+      </Link>
     </>
   );
 };
diff --git a/src/components/EventsSection/wrapperComponents/Body.jsx b/src/components/EventsSection/wrapperComponents/Body.jsx
@@ -1,17 +1,14 @@
-import { Link } from '@nextui-org/react';
 import { SubHeader } from '../Header.jsx/SubHeader';
 import { Button } from '../shared/Button';
 import { CardWrapper } from './CardWrapper';
 
 export const Body = () => {
   return (
     <>
-      <div className='flex flex-col justify-center items-center gap-10 xsm:gap-20 md:gap-32 xl:gap-44 py-20 px-5  xsm:p-6 sm:p-8 md:p-0  bg-black bg-opacity-50 overflow-hidden'>
+      <div className='flex flex-col justify-center items-center gap-10 py-20 px-5  xsm:p-6 sm:p-8 md:p-0 md:pb-20  bg-black bg-opacity-50 overflow-hidden'>
         <CardWrapper />
         <SubHeader />
-        <Link href='/events'>
-          <Button />
-        </Link>
+        <Button />
       </div>
     </>
   );

diff --git a/src/config/content/EventsPage/BannerData.js b/src/config/content/EventsPage/BannerData.js
@@ -0,0 +1,15 @@
+export const BannerData = (Prizes, Location, Time, Date) => [
+  {
+    Title: Location,
+    Url: 'https://res.cloudinary.com/dfe8sdlkc/image/upload/v1729309788/352521_location_on_icon_u8d6am.png',
+  },
+  {
+    Title: Date,
+    title2: Time,
+    Url: 'https://res.cloudinary.com/dfe8sdlkc/image/upload/v1729311717/8981284_deadline_schedule_calendar_event_time_icon_sozwq1.png',
+  },
+  {
+    Title: Prizes,
+    Url: 'https://res.cloudinary.com/dhv234qct/image/upload/v1729337575/ywb8h5oubo7hlqrmtjxa.svg',
+  },
+];