import {Flex} from "antd"
import '../asstes/css/Introduction.css'
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">
                <h1 className='Introduction_top_title'>CocoPi</h1>
                <p>用於AIoT教學、運行 <br /> Linux系統的<i>掌上計算機</i></p>
                <p className='Learning'>All-in-One Product in Technology Innovation Education</p>
                
            </div>
            <div className="Introduction_bottom">
                <h2>人工智能</h2>
                <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">判別式人工智能</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:100}}>物聯網</h2>
                <Flex style={{marginTop:70}}>
                    <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;