{"size": 999, "ext": "js", "max_stars_repo_path": "app/containers/HomePage/IntroSection/index.js", "max_stars_repo_name": "TheGirlManual/tgm", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "app/containers/HomePage/IntroSection/index.js", "max_issues_repo_name": "TheGirlManual/tgm", "max_issues_repo_issues_event_min_datetime": "2020-03-22T05:43:54.000Z", "max_issues_repo_issues_event_max_datetime": "2022-01-22T11:02:56.000Z", "max_forks_repo_path": "app/containers/HomePage/IntroSection/index.js", "max_forks_repo_name": "TheGirlManual/tgm", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 3, "max_forks_count": null, "avg_line_length": 27.0, "max_line_length": 67, "alphanum_fraction": 0.5805805806}
import React from 'react';
import { FormattedMessage } from 'react-intl';
import { Button, Heading } from 'rebass';
import { isMobile } from 'react-device-detect';
import IntroSectionWrapper from './IntroSectionWrapper';
import messages from '../messages';

export default function IntroSection() {
  return (
    <IntroSectionWrapper>
      <Heading
        as="h1"
        px={3}
        sx={{ color: isMobile && 'primary', textAlign: 'center' }}
        fontSize={[5, 7]}
        fontWeight="400"
      >
        <FormattedMessage {...messages.headline} />
      </Heading>

      <Button
        as="a"
        variant={isMobile ? 'secondary' : 'primary'}
        href="https://open.spotify.com/show/7jwdjqGaFHQeQoly9ByCzP"
        sx={{ textDecoration: 'none', textAlign: 'center' }}
        mt={4}
        fontSize={[3, 4]}
        width={0.45}
        maxWidth={200}
        p={3}
      >
        <FormattedMessage {...messages.listenCta} />
      </Button>
    </IntroSectionWrapper>
  );
}
