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/Telepay.js

-import React, { useState } from 'react';
-import LoadingButton from '@mui/lab/LoadingButton';
-import { TextField, Typography, Paper, Snackbar, IconButton, Alert, Box } from '@mui/material';
-import './Pay.css';
-import { AddOutlined, CloseOutlined, DeleteOutline } from '@mui/icons-material';
+import React from 'react';
+import { useState } from 'react';
+import { PrimaryButton } from './PrimaryButton';
+import { TextField } from './TextField';
+import { Textarea } from './TextArea';
+import './style.css';
+import { Alert, IconButton, Snackbar } from '@mui/material';
+import { CloseOutlined } from '@mui/icons-material';
 
-const TelepayForm = () => {
+export const Telepay = () => {
   const [error, setError] = useState(null);
   const [success, setSuccess] = useState(null);
+  const [submitted, setSubmitted] = React.useState(false);
+  const [errorSnackbarOpen, setErrorSnackbarOpen] = React.useState(false);
   const [formData, setFormData] = useState({
     first_name: '',
     last_name: '',
@@ -21,8 +26,6 @@ const TelepayForm = () => {
       { description: '', amount: '' },
     ],
   });
-  const [errorSnackbarOpen, setErrorSnackbarOpen] = React.useState(false);
-  const [submitted, setSubmitted] = React.useState(false);
 
   const handleChange = (field, value) => {
     setFormData({
@@ -41,6 +44,21 @@ const TelepayForm = () => {
     });
   };
 
+  const handleDeleteLineItem = (index) => {
+    if (formData.line_items.length <= 1) {
+      setError('1 line item is needed');
+      setErrorSnackbarOpen(true);
+      return;
+    }
+
+    const updatedLineItems = [...formData.line_items];
+    updatedLineItems.splice(index, 1);
+    setFormData({
+      ...formData,
+      line_items: updatedLineItems,
+    });
+  };
+
   const handleAddProduct = () => {
     setFormData({
       ...formData,
@@ -51,6 +69,7 @@ const TelepayForm = () => {
   const handleSubmit = async (e) => {
     setSubmitted(true);
     e.preventDefault();
+    console.log(formData);
 
     try {
       const response = await fetch('https://callback-click2pay.ivrnet.com/callback/post_data/', {
@@ -76,24 +95,8 @@ const TelepayForm = () => {
       setSubmitted(false);
     }
   };
-
-  const handleDeleteLineItem = (index) => {
-    if (formData.line_items.length <= 1) {
-      setError('1 line item is needed');
-      setErrorSnackbarOpen(true);
-      return;
-    }
-
-    const updatedLineItems = [...formData.line_items];
-    updatedLineItems.splice(index, 1);
-    setFormData({
-      ...formData,
-      line_items: updatedLineItems,
-    });
-  };
-
   return (
-    <div>
+    <form onSubmit={handleSubmit}>
       <Snackbar
         open={errorSnackbarOpen}
         autoHideDuration={3000}
@@ -120,237 +123,136 @@ const TelepayForm = () => {
           {error}
         </Alert>
       </Snackbar>
+      <div className='page'>
+        <div className='form'>
+          <TextField
+            className='design-component-instance-node'
+            divClassName='design-component-instance-node-2'
+            errorMessage={false}
+            helperText={false}
+            label='First Name'
+            fieldType={'first_name'}
+            value={formData.first_name}
+            onChange={(e) => handleChange('first_name', e.target.value)}
+          />
+          <TextField
+            className='design-component-instance-node'
+            divClassName='design-component-instance-node-2'
+            errorMessage={false}
+            helperText={false}
+            label='Last Name'
+            fieldType={'last_name'}
+            value={formData.last_name}
+            onChange={(e) => handleChange('last_name', e.target.value)}
+          />
+          <TextField
+            className='design-component-instance-node'
+            divClassName='design-component-instance-node-2'
+            errorMessage={false}
+            helperText={false}
+            label='Address'
+            onChange={(e) => handleChange('address', e.target.value)}
+            fieldType={'address'}
+            value={formData.address}
+          />
+          <TextField
+            className='design-component-instance-node'
+            divClassName='design-component-instance-node-2'
+            errorMessage={false}
+            helperText={false}
+            label='City'
+            onChange={(e) => handleChange('city', e.target.value)}
+            fieldType={'city'}
+            value={formData.city}
+          />
+          <TextField
+            className='design-component-instance-node'
+            divClassName='design-component-instance-node-2'
+            errorMessage={false}
+            helperText={false}
+            label='Province'
+            onChange={(e) => handleChange('province', e.target.value)}
+            fieldType={'province'}
+            value={formData.province}
+          />
+          <TextField
+            className='design-component-instance-node'
+            divClassName='design-component-instance-node-2'
+            errorMessage={false}
+            helperText={false}
+            label='Country'
+            onChange={(e) => handleChange('country', e.target.value)}
+            fieldType={'country'}
+            value={formData.country}
+          />
+          <TextField
+            className='design-component-instance-node'
+            divClassName='design-component-instance-node-2'
+            errorMessage={false}
+            helperText={false}
+            label='Email'
+            inputType='email'
+            onChange={(e) => handleChange('email', e.target.value)}
+            fieldType={'email'}
+            value={formData.email}
+          />
+          <Textarea
+            className='design-component-instance-node'
+            divClassName='design-component-instance-node-2'
+            errorMessage={false}
+            helperText={false}
+            label='Description'
+            fieldType={'description'}
+            value={formData.description}
+            onChange={(e) => handleChange('description', e.target.value)}
+          />
+          <div className='product'>
+            <div className='product-section'>Product</div>
+            <div className='product-list'>
+              {formData.line_items.map((item, index) => (
+                <div key={index} className={'product-unit-container'}>
 
-      <form onSubmit={handleSubmit}>
-        <Paper elevation={1} sx={{ padding: 3, marginBottom: 4 }}>
-          <Typography variant='h5' gutterBottom>
-            Payment Details
-          </Typography>
-
-          <div className='form-group row mb-4'>
-            <div className='col-md-2 center-label'>
-              <label htmlFor='firstName' className='form-label mt-1'>First Name</label>
-            </div>
-            <div className='col-md-9'>
-              <TextField
-                id='firstName'
-                label='First Name'
-                placeholder='Enter your first name'
-                variant='outlined'
-                fullWidth
-                value={formData.first_name}
-                onChange={(e) => handleChange('first_name', e.target.value)}
-              />
+                  <div className={`product-unit ${index > 0 ? ' mt-4' : ''}`}>
+                    <div className={'w-100'} key={index}>
+                      <button type='button' className='btn btn-sm btn-close float-end' aria-label='Close'
+                              onClick={() => handleDeleteLineItem(index)}>
+                      </button>
+                      <TextField
+                        className='text-field-instance'
+                        divClassName='design-component-instance-node-2'
+                        errorMessage={false}
+                        helperText={false}
+                        label={`Product Name`}
+                        onChange={(e) => handleProductChange(index, 'description', e.target.value)}
+                        value={item.description}
+                        fieldType={`productDescription${index}`}
+                      />
+                      <TextField
+                        className='text-field-instance mt-4'
+                        divClassName='design-component-instance-node-2'
+                        errorMessage={false}
+                        helperText={false}
+                        label={`Price`}
+                        inputType={'number'}
+                        value={item.amount}
+                        onChange={(e) => handleProductChange(index, 'amount', e.target.value)}
+                        fieldType={`productAmount${index}`}
+                      />
+                    </div>
+                  </div>
+                </div>
+              ))}
             </div>
+            <a className='add-product-link' onClick={handleAddProduct}>Add another product</a>
           </div>
-
-          <div className='form-group row mb-4'>
-            <div className='col-md-2 center-label'>
-              <label htmlFor='lastName' className='form-label mt-1'>Last Name</label>
+          {success && (
+            <div className='alert alert-primary w-100' role='alert'>
+              Access Code: {success.access_code}
             </div>
-            <div className='col-md-9'>
-              <TextField
-                id='lastName'
-                label='Last Name'
-                placeholder='Enter your last name'
-                variant='outlined'
-                fullWidth
-                value={formData.last_name}
-                onChange={(e) => handleChange('last_name', e.target.value)}
-              />
-            </div>
-          </div>
-
-          <div className='form-group row mb-4'>
-            <div className='col-md-2 center-label'>
-              <label htmlFor='address' className='form-label mt-1'>Address</label>
-            </div>
-            <div className='col-md-9'>
-              <TextField
-                id='address'
-                label='Address'
-                autoComplete='address'
-                placeholder='Enter your address'
-                variant='outlined'
-                fullWidth
-                value={formData.address}
-                onChange={(e) => handleChange('address', e.target.value)}
-              />
-            </div>
-          </div>
-
-          <div className='form-group row mb-4'>
-            <div className='col-md-2 center-label'>
-              <label htmlFor='city' className='form-label mt-1'>City</label>
-            </div>
-            <div className='col-md-9'>
-              <TextField
-                id='city'
-                label='City'
-                placeholder='Enter your city'
-                variant='outlined'
-                fullWidth
-                value={formData.city}
-                onChange={(e) => handleChange('city', e.target.value)}
-              />
-            </div>
-          </div>
-
-          <div className='form-group row mb-4'>
-            <div className='col-md-2 center-label'>
-              <label htmlFor='province' className='form-label mt-1'>Province</label>
-            </div>
-            <div className='col-md-9'>
-              <TextField
-                id='province'
-                label='Province'
-                placeholder='Enter your province'
-                variant='outlined'
-                fullWidth
-                value={formData.province}
-                onChange={(e) => handleChange('province', e.target.value)}
-              />
-            </div>
-          </div>
-
-          <div className='form-group row mb-4'>
-            <div className='col-md-2 center-label'>
-              <label htmlFor='country' className='form-label mt-1'>Country</label>
-            </div>
-            <div className='col-md-9'>
-              <TextField
-                id='country'
-                label='Country'
-                placeholder='Enter your country'
-                variant='outlined'
-                autoComplete='country'
-                fullWidth
-                value={formData.country}
-                onChange={(e) => handleChange('country', e.target.value)}
-              />
-            </div>
-          </div>
-
-          <div className='form-group row mb-4'>
-            <div className='col-md-2 center-label'>
-              <label htmlFor='email' className='form-label mt-1'>Email</label>
-            </div>
-            <div className='col-md-9'>
-              <TextField
-                id='email'
-                label='Email'
-                placeholder='Enter your email'
-                variant='outlined'
-                autoComplete='email'
-                fullWidth
-                value={formData.email}
-                type='email'
-                onChange={(e) => handleChange('email', e.target.value)}
-              />
-            </div>
-          </div>
-
-          <div className='form-group row mb-4'>
-            <div className='col-md-2 center-label'>
-              <label htmlFor='phone' className='form-label mt-1'>Phone</label>
-            </div>
-            <div className='col-md-9'>
-              <TextField
-                id='phone'
-                label='Phone'
-                placeholder='Enter your phone number'
-                autoComplete='phone'
-                variant='outlined'
-                fullWidth
-                value={formData.phone}
-                onChange={(e) => handleChange('phone', e.target.value)}
-              />
-            </div>
-          </div>
-
-          <div className='form-group row mb-4'>
-            <div className='col-md-2 center-label'>
-              <label htmlFor='description' className='form-label mt-1'>Description</label>
-            </div>
-            <div className='col-md-9'>
-              <TextField
-                id='description'
-                label='Description'
-                placeholder='Enter description'
-                variant='outlined'
-                fullWidth
-                value={formData.description}
-                onChange={(e) => handleChange('description', e.target.value)}
-                required
-              />
-            </div>
-          </div>
-
-        </Paper>
-
-        <Paper elevation={1} sx={{ padding: 3, marginBottom: 4 }}>
-          <Typography variant='h5' gutterBottom>
-            Line Items
-          </Typography>
-
-          {formData.line_items.map((lineItem, index) => (
-            <div key={index} style={{ marginBottom: '1rem' }}>
-              <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '1rem' }}>
-                <TextField
-                  label='Description'
-                  placeholder='Description'
-                  className='w-100'
-                  value={lineItem.description}
-                  onChange={(e) => handleProductChange(index, 'description', e.target.value)}
-                  required
-                />
-                <TextField
-                  label='Amount'
-                  placeholder='Enter Price'
-                  type='number'
-                  className='w-100'
-                  value={lineItem.amount}
-                  onChange={(e) => handleProductChange(index, 'amount', e.target.value)}
-                  required
-                />
-                <IconButton
-                  variant='contained'
-                  color='error'
-                  onClick={() => handleDeleteLineItem(index)}
-                  sx={{ marginLeft: '1rem' }}
-                >
-                  <DeleteOutline />
-                </IconButton>
-              </div>
-            </div>
-          ))}
-
-          <div className='d-flex w-100 justify-content-end'>
-            <IconButton
-              variant='outlined'
-              color='primary'
-              onClick={handleAddProduct}
-              sx={{ marginBottom: '1rem' }}
-            >
-              <AddOutlined />
-            </IconButton>
-          </div>
-        </Paper>
-        {success && (
-          <Paper elevation={1} style={{ backgroundColor: 'rgb(56, 142, 60)', color: 'white' }}
-                 sx={{ padding: 3, marginBottom: 4 }}>
-            Access Code: {success.access_code}
-          </Paper>
-        )}
-
-        <Box sx={{ '& > button': { m: 1 } }}>
-          <LoadingButton loading={submitted} type='submit' variant='outlined' color='primary'>
-            <span>Submit</span>
-          </LoadingButton>
-        </Box>
-      </form>
-    </div>
+          )}
+          <PrimaryButton label='SUBMIT' submitted={submitted} />
+        </div>
+      </div>
+    </form>
   );
 };
-
-export default TelepayForm;

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,
+};

src/component/style.css

+.header {
+  align-items: center;
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-color: #00000026;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  justify-content: center;
+  padding: 48px 0px;
+  position: relative;
+  width: 934px;
+}
+
+.header .content {
+  align-items: flex-start;
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  gap: 16px;
+  position: relative;
+  width: 480px;
+}
+
+.header .title {
+  align-items: center;
+  display: inline-flex;
+  flex: 0 0 auto;
+  gap: 10px;
+  justify-content: center;
+  position: relative;
+}
+
+.header .text-wrapper {
+  color: #206ea5;
+  font-family: 'Source Sans Pro-SemiBold', Helvetica;
+  font-size: 36px;
+  font-weight: 600;
+  letter-spacing: 0;
+  line-height: normal;
+  margin-top: -1px;
+  position: relative;
+  width: fit-content;
+}
+
+.header .tagline {
+  align-items: center;
+  align-self: stretch;
+  display: flex;
+  flex: 0 0 auto;
+  gap: 10px;
+  justify-content: center;
+  position: relative;
+  width: 100%;
+}
+
+.header .div {
+  color: #00000099;
+  flex: 1;
+  font-family: 'Source Sans Pro-Regular', Helvetica, serif;
+  font-size: 16px;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 20px;
+  margin-top: -1px;
+  position: relative;
+}
+
+.sidebar-b {
+  top: 0;
+  z-index: 100;
+  position: fixed;
+  width: 100%;
+  align-items: center;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
+  background: linear-gradient(92deg, rgba(226, 236, 251, 0.50) 0.11%, rgba(252, 244, 224, 0.50) 100%), linear-gradient(180deg, rgba(240, 227, 250, 0.50) 0%, rgba(255, 235, 244, 0.50) 100%), #FFF;
+  box-shadow: 0px 0px 4px #00000040;
+  display: flex;
+  padding: 64px 64px;
+  flex-direction: column;
+  justify-content: center;
+  gap: 48px;
+  align-self: stretch;
+  transition: 0.4s;
+}
+
+.sidebar-b .group {
+  height: 43.4px;
+  margin-left: -1px;
+  margin-right: -3px;
+  position: relative;
+  width: 254px;
+}
+
+.sidebar-b .text-wrapper {
+  color: #333333;
+  font-family: 'Arial-Regular', Helvetica, serif;
+  font-size: 30px;
+  font-weight: 400;
+  left: 148px;
+  letter-spacing: 0;
+  line-height: normal;
+  position: absolute;
+  top: 8px;
+  white-space: nowrap;
+}
+
+.sidebar-b .image {
+  height: 43px;
+  left: 0;
+  object-fit: cover;
+  position: absolute;
+  top: 0;
+  width: 140px;
+}
+
+.sidebar-b .content {
+  align-items: center;
+  align-self: stretch;
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  gap: 8px;
+  position: relative;
+  width: 100%;
+}
+
+.sidebar-b .tagline {
+  align-items: center;
+  align-self: stretch;
+  display: flex;
+  flex: 0 0 auto;
+  gap: 10px;
+  justify-content: center;
+  position: relative;
+  width: 100%;
+}
+
+.sidebar-b .div {
+  color: #00000099;
+  flex: 1;
+  font-family: 'Source Sans Pro-Regular', Helvetica;
+  font-size: 16px;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 20px;
+  margin-top: -1px;
+  position: relative;
+  text-align: center;
+}
+
+.primary-button {
+  display: flex;
+  width: 100%;
+  height: 40px;
+  padding: 10px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 40px;
+  background: #206EA5;
+  color: #FFFFFF;
+  border: 0;
+}
+
+.primary-button .label {
+  color: #ffffff;
+  font-family: 'Source Sans Pro-Regular', Helvetica;
+  font-size: 16px;
+  font-weight: 400;
+  letter-spacing: 3.2px;
+  line-height: normal;
+  margin-top: -1px;
+  position: relative;
+  width: fit-content;
+}
+
+.primary-button:disabled {
+  background-color: #206ea5;
+  opacity: 0.2;
+}
+
+.primary-button.default {
+  background-color: #206ea5;
+}
+
+.primary-button.hover {
+  background-color: #105484;
+}
+
+.textarea {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  position: relative;
+  width: 320px;
+}
+
+.textarea .label-helper-text {
+  align-items: flex-start;
+  display: inline-flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  gap: 4px;
+  position: relative;
+}
+
+.textarea .label {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  color: #333;
+  font-family: Source Sans Pro, serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.textarea .required {
+  align-items: center;
+  border-bottom-style: dashed;
+  border-bottom-width: 1px;
+  border-color: #cc3300;
+  display: inline-flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  gap: 10px;
+  justify-content: center;
+  position: relative;
+}
+
+.textarea .text-wrapper {
+  color: #cc3300;
+  font-family: 'Arial-Regular', Helvetica;
+  font-size: 16px;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: normal;
+  margin-top: -1px;
+  position: relative;
+  white-space: nowrap;
+  width: fit-content;
+}
+
+.textarea .div {
+  color: #000000;
+  font-family: 'Source Sans Pro-Regular', Helvetica;
+  font-size: 16px;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: normal;
+  margin-top: -1px;
+  position: relative;
+  width: fit-content;
+}
+
+.textarea .div-wrapper {
+  align-items: flex-start;
+  display: inline-flex;
+  flex: 0 0 auto;
+  gap: 10px;
+  position: relative;
+}
+
+.textarea .helper-text {
+  color: #00000099;
+  font-family: 'Source Sans Pro-Regular', Helvetica;
+  font-size: 14px;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: normal;
+  margin-top: -1px;
+  position: relative;
+  width: fit-content;
+}
+
+.textarea .input-error-message {
+  align-items: flex-start;
+  align-self: stretch;
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  gap: 4px;
+  position: relative;
+  width: 100%;
+}
+
+.rectangle {
+  align-self: stretch;
+  background-color: #ffffff;
+  border: 1px solid;
+  border-color: #00000033;
+  border-radius: 4px;
+  height: 80px;
+  position: relative;
+  width: 100%;
+  padding: 5px 10px;
+}
+
+.textarea .error-message {
+  color: #cc3300;
+  font-family: 'Source Sans Pro-Regular', Helvetica;
+  font-size: 14px;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: normal;
+  margin-top: -1px;
+  position: relative;
+  width: fit-content;
+}
+
+.text-field {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  position: relative;
+  width: 100%;
+}
+
+.text-field .label-helper-text {
+  align-items: flex-start;
+  display: inline-flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  gap: 4px;
+  position: relative;
+}
+
+.text-field .label {
+  align-items: center;
+  display: inline-flex;
+  flex: 0 0 auto;
+  gap: 4px;
+  justify-content: center;
+  position: relative;
+  color: #333;
+  font-family: Source Sans Pro, serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.text-field .required {
+  align-items: center;
+  border-bottom-style: dashed;
+  border-bottom-width: 1px;
+  border-color: #990000;
+  display: inline-flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  gap: 10px;
+  justify-content: center;
+  position: relative;
+}
+
+.text-field .text-wrapper {
+  color: #cc3300;
+  font-family: 'Arial-Regular', Helvetica;
+  font-size: 16px;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: normal;
+  margin-top: -1px;
+  position: relative;
+  white-space: nowrap;
+  width: fit-content;
+}
+
+.text-field .div {
+  color: #000000;
+  font-family: 'Source Sans Pro-Regular', Helvetica;
+  font-size: 16px;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: normal;
+  margin-top: -1px;
+  position: relative;
+  width: fit-content;
+}
+
+.text-field .div-wrapper {
+  align-items: flex-start;
+  display: inline-flex;
+  flex: 0 0 auto;
+  gap: 10px;
+  position: relative;
+}
+
+.text-field .helper-text {
+  color: #00000099;
+  font-family: 'Source Sans Pro-Regular', Helvetica;
+  font-size: 14px;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: normal;
+  margin-top: -1px;
+  position: relative;
+  width: fit-content;
+}
+
+.text-field .input-error-message {
+  align-items: flex-start;
+  align-self: stretch;
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  gap: 4px;
+  position: relative;
+  width: 100%;
+}
+
+.text-field .filled {
+  align-items: center;
+  background: none;
+  border: none;
+  color: #000000;
+  display: inline-flex;
+  flex: 0 0 auto;
+  font-family: 'Source Sans Pro-Regular', Helvetica;
+  font-size: 16px;
+  font-weight: 400;
+  gap: 10px;
+  letter-spacing: 0;
+  line-height: normal;
+  margin-top: -1px;
+  padding: 0;
+  position: relative;
+  width: 100%;
+}
+
+.text-field .error-message {
+  color: #cc3300;
+  font-family: 'Source Sans Pro-Regular', Helvetica;
+  font-size: 14px;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: normal;
+  margin-top: -1px;
+  position: relative;
+  width: fit-content;
+}
+
+.product {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.form {
+  width: 320px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 24px;
+}
+
+.page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 48px;
+  align-self: stretch;
+  margin-bottom: 64px;
+}
+
+.text-wrapper-3 {
+  color: #206EA5;
+  font-family: Source Sans Pro, serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.product-unit {
+  display: flex;
+  width: 320px;
+  padding: 16px 14px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 24px;
+  border-radius: 4px;
+}
+
+.product-unit-container {
+  background: rgba(0, 0, 0, 0.05);
+}
+
+.sidebar-b.scrolled {
+  padding: 16px 16px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
+  background: linear-gradient(92deg, rgba(226, 236, 251, 0.50) 0.11%, rgba(252, 244, 224, 0.50) 100%), linear-gradient(180deg, rgba(240, 227, 250, 0.50) 0%, rgba(255, 235, 244, 0.50) 100%), #FFF;
+}
+
+.sidebar-b.scrolled .content {
+  display: none;
+}
+
+.add-product-link {
+  color: #206EA5;
+  text-decoration: none;
+  cursor: pointer;
+  font-family: Source Sans Pro, serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.text-input {
+  display: flex;
+  height: 36px;
+  padding: 0px 10px;
+  align-items: center;
+  align-self: stretch;
+  border-radius: 4px;
+  border: 1px solid rgba(0, 0, 0, 0.20);
+  background: #FFF;
+  color: #333;
+  font-family: Source Sans Pro, serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.product-section {
+  color: #333;
+  font-family: Source Sans Pro, serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.main-section {
+  margin-top: 20rem;
+}