feat: added receipt submission form

src/components/payment/Final.jsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { PaymentCont, UPI } from './Payment';
+import { PaymentCont, SubmissionForm, UPI } from './Payment';
 import { Heading, Paragraph } from '../shared';
 import { Contactorg, Emaildata } from '../../data/paymentData';
 
@@ -27,8 +27,8 @@ function Final() {
 					<Heading variant='h3' className='text-center lg:my-3'>
 						Payment method we have
 					</Heading>
-					<div className='bg-white text-black rounded-2xl border-[1.5px] border-solid border-black text-center flex flex-col lg:flex-row justify-center  w-auto'>
-						<div className='flex justify-center space-x-4 relative'>
+					<div className='bg-white text-black rounded-2xl border-[1.5px] border-solid border-black text-center flex flex-col lg:flex-row justify-center w-auto my-2'>
+						<div className='flex justify-center space-x-4 relative '>
 							<button
 								className={`px-6 py-1 rounded-2xl  ${isUPI ? 'border-2 border-black bg-orange-500 text-white' : 'bg-white text-black'}`}
 								onClick={() => {
@@ -50,6 +50,8 @@ function Final() {
 
 					{isUPI ? <PaymentCont /> : <UPI />}
 				</div>
+
+				<SubmissionForm />
 			</div>
 
 			<Heading variant='body3' className='text-primary-foreground flex justify-center'>

src/components/payment/Payment.jsx

@@ -1,10 +1,11 @@
 import { Paragraph } from '../shared';
+import './input.styles.css';
 import { Paymentdata, UPIdata } from '../../data/paymentData';
 
 export const PaymentCont = () => {
 	return (
 		<>
-			<div className='container  px-4 lg:px-0 flex justify-center items-center	'>
+			<div className='container px-4 lg:px-0 flex justify-center items-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
@@ -49,3 +50,25 @@ export const UPI = () => {
 		</>
 	);
 };
+
+export const SubmissionForm = () => {
+	return (
+		<div className=' py-8 flex flex-col items-center ' style={{ border: '1px solid red' }}>
+			<input
+				type='file'
+				name='receipt'
+				className={
+					'border divide-solid border-[#FF7647] outline-none bg-inherit rounded-md my-1 my-6 text-[#B0B0B0] p-2 w-[470px]'
+				}
+				style={{ boxShadow: '2px 2px 0px 0px black' }}
+			/>
+			<button
+				className='border border-black bg-[#FF7647] text-black px-4 py-2 rounded-2xl m-6 w-[470px]'
+				style={{ boxShadow: '2px 2px 0px 0px black' }}>
+				<Paragraph variant='body3' className='inline mx-auto text-xl'>
+					Submit
+				</Paragraph>
+			</button>
+		</div>
+	);
+};

src/components/payment/input.styles.css

@@ -0,0 +1,18 @@
+input[type='file']::file-selector-button {
+	background-color: #ff7647;
+	background: url('https://res.cloudinary.com/djl2ulktr/image/upload/v1713122470/receiptSubmit_fhbpjx.png') no-repeat;
+	cursor: pointer;
+	color: rgba(0, 0, 0, 0);
+	border: none;
+	width: 490px;
+	padding: 0.2em;
+	margin: 0vw 0.3vw;
+	transition: 1s;
+
+	@media only screen and (max-width: 970px) {
+		width: 60px;
+	}
+	@media only screen and (max-width: 768px) {
+		width: 110px;
+	}
+}