From 072f3a160e7d2037527ca014ce27e1e66c706384 Mon Sep 17 00:00:00 2001
From: Prateek Jha <prateekjha1204@gmail.com>
Date: Fri, 9 Feb 2024 00:26:49 +0530
Subject: [PATCH 1/3] added loader

---
 app/about/page.jsx                 |   6 +-
 app/page.js                        |   4 +
 components/Loader/index.jsx        |  19 +++
 components/Loader/index.module.css | 192 +++++++++++++++++++++++++++++
 4 files changed, 219 insertions(+), 2 deletions(-)
 create mode 100644 components/Loader/index.jsx
 create mode 100644 components/Loader/index.module.css

diff --git a/app/about/page.jsx b/app/about/page.jsx
index a2d2bc6..c0c407e 100644
--- a/app/about/page.jsx
+++ b/app/about/page.jsx
@@ -9,6 +9,8 @@ import Navbar from "@/components/Navbar";
 import Footer from "@/components/Footer";
 import backgroundImg from "@/public/background.webp";
 import { Button } from "@/components/ui/button";
+import Loading from "@/components/Loader";
+import { Suspense } from "react";
 
 export default function About() {
   const [email, setEmail] = useState("");
@@ -52,7 +54,7 @@ export default function About() {
   };
 
   return (
-    <>
+    <Suspense fallback={<Loading />}>
       <div className="relative flex flex-col justify-around w-full min-h-screen">
         <ToastContainer />
         <Image
@@ -488,6 +490,6 @@ export default function About() {
         </div>
       </div>
       <Footer />
-    </>
+    </Suspense>
   );
 }
diff --git a/app/page.js b/app/page.js
index 16a7166..78c925a 100644
--- a/app/page.js
+++ b/app/page.js
@@ -3,9 +3,12 @@ import { Button } from "@/components/ui/button";
 import { ArrowTopRightIcon } from "@radix-ui/react-icons";
 import hackbyteLogo from "@/public/hackbyteLogo.png";
 import Image from "next/image";
+import Loading from "@/components/Loader";
+import { Suspense } from "react";
 
 export default function Home() {
   return (
+    <Suspense fallback={<Loading />}>
     <div
       className="flex flex-col justify-around min-h-screen
         bg-cover bg-no-repeat p-4 md:px-12 md:py-8"
@@ -114,5 +117,6 @@ export default function Home() {
         </div>
       </div>
     </div>
+    </Suspense>
   );
 }
diff --git a/components/Loader/index.jsx b/components/Loader/index.jsx
new file mode 100644
index 0000000..390eed7
--- /dev/null
+++ b/components/Loader/index.jsx
@@ -0,0 +1,19 @@
+import styles from "./index.module.css";
+const Loading = () => {
+  return (
+    <div className={styles.body}>
+      <div className={styles.container}>
+        <div className={styles.load}>
+          <div>G</div>
+          <div>N</div>
+          <div>I</div>
+          <div>D</div>
+          <div>A</div>
+          <div>O</div>
+          <div>L</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default Loading;
diff --git a/components/Loader/index.module.css b/components/Loader/index.module.css
new file mode 100644
index 0000000..a88e410
--- /dev/null
+++ b/components/Loader/index.module.css
@@ -0,0 +1,192 @@
+.body {
+  background-color: black;
+  height: 100vh;
+}
+
+.container {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.container .load {
+  position: absolute;
+  width: 600px;
+  height: 36px;
+  left: 50%;
+  top: 40%;
+  margin-left: -300px;
+  overflow: visible;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  cursor: default;
+}
+
+.container .load div {
+  position: absolute;
+  width: 48px;
+  height: 56px;
+  opacity: 0;
+  font-weight: 600;
+  font-family: Helvetica, Arial, sans-serif;
+  animation: move 2s linear infinite;
+  -o-animation: move 2s linear infinite;
+  -moz-animation: move 2s linear infinite;
+  -webkit-animation: move 2s linear infinite;
+  transform: rotate(180deg);
+  -o-transform: rotate(180deg);
+  -moz-transform: rotate(180deg);
+  -webkit-transform: rotate(180deg);
+  color: #006eff;
+}
+
+.container .load div:nth-child(2) {
+  animation-delay: 0.2s;
+  -o-animation-delay: 0.2s;
+  -moz-animation-delay: 0.2s;
+  -webkit-animation-delay: 0.2s;
+}
+
+.container .load div:nth-child(3) {
+  animation-delay: 0.4s;
+  -o-animation-delay: 0.4s;
+  -webkit-animation-delay: 0.4s;
+  -webkit-animation-delay: 0.4s;
+}
+
+.container .load div:nth-child(4) {
+  animation-delay: 0.6s;
+  -o-animation-delay: 0.6s;
+  -moz-animation-delay: 0.6s;
+  -webkit-animation-delay: 0.6s;
+}
+
+.container .load div:nth-child(5) {
+  animation-delay: 0.8s;
+  -o-animation-delay: 0.8s;
+  -moz-animation-delay: 0.8s;
+  -webkit-animation-delay: 0.8s;
+}
+
+.container .load div:nth-child(6) {
+  animation-delay: 1s;
+  -o-animation-delay: 1s;
+  -moz-animation-delay: 1s;
+  -webkit-animation-delay: 1s;
+}
+
+.container .load div:nth-child(7) {
+  animation-delay: 1.2s;
+  -o-animation-delay: 1.2s;
+  -moz-animation-delay: 1.2s;
+  -webkit-animation-delay: 1.2s;
+}
+
+@keyframes move {
+  0% {
+    left: 0;
+    opacity: 0;
+  }
+  35% {
+    left: 41%;
+    -moz-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+    opacity: 1;
+  }
+  65% {
+    left: 59%;
+    -moz-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+    opacity: 1;
+  }
+  100% {
+    left: 100%;
+    -moz-transform: rotate(-180deg);
+    -webkit-transform: rotate(-180deg);
+    -o-transform: rotate(-180deg);
+    transform: rotate(-180deg);
+    opacity: 0;
+  }
+}
+
+@-moz-keyframes move {
+  0% {
+    left: 0;
+    opacity: 0;
+  }
+  35% {
+    left: 41%;
+    -moz-transform: rotate(0deg);
+    transform: rotate(0deg);
+    opacity: 1;
+  }
+  65% {
+    left: 59%;
+    -moz-transform: rotate(0deg);
+    transform: rotate(0deg);
+    opacity: 1;
+  }
+  100% {
+    left: 100%;
+    -moz-transform: rotate(-180deg);
+    transform: rotate(-180deg);
+    opacity: 0;
+  }
+}
+
+@-webkit-keyframes move {
+  0% {
+    left: 0;
+    opacity: 0;
+  }
+  35% {
+    left: 41%;
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+    opacity: 1;
+  }
+  65% {
+    left: 59%;
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+    opacity: 1;
+  }
+  100% {
+    left: 100%;
+    -webkit-transform: rotate(-180deg);
+    transform: rotate(-180deg);
+    opacity: 0;
+  }
+}
+
+@-o-keyframes move {
+  0% {
+    left: 0;
+    opacity: 0;
+  }
+  35% {
+    left: 41%;
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+    opacity: 1;
+  }
+  65% {
+    left: 59%;
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+    opacity: 1;
+  }
+  100% {
+    left: 100%;
+    -o-transform: rotate(-180deg);
+    transform: rotate(-180deg);
+    opacity: 0;
+  }
+}

From e05f938431d2334ff8db4ee85f5b772cefe453f6 Mon Sep 17 00:00:00 2001
From: Prateek Jha <prateekjha1204@gmail.com>
Date: Fri, 9 Feb 2024 09:48:58 +0530
Subject: [PATCH 2/3] changed css to tailwind of loader component

---
 app/about/page.jsx                 |   6 +-
 components/Loader/index.jsx        |  26 ++--
 components/Loader/index.module.css | 192 -----------------------------
 tailwind.config.js                 |  24 +++-
 4 files changed, 36 insertions(+), 212 deletions(-)
 delete mode 100644 components/Loader/index.module.css

diff --git a/app/about/page.jsx b/app/about/page.jsx
index c0c407e..a2d2bc6 100644
--- a/app/about/page.jsx
+++ b/app/about/page.jsx
@@ -9,8 +9,6 @@ import Navbar from "@/components/Navbar";
 import Footer from "@/components/Footer";
 import backgroundImg from "@/public/background.webp";
 import { Button } from "@/components/ui/button";
-import Loading from "@/components/Loader";
-import { Suspense } from "react";
 
 export default function About() {
   const [email, setEmail] = useState("");
@@ -54,7 +52,7 @@ export default function About() {
   };
 
   return (
-    <Suspense fallback={<Loading />}>
+    <>
       <div className="relative flex flex-col justify-around w-full min-h-screen">
         <ToastContainer />
         <Image
@@ -490,6 +488,6 @@ export default function About() {
         </div>
       </div>
       <Footer />
-    </Suspense>
+    </>
   );
 }
diff --git a/components/Loader/index.jsx b/components/Loader/index.jsx
index 390eed7..bbfd9bb 100644
--- a/components/Loader/index.jsx
+++ b/components/Loader/index.jsx
@@ -1,16 +1,20 @@
-import styles from "./index.module.css";
 const Loading = () => {
+  const elements = ["N", "I", "D", "A", "O", "L"];
   return (
-    <div className={styles.body}>
-      <div className={styles.container}>
-        <div className={styles.load}>
-          <div>G</div>
-          <div>N</div>
-          <div>I</div>
-          <div>D</div>
-          <div>A</div>
-          <div>O</div>
-          <div>L</div>
+    <div className="relative bg-black h-screen ">
+      <div className=" fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 ">
+        <div className=" absolute w-[600px] h-[36px] left-1/2 top-[40%] -ml-[300px] overflow-visible select-none cursor-default ">
+          {elements.map((element, index) => (
+            <div
+              key={index}
+              className=" absolute w-[48px] h-[56px] opacity-0 font-semibold animate-move rotate-180 text-[#006eff] font-sans "
+              style={{
+                animationDelay: `${200 * index}ms`,
+              }}
+            >
+              {element}
+            </div>
+          ))}
         </div>
       </div>
     </div>
diff --git a/components/Loader/index.module.css b/components/Loader/index.module.css
deleted file mode 100644
index a88e410..0000000
--- a/components/Loader/index.module.css
+++ /dev/null
@@ -1,192 +0,0 @@
-.body {
-  background-color: black;
-  height: 100vh;
-}
-
-.container {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.container .load {
-  position: absolute;
-  width: 600px;
-  height: 36px;
-  left: 50%;
-  top: 40%;
-  margin-left: -300px;
-  overflow: visible;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  cursor: default;
-}
-
-.container .load div {
-  position: absolute;
-  width: 48px;
-  height: 56px;
-  opacity: 0;
-  font-weight: 600;
-  font-family: Helvetica, Arial, sans-serif;
-  animation: move 2s linear infinite;
-  -o-animation: move 2s linear infinite;
-  -moz-animation: move 2s linear infinite;
-  -webkit-animation: move 2s linear infinite;
-  transform: rotate(180deg);
-  -o-transform: rotate(180deg);
-  -moz-transform: rotate(180deg);
-  -webkit-transform: rotate(180deg);
-  color: #006eff;
-}
-
-.container .load div:nth-child(2) {
-  animation-delay: 0.2s;
-  -o-animation-delay: 0.2s;
-  -moz-animation-delay: 0.2s;
-  -webkit-animation-delay: 0.2s;
-}
-
-.container .load div:nth-child(3) {
-  animation-delay: 0.4s;
-  -o-animation-delay: 0.4s;
-  -webkit-animation-delay: 0.4s;
-  -webkit-animation-delay: 0.4s;
-}
-
-.container .load div:nth-child(4) {
-  animation-delay: 0.6s;
-  -o-animation-delay: 0.6s;
-  -moz-animation-delay: 0.6s;
-  -webkit-animation-delay: 0.6s;
-}
-
-.container .load div:nth-child(5) {
-  animation-delay: 0.8s;
-  -o-animation-delay: 0.8s;
-  -moz-animation-delay: 0.8s;
-  -webkit-animation-delay: 0.8s;
-}
-
-.container .load div:nth-child(6) {
-  animation-delay: 1s;
-  -o-animation-delay: 1s;
-  -moz-animation-delay: 1s;
-  -webkit-animation-delay: 1s;
-}
-
-.container .load div:nth-child(7) {
-  animation-delay: 1.2s;
-  -o-animation-delay: 1.2s;
-  -moz-animation-delay: 1.2s;
-  -webkit-animation-delay: 1.2s;
-}
-
-@keyframes move {
-  0% {
-    left: 0;
-    opacity: 0;
-  }
-  35% {
-    left: 41%;
-    -moz-transform: rotate(0deg);
-    -webkit-transform: rotate(0deg);
-    -o-transform: rotate(0deg);
-    transform: rotate(0deg);
-    opacity: 1;
-  }
-  65% {
-    left: 59%;
-    -moz-transform: rotate(0deg);
-    -webkit-transform: rotate(0deg);
-    -o-transform: rotate(0deg);
-    transform: rotate(0deg);
-    opacity: 1;
-  }
-  100% {
-    left: 100%;
-    -moz-transform: rotate(-180deg);
-    -webkit-transform: rotate(-180deg);
-    -o-transform: rotate(-180deg);
-    transform: rotate(-180deg);
-    opacity: 0;
-  }
-}
-
-@-moz-keyframes move {
-  0% {
-    left: 0;
-    opacity: 0;
-  }
-  35% {
-    left: 41%;
-    -moz-transform: rotate(0deg);
-    transform: rotate(0deg);
-    opacity: 1;
-  }
-  65% {
-    left: 59%;
-    -moz-transform: rotate(0deg);
-    transform: rotate(0deg);
-    opacity: 1;
-  }
-  100% {
-    left: 100%;
-    -moz-transform: rotate(-180deg);
-    transform: rotate(-180deg);
-    opacity: 0;
-  }
-}
-
-@-webkit-keyframes move {
-  0% {
-    left: 0;
-    opacity: 0;
-  }
-  35% {
-    left: 41%;
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-    opacity: 1;
-  }
-  65% {
-    left: 59%;
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-    opacity: 1;
-  }
-  100% {
-    left: 100%;
-    -webkit-transform: rotate(-180deg);
-    transform: rotate(-180deg);
-    opacity: 0;
-  }
-}
-
-@-o-keyframes move {
-  0% {
-    left: 0;
-    opacity: 0;
-  }
-  35% {
-    left: 41%;
-    -o-transform: rotate(0deg);
-    transform: rotate(0deg);
-    opacity: 1;
-  }
-  65% {
-    left: 59%;
-    -o-transform: rotate(0deg);
-    transform: rotate(0deg);
-    opacity: 1;
-  }
-  100% {
-    left: 100%;
-    -o-transform: rotate(-180deg);
-    transform: rotate(-180deg);
-    opacity: 0;
-  }
-}
diff --git a/tailwind.config.js b/tailwind.config.js
index 0a5fa43..54fde55 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,10 +2,10 @@
 module.exports = {
   darkMode: ["class"],
   content: [
-    './pages/**/*.{js,jsx}',
-    './components/**/*.{js,jsx}',
-    './app/**/*.{js,jsx}',
-    './src/**/*.{js,jsx}',
+    "./pages/**/*.{js,jsx}",
+    "./components/**/*.{js,jsx}",
+    "./app/**/*.{js,jsx}",
+    "./src/**/*.{js,jsx}",
   ],
   prefix: "",
   theme: {
@@ -66,12 +66,26 @@ module.exports = {
           from: { height: "var(--radix-accordion-content-height)" },
           to: { height: "0" },
         },
+        move: {
+          "0%": { left: "0", opacity: "0" },
+          "35%": { left: "41%", transform: "rotate(0deg)", opacity: "1" },
+          "65%": { left: "59%", transform: "rotate(0deg)", opacity: "1" },
+          "100%": { left: "100%", transform: "rotate(-180deg)", opacity: "0" },
+        },
       },
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
+        move: "move 2s linear infinite",
+      },
+      animationDelay: {
+        200: "200ms",
+        400: "400ms",
+        800: "800ms",
+        1000: "1000ms",
+        1200: "1200ms",
       },
     },
   },
   plugins: [require("tailwindcss-animate")],
-}
\ No newline at end of file
+};

From 5e0a4c60310b7a74a720ee9747f41d2b2c552f61 Mon Sep 17 00:00:00 2001
From: Prateek Jha <prateekjha1204@gmail.com>
Date: Sat, 10 Feb 2024 11:43:53 +0530
Subject: [PATCH 3/3] fixed loader

---
 app/Home/index.jsx | 120 +++++++++++++++++++++++++++++++++++++++++
 app/page.js        | 129 ++++-----------------------------------------
 2 files changed, 130 insertions(+), 119 deletions(-)
 create mode 100644 app/Home/index.jsx

diff --git a/app/Home/index.jsx b/app/Home/index.jsx
new file mode 100644
index 0000000..fa01470
--- /dev/null
+++ b/app/Home/index.jsx
@@ -0,0 +1,120 @@
+import Navbar from "@/components/Navbar";
+import { Button } from "@/components/ui/button";
+import { ArrowTopRightIcon } from "@radix-ui/react-icons";
+import hackbyteLogo from "@/public/hackbyteLogo.png";
+import Image from "next/image";
+
+export default function Home() {
+  return (
+    <>
+      <div
+        className="flex flex-col justify-around min-h-screen
+        bg-cover bg-no-repeat p-4 md:px-12 md:py-8"
+        style={{
+          backgroundImage: "url(/background.webp)",
+          backgroundAttachment: "fixed",
+          backgroundPositionY: "bottom",
+        }}
+      >
+        <Navbar />
+        <div className="flex flex-wrap justify-between items-center gap-4 lg:gap-0">
+          <div className="flex flex-col items-start w-full lg:w-1/2">
+            {/* <p
+            className="text-[#FAF8ED] text-[1.25rem] font-medium uppercase 
+                lg:text-[1.5rem]"
+          >
+            This year&apos;s theme :{" "}
+          </p> */}
+            <p
+              className="text-[#FAF8ED] text-[2.375rem] font-medium leading-[1.2] 
+                lg:leading-[1.1] lg:text-[3rem]"
+            >
+              This year&apos;s theme <br /> unveils in April ...
+            </p>
+          </div>
+          <div className="flex flex-col items-start gap-3 w-full lg:items-end lg:w-1/2">
+            <p
+              className="text-[#FAF8ED] text-[1.25rem] font-medium text-left 
+              lg:text-right lg:text-[1.5rem]"
+            >
+              — Round 1 kicks off at
+              <br /> 5 April 2024, IIIT Jabalpur
+            </p>
+            <Button
+              size="sm"
+              className="bg-[#FAF8ED] text-black text-[1.125rem] font-medium uppercase 
+                p-6 rounded-none hover:bg-[#FAF8ED] hover:text-black"
+              style={{
+                boxShadow:
+                  "0px 1px 1px 0px rgba(0, 0, 0, 0.12), 0px 0px 0px 1px rgba(103, 110, 118, 0.16), 0px 2px 5px 0px rgba(103, 110, 118, 0.08)",
+              }}
+            >
+              Explore Challenge
+              <ArrowTopRightIcon className="w-5 h-5 ml-1" />
+            </Button>
+          </div>
+        </div>
+
+        <div className="flex items-center justify-center my-12 xl:my-4">
+          <Image
+            src={hackbyteLogo}
+            alt="HackByte Logo"
+            className="max-w-[32rem] min-w-[15rem] w-[75%] 2xl:max-w-[40rem]"
+            priority
+          />
+        </div>
+
+        <div className="flex items-center justify-between gap-4 mt-8 xl:mt-4">
+          <div className="flex flex-col items-start gap-2">
+            <p
+              className="text-[#FAF8ED] text-[1rem] font-[600]
+               md:text-[1.125rem]"
+            >
+              HackByte: Empower Your Digital Odyssey!
+            </p>
+            <div className="flex items-stretch">
+              <div
+                className="flex justify-center items-center py-2 md:py-2.5 px-4 md:px-6"
+                style={{ border: "1.275px solid #FAF8ED" }}
+              >
+                <div className="flex justify-center items-center gap-4">
+                  <img
+                    src="/tpcLogo.svg"
+                    alt="TPC Logo"
+                    className="w-[4rem] h-[2.125rem]"
+                  />
+                  <p className="text-[#FAF8ED] text-[0.75rem] font-[600]">
+                    Organised by
+                    <br className="hidden md:block" /> The Programming Club of
+                    IIITDMJ
+                  </p>
+                </div>
+              </div>
+              <div
+                className="flex justify-center items-center py-2 md:py-2.5 px-4 md:px-6"
+                style={{ border: "1.275px solid #FAF8ED" }}
+              >
+                <div className="flex justify-center items-center">
+                  <img
+                    src="/iiitdmjLogo.svg"
+                    alt="IIITDMJ Logo"
+                    className="w-[5.5rem] h-[2rem]"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="hidden lg:flex lg:flex-col lg:items-end lg:max-w-[24rem] xl:max-w-md">
+            <p className="text-[#FAF8ED] text-[1rem] xl:text-[1.125rem] font-[600] text-right">
+              HackByte: Empower Your Digital Odyssey!
+            </p>
+            <p className="text-[#FAF8ED] text-[1rem] xl:text-[1.125rem] font-normal text-right uppercase">
+              Embark on an enriching voyage with HackByte, where the fusion of
+              tech expertise and boundless innovation unfolds.
+            </p>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/app/page.js b/app/page.js
index 78c925a..ec648d9 100644
--- a/app/page.js
+++ b/app/page.js
@@ -1,122 +1,13 @@
-import Navbar from "@/components/Navbar";
-import { Button } from "@/components/ui/button";
-import { ArrowTopRightIcon } from "@radix-ui/react-icons";
-import hackbyteLogo from "@/public/hackbyteLogo.png";
-import Image from "next/image";
+import React from "react";
+import dynamic from "next/dynamic";
 import Loading from "@/components/Loader";
-import { Suspense } from "react";
 
-export default function Home() {
-  return (
-    <Suspense fallback={<Loading />}>
-    <div
-      className="flex flex-col justify-around min-h-screen
-        bg-cover bg-no-repeat p-4 md:px-12 md:py-8"
-      style={{
-        backgroundImage: "url(/background.webp)",
-        backgroundAttachment: "fixed",
-        backgroundPositionY: "bottom",
-      }}
-    >
-      <Navbar />
-      <div className="flex flex-wrap justify-between items-center gap-4 lg:gap-0">
-        <div className="flex flex-col items-start w-full lg:w-1/2">
-          {/* <p
-            className="text-[#FAF8ED] text-[1.25rem] font-medium uppercase 
-                lg:text-[1.5rem]"
-          >
-            This year&apos;s theme :{" "}
-          </p> */}
-          <p
-            className="text-[#FAF8ED] text-[2.375rem] font-medium leading-[1.2] 
-                lg:leading-[1.1] lg:text-[3rem]"
-          >
-            This year&apos;s theme <br /> unveils in April ...
-          </p>
-        </div>
-        <div className="flex flex-col items-start gap-3 w-full lg:items-end lg:w-1/2">
-          <p
-            className="text-[#FAF8ED] text-[1.25rem] font-medium text-left 
-              lg:text-right lg:text-[1.5rem]"
-          >
-            — Round 1 kicks off at
-            <br /> 5 April 2024, IIIT Jabalpur
-          </p>
-          <Button
-            size="sm"
-            className="bg-[#FAF8ED] text-black text-[1.125rem] font-medium uppercase 
-                p-6 rounded-none hover:bg-[#FAF8ED] hover:text-black"
-            style={{
-              boxShadow:
-                "0px 1px 1px 0px rgba(0, 0, 0, 0.12), 0px 0px 0px 1px rgba(103, 110, 118, 0.16), 0px 2px 5px 0px rgba(103, 110, 118, 0.08)",
-            }}
-          >
-            Explore Challenge
-            <ArrowTopRightIcon className="w-5 h-5 ml-1" />
-          </Button>
-        </div>
-      </div>
+const Home = dynamic(() => import("../app/Home"), {
+  loading: () => <Loading />,
+  ssr: false,
+});
+const HomePage = () => {
+  return <Home />;
+};
 
-      <div className="flex items-center justify-center my-12 xl:my-4">
-        <Image
-          src={hackbyteLogo}
-          alt="HackByte Logo"
-          className="max-w-[32rem] min-w-[15rem] w-[75%] 2xl:max-w-[40rem]"
-          priority
-        />
-      </div>
-
-      <div className="flex items-center justify-between gap-4 mt-8 xl:mt-4">
-        <div className="flex flex-col items-start gap-2">
-          <p
-            className="text-[#FAF8ED] text-[1rem] font-[600]
-               md:text-[1.125rem]"
-          >
-            HackByte: Empower Your Digital Odyssey!
-          </p>
-          <div className="flex items-stretch">
-            <div
-              className="flex justify-center items-center py-2 md:py-2.5 px-4 md:px-6"
-              style={{ border: "1.275px solid #FAF8ED" }}
-            >
-              <div className="flex justify-center items-center gap-4">
-                <img
-                  src="/tpcLogo.svg"
-                  alt="TPC Logo"
-                  className="w-[4rem] h-[2.125rem]"
-                />
-                <p className="text-[#FAF8ED] text-[0.75rem] font-[600]">
-                  Organised by
-                  <br className="hidden md:block" /> The Programming Club of
-                  IIITDMJ
-                </p>
-              </div>
-            </div>
-            <div
-              className="flex justify-center items-center py-2 md:py-2.5 px-4 md:px-6"
-              style={{ border: "1.275px solid #FAF8ED" }}
-            >
-              <div className="flex justify-center items-center">
-                <img
-                  src="/iiitdmjLogo.svg"
-                  alt="IIITDMJ Logo"
-                  className="w-[5.5rem] h-[2rem]"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-        <div className="hidden lg:flex lg:flex-col lg:items-end lg:max-w-[24rem] xl:max-w-md">
-          <p className="text-[#FAF8ED] text-[1rem] xl:text-[1.125rem] font-[600] text-right">
-            HackByte: Empower Your Digital Odyssey!
-          </p>
-          <p className="text-[#FAF8ED] text-[1rem] xl:text-[1.125rem] font-normal text-right uppercase">
-            Embark on an enriching voyage with HackByte, where the fusion of
-            tech expertise and boundless innovation unfolds.
-          </p>
-        </div>
-      </div>
-    </div>
-    </Suspense>
-  );
-}
+export default HomePage;