diff --git a/app/about/page.tsx b/app/about/page.tsx index d62a7474..6e2598d0 100644 --- a/app/about/page.tsx +++ b/app/about/page.tsx @@ -1,6 +1,7 @@ "use client"; -import React from "react"; +import React, {useEffect} from "react"; +import { useRouter } from "next/navigation"; import styles from "./about.module.scss"; import Grid from "@/components/Landing/Grid/Grid"; @@ -16,6 +17,31 @@ import MobileSlotMachine from "@/components/AboutUs/Machine/Machine"; import CursorEffect from "@/components/CursorEffect/CursorEffect"; export default function About() { + + const router = useRouter(); + useEffect(() => { + if (typeof window !== "undefined") { + const isMobile = + /Mobi|Android/i.test(navigator.userAgent) || window.innerWidth <= 800; + + if (isMobile) { + router.push("/"); + } + } + document.body.style.overflow = "hidden"; + }, []); + + useEffect(() => { + if (!localStorage.getItem("hasAboutReloaded")) { + localStorage.setItem("hasAboutReloaded", "true"); + window.location.reload(); + } + }); + + const handleBackButtonClick = () => { + localStorage.removeItem("hasAboutReloaded"); + }; + return ( <> @@ -27,7 +53,7 @@ export default function About() {
- +
diff --git a/app/contact/contact.module.scss b/app/contact/contact.module.scss index 23e3a07c..bd55e495 100644 --- a/app/contact/contact.module.scss +++ b/app/contact/contact.module.scss @@ -11,7 +11,7 @@ top: 30px; left: 20px; z-index: 15; - @media(width>1920px){ + @media (width>1920px) { transform: scale(1.3); left: 40px; top: 50px; @@ -25,7 +25,7 @@ z-index: 10; height: 100px; - @media(width>1920px){ + @media (width>1920px) { top: 20px; } } @@ -104,18 +104,34 @@ } .bottom { - opacity: 1; - position: fixed; bottom: 0%; display: flex; flex-direction: row; - justify-content: space-between; + // justify-content: space-between; width: 100%; - .bottomAnimation { - height: 200px; - width: 250px; - object-fit: contain; + .left { + position: fixed; + bottom: 0; + left: 0; + + .bottomAnimation { + height: 200px; + width: 250px; + object-fit: contain; + } + } + + .right { + position: fixed; + bottom: 0; + right: 0; + + .bottomAnimation { + height: 200px; + width: 250px; + object-fit: contain; + } } } @@ -139,7 +155,6 @@ } } - @media (max-width: 2100px) and (min-width: 1800px) { .contactPage { .heading { @@ -160,10 +175,20 @@ } .bottom { - .bottomAnimation { - width: 300px; - height: 280px; - object-fit: contain; + .left { + .bottomAnimation { + width: 300px; + height: 280px; + object-fit: contain; + } + } + + .right { + .bottomAnimation { + width: 300px; + height: 280px; + object-fit: contain; + } } } } diff --git a/app/contact/page.tsx b/app/contact/page.tsx index 6bee6349..1a625348 100644 --- a/app/contact/page.tsx +++ b/app/contact/page.tsx @@ -1,6 +1,7 @@ "use client"; import React, { useEffect, useRef } from "react"; +import { useRouter } from "next/navigation"; import styles from "./contact.module.scss"; import Grid from "@/components/Landing/Grid/Grid"; @@ -196,6 +197,19 @@ export default function ContactUs() { localStorage.removeItem("hasReloaded"); }; + const router = useRouter(); + useEffect(() => { + if (typeof window !== "undefined") { + const isMobile = + /Mobi|Android/i.test(navigator.userAgent) || window.innerWidth <= 800; + + if (isMobile) { + router.push("/"); + } + } + document.body.style.overflow = "hidden"; + }, []); + return ( <> @@ -459,19 +473,23 @@ export default function ContactUs() { -
- left - right +
+ + left + + + right +
); diff --git a/app/events/[categoryname]/categories.module.scss b/app/events/[categoryname]/categories.module.scss index c31824ba..32426889 100644 --- a/app/events/[categoryname]/categories.module.scss +++ b/app/events/[categoryname]/categories.module.scss @@ -213,8 +213,15 @@ font-size: 16px; } svg { + aspect-ratio: 18/26; margin-right: 10px; + width: 18px; transform: translateY(5px); + + @media (width <= 1148px) { + width: 12px; + margin-right: 6px; + } } } } @@ -320,6 +327,28 @@ height: 70%; } + .eventImageSkeleton { + padding: 0 5% 0 15%; + width: 80%; + height: 50%; + display: flex; + justify-content: center; + position: absolute; + + .skeleton { + width: 100%; + height: 100%; + user-select: none; + box-shadow: 0px 0px 20px 4px #cbae5780; + background-color: #110e16; + border-radius: 24px; + + display: flex; + justify-content: center; + align-items: center; + } + } + .eventImageContainer { padding: 0 5% 0 15%; width: 80%; @@ -349,6 +378,7 @@ background-color: #110e16; } } + .eventDescription { padding-left: 5%; width: 95%; diff --git a/app/events/[categoryname]/page.tsx b/app/events/[categoryname]/page.tsx index cbfe6c4a..b8d949ce 100644 --- a/app/events/[categoryname]/page.tsx +++ b/app/events/[categoryname]/page.tsx @@ -3,12 +3,11 @@ import { useEffect, useState } from "react"; import styles from "./categories.module.scss"; import Image from "next/image"; -import Link from "next/link"; 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"; +import LoaderChip from "@/components/Events/Loader/LoaderChip"; const categories = [ "music", @@ -24,6 +23,7 @@ export default function Page({ params }: { params: { categoryname: string } }) { const [eventsList, setEventsList] = useState([]); const [eventID, setEventID] = useState(0); const [loading, setLoading] = useState(true); + const [imageLoaded, setImageLoaded] = useState(false); const handleBack = () => { document.body.style.overflow = "auto"; @@ -69,6 +69,7 @@ export default function Page({ params }: { params: { categoryname: string } }) { : (prevID + 1) % eventsList.length; return newID; }); + setImageLoaded(false); }; return ( <> @@ -132,8 +133,6 @@ export default function Page({ params }: { params: { categoryname: string } }) {
*/}
-
-
+
+ +
+
+ )} +
+
+ alt={eventsList[eventID]?.name || "event image"} + onLoad={() => setImageLoaded(true)} + />
{ + if (typeof window !== "undefined") { + const isMobile = + /Mobi|Android/i.test(navigator.userAgent) || window.innerWidth <= 800; + + if (isMobile) { + router.push("/"); + } + } + document.body.style.overflow = "hidden"; + }, []); + + return ( <> diff --git a/app/media-partners/media-partners.module.scss b/app/media-partners/media-partners.module.scss index 00dd1b63..dd04d0cc 100644 --- a/app/media-partners/media-partners.module.scss +++ b/app/media-partners/media-partners.module.scss @@ -51,6 +51,14 @@ } .title { + @media screen and (width <= 920px) { + font-size: 40px; + } + @media screen and (width <= 710px) { + font-size: 30px; + width: 100%; + } + text-decoration: none; position: absolute; top: 12px; @@ -78,6 +86,7 @@ align-items: center; } .sponsorsContainer { + padding-top: 50px; z-index: 4; position: absolute; top: 90px; @@ -96,11 +105,31 @@ } -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ + .sponsorsSubTitle { + grid-column: span 6; + display: flex; + height: 100%; + justify-content: center; + align-items: center; + text-decoration: none; + color: #ffe3ad; + text-shadow: 0px 0px 8px rgba(229, 195, 132, 0.48); + font-family: "Source Serif 4"; + font-size: 60px; + font-style: normal; + font-weight: 600; + letter-spacing: 0.05em; + text-align: center; + @media (width <= 800px) { + grid-column: span 6; + font-size: 40px; + } + } .sponsorItemContainer { text-decoration: none; .sponsorItem { margin-bottom: 50px; - // height: 300px; + height: 300px; // background-color: rebeccapurple; display: flex; gap: 5px; @@ -118,10 +147,10 @@ } .sponsorName { text-decoration: none; - color: #ffe3ad; + color: white; text-shadow: 0px 0px 8px rgba(229, 195, 132, 0.48); font-family: "Source Serif 4"; - font-size: 40px; + font-size: 30px; font-style: normal; font-weight: 600; letter-spacing: 0.05em; @@ -133,84 +162,29 @@ text-align: center; color: white; text-decoration: none; - font-size: 22px; - } - } - &:nth-child(1) { - grid-column-start: 1; - grid-column-end: 7; - .sponsorImg { - padding-top: 50px; - display: block; - max-height: 350px; - max-width: 100%; - padding-bottom: 5px; - } - .sponsorName { - text-decoration: none; - color: #ffe3ad; - text-shadow: 0px 0px 8px rgba(229, 195, 132, 0.48); - font-family: "Source Serif 4"; - font-size: 60px; - font-style: normal; - font-weight: 600; - letter-spacing: 0.05em; - text-align: center; + font-size: 17px; } - } - &:nth-child(2) { - grid-column-start: 1; - grid-column-end: 4; - .sponsorImg { - padding-top: 50px; - display: block; - max-height: 350px; - max-width: 100%; - padding-bottom: 5px; - } - .sponsorName { - text-decoration: none; - color: #ffe3ad; - text-shadow: 0px 0px 8px rgba(229, 195, 132, 0.48); - font-family: "Source Serif 4"; - font-size: 60px; - font-style: normal; - font-weight: 600; - letter-spacing: 0.05em; - text-align: center; - } + // &:nth-child(1) { + // grid-column-start: 1; + // grid-column-end: 7; + // } + // &:nth-child(2) { + // grid-column-start: 1; + // grid-column-end: 4; - @media (width <= 800px) { - grid-column: span 6; - } - } - &:nth-child(3) { - grid-column-start: 4; - grid-column-end: 7; - .sponsorImg { - padding-top: 50px; - display: block; - max-height: 350px; - max-width: 100%; - padding-bottom: 5px; - } - .sponsorName { - text-decoration: none; - color: #ffe3ad; - text-shadow: 0px 0px 8px rgba(229, 195, 132, 0.48); - font-family: "Source Serif 4"; - font-size: 60px; - font-style: normal; - font-weight: 600; - letter-spacing: 0.05em; - text-align: center; - } + // @media (width <= 800px) { + // grid-column: span 6; + // } + // } + // &:nth-child(3) { + // grid-column-start: 4; + // grid-column-end: 7; - @media (width <= 800px) { - grid-column: span 6; - } - } + // @media (width <= 800px) { + // grid-column: span 6; + // } + // } grid-column: span 2; @media (width <= 1300px) { @@ -262,7 +236,7 @@ } .title { - font-size: 40px; + font-size: 25px; } .sponsorsContainer { .sponsorItemContainer { diff --git a/app/media-partners/page.tsx b/app/media-partners/page.tsx index f12d2374..d57b0c09 100644 --- a/app/media-partners/page.tsx +++ b/app/media-partners/page.tsx @@ -15,7 +15,7 @@ export default function Sponsors() { const [sponsors, setSponsors] = React.useState([]); React.useEffect(() => { axios - .get("https://www.bits-oasis.org/2024/main/wallet/sponsors/") + .get("https://bits-oasis.org/2024/main/registrations/media_partners/") .then((response) => { const sortedSponsors = response.data.sort( (a: any, b: any) => a.order - b.order @@ -167,39 +167,64 @@ export default function Sponsors() { -
Sponsors
+
Media Partners
+
handleScroll()} ref={containerRef} > - {sponsors.map((sponsor, index) => ( - -
- -
{sponsor.name}
-
- {sponsor.description} +
Influencers
+ {sponsors + .filter((sponsor) => !sponsor.publication) + .map((sponsor, index) => ( + +
+ +
{sponsor.name}
+
+ {sponsor.description} +
-
- + + ))} - //
- ))} +
Publications
+ {sponsors + .filter((sponsor) => sponsor.publication) + .map((sponsor, index) => ( + +
+ +
{sponsor.name}
+
+ {sponsor.description} +
+
+ + ))}
diff --git a/components/AboutUs/Machine/Machine.tsx b/components/AboutUs/Machine/Machine.tsx index deddfb78..578b6ec1 100644 --- a/components/AboutUs/Machine/Machine.tsx +++ b/components/AboutUs/Machine/Machine.tsx @@ -10,32 +10,38 @@ import slotMachine from "@/assets/Landing/slotMachine2D.png"; import Image from "next/image"; import { forwardRef, useState, useEffect, useRef } from "react"; +declare global { + interface Window { + YT: any; + onYouTubeIframeAPIReady: () => void; + } +} + const MobileSlotMachine = forwardRef(function MobileSlotMachine( props, ref: any ) { const [iframeIndex, setIframeIndex] = useState(0); const playerRef = useRef(null); - const [isPlaying, setIsPlaying] = useState(true); + const [isPlaying, setIsPlaying] = useState(false); - const videoUrlArrayIframe = ["Ogio7ZJSb9g", "ZCrClSBM1ns", "krsrGOqnAN0"]; - + const videoUrlArrayIframe = ["Ogio7ZJSb9g", "ZCrClSBM1ns", "krsrGOqnAN0"]; - // Function to initialize the YouTube player useEffect(() => { const loadYouTubeAPI = () => { - const tag = document.createElement("script"); - tag.src = "https://www.youtube.com/iframe_api"; - const firstScriptTag = document.getElementsByTagName("script")[0]; - firstScriptTag?.parentNode?.insertBefore(tag, firstScriptTag); + if (!window.YT) { + const tag = document.createElement("script"); + tag.src = "https://www.youtube.com/iframe_api"; + const firstScriptTag = document.getElementsByTagName("script")[0]; + firstScriptTag?.parentNode?.insertBefore(tag, firstScriptTag); + } }; window.onYouTubeIframeAPIReady = () => { playerRef.current = new window.YT.Player("yt-player", { events: { onReady: (event: any) => { - event.target.playVideo(); - setIsPlaying(true); // Video is playing initially + setIsPlaying(false); }, onStateChange: (event: any) => { // Update isPlaying state based on video state (1 = playing, 2 = paused) @@ -52,12 +58,12 @@ const MobileSlotMachine = forwardRef(function MobileSlotMachine( loadYouTubeAPI(); }, []); - // Function to handle switching videos const switchVideoIframe = (index: number) => { setIframeIndex(index); if (playerRef.current) { playerRef.current.loadVideoById(videoUrlArrayIframe[index]); - setIsPlaying(true); + playerRef.current.pauseVideo(); + setIsPlaying(false); } }; @@ -91,7 +97,7 @@ const MobileSlotMachine = forwardRef(function MobileSlotMachine(