fix: scroll

src/app/about/page.tsx

@@ -4,15 +4,16 @@ import Image from 'next/image';
 import bigmascot from '../../assets/images/bigmascot.png';
 import { motion } from 'framer-motion';
 import { AboutCard, AboutCardMob, NavBar, SideBar } from '@/components';
-import { WheelEvent, TouchEvent, useState, useEffect } from 'react';
+import { WheelEvent, TouchEvent, useState, useEffect, useRef } from 'react';
 import { useRouter } from 'next/navigation';
 
 const About = () => {
     const [isScrolled, setIsScrolled] = useState<boolean>(false);
     const [scrollAllowed, setScrollAllowed] = useState<boolean>(true);
+    const contentCard = useRef<HTMLDivElement>(null);
     const router = useRouter();
     const simulateScroll = (event: WheelEvent<HTMLDivElement>) => {
-        if (!isScrolled) {
+        if (!isScrolled && !contentCard.current?.contains(event.target as Node)) {
             event.stopPropagation();
             if (event.deltaY > 0) {
                 setTimeout(() => {
@@ -31,7 +32,6 @@ const About = () => {
     const [touchEnd, setTouchEnd] = useState<number | null>(null);
 
     const handleTouchStart = (event: TouchEvent<HTMLDivElement>) => {
-        console.log('hello');
         setTouchEnd(null);
         setTouchStart(event.targetTouches[0].clientY);
     };
@@ -40,8 +40,12 @@ const About = () => {
         setTouchEnd(event.targetTouches[0].clientY);
     };
 
-    const handleTouchEnd = () => {
-        if (touchStart === null || touchEnd === null) {
+    const handleTouchEnd = (event: TouchEvent<HTMLDivElement>) => {
+        if (
+            touchStart === null ||
+            touchEnd === null ||
+            contentCard.current?.contains(event.target as Node)
+        ) {
             return;
         }
         const distance = touchStart - touchEnd;
@@ -92,8 +96,8 @@ const About = () => {
                 <div className="font-ROG xl:text-8xl lg:text-7xl md:text-6xl sm:text-4xl text-2xl">
                     ABOUT US
                 </div>
-                <AboutCard />
-                <AboutCardMob />
+                <AboutCard cardRef={contentCard} />
+                <AboutCardMob cardRef={contentCard} />
             </div>
             <SideBar number={'02'} content={'The Present'} />
         </div>

src/app/gallery/page.tsx

@@ -37,6 +37,7 @@ const History = () => {
     const [touchStart, setTouchStart] = useState<number | null>(null);
     const [touchEnd, setTouchEnd] = useState<number | null>(null);
     const shadowRef = useRef<HTMLDivElement>(null);
+    const carouselRef = useRef<HTMLDivElement>(null);
     const router = useRouter();
     const simulateScroll = (event: WheelEvent<HTMLDivElement>) => {
         if (!isScrolled) {
@@ -74,8 +75,12 @@ const History = () => {
         shadowRef.current.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
     };
 
-    const handleTouchEnd = () => {
-        if (touchStart === null || touchEnd === null) {
+    const handleTouchEnd = (event: TouchEvent<HTMLDivElement>) => {
+        if (
+            touchStart === null ||
+            touchEnd === null ||
+            carouselRef.current?.contains(event.target as Node)
+        ) {
             return;
         }
         const distance = touchStart - touchEnd;
@@ -109,6 +114,7 @@ const History = () => {
             <div className="flex w-[100%] h-[50%] items-center justify-center">
                 <div
                     className={`h-[100%] w-[75%] flex items-center justify-center ${styles.carousel}`}
+                    ref={carouselRef}
                 >
                     <Swiper
                         modules={[Autoplay, Pagination, Navigation]}

src/app/layout.tsx

@@ -5,8 +5,8 @@ import { Inter } from 'next/font/google';
 const inter = Inter({ subsets: ['latin'] });
 
 export const metadata: Metadata = {
-    title: 'Pragyan-24',
-    description: 'Main-Site for Pragyan-24',
+    title: "Pragyan 24 | Let's Celebrate Technology",
+    description: "Pragyan '24 Main Website",
 };
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {

src/components/AboutCard/AboutCard.tsx

@@ -1,9 +1,13 @@
+import React from 'react';
 import AboutContent from './AboutContent.json';
 
-const AboutCard = () => {
+const AboutCard: React.FC<AboutCardProps> = ({ cardRef }) => {
     const content = AboutContent.content;
     return (
-        <div className="AboutCard max-md:hidden h-fit sm:w-[85%] sm:h-[70%] md:w-[70%] md:h-[60%] lg:w-[60%] lg:h-[70%] xl:w-[45%] xl:h-[55%] flex justify-center items-center p-10 ">
+        <div
+            ref={cardRef}
+            className="AboutCard max-md:hidden h-fit sm:w-[85%] sm:h-[70%] md:w-[70%] md:h-[60%] lg:w-[60%] lg:h-[70%] xl:w-[45%] xl:h-[55%] flex justify-center items-center p-10 "
+        >
             <p className="pt-3 max-lg:text-base text-lg font-Nunito">{content}</p>
         </div>
     );

src/components/AboutCard/AboutCardMob.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import styles from './AboutCard.module.css';
 import AboutContent from './AboutContent.json';
 
-const AboutCardMob = () => {
+const AboutCardMob: React.FC<AboutCardProps> = ({ cardRef }) => {
     const content: string = AboutContent.content;
     const content2: string = AboutContent.content2;
     return (
@@ -12,6 +12,7 @@ const AboutCardMob = () => {
                 ' ' +
                 'md:hidden flex justify-center items-center p-4 py-10 text-center AboutCardContent z-0'
             }
+            ref={cardRef}
         >
             <div className={styles.topLeft + ' ' + styles.edge}></div>
             <div className={styles.topRight + ' ' + styles.edge}></div>

src/components/AboutCard/type.d.ts

@@ -0,0 +1,3 @@
+interface AboutCardProps {
+    cardRef: React.RefObject<HTMLDivElement>;
+}

src/components/NavBar/NavBar.tsx

@@ -1,7 +1,7 @@
 'use client';
 import { useState } from 'react';
 import Image from 'next/image';
-import pragyanlogo from '../../assets/images/main-logo-22-white.svg';
+import pragyanlogo from '../../assets/images/main-logo.png';
 import pragyanlogomobile from '../../assets/images/main-logo-mobile.png';
 import hamburgerIcon from '../../assets/images/hamburgerMenu.svg';
 import LoginButton from '../LoginButton/LoginButton';
@@ -14,18 +14,20 @@ const NavBar = () => {
         <div className="w-full flex h-14 box-border px-5 lg:px-7 z-10">
             <Menu isOpened={isOpened} setIsOpened={setIsOpened} />
             <div className="flex basis-1/2 justify-start items-center lg:px-5">
-                <Image
-                    src={pragyanlogo}
-                    alt="Pragyan Logo"
-                    draggable={false}
-                    className="w-40 max-md:hidden"
-                />
-                <Image
-                    src={pragyanlogomobile}
-                    alt="Pragyan Logo"
-                    draggable={false}
-                    className="w-100 md:hidden"
-                />
+                <Link href="/home">
+                    <Image
+                        src={pragyanlogo}
+                        alt="Pragyan Logo"
+                        draggable={false}
+                        className="w-40 max-md:hidden"
+                    />
+                    <Image
+                        src={pragyanlogomobile}
+                        alt="Pragyan Logo"
+                        draggable={false}
+                        className="w-100 md:hidden"
+                    />
+                </Link>
             </div>
             <div className="flex basis-1/2 lg:justify-between justify-end items-center pl-16 lg:pr-7 max-lg:gap-5 font-Orbitron xl:text-xl lg:text-lg text-sm">
                 <Link href="/home" className="max-lg:hidden">