Updated designs

package-lock.json

@@ -21,6 +21,7 @@
         "bootstrap": "^5.3.2",
         "cors": "^2.8.5",
         "express": "^4.18.2",
+        "prop-types": "^15.8.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-redux": "^8.1.3",

package.json

@@ -16,6 +16,7 @@
     "bootstrap": "^5.3.2",
     "cors": "^2.8.5",
     "express": "^4.18.2",
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.1.3",

src/App.js

-import logo from './ivrnet.png';
-import TelepayForm from './component/Telepay';
 import './App.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
+import { CustomNav } from './component/CustomNav';
+import { Telepay } from './component/Telepay';
 
 function App() {
   return (
     <div className='App'>
-      <div className='row m-0 p-0'>
-        <div className='d-large position-fixed col-md-2 h-100 logo-back'>
-          <div className='mb-2'>
-            <img src={logo} className='App-logo' alt='logo' />
-          </div>
-          <h3 className='text-white'>Ivrnet</h3>
-        </div>
-
-        <div className='d-small'>
-          <div className='mb-2'>
-            <img src={logo} className='App-logo' alt='logo' />
-          </div>
-          <h3 className='text-white'>Ivrnet</h3>
-        </div>
-        <div className='offset-md-3 col-md-8'>
-          <TelepayForm />
-        </div>
-      </div>
+      <CustomNav></CustomNav>
+      <main className={'main-section'}>
+        <Telepay />
+      </main>
     </div>
   );
 }

src/component/CustomNav.jsx

+import logo from '../logo.png';
+import React, { useState, useEffect } from 'react';
+import './style.css';
+
+export const CustomNav = ({ className = '' }) => {
+  const [isScrolled, setIsScrolled] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const scrollTop = window.scrollY;
+      const threshold = 120;
+
+      setIsScrolled(scrollTop >= threshold);
+    };
+
+    window.removeEventListener('scroll', handleScroll);
+    window.addEventListener('scroll', handleScroll, { passive: true });
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
+  return (
+    <div className={`sidebar-b ${className} ${isScrolled ? 'scrolled' : ''}`}>
+      <div className='group'>
+        <div className='text-wrapper'>Clik2pay</div>
+        <img className='image' src={logo}  alt={''}/>
+      </div>
+      <div className='content'>
+        <div className='tagline'>
+          <p className='div m-0'>
+            Telepay will meet your organization’s over-the-phone payment needs today and into the future.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};

src/component/PrimaryButton.jsx

+import PropTypes from 'prop-types';
+import React from 'react';
+import './style.css';
+
+export const PrimaryButton = ({ label = 'Label', submitted = false }) => {
+  return (
+    <button disabled={submitted} className='primary-button' type={'submit'}>
+      <div>{label}</div>
+    </button>
+  );
+};
+
+PrimaryButton.propTypes = {
+  label: PropTypes.string,
+  onClick: PropTypes.func,
+  submitted: PropTypes.bool,
+};

src/component/TextArea.jsx

+import PropTypes from 'prop-types';
+import React from 'react';
+import './style.css';
+
+export const Textarea = (
+  {
+    fieldType = '',
+    required = true,
+    helperText = true,
+    helperText1 = 'Helper text',
+    errorMessage = true,
+    label = 'Label',
+    errorMessage1 = 'Error message',
+    inputType = 'text',
+    onChange,
+    value = ''
+  },
+) => {
+  return (
+    <div className='text-field'>
+      <div className='label-helper-text'>
+        <div className='label'>
+          {required && (
+            <div className='required'>
+              <div className='text-wrapper'>*</div>
+            </div>
+          )}
+
+          <label htmlFor={fieldType}>{label}</label>
+        </div>
+        {helperText && (
+          <div className='div-wrapper'>
+            <div className='helper-text'>{helperText1}</div>
+          </div>
+        )}
+      </div>
+      <div className='input-error-message'>
+          <textarea id={fieldType} value={value} className='rectangle' type={inputType} required
+                    onChange={onChange} />
+        {errorMessage && (
+          <div className='div-wrapper'>
+            <div className='error-message'>{errorMessage1}</div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+Textarea.propTypes = {
+  filled: PropTypes.bool,
+  required: PropTypes.bool,
+  helperText: PropTypes.bool,
+  helperText1: PropTypes.string,
+  errorMessage: PropTypes.bool,
+  label: PropTypes.string,
+  errorMessage1: PropTypes.string,
+  inputType: PropTypes.string,
+  onChange: PropTypes.func,
+  value: PropTypes.string
+};

src/component/TextField.jsx

+import PropTypes from 'prop-types';
+import React from 'react';
+import './style.css';
+
+export const TextField = (
+  {
+    required = true,
+    helperText = true,
+    helperText1 = 'Helper text',
+    errorMessage = true,
+    label = 'Label',
+    errorMessage1 = 'Error message',
+    inputType = 'text',
+    onChange,
+    className = '',
+    fieldType = '',
+    value = '',
+  },
+) => {
+  return (
+    <div className={'text-field ' + className}>
+      <div className='label-helper-text'>
+        <div className='label'>
+          {required && (
+            <div className='required'>
+              <div className='text-wrapper'>*</div>
+            </div>
+          )}
+
+          <label htmlFor={fieldType}>{label}</label>
+        </div>
+        {helperText && (
+          <div className='div-wrapper'>
+            <div className='helper-text'>{helperText1}</div>
+          </div>
+        )}
+      </div>
+      <div className='input-error-message'>
+        <input id={fieldType} value={value} className='text-input' type={inputType} required onChange={onChange} />
+        {errorMessage && (
+          <div className='div-wrapper'>
+            <div className='error-message'>{errorMessage1}</div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+TextField.propTypes = {
+  filled: PropTypes.bool,
+  required: PropTypes.bool,
+  helperText: PropTypes.bool,
+  helperText1: PropTypes.string,
+  errorMessage: PropTypes.bool,
+  label: PropTypes.string,
+  errorMessage1: PropTypes.string,
+  inputType: PropTypes.string,
+  onChange: PropTypes.func,
+  fieldType: PropTypes.string,
+  value: PropTypes.string,
+};