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 ( -
+ {Heading} - {Description} - {/*
- - Prizes - Prize-{Prizes} -
*/} + + + + + + - <> - image - + + - -
+ ); } 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 ( - image + {truncatedDescription} -
+ Rulebook Register -
+ ); } 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], + }} > @@ -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 ( -
- - - {Location} - + + + {Location} + - - - - {Date} - {Time} - - -
+ + + + {Date} + {Time} + + {Prizes} 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}... + + Show Less + + + ); + } else { + return ( + <> + {text.slice(0, charLimit)}... + + Read More + + + ); + } + }; + + 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 = () => {