Duyên Kim

25 bundles
1 file5 days ago
1

index.tsx

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158import React, { useState } from "react";
import { NextPage } from "next";
import Link from "next/link";
import { Tag, Card, Button, Row, Col, Form } from "antd";

import { useTranslation } from "../../i18n";
import MainLayout from "../layout/MainLayout";

import { SITE_URL } from "../config";
import Head from "../components/forms/Head";

import styles from "./index.less";

import {
  ClockCircleOutlined,
  TeamOutlined,
  CheckCircleOutlined,
  AppstoreOutlined,
} from "@ant-design/icons";

const Index: NextPage = () => {
  const { t, i18n } = useTranslation();
  const [dataCourse, setDataCourse] = useState([
    {
      img: "https://www.stdio.vn/statics/external_data/files/training_stdio_vn/blog/110/dao-tao-cpp-advanced.jpg",
      title: "Khóa Học Lập Trình C++ Advanced Dành Cho Kỹ Sư Và Doanh Nghiệp",
      content: "Khóa học lập trình C++ Advanced - củng cố và chuyên sâu lập trình C++ cho các dự án thực tế.",
      titleone: "STDIO Training Thêm Chuyên Mục Giới Thiệu Sách Công Nghệ - Lập Trình",
      contentone: "Giới thiệu chuyên mục đánh giá và giới thiệu các quyển sách về công nghệ, lập trình có giá trị cho ngành lập trình, kỹ thuật nhằm làm phong phú thêm cho tủ sách kiến thức công nghệ thông tin, khoa học máy tính và kỹ thuật nói chung của bạn.",
      titletwo: "5 Điều Làm Tôi Yêu React Native",
      contenttwo: "Không cần phải biết Objective-C, Swift hoặc Java. Với JavaScript và JSX là có thể viết ứng dụng chạy tốt trên mọi nền tảng. Qua thời gian, JavaScript cùng với React Native đã luôn đứng vững trên chiến trường.",
      titlethree: "C++ - Vị Thần Của Quá Khứ, Hiện Tại Và Vị Lai",
      contentthree: "Thật dễ dàng để nghĩ rằng C/C++ đã cũ, lỗi thời hoặc dễ dàng thay thế bằng một số ngôn ngữ mới hơn, xu hướng hơn. Nhưng bây giờ thực sự là thời điểm tốt nhất để có kiến thức tốt về C/C++ để tạo lợi thế cho tương lai của bạn.",
      titlefour: "Những Ngôn Ngữ Lập Trình Top Của Năm",
      contentfour: "Đây là hướng dẫn cho bất cứ ai muốn chọn lập trình ngôn ngữ phù hợp cho bản thân trong những bước đầu bước vào thế giới lập trình để có được một tư duy và cái gốc tốt.",
      titlefive: "Công Nghệ Thông Tin Và Các Ngành Nghề Tương Lai",
      contentfive: "Khoảng cách giữa yêu cầu kỹ năng cũ và mới - trong số các công nhân và trong số các công ty lãnh đạo cấp cao - có thể sẽ cản trở đáng kể việc quản lý chuyển đổi của cơ quan.",
      titlesix: "Lập Trình C# - Quá Nhiều Điều Thú Vị",
      contentsix: "Lập trình C# cũng như bất kỳ điều gì mới đều khó. Nhưng đường xa vạn lý bắt đầu từ 1 bước chân. Vạn sự khởi đầu nan - miễn gian nan đừng có nản thì C# cũng chỉ như mọi ngôn ngữ lập trình khác thôi."
    }
  ]);
  const onClickBuyBook = () => { };
  return (
    <React.Fragment>
      <Head
        title="STDIO Training"
        image={SITE_URL + "/static/shared/fb-img.png"}
        url={SITE_URL + "/"}
      />

      <MainLayout>
        {/* Phần banner */}
        <div className={styles.code}>
          <div className={styles.codeBox}>
            <div className={styles.banner} style={{ backgroundImage: `url(/static/shared/banner-index.jpg)` }}>
              <div className={styles.textBox}>
                <h4>
                  {" "}
                  <span>KHÓA HỌC ỨNG DỤNG THỰC TẾ</span>
                </h4>
                <h1>
                  Lập Trình Ứng Dụng Di <br /> Động Với React Native
                </h1>
                <p>
                  Khóa học lập trình ứng dụng trên iOS, Android với React Native
                  <br />
                  từ căn bản.{" "}
                </p>
                <h3>
                  <ClockCircleOutlined /> 3 tháng
                </h3>
                <Button>
                  <a>TÌM HIỂU THÊM</a>
                </Button>
              </div>
            </div>
            {/* kết thúc phần banner */}
          </div>
          {/* Phần content story */}
          <div className="boxblog" >
            {dataCourse.map((dataCourse, index) => {
              return (
                <div key={index} className="columnBolgContent">
                  <Row>
                    <Col span={7} className="columnBlog1">
                      <div className={styles.top}>
                        <img
                          src={dataCourse.img}
                          width="100%"
                          height="100%"
                        />
                        <div>
                          <h2>{dataCourse.title}</h2>
                        </div>
                        <div>
                          <p>{dataCourse.content}</p>
                        </div>
                      </div>
                    </Col>
                    <Col span={1}></Col>
                    <Col span={7} className="columnBlog1">
                      <div className={styles.top}>
                        <div>
                          <h2>{dataCourse.titleone}</h2>
                        </div>
                        <div>
                          <p>{dataCourse.contentone}</p>
                        </div>
                        <div>
                          <h2>{dataCourse.titletwo}</h2>
                        </div>
                        <div>
                          <p>{dataCourse.contenttwo}</p>
                        </div>
                        <div>
                          <h2>{dataCourse.titlethree}</h2>
                        </div>
                        <div>
                          <p>{dataCourse.contentthree}</p>
                        </div>
                      </div>
                    </Col>

                    <Col span={1}></Col>
                    <Col span={7} className="columnBlog1">
                      <div className={styles.top}>
                        <div>
                          <h2>{dataCourse.titlefour}</h2>
                        </div>
                        <div>
                          <p>{dataCourse.contentfour}</p>
                        </div>
                        <div>
                          <h2>{dataCourse.titlefive}</h2>
                        </div>
                        <div>
                          <p>{dataCourse.contentfive}</p>
                        </div>
                        <div>
                          <h2>{dataCourse.titlesix}</h2>
                        </div>
                        <div>
                          <p>{dataCourse.contentsix}</p>
                        </div>
                      </div>
                    </Col>
                  </Row>
                </div>
              );
            })}
          </div>
        </div>
      </MainLayout>
    </React.Fragment >
  );
};

export default Index;