<commit_before>import React from 'react'
import styled from 'styled-components'
import frontend from '../assets/images/service-frontend.svg'
import management from '../assets/images/service-management.svg'
import uxui from '../assets/images/service-uxui.svg'

const ServicesCard = styled.div`
  background: white;
  border-radius: ${props => props.theme.borderRadius};
  box-shadow: ${props => props.theme.boxShadow};
  flex-grow: ${props => props.left || props.right ? '0' : '1'};
  margin-bottom: 24px;
  padding: 24px;
  position: relative;
  @media ${props => props.theme.breakpoint} {
    margin: ${props => props.left ? '80px -16px 0 0' : props.right ? '136px 0 0 -16px' : '0 -8px'};
    padding: ${props => props.left ? '40px 56px 40px 40px' : props.right ? '40px 40px 40px 56px' : '40px'};
    width: 100%;
    z-index: ${props => props.left || props.right ? '0' : '10'};
  }
  img {
    display: block;
    margin: 0 auto 24px;
    max-width: 80%;
    @media ${props => props.theme.breakpoint} {
      max-width: 100%;
    }
  }
  p {
    margin: 0;
    @media ${props => props.theme.breakpoint} {
      font-size: 0.785rem;
    }
  }
`

const ServicesContainer = styled.div`
  align-items: flex-start;
  display: flex;
  flex-flow: column nowrap;
  margin: 40px 0;
  @media ${props => props.theme.breakpoint} {
    flex-direction: row;
    margin: 80px 0 40px;
  }
`

const Services = props => 
  <ServicesContainer>
    <ServicesCard left>
      <img src={frontend} />
      <h3>Front-end Development</h3>
      <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
    </ServicesCard>
    <ServicesCard>
      <img src={uxui} />
      <h3>UX/UI Design</h3>
      <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
    </ServicesCard>
    <ServicesCard right>
      <img src={management} />
      <h3>Project Management</h3>
      <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
    </ServicesCard>
  </ServicesContainer>

export default Services<commit_msg>Redefine service cards to support a full width image<commit_after>import React from 'react'
import styled from 'styled-components'
import frontend from '../assets/images/service-frontend.svg'
import management from '../assets/images/service-management.svg'
import uxui from '../assets/images/service-uxui.svg'

const ServicesCard = styled.div`
  background: white;
  border-radius: ${props => props.theme.borderRadius};
  box-shadow: ${props => props.theme.boxShadow};
  flex-grow: ${props => props.left || props.right ? '0' : '1'};
  margin-bottom: 24px;
  order: ${props => props.left || props.right ? '1' : '0'};
  overflow: hidden;
  position: relative;
  @media ${props => props.theme.breakpoint} {
    margin: ${props => props.left ? '80px -16px 0 0' : props.right ? '136px 0 0 -16px' : '0 -8px'};
    order: 0;
    width: 100%;
    z-index: ${props => props.left || props.right ? '0' : '10'};
  }
  img {
    display: block;
    height: auto;
    width: 100%;
  }
  p {
    margin: 0;
    @media ${props => props.theme.breakpoint} {
      font-size: 0.785rem;
    }
  }
  .inner {
    padding: 24px;
    @media ${props => props.theme.breakpoint} {
      padding: ${props => props.left ? '40px 56px 40px 40px' : props.right ? '40px 40px 40px 56px' : '40px'};
    }
  }
`

const ServicesContainer = styled.div`
  align-items: flex-start;
  display: flex;
  flex-flow: column nowrap;
  margin: 40px 0;
  @media ${props => props.theme.breakpoint} {
    flex-direction: row;
    margin: 80px 0 40px;
  }
`

const Services = props => 
  <ServicesContainer>
    <ServicesCard left>
      <img src="https://unsplash.it/800/600" />
      <div className="inner">
        <h3>Front-end Development</h3>
        <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
      </div>
    </ServicesCard>
    <ServicesCard>
      <img src="https://unsplash.it/800/600" />
      <div className="inner">
        <h3>UX/UI Design</h3>
        <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
      </div>
    </ServicesCard>
    <ServicesCard right>
      <img src="https://unsplash.it/800/600" />
      <div className="inner">
        <h3>Project Management</h3>
        <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
      </div>
    </ServicesCard>
  </ServicesContainer>

export default Services
{'fraction_non_alphanumeric': 0.12949771689497716, 'fraction_numerical': 0.029223744292237442, 'mean_word_length': 3.264797507788162, 'pattern_counts': {'":': 0, '<': 55, '<?xml version=': 0, '>': 78, 'https://': 3, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7119578', 'n_tokens_mistral': 2016, 'n_tokens_neox': 1871, 'n_words': 551}