text: import React, { useState } from 'react';
  // @material-ui/core components
  import { makeStyles } from '@material-ui/core/styles';
  
  // @material-ui/icons
  
  // core components
  import GridContainer from 'components/Grid/GridContainer.js';
  import GridItem from 'components/Grid/GridItem.js';
  import Button from 'components/CustomButtons/Button.js';
  import CustomInput from 'components/CustomInput/CustomInput.js';
  import Slide from '@material-ui/core/Slide';
  import styles from 'assets/jss/material-kit-react/views/landingPageSections/workStyle.js';
  
  const useStyles = makeStyles(styles);
  const Transition = React.forwardRef(function Transition(props, ref) {
    return <Slide direction="down" ref={ref} {...props} />;
  });
  
  Transition.displayName = 'Transition';
  export default function WorkSection() {
    const classes = useStyles();
  
    return (
      <div className={classes.section}>
        <GridContainer justify="center">
          <GridItem cs={12} sm={12} md={8}>
            <h2 className={classes.title}>Work with us</h2>
            <h4 className={classes.description}>
              Looking for more than just a job? Want to make a difference where
              you live and work? Explore what's possible with a career at OSA
              Bank. At OSA Bank, you'll get the incentives, tools, resources and
              personal support you need to pursue your professional dreams and
              cultivate meaningful relationships with the people and communities
              you support.
            </h4>
            <form>
              <GridContainer>
                <GridItem xs={12} sm={12} md={6}>
                  <CustomInput
                    labelText="Your Name"
                    id="name"
                    formControlProps={{
                      fullWidth: true,
                    }}
                  />
                </GridItem>
                <GridItem xs={12} sm={12} md={6}>
                  <CustomInput
                    labelText="Your Email"
                    id="email"
                    formControlProps={{
                      fullWidth: true,
                    }}
                  />
                </GridItem>
                <CustomInput
                  labelText="Your Message"
                  id="message"
                  formControlProps={{
                    fullWidth: true,
                    className: classes.textArea,
                  }}
                  inputProps={{
                    multiline: true,
                    rows: 5,
                  }}
                />
                <GridItem xs={12} sm={12} md={4}>
                  <Button color="primary">Send Message</Button>
                </GridItem>
              </GridContainer>
            </form>
          </GridItem>
        </GridContainer>
      </div>
    );
  }
  