diff --git a/src/app/eventcluster/eventcluster.module.css b/src/app/eventcluster/eventcluster.module.css new file mode 100644 index 0000000..b470fc4 --- /dev/null +++ b/src/app/eventcluster/eventcluster.module.css @@ -0,0 +1,31 @@ +.event { + background: url('../../assets/images/EventBG.png'); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + background-color: #070b12; + } + +.Back{ + cursor: pointer; + transition: 0.2s; +} + +.Back:active{ + transform: scale(0.9); +} + +.slide{ + height: 60vh; + margin-top: -1%; +} + +@media screen and (max-width : 1024px){ + .eventClusterName{ + margin-top: 2%; + } + .slide{ + margin-top: -2%; + height: 75vh; + } +} diff --git a/src/app/eventcluster/page.tsx b/src/app/eventcluster/page.tsx new file mode 100644 index 0000000..462abf4 --- /dev/null +++ b/src/app/eventcluster/page.tsx @@ -0,0 +1,24 @@ +import { ClusterCarousel, NavBar } from '@/components'; +import Back from '@/assets/images/Back.png'; +import BackEnlarge from '@/assets/images/BackEnlarge.png'; +import ImageChanger from '@/components/BackButton/back'; +import styles from './eventcluster.module.css'; + +const events = () => { + return ( +
+ + +

+ CLUSTER NAME +

+
+ +
+
+ ); +}; + +export default events; diff --git a/src/app/gallery/page.tsx b/src/app/gallery/page.tsx index 489b44f..bbd320a 100644 --- a/src/app/gallery/page.tsx +++ b/src/app/gallery/page.tsx @@ -77,7 +77,8 @@ const History = () => { styles.historyBG + ' ' + 'h-screen w-screen p-0 flex justify-center items-center overflow-y-hidden' + - (isScrolled ? 'scrolled' : '') + ' ' + + (isScrolled ? ' scrolled' : ' transitioned') } onWheel={simulateScroll} onTouchStart={handleTouchStart} diff --git a/src/app/globals.css b/src/app/globals.css index 1e5a7a9..593a54c 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -53,7 +53,7 @@ body { .footer-bg { border-radius: 10px; - background: rgba(0, 0, 0, 0.5); + background: rgba(0, 0, 0, 0.45); } .home { @@ -79,6 +79,11 @@ body { background-position: center; } +.AboutCardContent { + background: rgba(255, 255, 255, 0.05); + backdrop-filter: blur(20px); +} + .scrolled { animation: fadeout 1.5s; -moz-animation: fadeout 1.5s; @@ -99,7 +104,7 @@ body { background-color: initial; } to { - background-color: #7efbfe; + background-color: #000; } } @@ -257,4 +262,16 @@ body { .greenbutton{ filter: hue-rotate(137deg) drop-shadow(0 0 20px #23A347) brightness(120%); +} + +@media screen and (min-width: 1240px) { + .about { + min-height: max(100vh, 742px); + } +} + +@media screen and (min-width: 1540px) { + .about { + min-height: max(100vh, 860px); + } } \ No newline at end of file diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx index 3b7bb6f..d31c13a 100644 --- a/src/app/home/page.tsx +++ b/src/app/home/page.tsx @@ -57,7 +57,7 @@ export default function Home() { } >
{ return result; }; -function useWindowSize() { - const [windowSize, setWindowSize] = useState<{ - width: number | undefined; - height: number | undefined; - }>({ - width: undefined, - height: undefined, - }); - - useEffect(() => { - function handleResize() { - setWindowSize({ - width: window.innerWidth, - height: window.innerHeight, - }); - } - window.addEventListener('resize', handleResize); - handleResize(); - return () => window.removeEventListener('resize', handleResize); - }, []); - return windowSize; -} - export default function Loading() { - const size = useWindowSize(); const currDate = new Date(); const [animationStarted, setAnimationStarted] = useState(false); const [year, setYear] = useState(String(currDate.getFullYear()).padStart(4, '0')); @@ -87,8 +63,8 @@ export default function Loading() { clearInterval(lightTimer); setTimeout(() => { router.push('/home'); - }, 1000); - }, 5000); + }, 500); + }, 2000); const lightTimer = setInterval(() => { setIsLeftLightOn(prev => !prev); }, 100); @@ -100,27 +76,28 @@ export default function Loading() { } }, [animationStarted, router]); - return size.width !== undefined && size.width < 700 ? ( - - ) : ( - + return ( + <> + + + ); } diff --git a/src/assets/images/aboutWedge.png b/src/assets/images/aboutWedge.png new file mode 100644 index 0000000..0766cfe Binary files /dev/null and b/src/assets/images/aboutWedge.png differ diff --git a/src/assets/images/leftPortal.png b/src/assets/images/leftPortal.png new file mode 100644 index 0000000..3b2fc00 Binary files /dev/null and b/src/assets/images/leftPortal.png differ diff --git a/src/assets/images/rightPortal.png b/src/assets/images/rightPortal.png new file mode 100644 index 0000000..d95a15f Binary files /dev/null and b/src/assets/images/rightPortal.png differ diff --git a/src/assets/images/temp.png b/src/assets/images/temp.png new file mode 100644 index 0000000..d0faf5b Binary files /dev/null and b/src/assets/images/temp.png differ diff --git a/src/components/AboutCard/AboutCard.module.css b/src/components/AboutCard/AboutCard.module.css index 64cf065..de8af1a 100644 --- a/src/components/AboutCard/AboutCard.module.css +++ b/src/components/AboutCard/AboutCard.module.css @@ -7,7 +7,7 @@ box-sizing: border-box; } -.parent div { +.edge { position: absolute; width: 55px; height: 55px; @@ -46,3 +46,26 @@ border: 1px solid #ddd; border-radius: 2px; } + +/* .topWedge { + width: 70px; + height: 6.9px; + left: 50%; + transform: translate(-40%,-10%); + background: url('../../assets/images/aboutWedge.png'); + background-size: contain; + background-repeat: no-repeat; + transform: scale(1.2); +} + +.bottomWedge { + width: 70px; + height: 8px; + left: 50%; + transform: translate(-40%,-50%); + transform: rotate(90deg); + background: url('../../assets/images/aboutWedge.png'); + background-size: contain; + background-repeat: no-repeat; + transform: scale(1.2); +} */ diff --git a/src/components/AboutCard/AboutCard.tsx b/src/components/AboutCard/AboutCard.tsx index 64f9440..43fc2d6 100644 --- a/src/components/AboutCard/AboutCard.tsx +++ b/src/components/AboutCard/AboutCard.tsx @@ -4,7 +4,7 @@ const AboutCard = () => { const content = AboutContent.content; return (
-

{content}

+

{content}

); }; diff --git a/src/components/AboutCard/AboutCardMob.tsx b/src/components/AboutCard/AboutCardMob.tsx index 371ea51..b0bcd42 100644 --- a/src/components/AboutCard/AboutCardMob.tsx +++ b/src/components/AboutCard/AboutCardMob.tsx @@ -10,16 +10,16 @@ const AboutCardMob = () => { className={ styles.parent + ' ' + - 'md:hidden flex justify-center items-center p-4 py-10 text-center' + 'md:hidden flex justify-center items-center p-4 py-10 text-center AboutCardContent z-0' } > -
-
-
-
-

+

+
+
+
+
{content} + {content2} -

+
); }; diff --git a/src/components/ClusterCarousel/ClusterCarousel.tsx b/src/components/ClusterCarousel/ClusterCarousel.tsx new file mode 100644 index 0000000..086db4e --- /dev/null +++ b/src/components/ClusterCarousel/ClusterCarousel.tsx @@ -0,0 +1,132 @@ +'use client'; + +import { Swiper, SwiperSlide } from 'swiper/react'; +import { Autoplay, Pagination, Navigation } from 'swiper/modules'; + +import 'swiper/css'; +import 'swiper/css/navigation'; +import 'swiper/css/keyboard'; + +import Image from 'next/image'; +import leftPortal from '../../assets/images/leftPortal.png'; +import rightPortal from '../../assets/images/rightPortal.png'; +import temp from '../../assets/images/temp.png'; + +import leftArrow from '../../assets/images/leftArrow.png'; +import rightArrow from '../../assets/images/rightArrow.png'; +import { useState } from 'react'; + +const ClusterCarousel = () => { + const slides = [1, 2, 3, 4, 5, 6, 7, 8, 9]; + const breakpoints = { + 100: { + slidesPerView: 1, + spaceBetween: 15, + }, + 768: { + slidesPerView: 1, + spaceBetween: 20, + }, + 1024: { + slidesPerView: 1, + spaceBetween: 30, + }, + 1440: { + slidesPerView: 1, + spaceBetween: 10, + }, + }; + + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const [swiper, setSwiper] = useState(null); + + const handleSlideChange = (index: number) => { + const currentSlide = swiper?.slides[index]; + if (currentSlide) { + currentSlide.style.transform = 'scale(1.0)'; + currentSlide.style.opacity = '1'; + currentSlide.style.transition = 'transform 0.5s ease-in-out'; + } + + const previousSlide = swiper?.slides[index - 1]; + if (previousSlide) { + previousSlide.style.transform = 'scale(0.67)'; + previousSlide.style.opacity = '0.4'; + previousSlide.style.transition = 'transform 0.5s ease-in-out'; + } + + const nextSlide = swiper?.slides[index + 1]; + if (nextSlide) { + nextSlide.style.transform = 'scale(0.67)'; + nextSlide.style.opacity = '0.4'; + nextSlide.style.transition = 'transform 0.5s ease-in-out'; + } + }; + + const goToNextSlide = () => { + swiper?.slideNext(); + }; + + const goToPreviousSlide = () => { + swiper?.slidePrev(); + }; + + return ( +
+ < + handleSlideChange(swiper?.activeIndex)} + > + {slides.map(slide => ( + +
+ cluster +
+ + ))} + + < +
+
+ < +
+
+ BATMAN +
+
+ > +
+
+
+ ); +}; + +export default ClusterCarousel; diff --git a/src/components/ClusterCarousel/type.d.ts b/src/components/ClusterCarousel/type.d.ts new file mode 100644 index 0000000..b0b9660 --- /dev/null +++ b/src/components/ClusterCarousel/type.d.ts @@ -0,0 +1,3 @@ +type ClusterType = { + image: string; +}; diff --git a/src/components/Landing/LoadingMobileView.tsx b/src/components/Landing/LoadingMobileView.tsx index 815044e..37cf0d9 100644 --- a/src/components/Landing/LoadingMobileView.tsx +++ b/src/components/Landing/LoadingMobileView.tsx @@ -15,7 +15,7 @@ const LoadingMobileView = ({ }: LoadingProps) => { return ( <> -
+
light diff --git a/src/components/Landing/LoadingWebView.tsx b/src/components/Landing/LoadingWebView.tsx index fde2f78..16f840e 100644 --- a/src/components/Landing/LoadingWebView.tsx +++ b/src/components/Landing/LoadingWebView.tsx @@ -15,7 +15,7 @@ const LoadingWebView = ({ }: LoadingProps) => { return ( <> -
+
diff --git a/src/components/index.ts b/src/components/index.ts index fad298c..32abd2b 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -10,3 +10,4 @@ export { default as ImageChanger } from './BackButton/back'; export { default as Carousel } from './Carousel/carousel'; export { default as LoadingWebView } from './Landing/LoadingWebView'; export { default as LoadingMobileView } from './Landing/LoadingMobileView'; +export { default as ClusterCarousel } from './ClusterCarousel/ClusterCarousel';