Merge pull request #12 from Gaurav-Choudhary2113/test

fix: timeline update, Masking on startpage now works

clueminati24-landing/.eslintrc.json

@@ -1,3 +1,3 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": ["next/babel", "next/core-web-vitals"]
 }

clueminati24-landing/next.config.js

@@ -1,6 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-}
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;

clueminati24-landing/src/components/About.js

@@ -19,7 +19,7 @@ const About = () => {
       <div className="body mx-[13%] md:mx-[10%] flex flex-col justify-center items-stretch gap-[8rem] py-16 text-grey">
         <p
           id="proxima"
-          className="text-justify text-4xl tracking-wide font-bold leading-[1.5] lg:text-1xl lg:tracking-wide lg:font-semibold sm:text-lg sm:tracking-wide sm:font-semibold"
+          className="text-justify text-4xl tracking-wide font-bold leading-[1.5] lg:text-xl lg:tracking-wide lg:font-semibold sm:text-lg sm:tracking-wide sm:font-semibold"
         >
           Welcome to <span className="text-green">Clueminati</span> – the
           ultimate fusion of intellect, technology, and adventure! Your chance

clueminati24-landing/src/components/Countdown.js

@@ -2,7 +2,7 @@ import React from "react";
 import { useState, useEffect } from "react";
 import { motion } from "framer-motion";
 const Countdown = () => {
-  const timeOfEvent = new Date(2023, 8, 24, 7, 0);
+  const timeOfEvent = new Date(2023, 8, 23, 8, 0);
   const [countdown, setCountdown] = useState({ days: 0, hours: 0, minutes: 0 });
   const [isHovered1, setIsHovered1] = useState(false);
   const [isHovered2, setIsHovered2] = useState(false);

clueminati24-landing/src/components/Timeline.js

@@ -1,14 +1,5 @@
-import { color, motion, easeInOut } from "framer-motion";
-
+import Timecontent from "./TimelineComp/Timecontent";
 const Timeline = () => {
-  const events = [
-    { time: "Coming Soon...", event: "" },
-    { time: "Coming Soon...", event: "" },
-    { time: "Coming Soon...", event: "" },
-    { time: "Coming Soon...", event: "" },
-    { time: "Coming Soon...", event: "" },
-  ];
-  console.log(100 / events.length);
   return (
     <div id="timeline" className="h-[100vh] md:h-[70vh] w-[100vw] relative">
       <div
@@ -17,39 +8,13 @@ const Timeline = () => {
       >
         TIMELINE
       </div>
-      <div className="flex w-full h-full justify-center items-center pt-20">
-        <div
-          id="aclonica"
-          className="flex flex-col h-[65%] mt-10 text-grey text-6xl md:text-4xl"
-        >
-          Coming Soon...
-        </div>
+      <div className="my-14">
+        <Timecontent title="08:00 AM" content="Team formation & Registration" />
+        <Timecontent title="08:30 AM" content="Explanation of GamePlay" />
+        <Timecontent title="08:45 AM" content="Clueminati Begins" />
+        <Timecontent title="11:45 AM" content="Clueminati Ends" />
+        <Timecontent title="11:45 AM" content="Prize Distribution" />
       </div>
-      {/* <div id="aclonica" className="flex md:h-[60vh] flex-col h-[65%] mt-10">
-        {events.map((e, index) => {
-          return (
-            <motion.div
-              key={index}
-              // className={`flex ml-40 h-[20%]`}
-              className={`flex justify-start mx-auto sm:ml-2 sm:gap-[20vw] sm:text-lg h-[${
-                100 / events.length
-              }%] border-b-[2px] border-neutral-600 w-[75%] md:w-full gap-44 text-grey text-3xl font-semibold z-20 px-5`}
-              whileHover={{
-                backgroundColor: "#9BD129",
-                color: "rgb(13,13,13)",
-              }}
-              whileTap={{ backgroundColor: "#9BD129", color: "rgb(13,13,13)" }}
-              transition={{ duration: 0.01, ease: "easeInOut" }}
-            >
-              <div className=" flex flex-col justify-center">{e.time}</div>
-              <div className="flex flex-col justify-center pr-10">
-                {e.event}
-              </div>
-            </motion.div>
-          );
-        })}
-      
-      </div> */}
     </div>
   );
 };

clueminati24-landing/src/components/TimelineComp/Timecontent.js

@@ -0,0 +1,40 @@
+import React from "react";
+import { motion } from "framer-motion";
+import { useState } from "react";
+
+const Timecontent = (props) => {
+  const [isHovered, setIsHovered] = useState(false);
+  const handleHover = () => {
+    setIsHovered(!isHovered);
+  };
+  return (
+    <div>
+      <motion.div
+        id="aclonica"
+        onMouseEnter={handleHover}
+        onMouseLeave={handleHover}
+        className={`${
+          isHovered
+            ? `bg-green duration-300 text-[#000000]]`
+            : `bg-transparent duration-300 text-[#b7ab98]`
+        }`}
+      >
+        <div className="mx-[13%] md:mx-[10%] w-[100vw] ">
+          <div className="text h-[120px] md:h-[80px] w-[100vw] flex justify-evenly items-center">
+            <p className="text-4xl lg:text-3xl md:text-2xl sm:text-base font-bold tracking-wide w-[30%] justify-self-start">
+              {props.title}
+            </p>
+            <p className="w-[50%] sm:w-[40%] mx-[13%] md:mx-[10%] text-3xl tracking-wide items-center font-bold md:text-lg lg:text-[25px] sm:text-sm md:tracking-tighter ">
+              {props.content}
+            </p>
+          </div>
+        </div>
+        <div className="flex w-full justify-center">
+          <div className="flex border-b-[2px] border-[#AA9E8B] opacity-50 w-[75%] md:w-full" />
+        </div>
+      </motion.div>
+    </div>
+  );
+};
+
+export default Timecontent;

clueminati24-landing/src/pages/index.js

@@ -138,7 +138,7 @@ const Index = () => {
         {/* cursor div */}
         {isDesktop && (
           <motion.div
-            className="bg-orange w-10 h-10 fixed rounded-full left-0 top-0 -z-10"
+            className="bg-green w-10 h-10 fixed rounded-full left-0 top-0 -z-10"
             variants={cursorVariants}
             // animate="default"
             animate={currentVaraint}

clueminati24-landing/src/pages/landing.js

@@ -7,7 +7,7 @@ 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";
@@ -75,7 +75,6 @@ export default function Home() {
           <Welcome />
           <About />
           <Timeline />
-          <RegisterNow />
           <Prizes />
           <Countdown />
           <OtherEvents />