From 8971f9cb2e388029de67243dcca2bbae0338da69 Mon Sep 17 00:00:00 2001
From: AYANscyy2 <mayan6378@gmail.com>
Date: Thu, 24 Oct 2024 15:23:10 +0530
Subject: [PATCH 1/9] Feat: improved Upper Slider,lower Slider,fix
 Responsiveness of EventPage

---
 .../EventsPage/CardComponents/DetailsCard.jsx | 38 +++++----------
 .../CardComponents/DetailsCard.style.jsx      | 39 +++++++--------
 .../EventsPage/CardComponents/PreviewCard.jsx | 17 +++----
 .../CardComponents/PreviewCard.style.jsx      | 15 ++++--
 .../DescriptionCarousel/Description.style.jsx | 11 -----
 .../DescriptionCarousel.jsx                   | 14 ++++--
 .../Carousel/SliderCarousel/EventWrapper.jsx  |  2 +-
 .../EventsPage/Gallery/CardWrapper.jsx        |  2 +-
 src/components/EventsPage/Shared/Banner.jsx   | 48 +++++++++----------
 .../EventsPage/Shared/ReadMoreText.jsx        | 39 +++++++++++++++
 .../EventsPage/Shared/banner.styles.jsx       |  7 +--
 .../{EventCard.jsx => Card.jsx}               |  0
 .../eventCardComponents/Card.styles.jsx       |  6 +++
 .../{utils => shared}/AllEvents.jsx           |  0
 .../{utils => shared}/Button.jsx              |  0
 .../EventsSection/wrapperComponents/Body.jsx  |  2 +-
 .../wrapperComponents/CardWrapper.jsx         |  4 +-
 17 files changed, 133 insertions(+), 111 deletions(-)
 delete mode 100644 src/components/EventsPage/Carousel/DescriptionCarousel/Description.style.jsx
 create mode 100644 src/components/EventsPage/Shared/ReadMoreText.jsx
 rename src/components/EventsSection/eventCardComponents/{EventCard.jsx => Card.jsx} (100%)
 create mode 100644 src/components/EventsSection/eventCardComponents/Card.styles.jsx
 rename src/components/EventsSection/{utils => shared}/AllEvents.jsx (100%)
 rename src/components/EventsSection/{utils => shared}/Button.jsx (100%)

diff --git a/src/components/EventsPage/CardComponents/DetailsCard.jsx b/src/components/EventsPage/CardComponents/DetailsCard.jsx
index e8171783..afe3b955 100644
--- 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
index 02a9f118..2750546e 100644
--- 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
index 14162f53..70637311 100644
--- a/src/components/EventsPage/CardComponents/PreviewCard.jsx
+++ b/src/components/EventsPage/CardComponents/PreviewCard.jsx
@@ -1,7 +1,8 @@
-import Image from 'next/image';
 import {
+  PreviewButtonContainer,
   PreviewCardContainer,
   PreviewCardContent,
+  PreviewCardImage,
   PreviewMoreInfoButton,
   PreviewMoreInfoButton2,
 } from './PreviewCard.style';
@@ -9,22 +10,16 @@ import {
 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
index ada339aa..64025ae7 100644
--- 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
deleted file mode 100644
index 918ee97a..00000000
--- a/src/components/EventsPage/Carousel/DescriptionCarousel/Description.style.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import tw from 'twin.macro';
-import styled from 'styled-components';
-import { PrimaryButton } from '@/components/shared/Typography/Buttons';
-
-const DescriptionContainer = styled.div`
-  ${tw`w-full mt-8 mb-20 h-auto relative`};
-`;
-
-const DescriptionSlide = styled(motion.div)`
-  ${tw`w-full`};
-`;
diff --git a/src/components/EventsPage/Carousel/DescriptionCarousel/DescriptionCarousel.jsx b/src/components/EventsPage/Carousel/DescriptionCarousel/DescriptionCarousel.jsx
index 91228dc0..bfc15ade 100644
--- 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
index cf2d2381..4e8e1557 100644
--- 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
index 248d6727..836b05ce 100644
--- 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
index dedd44dc..9032fc5b 100644
--- 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
new file mode 100644
index 00000000..18223b22
--- /dev/null
+++ 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
index afb585bf..41fb2c1f 100644
--- 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/src/components/EventsSection/eventCardComponents/EventCard.jsx b/src/components/EventsSection/eventCardComponents/Card.jsx
similarity index 100%
rename from src/components/EventsSection/eventCardComponents/EventCard.jsx
rename to src/components/EventsSection/eventCardComponents/Card.jsx
diff --git a/src/components/EventsSection/eventCardComponents/Card.styles.jsx b/src/components/EventsSection/eventCardComponents/Card.styles.jsx
new file mode 100644
index 00000000..9a71a44d
--- /dev/null
+++ 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/src/components/EventsSection/utils/AllEvents.jsx b/src/components/EventsSection/shared/AllEvents.jsx
similarity index 100%
rename from src/components/EventsSection/utils/AllEvents.jsx
rename to src/components/EventsSection/shared/AllEvents.jsx
diff --git a/src/components/EventsSection/utils/Button.jsx b/src/components/EventsSection/shared/Button.jsx
similarity index 100%
rename from src/components/EventsSection/utils/Button.jsx
rename to src/components/EventsSection/shared/Button.jsx
diff --git a/src/components/EventsSection/wrapperComponents/Body.jsx b/src/components/EventsSection/wrapperComponents/Body.jsx
index b9e6d47c..e3de1a5c 100644
--- 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 = () => {
diff --git a/src/components/EventsSection/wrapperComponents/CardWrapper.jsx b/src/components/EventsSection/wrapperComponents/CardWrapper.jsx
index 6863b37b..691a65f7 100644
--- a/src/components/EventsSection/wrapperComponents/CardWrapper.jsx
+++ b/src/components/EventsSection/wrapperComponents/CardWrapper.jsx
@@ -3,9 +3,9 @@ import { useState, useEffect, useRef } from 'react';
 import { useAnimate } from 'framer-motion';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { Pagination } from 'swiper/modules';
-import { EventCard } from '../eventCardComponents/EventCard';
+import { EventCard } from '../eventCardComponents/Card';
 import '../../EventsPage/Carousel/SliderCarousel/swiper.css';
-import { AllEvents } from '../utils/AllEvents';
+import { AllEvents } from '../shared/AllEvents';
 import { CardLabel } from '../eventCardComponents/Cardlabel';
 
 export const CardWrapper = () => {

From a08cdc3428c999a96fea994c463b6122ffab239d Mon Sep 17 00:00:00 2001
From: AYANscyy2 <mayan6378@gmail.com>
Date: Thu, 24 Oct 2024 17:11:03 +0530
Subject: [PATCH 2/9] Feat:fix minor changes

---
 .../CardComponents/DetailsCard.style.jsx      |  2 +-
 src/components/EventsPage/CardData.js         |  9 ---
 .../Carousel/SliderCarousel/EventWrapper.jsx  |  6 +-
 .../SliderCarousel/EventWrapper.styles.jsx    |  4 ++
 .../SliderCarousel/PreviewCarousel.jsx        | 69 -------------------
 .../Carousel/SliderCarousel/swiper.css        |  1 +
 src/components/EventsPage/Shared/Banner.jsx   | 53 ++++----------
 .../EventsPage/Shared/banner.styles.jsx       |  2 +-
 .../eventCardComponents/Card.jsx              | 25 ++++---
 .../EventsSection/shared/Button.jsx           |  5 +-
 .../EventsSection/wrapperComponents/Body.jsx  |  7 +-
 src/config/content/EventsPage/BannerData.js   | 15 ++++
 12 files changed, 58 insertions(+), 140 deletions(-)
 delete mode 100644 src/components/EventsPage/CardData.js
 delete mode 100644 src/components/EventsPage/Carousel/SliderCarousel/PreviewCarousel.jsx
 create mode 100644 src/config/content/EventsPage/BannerData.js

diff --git a/src/components/EventsPage/CardComponents/DetailsCard.style.jsx b/src/components/EventsPage/CardComponents/DetailsCard.style.jsx
index 2750546e..c61666a8 100644
--- 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
deleted file mode 100644
index 07bb5a13..00000000
--- a/src/components/EventsPage/CardData.js
+++ /dev/null
@@ -1,9 +0,0 @@
-export const Topics = ['Rank', 'Name of college'];
-
-export const Info = [
-  { Rank: '1', college: 'National Institute Of Technology', Students: '100' },
-  { Rank: '2', college: 'Indian Institute Of Technology', Students: '80' },
-  { Rank: '3', college: 'Birla Institute Of Technology', Students: '70' },
-  { Rank: '4', college: 'Institute of Engineering and Technology', Students: '60' },
-  { Rank: '5', college: 'Jawaharlal Nehru Technological University', Students: '50' },
-];
diff --git a/src/components/EventsPage/Carousel/SliderCarousel/EventWrapper.jsx b/src/components/EventsPage/Carousel/SliderCarousel/EventWrapper.jsx
index 4e8e1557..5670b596 100644
--- 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
index 7fe2b82a..51512d25 100644
--- 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
deleted file mode 100644
index c096d48c..00000000
--- a/src/components/EventsPage/Carousel/SliderCarousel/PreviewCarousel.jsx
+++ /dev/null
@@ -1,69 +0,0 @@
-// components/EventsPage/Carousel/MainCarousel.jsx
-import { useState } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
-import { LeftArrowButton, RightArrowButton } from '../../Shared/ArrowButton';
-import PreviewCard from '../../CardComponents/PreviewCard';
-import tw, { styled } from 'twin.macro';
-
-const PreviewCarouselContainer = styled.div`
-  ${tw` w-full overflow-hidden`}
-  height: 605.44px;
-`;
-
-const PreviewSlideContainer = styled(motion.div)`
-  ${tw`flex justify-center left-0 w-full`}
-`;
-
-const PreviewCarousel = ({ items, onSlideChange }) => {
-  const [current, setCurrent] = useState(0);
-  const [direction, setDirection] = useState(0);
-
-  const paginate = (newDirection) => {
-    const newIndex = (current + newDirection + items.length) % items.length;
-    setCurrent(newIndex);
-    setDirection(newDirection);
-    onSlideChange(newIndex);
-  };
-
-  const variants = {
-    enter: (direction) => ({
-      x: direction > 0 ? 300 : -300,
-      opacity: 0,
-      position: 'absolute',
-    }),
-    center: {
-      x: 0,
-      opacity: 1,
-      position: 'absolute',
-    },
-    exit: (direction) => ({
-      x: direction < 0 ? 300 : -300,
-      opacity: 0,
-      position: 'absolute',
-    }),
-  };
-  return (
-    <PreviewCarouselContainer>
-      <AnimatePresence initial={false} custom={direction}>
-        <PreviewSlideContainer
-          key={current}
-          custom={direction}
-          variants={variants}
-          initial='enter'
-          animate='center'
-          exit='exit'
-          transition={{
-            x: { type: 'spring', stiffness: 300, damping: 30 },
-            opacity: { duration: 0.2 },
-          }}
-        >
-          <PreviewCard {...items[current]} />
-        </PreviewSlideContainer>
-      </AnimatePresence>
-      <LeftArrowButton position='left' onClick={() => paginate(-1)} aria-label='Previous Slide' />
-      <RightArrowButton position='right' onClick={() => paginate(1)} aria-label='Next Slide' />
-    </PreviewCarouselContainer>
-  );
-};
-
-export default PreviewCarousel;
diff --git a/src/components/EventsPage/Carousel/SliderCarousel/swiper.css b/src/components/EventsPage/Carousel/SliderCarousel/swiper.css
index ea3dfbd5..b6fde25f 100644
--- 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
index 9032fc5b..515c1069 100644
--- 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
index 41fb2c1f..415eec13 100644
--- 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
index abb2cfcc..196ff518 100644
--- 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
index 6c8355fb..0dee0c90 100644
--- 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
index e3de1a5c..64cfb971 100644
--- a/src/components/EventsSection/wrapperComponents/Body.jsx
+++ b/src/components/EventsSection/wrapperComponents/Body.jsx
@@ -1,4 +1,3 @@
-import { Link } from '@nextui-org/react';
 import { SubHeader } from '../Header.jsx/SubHeader';
 import { Button } from '../shared/Button';
 import { CardWrapper } from './CardWrapper';
@@ -6,12 +5,10 @@ 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
new file mode 100644
index 00000000..96275316
--- /dev/null
+++ 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',
+  },
+];

From 50bc1a516e21b924f9522829222d12c46231daee Mon Sep 17 00:00:00 2001
From: AYANscyy2 <mayan6378@gmail.com>
Date: Sat, 26 Oct 2024 01:38:54 +0530
Subject: [PATCH 3/9] feat:add payment Section in Register Form

---
 src/app/register/page.jsx                     | 11 +++++-
 src/app/register/register.styles.jsx          |  9 ++++-
 .../Register/Qrscanner/QrButton.jsx           | 17 ++++++++
 src/components/Register/Qrscanner/QrModal.jsx | 39 +++++++++++++++++++
 src/config/content/Registration/details.js    | 22 +++++++++++
 5 files changed, 96 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Register/Qrscanner/QrButton.jsx
 create mode 100644 src/components/Register/Qrscanner/QrModal.jsx

diff --git a/src/app/register/page.jsx b/src/app/register/page.jsx
index 7e7cfca7..9899b352 100644
--- a/src/app/register/page.jsx
+++ b/src/app/register/page.jsx
@@ -9,6 +9,7 @@ import {
   Moon,
   UndertakingLink,
   PaymentPolicyInfo,
+  PaymentHeading,
 } from './register.styles';
 import Link from 'next/link';
 import InputField from '@/components/Register/InputField/InputField';
@@ -25,6 +26,7 @@ import { PrimaryButton } from '@/components/shared/Typography/Buttons';
 import { AuthContext } from '@/context/auth-context';
 import { RegistrationModal } from './RegistrationModal';
 import toast from 'react-hot-toast';
+import { QrButton } from '@/components/Register/Qrscanner/QrButton';
 
 function Page() {
   const [userDetails, setUserDetails] = useState({
@@ -158,6 +160,13 @@ function Page() {
             error={errors[field.id]}
           />
         );
+      case 'button':
+        return (
+          <>
+            <PaymentHeading>Payment Section </PaymentHeading>
+            <QrButton label={field.label} />
+          </>
+        );
       case 'checkbox':
         return (
           <CheckBox
@@ -187,7 +196,7 @@ function Page() {
     <RegisterContainer>
       <Moon />
 
-      {isLoggedIn ? (
+      {!isLoggedIn ? (
         <RegisterInnerContainer>
           <RegisterHeading>Register</RegisterHeading>
           <RegisterForm>
diff --git a/src/app/register/register.styles.jsx b/src/app/register/register.styles.jsx
index 83411542..57af1929 100644
--- a/src/app/register/register.styles.jsx
+++ b/src/app/register/register.styles.jsx
@@ -1,12 +1,19 @@
 import styled from 'styled-components';
 import tw from 'twin.macro';
-import { Heading1 } from '@/components/shared/Typography/Headings';
+import { Heading1, Heading2 } from '@/components/shared/Typography/Headings';
 import { PrimaryButton } from '@/components/shared/Typography/Buttons';
 
 export const RegisterHeading = styled(Heading1)`
   ${tw`text-center text-2xl xxs:text-3xl ssm:text-4xl md:text-5xl lg:text-6xl my-0 py-0 font-spaceX text-white`}
 `;
 
+export const PaymentContainer = styled.div`
+  ${tw`w-auto h-auto p-5 border-[#00FFD1] border-2`}
+`;
+export const PaymentHeading = styled(Heading2)`
+  ${tw`text-left`}
+`;
+
 export const RegisterContainer = styled.div`
   ${tw`min-h-screen flex flex-col items-center w-full justify-center pt-20 pb-16 px-2 xxs:px-5 xsm:px-10 md:px-20`};
   background: url('https://res.cloudinary.com/dmvdbpyqk/image/upload/v1728797925/registration_si85oa.png');
diff --git a/src/components/Register/Qrscanner/QrButton.jsx b/src/components/Register/Qrscanner/QrButton.jsx
new file mode 100644
index 00000000..72f7ff83
--- /dev/null
+++ b/src/components/Register/Qrscanner/QrButton.jsx
@@ -0,0 +1,17 @@
+import { PrimaryButton } from '@/components/shared/Typography/Buttons';
+import { useState } from 'react';
+import { QrModal } from './QrModal';
+
+export const QrButton = ({ label }) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const handleModal = () => {
+    setIsModalOpen(!isModalOpen);
+  };
+  return (
+    <>
+      <PrimaryButton onClick={handleModal}>{label}</PrimaryButton>
+      <QrModal isOpen={isModalOpen} onClose={handleModal} />
+    </>
+  );
+};
diff --git a/src/components/Register/Qrscanner/QrModal.jsx b/src/components/Register/Qrscanner/QrModal.jsx
new file mode 100644
index 00000000..2795b822
--- /dev/null
+++ b/src/components/Register/Qrscanner/QrModal.jsx
@@ -0,0 +1,39 @@
+import { closeIcon } from '@/config/content/Footer';
+import { QrImgUrl } from '@/config/content/Registration/details';
+import { Button, Modal, ModalBody, ModalContent } from '@nextui-org/react';
+import Image from 'next/image';
+
+export const QrModal = ({ onClose, isOpen }) => {
+  return (
+    <>
+      <Modal
+        size='xl'
+        isOpen={isOpen}
+        onClose={onClose}
+        backdrop='blur'
+        hideCloseButton={true}
+        placement='center'
+        className='backdrop-blur-lg'
+      >
+        <ModalContent className='relative bg-[#0000002a] h-[60vh] xxs:h-[70vh] md:h-[90vh] md:mt-48 focus:outline-none focus:border-0'>
+          <Button
+            color='danger'
+            variant='light'
+            onPress={onClose}
+            className='absolute top-1 right-0 z-10 focus:outline-none focus:border-0'
+          >
+            <Image src={closeIcon} alt='close' width={30} height={30} />
+          </Button>
+          <ModalBody className='h-full flex flex-col justify-center items-center'>
+            <Image
+              src={QrImgUrl}
+              alt='Qr'
+              fill
+              style={{ objectFit: 'fill', borderRadius: '16px' }}
+            />
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};
diff --git a/src/config/content/Registration/details.js b/src/config/content/Registration/details.js
index c2011d44..21888285 100644
--- a/src/config/content/Registration/details.js
+++ b/src/config/content/Registration/details.js
@@ -182,6 +182,7 @@ export const formFields = [
     id: 'institute',
     className: 'w-full',
   },
+
   {
     label: 'Name of the University (Full Name) ',
     type: 'text',
@@ -199,6 +200,7 @@ export const formFields = [
     type: 'file',
     id: 'idCard',
   },
+
   {
     label: 'Referral Code',
     type: 'text',
@@ -220,6 +222,23 @@ export const formFields = [
     id: 'gender',
     className: 'oneliner',
   },
+  {
+    label: 'Click to Pay',
+    type: 'button',
+    id: 'qr',
+    className: 'w-full',
+  },
+  {
+    label: 'Upload Payment Screenshot',
+    type: 'file',
+    id: 'idCard',
+  },
+  {
+    label: 'Transaction ID',
+    type: 'text',
+    id: 'TranscId',
+    className: 'w-full',
+  },
   {
     label: 'By proceeding, you agree to our terms and conditions.',
     type: 'checkbox',
@@ -259,3 +278,6 @@ export const undertakingContent = {
   link: 'https://drive.google.com/file/d/1rHV-eF4Z5ihY1VwqYg97FAEiVAYQ3g8E/view?usp=sharing',
   text: 'Undertaking Form for Authorization/Permission Letter',
 };
+
+export const QrImgUrl =
+  'https://res.cloudinary.com/dfe8sdlkc/image/upload/v1729884328/85002429435_sbi_gt1in2.webp';

From 5dbdd90166f821ffdbaa98e778d01838c0eaf0d6 Mon Sep 17 00:00:00 2001
From: AYANscyy2 <mayan6378@gmail.com>
Date: Sat, 26 Oct 2024 17:36:53 +0530
Subject: [PATCH 4/9] feat:update payment section in register page

---
 src/app/register/page.jsx                     | 31 ++++++++++---
 src/app/register/register.styles.jsx          | 20 +++++++--
 .../PaymentComponents/MerchantInfo.jsx        | 13 ++++++
 .../Register/PaymentComponents/Qr.jsx         | 11 +++++
 .../QrButton.jsx                              |  0
 .../QrModal.jsx                               |  0
 src/config/content/Registration/details.js    | 44 +++++++++++++++++--
 7 files changed, 106 insertions(+), 13 deletions(-)
 create mode 100644 src/components/Register/PaymentComponents/MerchantInfo.jsx
 create mode 100644 src/components/Register/PaymentComponents/Qr.jsx
 rename src/components/Register/{Qrscanner => PaymentComponents}/QrButton.jsx (100%)
 rename src/components/Register/{Qrscanner => PaymentComponents}/QrModal.jsx (100%)

diff --git a/src/app/register/page.jsx b/src/app/register/page.jsx
index 9899b352..23b1254d 100644
--- a/src/app/register/page.jsx
+++ b/src/app/register/page.jsx
@@ -10,6 +10,8 @@ import {
   UndertakingLink,
   PaymentPolicyInfo,
   PaymentHeading,
+  DisclaimerPara,
+  Heading,
 } from './register.styles';
 import Link from 'next/link';
 import InputField from '@/components/Register/InputField/InputField';
@@ -26,7 +28,13 @@ import { PrimaryButton } from '@/components/shared/Typography/Buttons';
 import { AuthContext } from '@/context/auth-context';
 import { RegistrationModal } from './RegistrationModal';
 import toast from 'react-hot-toast';
-import { QrButton } from '@/components/Register/Qrscanner/QrButton';
+// import { QrButton } from '@/components/Register/PaymentComponents/QrButton';
+import { MerchantInfo } from '@/components/Register/PaymentComponents/MerchantInfo';
+import { Qr } from '@/components/Register/PaymentComponents/Qr';
+import { Heading3 } from '../events/page.style';
+// import { Paragraph, SmallParagraph } from '@/components/shared/Typography/Paragraphs';
+// import { Heading1 } from '@/components/shared/Typography/Headings';
+// import { Heading3 } from '../codeofconduct/page.styles';
 
 function Page() {
   const [userDetails, setUserDetails] = useState({
@@ -160,13 +168,26 @@ function Page() {
             error={errors[field.id]}
           />
         );
-      case 'button':
+
+      case 'Head':
+        return <PaymentHeading>{field.content}</PaymentHeading>;
+
+      case 'or':
+        return <Heading>{field.content}</Heading>;
+
+      case 'Title':
         return (
           <>
-            <PaymentHeading>Payment Section </PaymentHeading>
-            <QrButton label={field.label} />
+            {/* <PaymentHeading>Payment Section </PaymentHeading> */}
+            <MerchantInfo label={field.label} labelInfo={field.labelInfo} />
           </>
         );
+      case 'Image':
+        return <Qr QrUrl={field.QrUrl} />;
+
+      case 'Disclaimer':
+        return <DisclaimerPara>{field.content}</DisclaimerPara>;
+
       case 'checkbox':
         return (
           <CheckBox
@@ -196,7 +217,7 @@ function Page() {
     <RegisterContainer>
       <Moon />
 
-      {!isLoggedIn ? (
+      {isLoggedIn ? (
         <RegisterInnerContainer>
           <RegisterHeading>Register</RegisterHeading>
           <RegisterForm>
diff --git a/src/app/register/register.styles.jsx b/src/app/register/register.styles.jsx
index 57af1929..da579b83 100644
--- a/src/app/register/register.styles.jsx
+++ b/src/app/register/register.styles.jsx
@@ -2,16 +2,28 @@ import styled from 'styled-components';
 import tw from 'twin.macro';
 import { Heading1, Heading2 } from '@/components/shared/Typography/Headings';
 import { PrimaryButton } from '@/components/shared/Typography/Buttons';
+import { SmallParagraph } from '@/components/shared/Typography/Paragraphs';
+import { Heading3 } from '../events/page.style';
 
 export const RegisterHeading = styled(Heading1)`
   ${tw`text-center text-2xl xxs:text-3xl ssm:text-4xl md:text-5xl lg:text-6xl my-0 py-0 font-spaceX text-white`}
 `;
 
-export const PaymentContainer = styled.div`
-  ${tw`w-auto h-auto p-5 border-[#00FFD1] border-2`}
-`;
 export const PaymentHeading = styled(Heading2)`
-  ${tw`text-left`}
+  ${tw`m-0 p-3 border-[#00FFD1] border-2 rounded-lg`}
+`;
+
+export const Heading = styled(Heading3)`
+  ${tw`pb-0 mb-0`}
+`;
+export const MerchantLabel = styled(Heading2)`
+  ${tw`text-left text-[#00FFD1] p-0 m-0`}
+`;
+export const MerchantLabelInfo = styled(Heading2)`
+  ${tw`text-left text-gray-200 m-0 p-0 `}
+`;
+export const DisclaimerPara = styled(SmallParagraph)`
+  ${tw`text-red-500 `}
 `;
 
 export const RegisterContainer = styled.div`
diff --git a/src/components/Register/PaymentComponents/MerchantInfo.jsx b/src/components/Register/PaymentComponents/MerchantInfo.jsx
new file mode 100644
index 00000000..d5ebd9eb
--- /dev/null
+++ b/src/components/Register/PaymentComponents/MerchantInfo.jsx
@@ -0,0 +1,13 @@
+// import { Heading3 } from '@/app/events/page.style';
+import { MerchantLabel, MerchantLabelInfo, PaymentHeading } from '@/app/register/register.styles';
+
+export const MerchantInfo = ({ label, labelInfo }) => {
+  return (
+    <>
+      <div className='flex gap-2'>
+        <MerchantLabel>{label}:</MerchantLabel>
+        <MerchantLabelInfo>{labelInfo}</MerchantLabelInfo>
+      </div>
+    </>
+  );
+};
diff --git a/src/components/Register/PaymentComponents/Qr.jsx b/src/components/Register/PaymentComponents/Qr.jsx
new file mode 100644
index 00000000..b4a8ebdd
--- /dev/null
+++ b/src/components/Register/PaymentComponents/Qr.jsx
@@ -0,0 +1,11 @@
+import Image from 'next/image';
+
+export const Qr = ({ QrUrl }) => {
+  return (
+    <>
+      <div className='flex justify-center'>
+        <Image src={QrUrl} alt='Qr' width={200} height={200} />
+      </div>
+    </>
+  );
+};
diff --git a/src/components/Register/Qrscanner/QrButton.jsx b/src/components/Register/PaymentComponents/QrButton.jsx
similarity index 100%
rename from src/components/Register/Qrscanner/QrButton.jsx
rename to src/components/Register/PaymentComponents/QrButton.jsx
diff --git a/src/components/Register/Qrscanner/QrModal.jsx b/src/components/Register/PaymentComponents/QrModal.jsx
similarity index 100%
rename from src/components/Register/Qrscanner/QrModal.jsx
rename to src/components/Register/PaymentComponents/QrModal.jsx
diff --git a/src/config/content/Registration/details.js b/src/config/content/Registration/details.js
index 21888285..9735de99 100644
--- a/src/config/content/Registration/details.js
+++ b/src/config/content/Registration/details.js
@@ -222,12 +222,48 @@ export const formFields = [
     id: 'gender',
     className: 'oneliner',
   },
+
+  { type: 'Head', content: 'pay via Qr' },
+
   {
-    label: 'Click to Pay',
-    type: 'button',
-    id: 'qr',
-    className: 'w-full',
+    label: 'Merchant Name',
+    type: 'Title',
+    labelInfo: 'PLAN FUND NIT ROURKELA',
+  },
+  {
+    label: 'UPI ID',
+    type: 'Title',
+    labelInfo: '85002429435@sbi',
+  },
+  {
+    type: 'Image',
+    QrUrl:
+      'https://res.cloudinary.com/dfe8sdlkc/image/upload/v1729940616/Pay_for_Registration_oqdgsq.png',
+  },
+  {
+    type: 'Disclaimer',
+    content: '{Please ensure the amount is exactly INR 899}',
   },
+  { type: 'or', content: 'or' },
+
+  { type: 'Head', content: 'pay through bank' },
+
+  {
+    label: 'Bank Account Name',
+    type: 'Title',
+    labelInfo: 'STUDENT ACTIVITY CENTRE NIT - ROURKELA',
+  },
+  {
+    label: 'Bank Account Number',
+    type: 'Title',
+    labelInfo: '_00000037377186107',
+  },
+  {
+    label: 'IFSC Code',
+    type: 'Title',
+    labelInfo: 'SBIN0002109',
+  },
+
   {
     label: 'Upload Payment Screenshot',
     type: 'file',

From 248c97636e392538753c1d85bf38979c829002eb Mon Sep 17 00:00:00 2001
From: AYANscyy2 <mayan6378@gmail.com>
Date: Sat, 26 Oct 2024 22:09:43 +0530
Subject: [PATCH 5/9] feat:update payment section in registration page

---
 src/app/events/page.jsx                       |  11 +-
 src/app/register/page.jsx                     |  18 +--
 src/app/register/register.styles.jsx          |  10 +-
 .../DescriptionCarousel.jsx                   |   4 +-
 .../EventsPage/Carousel/PreviewCarousel.jsx   | 109 ++++++++++++++++
 ....styles.jsx => PreviewCarousel.styles.jsx} |   0
 .../Carousel/SliderCarousel/DesktopView.jsx   |  37 ------
 .../Carousel/SliderCarousel/EventWrapper.jsx  | 121 ------------------
 .../Carousel/SliderCarousel/MobileView.jsx    |  38 ------
 .../Carousel/{SliderCarousel => }/swiper.css  |  13 +-
 .../EventsPage/Shared/ArrowButton.jsx         |   2 +-
 src/components/EventsPage/index.jsx           |   4 +-
 .../eventCardComponents/Card.jsx              |   3 +-
 .../wrapperComponents/CardWrapper.jsx         | 110 ++++------------
 .../PaymentComponents/MerchantInfo.jsx        |   2 +-
 src/config/content/Registration/details.js    |  33 +++--
 src/firebase/firebase.js                      |  26 ++--
 17 files changed, 185 insertions(+), 356 deletions(-)
 rename src/components/EventsPage/Carousel/{DescriptionCarousel => }/DescriptionCarousel.jsx (89%)
 create mode 100644 src/components/EventsPage/Carousel/PreviewCarousel.jsx
 rename src/components/EventsPage/Carousel/{SliderCarousel/EventWrapper.styles.jsx => PreviewCarousel.styles.jsx} (100%)
 delete mode 100644 src/components/EventsPage/Carousel/SliderCarousel/DesktopView.jsx
 delete mode 100644 src/components/EventsPage/Carousel/SliderCarousel/EventWrapper.jsx
 delete mode 100644 src/components/EventsPage/Carousel/SliderCarousel/MobileView.jsx
 rename src/components/EventsPage/Carousel/{SliderCarousel => }/swiper.css (99%)

diff --git a/src/app/events/page.jsx b/src/app/events/page.jsx
index 924ea662..bd9ba3b8 100644
--- a/src/app/events/page.jsx
+++ b/src/app/events/page.jsx
@@ -1,9 +1,5 @@
 'use client';
-// import {
-//   GL_descriptionItems,
-//   GL_previewItems,
-// } from '@/config/content/EventsPage/GuestLecture/Data';
-// import { Heading3 } from '@/components/shared/Typography/Headings';
+
 import { EventsContainer, Heading3 } from './page.style';
 import MainCarousel from '@/components/EventsPage/index';
 import {
@@ -14,7 +10,6 @@ import {
   Exhibition_descriptionItems,
   Exhibition_previewItems,
 } from '@/config/content/EventsPage/Exhibition/Data';
-// import { DTS_previewItems, DTS_descriptionItems } from '@/config/content/EventsPage/DTS_Shows/Data';
 import { ME_descriptionItems, ME_previewItems } from '@/config/content/EventsPage/MainEvents/Data';
 
 import {
@@ -23,8 +18,6 @@ import {
 } from '@/config/content/EventsPage/FunEvents/Data';
 import { ComingSoon } from '@/components/EventsPage/ComingSoon';
 import { GalleryWrapper } from '@/components/EventsPage/Gallery/CardWrapper';
-// import { GalleryWrapper, Gallerywrapper } from '@/components/EventsPage/Gallery/CardWrapper';
-// import { GalleryWrapper } from '@/components/EventsPage/Gallery/CardWrapper';
 
 export default function Page() {
   return (
@@ -45,10 +38,8 @@ export default function Page() {
           descriptionItems={Exhibition_descriptionItems}
         />
         <Heading3>SHOWS AT DTS</Heading3>
-        {/* <MainCarousel previewItems={DTS_previewItems} descriptionItems={GL_descriptionItems} /> */}
         <ComingSoon />
         <Heading3>GUEST LECTURES</Heading3>
-        {/* <MainCarousel previewItems={GL_previewItems} descriptionItems={GL_descriptionItems} /> */}
         <ComingSoon />
         <Heading3>GALLERY</Heading3>
         <GalleryWrapper />
diff --git a/src/app/register/page.jsx b/src/app/register/page.jsx
index 23b1254d..20610de9 100644
--- a/src/app/register/page.jsx
+++ b/src/app/register/page.jsx
@@ -169,23 +169,15 @@ function Page() {
           />
         );
 
-      case 'Head':
+      case 'head':
         return <PaymentHeading>{field.content}</PaymentHeading>;
 
-      case 'or':
-        return <Heading>{field.content}</Heading>;
-
-      case 'Title':
-        return (
-          <>
-            {/* <PaymentHeading>Payment Section </PaymentHeading> */}
-            <MerchantInfo label={field.label} labelInfo={field.labelInfo} />
-          </>
-        );
-      case 'Image':
+      case 'title':
+        return <MerchantInfo label={field.label} labelInfo={field.content} />;
+      case 'image':
         return <Qr QrUrl={field.QrUrl} />;
 
-      case 'Disclaimer':
+      case 'disclaimer':
         return <DisclaimerPara>{field.content}</DisclaimerPara>;
 
       case 'checkbox':
diff --git a/src/app/register/register.styles.jsx b/src/app/register/register.styles.jsx
index da579b83..68bfdcc9 100644
--- a/src/app/register/register.styles.jsx
+++ b/src/app/register/register.styles.jsx
@@ -10,20 +10,20 @@ export const RegisterHeading = styled(Heading1)`
 `;
 
 export const PaymentHeading = styled(Heading2)`
-  ${tw`m-0 p-3 border-[#00FFD1] border-2 rounded-lg`}
+  ${tw`m-0 p-3 border-[#00FFD1] border-2 rounded-lg font-prompt`}
 `;
 
 export const Heading = styled(Heading3)`
-  ${tw`pb-0 mb-0`}
+  ${tw`pb-0 mb-0 font-prompt`}
 `;
 export const MerchantLabel = styled(Heading2)`
-  ${tw`text-left text-[#00FFD1] p-0 m-0`}
+  ${tw`text-left text-[#00FFD1] p-0 m-0 font-prompt`}
 `;
 export const MerchantLabelInfo = styled(Heading2)`
-  ${tw`text-left text-gray-200 m-0 p-0 `}
+  ${tw`text-left text-gray-200 m-0 p-0 font-prompt`}
 `;
 export const DisclaimerPara = styled(SmallParagraph)`
-  ${tw`text-red-500 `}
+  ${tw`text-red-500 font-prompt`}
 `;
 
 export const RegisterContainer = styled.div`
diff --git a/src/components/EventsPage/Carousel/DescriptionCarousel/DescriptionCarousel.jsx b/src/components/EventsPage/Carousel/DescriptionCarousel.jsx
similarity index 89%
rename from src/components/EventsPage/Carousel/DescriptionCarousel/DescriptionCarousel.jsx
rename to src/components/EventsPage/Carousel/DescriptionCarousel.jsx
index bfc15ade..2baf79ee 100644
--- a/src/components/EventsPage/Carousel/DescriptionCarousel/DescriptionCarousel.jsx
+++ b/src/components/EventsPage/Carousel/DescriptionCarousel.jsx
@@ -1,5 +1,5 @@
-import { motion, AnimatePresence, easeIn } from 'framer-motion';
-import DetailsCard from '../../CardComponents/DetailsCard';
+import { motion, AnimatePresence } from 'framer-motion';
+import DetailsCard from '../CardComponents/DetailsCard';
 import tw, { styled } from 'twin.macro';
 import { memo } from 'react';
 
diff --git a/src/components/EventsPage/Carousel/PreviewCarousel.jsx b/src/components/EventsPage/Carousel/PreviewCarousel.jsx
new file mode 100644
index 00000000..5b9b5049
--- /dev/null
+++ b/src/components/EventsPage/Carousel/PreviewCarousel.jsx
@@ -0,0 +1,109 @@
+'use client';
+import { useState, useEffect, useRef } from 'react';
+import { useAnimate } from 'framer-motion';
+import { LeftArrowButton, RightArrowButton } from '../Shared/ArrowButton';
+import DescriptionCarousel from './DescriptionCarousel';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Autoplay, Pagination } from 'swiper/modules';
+import PreviewCard from '../CardComponents/PreviewCard';
+import './swiper.css';
+import { LargeScreenViewContainer, SliderContainer, Wrapper } from './PreviewCarousel.styles';
+
+export const SliderEventsWrapper = ({ previewItems, descriptionItems }) => {
+  const [scope, animate] = useAnimate();
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isMobile, setIsMobile] = useState(false);
+  const swiperRef = useRef(null);
+  const slideWidth = 456.74;
+
+  const updateScreenSize = () => {
+    setIsMobile(window.innerWidth < 900);
+  };
+
+  useEffect(() => {
+    updateScreenSize();
+    window.addEventListener('resize', updateScreenSize);
+
+    return () => window.removeEventListener('resize', updateScreenSize);
+  }, []);
+
+  const handleNext = () => {
+    swiperRef.current.swiper.slideNext();
+  };
+
+  const handlePrev = () => {
+    swiperRef.current.swiper.slidePrev();
+  };
+
+  const onSlideChange = (swiper) => {
+    setCurrentIndex(swiper.realIndex);
+  };
+
+  useEffect(() => {
+    if (scope.current) {
+      const xOffset = -currentIndex * slideWidth;
+      animate(
+        scope.current,
+        { x: xOffset },
+        {
+          duration: 7,
+          ease: [0.42, 0, 0.58, 1],
+          type: 'tween',
+        },
+      );
+    }
+  }, [currentIndex, animate, scope]);
+
+  return (
+    <>
+      <Wrapper>
+        <LargeScreenViewContainer>
+          <LeftArrowButton
+            onClick={handlePrev}
+            style={{
+              position: 'absolute',
+              left: '10px',
+              top: '50%',
+              zIndex: 10,
+            }}
+          />
+          <SliderContainer>
+            <Swiper
+              ref={swiperRef}
+              slidesPerView={isMobile ? 1 : 3}
+              centeredSlides={true}
+              loop={true}
+              spaceBetween={isMobile ? 30 : 0}
+              onSlideChange={onSlideChange}
+              modules={[Pagination, Autoplay]}
+              autoplay={{ delay: 15000, disableOnInteraction: false }}
+              className={isMobile ? 'mySwiper2' : 'mySwiper'}
+            >
+              {previewItems.map((item, index) => (
+                <SwiperSlide
+                  key={index}
+                  className={`slide ${index === currentIndex ? 'active-slide' : ''}`}
+                >
+                  <PreviewCard
+                    PreviewDescription={item.PreviewDescription}
+                    ImageURL={item.ImageURL}
+                  />
+                </SwiperSlide>
+              ))}
+            </Swiper>
+          </SliderContainer>
+          <RightArrowButton
+            onClick={handleNext}
+            style={{
+              position: 'absolute',
+              right: '10px',
+              top: '50%',
+              zIndex: 10,
+            }}
+          />
+        </LargeScreenViewContainer>
+        <DescriptionCarousel descriptionItems={descriptionItems} currentIndex={currentIndex} />
+      </Wrapper>
+    </>
+  );
+};
diff --git a/src/components/EventsPage/Carousel/SliderCarousel/EventWrapper.styles.jsx b/src/components/EventsPage/Carousel/PreviewCarousel.styles.jsx
similarity index 100%
rename from src/components/EventsPage/Carousel/SliderCarousel/EventWrapper.styles.jsx
rename to src/components/EventsPage/Carousel/PreviewCarousel.styles.jsx
diff --git a/src/components/EventsPage/Carousel/SliderCarousel/DesktopView.jsx b/src/components/EventsPage/Carousel/SliderCarousel/DesktopView.jsx
deleted file mode 100644
index e3610b7b..00000000
--- a/src/components/EventsPage/Carousel/SliderCarousel/DesktopView.jsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Swiper, SwiperSlide } from 'swiper/react';
-import PreviewCard from '../../CardComponents/PreviewCard';
-import { Pagination } from 'swiper/modules';
-import DescriptionCarousel from '../DescriptionCarousel/DescriptionCarousel';
-import { SliderContainer } from './EventWrapper.styles';
-import './swiper.css';
-import 'swiper/css/pagination';
-
-export const LargeScreenView = ({ onSlideChange, swiperRef, currentIndex, previewItems }) => {
-  return (
-    <>
-      <SliderContainer>
-        <Swiper
-          ref={swiperRef}
-          slidesPerView={3}
-          centeredSlides={true}
-          loop={true}
-          spaceBetween={0}
-          onSlideChange={onSlideChange}
-          modules={[Pagination]}
-          className='mySwiper'
-        >
-          {previewItems.map((item, index) => (
-            <SwiperSlide
-              key={index}
-              className={`slide ${index === currentIndex ? 'active-slide' : ''}`}
-            >
-              <PreviewCard PreviewDescription={item.PreviewDescription} ImageURL={item.ImageURL} />
-            </SwiperSlide>
-          ))}
-        </Swiper>
-
-        {/* <DescriptionCarousel descriptionItems={descriptionItems} currentIndex={currentIndex} /> */}
-      </SliderContainer>
-    </>
-  );
-};
diff --git a/src/components/EventsPage/Carousel/SliderCarousel/EventWrapper.jsx b/src/components/EventsPage/Carousel/SliderCarousel/EventWrapper.jsx
deleted file mode 100644
index 5670b596..00000000
--- a/src/components/EventsPage/Carousel/SliderCarousel/EventWrapper.jsx
+++ /dev/null
@@ -1,121 +0,0 @@
-'use client';
-import { useState, useEffect, useRef } from 'react';
-import { useAnimate } from 'framer-motion';
-// import { SliderData } from '@/config/content/eventsCarauselData';
-import { LeftArrowButton, RightArrowButton } from '../../Shared/ArrowButton';
-import { MobileView } from './MobileView';
-import { LargeScreenView } from './DesktopView';
-import { LargeScreenViewContainer, Wrapper } from './EventWrapper.styles';
-import DescriptionCarousel from '../DescriptionCarousel/DescriptionCarousel';
-
-export const SliderEventsWrapper = ({ previewItems, descriptionItems }) => {
-  const [scope, animate] = useAnimate();
-  const [currentIndex, setCurrentIndex] = useState(0);
-  const [isMobile, setIsMobile] = useState(false);
-  const swiperRef = useRef(null);
-  const autoSlideIntervalRef = useRef(null);
-  const slideWidth = 456.74;
-
-  const updateScreenSize = () => {
-    setIsMobile(window.innerWidth < 900);
-  };
-
-  useEffect(() => {
-    updateScreenSize();
-    window.addEventListener('resize', updateScreenSize);
-
-    return () => window.removeEventListener('resize', updateScreenSize);
-  }, []);
-
-  const handleNext = () => {
-    swiperRef.current.swiper.slideNext();
-    resetAutoSlide();
-  };
-
-  const handlePrev = () => {
-    swiperRef.current.swiper.slidePrev();
-    resetAutoSlide();
-  };
-
-  const onSlideChange = (swiper) => {
-    setCurrentIndex(swiper.realIndex);
-  };
-
-  const startAutoSlide = () => {
-    autoSlideIntervalRef.current = setInterval(() => {
-      swiperRef.current.swiper.slideNext();
-    }, 15000);
-  };
-
-  const resetAutoSlide = () => {
-    if (autoSlideIntervalRef.current) {
-      clearInterval(autoSlideIntervalRef.current);
-    }
-    startAutoSlide();
-  };
-
-  useEffect(() => {
-    !isMobile ? startAutoSlide() : '';
-    return () => {
-      if (autoSlideIntervalRef.current) {
-        clearInterval(autoSlideIntervalRef.current);
-      }
-    };
-  }, []);
-
-  useEffect(() => {
-    if (scope.current) {
-      const xOffset = -currentIndex * slideWidth;
-      animate(
-        scope.current,
-        { x: xOffset },
-        {
-          duration: 7,
-          ease: [0.42, 0, 0.58, 1],
-          type: 'tween',
-        },
-      );
-    }
-  }, [currentIndex, animate, scope]);
-
-  return !isMobile ? (
-    <Wrapper>
-      <LargeScreenViewContainer>
-        <LeftArrowButton
-          onClick={handlePrev}
-          style={{
-            position: 'absolute',
-            left: '10px',
-            top: '50%',
-            zIndex: 10,
-          }}
-        />
-        <LargeScreenView
-          onSlideChange={onSlideChange}
-          swiperRef={swiperRef}
-          currentIndex={currentIndex}
-          previewItems={previewItems}
-          descriptionItems={descriptionItems}
-        />
-        <RightArrowButton
-          onClick={handleNext}
-          style={{
-            position: 'absolute',
-            right: '10px',
-            top: '50%',
-            zIndex: 10,
-          }}
-        />
-      </LargeScreenViewContainer>
-      <DescriptionCarousel descriptionItems={descriptionItems} currentIndex={currentIndex} />
-    </Wrapper>
-  ) : (
-    <MobileView
-      onSlideChange={onSlideChange}
-      swiperRef={swiperRef}
-      currentIndex={currentIndex}
-      previewItems={previewItems}
-      descriptionItems={descriptionItems}
-    />
-  );
-};
diff --git a/src/components/EventsPage/Carousel/SliderCarousel/MobileView.jsx b/src/components/EventsPage/Carousel/SliderCarousel/MobileView.jsx
deleted file mode 100644
index d8848e25..00000000
--- a/src/components/EventsPage/Carousel/SliderCarousel/MobileView.jsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { Swiper, SwiperSlide } from 'swiper/react';
-import PreviewCard from '../../CardComponents/PreviewCard';
-import { Pagination } from 'swiper/modules';
-import DescriptionCarousel from '../DescriptionCarousel/DescriptionCarousel';
-import 'swiper/css/pagination';
-// import { previewItems } from '@/config/content/EventsPage/MainEvents/Data';
-export const MobileView = ({
-  onSlideChange,
-  swiperRef,
-  currentIndex,
-  previewItems,
-  descriptionItems,
-}) => {
-  return (
-    <>
-      <Swiper
-        ref={swiperRef}
-        slidesPerView={1}
-        centeredSlides={true}
-        loop={true}
-        spaceBetween={30}
-        // pagination={{
-        //   clickable: true,
-        // }}
-        onSlideChange={onSlideChange}
-        modules={[Pagination]}
-        className='mySwiper2'
-      >
-        {previewItems.map((item, index) => (
-          <SwiperSlide key={index}>
-            <PreviewCard PreviewDescription={item.PreviewDescription} ImageURL={item.ImageURL} />
-          </SwiperSlide>
-        ))}
-      </Swiper>
-      <DescriptionCarousel descriptionItems={descriptionItems} currentIndex={currentIndex} />
-    </>
-  );
-};
diff --git a/src/components/EventsPage/Carousel/SliderCarousel/swiper.css b/src/components/EventsPage/Carousel/swiper.css
similarity index 99%
rename from src/components/EventsPage/Carousel/SliderCarousel/swiper.css
rename to src/components/EventsPage/Carousel/swiper.css
index b6fde25f..8a128ffe 100644
--- a/src/components/EventsPage/Carousel/SliderCarousel/swiper.css
+++ b/src/components/EventsPage/Carousel/swiper.css
@@ -3,6 +3,12 @@
   height: 100%;
   padding-top: 90px;
 }
+.mySwiper2 {
+  width: 100%;
+  height: auto;
+  overflow: hidden;
+  padding: 20px;
+}
 .mySwiper3 {
   width: 100%;
   height: 100%;
@@ -15,13 +21,6 @@
   padding-top: 90px;
 }
 
-.mySwiper2 {
-  width: 100%;
-  height: auto;
-  overflow: hidden;
-  padding: 20px;
-}
-
 .gallery-swiper {
   width: 100%;
   height: auto;
diff --git a/src/components/EventsPage/Shared/ArrowButton.jsx b/src/components/EventsPage/Shared/ArrowButton.jsx
index b8e6d2c9..1857cda2 100644
--- a/src/components/EventsPage/Shared/ArrowButton.jsx
+++ b/src/components/EventsPage/Shared/ArrowButton.jsx
@@ -1,7 +1,7 @@
 import tw from 'twin.macro';
 import styled from 'styled-components';
 
-const commonStyles = tw`absolute top-1/4 transform -translate-y-1/2 bg-cover bg-no-repeat w-11 h-16 cursor-pointer transition-all duration-200 ease-in-out`;
+const commonStyles = tw`absolute top-1/4 transform -translate-y-1/2 bg-cover bg-no-repeat w-11 h-16 cursor-pointer transition-all duration-200 ease-in-out hidden sm:block`;
 
 const LeftArrowButton = styled.button`
   background-image: url('https://res.cloudinary.com/dhv234qct/image/upload/v1728883189/Inno2k24/o9yetaxkolszugpanrje.svg');
diff --git a/src/components/EventsPage/index.jsx b/src/components/EventsPage/index.jsx
index e518619a..0e584b0c 100644
--- a/src/components/EventsPage/index.jsx
+++ b/src/components/EventsPage/index.jsx
@@ -1,4 +1,6 @@
-import { SliderEventsWrapper } from './Carousel/SliderCarousel/EventWrapper';
+// import { SliderEventsWrapper } from './Carousel/SliderCarousel/EventWrapper';
+
+import { SliderEventsWrapper } from './Carousel/PreviewCarousel';
 
 // import { SliderEventsWrapper } from './Carousel/PreviewCarousel/EventWrapper';
 const MainCarousel = ({ previewItems, descriptionItems }) => {
diff --git a/src/components/EventsSection/eventCardComponents/Card.jsx b/src/components/EventsSection/eventCardComponents/Card.jsx
index 196ff518..c3390d96 100644
--- a/src/components/EventsSection/eventCardComponents/Card.jsx
+++ b/src/components/EventsSection/eventCardComponents/Card.jsx
@@ -1,8 +1,7 @@
 import Image from 'next/image';
 import Link from 'next/link';
 
-export const EventCard = ({ label, isTranslatedUp }) => {
-  console.log(label);
+export const EventCard = ({ label }) => {
   return (
     <>
       <Link href={'/events'}>
diff --git a/src/components/EventsSection/wrapperComponents/CardWrapper.jsx b/src/components/EventsSection/wrapperComponents/CardWrapper.jsx
index 691a65f7..4e5293af 100644
--- a/src/components/EventsSection/wrapperComponents/CardWrapper.jsx
+++ b/src/components/EventsSection/wrapperComponents/CardWrapper.jsx
@@ -2,9 +2,9 @@
 import { useState, useEffect, useRef } from 'react';
 import { useAnimate } from 'framer-motion';
 import { Swiper, SwiperSlide } from 'swiper/react';
-import { Pagination } from 'swiper/modules';
+import { Autoplay, Pagination } from 'swiper/modules';
 import { EventCard } from '../eventCardComponents/Card';
-import '../../EventsPage/Carousel/SliderCarousel/swiper.css';
+import '../../EventsPage/Carousel/swiper.css';
 import { AllEvents } from '../shared/AllEvents';
 import { CardLabel } from '../eventCardComponents/Cardlabel';
 
@@ -13,7 +13,7 @@ export const CardWrapper = () => {
   const [currentIndex, setCurrentIndex] = useState(0);
   const [isMobile, setIsMobile] = useState(false);
   const swiperRef = useRef(null);
-  const autoSlideIntervalRef = useRef(null);
+
   const slideWidth = 456.74;
 
   const updateScreenSize = () => {
@@ -27,50 +27,10 @@ export const CardWrapper = () => {
     return () => window.removeEventListener('resize', updateScreenSize);
   }, []);
 
-  const handleNext = () => {
-    if (swiperRef.current?.swiper) {
-      swiperRef.current.swiper.slideNext();
-      resetAutoSlide();
-    }
-  };
-
-  const handlePrev = () => {
-    if (swiperRef.current?.swiper) {
-      swiperRef.current.swiper.slidePrev();
-      resetAutoSlide();
-    }
-  };
-
   const onSlideChange = (swiper) => {
     setCurrentIndex(swiper.realIndex);
   };
 
-  const startAutoSlide = () => {
-    autoSlideIntervalRef.current = setInterval(() => {
-      if (swiperRef.current?.swiper) {
-        swiperRef.current.swiper.slideNext();
-      }
-    }, 5000);
-  };
-
-  const resetAutoSlide = () => {
-    if (autoSlideIntervalRef.current) {
-      clearInterval(autoSlideIntervalRef.current);
-    }
-    startAutoSlide();
-  };
-
-  useEffect(() => {
-    if (!isMobile) {
-      startAutoSlide();
-    }
-    return () => {
-      if (autoSlideIntervalRef.current && !isMobile) {
-        clearInterval(autoSlideIntervalRef.current);
-      }
-    };
-  }, [isMobile]);
-
   useEffect(() => {
     if (scope.current) {
       const xOffset = -currentIndex * slideWidth;
@@ -87,52 +47,26 @@ export const CardWrapper = () => {
   }, [currentIndex, animate, scope]);
   return (
     <>
-      {!isMobile ? (
-        <div className=''>
-          <Swiper
-            ref={swiperRef}
-            slidesPerView={'auto'}
-            centeredSlides={true}
-            loop={true}
-            spaceBetween={0}
-            modules={[Pagination]}
-            onSlideChange={onSlideChange}
-            className='mySwiper3 '
-          >
-            {AllEvents.map((item, index) => (
-              <SwiperSlide key={index}>
-                <div className='p-4 md:p-10 xl:p-20 flex flex-col items-center gap-4 md:gap-6 xl:gap-10'>
-                  <EventCard label={item.ImageURL} />
-                  <CardLabel title={item.Heading} />
-                </div>
-              </SwiperSlide>
-            ))}
-          </Swiper>
-        </div>
-      ) : (
-        <Swiper
-          ref={swiperRef}
-          slidesPerView={1}
-          centeredSlides={true}
-          loop={true}
-          spaceBetween={30}
-          modules={[Pagination]}
-          onSlideChange={onSlideChange}
-          // autoplay={{ delay: 3000, disableOnInteraction: false }}
-          className='mySwiper4'
-        >
-          {AllEvents.map((item, index) => (
-            <div key={index}>
-              <SwiperSlide>
-                <div className='p-2 md:p-10 xl:p-20 flex flex-col items-center gap-4 md:gap-6 xl:gap-10'>
-                  <EventCard label={item.ImageURL} />
-                  <CardLabel title={item.Heading} />
-                </div>
-              </SwiperSlide>
+      <Swiper
+        ref={swiperRef}
+        slidesPerView={isMobile ? 1 : 'auto'}
+        centeredSlides={true}
+        loop={true}
+        spaceBetween={isMobile ? 30 : 0}
+        modules={[Pagination, Autoplay]}
+        onSlideChange={onSlideChange}
+        autoplay={{ delay: 3000, disableOnInteraction: false }}
+        className={isMobile ? 'mySwiper4' : 'mySwiper3'}
+      >
+        {AllEvents.map((item, index) => (
+          <SwiperSlide key={index}>
+            <div className='p-4 md:p-10 xl:p-20 flex flex-col items-center gap-4 md:gap-6 xl:gap-10'>
+              <EventCard label={item.ImageURL} />
+              <CardLabel title={item.Heading} />
             </div>
-          ))}
-        </Swiper>
-      )}
+          </SwiperSlide>
+        ))}
+      </Swiper>
     </>
   );
 };
diff --git a/src/components/Register/PaymentComponents/MerchantInfo.jsx b/src/components/Register/PaymentComponents/MerchantInfo.jsx
index d5ebd9eb..77fb92b9 100644
--- a/src/components/Register/PaymentComponents/MerchantInfo.jsx
+++ b/src/components/Register/PaymentComponents/MerchantInfo.jsx
@@ -4,7 +4,7 @@ import { MerchantLabel, MerchantLabelInfo, PaymentHeading } from '@/app/register
 export const MerchantInfo = ({ label, labelInfo }) => {
   return (
     <>
-      <div className='flex gap-2'>
+      <div className='flex flex-col sm:flex-row gap-2 justify-start items-start w-full sm:w-auto'>
         <MerchantLabel>{label}:</MerchantLabel>
         <MerchantLabelInfo>{labelInfo}</MerchantLabelInfo>
       </div>
diff --git a/src/config/content/Registration/details.js b/src/config/content/Registration/details.js
index 9735de99..6119aabe 100644
--- a/src/config/content/Registration/details.js
+++ b/src/config/content/Registration/details.js
@@ -223,45 +223,44 @@ export const formFields = [
     className: 'oneliner',
   },
 
-  { type: 'Head', content: 'pay via Qr' },
+  { type: 'head', content: 'PAY VIA QR' },
 
   {
     label: 'Merchant Name',
-    type: 'Title',
-    labelInfo: 'PLAN FUND NIT ROURKELA',
+    type: 'title',
+    content: 'PLAN FUND NIT ROURKELA',
   },
   {
     label: 'UPI ID',
-    type: 'Title',
-    labelInfo: '85002429435@sbi',
+    type: 'title',
+    content: '85002429435@sbi',
   },
   {
-    type: 'Image',
+    type: 'image',
     QrUrl:
       'https://res.cloudinary.com/dfe8sdlkc/image/upload/v1729940616/Pay_for_Registration_oqdgsq.png',
   },
   {
-    type: 'Disclaimer',
-    content: '{Please ensure the amount is exactly INR 899}',
+    type: 'disclaimer',
+    content: 'Please ensure the amount is exactly INR 899',
   },
-  { type: 'or', content: 'or' },
 
-  { type: 'Head', content: 'pay through bank' },
+  { type: 'head', content: 'PAY THROUGH BANK' },
 
   {
     label: 'Bank Account Name',
-    type: 'Title',
-    labelInfo: 'STUDENT ACTIVITY CENTRE NIT - ROURKELA',
+    type: 'title',
+    content: 'STUDENT ACTIVITY CENTRE NIT - ROURKELA',
   },
   {
     label: 'Bank Account Number',
-    type: 'Title',
-    labelInfo: '_00000037377186107',
+    type: 'title',
+    content: '_00000037377186107',
   },
   {
     label: 'IFSC Code',
-    type: 'Title',
-    labelInfo: 'SBIN0002109',
+    type: 'title',
+    content: 'SBIN0002109',
   },
 
   {
@@ -272,7 +271,7 @@ export const formFields = [
   {
     label: 'Transaction ID',
     type: 'text',
-    id: 'TranscId',
+    id: 'transactionId',
     className: 'w-full',
   },
   {
diff --git a/src/firebase/firebase.js b/src/firebase/firebase.js
index fb87dc51..f4cb4d99 100644
--- a/src/firebase/firebase.js
+++ b/src/firebase/firebase.js
@@ -1,15 +1,15 @@
-import { initializeApp, getApps } from 'firebase/app';
-import { getAuth } from 'firebase/auth';
+// import { initializeApp, getApps } from 'firebase/app';
+// import { getAuth } from 'firebase/auth';
 
-const firebaseConfig = {
-  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
-  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
-  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
-  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
-  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
-  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
-  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
-};
+// const firebaseConfig = {
+//   apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
+//   authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
+//   projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
+//   storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
+//   messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
+//   appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
+//   measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
+// };
 
-const app = !getApps().length ? initializeApp(firebaseConfig) : getApps()[0];
-export const auth = getAuth(app);
+// const app = !getApps().length ? initializeApp(firebaseConfig) : getApps()[0];
+// export const auth = getAuth(app);

From 7a9657dfe1244c7e334ccaae5d2e39d234c86a3a Mon Sep 17 00:00:00 2001
From: AYANscyy2 <mayan6378@gmail.com>
Date: Sat, 26 Oct 2024 22:14:28 +0530
Subject: [PATCH 6/9] feat: fix prettier issue

---
 src/app/register/page.jsx | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/app/register/page.jsx b/src/app/register/page.jsx
index 20610de9..16d4d3c3 100644
--- a/src/app/register/page.jsx
+++ b/src/app/register/page.jsx
@@ -11,7 +11,6 @@ import {
   PaymentPolicyInfo,
   PaymentHeading,
   DisclaimerPara,
-  Heading,
 } from './register.styles';
 import Link from 'next/link';
 import InputField from '@/components/Register/InputField/InputField';
@@ -28,13 +27,8 @@ import { PrimaryButton } from '@/components/shared/Typography/Buttons';
 import { AuthContext } from '@/context/auth-context';
 import { RegistrationModal } from './RegistrationModal';
 import toast from 'react-hot-toast';
-// import { QrButton } from '@/components/Register/PaymentComponents/QrButton';
 import { MerchantInfo } from '@/components/Register/PaymentComponents/MerchantInfo';
 import { Qr } from '@/components/Register/PaymentComponents/Qr';
-import { Heading3 } from '../events/page.style';
-// import { Paragraph, SmallParagraph } from '@/components/shared/Typography/Paragraphs';
-// import { Heading1 } from '@/components/shared/Typography/Headings';
-// import { Heading3 } from '../codeofconduct/page.styles';
 
 function Page() {
   const [userDetails, setUserDetails] = useState({

From cc80cd35a625d10456feb8adfbf201f5f108df6f Mon Sep 17 00:00:00 2001
From: AYANscyy2 <mayan6378@gmail.com>
Date: Sat, 26 Oct 2024 22:19:17 +0530
Subject: [PATCH 7/9] fix: prettier fix

---
 src/components/EventsSection/eventCardComponents/Card.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/EventsSection/eventCardComponents/Card.jsx b/src/components/EventsSection/eventCardComponents/Card.jsx
index b1750b24..c3390d96 100644
--- a/src/components/EventsSection/eventCardComponents/Card.jsx
+++ b/src/components/EventsSection/eventCardComponents/Card.jsx
@@ -2,7 +2,6 @@ import Image from 'next/image';
 import Link from 'next/link';
 
 export const EventCard = ({ label }) => {
-
   return (
     <>
       <Link href={'/events'}>

From 64f8265aad09425d50831f16c2049bd49c433d68 Mon Sep 17 00:00:00 2001
From: AYANscyy2 <mayan6378@gmail.com>
Date: Sun, 27 Oct 2024 00:36:48 +0530
Subject: [PATCH 8/9] feat: update Payment Section

---
 src/app/register/page.jsx                     |   2 +-
 src/components/Carousel/Carousel.jsx          |  99 +++++++++++++++
 .../Carousel.styles.jsx}                      |   2 +-
 .../EventsPage/Carousel/PreviewCarousel.jsx   | 116 +++---------------
 .../EventsPage/Gallery/CardWrapper.jsx        |   1 -
 .../wrapperComponents/CardWrapper.jsx         |  80 +++---------
 src/config/content/Registration/details.js    |   2 +-
 7 files changed, 137 insertions(+), 165 deletions(-)
 create mode 100644 src/components/Carousel/Carousel.jsx
 rename src/components/{EventsPage/Carousel/PreviewCarousel.styles.jsx => Carousel/Carousel.styles.jsx} (88%)

diff --git a/src/app/register/page.jsx b/src/app/register/page.jsx
index d5b1d157..c93278e7 100644
--- a/src/app/register/page.jsx
+++ b/src/app/register/page.jsx
@@ -208,7 +208,7 @@ function Page() {
           <PaymentPolicyInfo>
             <Link href='/refundPolicy'>Please review the Payment Policy before registering.</Link>
             <br />
-            (NOTE: Registration Fees (₹899) + Convenience Fees + GST will be applied)
+            NOTE: Registration Fees (₹899)
           </PaymentPolicyInfo>
           <CampusAmbassador
             handleChange={handleChange}
diff --git a/src/components/Carousel/Carousel.jsx b/src/components/Carousel/Carousel.jsx
new file mode 100644
index 00000000..24e5ea64
--- /dev/null
+++ b/src/components/Carousel/Carousel.jsx
@@ -0,0 +1,99 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import { useAnimate } from 'framer-motion';
+import { Swiper } from 'swiper/react';
+import { Autoplay, Pagination } from 'swiper/modules';
+import { ScreenViewContainer, SliderContainer, Wrapper } from './Carousel.styles';
+import { LeftArrowButton, RightArrowButton } from '../EventsPage/Shared/ArrowButton';
+import DescriptionCarousel from '../EventsPage/Carousel/DescriptionCarousel';
+import '../EventsPage/Carousel/swiper.css';
+
+export const SwiperCarousel = ({
+  mapFunction,
+  mobileViewClassName,
+  desktopViewClassname,
+  descriptionItems,
+  onIndexChange,
+  isEventSection,
+}) => {
+  const [scope, animate] = useAnimate();
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isMobile, setIsMobile] = useState(false);
+  const swiperRef = useRef(null);
+  const slideWidth = 456.74;
+
+  useEffect(() => {
+    const updateScreenSize = () => {
+      setIsMobile(typeof window !== 'undefined' && window.innerWidth < 900);
+    };
+
+    updateScreenSize();
+    window.addEventListener('resize', updateScreenSize);
+    return () => window.removeEventListener('resize', updateScreenSize);
+  }, []);
+
+  const handleNext = () => {
+    swiperRef.current?.swiper.slideNext();
+  };
+
+  const handlePrev = () => {
+    swiperRef.current?.swiper.slidePrev();
+  };
+
+  const onSlideChange = (swiper) => {
+    const newIndex = swiper.realIndex;
+    setCurrentIndex(newIndex);
+    if (onIndexChange) {
+      onIndexChange(newIndex);
+    }
+  };
+
+  useEffect(() => {
+    if (scope.current) {
+      const xOffset = -currentIndex * slideWidth;
+      animate(
+        scope.current,
+        { x: xOffset },
+        {
+          duration: 7,
+          ease: [0.42, 0, 0.58, 1],
+          type: 'tween',
+        },
+      );
+    }
+  }, [currentIndex, animate, scope]);
+
+  return (
+    <Wrapper>
+      <ScreenViewContainer>
+        <LeftArrowButton
+          onClick={handlePrev}
+          style={{ position: 'absolute', left: '10px', top: '50%', zIndex: 10 }}
+        />
+        <SliderContainer>
+          <Swiper
+            ref={swiperRef}
+            slidesPerView={isMobile ? 1 : 3}
+            centeredSlides
+            loop
+            spaceBetween={isMobile ? 30 : 0}
+            onSlideChange={onSlideChange}
+            modules={[Pagination, Autoplay]}
+            autoplay={{ delay: isEventSection ? 3000 : 15000, disableOnInteraction: false }}
+            className={isMobile ? mobileViewClassName : desktopViewClassname}
+          >
+            {mapFunction()}
+          </Swiper>
+        </SliderContainer>
+        <RightArrowButton
+          onClick={handleNext}
+          style={{ position: 'absolute', right: '10px', top: '50%', zIndex: 10 }}
+        />
+      </ScreenViewContainer>
+      {!isEventSection && (
+        <DescriptionCarousel descriptionItems={descriptionItems} currentIndex={currentIndex} />
+      )}
+    </Wrapper>
+  );
+};
diff --git a/src/components/EventsPage/Carousel/PreviewCarousel.styles.jsx b/src/components/Carousel/Carousel.styles.jsx
similarity index 88%
rename from src/components/EventsPage/Carousel/PreviewCarousel.styles.jsx
rename to src/components/Carousel/Carousel.styles.jsx
index 51512d25..c93db782 100644
--- a/src/components/EventsPage/Carousel/PreviewCarousel.styles.jsx
+++ b/src/components/Carousel/Carousel.styles.jsx
@@ -5,7 +5,7 @@ export const Wrapper = styled.div`
   ${tw`w-full min-h-screen h-auto flex flex-col `}
 `;
 
-export const LargeScreenViewContainer = styled.div`
+export const ScreenViewContainer = styled.div`
   ${tw`relative flex justify-center items-center h-auto`}
 `;
 
diff --git a/src/components/EventsPage/Carousel/PreviewCarousel.jsx b/src/components/EventsPage/Carousel/PreviewCarousel.jsx
index 5b9b5049..0d686db3 100644
--- a/src/components/EventsPage/Carousel/PreviewCarousel.jsx
+++ b/src/components/EventsPage/Carousel/PreviewCarousel.jsx
@@ -1,109 +1,27 @@
 'use client';
-import { useState, useEffect, useRef } from 'react';
-import { useAnimate } from 'framer-motion';
-import { LeftArrowButton, RightArrowButton } from '../Shared/ArrowButton';
-import DescriptionCarousel from './DescriptionCarousel';
-import { Swiper, SwiperSlide } from 'swiper/react';
-import { Autoplay, Pagination } from 'swiper/modules';
+
+import { SwiperSlide } from 'swiper/react';
 import PreviewCard from '../CardComponents/PreviewCard';
-import './swiper.css';
-import { LargeScreenViewContainer, SliderContainer, Wrapper } from './PreviewCarousel.styles';
+import { SwiperCarousel } from '@/components/Carousel/Carousel';
+import { useState } from 'react';
 
 export const SliderEventsWrapper = ({ previewItems, descriptionItems }) => {
-  const [scope, animate] = useAnimate();
   const [currentIndex, setCurrentIndex] = useState(0);
-  const [isMobile, setIsMobile] = useState(false);
-  const swiperRef = useRef(null);
-  const slideWidth = 456.74;
-
-  const updateScreenSize = () => {
-    setIsMobile(window.innerWidth < 900);
-  };
-
-  useEffect(() => {
-    updateScreenSize();
-    window.addEventListener('resize', updateScreenSize);
-
-    return () => window.removeEventListener('resize', updateScreenSize);
-  }, []);
-
-  const handleNext = () => {
-    swiperRef.current.swiper.slideNext();
-  };
-
-  const handlePrev = () => {
-    swiperRef.current.swiper.slidePrev();
-  };
-
-  const onSlideChange = (swiper) => {
-    setCurrentIndex(swiper.realIndex);
-  };
 
-  useEffect(() => {
-    if (scope.current) {
-      const xOffset = -currentIndex * slideWidth;
-      animate(
-        scope.current,
-        { x: xOffset },
-        {
-          duration: 7,
-          ease: [0.42, 0, 0.58, 1],
-          type: 'tween',
-        },
-      );
-    }
-  }, [currentIndex, animate, scope]);
+  const renderSlides = () =>
+    previewItems.map((item, index) => (
+      <SwiperSlide key={index} className={`slide ${index === currentIndex ? 'active-slide' : ''}`}>
+        <PreviewCard PreviewDescription={item.PreviewDescription} ImageURL={item.ImageURL} />
+      </SwiperSlide>
+    ));
 
   return (
-    <>
-      <Wrapper>
-        <LargeScreenViewContainer>
-          <LeftArrowButton
-            onClick={handlePrev}
-            style={{
-              position: 'absolute',
-              left: '10px',
-              top: '50%',
-              zIndex: 10,
-            }}
-          />
-          <SliderContainer>
-            <Swiper
-              ref={swiperRef}
-              slidesPerView={isMobile ? 1 : 3}
-              centeredSlides={true}
-              loop={true}
-              spaceBetween={isMobile ? 30 : 0}
-              onSlideChange={onSlideChange}
-              modules={[Pagination, Autoplay]}
-              autoplay={{ delay: 15000, disableOnInteraction: false }}
-              className={isMobile ? 'mySwiper2' : 'mySwiper'}
-            >
-              {previewItems.map((item, index) => (
-                <SwiperSlide
-                  key={index}
-                  className={`slide ${index === currentIndex ? 'active-slide' : ''}`}
-                >
-                  <PreviewCard
-                    PreviewDescription={item.PreviewDescription}
-                    ImageURL={item.ImageURL}
-                  />
-                </SwiperSlide>
-              ))}
-            </Swiper>
-          </SliderContainer>
-          <RightArrowButton
-            onClick={handleNext}
-            style={{
-              position: 'absolute',
-              right: '10px',
-              top: '50%',
-              zIndex: 10,
-            }}
-          />
-        </LargeScreenViewContainer>
-        <DescriptionCarousel descriptionItems={descriptionItems} currentIndex={currentIndex} />
-      </Wrapper>
-    </>
+    <SwiperCarousel
+      mapFunction={renderSlides}
+      desktopViewClassname='mySwiper'
+      mobileViewClassName='mySwiper2'
+      descriptionItems={descriptionItems}
+      onIndexChange={setCurrentIndex}
+    />
   );
 };
diff --git a/src/components/EventsPage/Gallery/CardWrapper.jsx b/src/components/EventsPage/Gallery/CardWrapper.jsx
index 836b05ce..6ec14b00 100644
--- a/src/components/EventsPage/Gallery/CardWrapper.jsx
+++ b/src/components/EventsPage/Gallery/CardWrapper.jsx
@@ -61,7 +61,6 @@ export const GalleryWrapper = () => {
       loop={true}
       spaceBetween={30}
       modules={[Pagination, Autoplay]}
-      // pagination={{ clickable: true }}
       autoplay={{ delay: 3000, disableOnInteraction: false }}
       className='gallery-swiper'
     >
diff --git a/src/components/EventsSection/wrapperComponents/CardWrapper.jsx b/src/components/EventsSection/wrapperComponents/CardWrapper.jsx
index 4e5293af..ece909bc 100644
--- a/src/components/EventsSection/wrapperComponents/CardWrapper.jsx
+++ b/src/components/EventsSection/wrapperComponents/CardWrapper.jsx
@@ -1,72 +1,28 @@
-'use client';
-import { useState, useEffect, useRef } from 'react';
-import { useAnimate } from 'framer-motion';
-import { Swiper, SwiperSlide } from 'swiper/react';
-import { Autoplay, Pagination } from 'swiper/modules';
+import { SwiperSlide } from 'swiper/react';
 import { EventCard } from '../eventCardComponents/Card';
 import '../../EventsPage/Carousel/swiper.css';
 import { AllEvents } from '../shared/AllEvents';
 import { CardLabel } from '../eventCardComponents/Cardlabel';
+import { SwiperCarousel } from '@/components/Carousel/Carousel';
 
 export const CardWrapper = () => {
-  const [scope, animate] = useAnimate();
-  const [currentIndex, setCurrentIndex] = useState(0);
-  const [isMobile, setIsMobile] = useState(false);
-  const swiperRef = useRef(null);
+  const renderSlides = () =>
+    AllEvents.map((item, index) => (
+      <SwiperSlide key={index}>
+        <div className='p-4 md:p-10 xl:p-20 flex flex-col items-center gap-4 md:gap-6 xl:gap-10'>
+          <EventCard label={item.ImageURL} />
+          <CardLabel title={item.Heading} />
+        </div>
+      </SwiperSlide>
+    ));
 
-  const slideWidth = 456.74;
-
-  const updateScreenSize = () => {
-    setIsMobile(window.innerWidth < 768);
-  };
-
-  useEffect(() => {
-    updateScreenSize();
-    window.addEventListener('resize', updateScreenSize);
-
-    return () => window.removeEventListener('resize', updateScreenSize);
-  }, []);
-
-  const onSlideChange = (swiper) => {
-    setCurrentIndex(swiper.realIndex);
-  };
-
-  useEffect(() => {
-    if (scope.current) {
-      const xOffset = -currentIndex * slideWidth;
-      animate(
-        scope.current,
-        { x: xOffset },
-        {
-          duration: 6,
-          ease: [0.42, 0, 0.58, 1],
-          type: 'tween',
-        },
-      );
-    }
-  }, [currentIndex, animate, scope]);
   return (
-    <>
-      <Swiper
-        ref={swiperRef}
-        slidesPerView={isMobile ? 1 : 'auto'}
-        centeredSlides={true}
-        loop={true}
-        spaceBetween={isMobile ? 30 : 0}
-        modules={[Pagination, Autoplay]}
-        onSlideChange={onSlideChange}
-        autoplay={{ delay: 3000, disableOnInteraction: false }}
-        className={isMobile ? 'mySwiper4' : 'mySwiper3'}
-      >
-        {AllEvents.map((item, index) => (
-          <SwiperSlide key={index}>
-            <div className='p-4 md:p-10 xl:p-20 flex flex-col items-center gap-4 md:gap-6 xl:gap-10'>
-              <EventCard label={item.ImageURL} />
-              <CardLabel title={item.Heading} />
-            </div>
-          </SwiperSlide>
-        ))}
-      </Swiper>
-    </>
+    <SwiperCarousel
+      mapFunction={renderSlides}
+      onIndexChange={null}
+      desktopViewClassname='mySwiper3'
+      mobileViewClassName='mySwiper4'
+      isEventSection
+    />
   );
 };
diff --git a/src/config/content/Registration/details.js b/src/config/content/Registration/details.js
index 6119aabe..e1e66ebf 100644
--- a/src/config/content/Registration/details.js
+++ b/src/config/content/Registration/details.js
@@ -245,7 +245,7 @@ export const formFields = [
     content: 'Please ensure the amount is exactly INR 899',
   },
 
-  { type: 'head', content: 'PAY THROUGH BANK' },
+  { type: 'head', content: 'PAY THROUGH BANK TRANSFER' },
 
   {
     label: 'Bank Account Name',

From 5cee1472d23e9c0989347c27aa7bb76587ee6c09 Mon Sep 17 00:00:00 2001
From: AYANscyy2 <mayan6378@gmail.com>
Date: Sun, 27 Oct 2024 01:04:42 +0530
Subject: [PATCH 9/9] fix:prettier issue

---
 src/app/register/page.jsx                  | 25 ++-------------------
 src/app/register/register.styles.jsx       |  2 +-
 src/config/content/Registration/details.js |  5 +++--
 src/firebase/firebase.js                   | 26 +++++++++++-----------
 4 files changed, 19 insertions(+), 39 deletions(-)

diff --git a/src/app/register/page.jsx b/src/app/register/page.jsx
index 5c65ed97..4d8b92ee 100644
--- a/src/app/register/page.jsx
+++ b/src/app/register/page.jsx
@@ -7,6 +7,8 @@ import { useRouter } from 'next/navigation';
 import toast from 'react-hot-toast';
 import { v4 } from 'uuid';
 
+import { MerchantInfo } from '@/components/Register/PaymentComponents/MerchantInfo';
+import { Qr } from '@/components/Register/PaymentComponents/Qr';
 import CampusAmbassador from '@/components/Register/CampusAmbassador/CampusAmbassador';
 import FileInput from '@/components/Register/FileInput/FileInput';
 import CheckBox from '@/components/Register/InputCheckBox/CheckBox';
@@ -33,31 +35,9 @@ import {
   RegisterInnerContainer,
   RegsiterButton,
   UndertakingLink,
-
-  PaymentPolicyInfo,
   PaymentHeading,
   DisclaimerPara,
 } from './register.styles';
-import Link from 'next/link';
-import InputField from '@/components/Register/InputField/InputField';
-import SelectField from '@/components/Register/SelectField/SelectField';
-import CheckBox from '@/components/Register/InputCheckBox/CheckBox';
-import FileInput from '@/components/Register/FileInput/FileInput';
-import { formFields, undertakingContent } from '@/config/content/Registration/details';
-import { uploadToCloudinary } from '../../utils/uploadToCloudinary';
-import handleLoadingAndToast from '../../utils/handleLoadingToast';
-import { userSchema } from '@/config/zodd/userDetailsSchema';
-import { useIsLoggedIn } from '@/hooks/useIsLoggedIn';
-import CampusAmbassador from '@/components/Register/CampusAmbassador/CampusAmbassador';
-import { PrimaryButton } from '@/components/shared/Typography/Buttons';
-import { AuthContext } from '@/context/auth-context';
-import { RegistrationModal } from './RegistrationModal';
-import toast from 'react-hot-toast';
-import { MerchantInfo } from '@/components/Register/PaymentComponents/MerchantInfo';
-import { Qr } from '@/components/Register/PaymentComponents/Qr';
-
-} from './register.styles';
-
 
 function Page() {
   const [userDetails, setUserDetails] = useState({
@@ -184,7 +164,6 @@ function Page() {
           />
         );
 
-
       case 'head':
         return <PaymentHeading>{field.content}</PaymentHeading>;
 
diff --git a/src/app/register/register.styles.jsx b/src/app/register/register.styles.jsx
index ddd04255..a7889e0f 100644
--- a/src/app/register/register.styles.jsx
+++ b/src/app/register/register.styles.jsx
@@ -26,7 +26,7 @@ export const MerchantLabelInfo = styled(Heading2)`
   ${tw`text-left text-gray-200 m-0 p-0 font-prompt`}
 `;
 export const DisclaimerPara = styled(SmallParagraph)`
-  ${tw`text-red-500 font-prompt`}
+  ${tw`text-red-500 font-prompt w-full md:max-w-[50%]`}
 `;
 
 export const RegisterContainer = styled.div`
diff --git a/src/config/content/Registration/details.js b/src/config/content/Registration/details.js
index 571d0397..de747ae1 100644
--- a/src/config/content/Registration/details.js
+++ b/src/config/content/Registration/details.js
@@ -281,7 +281,8 @@ export const formFields = [
   },
   {
     type: 'disclaimer',
-    content: 'Please ensure the amount is exactly INR 899',
+    content:
+      'Please ensure the amount is exactly INR 899, anything other than this amount will not be considered a valid registration and there will be no refund',
   },
 
   { type: 'head', content: 'PAY THROUGH BANK TRANSFER' },
@@ -307,7 +308,7 @@ export const formFields = [
     type: 'file',
     id: 'payment',
   },
-{
+  {
     label: 'Transaction ID',
     type: 'text',
     id: 'transactionID',
diff --git a/src/firebase/firebase.js b/src/firebase/firebase.js
index f4cb4d99..fb87dc51 100644
--- a/src/firebase/firebase.js
+++ b/src/firebase/firebase.js
@@ -1,15 +1,15 @@
-// import { initializeApp, getApps } from 'firebase/app';
-// import { getAuth } from 'firebase/auth';
+import { initializeApp, getApps } from 'firebase/app';
+import { getAuth } from 'firebase/auth';
 
-// const firebaseConfig = {
-//   apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
-//   authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
-//   projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
-//   storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
-//   messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
-//   appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
-//   measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
-// };
+const firebaseConfig = {
+  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
+  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
+  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
+  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
+  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
+  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
+  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
+};
 
-// const app = !getApps().length ? initializeApp(firebaseConfig) : getApps()[0];
-// export const auth = getAuth(app);
+const app = !getApps().length ? initializeApp(firebaseConfig) : getApps()[0];
+export const auth = getAuth(app);