+
+ Countdown
+
+
+ {/*
*/}
+
+
+ {countdown.days}
+
+
+ DAYS
+
+
+
+
+ {countdown.hours}
+
+
+ HOURS
+
+
+
+
+ {countdown.days}
+
+
+ MINUTES
+
+
+
+
+ );
+};
+
+export default Countdown;
diff --git a/cookoff24-landing/src/components/CountdownMask.js b/cookoff24-landing/src/components/CountdownMask.js
new file mode 100644
index 0000000..68a94bb
--- /dev/null
+++ b/cookoff24-landing/src/components/CountdownMask.js
@@ -0,0 +1,25 @@
+import { useAppContext } from "@/context/appContext";
+
+const CountdownMask = () => {
+ const { setIsHoveredOnSmall } = useAppContext();
+ return (
+
+
+
{
+ setIsHoveredOnSmall(true);
+ }}
+ onMouseLeave={() => {
+ setIsHoveredOnSmall(false);
+ }}
+ className="text-6xl lg:text-[4xl] font-bold"
+ >
+ AND AS THE SANDS OF TIME FALL, WE DRAW NEARER TO THE EMBRACE OF
+ OBLIVION
+
+
+
+ );
+};
+
+export default CountdownMask;
diff --git a/cookoff24-landing/src/components/Faqs.js b/cookoff24-landing/src/components/Faqs.js
new file mode 100644
index 0000000..22eb13c
--- /dev/null
+++ b/cookoff24-landing/src/components/Faqs.js
@@ -0,0 +1,68 @@
+// Faqs.js
+import React from "react";
+import FaqItem from "./faqItem"; // Adjust the path to match your folder structure
+
+const Faqs = () => {
+ return (
+
+
+ FAQs
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default Faqs;
diff --git a/cookoff24-landing/src/components/FaqsMask.js b/cookoff24-landing/src/components/FaqsMask.js
new file mode 100644
index 0000000..4ef7a9b
--- /dev/null
+++ b/cookoff24-landing/src/components/FaqsMask.js
@@ -0,0 +1,7 @@
+const FaqsMask = () => {
+ return (
+
+ );
+}
+
+export default FaqsMask;
\ No newline at end of file
diff --git a/cookoff24-landing/src/components/FillerMask.js b/cookoff24-landing/src/components/FillerMask.js
new file mode 100644
index 0000000..f8a1c86
--- /dev/null
+++ b/cookoff24-landing/src/components/FillerMask.js
@@ -0,0 +1,11 @@
+import { useAppContext } from "@/context/appContext";
+
+const FillerMask = () => {
+ const {setIsHoveredOnSmall} = useAppContext();
+ return (
+
+
+ );
+};
+
+export default FillerMask;
diff --git a/cookoff24-landing/src/components/FillerMask2.js b/cookoff24-landing/src/components/FillerMask2.js
new file mode 100644
index 0000000..7918474
--- /dev/null
+++ b/cookoff24-landing/src/components/FillerMask2.js
@@ -0,0 +1,11 @@
+import { useAppContext } from "@/context/appContext";
+
+const FillerMask2 = () => {
+ const {setIsHoveredOnSmall} = useAppContext();
+ return (
+
+
+ );
+};
+
+export default FillerMask2;
diff --git a/cookoff24-landing/src/components/FixedNav.js b/cookoff24-landing/src/components/FixedNav.js
new file mode 100644
index 0000000..2e66603
--- /dev/null
+++ b/cookoff24-landing/src/components/FixedNav.js
@@ -0,0 +1,175 @@
+import React, { useState, useRef, useEffect } from "react";
+import Image from "next/image";
+import Options from "./NavbarComps/Options";
+import cclogo from "../assets/cclogo.svg";
+import SocialHandles from "./NavbarComps/SocialHandles";
+import { motion } from "framer-motion";
+import useMediaQuery from "@/hooks/useMediaQuery";
+import BurgerSVG from "./BurgerSVG";
+import { Link } from "react-scroll";
+
+const FixedNav = () => {
+ const isMobile = useMediaQuery("(max-width:639px)");
+ const [isToggled, setIsToggled] = useState(false);
+ const [isScrolled, setIsScrolled] = useState(false);
+ const navbarRef = useRef(null);
+ useEffect(() => {
+ const handleOutsideClick = (e) => {
+ if (navbarRef.current && !navbarRef.current.contains(e.target)) {
+ setIsToggled(false);
+ }
+ };
+
+ document.addEventListener("click", handleOutsideClick);
+ return () => document.removeEventListener("click", handleOutsideClick);
+ }, []);
+
+ useEffect(() => {
+ const handleScroll = () => {
+ if (window.scrollY > 200) {
+ setIsScrolled(true);
+ } else {
+ setIsScrolled(false);
+ }
+ };
+
+ window.addEventListener("scroll", handleScroll);
+ return () => {
+ window.removeEventListener("scroll", handleScroll);
+ };
+ });
+ const navVar = {
+ hidden: {
+ opacity: 0,
+ x: -10,
+ },
+ visible: {
+ opacity: 100,
+ x: 10,
+ },
+ };
+ if (!isMobile) {
+ return (
+ //
+ <>
+ {/*
*/}
+
+
+
+ //
+ );
+ }
+
+ return (
+
+ {isToggled ? (
+
+
+ ) : (
+
+ )}
+
+ );
+};
+
+export default FixedNav;
diff --git a/cookoff24-landing/src/components/FixedNavMask.js b/cookoff24-landing/src/components/FixedNavMask.js
new file mode 100644
index 0000000..2a33dfc
--- /dev/null
+++ b/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 (
+
+
+
+ {
+ setIsHovered(true);
+ }}
+ onMouseLeave={() => {
+ setIsHovered(false);
+ }}
+ className="h-16 w-auto sm:h-12"
+ src={cclogo}
+ alt="CC Logo"
+ />
+
+
+
+
{
+ setIsHoveredOnSmall(true);
+ }}
+ onMouseLeave={() => {
+ setIsHoveredOnSmall(false);
+ }}
+ className="absolute left-[3.7rem] bottom-40 sm:hidden"
+ >
+
+
+ );
+};
+
+export default FixedNavMask;
diff --git a/cookoff24-landing/src/components/NavbarComps/Options.js b/cookoff24-landing/src/components/NavbarComps/Options.js
new file mode 100644
index 0000000..2357906
--- /dev/null
+++ b/cookoff24-landing/src/components/NavbarComps/Options.js
@@ -0,0 +1,85 @@
+import {Link} from "react-scroll";
+import React from "react";
+
+const Options = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default Options;
diff --git a/cookoff24-landing/src/components/NavbarComps/SocialHandles.js b/cookoff24-landing/src/components/NavbarComps/SocialHandles.js
new file mode 100644
index 0000000..2cc9a13
--- /dev/null
+++ b/cookoff24-landing/src/components/NavbarComps/SocialHandles.js
@@ -0,0 +1,27 @@
+import React from "react";
+import Image from "next/image";
+import insta from "../../assets/insta.svg";
+import linkedin from "../../assets/linkedin.svg";
+import githubmark from "../../assets/githubmark.svg";
+import twitter from "../../assets/twitter.svg";
+
+const SocialHandles = () => {
+ return (
+
+ );
+};
+
+export default SocialHandles;
diff --git a/cookoff24-landing/src/components/OtherEvents.js b/cookoff24-landing/src/components/OtherEvents.js
new file mode 100644
index 0000000..051b69e
--- /dev/null
+++ b/cookoff24-landing/src/components/OtherEvents.js
@@ -0,0 +1,147 @@
+import { useState } from "react";
+import { motion } from "framer-motion";
+
+const OtherEvents = () => {
+ const [isHovered1, setIsHovered1] = useState(false);
+ const [isHovered2, setIsHovered2] = useState(false);
+ const handleHover1 = () => {
+ setIsHovered1(!isHovered1);
+ };
+ const handleHover2 = () => {
+ setIsHovered2(!isHovered2);
+ };
+ return (
+
+
+ other events
+
+
+
+ {isHovered1 ? (
+
+
+
+
+
+
+
+
+ ) : (
+
+
+
+
+ )}
+
+
+ {isHovered2 ? (
+
+
+
+
+
+
+
+
+ ) : (
+
+
+ )}
+
+
+
+ );
+};
+
+export default OtherEvents;
diff --git a/cookoff24-landing/src/components/OtherEventsMask.js b/cookoff24-landing/src/components/OtherEventsMask.js
new file mode 100644
index 0000000..cb47bef
--- /dev/null
+++ b/cookoff24-landing/src/components/OtherEventsMask.js
@@ -0,0 +1,7 @@
+const OtherEventsMask = () => {
+ return (
+
+ );
+}
+
+export default OtherEventsMask;
\ No newline at end of file
diff --git a/cookoff24-landing/src/components/Prizes.js b/cookoff24-landing/src/components/Prizes.js
new file mode 100644
index 0000000..36891bd
--- /dev/null
+++ b/cookoff24-landing/src/components/Prizes.js
@@ -0,0 +1,71 @@
+import React, { useState } from "react";
+import { motion } from "framer-motion";
+import Awards from "./PrizesComps/Awards";
+
+const Prizes = () => {
+ const [isHovered, setIsHovered] = useState(false);
+
+ const handleHover = (hoverState) => {
+ setIsHovered(hoverState);
+ };
+ return (
+
+
+ PRIZES
+
+
+
+
+
+
+
+
+
+ WOMEN
+
+
+
+ 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.
+
+
+
+
+
+ WOMEN
+
+ {/*
+ 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.
+
*/}
+
+
+
+
+
+ );
+};
+
+export default Prizes;
diff --git a/cookoff24-landing/src/components/PrizesComps/Awards.js b/cookoff24-landing/src/components/PrizesComps/Awards.js
new file mode 100644
index 0000000..eea6dfe
--- /dev/null
+++ b/cookoff24-landing/src/components/PrizesComps/Awards.js
@@ -0,0 +1,33 @@
+import React from "react";
+
+const Awards = (props) => {
+ return (
+
+ {" "}
+
+
+
+
+ {props.title}
+
+
+ {props.content}
+
+
+
+
+
+
+
+ );
+};
+
+export default Awards;
diff --git a/cookoff24-landing/src/components/PrizesMask.js b/cookoff24-landing/src/components/PrizesMask.js
new file mode 100644
index 0000000..c95e667
--- /dev/null
+++ b/cookoff24-landing/src/components/PrizesMask.js
@@ -0,0 +1,7 @@
+const PrizesMask = () => {
+ return (
+
+ );
+}
+
+export default PrizesMask;
\ No newline at end of file
diff --git a/cookoff24-landing/src/components/RegisterNow.js b/cookoff24-landing/src/components/RegisterNow.js
new file mode 100644
index 0000000..d2186f5
--- /dev/null
+++ b/cookoff24-landing/src/components/RegisterNow.js
@@ -0,0 +1,72 @@
+import Image from "next/image";
+import { motion } from "framer-motion";
+import { useState } from "react";
+import cclogo from "../assets/cclogo.svg";
+import gotoportal from "../assets/gotoportal.svg";
+import comingsoon from "../assets/comingsoon.svg";
+import useMediaQuery from "@/hooks/useMediaQuery";
+import Link from "next/link";
+
+const RegisterNow = () => {
+ const isMobile = useMediaQuery("(max-width:639px)");
+ const [isHovered, setIsHovered] = useState(false);
+ const handleHover = () => {
+ setIsHovered(!isHovered);
+ };
+ const portalVariants = {
+ hidden: { scale: 0 },
+ visible: {
+ scale: 1,
+ transition: { type: "spring", stiffness: 300, damping: 20 },
+ },
+ };
+
+ return (
+
+
+
+
+
+
+ ) : (
+
+
+
+ )}
+
+
+
+ );
+};
+
+export default RegisterNow;
diff --git a/cookoff24-landing/src/components/RegisterNowMask.js b/cookoff24-landing/src/components/RegisterNowMask.js
new file mode 100644
index 0000000..a3b811b
--- /dev/null
+++ b/cookoff24-landing/src/components/RegisterNowMask.js
@@ -0,0 +1,7 @@
+const RegisterNowMask = () => {
+ return (
+
+ );
+};
+
+export default RegisterNowMask;
diff --git a/cookoff24-landing/src/components/SVGAnimation.js b/cookoff24-landing/src/components/SVGAnimation.js
new file mode 100644
index 0000000..1b5a6ec
--- /dev/null
+++ b/cookoff24-landing/src/components/SVGAnimation.js
@@ -0,0 +1,42 @@
+import { animate, easeIn, motion, transform } from "framer-motion";
+import { useState, useEffect } from "react";
+const SVGAnimation = ({ fill, setHasClicked}) => {
+ // const eleRef = useRef(null);
+ // useEffect(() => {
+ // const clicked = (e) => {
+ // if (eleRef.current === e.target) {
+ // setHasClicked(true);
+ // }
+ // };
+ // window.addEventListener("click", clicked);
+
+ // return () => {
+ // window.removeEventListener("click", clicked);
+ // };
+ // }, []);
+ return (
+
{setHasClicked(true)}}
+ drag
+ dragConstraints={{
+ top: -10,
+ right: 10,
+ bottom: 10,
+ left: -10,
+ }}
+ >
+
+ );
+};
+
+export default SVGAnimation;
diff --git a/cookoff24-landing/src/components/SVGAnimation2.js b/cookoff24-landing/src/components/SVGAnimation2.js
new file mode 100644
index 0000000..a3f00f2
--- /dev/null
+++ b/cookoff24-landing/src/components/SVGAnimation2.js
@@ -0,0 +1,29 @@
+import { animate, easeIn, motion, transform } from "framer-motion";
+import { useState, useEffect } from "react";
+const SVGAnimation2 = ({ fill}) => {
+ return (
+
+
+ );
+};
+
+export default SVGAnimation2;
diff --git a/cookoff24-landing/src/components/Socials.js b/cookoff24-landing/src/components/Socials.js
new file mode 100644
index 0000000..b3a32fc
--- /dev/null
+++ b/cookoff24-landing/src/components/Socials.js
@@ -0,0 +1,123 @@
+import React from "react";
+import ChefCapSVG from "./ChefCapSVG";
+import { Link } from "react-scroll";
+import { motion } from "framer-motion";
+import TraingleSVG from "./TraingleSVG";
+import Image from "next/image";
+import insta from "../../public/insta.svg";
+import linkedin from "../../public/linkedin.svg";
+import githubmark from "../../public/githubmark.svg";
+import twitter from "../../public/twitter.svg";
+import useMediaQuery from "@/hooks/useMediaQuery";
+const Socials = () => {
+ const isMobile = useMediaQuery("(max-width:639px)");
+
+ return (
+
+ {/*
*/}
+
+
+
+
+
+ CODECHEF VIT
+
+
+ COOKOFF 8.0
+
+
+
+ Register
+
+
+
+
+
+
+ OTHER EVENTS
+
+
+
+
+
+ Tech Talks 4.0
+
+
+
+
+
+ {isMobile && (
+
+ )}
+
+
+
+ NAVIGATION
+
+
+
+
+
+
+
+ );
+};
+
+export default Socials;
diff --git a/cookoff24-landing/src/components/SocialsMask.js b/cookoff24-landing/src/components/SocialsMask.js
new file mode 100644
index 0000000..cfb1652
--- /dev/null
+++ b/cookoff24-landing/src/components/SocialsMask.js
@@ -0,0 +1,7 @@
+const SocialsMask = () => {
+ return (
+
+ );
+}
+
+export default SocialsMask;
\ No newline at end of file
diff --git a/cookoff24-landing/src/components/Timeline.js b/cookoff24-landing/src/components/Timeline.js
new file mode 100644
index 0000000..da99516
--- /dev/null
+++ b/cookoff24-landing/src/components/Timeline.js
@@ -0,0 +1,47 @@
+import { color, motion, easeInOut } from "framer-motion";
+
+const Timeline = () => {
+ const events = [
+ { time: "09:00 AM", event: "Event Starts" },
+ { time: "10:00 AM", event: "Placeholder" },
+ { time: "11:00 AM", event: "Placeholder" },
+ { time: "12:00 PM", event: "Placeholder" },
+ { time: "02:00 PM", event: "Event Commences" },
+ ];
+ console.log(100 / events.length);
+ return (
+
+
+ TIMELINE
+
+
+ {events.map((e, index) => {
+ return (
+
+ {e.time}
+
+ {e.event}
+
+
+ );
+ })}
+
+
+ );
+};
+
+export default Timeline;
diff --git a/cookoff24-landing/src/components/TimelineMask.js b/cookoff24-landing/src/components/TimelineMask.js
new file mode 100644
index 0000000..9b16701
--- /dev/null
+++ b/cookoff24-landing/src/components/TimelineMask.js
@@ -0,0 +1,7 @@
+const TimelineMask = () => {
+ return (
+
+ );
+}
+
+export default TimelineMask;
\ No newline at end of file
diff --git a/cookoff24-landing/src/components/TitleSVG.js b/cookoff24-landing/src/components/TitleSVG.js
new file mode 100644
index 0000000..24b6eb1
--- /dev/null
+++ b/cookoff24-landing/src/components/TitleSVG.js
@@ -0,0 +1,99 @@
+import { motion } from "framer-motion";
+
+const TitleSVG = () => {
+ return (
+
+
+
+
+
+
+
+
+ );
+};
+
+export default TitleSVG;
diff --git a/cookoff24-landing/src/components/TitleSVGMobile.js b/cookoff24-landing/src/components/TitleSVGMobile.js
new file mode 100644
index 0000000..c00e2ac
--- /dev/null
+++ b/cookoff24-landing/src/components/TitleSVGMobile.js
@@ -0,0 +1,102 @@
+import { motion } from "framer-motion";
+
+const TitleSVGMobile = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default TitleSVGMobile;
diff --git a/cookoff24-landing/src/components/TraingleSVG.js b/cookoff24-landing/src/components/TraingleSVG.js
new file mode 100644
index 0000000..bd1e40b
--- /dev/null
+++ b/cookoff24-landing/src/components/TraingleSVG.js
@@ -0,0 +1,20 @@
+const TraingleSVG = () => {
+ return (
+
+
+ );
+};
+
+export default TraingleSVG;
diff --git a/cookoff24-landing/src/components/Welcome.js b/cookoff24-landing/src/components/Welcome.js
new file mode 100644
index 0000000..09f14ca
--- /dev/null
+++ b/cookoff24-landing/src/components/Welcome.js
@@ -0,0 +1,44 @@
+import React, { useState } from "react";
+import { animate, motion } from "framer-motion";
+import useMediaQuery from "@/hooks/useMediaQuery";
+import TitleSVG from "./TitleSVG";
+import TitleSVGMobile from "./TitleSVGMobile";
+import Link from "next/link";
+
+const Welcome = () => {
+ const isMid = useMediaQuery("(max-width:1012px)");
+ console.log("isMid" + isMid);
+
+ return (
+
+ {isMid &&
}
+ {!isMid &&
}
+
+
+ Register
+
+
+
+
+ //
+ //
+ // COOK
+ // OFF
+ // {/* {isMid &&
+ // 8.0
+ //
+ //
+ //
+ );
+};
+
+export default Welcome;
diff --git a/cookoff24-landing/src/components/WelcomeMask.js b/cookoff24-landing/src/components/WelcomeMask.js
new file mode 100644
index 0000000..50a28b0
--- /dev/null
+++ b/cookoff24-landing/src/components/WelcomeMask.js
@@ -0,0 +1,26 @@
+import React from "react";
+import { useAppContext } from "@/context/appContext";
+import { motion } from "framer-motion";
+import useMousePosition from "@/utils/useMousePosition";
+
+const WelcomeMask = () => {
+ const { setIsHoveredOnSmall } = useAppContext();
+ return (
+
+
{
+ setIsHoveredOnSmall(true);
+ }}
+ onMouseLeave={() => {
+ setIsHoveredOnSmall(false);
+ }}
+ className="relative -bottom-32"
+ >
+ *CRITICS* SAY, "THE BEST THING TO HAPPEN TO HUMANKIND"
+
+
+ //
+ );
+};
+
+export default WelcomeMask;
diff --git a/cookoff24-landing/src/components/WindowMask.js b/cookoff24-landing/src/components/WindowMask.js
new file mode 100644
index 0000000..0e91cc3
--- /dev/null
+++ b/cookoff24-landing/src/components/WindowMask.js
@@ -0,0 +1,76 @@
+import React from "react";
+import { useAppContext } from "@/context/appContext";
+import { motion } from "framer-motion";
+import useMousePosition from "@/utils/useMousePosition";
+
+const WindowMask = () => {
+ const { x, y } = useMousePosition();
+ const {
+ isHovered,
+ setIsHovered,
+ isHoveredOnSmall,
+ setIsHoveredOnSmall,
+ innerHeight,
+ setInnerHeight,
+ scrollPosition,
+ setScrollPosition,
+ size,
+ } = useAppContext();
+ return (
+ //
+ //
+
+ {/*
*/}
+ {
+ setIsHoveredOnSmall(true);
+ }}
+ onMouseLeave={() => {
+ setIsHoveredOnSmall(false);
+ }}
+ className="text-lg font-normal tracking-[0.15rem]"
+ >
+ ABOUT EVENT
+
+ {
+ setIsHovered(true);
+ }}
+ onMouseLeave={() => {
+ setIsHovered(false);
+ }}
+ className="text-left text-4xl tracking-wide font-bold leading-relaxed"
+ >
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae, sed
+ illum autem perferendis, nobis dolore ad asperiores quod necessitatibus
+ minus eligendi temporibus ex, officiis consectetur provident facilis
+ fugiat sequi iusto perspiciatis beatae excepturi assumenda. Commodi non
+ at nam labore magnam, officia repudiandae. Reiciendis excepturi, sit
+ ratione minus omnis ab eos iusto ipsam alias quia?
+
+
+ );
+};
+
+export default WindowMask;
diff --git a/cookoff24-landing/src/components/faqItem.js b/cookoff24-landing/src/components/faqItem.js
new file mode 100644
index 0000000..5233fb9
--- /dev/null
+++ b/cookoff24-landing/src/components/faqItem.js
@@ -0,0 +1,81 @@
+import { easeInOut, motion } from "framer-motion";
+import { useState } from "react";
+
+const Faqs = ({ question, answer }) => {
+ const [isHovered, setIsHovered] = useState(false);
+ const handleHover = () => {
+ setIsHovered(!isHovered);
+ };
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+ {question}
+
+
+
+
+
+ {answer}
+
+
+
+
+
+ );
+};
+
+export default Faqs;
diff --git a/cookoff24-landing/src/context/appContext.js b/cookoff24-landing/src/context/appContext.js
new file mode 100644
index 0000000..0b4fd16
--- /dev/null
+++ b/cookoff24-landing/src/context/appContext.js
@@ -0,0 +1,29 @@
+import React, { createContext, useContext, useState } from 'react';
+
+const AppContext = createContext();
+
+export const AppProvider = ({ children }) => {
+ const [isHovered, setIsHovered] = useState(false);
+ const [isHoveredOnSmall, setIsHoveredOnSmall] = useState(false);
+ const [innerHeight, setInnerHeight] = useState(0);
+ const [scrollPosition, setScrollPosition] = useState(0);
+ const size = isHovered ? 400 : isHoveredOnSmall ? 150 : 40;
+
+ const contextValues = {
+ isHovered,
+ setIsHovered,
+ isHoveredOnSmall,
+ setIsHoveredOnSmall,
+ innerHeight,
+ setInnerHeight,
+ scrollPosition,
+ setScrollPosition,
+ size,
+ };
+
+ return {children} ;
+};
+
+export const useAppContext = () => {
+ return useContext(AppContext);
+};
diff --git a/cookoff24-landing/src/hooks/useMediaQuery.jsx b/cookoff24-landing/src/hooks/useMediaQuery.jsx
new file mode 100644
index 0000000..0fb195e
--- /dev/null
+++ b/cookoff24-landing/src/hooks/useMediaQuery.jsx
@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react";
+const useMediaQuery = (query) => {
+ const [match, setMatch] = useState(false);
+
+ useEffect(() => {
+ const media = window.matchMedia(query);
+
+ if (match !== media.matches) {
+ setMatch(media.matches);
+ }
+
+ const listener = () => setMatch(media.matches);
+ window.addEventListener("resize", listener);
+
+ return () => {
+ window.removeEventListener("resize", listener);
+ };
+ }, [query, match]);
+
+ return match;
+};
+
+export default useMediaQuery;
diff --git a/cookoff24-landing/src/pages/_app.js b/cookoff24-landing/src/pages/_app.js
index 2300201..01fc090 100644
--- a/cookoff24-landing/src/pages/_app.js
+++ b/cookoff24-landing/src/pages/_app.js
@@ -1,5 +1,10 @@
-import '@/styles/globals.css'
+import "@/styles/globals.css";
+import { AppProvider } from "../context/appContext";
export default function App({ Component, pageProps }) {
- return
+
+ );
}
diff --git a/cookoff24-landing/src/pages/index.js b/cookoff24-landing/src/pages/index.js
index 2ab84cf..d1b987e 100644
--- a/cookoff24-landing/src/pages/index.js
+++ b/cookoff24-landing/src/pages/index.js
@@ -1,118 +1,170 @@
-import Image from 'next/image'
-import { Inter } from 'next/font/google'
+import React, { useEffect } from "react";
+import Head from "next/head";
+import { useState, useRef } from "react";
+import { motion } from "framer-motion";
+import { Inter } from "next/font/google";
+import SVGAnimation from "@/components/SVGAnimation";
+import SVGAnimation2 from "@/components/SVGAnimation2";
+import useMediaQuery from "@/hooks/useMediaQuery";
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ["latin"] });
+import Link from "next/link";
-export default function Home() {
- return (
-
-
-
- Get started by editing
- src/pages/index.js
-
-
-
-
+ // I want to make a state to store the current position of cursor
+ const [cursorPos, setCursorPos] = useState({ x: 0, y: 0 });
+ useEffect(() => {
+ const mouseMove = (e) => {
+ setCursorPos({ x: e.clientX, y: e.clientY });
+ };
+ window.addEventListener("mousemove", mouseMove);
+
+ return () => {
+ window.removeEventListener("mousemove", mouseMove);
+ };
+ }, []);
+ const cursorVariants = {
+ default: {
+ x: cursorPos.x - 20,
+ y: cursorPos.y - 20,
+ },
+ notDefault: {
+ x: cursorPos.x - 20,
+ y: cursorPos.y - 20,
+ scale: 5,
+ mixBlendMode: "difference",
+ },
+ notDefaultButBigger: {
+ x: cursorPos.x - 20,
+ y: cursorPos.y - 20,
+ scale: 750,
+ mixBlendMode: "difference",
+ },
+ };
+
+ /*Icon Animation*/
+
+ const [fill, setFill] = useState("#B7AB98");
+ const [currentVaraint, setCurrentVariant] = useState("default");
+ // const [curDem, setCurDem] = useState({w:10,h:10});
+ const onIconEnter = () => {
+ setFill("#FFFFFF");
+ // setCurDem({w:20, h:20})
+ setCurrentVariant("notDefault");
+ };
+ const onIconLeave = () => {
+ setFill("#B7AB98");
+ // setCurDem({w:10, h:10})
+ setCurrentVariant("default");
+ };
-
-
-
- Docs{' '}
-
- ->
-
-
-
- Find in-depth information about Next.js features and API.
-
-
+ /*Chef Drag Animation */
+ const [hasClicked, setHasClicked] = useState(false);
+ const eleRef = useRef(null);
+ useEffect(() => {
+ const clicked = (e) => {
+ if (eleRef.current === e.target) {
+ setHasClicked(true);
+ }
+ };
+ window.addEventListener("click", clicked);
-
-
- Learn{' '}
-
- ->
-
-
-
- Learn about Next.js in an interactive course with quizzes!
-
-
+ return () => {
+ window.removeEventListener("click", clicked);
+ };
+ }, []);
+ console.log(hasClicked);
-
-
- Templates{' '}
-
- ->
-
-
-
- Discover and deploy boilerplate example Next.js projects.
-
-
+ return (
+ <>
+
+
Cook-off 8.0
+
+
+
+ {/* body container */}
+
+ {isDesktop && (
+
{
+ setCurrentVariant("notDefault");
+ }}
+ onMouseLeave={() => {
+ setCurrentVariant("default");
+ }}
+ >
+ {hasClicked
+ ? "LOOK HOW THEY BUTCHERED MY BOY"
+ : "DO NOT DARE DRAG OUR CHEF"}
+
+ )}
+ {/* main flex */}
+
+
+ {/* cursor div */}
+ {isDesktop && (
+
+ )}
+ {isDesktop && (
+
{
+ setCurrentVariant("notDefault");
+ }}
+ onMouseLeave={() => {
+ setCurrentVariant("default");
+ }}
+ >
+ {hasClicked
+ ? "LOOK HOW THEY BUTCHERED MY BOY"
+ : "DO NOT DARE DRAG OUR CHEF"}
+
+ )}
-
- )
-}
+
+ );
+};
+
+export default Index;
diff --git a/cookoff24-landing/src/pages/landing.js b/cookoff24-landing/src/pages/landing.js
new file mode 100644
index 0000000..22052f2
--- /dev/null
+++ b/cookoff24-landing/src/pages/landing.js
@@ -0,0 +1,93 @@
+"use client";
+import useMousePosition from "../utils/useMousePosition";
+import { Inter } from "next/font/google";
+import FixedNav from "@/components/FixedNav";
+import About from "@/components/About";
+import Timeline from "@/components/Timeline";
+import Countdown from "@/components/Countdown";
+import Prizes from "@/components/Prizes";
+import Faqs from "@/components/Faqs";
+import RegisterNow from "@/components/RegisterNow";
+import OtherEvents from "@/components/OtherEvents";
+import Socials from "@/components/Socials";
+import Welcome from "@/components/Welcome";
+import { useAppContext } from "@/context/appContext";
+// import styles from "../styles/page.module.css";
+import { motion } from "framer-motion";
+import { useEffect } from "react";
+import AboutMask from "@/components/AboutMask";
+import WelcomeMask from "@/components/WelcomeMask";
+import CountdownMask from "@/components/CountdownMask";
+import FillerMask from "@/components/FillerMask";
+import FillerMask2 from "@/components/FillerMask2";
+import useMediaQuery from "@/hooks/useMediaQuery";
+import Head from "next/head";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export default function Home() {
+ const { setInnerHeight, scrollPosition, setScrollPosition, size } =
+ useAppContext();
+
+ const isNotMobile = !useMediaQuery("(max-width:632px)");
+
+ useEffect(() => {
+ const handleScroll = () => {
+ setScrollPosition(window.scrollY || window.pageYOffset);
+ };
+
+ window.addEventListener("scroll", handleScroll);
+ return () => {
+ window.removeEventListener("scroll", handleScroll);
+ };
+ });
+ useEffect(() => {
+ setInnerHeight(window.innerHeight);
+ });
+ const { x, y } = useMousePosition();
+
+ return (
+ <>
+
+
Cook-off 8.0
+
+
+
+
+
+ {isNotMobile && (
+
+
+ )}
+
+
+ );
+}
diff --git a/cookoff24-landing/src/styles/globals.css b/cookoff24-landing/src/styles/globals.css
index fd81e88..01f41d3 100644
--- a/cookoff24-landing/src/styles/globals.css
+++ b/cookoff24-landing/src/styles/globals.css
@@ -2,26 +2,95 @@
@tailwind components;
@tailwind utilities;
-:root {
- --foreground-rgb: 0, 0, 0;
- --background-start-rgb: 214, 219, 220;
- --background-end-rgb: 255, 255, 255;
+body {
+ background-color: #0D0D0D;
}
-@media (prefers-color-scheme: dark) {
- :root {
- --foreground-rgb: 255, 255, 255;
- --background-start-rgb: 0, 0, 0;
- --background-end-rgb: 0, 0, 0;
- }
+::-webkit-scrollbar {
+ width: 0rem;
+
}
-body {
- color: rgb(var(--foreground-rgb));
- background: linear-gradient(
- to bottom,
- transparent,
- rgb(var(--background-end-rgb))
- )
- rgb(var(--background-start-rgb));
+::-webkit-scrollbar-track {
+
+ border-radius: 0rem;
+
+}
+
+.no-selection {
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.one {
+ -webkit-mask-image: url(../assets/mask.svg);
+ mask-image: url(../assets/mask.svg);
+
+ -webkit-mask-poisition: top left;
+ mask-position: top left;
+
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+
+ -webkit-mask-size: 250px 250px;
+ mask-size: 250px 250px
+}
+
+.container {
+ position: relative;
+ overflow: hidden;
+}
+
+.overlay {
+ position: absolute;
+ top: 50%;
+ left: 0;
+ width: 100%;
+ height: 0;
+ background-color: #EB5939;
+ opacity: 0;
+ transform: translateY(-50%);
+ transition: opacity 0.5s, height 0.5s;
}
+
+.text {
+ position: relative;
+ z-index: 1;
+ /* padding: 20px;
+ font-size: 24px; Set your desired font size */
+ transition: color 0.5s;
+}
+
+.container:hover .overlay {
+ opacity: 1;
+ height: 100%;
+}
+
+.container:hover .text {
+ color: #0D0D0D;
+}
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@700&family=Roboto:wght@700&display=swap');
+
+@font-face {
+ font-family: Proxima;
+ src: url(./../../public/ProximaNovaFont.otf);
+}
+
+#proxima {
+ font-family: Proxima;
+}
+
+#roboto {
+ font-family: Roboto;
+}
+
+@font-face {
+ font-family: Proxima;
+ src: url(./../../public/proximaBold.otf);
+}
+
+#proximaBold {
+ font-family: Proxima;
+}
\ No newline at end of file
diff --git a/cookoff24-landing/src/styles/page.module.scss b/cookoff24-landing/src/styles/page.module.scss
new file mode 100644
index 0000000..9ce2f34
--- /dev/null
+++ b/cookoff24-landing/src/styles/page.module.scss
@@ -0,0 +1,28 @@
+// .main {
+// height: 100vh;
+// }
+
+// .main .mask,
+// .main .body {
+
+// color: black;
+// cursor: default;
+// }
+
+
+// .main .mask {
+// position: fixed;
+// pointer-events: none;
+// }
+
+// .main .mask {
+// mask-image: url("../assets/mask.svg");
+// mask-repeat: no-repeat;
+// mask-size: 240px;
+// width: 100%;
+// height: 100%;
+// background: #eb5939;
+// color:black
+// /* z-index: -1; */
+// }
+
diff --git a/cookoff24-landing/src/utils/useMousePosition.js b/cookoff24-landing/src/utils/useMousePosition.js
new file mode 100644
index 0000000..53df7b3
--- /dev/null
+++ b/cookoff24-landing/src/utils/useMousePosition.js
@@ -0,0 +1,19 @@
+import { useState, useEffect } from "react";
+
+const useMousePosition = () => {
+ const [mousePosition, setMousePosition] = useState({ x: null, y: null });
+
+ const updateMousePosition = e => {
+ setMousePosition({ x: e.clientX, y: e.clientY });
+ };
+
+ useEffect(() => {
+ window.addEventListener("mousemove", updateMousePosition);
+
+ return () => window.removeEventListener("mousemove", updateMousePosition);
+ }, []);
+
+ return mousePosition;
+};
+
+export default useMousePosition;
\ No newline at end of file
diff --git a/cookoff24-landing/tailwind.config.js b/cookoff24-landing/tailwind.config.js
index d53b2ea..c44e07a 100644
--- a/cookoff24-landing/tailwind.config.js
+++ b/cookoff24-landing/tailwind.config.js
@@ -1,4 +1,3 @@
-/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
@@ -6,12 +5,29 @@ module.exports = {
'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
+ screens: {
+ '2xl': {'max': '1535px'},
+ 'xl': {'max': '1279px'},
+ 'lg': {'max': '1100px'},
+ 'mdl':{'max': '830px'},
+ 'md': {'max': '767px'},
+ 'sm': {'max': '639px'},
+ 'xs': {'max': '480px'},
+ },
extend: {
+ colors: {
+ orange: "#EB5939",
+ grey: "#B7AB98",
+ "dark-grey": "#212121",
+ black: "#0D0D0D",
+ },
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
- 'gradient-conic':
- 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+ 'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
},
+ content:{
+ ChefCap: "url('../assets/ChefCap.svg')"
+ }
},
},
plugins: [],
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..b899167
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+ "name": "cookoff24-landing",
+ "lockfileVersion": 3,
+ "requires": true,
+ "packages": {}
+}
+ Tech Talks 4.0 +
+ ++ ClueMinati +
+ ++ Portal +
+ ++ About +
+ ++ Timeline +
+ ++ FAQ's +
+ +} */} + // + // 8.0 + // + //
{ + setIsHoveredOnSmall(true); + }} + onMouseLeave={() => { + setIsHoveredOnSmall(false); + }} + className="relative -bottom-32" + > + *CRITICS* SAY, "THE BEST THING TO HAPPEN TO HUMANKIND" +
+{ + setIsHoveredOnSmall(true); + }} + onMouseLeave={() => { + setIsHoveredOnSmall(false); + }} + className="text-lg font-normal tracking-[0.15rem]" + > + ABOUT EVENT +
+{ + setIsHovered(true); + }} + onMouseLeave={() => { + setIsHovered(false); + }} + className="text-left text-4xl tracking-wide font-bold leading-relaxed" + > + Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae, sed + illum autem perferendis, nobis dolore ad asperiores quod necessitatibus + minus eligendi temporibus ex, officiis consectetur provident facilis + fugiat sequi iusto perspiciatis beatae excepturi assumenda. Commodi non + at nam labore magnam, officia repudiandae. Reiciendis excepturi, sit + ratione minus omnis ab eos iusto ipsam alias quia? +
+- Get started by editing -
-src/pages/index.js-- Docs{' '} - - -> - -
-- Find in-depth information about Next.js features and API. -
- + /*Chef Drag Animation */ + const [hasClicked, setHasClicked] = useState(false); + const eleRef = useRef(null); + useEffect(() => { + const clicked = (e) => { + if (eleRef.current === e.target) { + setHasClicked(true); + } + }; + window.addEventListener("click", clicked); - -- Learn{' '} - - -> - -
-- Learn about Next.js in an interactive course with quizzes! -
- + return () => { + window.removeEventListener("click", clicked); + }; + }, []); + console.log(hasClicked); - -- Templates{' '} - - -> - -
-- Discover and deploy boilerplate example Next.js projects. -
- + return ( + <> + +- Deploy{' '} - - -> - -
-- Instantly deploy your Next.js site to a shareable URL with Vercel. -
- + {/* button */} +