text: import React, { Component } from "react"
  import { Section, Title, SectionButton } from "../../utils"
  import styled from "styled-components"
  import { styles } from "../../utils"
  
  export default class QuickInfo extends Component {
    render() {
      return (
        <Section>
          <Title subtitle={null} title="Eat. Drink. Relax." />
          <QuickInfoWrapper>
            <p className="text">
              Amigos bistro is the place where great cooking and fantastic vibes meet. Our food is nutritious, delicious, and affordable, and we welcome diners young and old. Try it yourself—book your table or stop by today!
            </p>
            {/* <Link to="/about" style={{ textDecoration: "none" }}>
              <SectionButton style={{ margin: "2rem auto" }}>about</SectionButton>
            </Link> */}
          </QuickInfoWrapper>
        </Section>
      )
    }
  }
  
  const QuickInfoWrapper = styled.div`
    width: 90%;
    margin: 2rem auto;
  
    .text {
      line-height: 2rem;
      color: ${styles.colors.mainGrey};
      word-spacing: 0.2rem;
    }
  
    @media (min-width: 768px) {
      width: 70%;
    }
  
    @media (min-width: 968px) {
      width: 60%;
    }
  `
  