Merge branch 'development' into feat/development/21-registerNow

next.config.mjs

@@ -1,14 +1,14 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  async redirects() {
-    return [
-      {
-        source: "/",
-        destination: "/underdev",
-        permanent: false,
-      },
-    ];
-  },
+  // async redirects() {
+  //   return [
+  //     {
+  //       source: "/",
+  //       destination: "/underdev",
+  //       permanent: false,
+  //     },
+  //   ];
+  // },
 };
 
 export default nextConfig;

src/app/(client)/(pages)/login/page.tsx

@@ -0,0 +1,110 @@
+"use client";
+import Container from "@/components/layout/Container";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import Image from "next/image";
+import Link from "next/link";
+
+const page = () => {
+  return (
+    <div className="h-[105vh] sm:h-[115vh] md:h-[120vh] relative">
+      <Image
+        alt="Mountains"
+        src="/assets/bg-login-img.png"
+        objectFit="cover"
+        layout="fill"
+      />
+
+      <Container>
+        <div className="w-full h-screen pt-[0%] flex justify-center items-center">
+          <div className="border-4 border-[#A66224] w-[90%] sm:w-[80%] md:w-[50%] lg:w-[40%] xl:w[30%] 2xl:w-[30%] h-auto p-[10px_0px_50px_0px] drop-shadow-lg shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] bg-[#FEF3C7] flex flex-col items-center">
+            <div className="w-[10px] h-[10px] bg-[#A66224] absolute left-0 top-0 ml-1 mt-1 drop-shadow-lg shadow-[3px_3px_0px_0px_rgba(0,0,0,1)] "></div>
+            <div className="w-[10px] h-[10px] bg-[#A66224] absolute right-0 top-0 mr-1 mt-1 drop-shadow-lg shadow-[3px_3px_0px_0px_rgba(0,0,0,1)]"></div>
+            <div className="w-[10px] h-[10px] bg-[#A66224] absolute bottom-0 left-0 mb-1 ml-1 drop-shadow-lg shadow-[3px_3px_0px_0px_rgba(0,0,0,1)]"></div>
+            <div className="w-[10px] h-[10px] bg-[#A66224] absolute bottom-0 right-0 mb-1 mr-1 drop-shadow-lg shadow-[3px_3px_0px_0px_rgba(0,0,0,1)]"></div>
+            <h1
+              className="text-5xl text-center text-[#FEF3C7]"
+              style={{
+                WebkitTextStroke: "2px #5A270B",
+                textShadow:
+                  "4px 4px 0 #78350f, -4px -4px 0 #FEF3C7, 4px -4px 0 #FEF3C7, -4px 4px 0 #FEF3C7",
+              }}
+            >
+              LET&apos;S GO
+            </h1>
+            <Input
+              className=" transition duration-300 text-[20px] placeholder:text-[#5A270B] text-[#5A270B] mt-5 bg-[#FEF3C7] w-[80%] sm:w-[70%] h-[12%] border-4 border-[#A66224]  drop-shadow-lg hover:shadow-[0px_0px_0px_0px_rgba(0,0,0,0)]  shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] rounded-none "
+              type="email"
+              placeholder="TEAM EMAIL*"
+            />
+            <Input
+              className="transition duration-300 text-[20px] placeholder:text-[#5A270B]  text-[#5A270B] mt-5 bg-[#FEF3C7] w-[80%]  sm:w-[70%] h-[12%] border-4 border-[#A66224]  drop-shadow-lg hover:shadow-[0px_0px_0px_0px_rgba(0,0,0,0)] shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] rounded-none "
+              type="email"
+              placeholder="PASSWORD*"
+            />
+
+            <div className="flex text-[#5A270B] my-9 px-3">
+              <center>
+                <h1>
+                  Forget password?{" "}
+                  <Link
+                    href="/"
+                    className="underline cursor-pointer hover:text-[#A66224] transition duration-200 active:text-[#A66224] "
+                  >
+                    Get a new one
+                  </Link>
+                </h1>
+              </center>
+            </div>
+            <Button
+              className="mt-5"
+              onClick={() => console.log("Hello")}
+              loading={false}
+            >
+              PLAY
+            </Button>
+          </div>
+        </div>
+      </Container>
+      <div className="w-[100%]  h-auto absolute bottom-0">
+        <div className="flex  justify-between">
+          <Image
+            src="/assets/item-1.png"
+            alt="item-1"
+            width={50}
+            height={100}
+            className="w-150  ml-10 left-0"
+          />
+          <div className="flex">
+            <Image
+              src="/assets/axe-2.png"
+              alt="item-1"
+              width={50}
+              height={100}
+              className="w-150 mr-5 sm:mr-20 "
+            />
+
+            <Image
+              src="/assets/bush-1.png"
+              alt="item-1"
+              width={80}
+              height={50}
+              className="w-150 mr-0 hidden sm:block md:mr-20 "
+            />
+          </div>
+        </div>
+        <div className="">
+          <Image
+            src="/assets/login-floor.png"
+            alt="login floor"
+            width={6000}
+            height={100}
+            className=" w-full h-30 object-cover"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default page;

src/app/(client)/(pages)/underdev/_components/countdown.tsx

@@ -0,0 +1,81 @@
+import React, { useState, useEffect } from 'react';
+
+const Countdown = () => {
+  const calculateTimeLeft = () => {
+    const eventDate = new Date('2024-05-22T09:00:00').getTime();
+    const currentTime = new Date().getTime();
+    const difference = eventDate - currentTime;
+
+    if (difference > 0) {
+      return {
+        days: String(Math.floor(difference / (1000 * 60 * 60 * 24))).padStart(2, '0'),
+        hours: String(Math.floor((difference / (1000 * 60 * 60)) % 24)).padStart(2, '0'),
+        minutes: String(Math.floor((difference / (1000 * 60)) % 60)).padStart(2, '0'),
+        seconds: String(Math.floor((difference / 1000) % 60)).padStart(2, '0')
+      };
+    } else {
+      return {
+        days: '00',
+        hours: '00',
+        minutes: '00',
+        seconds: '00'
+      };
+    }
+  };
+
+  // Initialize state with calculated time left
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
+
+  useEffect(() => {
+    // Update time left every second
+    const timer = setInterval(() => {
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
+
+    // Clear the interval when component unmounts
+    return () => clearInterval(timer);
+  }, []); // Ensure useEffect runs only once
+
+  return (
+    <div className="countdown justify-center flex mt-10 mb-10">
+      <div className="countdown-item-wrapper relative flex flex-col items-center mr-6">
+        <div className="countdown-item relative">
+          <img src="/assets/tile.png" alt="Tile" className="w-16 h-16 sm:w-24 sm:h-24 object-cover" />
+          <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-amber-100 text-3xl sm:text-5xl md:text-6xl text-center mt-4">
+            <span style={{ position: 'relative', bottom: '-0.1rem' }}>{timeLeft.days}</span>
+            <div className="text-amber-100 text-xs sm:text-lg md:text-xl mb-10  shadow-lg" style={{ position: 'relative', top: '-0.4rem' }}>Days</div>
+          </div>
+        </div>
+      </div>
+      <div className="countdown-item-wrapper relative flex flex-col items-center mr-6">
+        <div className="countdown-item relative">
+          <img src="/assets/tile.png" alt="Tile" className="w-16 h-16 sm:w-24 sm:h-24 object-cover" />
+          <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-amber-100 text-3xl sm:text-5xl md:text-6xl text-center mt-4">
+            <span style={{ position: 'relative', bottom: '-0.1rem' }}>{timeLeft.hours}</span>
+            <div className="text-amber-100 text-xs sm:text-lg md:text-xl mb-10  shadow-lg" style={{ position: 'relative', top: '-0.4rem' }}>Hours</div>
+          </div>
+        </div>
+      </div>
+      <div className="countdown-item-wrapper relative flex flex-col items-center mr-6">
+        <div className="countdown-item relative">
+          <img src="/assets/tile.png" alt="Tile" className="w-16 h-16 sm:w-24 sm:h-24 object-cover" />
+          <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-amber-100 text-3xl sm:text-5xl md:text-6xl text-center mt-4">
+            <span style={{ position: 'relative', bottom: '-0.1rem' }}>{timeLeft.minutes}</span>
+            <div className="text-amber-100 text-xs sm:text-lg md:text-xl mb-10  shadow-lg" style={{ position: 'relative', top: '-0.4rem' }}>Minutes</div>
+          </div>
+        </div>
+      </div>
+      <div className="countdown-item-wrapper relative flex flex-col items-center">
+        <div className="countdown-item relative">
+          <img src="/assets/tile.png" alt="Tile" className="w-16 h-16 sm:w-24 sm:h-24 object-cover" />
+          <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-amber-100 text-3xl sm:text-5xl md:text-6xl text-center mt-4">
+            <span style={{ position: 'relative', bottom: '-0.1rem' }}>{timeLeft.seconds}</span>
+            <div className="text-amber-100 text-xs sm:text-lg md:text-lg mb-10 shadow-lg" style={{ position: 'relative', top: '-0.4rem' }}>Seconds</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Countdown;

src/app/(client)/(pages)/underdev/page.tsx

@@ -1,6 +1,7 @@
 import Image from "next/image";
 import EventMarquee from "./_components/marquee";
 import QuestionBox from "./_components/question-box";
+import HeroSection from "../../../../components/landing/hero";
 
 export default function Page() {
   return (
@@ -31,6 +32,7 @@ export default function Page() {
         </h1>
         <QuestionBox />
       </div>
+      <HeroSection/>
     </div>
   );
 }

src/app/page.tsx

@@ -1,15 +1,19 @@
 import ExampleCard from "@/components/cards/ExampleCard";
 import RegisterNowCard from "@/components/cards/registerNowCard";
 import ExampleForm from "@/components/forms/ExampleForm";
+import EventDetails from "@/components/landing/eventDetails";
+import HeroSection from "@/components/landing/hero";
 
-export default function Home() {
+export default function Home() {  
   return (
     <div>
       <div className="flex flex-col h-screen justify-center items-center gap-10">
         <ExampleForm />
         <ExampleCard />
       </div>
-      <div className="hidden md:block">
+        <HeroSection />
+        <EventDetails />
+        <div className="hidden md:block">
         <RegisterNowCard />
       </div>
     </div>

src/components/landing/eventDetails.tsx

@@ -0,0 +1,75 @@
+'use client';
+import Image from 'next/image';
+import { useEffect, useState } from 'react';
+import CoinsRow from '../ui/coins-line';
+import EventDetailsMarquee from '../ui/marquee';
+
+export default function EventDetails() {
+    const [isSmallScreen, setIsSmallScreen] = useState(false);
+
+    useEffect(() => {
+        const handleResize = () => {
+            setIsSmallScreen(window.innerWidth < 1200);
+        };
+
+        handleResize();
+
+        window.addEventListener('resize', handleResize);
+
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+
+    const coinCenterCount = isSmallScreen ? 3 : 5;
+    const coinSideCount = isSmallScreen ? 3 : 6;
+
+    // Set image dimensions based on screen size
+    const imageWidth = isSmallScreen ? 200 : 350;
+    const imageHeight = isSmallScreen ? 250 : 400;
+
+    return (
+        <div className="w-full min-h-full bg-slate-900 relative flex flex-col items-center pt-16 pb-16">
+            <EventDetailsMarquee />
+            <div className="w-full flex flex-col md:flex-row justify-center items-center pt-36 px-2">
+                <div className="flex flex-col items-center md:items-start gap-8 pr-12 pl-12">
+                    <Image
+                        alt="eventDetails"
+                        src="/assets/eventDetails.png"
+                        width={imageWidth}
+                        height={imageHeight}
+                    />
+                </div>
+                <div className="flex flex-col gap-6 items-center md:items-start pr-12 pl-12">
+                    <h1 className="text-8xl leading-none text-center md:text-left">
+                        <span className="text-white">WHAT IS</span>
+                        <span className="block -mt-6 text-amber-400">Techie Sleuths?</span>
+                    </h1>
+                    <p
+                        className="text-lg text-white font-mono leading-loose text-center md:text-left"
+                        style={{
+                        textShadow: '0 0 12px rgba(255, 255, 255, 0.49)',
+                        letterSpacing: '3px',
+                        }}
+                    >
+                        Lorem ipsum dolor sit amet, consectetur{' '}
+                        <span className="text-amber-400">adipiscing</span>
+                        <br />
+                        elit. Nunc vulputate libero et velit interdum, ac
+                        <br />
+                        aliquet odio mattis. <span className="text-amber-400">Class</span> aptent taciti sociosqu
+                        <br />
+                        ad litora torquent per conubia nostr!
+                    </p>
+                    <p className="text-3xl text-white cursor-pointer flex items-center text-center md:text-left">
+                        View past events{' '}
+                        <span className="ml-2">{'>'}</span>
+                    </p>
+                </div>
+            </div>
+            <div className="pt-36 justify-center">
+                <CoinsRow centerCount={coinCenterCount} sideCount={coinSideCount} />
+            </div>
+        </div>
+    );
+}

src/components/landing/hero.tsx

@@ -0,0 +1,45 @@
+'use client'
+import { createContext } from 'react'
+import { Button } from "@/components/ui/button";
+import Image from "next/image";
+import Countdown from '@/app/(client)/(pages)/underdev/_components/countdown';
+
+export default function HeroSection() {
+    return (
+        <div className="w-full min-h-full relative">
+            <div className="absolute inset-0 bg-slate-900">
+                <Image
+                    alt="Mountains"
+                    src="/assets/bg-img.webp"
+                    layout="fill"
+                    objectFit="cover"
+                />
+            </div>
+            <div className="relative z-10 hero-section flex justify-center items-center flex-col">
+            <div className="logo mt-10 mb-5 sm:mt-20 sm:mb-10 md:w-500 md:h-500">
+                    <Image
+                        alt="Logo"
+                        src="/assets/logo (with year) 1.png" 
+                        width={300}
+                        height={300}
+                    />
+                </div>
+                <Countdown/>
+
+                <h1 className="text-black font-bold mb-4 text-center text-2xl md:text-3xl" style={{ textShadow: "2px 2px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff" }}>
+                    most awaited puzzle solving game.<br/> this time, <span className="text-blue-500">it’s different!</span>
+                </h1>
+
+                <div className="flex min-h-full items-center sm:flex-row sm:items-center gap-3 mb-10">
+                    <Button variant="default" size="lg">COMMING SOON !!!</Button>
+                        <Image
+                            alt="Logo"
+                            src="/assets/question-box.png" 
+                            width={45}
+                            height={45}
+                        />
+                </div>
+            </div>
+        </div>
+    );
+}