Develop

src/App.jsx

@@ -11,9 +11,12 @@ import ErrorPage from './components/ErrorPage';
 import About from './pages/About';
 import Landing from './pages/Home';
 import Student from './pages/Student';
+
 import Album_Image from './components/Album_Image_Components/Album_Image';
 import ContactUs from './pages/ContactUs';
 import Loader from './components/Loader';
+import Admission from './pages/Admission';
+
 const App = () => {
   useEffect(() => {
     window.onload = () => {
@@ -44,6 +47,10 @@ const App = () => {
             <Route
               path='/student'
               element={<Student />}
+            ></Route>
+             <Route
+              path='/admission'
+              element={<Admission />}
             ></Route>
             <Route
               path='/album/:name'

src/components/admissionComponents/AdmissionForm.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import Steps from './Steps.jsx';
+
+const AdmissionForm = () => {
+  return (
+    <div className='px-[3vw] text-[#333333] bg-[#D7D7D726] pb-[6vw] pt-[3vw]'>
+      <div className='font-[400] lg:w-[60%] text-[18px]'>
+        <span className='font-[700]'>
+          Note:
+        </span>{' '}
+        Welcome to [Institute Name], an
+        institution dedicated to
+        fostering innovation, knowledge,
+        and personal growth. Our mission
+        is to shape tom
+      </div>
+
+      <div className='bg-white rounded-[16px] border border-[#D7D7D7] shadow-sm mt-5 px-6 pt-4 pb-10'>
+        <div className='border-b border-[#A0A0A0] font-[700] text-[20px] pb-[9px] '>
+          Admission Form
+        </div>
+
+        <div className='pt-6'>
+          <h1 className='font-[700] text-[20px]'>
+            Current Status:
+          </h1>
+          <div className='font-[400]  text-sm pt-1'>
+            <span className='font-[700]'>
+              Note:
+            </span>{' '}
+            Welcome to [Institute Name],
+            an institution dedicated to
+            fostering innovation,
+          </div>
+
+          <Steps />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AdmissionForm;

src/components/admissionComponents/AreyouHuman.jsx

@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+
+const AreyouHuman = () => {
+  const [isHuman, setIsHuman] =
+    useState(false);
+
+  const handleCheckboxChange = e => {
+    setIsHuman(e.target.checked);
+  };
+
+  return (
+    <div className='p-4 bg-white rounded-lg shadow-md'>
+      <h2 className='text-xl font-semibold mb-4'>
+        Are You Human?
+      </h2>
+      <p className='text-gray-600 mb-4'>
+        Please confirm that you are not
+        a robot by checking the box
+        below.
+      </p>
+      <div className='flex items-center'>
+        <input
+          type='checkbox'
+          id='humanCheckbox'
+          checked={isHuman}
+          onChange={
+            handleCheckboxChange
+          }
+          className='w-5 h-5 mr-2'
+        />
+        <label
+          htmlFor='humanCheckbox'
+          className='text-gray-700'
+        >
+          I am not a robot
+        </label>
+      </div>
+      {isHuman && (
+        <p className='text-green-600 mt-4'>
+          Thank you for confirming you
+          are human!
+        </p>
+      )}
+    </div>
+  );
+};
+
+export default AreyouHuman;

src/components/admissionComponents/DropDown.jsx

@@ -0,0 +1,117 @@
+import React, { useState } from 'react';
+
+const Dropdown = ({
+  placeholder,
+  options,
+  handleSelect,
+  isRequired = false,
+  errorMessage = 'This field is required.',
+}) => {
+  const [
+    selectedOption,
+    setSelectedOption,
+  ] = useState(placeholder);
+  const [isOpen, setIsOpen] =
+    useState(false);
+  const [isError, setIsError] =
+    useState(false);
+
+  const validateDropdown = () => {
+    if (
+      isRequired &&
+      selectedOption === placeholder
+    ) {
+      setIsError(true);
+    } else {
+      setIsError(false);
+    }
+  };
+
+  const handleOptionClick = option => {
+    setSelectedOption(option);
+    setIsOpen(false);
+    setIsError(false);
+    if (handleSelect)
+      handleSelect(option);
+  };
+
+  const handleBlur = () =>
+    validateDropdown();
+
+  return (
+    <div className='relative min-[630px]:max-w-[248px] w-full'>
+      <div
+        tabIndex={0}
+        onClick={() =>
+          setIsOpen(!isOpen)
+        }
+        onBlur={handleBlur}
+        className={`border cursor-pointer w-full flex items-center justify-between gap-2 rounded-[8px] px-4 py-3 text-xs text-[#333333] ${
+          isError
+            ? 'border-red-500'
+            : 'border-[#A0A0A080]'
+        }`}
+      >
+        {selectedOption}
+        <svg
+          width='14'
+          height='8'
+          viewBox='0 0 14 8'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={`transform transition-transform ${isOpen ? 'rotate-180' : ''}`}
+        >
+          <path
+            d='M12.88 1L7.99 5.89C7.4125 6.4675 6.4675 6.4675 5.89 5.89L1 1'
+            stroke='#131740'
+            strokeWidth='1.8'
+            strokeMiterlimit='10'
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+        </svg>
+      </div>
+
+      {isOpen && (
+        <div className='absolute z-10 overflow-hidden divide-y divide-[#D7D7D7] bg-white border border-[#A0A0A080] rounded-[8px] mt-2 w-full shadow-lg'>
+          {options.map(
+            (option, index) => (
+              <div
+                key={index}
+                onClick={() =>
+                  handleOptionClick(
+                    option,
+                  )
+                }
+                className='flex items-center gap-2 px-4 py-3 text-xs text-[#333333] cursor-pointer hover:bg-[#FAFAFA]'
+              >
+                <div
+                  className={`w-4 h-4 border-2 bg-white rounded-full flex items-center justify-center ${
+                    selectedOption ===
+                    option
+                      ? 'border-[#333333]'
+                      : 'border-gray-400'
+                  }`}
+                >
+                  {selectedOption ===
+                    option && (
+                    <div className='w-2 h-2 rounded-full bg-[#333333]'></div>
+                  )}
+                </div>
+                {option}
+              </div>
+            ),
+          )}
+        </div>
+      )}
+
+      {isError && (
+        <p className='text-red-500 text-xs mt-1'>
+          {errorMessage}
+        </p>
+      )}
+    </div>
+  );
+};
+
+export default Dropdown;

src/components/admissionComponents/ErrorModal.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+const ErrorModal = ({
+  message,
+  onClose,
+}) => {
+  return (
+    <div className='fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50'>
+      <div className='bg-white rounded-lg p-6 w-[80%] max-w-lg'>
+        <div className='flex justify-between items-center'>
+          <h2 className='text-red-600 text-lg font-semibold'>
+            Error
+          </h2>
+          <button
+            onClick={onClose}
+            className='bg-red-600 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs'
+          >
+            <svg
+              xmlns='http://www.w3.org/2000/svg'
+              width='15'
+              height='15'
+              viewBox='0 0 15 15'
+            >
+              <path
+                fill='currentColor'
+                fillRule='evenodd'
+                d='M11.782 4.032a.575.575 0 1 0-.813-.814L7.5 6.687L4.032 3.218a.575.575 0 0 0-.814.814L6.687 7.5l-3.469 3.468a.575.575 0 0 0 .814.814L7.5 8.313l3.469 3.469a.575.575 0 0 0 .813-.814L8.313 7.5z'
+                clipRule='evenodd'
+              />
+            </svg>
+          </button>
+        </div>
+        <p className='text-red-600 mt-4'>
+          {message}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default ErrorModal;

src/components/admissionComponents/Grades.jsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import InputField from './InputField';
+import Dropdown from './DropDown';
+
+const Grades = ({
+  handleInputChange,
+}) => {
+  return (
+    <div className='sm:grid flex flex-col w-full 2xl:grid-cols-5 sm:grid-cols-2 md:grid-cols-4 sm:gap-x-4 gap-y-10'>
+      <InputField
+        placeholder='Subject 1'
+        type='text'
+        name='subject1'
+        onChange={handleInputChange}
+      />
+      <Dropdown
+        placeholder='Grade for Subject 1'
+        name='grade1'
+        options={[
+          'A',
+          'B',
+          'C',
+          'D',
+          'F',
+        ]}
+        onChange={handleInputChange}
+      />
+
+      <InputField
+        placeholder='Subject 2'
+        type='text'
+        name='subject2'
+        onChange={handleInputChange}
+      />
+      <Dropdown
+        placeholder='Grade for Subject 2'
+        name='grade2'
+        options={[
+          'A',
+          'B',
+          'C',
+          'D',
+          'F',
+        ]}
+        onChange={handleInputChange}
+      />
+
+      <InputField
+        placeholder='Subject 3'
+        type='text'
+        name='subject3'
+        onChange={handleInputChange}
+      />
+      <Dropdown
+        placeholder='Grade for Subject 3'
+        name='grade3'
+        options={[
+          'A',
+          'B',
+          'C',
+          'D',
+          'F',
+        ]}
+        onChange={handleInputChange}
+      />
+
+      <InputField
+        placeholder='Subject 4'
+        type='text'
+        name='subject4'
+        onChange={handleInputChange}
+      />
+      <Dropdown
+        placeholder='Grade for Subject 4'
+        name='grade4'
+        options={[
+          'A',
+          'B',
+          'C',
+          'D',
+          'F',
+        ]}
+        onChange={handleInputChange}
+      />
+
+      <InputField
+        placeholder='Subject 5'
+        type='text'
+        name='subject5'
+        onChange={handleInputChange}
+      />
+      <Dropdown
+        placeholder='Grade for Subject 5'
+        name='grade5'
+        options={[
+          'A',
+          'B',
+          'C',
+          'D',
+          'F',
+        ]}
+        onChange={handleInputChange}
+      />
+    </div>
+  );
+};
+
+export default Grades;