text: //IMPORTING
  //REACT
  import React from 'react';
  //REACT ROUTER DOM
  import { NavLink } from 'react-router-dom';
  //MATERIAL UI
  import { Typography, Card, CardMedia, CardContent, Divider, CardActions, Button } from '@material-ui/core';
  import { makeStyles } from '@material-ui/styles';
  //IMAGES
  import aboutUsImg from '../assets/showcase.png';
  
  //USE STYLES
  const useStyles = makeStyles(theme => ({
    root: {
      display: 'flex',
      maxWidth: '1200px',
      margin: '0 auto 2rem',
      [theme.breakpoints.down('md')]: {
        flexDirection: 'column'
      }
    },
    aboutContent: {
      padding: '0 3rem',
      boxShadow: 'none',
      background: theme.palette.light.main,
      width: '40%',
      display: 'flex',
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      flexDirection: 'column',
      [theme.breakpoints.down('md')]: {
        width: '70%',
        margin: '1rem auto'
      },
      [theme.breakpoints.down('sm')]: {
        padding: '0 1rem 0',
        width: '85%'
      },
      '@media (max-width: 400px)': {
        padding: 0,
        width: '100%',
        margin: '1rem auto'
      }
    },
    title: {
      fontSize: '1.2rem',
      fontWeight: 700,
      marginBottom: '7px',
      textAlign: 'center',
      '@media (max-width: 300px)': {
        fontSize: '0.95rem'
      }
    },
    titleDivider: {
      marginBottom: '10px'
    },
    subTitle: {
      textAlign: 'justify'
    },
    showcaseImgWrapper: {
      boxShadow: 'none',
      background: theme.palette.light.main,
      display: 'flex',
      justifyContent: 'center',
      borderRadius: 0,
      maxHeight: '570px',
      maxWidth: '900px',
      padding: '1rem',
      margin: '0 auto'
    },
    showcaseImg: {
      width: '100%',
      height: '100%'
    },
    actionsWrapper: {},
    actionBtn: {}
  }));
  
  //ADDITIONAL ACTIONS
  const additionalActions = [
    { label: 'Contato', path: '/contact', variant: 'contained', color: 'primary' },
    { label: 'Serviços', path: '/services', variant: 'outlined', color: 'default' }
  ];
  
  //ABOUT
  const About = () => {
    const classes = useStyles();
    return (
      <>
        <div className={classes.root}>
          <Card elevation={0} className={classes.showcaseImgWrapper}>
            <CardMedia image={aboutUsImg} component="img" alt="showcase-image" className={classes.showcaseImg} />
          </Card>
          <Card elevation={0} className={classes.aboutContent}>
            <Typography component="h3" color="primary" className={classes.title}>
              Sobre nós
              <Divider className={classes.titleDivider} variant="middle" />
            </Typography>
            <CardContent>
              <Typography variant="subtitle1" className={`${classes.subTitle} bg-shape-1`}>
              Criar soluções eficientes com base nas melhores práticas de desenvolvimento web, gerando valor e vantagem competitiva para nossos clientes através das nossas soluções,
              fornecer gerenciamento de cadeia de suprimentos orientado pela demanda e soluções de software empresarial que geram valor para as empresas, independentemente das condições de mercado,
              oferecer uma liderança de pensamento excepcional para todos os setores, com especialização em empresas de ramos variados, independentemente das condições de mercado.
              </Typography>
            </CardContent>
            <CardActions className={classes.actionsWrapper}>
              {additionalActions.map(({ label, path, variant, color }) => (
                <Button
                  to={path}
                  component={NavLink}
                  key={label}
                  variant={variant}
                  color={color}
                  className={classes.actionBtn}
                >
                  {label}
                </Button>
              ))}
            </CardActions>
          </Card>
        </div>
      </>
    );
  };
  
  //EXPORTING ABOUT
  export default About;