<div class="main">
  <header class="navbar">
    <div class="container">
      <a class="navbar-brand" [routerLink]="['/']">Apm</a>
      <div class="navbar-inner">
        <ul class="navbar-nav">
          <li class="nav-item"><a class="nav-link" href="/">首页</a></li>
          <li class="nav-item"><a class="nav-link" href="/">服务</a></li>
          <li class="nav-item"><a class="nav-link" href="/">价格</a></li>
          <li class="nav-item"><a class="nav-link" href="/">团队</a></li>
          <li class="nav-item"><a class="nav-link" href="/">联系</a></li>
          <li class="nav-item"><a class="nav-link" href="/">博客</a></li>
          <li class="nav-item"><a class="nav-link" href="/">关于</a></li>
          <li class="nav-item"><a class="nav-link" href="/sigin">登录</a></li>
          <li class="nav-item"><a class="nav-link" href="/sigup">注册</a></li>
        </ul>
      </div>
    </div>
  </header>

  <section class="bg-color-primary section-container hero">
    <div
      class="background-holder background-holder--left-top background-holder--auto"
      style="background-image: url('assets/images/bg-pattern/wave-1.png');background-repeat: no-repeat;"
    ></div>

    <div
      class="background-holder background-holder--right-bottom background-holder--auto"
      style="background-image: url('assets/images/bg-pattern/dots-pattern-3.png');background-repeat: no-repeat;"
    ></div>

    <div class="container">
      <div class="hero-content position-relative">
        <h2 class="text-white">前端监控系统</h2>
        <h3 class="text-center">
          打造一款完整，高性能，高可用的前端监控系统，提升前端对于服务端技术的空白，体验并解决高并发系统的开发和解决方案。
        </h3>
        <h4>
          <a
            mat-raised-button
            class="button-free"
            href="https://github.com/stbui/angular-material-app"
          >
            免费试用
          </a>
        </h4>
        <h5>当前版本：0.8.0 免费版</h5>
      </div>
    </div>

    <div class="hero__shape">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        version="1.1"
        id="Layer_1"
        x="0px"
        y="0px"
        viewBox="0 0 1920 242.6"
        style="enable-background:new 0 0 1920 242.6;"
        xml:space="preserve"
      >
        <path
          fill="#fff"
          d="M1920,70.5v172.1H0v-27.9C171.3,122.8,367.9,89,589.6,113.4C923.1,149.9,1014.7,43,1239.7,7  c224.9-35.9,442.2,77.7,576.1,75.6C1853.2,82,1888,78,1920,70.5z"
        ></path>
        <rect x="-1036" y="-829.4" width="1920" height="137.6"></rect>
        <rect x="-1136" y="-829.4" width="2446" height="380"></rect>
      </svg>
    </div>
  </section>

  <section class="section-container features">
    <div class="container text-center">
      <div class="features-intro">
        <h2>一站式体系化解决方案</h2>
        <p>一款完整，高性能，高可用的前端性能监控系统</p>
      </div>

      <div fxLayout="row wrap">
        <div fxFlex.gt-sm="33.33" fxFlex.gt-xs="50" fxFlex="100">
          <div class="feature-list">
            <div class="card-icon">
              <mat-icon class="card-img">notifications</mat-icon>
            </div>
            <div class="card-text">
              <h3>页面性能体验分析</h3>
              <p>
                实时采集页面的访问数据及性能数据，帮助技术人员快速定位页面问题。
              </p>
            </div>
          </div>
        </div>

        <div fxFlex.gt-sm="33.33" fxFlex.gt-xs="50" fxFlex="100">
          <div class="feature-list">
            <div class="card-icon">
              <mat-icon class="card-img">notifications_active</mat-icon>
            </div>
            <div class="card-text">
              <h3>机器学习和智能告警</h3>
              <p>
                采用多项国际主流计算模型及统计策略，运用机器学习建立应用健康动态基线，依据业务场景变化智能调整基线值，使报警更加灵活精准。
              </p>
            </div>
          </div>
        </div>

        <div fxFlex.gt-sm="33.33" fxFlex.gt-xs="50" fxFlex="100">
          <div class="feature-list">
            <div class="card-icon">
              <mat-icon class="card-img">notifications_none</mat-icon>
            </div>
            <div class="card-text">
              <h3>慢页面追踪</h3>
              <p>
                抓取加载时间超过设定阈值的页面上的元素信息，及每个元素的TCP建连、首包及剩余包等所需时间详细定位页面上的哪些元素的加载拖慢了页面的响应，为优化用户体验提供依据
              </p>
            </div>
          </div>
        </div>

        <div fxFlex.gt-sm="33.33" fxFlex.gt-xs="50" fxFlex="100">
          <div class="feature-list">
            <div class="card-icon">
              <mat-icon class="card-img">notifications_off</mat-icon>
            </div>
            <div class="card-text">
              <h3>Ajax请求</h3>
              <p>
                获取用户访问过程，页面发出的所有Ajax请求URL、引用页面URL，可以监控某一Ajax请求的响应时间、回调时间、上传数据量、下载数据量以及响应过程中服务器返回的错误
              </p>
            </div>
          </div>
        </div>

        <div fxFlex.gt-sm="33.33" fxFlex.gt-xs="50" fxFlex="100">
          <div class="feature-list">
            <div class="card-icon">
              <mat-icon class="card-img">notifications_paused</mat-icon>
            </div>
            <div class="card-text">
              <h3>用户行为</h3>
              <p>细粒度追踪真实的用户行为操作及流程</p>
            </div>
          </div>
        </div>

        <div fxFlex.gt-sm="33.33" fxFlex.gt-xs="50" fxFlex="100">
          <div class="feature-list">
            <div class="card-icon">
              <mat-icon class="card-img">notifications_paused</mat-icon>
            </div>
            <div class="card-text">
              <h3>预警提醒</h3>
              <p>设置各项阀值，邮件通知，紧急修改维护</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="bg-color-primary section-container space">
    <div
      class="background-holder background-holder--contain"
      style="background-image: url('assets/images/bg-pattern/cta-bg.png');background-repeat: no-repeat;"
    ></div>
    <div class="container position-relative">
      <div fxLayout="row wrap" fxLayoutAlign="start center">
        <div
          fxFlex.gt-sm="50"
          fxFlex="100"
          style="padding-right: 50px;padding-left: 50px;"
        >
          <h3 class="m-b-20">快速复现出错场景</h3>
          <p>
            记录出错前鼠标点击、页面跳转、网络请求，控制台打印等信息，打造应用的黑匣子，带您重返"失事"现场。
          </p>
        </div>
        <div fxFlex.gt-sm="50" fxFlex="100"><div class="snapshot"></div></div>
      </div>
    </div>
  </section>

  <section class="section-container space">
    <div class="container position-relative">
      <div fxLayout="row wrap" fxLayoutAlign="start center">
        <div fxFlex.gt-sm="50" fxFlex="100"><div class="snapshot"></div></div>
        <div
          fxFlex.gt-sm="50"
          fxFlex="100"
          style="padding-right: 50px;padding-left: 50px;"
        >
          <h3 class="m-b-20">一键还原出错代码</h3>
          <p>
            通过 Source Map
            还原生产环境中的压缩代码，提供完整的堆栈信息，准确定位到出错源码，帮助您快速修复Bug。
          </p>
        </div>
      </div>
    </div>
  </section>

  <section class="bg-color-primary section-container space">
    <div
      class="background-holder background-holder--contain"
      style="background-image: url('assets/images/bg-pattern/cta-bg.png');background-repeat: no-repeat;"
    ></div>
    <div class="container position-relative">
      <div fxLayout="row wrap" fxLayoutAlign="start center">
        <div
          fxFlex.gt-sm="50"
          fxFlex="100"
          style="padding-right: 50px;padding-left: 50px;"
        >
          <h3 class="m-b-20">从用户终端到网络 , 直至服务端 , 定位性能瓶颈</h3>
          <p>
            打通前端到后端的全链路 , 通过慢交互 、 慢加载 、 调用链等 ,
            快速查明故障域。
          </p>
        </div>
        <div fxFlex.gt-sm="50" fxFlex="100"><div class="snapshot"></div></div>
      </div>
    </div>
  </section>

  <section class="section-container space">
    <div class="container position-relative text-center">
      <div class="features-intro">
        <h2>这些成功的企业正在使用</h2>
        <p>
          目前全球有数十万开发者选择了, 其中企业级用户超过了 60000
          家,全面覆盖了运营商、金融、政府、交通、能源、电商、O2O、旅游、教育等多个领域。
        </p>
      </div>
      <div fxLayout="row wrap" fxLayoutAlign="start center">
        <div
          fxFlex.gt-sm="25"
          fxFlex="100"
          style="padding-right: 50px;padding-left: 50px;"
        >
          <div fxFlex.gt-sm="50" fxFlex="100">
            <div class="snapshot" style="width:200px; height:50px"></div>
          </div>
        </div>
        <div
          fxFlex.gt-sm="25"
          fxFlex="100"
          style="padding-right: 50px;padding-left: 50px;"
        >
          <div fxFlex.gt-sm="50" fxFlex="100">
            <div class="snapshot" style="width:200px; height:50px"></div>
          </div>
        </div>
        <div
          fxFlex.gt-sm="25"
          fxFlex="100"
          style="padding-right: 50px;padding-left: 50px;"
        >
          <div fxFlex.gt-sm="50" fxFlex="100">
            <div class="snapshot" style="width:200px; height:50px"></div>
          </div>
        </div>
        <div
          fxFlex.gt-sm="25"
          fxFlex="100"
          style="padding-right: 50px;padding-left: 50px;"
        >
          <div fxFlex.gt-sm="50" fxFlex="100">
            <div class="snapshot" style="width:200px; height:50px"></div>
          </div>
        </div>

        <div
          fxFlex.gt-sm="25"
          fxFlex="100"
          style="padding-right: 50px;padding-left: 50px;"
        >
          <div fxFlex.gt-sm="50" fxFlex="100">
            <div class="snapshot" style="width:200px; height:50px"></div>
          </div>
        </div>

        <div
          fxFlex.gt-sm="25"
          fxFlex="100"
          style="padding-right: 50px;padding-left: 50px;"
        >
          <div fxFlex.gt-sm="50" fxFlex="100">
            <div class="snapshot" style="width:200px; height:50px"></div>
          </div>
        </div>
        <div
          fxFlex.gt-sm="25"
          fxFlex="100"
          style="padding-right: 50px;padding-left: 50px;"
        >
          <div fxFlex.gt-sm="50" fxFlex="100">
            <div class="snapshot" style="width:200px; height:50px"></div>
          </div>
        </div>
        <div
          fxFlex.gt-sm="25"
          fxFlex="100"
          style="padding-right: 50px;padding-left: 50px;"
        >
          <div fxFlex.gt-sm="50" fxFlex="100">
            <div class="snapshot" style="width:200px; height:50px"></div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="bg-color-primary section-container space">
    <div class="container">
      <div fxLayout="row wrap" fxLayoutAlign="start center">
        <div fxFlex.gt-sm="25" fxFlex.gt-xs="33.33" fxFlex="100">
          <div class="pricing mat-elevation-z4 text-center">
            <div class="pricing-header">
              <h4>社区版</h4>
              <h2>0<sub>元</sub></h2>
            </div>
            <div class="pricing-center">
              <div class="pricing-content-item">页面级的性能上报</div>
              <div class="pricing-content-item">页面AJAX性能上报</div>
              <div class="pricing-content-item">页面所有加载资源性能上报</div>
              <div class="pricing-content-item">页面所有错误信息上报</div>
              <div class="pricing-content-item">使用source-map还原代码</div>
            </div>

            <div class="pricing-footer">
              <button
                type="button"
                mat-button
                color="primary"
                class="stbui-button-outline stbui-button-block"
              >
                查看
              </button>
            </div>
          </div>
        </div>

        <div fxFlex.gt-sm="25" fxFlex.gt-xs="33.33" fxFlex="100">
          <div class="pricing mat-elevation-z4 text-center">
            <div class="pricing-header pricing-active">
              <h4>团队版</h4>
              <h2>1<sub>元</sub></h2>
            </div>
            <div class="pricing-center">
              <div class="pricing-content-item">单机部署服务稳定保障</div>
              <div class="pricing-content-item">
                高并发场景下的服务稳定和上报
              </div>
              <div class="pricing-content-item">集群部署下的稳定性和合理性</div>
              <div class="pricing-content-item">用户每次访问的行为轨迹</div>
              <div class="pricing-content-item">全国省份流量热力图</div>
            </div>

            <div class="pricing-footer">
              <button
                type="button"
                mat-button
                color="primary"
                class="stbui-button-outline stbui-button-block"
              >
                查看
              </button>
            </div>
          </div>
        </div>

        <div fxFlex.gt-sm="25" fxFlex.gt-xs="33.33" fxFlex="100">
          <div class="pricing mat-elevation-z4 text-center">
            <div class="pricing-header">
              <h4>企业版</h4>
              <h2>10<sub>元</sub></h2>
            </div>
            <div class="pricing-center">
              <div class="pricing-content-item">千万级别数据量查询优化方案</div>
              <div class="pricing-content-item">实时查询的高可用方案</div>
              <div class="pricing-content-item">
                消息队列的优化和合理使用方案
              </div>
              <div class="pricing-content-item">高可用集群方案</div>
              <div class="pricing-content-item">定位性能瓶颈</div>
            </div>

            <div class="pricing-footer">
              <button
                type="button"
                mat-button
                color="primary"
                class="stbui-button-outline stbui-button-block"
              >
                查看
              </button>
            </div>
          </div>
        </div>

        <div fxFlex.gt-sm="25" fxFlex.gt-xs="33.33" fxFlex="100">
          <div class="pricing mat-elevation-z4 text-center">
            <div class="pricing-header">
              <h4>开发版</h4>
              <h2>20<sub>元</sub></h2>
            </div>
            <div class="pricing-center">
              <div class="pricing-content-item">功能一</div>
              <div class="pricing-content-item">功能二</div>
              <div class="pricing-content-item">功能三</div>
              <div class="pricing-content-item">功能四</div>
              <div class="pricing-content-item">功能五</div>
            </div>

            <div class="pricing-footer">
              <button
                type="button"
                mat-button
                color="primary"
                class="stbui-button-outline stbui-button-block"
              >
                查看
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="section-container space">
    <div class="container">
      <mat-card>
        <mat-card-title>联系方式</mat-card-title>
        <mat-card-content>
          <form #formContact="ngForm">
            <mat-form-field class="display-block">
              <input
                matInput
                placeholder="您的名字"
                name="name"
                ngModel
                required
                minlength="4"
                maxlength="10"
              />
            </mat-form-field>
            <mat-form-field class="display-block">
              <input
                matInput
                placeholder="您的邮箱"
                name="email"
                ngModel
                required
              />
            </mat-form-field>
            <mat-form-field class="display-block">
              <input
                matInput
                placeholder="您的电话"
                name="phone"
                ngModel
                required
              />
            </mat-form-field>
            <mat-form-field class="display-block">
              <textarea
                matInput
                placeholder="留言"
                rows="3"
                name="message"
                ngModel
                required
              ></textarea>
            </mat-form-field>
            <mat-checkbox class="form-check">我同意</mat-checkbox>
            <button
              mat-raised-button
              color="primary"
              type="submit"
              [disabled]="!formContact.valid"
            >
              提交
            </button>
          </form>
        </mat-card-content>
      </mat-card>
    </div>
  </section>

  <footer class="footer">
    <div class="container">
      <div fxLayout="row" class="footer-copyright">
        <span>Copyright 2017-2019. All Rights Reserved by stbui Pro</span>
        <span fxFlex></span>
        <span
          >Design & Developed by
          <a href="https://github.com/stbui" target="blank">stbui</a></span
        >
      </div>
    </div>
  </footer>
</div>

.bg-color-primary {
  background: linear-gradient(-134deg, #c86dd7 0%, #3023ae 100%);
}

.position-relative {
  position: relative !important;
}

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  max-width: 1140px;
}
.text-center {
  text-align: center;
}

.navbar {
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding-top: 0;
  padding-bottom: 0;
  z-index: 998;
  transition: 0.3s;
  background: transparent;
}

.navbar-brand {
  display: inline-block;
  line-height: inherit;
  white-space: nowrap;

  font-size: 28px;
  color: #fff;
  text-decoration: none;
}

.navbar-nav {
  display: flex;
  list-style: none;
}

.nav-link {
  text-decoration: none;
  text-align: center;
  color: #fff;
  padding: 10px 20px;

  &:hover {
    color: #f8e7ff;
  }
}

.navbar > .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.section-container {
  position: relative;
  z-index: 1;
}
.hero {
  padding-top: 200px;
  padding-bottom: 200px;
  height: 550px;
}

.footer {
  padding: 30px 0 30px;
  background: #925ecc;
  color: #d2d5da;

  a {
    color: #d2d5da;
    cursor: pointer;
  }
}

.form-check {
  display: block;
  margin: 16px 0 32px;
}

.display-block {
  display: block;
}

.hero__shape {
  position: absolute !important;
  top: auto;
  right: 0;
  bottom: -3px;
  left: 0;
  z-index: -1;
}

.hero-content {
  flex-direction: column;
  box-sizing: border-box;
  display: flex;
  max-width: 100%;
  place-content: center;
  align-items: center;
  color: #fff;
}

.background-holder {
  position: absolute !important;
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.background-holder--left-top {
  background-position: left top;
}
.background-holder--auto {
  background-size: auto;
}

mat-card {
  margin: 0 10px;
}

.features {
  padding: 100px 0;

  &-intro {
    margin-bottom: 50px;

    h2 {
      font-size: 28px;
      font-weight: 600;
      color: #3a3a47;
      line-height: 1.3;
      margin-bottom: 10px;
    }

    p {
      font-size: 16px;
      font-weight: 500;
      line-height: 1.6;
      letter-spacing: 0.01em;
      color: #818198;
      max-width: 630px;
      margin: 0 auto;
      margin-top: 15px;
      margin-bottom: 15px;
    }
  }
}

.feature {
  &-list {
    margin: 30px 10px;
  }
}

.card-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin: 0 auto;
  background: #c86dd7;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-img {
  width: 34px;
  height: 34px;
  font-size: 34px;
  color: #fff;
}
.card-text h3 {
  font-size: 21px;
  font-weight: 500;
  color: #364655;
  margin-bottom: 15px;
}

.space {
  padding: {
    top: 128px;
    bottom: 128px;
  }
}

.bg-color-primary {
  h3 {
    color: #fff;
  }
  p {
    color: #d2d5da;
  }
}

.snapshot {
  width: 565px;
  height: 300px;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.button-free {
  color: #c86dd7;
  padding: {
    left: 32px;
    right: 32px;
  }
}

.pricing {
  mat-card-content div {
    line-height: 42px;
  }
}
.pricing-title {
  font-weight: 600;
  color: #c86dd7;
  margin-bottom: 30px;
  text-align: center;
  font-size: 32px;
}

.pricing-subtitle {
  font-family: 'Montserrat';
  font-size: 22px;
  font-weight: 600;
  color: #364655;
  opacity: 0.7;
  margin: 20px 0;
  text-align: center;
}
.pricing {
  background-color: #fff;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  margin: 0 5px;
  margin-bottom: 20px;

  &-header {
    background: rgba(200, 109, 215, 0.12) none repeat scroll 0 0;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 35px;
    padding: 20px;
    color: #232323;

    h4 {
      margin: 0;
      padding: 0;
      font-weight: 600;
      text-transform: uppercase;

      margin-bottom: 15px;
    }

    h2 {
      margin: 0;
      padding: 0;
      font-size: 50px;
      font-weight: 900;
      letter-spacing: -1px;
      line-height: 1;

      sub {
        position: relative;
        line-height: 0;
        vertical-align: baseline;
        font-size: 18px;
        font-weight: 400;
      }
    }
  }

  &-content {
    &-item {
      line-height: 40px;
      padding: 0 20px;
    }
  }

  &-footer {
    padding: 20px;
  }

  &-active {
    background-color: #c86dd7;
    color: #fff;
  }
}