feat: responsiveness to pages, no mask in mobile view

cookoff24-landing/src/components/About.js

@@ -13,11 +13,10 @@ const About = () => {
       <div className="body mx-[13%] md:mx-[10%] flex flex-col justify-center items-stretch gap-[8rem] py-16 h-[100vh] text-grey">
         <p
           id="proxima"
-          className="text-justify text-4xl tracking-wide font-bold leading-relaxed sm:text-2xl sm:tracking-wide sm:font-semibold"
+          className="text-justify text-4xl tracking-wide font-bold leading-relaxed lg:text-2xl lg:tracking-wide lg:font-semibold sm:text-2xl sm:tracking-wide sm:font-semibold"
         >
           Cook off is <span className="text-orange">CodeChef VIT</span>&apos;s
           flagship competitive coding event that tests the coding skills of tech
-          enthusiasts across the country. The event provides a platform for
           participants to develop their competitive coding skills and test their
           abilities. Cook Off 7.0 will be the seventh edition through which we
           hope to broaden the horizons of the participants.

cookoff24-landing/src/components/AboutMask.js

@@ -6,7 +6,7 @@ import useMousePosition from "@/utils/useMousePosition";
 const AboutMask = () => {
   const { setIsHovered, setIsHoveredOnSmall } = useAppContext();
   return (
-    <div className="relative flex flex-col justify-center items-left gap-[8rem] py-16 h-[100vh] text-grey bg-orange  cursor-default">
+    <div className="flex px-[13%] md:px-[10%] flex-col justify-center items-stretch gap-[8rem] py-16 h-[100vh] text-black bg-orange relative cursor-default">
       <p
         onMouseEnter={() => {
           setIsHoveredOnSmall(true);
@@ -26,7 +26,7 @@ const AboutMask = () => {
           setIsHovered(false);
         }}
         id="proxima"
-        className="text-justify text-4xl tracking-wide font-bold leading-relaxed mx-[13%] md:mx-[10%]"
+        className="text-justify text-4xl tracking-wide font-bold leading-relaxed lg:text-2xl lg:tracking-wide lg:font-semibold sm:text-2xl sm:tracking-wide sm:font-semibold"
       >
         Cook off is <span className="text-black">CodeChef VIT</span>&apos;s
         flagship competitive coding event that tests the coding skills of tech

cookoff24-landing/src/components/Faqs.js

@@ -6,7 +6,7 @@ const Faqs = () => {
   return (
     <div className="min-h-[100vh] w-[100vw] relative z-10">
       <div className="uppercase text-[16px] md:text-[10px] mx-[13%] md:mx-[10%] text-[#B7AB98] mt-32 mb-10 tracking-[7px]">
-        faqs
+        FAQs
       </div>
       <FaqItem question="What is Cook-Off?" answer="A Competative Exam." />
       <FaqItem

cookoff24-landing/src/components/FixedNav.js

@@ -9,14 +9,14 @@ const FixedNav = () => {
   return (
     <div className="fixed h-screen w-screen text-orange ">
 
-      <div className="flex justify-between p-12 md:p-0">
-        <div className="h-16 w-auto cursor-pointer logo Z-40">
+      <div className="flex justify-between p-12 md:p-6">
+        <div className="h-16 w-auto cursor-pointer logo z-40">
 
-          <Image className="h-16 w-auto" src={cclogo} alt="CC Logo" />
+          <Image className="h-16 w-auto sm:h-12" src={cclogo} alt="CC Logo" />
         </div>
         <Options />
       </div>
-      <div className="absolute left-[3.7rem] bottom-40">
+      <div className="absolute left-[3.7rem] bottom-40 sm:hidden">
         <SocialHandles />
       </div>
     </div>

cookoff24-landing/src/components/FixedNavMask.js

@@ -0,0 +1,45 @@
+import React from "react";
+import cclogo from "../assets/cclogo.svg";
+import Options from "./NavbarComps/Options";
+import SocialHandles from "./NavbarComps/SocialHandles";
+import Image from "next/image";
+import { useAppContext } from "@/context/appContext";
+import { motion } from "framer-motion";
+import useMousePosition from "@/utils/useMousePosition";
+
+const FixedNavMask = () => {
+  const { setIsHovered, setIsHoveredOnSmall } = useAppContext();
+  return (
+    <div className="fixed h-screen w-screen text-orange ">
+      <div className="flex justify-between p-12 md:p-6">
+        <div className="h-16 w-auto cursor-pointer logo z-40">
+          <Image
+            onMouseEnter={() => {
+              setIsHovered(true);
+            }}
+            onMouseLeave={() => {
+              setIsHovered(false);
+            }}
+            className="h-16 w-auto sm:h-12"
+            src={cclogo}
+            alt="CC Logo"
+          />
+        </div>
+        <Options />
+      </div>
+      <div
+        onMouseEnter={() => {
+          setIsHoveredOnSmall(true);
+        }}
+        onMouseLeave={() => {
+          setIsHoveredOnSmall(false);
+        }}
+        className="absolute left-[3.7rem] bottom-40 sm:hidden"
+      >
+        <SocialHandles />
+      </div>
+    </div>
+  );
+};
+
+export default FixedNavMask;

cookoff24-landing/src/components/Prizes.js

@@ -13,7 +13,7 @@ const Prizes = () => {
       id="proxima"
       className="min-h-[100vh] w-[100vw] text-grey flex flex-col items-start justify-between gap-[3.1rem] py-16"
     >
-      <p className=" tracking-[7px] md:text-[10px] mx-[13%] md:mx-[10%] mt-10 mb-10">
+      <p className="md:self-center  tracking-[7px] md:text-[10px] mx-[13%] md:mx-[10%] mt-10 mb-10">
         PRIZES
       </p>
       <div>
@@ -37,11 +37,26 @@ const Prizes = () => {
           content="You’ll get like 1.5 Lakhs in cash, damm that’s a lot of money. What
             are you going to do with all? I’m gonna buy myself some doge."
         />
-        <Awards
-          title="WOMEN"
-          content="You’ll get like 1.5 Lakhs in cash, damm that’s a lot of money. What
-            are you going to do with all? I’m gonna buy myself some doge."
-        />
+        <div className="parent container relative">
+        <div className="text border border-x-0 border-grey w-[100vw] flex justify-between items-center">
+          <p className="px-36 text-8xl font-bold tracking-wide cursor-pointer md:text-xl lg:text-6xl text-center md:pl-10 justify-self-start">
+            WOMEN
+          </p>
+          <p className="px-36 h-20 w-[45vw] lg:w-[55vw] text-lg tracking-wide text-black md:text-xs xl:text-sm md:px-0 md:tracking-tight ">
+          You’ll get like 1.5 Lakhs in cash, damm that’s a lot of money. What
+            are you going to do with all? I’m gonna buy myself some doge.
+          </p>
+        </div>
+        <div className=" overlay transition-all absolute top-0 bg-orange w-[100vw] flex justify-between items-center">
+          <p className="px-36 text-8xl font-bold tracking-wide cursor-pointer md:text-xl lg:text-6xl text-center   md:pl-10 justify-self-start text-orange">
+           WOMEN
+          </p>
+          <p className="px-36 h-20 w-[45vw] lg:w-[55vw] text-lg tracking-wide text-orange  md:text-xs md:px-0 xl:text-sm md:tracking-tight">
+          You’ll get like 1.5 Lakhs in cash, damm that’s a lot of money. What
+            are you going to do with all? I’m gonna buy myself some doge.
+          </p>
+        </div>
+      </div>
       </div>
     </div>
   );

cookoff24-landing/src/components/PrizesComps/Awards.js

@@ -4,19 +4,19 @@ const Awards = (props) => {
   return (
     <div>
       <div className="parent container relative">
-        <div className="text border border-x-0 border-grey w-[100vw] flex justify-between items-center">
-          <p className="px-36 text-8xl font-bold tracking-wide cursor-pointer md:text-sm  md:pl-10">
+        <div className="text border border-b-0 border-x-0 border-grey w-[100vw] flex justify-between  items-center">
+          <p className="px-36 text-8xl font-bold tracking-wide lg:text-6xl cursor-pointer md:text-xl text-center   md:pl-10 justify-self-start">
             {props.title}
           </p>
-          <p className="px-36 h-20 w-[45vw] text-lg tracking-wide text-black md:text-xs xl:text-sm md:px-0 md:tracking-tight ">
+          <p className="px-36 h-20 w-[45vw] lg:w-[55vw] text-lg tracking-wide  text-black md:text-xs xl:text-sm md:px-0 md:tracking-tighter">
             {props.content}
           </p>
         </div>
-        <div className=" overlay transition-all absolute top-0 bg-orange w-[100vw] flex justify-between items-center">
-          <p className="px-36 text-8xl font-bold tracking-wide cursor-pointer text-orange md:pl-10 md:text-sm ">
+        <div className=" overlay transition-all absolute top-0 bg-orange w-[100vw] text-center flex justify-between items-center">
+          <p className="px-36 text-8xl font-bold tracking-wide lg:text-6xl cursor-pointer md:text-xl text-center   md:pl-10 justify-self-start text-orange ">
             {props.title}
           </p>
-          <p className="px-36 h-20 w-[45vw] text-lg tracking-wide text-orange  md:text-xs md:px-0 xl:text-sm md:tracking-tight">
+          <p className="px-36 h-20 w-[45vw] lg:w-[55vw] text-lg tracking-wide text-orange  md:text-xs md:px-0 xl:text-sm md:tracking-tighter">
             {props.content}
           </p>
         </div>

cookoff24-landing/src/pages/landing.js

@@ -28,6 +28,7 @@ import OtherEventsMask from "@/components/OtherEventsMask";
 import FaqsMask from "@/components/FaqsMask";
 import SocialsMask from "@/components/SocialsMask";
 import FillerMask from "@/components/FillerMask";
+import FixedNavMask from "@/components/FixedNavMask";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -74,8 +75,9 @@ export default function Home() {
           WebkitMaskSize: `${size}px`,
         }}
         transition={{ type: "tween", ease: "easeOut", duration: 0.2 }}
-        className="one mask-content -z-30"
+        className="one mask-content -z-30 sm:hidden"
       >
+        <FixedNavMask />
         <WelcomeMask />
         <AboutMask />
         <FillerMask height={360}/>