import { IProps } from "@/common/Iprops.interface";
import { AppContianer } from "@/layouts/AppContianer";

interface FeaturesType extends IProps {}

export const Features = (props: FeaturesType) => {
  return (
    <AppContianer className="flex items-center  h-full w-full relative min-h-[750px] labtop:min-h-[960px] ">
      <>
        <div className="h-[100vh] -translate-y-[83px] absolute top-0 left-0  min-w-[920px] w-[60vw] bg-white/40 -z-[1]"></div>
        <div className="centred -translate-y-[30px]">
          <div className="flex w-full h-full items-start ">
            <div className="left  min-w-[820px] w-[55vw] h-full relative ">
              <div className="title-1-en ">
                Functional
                <div className="title-1-en">Features</div>
              </div>
              <div className="py-[10px] flex items-center gap-x-[24px]">
                <div className=" w-[80px] h-[2px] bg-theme-dark rounded"></div>
                <div className="subTitle-1-cn">功能特点</div>
              </div>
              <div className="normal-content">一键部署多样化区块链网络</div>
              <div className="flex  justify-start labtop:justify-end w-full relative  pt-[60px] ">
                <div className="grid grid-cols-2 labtop:w-9/12 ">
                  <div className="w-full pb-[48px] mr-[90px]">
                    <div className="sub-title-cn">快速构建</div>
                    <div className="normal-content pt-[14px]">
                      支持一键快速构建联盟链、
                      <br />
                      平行链等区块链网络
                    </div>
                  </div>
                  <div className="w-full pb-[48px] mr-[90px]">
                    <div className="sub-title-cn">隐私保护</div>
                    <div className="normal-content pt-[14px]">
                      提供权限管理、身份关联、
                      <br />
                      数据加密等方式保证数据安全
                    </div>
                  </div>
                  <div className="w-full pb-[48px] mr-[90px]">
                    <div className="sub-title-cn">灵活部署</div>
                    <div className="normal-content pt-[14px]">
                      支持节点一键自动化部署省去手动部署
                      <br />
                      等大量时间和精力
                    </div>
                  </div>
                  <div className="w-full pb-[48px] mr-[90px]">
                    <div className="sub-title-cn">多组件支持</div>
                    <div className="normal-content pt-[14px]">
                      智能合约模块可插拔
                      <br /> 支持智能合约语言的多样化
                      <br />
                      包括Solidity,Java,C++和Golang等成熟开发语言
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div className="right  w-[43vw] h-full">
              <div className="flex-col w-[320px] items-center mx-auto justify-center ">
                <div className="max-w-[320px] min-w-[280px]">
                  <div className="sub-title-cn  pb-[14px]">弹性扩展</div>
                  <div className="normal-content">支持联盟节点动态增删</div>
                </div>
                <div className="max-w-[320px] min-w-[280px] mt-[46px]">
                  <div className="sub-title-cn   pb-[14px]">运维监控</div>
                  <div className="normal-content">
                    支持区块链节点及硬件资源的实时监控
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </>
    </AppContianer>
  );
};
