import React from 'react';
import { Button } from 'antd';
import gitlink1 from '../../img/gitlink1.png';
import gitlink2 from '../../img/gitlink2.png';
import help from '../../img/help.png';
import './index.scss';

function Contact() {

  return (
    <div className="contact">
      <div className="glcc-content">
        <h3 className="glcc-tit">联系我们</h3>
        <div className="contact-content">
          <div className="contact-info">
            <h4 className="contact-invite">期待你的加入，和我们一起推动开源繁荣发展！</h4>
            <div className="contact-way">
              <p>交流QQ群: 210174286</p>
              <p>合作推广: gitlink@ccf.org.cn</p>
            </div>
          </div>
          <div className='attention'>
            <div className='one'>
              <div className='attentionDiv'><img src={gitlink1} alt="gitlink1"/></div>
              <p>加入编程夏令营</p>
              <p>交流QQ群</p>
            </div>
            <div>
              <div className='attentionDiv'><img src={gitlink2} alt="gitlink2"/></div>
              <p>关注GitLink</p>
              <p>微信公众号</p>
            </div>
          </div>
        </div>
        {/* 帮助中心 */}
        <div className='glcc_help'>
          <img src={help} alt='help'/>
          <span className='font-32 title_32'>帮助中心&nbsp;&nbsp;&nbsp;&nbsp;</span>
          <span className='font-18 small_32'>查看GitLink编程夏令营活动信息及热点问题</span>
          <Button type="danger" className='joinHelp font-16 mr40' onClick={()=>{window.open("/glcc/help")}}>进入帮助中心</Button>
        </div>
      </div>
    </div>
  )
}
export default Contact;