feat:event_and_eventPage (#178)

feat:fix ui alignment, add loaction and date time section
dscnitrourkela · Oct 19, 2024 · 2fe4b3b · 2fe4b3b
1 parent 5aa6c75
commit 2fe4b3b
Show file tree

Hide file tree

Showing 25 changed files with 1,323 additions and 490 deletions.
diff --git a/next.config.mjs b/next.config.mjs
@@ -6,6 +6,6 @@ import withTwin from './withTwin.mjs';
 export default withTwin({
   reactStrictMode: true,
   images: {
-    domains: ['res.cloudinary.com', 'picsum.photos'], // Add Cloudinary or any other external image host here
+    domains: ['res.cloudinary.com', 'picsum.photos', 'socialcry.com'], // Add Cloudinary or any other external image host here
   },
 });
diff --git a/src/app/events/page.jsx b/src/app/events/page.jsx
@@ -1,20 +1,21 @@
 'use client';
-// import { Heading3 } from '@/components/shared/Typography/Headings';
-import { EventsContainer, Heading3 } from './page.style';
-import MainCarousel from '@/components/EventsPage/index';
 import {
-  GL_previewItems,
   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 {
-  FE_previewItems,
   FE_descriptionItems,
+  FE_previewItems,
 } from '@/config/content/EventsPage/FlagshipEvents/Data';
-
-import { ME_descriptionItems } from '@/config/content/EventsPage/MainEvents/Data';
+import {
+  Exhibition_descriptionItems,
+  Exhibition_previewItems,
+} from '@/config/content/EventsPage/Exhibition/Data';
 import { DTS_previewItems } from '@/config/content/EventsPage/DTS_Shows/Data';
-import { Exhibition_previewItems } from '@/config/content/EventsPage/Exhibition/Data';
+import { ME_descriptionItems, ME_previewItems } from '@/config/content/EventsPage/MainEvents/Data';
 
 export default function Page() {
   return (
@@ -24,9 +25,12 @@ export default function Page() {
       <Heading3>FLAGSHIP EVENTS</Heading3>
       <MainCarousel previewItems={FE_previewItems} descriptionItems={FE_descriptionItems} />
       <Heading3>MAIN EVENTS</Heading3>
-      <MainCarousel previewItems={GL_previewItems} descriptionItems={ME_descriptionItems} />
+      <MainCarousel previewItems={ME_previewItems} descriptionItems={ME_descriptionItems} />
       <Heading3>EXHIBITION</Heading3>
-      <MainCarousel previewItems={Exhibition_previewItems} descriptionItems={GL_descriptionItems} />
+      <MainCarousel
+        previewItems={Exhibition_previewItems}
+        descriptionItems={Exhibition_descriptionItems}
+      />
       <Heading3>SHOWS AT DTS</Heading3>
       <MainCarousel previewItems={DTS_previewItems} descriptionItems={GL_descriptionItems} />
       <Heading3>GALLERY</Heading3>

diff --git a/src/app/layout.js b/src/app/layout.js
@@ -96,6 +96,7 @@ export default function RootLayout({ children }) {
             }}
           />
 
+          <div id='modal-root'></div>
           <Hoc>{children}</Hoc>
         </StyledComponentsRegistry>
       </body>

diff --git a/src/components/EventsPage/CardComponents/DetailsCard/DetailsCard.jsx b/src/components/EventsPage/CardComponents/DetailsCard/DetailsCard.jsx
@@ -4,23 +4,53 @@ import {
   DescriptionCardInner,
   DescriptionCardHeading,
   DescriptionCardContent,
+  DescriptionCardBottom,
 } from './DetailsCard.style';
+// import { MainBar, MenuLogoItem } from '@/components/Marginals/navbar/navbar.styles';
 
 function DetailsCard({ ImageURL, Heading, Description }) {
   return (
-    <DescriptionCardContainer>
-      <DescriptionCardInner>
-        <DescriptionCardHeading>{Heading}</DescriptionCardHeading>
-        <DescriptionCardContent>{Description}</DescriptionCardContent>
-      </DescriptionCardInner>
-      <Image
-        src={ImageURL}
-        alt='image'
-        width={416}
-        height={458}
-        className='h-[275px] xxs:h-[287px] 2xs:h-[305px] xsm:h-[325px] ssm:h-[348px] sm:h-[360px] md:h-[400px] lg:h-[458px]  xlg:w-[372px] w-full lg:w-[416px] rounded-2xl'
-      />
-    </DescriptionCardContainer>
+    <div className='flex flex-col items-center gap-5'>
+      <DescriptionCardContainer>
+        <DescriptionCardInner>
+          <DescriptionCardHeading>{Heading}</DescriptionCardHeading>
+          <DescriptionCardContent>{Description}</DescriptionCardContent>
+        </DescriptionCardInner>
+        <Image
+          src={ImageURL}
+          alt='image'
+          width={416}
+          height={458}
+          className='h-[250px] xxs:h-[270px] 2xs:h-[280px] xsm:h-[295px] ssm:h-[308px] sm:h-[335px] md:h-[370px] lg:h-[458px]  xlg:w-[372px] w-full lg:w-[416px] rounded-2xl'
+        />
+      </DescriptionCardContainer>
+      <div className='max-w-[1550px] w-[100%] 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'>
+        <DescriptionCardBottom>
+          <div className='flex gap-2 items-center '>
+            <Image
+              src='https://res.cloudinary.com/dfe8sdlkc/image/upload/v1729309788/352521_location_on_icon_u8d6am.png'
+              alt='img'
+              width={60}
+              height={60}
+            />
+            <div className='font-bold'>BBA </div>
+          </div>
+          <div className='flex gap-4 items-center '>
+            <Image
+              src='https://res.cloudinary.com/dfe8sdlkc/image/upload/v1729311717/8981284_deadline_schedule_calendar_event_time_icon_sozwq1.png'
+              alt='img'
+              width={60}
+              height={60}
+              className='w-[48px] h-[48px] xsm:w-[60px] xsm:h-[60px]'
+            />
+            <div className='flex flex-col '>
+              <div className='font-bold'>19th OCT</div>
+              <div className='font-semibold text-xs xsm:text-xl text-white/[0.5]'>4:00 AM</div>
+            </div>
+          </div>
+        </DescriptionCardBottom>
+      </div>
+    </div>
   );
 }
 

diff --git a/src/components/EventsPage/CardComponents/DetailsCard/DetailsCard.style.jsx b/src/components/EventsPage/CardComponents/DetailsCard/DetailsCard.style.jsx
@@ -4,15 +4,15 @@ import { Heading1 } from '@/components/shared/Typography/Headings';
 import { SmallParagraph } from '@/components/shared/Typography/Paragraphs';
 
 export const DescriptionCardContainer = styled.div`
-  ${tw`w-full flex flex-col-reverse slg:flex-row justify-between 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 slg: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`}
 `;
 
 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 `}
 `;
 
 export const DescriptionCardInner = styled.div`
-  ${tw`flex flex-col max-w-[812px]`}
+  ${tw`flex flex-col max-w-[812px] `}
 `;
 
 export const DescriptionCardContent = styled(SmallParagraph)`
@@ -30,3 +30,12 @@ export const DescriptionCardContent = styled(SmallParagraph)`
     ${tw`w-full`}
   }
 `;
+export const DescriptionCardBottom = styled.div`
+  ${tw`flex gap-10 justify-between   h-auto xsm:h-[100px] bg-white/[0.05] items-center p-5 xsm:p-10 text-xs xxxs:text-base xsm:text-2xl rounded-2xl border-[1px] border-white/[0.4]`};
+
+  backdrop-filter: blur(30px);
+  background-color: rgba(255, 255, 255, 0.05);
+
+  background-image: linear-gradient(120deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.2));
+  background-size: 35px 35px;
+`;
diff --git a/src/components/EventsPage/CardComponents/PreviewCard/PreviewCard.jsx b/src/components/EventsPage/CardComponents/PreviewCard/PreviewCard.jsx
@@ -2,14 +2,14 @@ import Image from 'next/image';
 import {
   PreviewCardContainer,
   PreviewCardContent,
-  PreviewCardImage,
   PreviewMoreInfoButton,
+  PreviewMoreInfoButton2,
 } from './PreviewCard.style';
 
 function PreviewCard({ ImageURL, PreviewDescription = '' }) {
   const words = PreviewDescription?.split(' ') || [];
   const truncatedDescription =
-    words.length > 20 ? words.slice(0, 38).join(' ') + '...' : PreviewDescription;
+    words.length > 20 ? words.slice(0, 30).join(' ') + '...' : PreviewDescription;
 
   return (
     <PreviewCardContainer>
@@ -18,10 +18,15 @@ function PreviewCard({ ImageURL, PreviewDescription = '' }) {
         alt='CardImage'
         width={338}
         height={250}
-        className='h-[150px] xxs:h-[165px] 2xs:h-[175px] xsm:h-[199px] ssm:h-[214px] sm:h-[235px] md:h-[260px] w-full md:w-[305px]  lg:w-[338px] lg:h-[300px] mb-2 rounded-[17.82px]'
+        className='rounded-[17.82px] h-[170px] xxs:h-[180px] 2xs:h-[190px] xsm:h-[199px] ssm:h-[214px] sm:h-[235px] md:h-[260px] w-full md:w-[305px]  lg:w-[338px] lg:h-[240px] '
       />
       <PreviewCardContent>{truncatedDescription}</PreviewCardContent>
-      <PreviewMoreInfoButton>MORE</PreviewMoreInfoButton>
+      <div className='flex justify-center gap-4 mt-4'>
+        {' '}
+        {/* Reduced gap for symmetry */}
+        <PreviewMoreInfoButton2>Rulebook</PreviewMoreInfoButton2>
+        <PreviewMoreInfoButton>Register</PreviewMoreInfoButton>
+      </div>
     </PreviewCardContainer>
   );
 }

diff --git a/src/components/EventsPage/CardComponents/PreviewCard/PreviewCard.style.jsx b/src/components/EventsPage/CardComponents/PreviewCard/PreviewCard.style.jsx
@@ -1,40 +1,46 @@
 import tw from 'twin.macro';
 import styled from 'styled-components';
-import { PrimaryButton } from '@/components/shared/Typography/Buttons';
+import { HeroGreenPrimaryButton, HeroPrimaryButton } from '@/components/Hero Section/styles';
 
 export const PreviewCardContainer = styled.div`
-  ${tw`w-full h-auto max-w-[280px]  xxxs:max-h-[480px] xsm:max-w-[350px] xsm:max-h-[600px] xl:max-w-[460px] xl:h-[605.6px] bg-gradient-to-b from-[#002929] to-[#22002b] rounded-lg shadow-lg border border-[#074870] flex flex-col justify-between items-center p-6 mb-16 gap-y-2`}
+  ${tw`w-full h-auto max-w-[390px] max-h-[500px] xl:h-[606px] 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 gap-y-4`}
 
   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
   }
 `;
 
 export const PreviewCardContent = styled.div`
-  ${tw`w-full max-w-[300px] xl:max-w-[380px] 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 lg:text-sm font-normal font-montserrat leading-[21px] tracking-wide`}
+`;
+
+export const PreviewMoreInfoButton = styled(HeroPrimaryButton)`
+  ${tw`flex justify-center items-center w-auto h-auto pl-4 pr-4 pt-2 pb-2`}
+
+  box-shadow: 0 0 5px #ff3d7f, 0 0 3px #ff3d7f, 0 0 5px #ff3d7f;
+
+  transition:
+    box-shadow 0.3s ease,
+    transform 0.3s ease;
+
+  &:hover {
+    transform: scale(1.05);
+  }
 `;
 
-export const PreviewMoreInfoButton = styled(PrimaryButton)`
-  ${tw`w-[150px]`}
+export const PreviewMoreInfoButton2 = styled(HeroGreenPrimaryButton)`
+  ${tw`flex justify-center items-center w-auto h-auto p-4 `}
 
-  box-shadow:
-    0 0 5px #ff3d7f,
-    0 0 3px #ff3d7f,
-    0 0 5px #ff3d7f;
+  box-shadow: 0 0 5px #ffffff0d, 0 0 3px #ffffff0d, 0 0 5px #ffffff0d;
 
   transition:
     box-shadow 0.3s ease,
     transform 0.3s ease;
 
   &:hover {
     transform: scale(1.05);
-    box-shadow:
-      0 0 5px #ff3d7f,
-      0 0 10px #ff3d7f,
-      0 0 15px #ff3d7f,
-      0 0 20px #ff3d7f;
   }
 `;
diff --git a/src/components/EventsPage/CardData.js b/src/components/EventsPage/CardData.js
@@ -0,0 +1,9 @@
+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/PreviewCarousel/EventWrapper.jsx b/src/components/EventsPage/Carousel/PreviewCarousel/EventWrapper.jsx
@@ -44,7 +44,7 @@ export const SliderEventsWrapper = ({ previewItems, descriptionItems }) => {
   const startAutoSlide = () => {
     autoSlideIntervalRef.current = setInterval(() => {
       swiperRef.current.swiper.slideNext();
-    }, 3000);
+    }, 6000);
   };
 
   const resetAutoSlide = () => {
@@ -81,15 +81,31 @@ export const SliderEventsWrapper = ({ previewItems, descriptionItems }) => {
   return !isMobile ? (
     <Wrapper>
       <div className='relative flex justify-center items-center h-auto'>
-        <LeftArrowButton onClick={handlePrev} className='absolute top-[50%] left-5 z-10' />
+        <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} className='absolute right-5 z-10' />
+        <RightArrowButton
+          onClick={handleNext}
+          style={{
+            position: 'absolute',
+            right: '10px',
+            top: '50%',
+            zIndex: 10,
+          }}
+        />
       </div>
       <DescriptionCarousel descriptionItems={descriptionItems} currentIndex={currentIndex} />
     </Wrapper>

diff --git a/src/components/EventsPage/Carousel/PreviewCarousel/swiper.css b/src/components/EventsPage/Carousel/PreviewCarousel/swiper.css
@@ -3,6 +3,17 @@
   height: 100%;
   padding-top: 90px;
 }
+.mySwiper3 {
+  width: 100%;
+  height: 100%;
+  padding-top: 90px;
+}
+
+.mySwiper4 {
+  width: 100%;
+  height: 100%;
+  padding-top: 90px;
+}
 
 .mySwiper2 {
   width: 100%;
@@ -49,3 +60,29 @@
 .mySwiper .swiper-slide-next-next {
   display: none;
 }
+
+.mySwiper3 .swiper-slide-active {
+  transform: translateY(-80px);
+  opacity: 1;
+  z-index: 55;
+  transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.mySwiper3 .swiper-slide-next {
+  opacity: 1;
+  transform: translateX(-70px);
+  z-index: 0;
+  transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.mySwiper3 .swiper-slide-prev {
+  opacity: 1;
+  transform: translateX(70px);
+  z-index: 0;
+  transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.mySwiper3 .swiper-slide-prev-prev,
+.mySwiper3 .swiper-slide-next-next {
+  display: none;
+}
diff --git a/src/components/EventsSection/Header.jsx/header.jsx b/src/components/EventsSection/Header.jsx/header.jsx
@@ -4,7 +4,7 @@ export const Header = () => {
   return (
     <>
       <div id='events'>
-        <div className='flex items-center w-full overflow-hidden bg-black bg-opacity-50'>
+        <div className='w-full flex items-center overflow-hidden'>
           <BodyTitle
             className='w-full'
             style={{

diff --git a/src/components/EventsSection/wrapperComponents/Body.jsx b/src/components/EventsSection/wrapperComponents/Body.jsx
@@ -1,3 +1,4 @@
+import { Link } from '@nextui-org/react';
 import { SubHeader } from '../Header.jsx/SubHeader';
 import { Button } from '../utils/Button';
 import { CardWrapper } from './CardWrapper';
@@ -8,7 +9,9 @@ export const Body = () => {
       <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-12 lg:p-20 bg-black bg-opacity-50'>
         <CardWrapper />
         <SubHeader />
-        <Button />
+        <Link href='/events'>
+          <Button />
+        </Link>
       </div>
     </>
   );
-Original file line number
+Diff line change
@@ Expand Up / @@ -96,6 +96,7 @@ export default function RootLayout({ children }) { @@
                 }}
               />
+              <div id='modal-root'></div>
               <Hoc>{children}</Hoc>
             </StyledComponentsRegistry>
           </body>
@@ Expand Down @@