ohayolibs/src/app/routes/home/home.component.html

Ohayo is a set of essential modules for ohayojp.

<div class="page-wrapper page-banner">
  <div class="page-banner__slogan">
    <h1 data-aos="fade-up" data-aos-once="true">ohayojp</h1>
    <p data-aos="fade-up" data-aos-delay="150" data-aos-once="true">{{ 'app.home.slogan' | i18n }}</p>
    <div class="page-banner__slogan-btn">
      <a routerLink="/docs/getting-started/{{ i18n.zone }}">
        <button nz-button [nzType]="'primary'" [nzSize]="'large'">{{ 'app.home.start' | i18n }}</button>
      </a>
      <a href="https://ohayojp.surge.sh/" target="_blank" rel="noopener noreferrer" nz-tooltip
        [nzTooltipTitle]="previewTpl">
        <button nz-button [nzSize]="'large'">{{ 'app.home.preview' | i18n }}</button>
        <ng-template #previewTpl> 国内镜像：<a href="https://ohayojp.gitee.io" target="_blank">ohayojp.gitee.io</a>
        </ng-template>
      </a>
      <github-button *ngIf="isBrowser" type="stargazers" size="large" namespace="ohayojp" repo="ohayojp">
      </github-button>
    </div>
  </div>
  <nz-carousel class="page-banner__img" nzAutoPlay nzEffect="fade">
    <div nz-carousel-content *ngFor="let i of list">
      <a href="{{ i.url }}" target="_blank">
        <img src="./assets/screenshot/{{ i.type }}.png" />
      </a>
    </div>
  </nz-carousel>
</div>
<div class="page-wrapper page-feature">
  <div class="page-feature__bg"></div>
  <div class="page-feature__bg-bottom"></div>
  <div class="page">
    <h2>{{ 'app.home.feature' | i18n }}</h2>
    <div class="ant-row">
      <div class="ant-col-xs-24 ant-col-md-6">
        <div class="page-feature__item" data-aos="fade-up" data-aos-easing="ease-in-out" data-aos-delay="0">
          <i nz-icon nzType="heart"></i>
          <div>
            <h3>Ant Design</h3>
            <p>{{ 'app.home.feature.antd' | i18n }}</p>
          </div>
        </div>
      </div>
      <div class="ant-col-xs-24 ant-col-md-6">
        <div class="page-feature__item" data-aos="fade-up" data-aos-easing="ease-in-out" data-aos-delay="50">
          <i nz-icon nzType="heart"></i>
          <div>
            <h3>NG-ZORRO</h3>
            <p>{{ 'app.home.feature.zorro' | i18n }}</p>
          </div>
        </div>
      </div>
      <div class="ant-col-xs-24 ant-col-md-6">
        <div class="page-feature__item" data-aos="fade-up" data-aos-easing="ease-in-out" data-aos-delay="100">
          <i nz-icon nzType="heart"></i>
          <div>
            <h3>Ohayo</h3>
            <p>{{ 'app.home.feature.ohayo' | i18n }}</p>
          </div>
        </div>
      </div>
      <div class="ant-col-xs-24 ant-col-md-6">
        <div class="page-feature__item" data-aos="fade-up" data-aos-easing="ease-in-out" data-aos-delay="150">
          <i nz-icon nzType="rocket"></i>
          <div>
            <h3>{{ 'app.home.feature.out-of-box' | i18n }}</h3>
            <p>{{ 'app.home.feature.out-of-box.desc' | i18n }}</p>
          </div>
        </div>
      </div>
      <div class="ant-col-xs-24 ant-col-md-6">
        <div class="page-feature__item" data-aos="fade-up" data-aos-easing="ease-in-out" data-aos-delay="200">
          <i nz-icon nzType="skin"></i>
          <div>
            <h3>{{ 'app.home.feature.less' | i18n }}</h3>
            <p>{{ 'app.home.feature.less.desc' | i18n }}</p>
          </div>
        </div>
      </div>
      <div class="ant-col-xs-24 ant-col-md-6">
        <div class="page-feature__item" data-aos="fade-up" data-aos-easing="ease-in-out" data-aos-delay="250">
          <i nz-icon nzType="heart"></i>
          <div>
            <h3>{{ 'app.home.feature.rep' | i18n }}</h3>
            <p>{{ 'app.home.feature.rep.desc' | i18n }}</p>
          </div>
        </div>
      </div>
      <div class="ant-col-xs-24 ant-col-md-6">
        <div class="page-feature__item" data-aos="fade-up" data-aos-easing="ease-in-out" data-aos-delay="300">
          <i nz-icon nzType="tool"></i>
          <div>
            <h3>{{ 'app.home.feature.tool' | i18n }}</h3>
            <p>{{ 'app.home.feature.tool.desc' | i18n }}</p>
          </div>
        </div>
      </div>
      <div class="ant-col-xs-24 ant-col-md-6">
        <div class="page-feature__item" data-aos="fade-up" data-aos-easing="ease-in-out" data-aos-delay="350">
          <i nz-icon nzType="layout"></i>
          <div>
            <h3>{{ 'app.home.feature.demo' | i18n }}</h3>
            <p>{{ 'app.home.feature.demo.desc' | i18n }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="page-wrapper page-theme">
  <div class="page">
    <h2>{{ 'app.home.theme' | i18n }}</h2>
    <div class="ant-row">
      <div *ngFor="let t of themes" class="ant-col-xs-24 ant-col-md-12">
        <a class="page-theme__item" [attr.href]="'https://e.ohayojp.com/theme/' + t" data-aos="zoom-in"
          data-aos-delay="0" [attr.data-theme]="t">
          <img src="./assets/screenshot/{{ t }}.png" />
          <h3>{{ 'app.home.theme.' + t | i18n }}</h3>
          <p>{{ 'app.home.theme.' + t + '.desc' | i18n }}</p>
        </a>
      </div>
    </div>
  </div>
</div>
<app-footer></app-footer>