{% extends "main.html" %} 
{% block content %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/home.css' | url }}" />

<div class="md-container">
  <section class="home-container">
    <div class="background"></div>
    <div class="animated-gradient">
      <img src="assets/background.jpg" style="display: none;"/>
    </div>
    <div class="md-grid md-typeset">
      <div class="mdx-hero">
        <div>
          <h1>云原生日志Agent/Aggregator</h1>
          <h2>采集、中转、解析、报警</h2>
          <h2>Logging Operator，轻量、高性能</h2>
          <p style="display: flex">
            <a href="{{ 'getting-started/overview/' | url }}" class="md-button md-button--primary newbutton">
              快速上手
              <svg fill="#fff" width="24" height="24" viewBox="0 0 24 24"><path d="M6,13V11H14L10.5,7.5L11.92,6.08L17.84,12L11.92,17.92L10.5,16.5L14,13H6M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12Z" /></svg>
            </a>
            <a href="{{ 'user-guide/' | url }}" class="md-button newbutton"> 
              使用指南
              <svg fill="#fff" width="24" height="24" viewBox="0 0 24 24"><path d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" /></svg>
            </a>
          </p>
        </div>
      </div>
    </div>
  </section>

  <section class="features-container">
    <h2>优势与特性</h2>
    <ul class="md-grid">
      <li>
        <img src="assets/feat-hotplugin.png" />
        <p class="title">可扩展、热插拔</p>
        <p class="subtitle">配置不同的Source/Interceptor/Sink，获得中转、过滤、解析、切分等能力，可快速自研插件</p>
      </li>
      <li>
        <img src="assets/feat-isolation.png" />
        <p class="title">强隔离</p>
        <p class="subtitle">多Pipeline设计，减少互相干扰，支持同时发送多个不同数据源</p>
      </li>
      <li>
        <img src="assets/feat-fast.png" />
        <p class="title">轻量级、高性能</p>
        <p class="subtitle">基于Golang，极少的资源占用，强大的吞吐性能，满足各类场景需求</p>
      </li>
      <li>
        <img src="assets/feat-reliability.png" />
        <p class="title">可靠性保障</p>
        <p class="subtitle">完善的日志可观测性，原生Prometheus metrics支持，还有限流、背压等Interceptor</p>
      </li>
      <li>
        <img src="assets/feat-cloudnative.png" />
        <p class="title">云原生</p>
        <p class="subtitle">配置中心集成Kubernetes，创建CRD实例即可采集容器或节点日志</p>
      </li>
      <li>
        <img src="assets/feat-observability.png" />
        <p class="title">不仅仅是日志</p>
        <p class="subtitle">数据流基于Source/Interceptor/Sink模型，可采集各种可观测性事件，扩展更多的可能性</p>
      </li>
    </ul>
  </section>

  <section class="information-container">
    <div class="md-grid">
      <div class="info">
        <svg fill="#fff" width="50" height="50" viewBox="0 0 24 24"><path d="M9.5,4C5.36,4 2,6.69 2,10C2,11.89 3.08,13.56 4.78,14.66L4,17L6.5,15.5C7.39,15.81 8.37,16 9.41,16C9.15,15.37 9,14.7 9,14C9,10.69 12.13,8 16,8C16.19,8 16.38,8 16.56,8.03C15.54,5.69 12.78,4 9.5,4M6.5,6.5A1,1 0 0,1 7.5,7.5A1,1 0 0,1 6.5,8.5A1,1 0 0,1 5.5,7.5A1,1 0 0,1 6.5,6.5M11.5,6.5A1,1 0 0,1 12.5,7.5A1,1 0 0,1 11.5,8.5A1,1 0 0,1 10.5,7.5A1,1 0 0,1 11.5,6.5M16,9C12.69,9 10,11.24 10,14C10,16.76 12.69,19 16,19C16.67,19 17.31,18.92 17.91,18.75L20,20L19.38,18.13C20.95,17.22 22,15.71 22,14C22,11.24 19.31,9 16,9M14,11.5A1,1 0 0,1 15,12.5A1,1 0 0,1 14,13.5A1,1 0 0,1 13,12.5A1,1 0 0,1 14,11.5M18,11.5A1,1 0 0,1 19,12.5A1,1 0 0,1 18,13.5A1,1 0 0,1 17,12.5A1,1 0 0,1 18,11.5Z" /></svg>
        <h3><a href="{{ 'getting-started/overview/#_3' | url }}">社区交流</a></h3>
        <p>在使用Loggie的时候遇到问题？ 请提issues或者联系我们。</p>
        <p>任何的讨论和交流，欢迎加入Loggie讨论群</p>
      </div> 
      <div class="info">
        <svg fill="#fff" width="50" height="50" viewBox="0 0 24 24"><path d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" /></svg>
        <h3><a href="{{ 'developer-guide/contributing/' | url }}">欢迎贡献</a></h3>
        <p>Loggie还在快速的成长，充满了各种可能性</p>
        <p>欢迎提PR为Loggie添砖加瓦</p>
      </div>
      <div class="info">
        <svg fill="#fff" width="50" height="50" viewBox="0 0 24 24"><path d="M15 3H5C3.89 3 3 3.89 3 5V10.82C3.6 10.24 4.28 9.8 5 9.5V5H12V10.82C12.03 10.85 12.07 10.87 12.1 10.9C12.44 11.24 12.73 11.61 12.97 12H19V19H12.97C12.73 19.39 12.44 19.76 12.1 20.1C11.74 20.45 11.35 20.74 10.94 21H19C20.11 21 21 20.11 21 19V9L15 3M14 10V4.5L19.5 10H14M7.5 11C5 11 3 13 3 15.5C3 16.38 3.25 17.21 3.69 17.9L.61 21L2 22.39L5.12 19.32C5.81 19.75 6.63 20 7.5 20C10 20 12 18 12 15.5S10 11 7.5 11M7.5 18C6.12 18 5 16.88 5 15.5S6.12 13 7.5 13 10 14.12 10 15.5 8.88 18 7.5 18Z" /></svg>
        <h3><a href="{{ 'reference/' | url }}">组件配置</a></h3>
        <p>Loggie的运行依赖你自定义各个组件的配置，如何填写？</p>
        <p>请参考系统和Pipeline配置</p>
      </div>
    </div>
  </section>

</div>
{% endblock %}