chore: added recoomeded changes

src/app/globals.css

@@ -33,3 +33,57 @@ body {
 ::-webkit-scrollbar {
   display: none;
 }
+
+.loader {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  max-width: 6rem;
+  margin-top: 3rem;
+  margin-bottom: 3rem;
+}
+.loader:before,
+.loader:after {
+  content: '';
+  position: absolute;
+  border-radius: 50%;
+  animation: pulsOut 1.8s ease-in-out infinite;
+  filter: drop-shadow(0 0 1rem rgba(255, 255, 255, 0.75));
+}
+.loader:before {
+  width: 100%;
+  padding-bottom: 100%;
+  box-shadow: inset 0 0 0 1rem #fff;
+  animation-name: pulsIn;
+}
+.loader:after {
+  width: calc(100% - 2rem);
+  padding-bottom: calc(100% - 2rem);
+  box-shadow: 0 0 0 0 #fff;
+}
+
+@keyframes pulsIn {
+  0% {
+    box-shadow: inset 0 0 0 1rem #fff;
+    opacity: 1;
+  }
+  50%,
+  100% {
+    box-shadow: inset 0 0 0 0 #fff;
+    opacity: 0;
+  }
+}
+
+@keyframes pulsOut {
+  0%,
+  50% {
+    box-shadow: 0 0 0 0 #fff;
+    opacity: 0;
+  }
+  100% {
+    box-shadow: 0 0 0 1rem #fff;
+    opacity: 1;
+  }
+}

src/app/loading.js

@@ -0,0 +1,28 @@
+'use client';
+import { Container, Message } from '@/components/Loading/loading.styles';
+import { motion, AnimatePresence } from 'framer-motion';
+
+export default function Loading() {
+  return (
+    <AnimatePresence>
+      <Container>
+        <motion.span
+          className='loader'
+          initial={{ opacity: 0, scale: 0.5 }}
+          animate={{ opacity: 1, scale: 1 }}
+          exit={{ opacity: 0, scale: 0.5 }}
+          transition={{ duration: 0.5 }}
+        />
+        <Message
+          as={motion.div}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.5, delay: 0.2 }}
+        >
+          Loading...
+        </Message>
+      </Container>
+    </AnimatePresence>
+  );
+}

src/app/not-found.js

@@ -0,0 +1,17 @@
+'use client';
+
+import React from 'react';
+import Link from 'next/link';
+import { Button, Container, Heading, Message } from '@/components/NotFound/notfound.styles';
+
+export default function NotFound() {
+  return (
+    <Container>
+      <Heading>404 - Page Not Found</Heading>
+      <Message>The page you are looking for does not exist.</Message>
+      <Link href='/'>
+        <Button>Go Home</Button>
+      </Link>
+    </Container>
+  );
+}

src/app/register/RegistrationModal.jsx

@@ -1,4 +1,3 @@
-// RegistrationModal.js
 import { Modal, ModalContent, ModalBody, Button } from '@nextui-org/react';
 import Image from 'next/image';
 import { closeIcon } from '@/config/content/Footer';
@@ -9,26 +8,29 @@ export const RegistrationModal = ({ isOpen, onClose }) => {
       size='sm'
       isOpen={isOpen}
       onClose={onClose}
-      backdrop='opaque'
+      backdrop='blur'
       hideCloseButton={true}
       placement='center'
-      className='backdrop-blur-xl border-2 border-green-200'
+      className='backdrop-blur-lg'
     >
-      <ModalContent className='relative bg-[#0000002a] h-[50vh]'>
+      <ModalContent className='relative bg-[#0000002a] h-[50vh] focus:outline-none focus:border-0'>
         <Button
           color='danger'
           variant='light'
           onPress={onClose}
-          className='absolute top-1 right-0 z-10'
+          className='absolute top-1 right-0 z-10 focus:outline-none focus:border-0'
         >
           <Image src={closeIcon} alt='close' width={30} height={30} />
         </Button>
         <ModalBody className='px-[30px] py-[50px] text-monteserrat h-full flex flex-col justify-center items-center'>
-          <p className='tracking-wider text-center text-[18px] lg:text-[23px]' id='modal-title'>
-            🚀 Coming Soon
+          <p
+            className='tracking-wider text-center text-[18px] lg:text-[23px] font-orbitron'
+            id='modal-title'
+          >
+            Coming Soon
           </p>
-          <p className='text-center tracking-wide text-[14px] lg:text-[21px]'>
-            Stay tuned for exciting updates! Registration will open soon.
+          <p className='text-center tracking-wide text-[14px] lg:text-[18px] mt-10 font-montserrat'>
+            Stay tuned for exciting updates! Registration will open soon.🚀
           </p>
         </ModalBody>
       </ModalContent>

src/app/register/page.jsx

@@ -7,12 +7,14 @@ import {
   RegsiterButton,
   RegisterInnerContainer,
   Moon,
+  UndertakingLink,
 } from './register.styles';
+import Link from 'next/link';
 import InputField from '@/components/Register/InputField/InputField';
 import SelectField from '@/components/Register/SelectField/SelectField';
 import CheckBox from '@/components/Register/InputCheckBox/CheckBox';
 import FileInput from '@/components/Register/FileInput/FileInput';
-import { formFields } from '@/config/content/Registration/details';
+import { formFields, undertakingContent } from '@/config/content/Registration/details';
 import { uploadToCloudinary } from '../../utils/uploadToCloudinary';
 import handleLoadingAndToast from '../../utils/handleLoadingToast';
 import { userSchema } from '@/config/zodd/userDetailsSchema';
@@ -21,6 +23,7 @@ import CampusAmbassador from '@/components/Register/CampusAmbassador/CampusAmbas
 import { PrimaryButton } from '@/components/shared/Typography/Buttons';
 import { AuthContext } from '@/context/auth-context';
 import { RegistrationModal } from './RegistrationModal';
+
 function Page() {
   const [userDetails, setUserDetails] = useState({
     name: '',
@@ -162,7 +165,7 @@ function Page() {
     }
   }
 
-  const [isModalOpen, setModalOpen] = useState(false);
+  const [isModalOpen, setModalOpen] = useState(true);
 
   function handleSubmit() {
     const isFormValid = validateForm();
@@ -184,6 +187,13 @@ function Page() {
               return returnFormFields(field);
             })}
           </RegisterForm>
+          <UndertakingLink
+          href={undertakingContent.link}
+          target='_blank'
+
+        >
+          {undertakingContent.text}
+        </UndertakingLink>
           <CampusAmbassador
             handleChange={handleChange}
             userReferral={userDetails.phone}
@@ -207,6 +217,10 @@ function Page() {
             return returnFormFields(field);
           })}
         </RegisterForm>
+        <UndertakingLink href={undertakingContent.link} target='_blank' className=''>
+          {undertakingContent.text}
+        </UndertakingLink>
+
         <CampusAmbassador
           handleChange={handleChange}
           userReferral={userDetails.phone}

src/app/register/register.styles.jsx

@@ -48,3 +48,7 @@ export const Moon = styled.div`
   border-radius: 450px;
   ${tw` top-[-50px] right-[-50px] ssm:top-[-100px] ssm:right-[-100px] w-[150px] xsm:w-[200px] h-[150px] xsm:h-[200px] ssm:w-[250px] ssm:h-[250px] md:w-[300px]  md:h-[300px] slg:w-[350px] slg:h-[350px] llg:w-[400px] llg:h-[400px] xl:w-[450px]  xl:h-[450px]`}
 `;
+
+export const UndertakingLink = styled.a`
+  ${tw`text-base font-prompt font-semibold  hover:underline transition-all duration-200 ease-in-out`}
+`;

src/components/Loading/loading.styles.jsx

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+import tw from 'twin.macro';
+
+const Container = styled.div`
+  ${tw`flex flex-col items-center justify-center min-h-screen bg-gray-900 text-gray-100 font-orbitron`}
+`;
+
+const Message = styled.p`
+  ${tw`text-lg mt-4 text-center`}
+`;
+
+const Spinner = styled.span`
+  ${tw`w-12 h-12 border-4 border-gray-100 border-t-transparent border-solid rounded-full animate-spin`}
+`;
+
+export { Container, Spinner, Message };

src/components/Marginals/navbar/navbar.jsx

@@ -18,6 +18,7 @@ import { ButtonData, logos, navLinks } from '../../../config/content/NavbarData/
 import Image from 'next/image';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
+import { AnimatePresence, motion } from 'framer-motion';
 
 const Navbar = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -64,27 +65,40 @@ const Navbar = () => {
         </NavCover>
       </div>
 
-      {isOpen && (
-        <div className='h-[73vh] flex items-center justify-center'>
-          <ResMen>
-            <ResList>
-              {navLinks.map((navLink) => (
-                <ResItem key={navLink.link}>
-                  <Link href={`${navLink.link}`} onClick={handleCloseMenu}>
-                    {navLink.name}
-                  </Link>
-                </ResItem>
-              ))}
+      <AnimatePresence mode='wait'>
+        {isOpen && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{
+              opacity: 1,
+              backdropFilter: 'blur(50px)',
+              borderRadius: '20px',
+              marginTop: '10px',
+            }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.3, type: 'tween' }}
+            className='h-[73vh] flex items-center justify-center'
+          >
+            <ResMen>
+              <ResList>
+                {navLinks.map((navLink, idx) => (
+                  <ResItem key={navLink.link}>
+                    <Link href={`${navLink.link}`} onClick={handleCloseMenu}>
+                      {navLink.name}
+                    </Link>
+                  </ResItem>
+                ))}
 
-              <HamburgerRegisterButton>
-                <Link href={ButtonData.link} onClick={handleCloseMenu}>
-                  {ButtonData.title}
-                </Link>
-              </HamburgerRegisterButton>
-            </ResList>
-          </ResMen>
-        </div>
-      )}
+                <HamburgerRegisterButton>
+                  <Link href={ButtonData.link} onClick={handleCloseMenu}>
+                    {ButtonData.title}
+                  </Link>
+                </HamburgerRegisterButton>
+              </ResList>
+            </ResMen>
+          </motion.div>
+        )}
+      </AnimatePresence>
     </NavContainer>
   );
 };

src/components/Marginals/navbar/navbar.styles.jsx

@@ -49,7 +49,7 @@ export const HamburgerContainer = styled.button`
 `;
 
 export const ResMen = styled.div`
-  ${tw`z-10 grid w-full h-max backdrop-blur-3xl place-items-center  rounded-3xl  min-[930px]:hidden`}
+  ${tw`z-10 grid w-full h-max place-items-center  rounded-3xl  min-[930px]:hidden`}
 `;
 
 export const ResList = styled.ul`

src/components/NotFound/notfound.styles.jsx

@@ -0,0 +1,31 @@
+import styled from 'styled-components';
+import tw from 'twin.macro';
+
+const Container = styled.div`
+  ${tw`flex flex-col items-center justify-center min-h-screen text-gray-100 font-orbitron`};
+
+  background: url('https://res.cloudinary.com/dmvdbpyqk/image/upload/v1728797925/registration_si85oa.png');
+  filter: brightness(1.1);
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  overflow-x: hidden;
+`;
+
+const Heading = styled.h1`
+  ${tw`text-4xl mb-6 text-center`}
+`;
+
+const Message = styled.p`
+  ${tw`text-lg mb-8 text-center`}
+`;
+
+const Button = styled.button`
+  ${tw`px-6 py-3 text-base bg-gray-800 text-white rounded-md cursor-pointer transition-all font-orbitron`};
+
+  &:hover {
+    ${tw`bg-gray-700`}
+  }
+`;
+
+export { Container, Heading, Message, Button };

src/components/Register/SelectField/SelectField.jsx

@@ -1,6 +1,6 @@
 'use client';
 import { Label } from '../FileInput/FileInput.styles';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import InputField from '../InputField/InputField';
 import { ErrorMessage } from '../InputField/InputField.styles';
 import {
@@ -27,6 +27,7 @@ function SelectField({
   const [isOpen, setIsOpen] = useState(false);
   const [selectedOption, setSelectedOption] = useState(value || '');
   const [otherInstituteName, setOtherInstituteName] = useState('');
+  const ref = useRef(null);
   const isOneLine = className?.includes('oneliner');
 
   const isOthers =
@@ -72,8 +73,19 @@ function SelectField({
     }
   }, [otherInstituteName]);
 
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [ref]);
   return (
-    <div>
+    <div ref={ref}>
       <SelectFieldParentContainer>
         <LabelAndInputContainer
           className={isOneLine ? 'flex-col xxs:flex-row items-center' : 'flex-col items-start'}