{"size": 918, "ext": "js", "max_stars_repo_path": "src/components/Intro.js", "max_stars_repo_name": "mendozammatias/bbv-website", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/Intro.js", "max_issues_repo_name": "mendozammatias/bbv-website", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/Intro.js", "max_forks_repo_name": "mendozammatias/bbv-website", "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": 23.5384615385, "max_line_length": 72, "alphanum_fraction": 0.5795206972}
import React from 'react';
import { Hero, CallToAction } from '@blackbox-vision/ui-components';
import { useTranslation } from '@hooks/useTranslation';
import theme from '@utils/theme';

const Intro = ({ id }) => {
  const translate = useTranslation();

  return (
    <Hero
      id={id}
      title={translate('intro.title')}
      subtitle={translate('intro.subtitle')}
      titleProps={{
        variant: 'h4',
        style: { color: theme.palette.secondary.main, fontWeight: 500 },
      }}
      subtitleProps={{
        variant: 'subtitle1',
        style: { color: theme.palette.secondary.main },
      }}
      clip="left"
    >
      <CallToAction
        component="a"
        href="/#contact-us"
        color="secondary"
        style={{ marginTop: 24, width: 200 }}
      >
        {translate('intro.cta')}
      </CallToAction>
    </Hero>
  );
};

Intro.displayName = 'Intro';

export default Intro;
