<commit_before>import * as React from 'react'
import IntroSteps from './IntroSteps'
import { Step } from '../../types'
import Link from 'gatsby-link'
import { connect } from 'react-redux'
import { setOverviewVideoVisible } from '../../actions/ui'

interface Props {
  steps: { [key: string]: Step[] }
  location: any
  setOverviewVideoVisible: (visible: boolean) => void
}

class Intro extends React.Component<Props, null> {
  render() {
    return (
      <section className="intro">
        <style jsx={true}>{`
          h1 {
            @p: .tc;
            font-size: 54px;
          }
          p {
            @p: .mt25, .center, .tc;
            max-width: 800px;
          }
          .watch-overview {
            @p: .black40, .f16, .fw6, .mt25, .pa16, .ttu, .flex, .itemsCenter, .pointer;
          }
          .watch-overview span {
            @p: .ml16;
          }
          .center-container {
            @p: .flex, .justifyCenter;
          }
          @media (max-width: 500px) {
            .intro {
              padding: 30px 30px 0;
            }
            h1 {
              font-size: 32px;
              text-align: left !important;
            }
            p {
              text-align: left !important;
            }
            .center-container {
              justify-content: flex-start !important;
            }
            .btn {
              font-size: 20px;
            }
          }
          .btn-container {
            @p: .mt25;
          }
        `}</style>
        <h1>The Fullstack Tutorial for GraphQL</h1>
        <p>
          The free and open-source tutorial for you to learn about GraphQL from
          zero to production. After a basic
          introduction, you’ll build a Hackernews clone with Javascript or any
          other technology of your choice.
        </p>
        <div className="center-container">
          <div
            className="watch-overview"
            onClick={this.props.setOverviewVideoVisible.bind(null, true)}
          >
            <img src={require('../../assets/icons/play.svg')} />
            <span>
              Watch Overview
            </span>
          </div>
        </div>
        <div className="center-container btn-container">
          <Link to="/tutorials/graphql/basics/0-introduction/">
            <div className="btn">Start with Introduction</div>
          </Link>
        </div>
        <IntroSteps steps={this.props.steps} location={this.props.location} />
      </section>
    )
  }
}

export default connect(null, { setOverviewVideoVisible })(Intro)<commit_msg>fixed introduction link on landing page<commit_after>import * as React from 'react'
import IntroSteps from './IntroSteps'
import { Step } from '../../types'
import Link from 'gatsby-link'
import { connect } from 'react-redux'
import { setOverviewVideoVisible } from '../../actions/ui'

interface Props {
  steps: { [key: string]: Step[] }
  location: any
  setOverviewVideoVisible: (visible: boolean) => void
}

class Intro extends React.Component<Props, null> {
  render() {
    return (
      <section className="intro">
        <style jsx={true}>{`
          h1 {
            @p: .tc;
            font-size: 54px;
          }
          p {
            @p: .mt25, .center, .tc;
            max-width: 800px;
          }
          .watch-overview {
            @p: .black40, .f16, .fw6, .mt25, .pa16, .ttu, .flex, .itemsCenter, .pointer;
          }
          .watch-overview span {
            @p: .ml16;
          }
          .center-container {
            @p: .flex, .justifyCenter;
          }
          @media (max-width: 500px) {
            .intro {
              padding: 30px 30px 0;
            }
            h1 {
              font-size: 32px;
              text-align: left !important;
            }
            p {
              text-align: left !important;
            }
            .center-container {
              justify-content: flex-start !important;
            }
            .btn {
              font-size: 20px;
            }
          }
          .btn-container {
            @p: .mt25;
          }
        `}</style>
        <h1>The Fullstack Tutorial for GraphQL</h1>
        <p>
          The free and open-source tutorial for you to learn about GraphQL from
          zero to production. After a basic
          introduction, you’ll build a Hackernews clone with Javascript or any
          other technology of your choice.
        </p>
        <div className="center-container">
          <div
            className="watch-overview"
            onClick={this.props.setOverviewVideoVisible.bind(null, true)}
          >
            <img src={require('../../assets/icons/play.svg')} />
            <span>
              Watch Overview
            </span>
          </div>
        </div>
        <div className="center-container btn-container">
          <Link to="/basics/0-introduction/">
            <div className="btn">Start with Introduction</div>
          </Link>
        </div>
        <IntroSteps steps={this.props.steps} location={this.props.location} />
      </section>
    )
  }
}

export default connect(null, { setOverviewVideoVisible })(Intro)
{'fraction_non_alphanumeric': 0.12388695315524584, 'fraction_numerical': 0.014324428958575301, 'mean_word_length': 1.4488151658767772, 'pattern_counts': {'":': 0, '<': 49, '<?xml version=': 0, '>': 51, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4246534', 'n_tokens_mistral': 1528, 'n_tokens_neox': 1457, 'n_words': 368}