Merge main branch into prod

dvm-bitspilani · Sep 14, 2024 · 224c688 · 224c688
2 parents 4c5a60b + 4baec8f
commit 224c688
Show file tree

Hide file tree

Showing 8 changed files with 208 additions and 81 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -27,10 +27,22 @@ body {
 
 #iframe-overlay {
   z-index: 1;
-  background-color: transparent;
+  opacity: 0;
   cursor: pointer;
 }
 
+@media (width > 1000px) {
+  #iframe-overlay{
+    opacity: 1;
+    background: url('/Videos/preloaderCoinVideo.gif');
+    background-color: black;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+
+}
+
 #iframe-overlay + div {
   width: 1000px !important;
   height: 750px !important;

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -49,6 +49,11 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
+      <head>
+        <title>Oasis '24</title>
+        <meta name="description" content="The official website of Oasis 2024 - Asia's Largest Student-Run College Cultural Festival returns for its 53rd edition in 2024! Est. 1971" />
+        <meta name="google-site-verification" content="GKxgBVi8dPgOPEBsP-lgb_ZM201NN8NE5ZbVEhrhpDw" />
+      </head>
       <body className={inter.className}>
         <GoogleAnalytics gaId="G-P6H0V5H4L7" />
         <GoogleOAuthProvider clientId="1003752349264-5u6j9a2thpcj84kj05bsah2u46q7jegt.apps.googleusercontent.com">

diff --git a/app/page.tsx b/app/page.tsx
@@ -13,7 +13,7 @@ import Nav from "@/components/Nav/Nav";
 export default function Home() {
   return (
     <>
-      <div className={styles.navTickets}>
+      <div className={styles.navTickets} id="tickets-container">
         <Nav />
       </div>
       <PrePreloader />

diff --git a/components/ContactUs/contactus.module.scss b/components/ContactUs/contactus.module.scss
@@ -291,9 +291,7 @@
 }
 
 @media (max-width: 2100px) and (min-width: 1700px) {
-
   .bottom {
-
     .bottomAnimation {
       width: 300px;
       height: 280px;
@@ -395,7 +393,7 @@
       }
     }
 
-    .cardContainer, 
+    .cardContainer,
     .cardContainer1 {
       opacity: 0;
       margin-top: 0;
@@ -405,8 +403,8 @@
     .mobileContainer {
       margin-top: 3rem;
       display: block;
-      
-      .scrollWrapper{
+
+      .scrollWrapper {
         width: 100%;
         height: 100%;
         display: flex;
@@ -488,7 +486,7 @@
   }
 
   .bottom {
-    display: none
+    display: none;
   }
 }
 
@@ -529,7 +527,10 @@
       margin-top: 1.5rem;
       margin-bottom: 0rem;
       height: 70lvh;
-      overflow-y: hidden;
+
+      .scrollWrapper {
+        pointer-events: none;
+      }
     }
 
     // .cardContainer {
@@ -584,30 +585,29 @@
 //   }
 // }
 
-@media(max-width: 450px) {
-
+@media (max-width: 450px) {
   .contactPage {
-
     .heading {
       margin-top: 1rem;
     }
 
     .mobileContainer {
       margin-top: 1rem;
       margin-bottom: 0rem;
-      gap: 1rem;
+
+      .scrollWrapper {
+        gap: 1rem;
+      }
     }
   }
 }
 
-@media(max-width: 400px) {
-
+@media (max-width: 400px) {
   .contactPage {
-
     .mobileContainer {
-      gap: 0.8rem 0.9rem;
+      .scrollWrapper {
+        gap: 0.8rem 0.9rem;
+      }
     }
   }
 }
-
-
diff --git a/components/Landing/Card/Card.tsx b/components/Landing/Card/Card.tsx
@@ -2,13 +2,14 @@ import React from "react";
 import styles from "./card.module.scss";
 
 interface CardProps {
-  cardID: string
+  cardID: string;
+  cardClass: string;
 }
 
-export default function Card({ cardID }: CardProps) {
+export default function Card({ cardID, cardClass }: CardProps) {
   return (
     <>
-      <div className={styles.cardwrapper} id={cardID}>
+      <div className={`${styles.cardwrapper} ${cardClass}`} id={cardID}>
         <div className={styles.cardcontainer}></div>
         <div className={styles.heart}>
           <svg

diff --git a/components/Landing/CardsGroup/CardsGroup.tsx b/components/Landing/CardsGroup/CardsGroup.tsx
@@ -3,36 +3,48 @@ import React, { useEffect } from "react";
 import styles from "./cardsgroup.module.scss";
 import Card from "../Card/Card";
 import gsap from "gsap";
+import { useGSAP } from "@gsap/react";
 
 interface CardsGroupProps {
   group: number;
 }
 
 export default function CardsGroup({ group }: CardsGroupProps) {
-  useEffect(() => {
-    for (let i = 1; i <= 2; i += 1) {
-      for (let j = 1; j <= 3; j += 1) {
-        let card = document.getElementById(`card${i}${j}`);
-        let check = Math.random() < 0.5 ? -1 : 1;
-        // console.log(card, check)
-        const tl = gsap.timeline({ repeat: -1 });
-        tl.to(card, { duration: 1, y: check * 10 + "px" });
-        tl.to(card, { duration: 1, y: "0px" });
-      }
-    }
-  });
+  useGSAP(
+    () => {
+      let check = Math.random() < 0.5 ? -1 : 1;
+
+      const commonAnimations = {
+        y: check * 10,
+        duration: 1,
+        repeat: -1,
+        yoyoEase: "power2.inOut",
+      };
+
+      gsap.to(`.cardGrp1`, {
+        ...commonAnimations,
+      });
+      gsap.to(`.cardGrp2`, {
+        ...commonAnimations,
+      });
+      gsap.to(`.cardGrp3`, {
+        ...commonAnimations,
+      });
+    },
+    { dependencies: [] }
+  );
 
   return (
     <>
       <div className={styles.cardscontainer}>
         <div className={styles.card}>
-          <Card cardID={`card${group}1`} />
+          <Card cardID={`card${group}1`} cardClass="cardGrp1" />
         </div>
         <div className={styles.card}>
-          <Card cardID={`card${group}2`} />
+          <Card cardID={`card${group}2`} cardClass="cardGrp2" />
         </div>
         <div className={styles.card}>
-          <Card cardID={`card${group}3`} />
+          <Card cardID={`card${group}3`} cardClass="cardGrp3" />
         </div>
       </div>
     </>