fixes

src/components/marginals/Nav_Hero/Description.jsx

@@ -4,7 +4,8 @@ import {
   ButtonContainer,
   DescriptionContainer,
   DescriptionParagraph,
-  DescriptionTitle
+  DescriptionTitle,
+  PaymentButton
 } from './Description.styles'
 import { DescriptionContent } from '../../../config/index'
 import { ButtonWrapper } from './Description.styles'
@@ -25,7 +26,13 @@ const Description = () => {
       <ButtonWrapper>
         <ButtonContainer>
           <HelpButton onClick={redirect}>{DescriptionContent.HeroButton}</HelpButton>
-          {!userInfo.name && (
+          {userInfo.name ? (
+            <PaymentButton>
+              <Link target="_blank" to={DescriptionContent.paymentLink}>
+                Pay Now
+              </Link>
+            </PaymentButton>
+          ) : (
             <Link to="/register">
               <RegisterButton>{DescriptionContent.RegisterButton}</RegisterButton>
             </Link>

src/components/marginals/Nav_Hero/Description.styles.jsx

@@ -108,7 +108,33 @@ export const InnerSpan = styled.span`
 export const RegisterButton = styled.button`
   ${tw`
   px-2 
-  py-2
+  py-2 
+  w-full
+  0.4xsm:w-[140px]
+  rounded-[11.53px] 
+  bg-orange-1 
+  text-brown-5 
+  font-semibold 
+  text-1.5lg 
+  md:text-2xl  
+  border-brown-5 
+  border-2 
+  transition 
+  duration-300 
+  ease-in-out 
+  active:transform 
+  active:translate-x-[3px] 
+  active:translate-y-[3px] 
+  active:shadow-none 
+  shadow-[3px 3px 0px #1d1d1d ]`}
+`
+
+export const PaymentButton = styled.button`
+  ${tw`
+  px-2 
+  py-2 
+  w-full
+  0.4xsm:w-[140px]
   rounded-[11.53px] 
   bg-orange-1 
   text-brown-5 

src/components/marginals/Nav_Hero/Nav.jsx

@@ -57,7 +57,6 @@ const Nav = () => {
 
   function onClick(id) {
     handleScroll(id)
-    console.log(id)
     handleToggle()
   }
 
@@ -92,10 +91,6 @@ const Nav = () => {
         </Menu>
 
         {userInfo.name ? (
-          // <Link to="/" onClick={handleSignOut}>
-          //   <Register>Logout</Register>
-          // </Link>
-
           <ProfileBtn onMouseEnter={() => setProfileOpen(true)}>
             <ProfileMenu isProfileOpen={profileOpen} setProfileOpen={setProfileOpen} />
           </ProfileBtn>
@@ -115,16 +110,13 @@ const Nav = () => {
         <ResMen>
           <ResList>
             {userInfo.name ? (
-              // <Link to="/" onClick={handleSignOut}>
-              //   <SecRegister>Logout</SecRegister>
-              // </Link>
               <button onClick={handleProfileOpen}>
                 <ProfileMenu isProfileOpen={profileOpen} setProfileOpen={setProfileOpen} />
               </button>
             ) : (
-              <button to="/register">
-                <SecRegister>Register...</SecRegister>
-              </button>
+              <Link to="/register">
+                <SecRegister>Register</SecRegister>
+              </Link>
             )}
             {navLinks.map((navLink) => (
               <ResItem key={navLink.id}>

src/components/marginals/Nav_Hero/ProfileMenu.jsx

@@ -28,7 +28,6 @@ function ProfileMenu({ isProfileOpen, setProfileOpen }) {
       setUid(userInfo.uid)
       if (userDataInDb?.getUser) {
         setUser(userDataInDb.getUser)
-        // console.log(userDataInDb.getUser)
       }
     }
   }, [userInfo, userDataInDb, uid])

src/components/marginals/Nav_Hero/ProfileMenu.styles.jsx

@@ -89,10 +89,19 @@ export const ProfileDropDownItem = styled.div`
 export const NotRegistered = styled.div`
   ${tw`
   text-lg
-  text-brown-2
+  bg-[#1D1D1D]
+  text-[#FFEEDA]
+  rounded-md
+  py-2
+  px-4
   font-Poppins
   font-[500]
   text-center
+  hover:bg-[#FFEEDA]
+  hover:text-[#1D1D1D]
+  active:scale-95
+  duration-300
+  ease-in-out
   `}
 `
 
@@ -126,3 +135,21 @@ export const LogoutButton = styled.button`
   active:scale-95
   `}
 `
+export const PaymentButton = styled.button`
+  ${tw`
+  mt-5
+  bg-orange-1
+  text-[#FFEEDA]
+  rounded-md
+  py-2
+  px-4
+  cursor-pointer
+  font-[500]
+  font-Poppins
+  duration-300
+  ease-in-out
+  hover:bg-[#FFEEDA]
+  hover:text-[#1D1D1D]
+  active:scale-95
+  `}
+`

src/components/marginals/Nav_Hero/ProfileMenuDropDown.jsx

@@ -13,9 +13,12 @@ import {
   NotRegistered,
   ProfileDropDown,
   ProfileDropDownItem,
-  Value
+  Value,
+  PaymentButton
 } from './ProfileMenu.styles'
 
+import { DescriptionContent } from '../../../config/index'
+
 ProfileMenuDropDown.propTypes = {
   setProfileOpen: propTypes.func,
   user: propTypes.object
@@ -47,6 +50,12 @@ function ProfileMenuDropDown({ setProfileOpen, user }) {
                 <Label>{detail.label}:</Label> <Value>{detail.value}</Value>
               </ProfileDropDownItem>
             ))}
+            <PaymentButton>
+              <Link target="_blank" to={DescriptionContent.paymentLink}>
+                {' '}
+                Pay Now
+              </Link>
+            </PaymentButton>
             <LogoutButton onClick={logout}>Logout</LogoutButton>
           </>
         ) : (

src/components/marginals/footer/Footer.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
-import { toast } from 'react-toastify'
-
+import { useState } from 'react'
 import footerData from '../../../config/content/footerData/Footer.js'
+import Modal from '../../modal/Modal'
 // import React from "react";
 import {
   AicheLogo1,
@@ -39,29 +39,20 @@ RenderListItem.propTypes = {
 }
 
 export default function MyFooter() {
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const openModal = () => setIsModalOpen(true)
+  const closeModal = () => setIsModalOpen(false)
   function showLocation() {
-    toast(
-      <IframeContainer>
-        <Iframe src={footerData.images.map.src} title={footerData.images.map.title} />
-      </IframeContainer>,
-
-      {
-        position: 'bottom-left',
-        autoClose: false,
-        hideProgressBar: true,
-        draggable: true,
-
-        theme: 'dark',
-        style: {
-          width: '200%',
-          height: '100%'
-        }
-      }
-    )
+    openModal()
   }
 
   return (
     <>
+      <Modal open={isModalOpen} onClose={closeModal}>
+        <IframeContainer>
+          <Iframe src={footerData.images.map.src} title={footerData.images.map.title} />
+        </IframeContainer>
+      </Modal>
       <Footer id="contact">
         <FooterTop>
           <Logos>

src/components/modal/Modal.jsx

@@ -0,0 +1,26 @@
+// Modal.js
+import ReactDOM from 'react-dom'
+import { Overlay, ModalContainer, CloseButton } from './Modal.styles'
+import PropTypes from 'prop-types'
+
+const Modal = ({ children, open, onClose }) => {
+  if (!open) return null
+
+  return ReactDOM.createPortal(
+    <Overlay onClick={onClose}>
+      <ModalContainer onClick={(e) => e.stopPropagation()}>
+        <CloseButton onClick={onClose}>&times;</CloseButton>
+        {children}
+      </ModalContainer>
+    </Overlay>,
+    document.getElementById('overlay')
+  )
+}
+
+Modal.propTypes = {
+  children: PropTypes.node.isRequired,
+  open: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired
+}
+
+export default Modal

src/components/modal/Modal.styles.jsx

@@ -0,0 +1,21 @@
+// Modal.styles.jsx
+import tw from 'twin.macro'
+import styled from 'styled-components'
+
+export const Overlay = styled.div`
+  ${tw`fixed inset-0 bg-black-1 bg-opacity-50 flex items-center justify-center`}
+  z-index: 50;
+`
+
+export const ModalContainer = styled.div`
+  ${tw`bg-white-1 p-1 0.4xsm:p-6 rounded-lg shadow-lg relative`}
+  width: 90%;
+  max-width: 500px;
+`
+
+export const CloseButton = styled.button`
+  ${tw`absolute top-0 right-0 mt-0 mr-2 rounded-full text-red-500 text-2xl 0.4xsm:text-5xl`}
+  background: none;
+  border: none;
+  cursor: pointer;
+`

src/components/registrationForm/InputField.jsx

@@ -15,12 +15,18 @@ function InputField({
   input: { id, label, placeholder, type, extras },
   handleFormData,
   value,
-  error
+  error,
+  showTshirtSizes
 }) {
   const handleChange = (e) => {
     handleFormData(id, e.target.value)
   }
 
+  function handleTshirtCLick(e) {
+    e.preventDefault()
+    showTshirtSizes()
+  }
+
   return (
     <InputContainer key={id}>
       <Label htmlFor={id}>{label}</Label>
@@ -33,7 +39,7 @@ function InputField({
           onChange={handleChange}
         />
         {extras && (
-          <InfoBtn>
+          <InfoBtn onClick={(e) => handleTshirtCLick(e)}>
             <Info src={info} alt="info-icon" />
           </InfoBtn>
         )}
@@ -59,7 +65,8 @@ InputField.propTypes = {
   }).isRequired,
   handleFormData: PropTypes.func.isRequired,
   value: PropTypes.string,
-  error: PropTypes.string
+  error: PropTypes.string,
+  showTshirtSizes: PropTypes.func
 }
 
 export default InputField

src/components/registrationForm/RegisterForm.styles.jsx

@@ -21,7 +21,7 @@ export const DateTxT = styled.h1`
   ${tw`text-brown-2 2.7md:text-4xl font-semibold text-3xl`}
 `
 export const FormContainer = styled.form`
-  ${tw`flex flex-col justify-center items-center h-full w-full gap-[24px] md:gap-4 py-5 md:py-10 px-4 md:px-14 bg-transparent`}
+  ${tw`flex flex-col justify-center items-center h-full w-full gap-[24px] md:gap-4 py-5 md:py-16 px-4 md:px-14 bg-transparent`}
 `
 
 export const SignInContainer = styled.div`
@@ -56,3 +56,10 @@ export const MobileHeader = styled.div`
 export const MobileDate = styled.h1`
   ${tw`text-brown-4 text-[23px] font-[600]`}
 `
+
+export const TshirtContainer = styled.div`
+  ${tw`flex flex-col justify-center items-center w-full`}
+`
+export const TshirtImage = styled.img`
+  ${tw`w-full`}
+`