import { Flex } from "antd"
import '../asstes/css/Introduction.css'
import imgTop from '../asstes/img/1.png'
import img1 from '../asstes/img/CocoPi1/icon1.png'
import img2 from '../asstes/img/CocoPi1/icon2.png'
import img3 from '../asstes/img/CocoPi1/icon3.png'
import img4 from '../asstes/img/CocoPi1/icon4.png'
import img5 from '../asstes/img/CocoPi1/icon5.png'
import img6 from '../asstes/img/CocoPi1/icon6.png'
import img7 from '../asstes/img/CocoPi1/icon7.png'
import img8 from '../asstes/img/CocoPi1/icon8.png'
import img9 from '../asstes/img/CocoPi1/icon9.png'
import img10 from '../asstes/img/CocoPi1/icon10.png'
import img11 from '../asstes/img/CocoPi1/icon11.png'
import img12 from '../asstes/img/CocoPi1/icon12.png'
import img13 from '../asstes/img/CocoPi1/icon13.png'
import img14 from '../asstes/img/CocoPi1/icon14.png'
import img15 from '../asstes/img/CocoPi1/icon15.png'

function Introduction() {
    return (
        <div className="Introduction">
            <div className="Introduction_top">
                <div>
                    <h1 className='Introduction_top_title'>CocoPi</h1>
                    <p>用于AIoT教学、运行 <br /> Linux系统的<i>掌上计算机</i></p>
                    <p className='Learning'>All-in-One Product in <br/>Technology Innovation Education</p>
                </div>
                {/* <div className="Introduction_top_img">
                    <img src={imgTop} alt="" />
                </div> */}
            </div>
            <div className="Introduction_bottom">
                <h2>人工智能</h2>
                <span>AI</span>
                <p className="Introduction_bottom_span">判别式人工智能</p>
                <Flex>
                    <div>
                        <img src={img1} alt="" />
                        <p>机器学习</p>
                    </div>
                    <div>
                        <img src={img2} alt="" />
                        <p>计算机视觉</p>
                    </div>
                    <div>
                        <img src={img3} alt="" />
                        <p>语音识别</p>
                    </div>
                    <div>
                        <img src={img4} alt="" />
                        <p>语音合成</p>
                    </div>
                    <div>
                        <img src={img5} alt="" />
                        <p>机器翻译</p>
                    </div>
                </Flex>
                <p className="Introduction_bottom_span" style={{ marginTop: 30 }}>生成式人工智能</p>
                <Flex>
                    <div>
                        <img src={img6} alt="" />
                        <p>文本生成</p>
                    </div>
                    <div>
                        <img src={img7} alt="" />
                        <p>语音对话</p>
                    </div>
                    <div>
                        <img src={img8} alt="" />
                        <p>语音生图</p>
                    </div>
                    <div>
                        <img src={img9} alt="" />
                        <p>图像描述</p>
                    </div>
                    <div>
                        <img src={img10} alt="" />
                        <p>智能体</p>
                    </div>
                </Flex>
                <h2 style={{ marginTop: 80 }}>物联网</h2>
                <span className="iot" >IoT</span>
                <Flex style={{ marginTop: 90 }}>
                    <div>
                        <img src={img11} alt="" />
                        <p>云端平台</p>
                    </div>
                    <div>
                        <img src={img12} alt="" />
                        <p>感应系统</p>
                    </div>
                    <div>
                        <img src={img13} alt="" />
                        <p>即时图传</p>
                    </div>
                    <div>
                        <img src={img14} alt="" />
                        <p>蓝牙通信</p>
                    </div>
                    <div>
                        <img src={img15} alt="" />
                        <p>Wi-Fi联网</p>
                    </div>
                </Flex>
            </div>
        </div>
    )
}

export default Introduction;