Updated Modals and Minor UI Changes (#186)

* refactor: minor ui update

* feat: add modals for terms&conditions and code of conduct

src/components/EventsSection/Header.jsx/SubHeader.jsx

@@ -22,13 +22,13 @@ export const SubHeader = () => {
       }, 23);
 
       const daysInterval = setInterval(() => {
-        if (daysStart < 43) {
+        if (daysStart < 3) {
           daysStart += 1;
           setDaysCount(daysStart);
         } else {
           clearInterval(daysInterval);
         }
-      }, 40);
+      }, 150);
 
       return () => {
         clearInterval(eventsInterval);

src/components/EventsSection/eventCardComponents/EventCard.jsx

@@ -13,7 +13,7 @@ export const EventCard = ({ label, isTranslatedUp }) => {
         }}
         className=' w-[270px] xxsm:w-[310px] xsm:w-[347px] h-[416px]  flex justify-center items-center text-[24px] font-spaceX leading-[37px] break-words text-center rounded-3xl'
       >
-        <Image src={label} alt='alt' fill style={{ objectFit: 'cover', borderRadius: '4px' }} />
+        <Image src={label} alt='alt' fill style={{ objectFit: 'fill', borderRadius: '4px' }} />
       </div>
     </>
   );

src/components/Marginals/Footer/Footer.jsx

@@ -1,7 +1,7 @@
 import Image from 'next/image';
 import { socials, secondcol, thirdcol, footerBottom, firstcol } from '@/config/content/Footer';
 import Link from 'next/link';
-import MapModal from './MapModal';
+import MapModal from './ModalComponents/MapModal';
 import { List, SmallList } from '../../shared/Typography/Lists';
 
 import {
@@ -27,13 +27,25 @@ import {
   SocialImageContainer,
 } from './styles';
 import { LogoText2 } from '../../shared/Typography/Headings';
-import { PaymentPolicyModal } from './PaymentPolicyModel';
+import { PaymentPolicyModal } from './ModalComponents/PaymentPolicyModel';
+import { CodeOfConductModal } from './ModalComponents/CodeOfConductModal';
+import { TermAndConditionModal } from './ModalComponents/TermAndConditionsModal';
 import { useState } from 'react';
 
 export const Footer = () => {
-  const [isRegisterModalOpen, setIsRegisterModalOpen] = useState(false);
-  const handleRegisterModalOpen = () => setIsRegisterModalOpen(true);
-  const handleRegisterModalClose = () => setIsRegisterModalOpen(false);
+  const [isCodeOfConductModalOpen, setIsCodeOfConductModalOpen] = useState(false);
+  const [isPaymentPolicyModalOpen, setIsPaymentPolicyModalOpen] = useState(false);
+  const [isTermsAndConditionsModalOpen, setIsTermsAndConditionsModalOpen] = useState(false);
+
+  const handleCodeOfConductModalOpen = () => setIsCodeOfConductModalOpen(true);
+  const handleCodeOfConductModalClose = () => setIsCodeOfConductModalOpen(false);
+
+  const handlePaymentPolicyModalOpen = () => setIsPaymentPolicyModalOpen(true);
+  const handlePaymentPolicyModalClose = () => setIsPaymentPolicyModalOpen(false);
+
+  const handleTermsAndConditionsModalOpen = () => setIsTermsAndConditionsModalOpen(true);
+  const handleTermsAndConditionsModalClose = () => setIsTermsAndConditionsModalOpen(false);
+
   return (
     <>
       <FooterContainer id='contact'>
@@ -96,8 +108,12 @@ export const Footer = () => {
             <FooterBottomContent>
               {footerBottom.map((item) => (
                 <SmallList key={item.id} className='flex gap-[20px]'>
-                  {item.id === 4 ? (
-                    <button onClick={handleRegisterModalOpen}>{item.title}</button>
+                  {item.id === 2 ? (
+                    <button onClick={handleTermsAndConditionsModalOpen}>{item.title}</button>
+                  ) : item.id === 3 ? (
+                    <button onClick={handleCodeOfConductModalOpen}>{item.title}</button>
+                  ) : item.id === 4 ? (
+                    <button onClick={handlePaymentPolicyModalOpen}>{item.title}</button>
                   ) : (
                     <a href={item.url} target='_blank' rel='noopener noreferrer'>
                       {item.title}
@@ -109,7 +125,18 @@ export const Footer = () => {
           </FooterBottom>
         </FooterWrapper>
       </FooterContainer>
-      <PaymentPolicyModal isOpen={isRegisterModalOpen} onClose={handleRegisterModalClose} />
+      <TermAndConditionModal
+        isOpen={isTermsAndConditionsModalOpen}
+        onClose={handleTermsAndConditionsModalClose}
+      />
+      <CodeOfConductModal
+        isOpen={isCodeOfConductModalOpen}
+        onClose={handleCodeOfConductModalClose}
+      />
+      <PaymentPolicyModal
+        isOpen={isPaymentPolicyModalOpen}
+        onClose={handlePaymentPolicyModalClose}
+      />
     </>
   );
 };

src/components/Marginals/Footer/ModalComponents/CodeOfConductModal.jsx

@@ -0,0 +1,47 @@
+import { Modal, ModalContent, ModalBody, Button } from '@nextui-org/react';
+import { Fragment } from 'react';
+import { closeIcon, CodeOfConductModalData } from '@/config/content/Footer';
+import Image from 'next/image';
+import { ModalText, Para } from '../styles';
+
+export const CodeOfConductModal = ({ isOpen, onClose }) => {
+  return (
+    <Modal
+      size='lg'
+      isOpen={isOpen}
+      onClose={onClose}
+      backdrop='opaque'
+      hideCloseButton={true}
+      placement='center'
+      className='backdrop-blur-2xl border-2 border-[#00FFD1] p-5'
+      scrollBehavior='inside'
+    >
+      <ModalContent className='relative bg-[#0000002a] max-h-[60vh] overflow-y-auto p-5'>
+        <Button
+          color='danger'
+          variant='light'
+          onPress={onClose}
+          className='absolute top-3 right-3 z-10'
+        >
+          <Image src={closeIcon} alt='close' width={30} height={30} />
+        </Button>
+        <ModalBody className='w-full h-full flex flex-col justify-start items-start overflow-y-auto py-8'>
+          {CodeOfConductModalData.map((items, index) => (
+            <div key={index} className='w-full mb-4'>
+              <ModalText>{items.title}</ModalText>
+              <Para className='mt-2'>
+                {items.description.split('•').map((part, index) => (
+                  <Fragment key={index}>
+                    {part}
+                    {index < items.description.split('•').length - 1 && <br />}
+                    {index < items.description.split('•').length - 1 && '•'}
+                  </Fragment>
+                ))}
+              </Para>
+            </div>
+          ))}
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+};

src/components/Marginals/Footer/MapModal.jsx → src/components/Marginals/Footer/ModalComponents/MapModal.jsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { Modal, ModalContent, ModalBody, Button } from '@nextui-org/react';
 import Image from 'next/image';
-import { List } from '../../shared/Typography/Lists';
+import { List } from '../../../shared/Typography/Lists';
 import { closeIcon, mapSize } from '@/config/content/Footer';
 
 export default function MapModal() {

src/components/Marginals/Footer/PaymentPolicyModel.jsx → src/components/Marginals/Footer/ModalComponents/PaymentPolicyModel.jsx

@@ -1,7 +1,7 @@
 import { Modal, ModalContent, ModalBody, Button } from '@nextui-org/react';
 import { closeIcon, PaymentPolicyModalData } from '@/config/content/Footer';
 import Image from 'next/image';
-import { ModalText, Para } from './styles';
+import { ModalText, Para } from '.././styles';
 
 export const PaymentPolicyModal = ({ isOpen, onClose }) => {
   return (

src/components/Marginals/Footer/ModalComponents/TermAndConditionsModal.jsx

@@ -0,0 +1,47 @@
+import { Modal, ModalContent, ModalBody, Button } from '@nextui-org/react';
+import { closeIcon, TermsAndConditionsModalData } from '@/config/content/Footer';
+import { Fragment } from 'react';
+import Image from 'next/image';
+import { ModalText, Para } from '../styles';
+
+export const TermAndConditionModal = ({ isOpen, onClose }) => {
+  return (
+    <Modal
+      size='lg'
+      isOpen={isOpen}
+      onClose={onClose}
+      backdrop='opaque'
+      hideCloseButton={true}
+      placement='center'
+      className='backdrop-blur-2xl border-2 border-[#00FFD1] p-5'
+      scrollBehavior='inside'
+    >
+      <ModalContent className='relative bg-[#0000002a] max-h-[60vh] overflow-y-auto p-5'>
+        <Button
+          color='danger'
+          variant='light'
+          onPress={onClose}
+          className='absolute top-3 right-3 z-10'
+        >
+          <Image src={closeIcon} alt='close' width={30} height={30} />
+        </Button>
+        <ModalBody className='w-full py-8 text-monteserrat h-full flex flex-col justify-start items-start overflow-y-auto'>
+          {TermsAndConditionsModalData.map((items, index) => (
+            <div key={index} className='w-full mb-4'>
+              <ModalText>{items.title}</ModalText>
+              <Para className='mt-2'>
+                {items.description.split('●').map((part, index) => (
+                  <Fragment key={index}>
+                    {part}
+                    {index < items.description.split('●').length - 1 && <br />}
+                    {index < items.description.split('●').length - 1 && '●'}
+                  </Fragment>
+                ))}
+              </Para>
+            </div>
+          ))}
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+};

src/config/content/Footer.js

@@ -111,3 +111,39 @@ export const PaymentPolicyModalData = [
       'There will be no refund of the registration fees under any circumstances unless the fest is cancelled by team Innovision.',
   },
 ];
+
+export const CodeOfConductModalData = [
+  {
+    title: 'CODE OF CONDUCT FOR INNOVISION 2024',
+    description:
+      '• Participants must comply with the event schedule and rules. • Consumption of alcohol or any narcotic substance is strictly prohibited. • All attendees are expected to behave respectfully and professionally. Any instance of a misdemeanour will not be tolerated.• If the actions of any individual are found destructive to property or any individual, rightful action would be taken. • All the participants must carry an ID card and necessary identification documents. • Any disrespectful remark or abuse would be liable to severe punishment. • The conference must not be used as a platform for promotion or any event unless determined by the fest organisers. • Buying and selling of things, equipment, or substances is prohibited. If any participant is found not complying with any of the aforementioned points, they will be subject to action according to the guidelines of NIT Rourkela.',
+  },
+  {
+    title: 'CANCELLATION AND REFUNDS',
+    description:
+      '• The event organisers reserve the right to cancel or reschedule any event.• All the monetary transactions are non-refundable at all points in time.',
+  },
+  {
+    title: 'CHANGES TO TERMS AND CONDITIONS',
+    description:
+      'The event organisers may modify these terms and conditions at their discretion. Attendees will be notified of any changes.',
+  },
+];
+
+export const TermsAndConditionsModalData = [
+  {
+    title: 'Welcome to Innovision 2024!',
+    description:
+      'The website linked gives you the outline of our protocols. If you agree to the set of terms and conditions you are welcomed as an entrant and will be redirected to proceed further.',
+  },
+  {
+    title: 'Licence',
+    description:
+      'Unless otherwise stated, Innovision and/or its licensors own the intellectual property rights for all material on Innovision 2024. All intellectual property rights are reserved. You may access this from Innovision 2024 for your personal use subject to restrictions set in these terms and conditions.You must not: ● Copy or republish material from Innovision 2024 ● Sell, rent, or sub-license material from Innovision 2024 ● Reproduce, duplicate or copy material from Innovision 2024 ● Redistribute content from Innovision 2024.This Agreement shall begin on the date hereof.',
+  },
+  {
+    title: 'Disclaimer',
+    description:
+      'To the maximum permitted visitors conduct, nothing in this disclaimer will: limit or exclude our or your liability for death or personal injury; limit or exclude our or your liability for fraud or fraudulent misrepresentation; limit any of our or your liabilities in any way that is not permitted under applicable law; or exclude any of our or your liabilities that may not be excluded under applicable law. The limitations and prohibitions of liability set in this section and elsewhere in this disclaimer: (a) are subject to the preceding paragraph; and (b) govern all liabilities arising under the disclaimer, including liabilities arising in contract, in tort, and for breach of statutory duty. As the website can be accessed by all verified visitors, we shall not uphold any liability for any damage.',
+  },
+];