chore: fix typos and add some animations to navbar

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

@@ -165,7 +165,7 @@ function Page() {
     }
   }
 
-  const [isModalOpen, setModalOpen] = useState(false);
+  const [isModalOpen, setModalOpen] = useState(true);
 
   function handleSubmit() {
     const isFormValid = validateForm();

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,48 @@ 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, ease: 'easeInOut' }}
+            className='h-[73vh] flex items-center justify-center'
+          >
+            <ResMen>
+              <ResList>
+                {navLinks.map((navLink, idx) => (
+                  <motion.div
+                    initial={{ x: -100, opacity: 0 }}
+                    animate={{ x: 0, opacity: 1 }}
+                    exit={{ x: -100, opacity: 0 }}
+                    transition={{ duration: 0.3, delay: idx * 0.1 }}
+                    key={navLink.link}
+                  >
+                    <ResItem key={navLink.link}>
+                      <Link href={`${navLink.link}`} onClick={handleCloseMenu}>
+                        {navLink.name}
+                      </Link>
+                    </ResItem>
+                  </motion.div>
+                ))}
 
-              <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/Statistics/card/card.jsx

@@ -1,44 +1,49 @@
 'use client';
+import React from 'react';
 import { Info, Topics } from '@/config/content/Statistics/CardData';
 import { Table } from 'flowbite-react';
 
 export const Card = () => {
   return (
-    <>
+    <div className='p-4 flex justify-center items-center'>
       <div
+        className='w-full max-w-7xl bg-black rounded-lg shadow-lg overflow-hidden'
         style={{ boxShadow: '0px 4px 31px 0px rgba(255, 255, 255, 0.25)' }}
-        className='w-auto md:max-w-[1200px] min-h-[400px] md:min-h-[548px] h-auto bg-[#091123] rounded-[16px] md:rounded-[24px] p-4 md:p-12 lg:p-24 mx-auto content-center'
       >
-        <div className='w-full text-center font-orbitron mb-6 md:mb-12 font-semibold text-[14px] sm:text-[16px] md:text-[24px] lg:text-[32px] leading-[22px] md:leading-[40.13px]'>
-          Top College Registered for Innovision
+        <div className='p-4 sm:p-6 md:p-8 lg:p-10'>
+          <h2 className='text-center font-orbitron font-semibold text-white text-lg sm:text-xl md:text-2xl lg:text-3xl mb-4 sm:mb-6 md:mb-8'>
+            Top Colleges Registered for Innovision
+          </h2>
+          <div className='overflow-x-auto'>
+            <Table className='w-full'>
+              <Table.Head>
+                {Topics.map((topic, index) => (
+                  <Table.HeadCell
+                    key={index}
+                    className='font-orbitron font-bold text-center text-xs sm:text-sm md:text-base lg:text-lg py-2 sm:py-3 border-b border-gray-700'
+                  >
+                    {topic}
+                  </Table.HeadCell>
+                ))}
+              </Table.Head>
+              <Table.Body className='divide-y divide-gray-700'>
+                {Info.map((item, i) => (
+                  <Table.Row className='hover:bg-gray-800 transition-all' key={i}>
+                    <Table.Cell className='font-montserrat text-white text-center font-medium text-xs sm:text-sm md:text-base py-2 sm:py-3'>
+                      {item.Rank}
+                    </Table.Cell>
+                    <Table.Cell className='font-montserrat text-white text-center font-medium text-xs sm:text-sm md:text-base py-2 sm:py-3'>
+                      {item.college}
+                    </Table.Cell>
+                  </Table.Row>
+                ))}
+              </Table.Body>
+            </Table>
+          </div>
         </div>
-
-        <Table className='w-full'>
-          <Table.Head>
-            {Topics.map((topic, index) => (
-              <Table.HeadCell
-                key={index}
-                className='font-orbitron font-bold text-center text-[8px] xsm:text-[10px] sm:text-[12px] md:text-[16px] lg:text-[20px] leading-[12px] md:leading-[24px] pb-2 md:pb-4 border-b border-gray-700'
-              >
-                {topic}
-              </Table.HeadCell>
-            ))}
-          </Table.Head>
-
-          <Table.Body className='divide-y divide-gray-700'>
-            {Info.map((item, i) => (
-              <Table.Row className='hover:bg-gray-800 transition-all' key={i}>
-                <Table.Cell className='font-montserrat text-[#FFF7F7] text-center font-medium text-[8px] sm:text-[10px] md:text-[14px] lg:text-[16px] leading-[12px] sm:leading-[18px] md:leading-[22px]'>
-                  {item.Rank}
-                </Table.Cell>
-                <Table.Cell className='font-montserrat text-center font-medium text-[8px] sm:text-[10px] md:text-[14px] lg:text-[16px] leading-[12px] sm:leading-[18px] md:leading-[22px]'>
-                  {item.college}
-                </Table.Cell>
-              </Table.Row>
-            ))}
-          </Table.Body>
-        </Table>
       </div>
-    </>
+    </div>
   );
 };
+
+export default Card;

src/components/Statistics/wrapper/Body.jsx

@@ -4,7 +4,7 @@ import { GraphMain } from '../PiChart/main';
 export const Body = () => {
   return (
     <>
-      <div className='flex flex-col justify-center items-center gap-10 p-20 bg-black bg-opacity-50'>
+      <div className='flex flex-col justify-center items-center gap-10 py-20 md:p-20 bg-black bg-opacity-50 min-h-[100vh]'>
         <div className='flex justify-center items-center'>
           <Card />
         </div>

src/config/content/Registration/details.js

@@ -240,7 +240,7 @@ export const buttonImage =
 export const beamImage =
   'https://res.cloudinary.com/dmvdbpyqk/image/upload/v1728811020/Line_10_aeg3tc.png';
 
-export const campusAbassadorPara = `To become a Campus Ambassador for Innovision 2024, use the referall code below to get 50+ registrations and earn a certificate along with exclusive goodies!!`;
+export const campusAbassadorPara = `To become a Campus Ambassador for Innovision 2024, use the referral code below to get 50+ registrations and earn a certificate along with exclusive goodies!!`;
 
 export const notAllowedInstitutes = [
   "Siksha 'O' Anusandhan ",