<commit_before>import Section from '../section'

const Plugin = ({ title, description, color, href }) => (
  <a href={href || '#'} className="plugin" style={{ backgroundColor: color }}>
    <span>{title}</span>
    <p>{description}</p>
    <style jsx>{`
      span {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 16px;
        display: block;
      }
      p {
        font-weight: normal;
      }
      .plugin {
        color: #000;
        padding: 32px;
        border-radius: 4px;
        box-shadow: 0 16px 32px 0 rgba(0, 0, 0, 0.1),
          0 1px 2px 0 rgba(0, 0, 0, 0.1);
        width: 208px;
        height: 160px;
        margin-right: 16px;
        margin-bottom: 16px;
        display: inline-block;
        transition: 100ms ease;
      }
      .plugin:hover {
        transform: scale(1.2);
      }
    `}</style>
  </a>
)
export default () => (
  <Section height="600px">
    <div className="plugins">
      <div className="plugins__text">The power of open-source</div>
      <div className="plugins__display">
        <div className="list">
          <Plugin
            title="giphy"
            color="#ffd500"
            description="Share GIFs on Giphy"
            href='https://github.com/wulkano/kap-giphy'
            />
          <Plugin
            title="now"
            color="#FFF"
            description="Share on ▲ZEIT now"
            href="https://github.com/lucaperret/kap-now"
            />
          <Plugin
            title="draggable"
            color="#00ffbe"
            description="Share recordings with drag and drop"
            href="https://github.com/albinekb/kap-draggable"
          /><commit_msg>🎉 Dial hover effect back a notch<commit_after>import Section from '../section'

const Plugin = ({ title, description, color, href }) => (
  <a href={href || '#'} className="plugin" style={{ backgroundColor: color }}>
    <span>{title}</span>
    <p>{description}</p>
    <style jsx>{`
      span {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 16px;
        display: block;
      }
      p {
        font-weight: normal;
      }
      .plugin {
        color: #000;
        padding: 32px;
        border-radius: 4px;
        box-shadow: 0 16px 32px 0 rgba(0, 0, 0, 0.1),
          0 1px 2px 0 rgba(0, 0, 0, 0.1);
        width: 208px;
        height: 160px;
        margin-right: 16px;
        margin-bottom: 16px;
        display: inline-block;
        transition: 100ms ease;
      }
      .plugin:hover {
        transform: scale(1.05);
      }
    `}</style>
  </a>
)
export default () => (
  <Section height="600px">
    <div className="plugins">
      <div className="plugins__text">The power of open-source</div>
      <div className="plugins__display">
        <div className="list">
          <Plugin
            title="giphy"
            color="#ffd500"
            description="Share GIFs on Giphy"
            href="https://github.com/wulkano/kap-giphy"
          />
          <Plugin
            title="now"
            color="#FFF"
            description="Share on ▲ZEIT now"
            href="https://github.com/lucaperret/kap-now"
          />
          <Plugin
            title="draggable"
            color="#00ffbe"
            description="Share recordings with drag and drop"
            href="https://github.com/albinekb/kap-draggable"
          />
{'fraction_non_alphanumeric': 0.14087418783225045, 'fraction_numerical': 0.031600708800945065, 'mean_word_length': 1.7161186848436247, 'pattern_counts': {'":': 0, '<': 37, '<?xml version=': 0, '>': 41, 'https://': 6, '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': '2464701', 'n_tokens_mistral': 1128, 'n_tokens_neox': 1027, 'n_words': 236}