diff --git a/app/about/page.tsx b/app/about/page.tsx index 910b3ac5..c6531496 100644 --- a/app/about/page.tsx +++ b/app/about/page.tsx @@ -13,11 +13,13 @@ import PrePreloader from "@/components/PreloaderProMax/PreloaderProMax"; import AboutUsPage from "@/components/AboutUs/AboutUsPage"; import RegBtn from "@/components/Landing/Navbar/RegBtn/RegBtn"; import MobileSlotMachine from "@/components/AboutUs/Machine/Machine"; +import CursorEffect from "@/components/CursorEffect/CursorEffect"; export default function About() { return ( <> +
diff --git a/app/contact/page.tsx b/app/contact/page.tsx index af0cba5e..51108011 100644 --- a/app/contact/page.tsx +++ b/app/contact/page.tsx @@ -1,6 +1,6 @@ "use client"; -import React, {useEffect, useRef } from "react"; +import React, { useEffect, useRef } from "react"; import styles from "./contact.module.scss"; import Grid from "@/components/Landing/Grid/Grid"; @@ -29,14 +29,12 @@ import RegBtn from "@/components/Landing/Navbar/RegBtn/RegBtn"; import CursorEffect from "@/components/CursorEffect/CursorEffect"; export default function ContactUs() { - const contactCardRef = useRef(null); const contactCard1Ref = useRef(null); useEffect(() => { - - if (!localStorage.getItem('hasReloaded')) { - localStorage.setItem('hasReloaded', 'true'); + if (!localStorage.getItem("hasReloaded")) { + localStorage.setItem("hasReloaded", "true"); window.location.reload(); } @@ -44,8 +42,12 @@ export default function ContactUs() { const container1 = contactCard1Ref.current; if (container && container1) { - const cards = Array.from(container.querySelectorAll(".card")) as HTMLElement[]; - const cards1 = Array.from(container1.querySelectorAll(".card")) as HTMLElement[]; + const cards = Array.from( + container.querySelectorAll(".card") + ) as HTMLElement[]; + const cards1 = Array.from( + container1.querySelectorAll(".card") + ) as HTMLElement[]; if (cards.length > 0) { const cardCount = cards.length; @@ -191,9 +193,9 @@ export default function ContactUs() { }, []); const handleBackButtonClick = () => { - localStorage.removeItem('hasReloaded'); + localStorage.removeItem("hasReloaded"); }; - + return ( <> @@ -278,17 +280,19 @@ export default function ContactUs() {
-
+
@@ -331,25 +335,25 @@ export default function ContactUs() { img={rijul} dept1="Reception and" dept2="Accommodation" - // contact="tel:+919811529877" - contact={null} - // mail="mailto:recnacc@bits-oasis.org" - mail={null} + contact="tel:+919811529877" + mail="mailto:recnacc@bits-oasis.org" />
-
+
@@ -359,10 +363,8 @@ export default function ContactUs() { img={ahan} dept1="President," dept2="Students' Union" - // contact="tel:+9180050 00213" - contact={null} - // mail="mailto:president@pilani.bits-pilani.ac.in" - mail={null} + contact="tel:+9180050 00213" + mail="mailto:president@pilani.bits-pilani.ac.in" />
@@ -372,10 +374,8 @@ export default function ContactUs() { img={aryankhorana} dept1="General Secretary," dept2="Students' Union" - // contact="tel:+917078879443" - contact={null} - // mail="mailto:gensec@pilani.bits-pilani.ac.in" - mail={null} + contact="tel:+917078879443" + mail="mailto:gensec@pilani.bits-pilani.ac.in" />
@@ -416,8 +416,8 @@ export default function ContactUs() { img={jaiditya} dept1="Logistics and" dept2="Operations" - contact={null} - mail={null} + contact="tel:+919168421199" + mail="mailto:controls@bits-oasis.org" /> diff --git a/app/events/[categoryname]/categories.module.scss b/app/events/[categoryname]/categories.module.scss index e38dac31..ecb00e98 100644 --- a/app/events/[categoryname]/categories.module.scss +++ b/app/events/[categoryname]/categories.module.scss @@ -130,7 +130,7 @@ width: 100%; font-family: "Thedus Condensed Light"; - font-size: 150px; + font-size: 8rem; font-weight: 900; line-height: 105px; text-align: left; @@ -347,15 +347,15 @@ text-align: center; text-shadow: 0px 0px 20px rgba(229, 195, 132, 0.3); font-family: "Source Serif 4"; - font-size: 28px; + font-size: 2rem; font-style: normal; font-weight: 400; line-height: 45px; /* 160.714% */ letter-spacing: 0.56px; @media screen and (max-height: 900px) { - font-size: 14px; - line-height: 16px; + font-size: 1.5rem; + line-height: 1.7rem; } @media screen and (max-width: 1400px) and (min-height: 900px) { @@ -370,6 +370,7 @@ line-height: 24px; letter-spacing: 0.02em; text-align: center; + padding-left: 0; } @media screen and (max-width: 600px) { diff --git a/app/events/[categoryname]/page.tsx b/app/events/[categoryname]/page.tsx index 50e956c6..fd9c7d56 100644 --- a/app/events/[categoryname]/page.tsx +++ b/app/events/[categoryname]/page.tsx @@ -8,6 +8,7 @@ import grunge from "@/assets/Landing/Grunge.png"; import axios from "axios"; import eventcard from "../../../assets/Events/Carousel/eventcard.png"; import Preloader from "@/components/Preloader/Preloader"; +import { useRouter } from "next/navigation"; const categories = [ "music", @@ -19,10 +20,23 @@ const categories = [ ]; export default function Page({ params }: { params: { categoryname: string } }) { + const router = useRouter(); const [eventsList, setEventsList] = useState([]); const [eventID, setEventID] = useState(0); const [loading, setLoading] = useState(true); + const handleBack = () => { + if (window.history.length > 1) { + router.back(); + } else { + router.push("/"); + } + }; + + useEffect(() => { + document.body.style.overflow = "hidden"; + }, []); + useEffect(() => { axios .get("https://bits-oasis.org/2024/main/registrations/events_details/") @@ -76,21 +90,19 @@ export default function Page({ params }: { params: { categoryname: string } }) { zIndex: 1, }} /> -
- - - - - +
+ + +
diff --git a/app/events/events.module.scss b/app/events/events.module.scss index 453663b1..17e77f73 100644 --- a/app/events/events.module.scss +++ b/app/events/events.module.scss @@ -2,7 +2,16 @@ position: fixed; height: 100%; width: 100%; - // overflow: hidden; + overflow-x: hidden; + overflow: hidden; +} + +.line{ + position: absolute; + top: 2%; + @media(width<1147px){ + display: none; + } } .ham { @@ -34,9 +43,11 @@ } .eventsPage { // position: fixed; + position: absolute; top: 0rem; // height: 100lvh; - width: 100vw; + // height: 100vh; + // width: 100vw; opacity: 1; pointer-events: none; overflow-x: hidden; @@ -44,8 +55,19 @@ display: flex; justify-content: center; + @media (width<=600px) { + // margin-top: 6rem; + position: relative; + } + + &::-webkit-scrollbar { + display: none; + } + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ + .heading { - // margin-top: 3rem; + margin-top: 3rem; display: flex; justify-content: center; align-items: center; @@ -70,6 +92,7 @@ position: relative; // top: 25%; padding-top: 13%; + padding-bottom: 3rem; display: flex; flex-wrap: wrap; flex-direction: column; @@ -86,7 +109,7 @@ .row { display: flex; flex-wrap: wrap; - gap: 2rem; + gap: 4rem; align-items: center; justify-content: center; @media (width<550px) { @@ -99,18 +122,32 @@ position: relative; margin: auto; pointer-events: auto; + transition: all 0.3s ease-out; + + &:hover { + transform: scale(1.1); + } // @media(width<1700px){ // transform: scale(0.8); // } @media (width<1700px) { transform: scale(0.95); + &:hover { + transform: scale(1.1); + } } @media (width<1110px) { transform: scale(0.8); + &:hover { + transform: scale(1); + } } @media (width<550px) { transform: scale(0.6); display: none; + &:hover { + transform: scale(0.8); + } // height: 200px; } .dance { @@ -237,19 +274,20 @@ } } } - .mobilecontainer{ + .mobilecontainer { position: relative; display: none; - @media(width<550px){ + padding-bottom: 2rem; + @media (width<550px) { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 20%; } - @media(width<400px){ + @media (width<400px) { margin-top: 23%; } - .mobileimg{ + .mobileimg { pointer-events: auto; } } diff --git a/app/events/page.tsx b/app/events/page.tsx index eaa02e94..c88702b7 100644 --- a/app/events/page.tsx +++ b/app/events/page.tsx @@ -17,6 +17,12 @@ import quizmobile from "../../assets/Events/Folders/3.png"; import dramamobile from "../../assets/Events/Folders/5.png"; import fashionmobile from "../../assets/Events/Folders/4.png"; import cameramobile from "../../assets/Events/Folders/6.png"; +import musicbg from "../../assets/Events/Folders/musicbg.png"; +import quizbg from "../../assets/Events/Folders/quizbg.png"; +import dramabg from "../../assets/Events/Folders/dramabg.png"; +import dancebg from "../../assets/Events/Folders/dancebg.png"; +import fashionbg from "../../assets/Events/Folders/fashionbg.png"; +import camerabg from "../../assets/Events/Folders/camerabg.png"; import PrePreloader from "@/components/PreloaderProMax/PreloaderProMax"; import CursorEffect from "@/components/CursorEffect/CursorEffect"; import SuitBackground from "@/components/Landing/Backdrop/Backdrop"; @@ -128,6 +134,37 @@ export default function EventsPage() {
+ + + + + + + +
@@ -194,7 +231,9 @@ export default function EventsPage() {
- + + {/* -

MUSIC

+

MUSIC

*/}
- + {/* -

QUIZ

+

QUIZ

*/}
- + {/* -

DRAMA

+

DRAMA

*/}
- + {/* -

DANCE

+

DANCE

*/}
- + {/* -

FASHION

+

FASHION

*/}
- + {/*

PHOTO

-

GRAPHY

+

GRAPHY

*/}
@@ -492,22 +536,58 @@ export default function EventsPage() {
- music + music - music + music - music + music - music + music - music + music - music + music
diff --git a/app/shows/page.tsx b/app/shows/page.tsx index a83f4696..ced54acf 100644 --- a/app/shows/page.tsx +++ b/app/shows/page.tsx @@ -10,6 +10,7 @@ import vm from "@/public/ProfShow/vishalmishra.png"; import tyd from "@/public/ProfShow/theyellowdiaries.png"; import gif1 from "@/public/ProfShow/gif1.gif"; import { useRouter } from "next/navigation"; +import CursorEffect from "@/components/CursorEffect/CursorEffect"; const eventDetails = [ { @@ -136,6 +137,7 @@ const Shows = () => { return ( <> {/* */} +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/MobileLanding/Slideshow/1.jpeg b/assets/MobileLanding/Slideshow/1.jpeg new file mode 100644 index 00000000..d2e7f00f Binary files /dev/null and b/assets/MobileLanding/Slideshow/1.jpeg differ diff --git a/assets/MobileLanding/Slideshow/2.jpeg b/assets/MobileLanding/Slideshow/2.jpeg new file mode 100644 index 00000000..2a652b92 Binary files /dev/null and b/assets/MobileLanding/Slideshow/2.jpeg differ diff --git a/assets/MobileLanding/Slideshow/3.jpeg b/assets/MobileLanding/Slideshow/3.jpeg new file mode 100644 index 00000000..0b59e9ac Binary files /dev/null and b/assets/MobileLanding/Slideshow/3.jpeg differ diff --git a/assets/MobileLanding/Slideshow/4.jpeg b/assets/MobileLanding/Slideshow/4.jpeg new file mode 100644 index 00000000..55f713e4 Binary files /dev/null and b/assets/MobileLanding/Slideshow/4.jpeg differ diff --git a/assets/MobileLanding/Slideshow/5.jpeg b/assets/MobileLanding/Slideshow/5.jpeg new file mode 100644 index 00000000..b691a4f8 Binary files /dev/null and b/assets/MobileLanding/Slideshow/5.jpeg differ diff --git a/components/AboutUs/Machine/Machine.tsx b/components/AboutUs/Machine/Machine.tsx index fecaa7ba..deddfb78 100644 --- a/components/AboutUs/Machine/Machine.tsx +++ b/components/AboutUs/Machine/Machine.tsx @@ -18,7 +18,7 @@ const MobileSlotMachine = forwardRef(function MobileSlotMachine( const playerRef = useRef(null); const [isPlaying, setIsPlaying] = useState(true); - const videoUrlArrayIframe = ["7MHVWCrJppk", "ZCrClSBM1ns", "krsrGOqnAN0"]; + const videoUrlArrayIframe = ["Ogio7ZJSb9g", "ZCrClSBM1ns", "krsrGOqnAN0"]; // Function to initialize the YouTube player diff --git a/components/AboutUs/SlotMachineExitCross/cross.module.scss b/components/AboutUs/SlotMachineExitCross/cross.module.scss index 2ec4d063..5e57e957 100644 --- a/components/AboutUs/SlotMachineExitCross/cross.module.scss +++ b/components/AboutUs/SlotMachineExitCross/cross.module.scss @@ -5,7 +5,8 @@ color: white; position: absolute; cursor: pointer; - z-index: 100; + z-index: 1000000; + pointer-events: auto; svg { aspect-ratio: 1 / 1; diff --git a/components/Landing/Landing/Landing.tsx b/components/Landing/Landing/Landing.tsx index 92b464f8..8363dd27 100644 --- a/components/Landing/Landing/Landing.tsx +++ b/components/Landing/Landing/Landing.tsx @@ -175,6 +175,9 @@ export default function Landing() { duration: 1, autoAlpha: isVideoFocused ? 0 : 1, }); + gsap.set("#atharvHamBtn", { + display: isVideoFocused ? "none" : "flex", + }); }, [isVideoFocused]); useEffect(() => { diff --git a/components/Landing/Navbar/HamBtn/Btn.tsx b/components/Landing/Navbar/HamBtn/Btn.tsx index dc516d98..0289872c 100644 --- a/components/Landing/Navbar/HamBtn/Btn.tsx +++ b/components/Landing/Navbar/HamBtn/Btn.tsx @@ -80,13 +80,15 @@ export default function HamBtn() { .to( overlayRef.current, { - x: "-100%", - y: "0%", + opacity: 0, duration: 0.25, ease: "power2.out", }, "<" ) + .set(overlayRef.current, { + pointerEvents: "none", + }) .to( mapsRef.current, { @@ -135,13 +137,15 @@ export default function HamBtn() { .to( overlayRef.current, { - x: "100%", - y: "0%", + opacity: 0, duration: 0.5, ease: "power2.out", }, "<" - ); + ) + .set(overlayRef.current, { + pointerEvents: "none", + }); } } else { if (window.innerWidth > 585) { @@ -182,13 +186,15 @@ export default function HamBtn() { .to( overlayRef.current, { - x: "0%", - y: "0%", + opacity: 1, duration: 0.5, ease: "power2.out", }, "<" ) + .set(overlayRef.current, { + pointerEvents: "unset", + }) .to( mapsRef.current, { @@ -237,13 +243,15 @@ export default function HamBtn() { .to( overlayRef.current, { - x: "0%", - y: "0%", + opacity: 1, duration: 0.5, ease: "power2.out", }, "<" - ); + ) + .set(overlayRef.current, { + pointerEvents: "unset", + }); } } }; @@ -299,6 +307,7 @@ export default function HamBtn() { onClick={handleClick} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} + id="atharvHamBtn" ref={BtnRef} > {isHamOpen && } diff --git a/components/Landing/Navbar/HamBtn/btn.module.scss b/components/Landing/Navbar/HamBtn/btn.module.scss index 7d5fb794..884b0edf 100644 --- a/components/Landing/Navbar/HamBtn/btn.module.scss +++ b/components/Landing/Navbar/HamBtn/btn.module.scss @@ -1,4 +1,5 @@ .hamOverlay { + opacity: 0; position: fixed; top: 0; left: 0; @@ -10,13 +11,7 @@ rgba(0, 0, 0, 0.95) 100% ); z-index: 5110; - cursor: initial; - - transform: translate(-100%, 0); - - @media screen and (max-width: 585px) { - transform: translate(100%, 0); - } + pointer-events: none; } .btn { @@ -29,6 +24,8 @@ display: flex; justify-content: center; align-items: center; + // background-color: #190D2C; + // border-radius: 50%; .pokerChip { // transition: all 300ms ease-in-out; diff --git a/components/Landing/Scene/SlotMachine2.tsx b/components/Landing/Scene/SlotMachine2.tsx index fbf6cf5e..dbd31468 100644 --- a/components/Landing/Scene/SlotMachine2.tsx +++ b/components/Landing/Scene/SlotMachine2.tsx @@ -60,7 +60,7 @@ export const SlotMachine2 = forwardRef(function SlotMachine2( ) { const { nodes, materials } = useGLTF("/Models/uSlotM.glb") as GLTFResult; - const videoUrlArrayIframe = ["7MHVWCrJppk", "ZCrClSBM1ns", "krsrGOqnAN0"]; + const videoUrlArrayIframe = ["Ogio7ZJSb9g", "ZCrClSBM1ns", "krsrGOqnAN0"]; const [iframeIndex, setIframeIndex] = useState(0); const [machineHovered, setMachineHovered] = useState(false); diff --git a/components/MobileLanding/EventsPageMobile/EventsPageMobile.tsx b/components/MobileLanding/EventsPageMobile/EventsPageMobile.tsx new file mode 100644 index 00000000..dec825ee --- /dev/null +++ b/components/MobileLanding/EventsPageMobile/EventsPageMobile.tsx @@ -0,0 +1,393 @@ +import styles from "./events.module.scss"; + +import Link from "next/link"; +import Image from "next/image"; + +import musicmobile from "@/assets/Events/Folders/1.png"; +import dancemobile from "@/assets/Events/Folders/2.png"; +import quizmobile from "@/assets/Events/Folders/3.png"; +import dramamobile from "@/assets/Events/Folders/5.png"; +import fashionmobile from "@/assets/Events/Folders/4.png"; +import cameramobile from "@/assets/Events/Folders/6.png"; +import MobileHeading from "../AboutUsHeading/MobileHeading"; +import music from "../../../assets/Events/Folders/Comic photo effect 3.png"; +import dance from "../../../assets/Events/Folders/Comic photo effect 4.png"; +import quiz from "../../../assets/Events/Folders/Comic photo effect 6.png"; +import camera from "../../../assets/Events/Folders/Comic photo effect 8.png"; +import drama from "../../../assets/Events/Folders/Comic photo effect 7.png"; +import fashion from "../../../assets/Events/Folders/Comic photo effect 5.png"; + +export default function EventsMobile() { + return ( + <> +
+ + + music + + + music + + + music + + + music + + + music + + + music + +
+
+ + +
+ +
+ + + + + + + + +
+ music +

MUSIC

+
+ + +
+ + + + + + + + +
+ music +

QUIZ

+
+ + +
+ + + + + + + + +
+ music +

DRAMA

+
+ + +
+ + + + + + + + +
+ music +

DANCE

+
+ + +
+ + + + + + + + +
+ music +

FASHION

+
+ + +
+ + + + + + + + +
+ music +

PHOTO

+

GRAPHY

+
+ +
+ {/*
+
+ + + + + + + + +
+ music +

DANCE

+
+
+ + + + + + + + +
+ music +

FASHION

+
+
+ + + + + + + + +
+ music +

PHOTO

+

GRAPHY

+
+
*/} +
+ + ); +} diff --git a/components/MobileLanding/EventsPageMobile/events.module.scss b/components/MobileLanding/EventsPageMobile/events.module.scss new file mode 100644 index 00000000..e017db5f --- /dev/null +++ b/components/MobileLanding/EventsPageMobile/events.module.scss @@ -0,0 +1,201 @@ +.gridcontainer { + position: relative; + // top: 25%; + // padding-top: 13%; + display: flex; + flex-wrap: wrap; + flex-direction: column; + // gap: 4rem; + // left: 50%; + // width: 90%; + justify-content: center; + align-items: center; + + @media (width<550px) { + width: auto; + display: none; + } + + .row { + display: flex; + flex-wrap: wrap; + gap: 2rem; + align-items: center; + justify-content: center; + margin: auto; + + .box { + display: flex; + position: relative; + margin: auto; + pointer-events: auto; + transition: all 0.3s ease-out; + // @media(width<1700px){ + // transform: scale(0.8); + // } + &:hover { + transform: scale(1.1); + } + // @media(width<1700px){ + // transform: scale(0.8); + // } + @media (width<1700px) { + transform: scale(0.95); + &:hover { + transform: scale(1.1); + } + } + @media (width<1110px) { + transform: scale(0.8); + &:hover { + transform: scale(0.94); + } + } + @media (width<550px) { + transform: scale(0.6); + display: none; + &:hover { + transform: scale(0.8); + } + } + .dance { + position: absolute; + left: 0.5%; + bottom: 1%; + height: 100%; + width: auto; + } + .drama { + position: absolute; + right: 0.5%; + bottom: 1%; + height: 100%; + width: auto; + } + .quiz { + position: absolute; + right: 0.5%; + bottom: 1%; + height: 100%; + width: auto; + } + .music { + position: absolute; + right: 0; + bottom: 0; + height: 80%; + width: auto; + } + .phototxt { + color: #fff; + font-family: "Thedus Condensed Light"; + font-size: 70px; + font-style: normal; + font-weight: 900; + line-height: 70%; + position: absolute; + left: 47%; + top: 45%; + transform: translateY(-50%); + } + .cameratxt { + color: #fff; + font-family: "Thedus Condensed Light"; + font-size: 70px; + font-style: normal; + font-weight: 900; + line-height: 70%; + position: absolute; + left: 47%; + top: 65%; + transform: translateY(-50%); + } + .fashiontxt { + color: #fff; + font-family: "Thedus Condensed Light"; + font-size: 70px; + font-style: normal; + font-weight: 900; + line-height: 70%; + position: absolute; + right: 6%; + top: 45%; + transform: translateY(-50%); + } + .dancetxt { + color: #fff; + font-family: "Thedus Condensed Light"; + font-size: 70px; + font-style: normal; + font-weight: 900; + line-height: 70%; + position: absolute; + right: 15%; + top: 45%; + transform: translateY(-50%); + } + .dramatxt { + color: #fff; + font-family: "Thedus Condensed Light"; + font-size: 70px; + font-style: normal; + font-weight: 900; + line-height: 70%; + position: absolute; + left: 15%; + top: 45%; + transform: translateY(-50%); + } + .quiztxt { + color: #fff; + font-family: "Thedus Condensed Light"; + font-size: 70px; + font-style: normal; + font-weight: 900; + line-height: 70%; + position: absolute; + left: 15%; + top: 45%; + transform: translateY(-50%); + } + .musictxt { + color: #fff; + font-family: "Thedus Condensed Light"; + font-size: 70px; + font-style: normal; + font-weight: 900; + line-height: 70%; + position: absolute; + left: 15%; + top: 45%; + transform: translateY(-50%); + } + .fill { + position: absolute; + height: 100%; + width: 100%; + border-radius: 54px; + opacity: 0.6; + background: #120a1e; + filter: blur(10.449999809265137px); + } + } + } +} + +.mobilecontainer { + position: relative; + display: none; + padding-bottom: 2rem; + + @media (width<550px) { + display: flex; + flex-direction: column; + gap: 1.5rem; + align-items: center; + } + + .mobileimg { + pointer-events: auto; + } +} diff --git a/components/MobileLanding/MobileLanding/MobileLanding.tsx b/components/MobileLanding/MobileLanding/MobileLanding.tsx index e509ca17..c55fbca8 100644 --- a/components/MobileLanding/MobileLanding/MobileLanding.tsx +++ b/components/MobileLanding/MobileLanding/MobileLanding.tsx @@ -13,19 +13,25 @@ import slotMachine2D from "@/assets/Landing/slotMachine2D2.png"; import profShowsBackground from "@/assets/MobileLanding/ProfShowsMobile/profShowsBackgroundMobile.png"; import grungeBackground from "@/assets/MobileLanding/ProfShowsMobile/GrungeMobile.png"; +import profShowWaves from "@/assets/MobileLanding/ProfShowsMobile/profShowWavyWavy.svg"; import vishal from "@/assets/MobileLanding/ProfShowsMobile/VishalMishra.png"; import seedheMaut from "@/assets/MobileLanding/ProfShowsMobile/SeedheMaut.png"; import yellowDiary from "@/assets/MobileLanding/ProfShowsMobile/YellowDiary.png"; +import EventsMobile from "../EventsPageMobile/EventsPageMobile"; +import Slideshow from "../Slideshow/Slideshow"; export default function MobileLanding() { return (
- 2d slot machine +
+ + 2d slot machine +
@@ -47,7 +53,7 @@ export default function MobileLanding() { shines.

{/*0BYgHIMnz50*/} {/**/} @@ -106,6 +112,14 @@ export default function MobileLanding() { alt="grunge texture" className={styles.profShowsBackground} /> + wave background for prof show mobile +
+
+
diff --git a/components/MobileLanding/MobileLanding/mobileLanding.module.scss b/components/MobileLanding/MobileLanding/mobileLanding.module.scss index d5263d3b..9886e91c 100644 --- a/components/MobileLanding/MobileLanding/mobileLanding.module.scss +++ b/components/MobileLanding/MobileLanding/mobileLanding.module.scss @@ -6,13 +6,6 @@ black 90%, transparent ); - // -webkit-mask-image: -webkit-linear-gradient( - // to bottom, - // transparent, - // black 10%, - // black 90%, - // transparent - // ); } .mobileLandingWrapper { @@ -26,10 +19,15 @@ justify-content: center; position: relative; - .slotMachine { + .slotMachineContainer { height: 100%; - width: auto; - z-index: 1; + position: relative; + + .slotMachine { + height: 100%; + width: auto; + z-index: 1; + } } .fade { @@ -109,4 +107,10 @@ width: 100%; } } + + .landingEventsPage { + @media (width >= 1000px) { + display: none; + } + } } diff --git a/components/MobileLanding/Slideshow/Slideshow.tsx b/components/MobileLanding/Slideshow/Slideshow.tsx new file mode 100644 index 00000000..e5634869 --- /dev/null +++ b/components/MobileLanding/Slideshow/Slideshow.tsx @@ -0,0 +1,53 @@ +"use client"; + +import styles from "./slideshow.module.scss"; + +import { useGSAP } from "@gsap/react"; +import { useEffect, useState } from "react"; +import Image from "next/image"; + +import one from "@/assets/MobileLanding/Slideshow/1.jpeg"; +import two from "@/assets/MobileLanding/Slideshow/2.jpeg"; +import three from "@/assets/MobileLanding/Slideshow/3.jpeg"; +import four from "@/assets/MobileLanding/Slideshow/4.jpeg"; +import five from "@/assets/MobileLanding/Slideshow/5.jpeg"; + +export default function Slideshow() { + const [activeImageIndex, setActiveImageIndex] = useState(0); + const imageArray = [one, two, three, four, five]; + + useEffect(() => { + const interval = setInterval(() => { + setActiveImageIndex((prev) => { + if (prev === imageArray.length - 1) { + return 0; + } else { + return prev + 1; + } + }); + }, 5000); + + return () => { + clearInterval(interval); + }; + }, []); + + return ( +
+ {imageArray.map((img, index) => { + return ( + image + ); + })} +
+ ); +} diff --git a/components/MobileLanding/Slideshow/slideshow.module.scss b/components/MobileLanding/Slideshow/slideshow.module.scss new file mode 100644 index 00000000..ab66b385 --- /dev/null +++ b/components/MobileLanding/Slideshow/slideshow.module.scss @@ -0,0 +1,24 @@ +.slideshow { + position: absolute; + height: 100%; + width: 100%; + + img { + aspect-ratio: 187 / 123; + position: absolute; + top: 29.5%; + left: 15.9%; + width: auto; + height: 26.5%; + border-radius: 0.5rem; + transition: opacity 1s linear; + + &:first-of-type { + z-index: 3; + } + + &:last-of-type { + z-index: 2; + } + } +} diff --git a/components/Sidenav/Sidenav.tsx b/components/Sidenav/Sidenav.tsx index 8d68f466..18b4fc55 100644 --- a/components/Sidenav/Sidenav.tsx +++ b/components/Sidenav/Sidenav.tsx @@ -11,67 +11,15 @@ const Sidenav = () => {

home

- - - - - - - - - - - - - - - - - - - - - +
@@ -80,30 +28,15 @@ const Sidenav = () => {

about

- - - - - - - -
@@ -112,30 +45,15 @@ const Sidenav = () => {

shows

- - - - - - - -
@@ -144,30 +62,15 @@ const Sidenav = () => {

events

- - - - - - - -
@@ -176,30 +79,15 @@ const Sidenav = () => {

contact

- - - - - - - - diff --git a/components/Sidenav/sidenav.module.scss b/components/Sidenav/sidenav.module.scss index 48847506..6e5da79e 100644 --- a/components/Sidenav/sidenav.module.scss +++ b/components/Sidenav/sidenav.module.scss @@ -21,6 +21,11 @@ gap: 1.5rem; cursor: pointer; text-decoration: none; + transition: all 0.3s ease-out; + + &:hover{ + transform: scale(1.3) translateX(-10%); + } p { text-decoration: none;