fix

src/components/shared/Register/Final.jsx

@@ -0,0 +1,68 @@
+import { useState } from 'react';
+import Payment from './Payment';
+import UPI from './UPI';
+import Heading from '../typography/Heading';
+import Paragraph from '../typography/Paragraph';
+
+function Final() {
+	const [isPayment, setIsPayment] = useState(true);
+
+	const switchToPayment = () => {
+		setIsPayment(true);
+	};
+
+	const switchToUPI = () => {
+		setIsPayment(false);
+	};
+
+	return (
+		<>
+			<div className='container mx-auto px-4 lg:px-0'>
+				<Heading
+					variant='h2'
+					className='text-primary-yellow'
+					style={{
+						textShadow: '1.7px 1.7px 0px #000000',
+						WebkitTextStrokeWidth: 1,
+						WebkitTextStrokeColor: 'black',
+					}}>
+					Payment
+				</Heading>
+				<Paragraph variant='body3'>Send an email to [email protected] with a screenshot of your payment.</Paragraph>
+			</div>
+
+			<div className='container mx-auto px-4 lg:px-0'>
+				<div className='border border-solid border-black p-4 lg:w-1/2 lg:mx-auto'>
+					<Heading variant='h3' className='text-center my-8 lg:my-5'>
+						Payment method we have
+					</Heading>
+					<div className='text-center'>
+						<div className='flex flex-col lg:flex-row justify-center lg:space-x-4 mt-9'>
+							<div className='flex justify-center space-x-4 mt-4 relative'>
+								<button
+									className={`px-4 py-2 rounded-lg border-2 border-black ${isPayment ? 'bg-orange-500 text-white' : 'bg-white text-black'}`}
+									onClick={switchToPayment}
+									style={{ zIndex: 9 }}>
+									Bank Transaction
+								</button>
+								<button
+									className={`px-4 py-2 rounded-lg border-2 border-black ${!isPayment ? 'bg-orange-500 text-white' : 'bg-white text-black'}`}
+									onClick={switchToUPI}
+									style={{ zIndex: 9 }}>
+									Via UPI using QR
+								</button>
+							</div>
+						</div>
+					</div>
+					{isPayment ? <Payment /> : <UPI />}
+				</div>
+			</div>
+
+			<Heading variant='body3' className='text-primary-foreground flex justify-center'>
+				Please contact the organizers if you want to pay in installments or one of the above methods do not work for you.
+			</Heading>
+		</>
+	);
+}
+
+export default Final;

src/components/shared/Register/Payment.jsx

@@ -0,0 +1,22 @@
+import Paragraph from '../typography/Paragraph';
+import { Paymentdata } from '../../../data/Paymentdata';
+export default function Payment() {
+	return (
+		<>
+			<div className='container mx-auto px-4 lg:px-0 flex justify-center'>
+				<div className='p-4 w-full lg:w-3/4'>
+					<Paragraph variant='body3' className='text-center mb-8 lg:mb-4 mt-11'>
+						Preferred method: Transfer funds from your bank to our CURRENT account
+					</Paragraph>
+					<div className='flex flex-col items-center'>
+						{Paymentdata.map((item, index) => (
+							<Paragraph variant='body3' key={index} className='text-center lg:mb-4'>
+								{item}
+							</Paragraph>
+						))}
+					</div>
+				</div>
+			</div>
+		</>
+	);
+}

src/components/shared/Register/Register.jsx

@@ -0,0 +1,49 @@
+import Heading from '../typography/Heading';
+import Paragraph from '../typography/Paragraph';
+import { Stepstoregister } from '../../../data/Registerdata';
+
+export default function Register() {
+	return (
+		<>
+			<div className='container'>
+				<Heading
+					variant='h1'
+					className='text-primary-yellow flex justify-center '
+					style={{
+						textShadow: ' 2.7px 2.7px 0px #000000',
+						WebkitTextStrokeWidth: 2,
+						WebkitTextStrokeColor: '#252525',
+					}}>
+					Registration
+				</Heading>
+				<Heading variant='h3' className='flex flex-col justify-center items-center md:flex-row md:justify-center'>
+					<span>Already registered? </span>
+					<span className='text-primary-foreground'>Sign in </span>{' '}
+				</Heading>
+			</div>
+
+			<div className='container mx-auto px-4 lg:px-0'>
+				<Heading
+					variant='h2'
+					className='text-primary-yellow'
+					style={{
+						textShadow: '1.7px 1.7px 0px #000000',
+						WebkitTextStrokeWidth: 1,
+						WebkitTextStrokeColor: 'black',
+					}}>
+					Steps
+				</Heading>
+
+				<ul className='list-disc mx-3 my-5'>
+					{Stepstoregister.map((item, index) => (
+						<li key={index}>
+							<Paragraph variant='body2' key={index}>
+								{item}
+							</Paragraph>
+						</li>
+					))}
+				</ul>
+			</div>
+		</>
+	);
+}

src/components/shared/Register/UPI.jsx

@@ -0,0 +1,26 @@
+import Paragraph from '../typography/Paragraph';
+import { UPIdata } from '../../../data/Paymentdata';
+// import '../../../assets/images/Scanner.png';
+export default function UPI() {
+	return (
+		<>
+			<div className='container mx-auto px-4 lg:px-0 flex justify-center'>
+				<div className='border border-black p-4 w-1/2'>
+					<div className='flex flex-col items-center'>
+						{UPIdata.slice(0, 1).map((item, index) => (
+							<Paragraph variant='body3' key={index} className='text-center lg:mb-4'>
+								{item}
+							</Paragraph>
+						))}
+						{/* <img src='Scanner.png' alt='Scannerimage' className='w-64 h-64 object-cover' /> */}
+						{UPIdata.slice(1).map((item, index) => (
+							<Paragraph variant='body3' key={index} className='text-center lg:mb-4'>
+								{item}
+							</Paragraph>
+						))}
+					</div>
+				</div>
+			</div>
+		</>
+	);
+}

src/data/Paymentdata.jsx

@@ -0,0 +1,10 @@
+export const Paymentdata = [
+	'Bank: State Bank of India',
+	'Account name:NIT Rourkela 1998 Alumni',
+	'Account number:41728775160(Current Account)',
+	'IFSC Code:SBIN0002109',
+	'MICR Code:769002007',
+	'Branch Code: 002109',
+];
+
+export const UPIdata = ['SCAN and PAY', 'NIT ROURKELA 1999 ALUMNI', 'UPI ID:41728775160@SBI'];

src/data/Registerdata.jsx

@@ -0,0 +1,6 @@
+export const Stepstoregister = [
+	' Register using the form below.',
+	'Make payment using our bank account information.While making the payment, please include the following information in the memo / remarks field. Your roll number (1 letter followed by 4 digits), then your firstname, then your lastname.eg: M4303 Bishwanath Sahoo. If firstname and lastname combo is too long, use shortenedname.',
+	'Send an email to [email protected] with screenshot of your payment.',
+	'The Organizing team will send confirmation email within 48 hours. ',
+];

src/pages/playground.jsx

@@ -1,5 +1,7 @@
 import { Heading, HeroText, Paragraph, PersonalizedText, Text } from '../components/shared';
 import Footer from '../components/shared/marginals/footer.jsx';
+import Final from '../components/shared/Register/Final.jsx';
+import Register from '../components/shared/Register/Register.jsx';
 
 export default function Playground() {
 	return (
@@ -29,7 +31,8 @@ export default function Playground() {
 					<li className='text-black-foreground'>Black Foreground</li>
 				</ul>
 			</div>
-
+			<Register />
+			<Final />
 			<Footer />
 		</>
 	);