Aarush/not found page

frontend/src/app/components/BenefitsOfParticipating/CardDark.tsx

@@ -19,17 +19,17 @@ export default function CardDark({
   svg: ReactElement;
 }) {
   return (
-    <div className=" primary-border-background lg:w-[32.93rem] lg:h-[18.37rem] md:w-[36rem] min-h-[17.93rem] h-fit w-full  rounded-[1.875rem] p-[0.1875rem] relative ">
-      <div className=" new-gradient-background w-full h-full rounded-[1.875rem] flex flex-col px-12 gap-[21px] justify-center relative">
-        <div>
+    <div className=" primary-border-background lg:w-[32.93rem] lg:h-[18.372rem] md:w-[36rem] min-h-[17.93rem] h-fit w-full  rounded-[1.875rem] p-[0.1875rem] relative ">
+      <div className=" new-gradient-background w-full h-full rounded-[1.875rem] flex flex-col px-12 gap-7 justify-center relative">
+        <div className="md:mt-[-1rem]">
           <div
-            className={`${cabinetExtraBold.className} text-primary-gradient-color lg:text-[2rem] text-[1.5rem] w-[10.69rem] md:w-[18.72rem] md:leading-[2.75rem] pb-[1.5rem] md:pb-0 font-extrabold z-10 `}
+            className={`${cabinetExtraBold.className} text-primary-gradient-color lg:text-[2rem] text-[1.5rem] w-[10.69rem] md:w-[18.72rem] md:leading-[2.5rem] pb-[1.5rem] md:pb-0 font-extrabold z-10 `}
           >
             {title}
           </div>
           <div className="flex flex-row items-left gap-10 lg:gap-7 h-[70%] md:h-auto  md:flex-row  md:items-center">
             <div
-              className={`${cabinetRegular.className} text-white w-[16.72rem] md:w-[19rem] lg:w-[22.985rem] lg:h-[6rem] text-[1rem] font-medium text-justify-stretch pr-7 z-10 `}
+              className={`${cabinetRegular.className} text-white w-[16.72rem] md:w-[19rem] lg:w-[18.729rem] lg:h-[6rem] text-[1rem] font-medium md:text-justify pr-7 z-10 pt-5 md:pb-[5.5rem]`}
             >
               {description}
             </div>

frontend/src/app/components/BenefitsOfParticipating/CardLight.tsx

@@ -19,17 +19,17 @@ export default function CardLight({
   svg: ReactElement;
 }) {
   return (
-    <div className="secondary-gradient-background lg:w-[32.93rem] lg:h-[18.37rem] md:w-[36rem] w-full min-h-[17.93rem] h-fit rounded-[1.875rem] p-[0.1875rem] relative justify-start gap-5">
+    <div className="secondary-gradient-background lg:w-[32.93rem] lg:h-[18.372rem] md:w-[36rem] w-full min-h-[17.93rem] h-fit rounded-[1.875rem] p-[0.1875rem] relative justify-start gap-5">
       <div className=" w-full h-full rounded-[1.875rem] flex flex-col px-12 gap-7 justify-center items-start">
-        <div>
+        <div className="md:mt-[-1rem]">
         <div
-          className={`${cabinetExtraBold.className} text-primary-gradient-color lg:text-[2rem] text-[1.5rem] w-[10.69rem] md:w-[18.72rem] md:leading-[2.75rem] pb-0 font-extrabold z-10`}
+          className={`${cabinetExtraBold.className} text-primary-gradient-color lg:text-[2rem] text-[1.5rem] w-[10.69rem] md:w-[18.72rem] md:leading-[2.5rem] pb-0 font-extrabold z-10`}
         >
           {title}
         </div>
         <div className="flex flex-row items-left lg:gap-7 gap-10 h-[70%] md:h-auto  md:flex-row  md:items-center">
           <div
-            className={`${cabinetRegular.className} text-white w-[16.72rem] md:w-[19.51rem] lg:w-[22.985rem] lg:h-[6rem] text-[1rem] font-medium text-justify-stretch pr-7 z-10`}
+            className={`${cabinetRegular.className} text-white w-[16.72rem] md:w-[19.51rem] lg:w-[19.928rem] lg:h-[6rem] text-[1rem] font-medium md:text-justify pr-7 z-10 pt-5 md:pb-[5.5rem]`}
           >
             {description}
           </div>

frontend/src/app/components/GoBack/GoBackToHome.tsx

@@ -2,12 +2,13 @@ import { cabinetExtraBold } from "@/app/utils/fonts";
 import Link from "next/link";
 const GoBackToHome = () => {
   return (
-    <div>
+    <div className={`bg-secondary w-48 ${cabinetExtraBold.className} text-center py-3 px-4 rounded-[0.231rem] w-[8rem] md:w-[12.651rem] h-[1.7rem] md:h-[3.107rem] flex justify-center items-center`}
+    >
       <a
-        className={`bg-secondary w-48 ${cabinetExtraBold.className} text-center py-3 px-4 text-lg rounded-md`}
+        className={`text-[0.75rem] md:text-[1.232rem] md:font-black`}
         href="/"
       >
-        Go Back to home
+        Go Back to Home
       </a>
     </div>
   );

frontend/src/app/not-found.tsx

@@ -6,35 +6,55 @@ import styles from "./styles.module.css";
 import { cabinetBlack, cabinetBold, cabinetExtraBold } from "./utils/fonts";
 import { redirect } from "next/navigation";
 import GoBackToHome from "./components/GoBack/GoBackToHome";
+import Image from "next/image";
+import darin_404 from "@/app/assets/images/darin_404.svg";
+import Navbar from "./components/Navbar/Navbar";
 
 export default function NotFound() {
   return (
+
     <div
-      className={`${styles.background_container} h-screen flex justify-center`}
+      className={`${styles.background_container} overflow-hidden`}
     >
-      <div
-        className={`${styles.muted_color} rounded-[0.65rem] w-[80vw] md:w-[50vw] max-w-[1080px] h-fit lg:h-[24vh] flex flex-col gap-4 justify-center items-center  border-secondary border-2 backdrop-blur-sm px-2 py-6 mx-auto absolute top-[60%]`}
+      <Navbar/>
+      <div className="absolute w-full top-[45vh] md:top-[35vh] lg:top-[70vh] m-auto flex justify-center items-center">
+      <div className="sm:flex sm:justify-center sm:items-center">
+       <div
+        className={`rounded-[0.65rem] w-[20.409rem] md:w-[40.808rem] max-w-[1080px] h-[5.531rem] md:h-[10.705rem]
+           flex flex-col gap-4 justify-center items-center  border-secondary border-2 backdrop-blur-sm px-2 py-6 mx-0
+            relative lg:left-[13rem]`}
       >
         <p
-          className={`${cabinetExtraBold.className} text-primary-gradient-color-reverse w-fit text-5xl text-center`}
+          className={`${cabinetExtraBold.className} text-[#F5C144] w-fit text-[1.25rem] md:text-[2.674rem] text-center`}
         >
-          Nobody Seems to be here!
+          Nobody seems to be here!
         </p>
         <GoBackToHome />
+      </div> 
+      </div>
       </div>
+
+      {/* <Image
+      src={darin_404}
+      alt="darin"
+      className="absolute top-[5rem] left-[7.5rem] h-[40rem] overflow-hidden"
+      >
+
+      </Image> */}
     </div>
+
   );
 }
 
 {
   /* <div
-      className={`${styles.background_container} h-screen flex justify-center`}
+      className={${styles.background_container} h-screen flex justify-center}
     >
       <div
-        className={`${styles.muted_color} rounded-[0.65rem] w-[80vw] md:w-[50vw] h-fit lg:h-[24vh] flex flex-col gap-4 justify-center items-center  border-secondary border-2 backdrop-blur-sm px-2 py-6 mx-auto absolute top-[60%]`}
+        className={${styles.muted_color} rounded-[0.65rem] w-[80vw] md:w-[50vw] h-fit lg:h-[24vh] flex flex-col gap-4 justify-center items-center  border-secondary border-2 backdrop-blur-sm px-2 py-6 mx-auto absolute top-[60%]}
       >
         <p
-          className={`${cabinetExtraBold.className} text-primary-gradient-color-reverse w-fit text-5xl text-center`}
+          className={${cabinetExtraBold.className} text-primary-gradient-color-reverse w-fit text-5xl text-center}
         >
           Nobody Seems to be here!
         </p>

frontend/src/app/styles.module.css

@@ -1,45 +1,24 @@
 .background_container {
-  background-image: url("./assets/images/404_Desktop_Upscaled.svg");
-  background-position: top;
+  background-position: center;
   background-repeat: no-repeat;
+  background-size: cover;
+  width: 100%;
+  background-image: url("./assets/images/new_404_desktop.svg");
+  height: 100vh;
 }
 
 .muted_color {
   background-color: rgba(17, 12, 36, 0.6);
 }
 
-@media (max-width: 3000px) {
+@media (max-width: 600px) {
   .background_container {
-    background-image: url("./assets/images/404_Desktop_Upscaled.svg");
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-position: top;
+    background-image: url("./assets/images/new_404_phone.svg");
   }
 }
 
-@media screen and (max-width: 960px) {
+@media (min-width: 601px) and (max-width: 1200px) {
   .background_container {
-    background-image: url("./assets/images/404_phone.svg");
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-position: top;
-  }
-}
-
-/* @media screen and (min-width: 961) and (max-width: 1200px) {
-  .background_container {
-    background-image: url("./assets/images/404_phone.svg");
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-position: top;
-  }
-} */
-
-@media (min-width: 1201) and (max-width: 1920px) {
-  .background_container {
-    background-image: url("./assets/images/404_ipad.svg");
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-position: top;
+    background-image: url("./assets/images/tablet_404_2.svg");
   }
 }