text: import React from 'react';
  import Title from '../Title'
  import styles from '../../css/about.module.css'
  //import img from '../../images/defaultBcg.jpeg'
  import { useStaticQuery, graphql } from 'gatsby'
  import Img from 'gatsby-image'
  
  const getAbout = graphql`
      query aboutImage{
    	aboutImage:file(relativePath:{eq:"defaultBcg.jpeg"}){
      	childImageSharp{
          fluid(maxWidth:600){
            ...GatsbyImageSharpFluid_tracedSVG
          }
        }
      }
    }
  `
  
  const About = () => {
      const { aboutImage } = useStaticQuery(getAbout);
  
  
      return ( 
          <section className={styles.about}>
              <Title title="about" subtitle="us" />
              <div className={styles.aboutCenter}>
                  <article className={styles.aboutImg}>
                      <div className={styles.imagContainer}>
                          {/* <img src={img} alt="about company" /> */}
                          <Img fluid={aboutImage.childImageSharp.fluid} alt="awesome landscape" />
                      </div>           
                  </article>
                  <article className={styles.aboutInfo}>
                      <h4>expore the difference</h4>
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                         Donec libero erat, euismod id aliquam congue, ornare vel mauris. Vestibulum finibus
                      </p>
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                         Donec libero erat, euismod id aliquam congue, ornare vel mauris. Vestibulum finibus
                      </p>
                      <button type="button" className="btn-primary">
                       Read more
                      </button>
                  </article>
              </div>
          </section>
       );
  }
   
  export default About;