Hồng Phúc

24 bundles
1 file6 days ago
2

import React, { useState } from "react";

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504import 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 [dataBook, setDataBook] = useState([
    {
      thumbnail:
        "https://www.stdio.vn/statics/external_data/files/training_stdio_vn/books/46/thumb-bi-mat-dotcom.png",
      title: "Bí Mật Dotcom",
      category: "Startup & di sản công nghệ",
      description: "Bạn muốn làm giàu từ Internet ?",
    },
    {
      thumbnail:
        "https://www.stdio.vn/statics/external_data/files/training_stdio_vn/books/45/thumb-kinh-doanh-trong-thoi-dai-4_0.png",
      title: "Kinh Doanh Trong Thời Đại 4.0",
      category: "Startup & di sản công nghệ",
      description:
        "Chiến lược kinh doanh trong Cuộc Cách mạng Công nghiệp 4.0.",
    },
    {
      thumbnail:
        "https://www.stdio.vn/statics/external_data/files/training_stdio_vn/books/44/thumb-suc-manh-cua-thoi-quen.png",
      title: "Sức Mạnh Của Thói Quen",
      category: "Startup & di sản công nghệ",
      description:
        "Khám phá điều kỳ diệu ẩn chứa trong từng hành động nhỏ nhặt hằng ngày của ta.",
    },
    {
      thumbnail:
        "https://www.stdio.vn/statics/external_data/files/training_stdio_vn/books/43/thumb-nhan-nut-tai-tao.png",
      title: "Nhấn Nút Tái Tạo",
      category: "AI & Big Data",
      description: "Tái cấu trúc lại bên trong của Microsoft.",
    },
  ]);
  const [dataImg, setDataImg] = useState([
    {
      img: "/static/shared/1.jpg",
    },
    {
      img: "/static/shared/2.jpg",
    },
    {
      img: "/static/shared/3.jpg",
    },
    {
      img: "/static/shared/4.jpg",
    },
  ]);
  const [dataCourse, setDataCourse] = useState([
    {
      img: "/static/shared/Course.png",
      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ế.",
    },
    {
      subTitle:
        "STDIO Training Thêm Chuyên Mục Giới Thiệu Sách Công Nghệ - Lập Trình",

      subContent:
        "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.",
    },
    {
      subTitle: "5 Điều Làm Tôi Yêu React Native",

      subContent:
        "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.",
    },
    {
      subTitle: "C++ - Vị Thần Của Quá Khứ, Hiện Tại Và Vị Lai",

      subContent:
        "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.",
    },
    {
      subTitle: "5 Điều Làm Tôi Yêu React Native",

      subContent:
        "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.",
    },
    {
      subTitle: "Những Ngôn Ngữ Lập Trình Top Của Năm",

      subContent:
        "Đâ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.",
    },
    {
      subTitle: "Công Nghệ Thông Tin Và Các Ngành Nghề Tương Lai",

      subContent:
        "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.",
    },
  ]);
  const onClickBuyBook = () => {};
  return (
    <React.Fragment>
      <Head
        title="STDIO Training"
        image={SITE_URL + "/static/shared/fb-img.png"}
        url={SITE_URL + "/"}
      />

      <MainLayout>
        <div className={styles.code}>
          <div className={styles.codeBox}>
            <div
              style={{
                backgroundImage: `url(/static/shared/banner-index.jpg)`,
              }}
              className={styles.banner}
            >
              <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>
            {/*  */}

            <div className={styles.subbanner}>
              <div className={styles.subItem}>
                <TeamOutlined style={{ fontSize: "35px", color: "#fff" }} />
              </div>
              <div className={styles.subContent}>
                <span>
                  <b>Dưới 8 học viên 1 lớp</b>
                  <br />
                  Giảng viên dành nhiều thời gian hơn giải
                  <br />
                  đáp thắc mắc của bạn.
                </span>
              </div>
              {/*  */}
              <div className={styles.subItem}>
                <CheckCircleOutlined
                  style={{ fontSize: "35px", color: "#fff" }}
                />
              </div>
              <div className={styles.subContent}>
                <span>
                  <b>Giảng viên có kinh nghiệm</b>
                  <br />
                  Học với các giảng viên là các kỹ sư
                  <br />
                  phần mềm có kinh nghiệm.
                </span>
              </div>
              {/*  */}
              <div className={styles.subItem}>
                <AppstoreOutlined style={{ fontSize: "35px", color: "#fff" }} />
              </div>
              <div className={styles.subContent}>
                <span>
                  <b>Đào tạo từ nền tảng</b>
                  <br />
                  Đào tạo bài bản nền tảng lập trình và
                  <br />
                  ứng dụng thực tế tốt nhất.
                </span>
              </div>
              {/*  */}
            </div>
            {/*  */}

            <div className={styles.columnBlog}>
              <Row>
                <Col span={2}></Col>
                <Col span={20}>
                  {dataCourse.map((dataCourse, index) => {
                    return (
                      <div key={index} className={styles.columnBolgContent}>
                        <Row>
                          <Col span={7} className={styles.columnBlog1}>
                            <div className={styles.top}>
                              <img
                                src={dataCourse.img}
                                width="100%"
                                height="100%"
                              />
                              <div className={styles.topTitle}>
                                <h2>{dataCourse.title}</h2>
                              </div>
                              <div className={styles.topContent}>
                                <p>{dataCourse.content}</p>
                              </div>
                            </div>
                          </Col>
                        </Row>
                      </div>
                    );
                  })}
                </Col>
                <Col span={2}></Col>
              </Row>
            </div>
            {/*  */}
            <div className={styles.columnImg}>
              <div className={styles.columnImgCenter}>
                {dataImg.map((dataImg, index) => {
                  return (
                    <div key={`dataImg_${index}`} className={styles.img}>
                      <img src={dataImg.img} width="400" height="250" />
                    </div>
                  );
                })}
              </div>
              <div className={styles.imgButton}>
                <Button>
                  <span>XEM THÊM</span>
                </Button>
              </div>
            </div>
            {/*  */}
            <div className={styles.columnBook}>
              <div className={styles.columnBookHead}>
                <span>Giới Thiệu Sách Kỹ Thuật</span>
              </div>
              <div className={styles.columnBookList}>
                {dataBook.map((dataBook, index) => {
                  return (
                    <div key={index} className={styles.columnBoxs}>
                      <div className={styles.columnBoxImg}>
                        <img
                          src={dataBook.thumbnail}
                          width="130"
                          height="200"
                        />
                      </div>
                      <div className={styles.columnBoxTitle}>
                        <h2> {dataBook.title}</h2>
                      </div>
                      <div className={styles.columnBoxCategory}>
                        <p>{dataBook.category}</p>
                      </div>
                      <div className={styles.columnBoxDescription}>
                        <p>{dataBook.description}</p>
                      </div>
                      <div className={styles.columnBoxBuy}>
                        <Button onClick={onClickBuyBook}>Đặt mua</Button>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
            {/*  */}
            <div className={styles.columnBanner}>
              <div className={styles.columnBannerLogo}>
                <img src="/static/shared/STDIOTrainingLogo.svg" />
                <br />
                <span>Công nghệ đào tạo hỗ trợ học viên học tập.</span>
              </div>
              <div className={styles.columnBannerIcon}>
                <div className={styles.columnBannerIconBugs}>
                  <img src="/static/shared/icon_bugs.svg" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </MainLayout>
    </React.Fragment>
  );
};

export default Index;



///////

index.less
@import "../layout/MainTemplate.less";
@import "../layout/Template.less";
@INDEX-SUB-TITLE-FONT-SIZE: 1.8rem;
@INDEX-DESCRIPTION-FONT-SIZE: 1.2rem;

.code {
  .codeBox {
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    .banner {
      width: 100%;
      height: 600px;

      display: flex;
      .textBox {
        margin-left: 10%;
        margin-top: 10%;
        h4 {
          span {
            color: #023;
            background-color: #fff;
            padding: 4px 6px;
            text-transform: uppercase;
          }
        }
        h1 {
          color: #fff;
          font-size: 3.6em;
          font-weight: 700;
        }
        p {
          color: #fff;
          font-size: 1.5em;
        }
        h3 {
          color: #fff;
        }
        Button {
          a {
            color: #023;
          }
        }
      }
    }
    .subbanner {
      justify-content: center;
      background-color: #00b0aa;
      height: 100px;
      display: flex;

      .subItem {
        margin-left: 10%;
        margin-top: 35px;
      }
      .subContent {
        margin-top: 25px;
        padding-left: 10px;
        display: inline-block;

        span {
          color: #fff;
          width: 70px;
        }
      }
    }
    .columnBlog {
      border-top: 1px solid #eee;
      border-bottom: 1px solid #eee;
      padding: 80px 0;

      height: 500px;

      .columnBolgContent {
        .columnBlog1 {
          .top {
            .topTitle {
              margin-top: 20px;
              h2 {
                color: #279;
              }
            }
            .topContent {
              p {
                font-weight: bold;
              }
            }
          }
        }
        .columnBlog2 {
          width: calc(70% - 25px);
          margin: 0;
          padding: 0;
        }
      }
    }
    .columnImg {
      background-color: #f5f5f5;
      padding: 40px 0 40px 0;

      .columnImgCenter {
        margin: 0 auto;
        text-align: center;
        .img {
          display: inline-block;
          margin-left: 20px;
          line-height: 300px;
        }
      }
      .imgButton {
        text-align: center;
        Button {
          background-color: #00b0aa;
          color: #fff;

          font-size: 0.9em;
          font-weight: 700;
        }
      }
    }
    .columnBook {
      padding: 0 100px;
      height: 700px;
      margin-top: 40px;
      .columnBookHead {
        span {
          font-size: 1.1em;
          font-weight: 700;

          text-transform: uppercase;
          border-bottom: 6px solid #eee;
        }
      }
      .columnBookList {
        display: flex;
        margin-top: 20px;
        .columnBoxs {
          display: inline-block;
          width: 400px;
          height: 500px;
          margin: 0 auto;
          padding: 20px;

          .columnBoxImg {
            text-align: center;
          }
          .columnBoxTitle {
            font-weight: bold;
            h2 {
              color: #279;
              font-size: 1em;
            }
          }
          .columnBoxCategory {
            p {
              color: #279;
            }
          }
          .columnBoxBuy {
            background-color: #cacaca;
          }
        }
        .columnBoxs:hover {
          border: 1px solid #eee;
          box-shadow: 20px 20px 50px grey;
        }
      }
    }
    .columnBanner {
      background-color: #023;
      display: flex;
      .columnBannerLogo {
        padding: 0 250px;
        padding-bottom: 20px;
        img {
          width: 500px;
          height: 150px;
        }
        span {
          padding-left: 40px;
          color: #fff;
          font-size: 1.7em;
        }
      }
      .columnBannerIcon {
        height: 140px;

        .columnBannerIconBugs {
          background-color: rgba(255, 255, 255, 0.1);
          width: 80px;
          height: 80px;
          margin-right: 1px;
        }
      }
    }
  }
}