import { Flex } from "antd";
import "../asstes/css/CheckeredQuery.css"
import ExperienceImg3 from '../asstes/img/3.png'
import ExperienceImg6 from '../asstes/img/6.png'
import ExperienceImg4 from '../asstes/img/4.png'
import ExperienceImg5 from '../asstes/img/5.png'

function CheckeredQuery() {
    return (
        <div className="CheckeredQuery">
            <h1>配套資源</h1>
            <Flex className="CheckeredQuery_content">
                <div className="Introduction_bottom_left Introduction_bottom_div">
                    <h2><i>Pi Blockly </i>編程平台</h2>
                    <p>
                        Pi Blockly圖形化編程平台基於 Google Blockly 開發的AIoT技術應用平台，可以直接通過瀏覽器設計程式對人工智能及物聯網技術進行相關體驗。
                    </p>
                    <div className='experience'>
                        <a href="https://pi.cocorobo.hk/">
                            <span className="img2">
                                <span className="img1">
                                    <img src={ExperienceImg5} alt=""></img>
                                </span>
                            </span>
                            <span className="span1">開始體驗</span>
                        </a>
                        <img className='experience_img' src={ExperienceImg6} alt="" />
                    </div>
                </div>
                <div className="Introduction_bottom_right Introduction_bottom_div">
                    <div className='Introduction_bottom_right_div'>
                        <h2>CocoClass <i>課程平台</i></h2>
                        <p>
                            Cococlass 集成各種互動學習工具、採集進展性數據並進行可視化分析，以支援在學科與跨学科教學、學校數碼化管理、競賽活動組織等不同場景下使用。
                        </p>
                        <div className='experience'>
                            <a href="https://cloud.cocorobo.hk/">
                                <span className="img3">
                                    <span className="img4">
                                        <img src={ExperienceImg4} alt=""></img>
                                    </span>
                                </span>
                                <span className="span2">開始體驗</span>
                            </a>
                            <img className='experience_img' src={ExperienceImg3} alt="" />
                        </div>
                    </div>
                </div>
                <div className="Introduction_bottom_right Introduction_bottom_div">
                    <div className='Introduction_bottom_right_div'>
                        <h2>CocoCloud <i>雲端平臺</i></h2>
                        <p>
                            CocoCloud 是 CocoRobo 推出的雲端物聯網平臺,用戶可以在改平臺上進行物聯網事件的管理,以及時間狀態的查看。CocoCloud 支持數據可視化功能,用戶可以控制面板中的創建,並查看各類的數據。
                        </p>
                        <div className='experience'>
                            <a href="https://cocorobo.hk/cloud/login">
                                <span className="img3">
                                    <span className="img4">
                                        <img src={ExperienceImg4} alt=""></img>
                                    </span>
                                </span>
                                <span className="span2">開始體驗</span>
                            </a>
                            <img className='experience_img' src={ExperienceImg3} alt="" />
                        </div>
                    </div>
                </div>
                <div className="Introduction_bottom_left Introduction_bottom_div">
                    <h2><i>AI模型 </i>訓練平臺</h2>
                    <p>
                        使用CocoRobo訓練平臺可以幫助您進行數據標註完成數據集的第一步處理，引導您一步步的開始模型訓練，並將訓練過程可視化地呈現出來。
                    </p>
                    <div className='experience'>
                        <a href="https://model-training.cocorobo.hk/">
                            <span className="img2">
                                <span className="img1">
                                    <img src={ExperienceImg5} alt=""></img>
                                </span>
                            </span>
                            <span className="span1">開始體驗</span>
                        </a>
                        <img className='experience_img' src={ExperienceImg6} alt="" />
                    </div>
                </div>
                <div className="Introduction_bottom_left Introduction_bottom_div">
                    <h2><i>AI Hub </i>體驗平臺</h2>
                    <p>
                        AI Hub是CocoRobo的人工智慧體驗平臺，無需安裝任何挿件，使用瀏覽器便可直接體驗最前沿的人工智慧研究、科技和應用，實現與機器的高效互動。
                    </p>
                    <div className='experience'>
                        <a href="https://aihub.cocorobo.hk/">
                            <span className="img2">
                                <span className="img1">
                                    <img src={ExperienceImg5} alt=""></img>
                                </span>
                            </span>
                            <span className="span1">開始體驗</span>
                        </a>
                        <img className='experience_img' src={ExperienceImg6} alt="" />
                    </div>
                </div>
                <div className="Introduction_bottom_right Introduction_bottom_div">
                    <div className='Introduction_bottom_right_div'>
                        <h2>Coco CAD <i>建模平臺</i></h2>
                        <p>
                            Coco-CAD 同樣是使用積木的方式讓學生體驗到通過漸進式方法來進行 3D 建模。
                        </p>
                        <div className='experience'>
                            <a href="https://cocorobo.hk/cococad/">
                                <span className="img3">
                                    <span className="img4">
                                        <img src={ExperienceImg4} alt=""></img>
                                    </span>
                                </span>
                                <span className="span2">開始體驗</span>
                            </a>
                            <img className='experience_img' src={ExperienceImg3} alt="" />
                        </div>
                    </div>
                </div>
            </Flex>
        </div>
    )
}
export default CheckeredQuery;