{"size": 959, "ext": "js", "max_stars_repo_path": "src/components/_index/Section7/Review.js", "max_stars_repo_name": "arhoy/construction-template", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/_index/Section7/Review.js", "max_issues_repo_name": "arhoy/construction-template", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/_index/Section7/Review.js", "max_forks_repo_name": "arhoy/construction-template", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 18.4423076923, "max_line_length": 64, "alphanum_fraction": 0.582898853}
import React from 'react';
import styled from '@emotion/styled';
import icon from '../../../images/main/testimonial_icon-11.svg';

const Container = styled.div`
  position: relative;
  z-index: 1;

  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: white;
  max-width: 25rem;
  margin: 0 auto;
  padding: 2rem 1rem;
  margin-bottom: 2rem;
  color: ${(props) => props.theme.colors.secondary};
  & .imageContainer {
    position: absolute;
    top: -3rem;
    width: 6rem;
    z-index: 3;
  }
  & img {
    width: 100%;
    height: auto;
  }
  & h4 {
    margin-top: 2rem;
    text-align: center;
    font-size: 1.3rem;
    margin-bottom: 1rem;
  }
  & p {
    text-align: center;
  }
`;

export const Review = ({ name, blurb }) => {
  return (
    <Container>
      <div className="imageContainer">
        <img src={icon} />
      </div>

      <h4>{name}</h4>
      <p> {blurb} </p>
    </Container>
  );
};
