{jv:include file='header.html' /}

<section class="page-hero-dark">
  <div class="container page-hero-inner">
    <div>
      <span class="page-hero-badge">ABOUT US</span>
      <h1 class="page-hero-title">{jv:typename}</h1>
      <p class="page-hero-sub">{jv:description}</p>
    </div>
    <div class="page-hero-stats">
      <div class="ph-stat"><b>2016</b><span>{jv:lang name='stat_service' /}</span></div>
      <div class="ph-stat"><b>17</b><span>{jv:lang name='stat_lang_support' /}</span></div>
      <div class="ph-stat"><b>200+</b><span>{jv:lang name='stat_countries' /}</span></div>
      <div class="ph-stat"><b>500+</b><span>{jv:lang name='stat_modules' /}</span></div>
    </div>
  </div>
</section>

<nav class="crumb crumb-dark" aria-label="{jv:lang name='main_nav' /}">
  <div class="container">
    <a href="{jv:url}">{jv:lang name='home' /}</a><span class="sep">/</span><span class="cur">{jv:typename}</span>
  </div>
</nav>

<div class="container" style="padding: 40px 0 64px;">

  <div class="biz-section">
    <div class="biz-section-head">
      <div>
        <div class="biz-section-title">{jv:lang name='about_section_overview' /}</div>
      </div>
    </div>
    <div class="biz-card">
      <p style="color:var(--text-2);line-height:1.95;margin-bottom:16px;font-size:15px">{jv:lang name='about_overview_p1' /}</p>
      <p style="color:var(--text-2);line-height:1.95;margin-bottom:16px;font-size:15px">{jv:lang name='about_overview_p2' /}</p>
      <p style="color:var(--text-2);line-height:1.95;font-size:15px">{jv:lang name='about_overview_p3' /}</p>
    </div>
  </div>

  <div class="biz-section">
    <div class="biz-section-head">
      <div>
        <div class="biz-section-title">{jv:lang name='about_section_history' /}</div>
      </div>
    </div>
    <div class="biz-card">
      <div class="timeline">
        <div class="timeline-item">
          <div class="timeline-year">2016</div>
          <div class="timeline-title">{jv:lang name='about_milestone_2016_title' /}</div>
          <div class="timeline-desc">{jv:lang name='about_milestone_2016_desc' /}</div>
        </div>
        <div class="timeline-item">
          <div class="timeline-year">2018</div>
          <div class="timeline-title">{jv:lang name='about_milestone_2018_title' /}</div>
          <div class="timeline-desc">{jv:lang name='about_milestone_2018_desc' /}</div>
        </div>
        <div class="timeline-item">
          <div class="timeline-year">2020</div>
          <div class="timeline-title">{jv:lang name='about_milestone_2020_title' /}</div>
          <div class="timeline-desc">{jv:lang name='about_milestone_2020_desc' /}</div>
        </div>
        <div class="timeline-item">
          <div class="timeline-year">2022</div>
          <div class="timeline-title">{jv:lang name='about_milestone_2022_title' /}</div>
          <div class="timeline-desc">{jv:lang name='about_milestone_2022_desc' /}</div>
        </div>
        <div class="timeline-item">
          <div class="timeline-year">2024</div>
          <div class="timeline-title">{jv:lang name='about_milestone_2024_title' /}</div>
          <div class="timeline-desc">{jv:lang name='about_milestone_2024_desc' /}</div>
        </div>
        <div class="timeline-item">
          <div class="timeline-year">2026</div>
          <div class="timeline-title">{jv:lang name='about_milestone_2026_title' /}</div>
          <div class="timeline-desc">{jv:lang name='about_milestone_2026_desc' /}</div>
        </div>
      </div>
    </div>
  </div>

  <div class="biz-section">
    <div class="biz-section-head">
      <div>
        <div class="biz-section-title">{jv:lang name='about_section_business' /}</div>
      </div>
    </div>
    <div class="biz-grid">
      <div class="biz-card">
        <div class="biz-icon-lg" style="background:linear-gradient(135deg,#3b82f6,#1d4ed8)"><svg class="ico" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg></div>
        <h3>{jv:lang name='about_biz_content_title' /}</h3>
        <p>{jv:lang name='about_biz_content_desc' /}</p>
      </div>
      <div class="biz-card">
        <div class="biz-icon-lg" style="background:linear-gradient(135deg,#f59e0b,#d97706)"><svg class="ico" viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg></div>
        <h3>{jv:lang name='about_biz_download_title' /}</h3>
        <p>{jv:lang name='about_biz_download_desc' /}</p>
      </div>
      <div class="biz-card">
        <div class="biz-icon-lg" style="background:linear-gradient(135deg,#ef4444,#dc2626)"><svg class="ico" viewBox="0 0 24 24"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg></div>
        <h3>{jv:lang name='about_biz_mall_title' /}</h3>
        <p>{jv:lang name='about_biz_mall_desc' /}</p>
      </div>
      <div class="biz-card">
        <div class="biz-icon-lg" style="background:linear-gradient(135deg,#8b5cf6,#7c3aed)"><svg class="ico" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></div>
        <h3>{jv:lang name='about_biz_qa_title' /}</h3>
        <p>{jv:lang name='about_biz_qa_desc' /}</p>
      </div>
      <div class="biz-card">
        <div class="biz-icon-lg" style="background:linear-gradient(135deg,#06b6d4,#0891b2)"><svg class="ico" viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></div>
        <h3>{jv:lang name='about_biz_forum_title' /}</h3>
        <p>{jv:lang name='about_biz_forum_desc' /}</p>
      </div>
      <div class="biz-card">
        <div class="biz-icon-lg" style="background:linear-gradient(135deg,#6366f1,#4f46e5)"><svg class="ico" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><line x1="9" y1="1" x2="9" y2="4"/><line x1="15" y1="1" x2="15" y2="4"/><line x1="9" y1="20" x2="9" y2="23"/><line x1="15" y1="20" x2="15" y2="23"/><line x1="20" y1="9" x2="23" y2="9"/><line x1="20" y1="14" x2="23" y2="14"/><line x1="1" y1="9" x2="4" y2="9"/><line x1="1" y1="14" x2="4" y2="14"/></svg></div>
        <h3>{jv:lang name='about_biz_ai_title' /}</h3>
        <p>{jv:lang name='about_biz_ai_desc' /}</p>
      </div>
    </div>
  </div>

  <div class="biz-section">
    <div class="biz-section-head">
      <div>
        <div class="biz-section-title">{jv:lang name='about_section_qualifications' /}</div>
      </div>
    </div>
    <div class="qual-grid">
      <div class="qual-card">
        <div class="qual-icon"><svg class="ico" viewBox="0 0 24 24"><circle cx="12" cy="8" r="6"/><path d="M15.477 12.89 17 22l-5-3-5 3 1.523-9.11"/></svg></div>
        <h4>{jv:lang name='about_qual_hightech' /}</h4>
      </div>
      <div class="qual-card">
        <div class="qual-icon"><svg class="ico" viewBox="0 0 24 24"><path d="M12 2 4 5v6c0 5 3.5 9.5 8 11 4.5-1.5 8-6 8-11V5l-8-3z"/><path d="m9 12 2 2 4-4"/></svg></div>
        <h4>{jv:lang name='about_qual_zhongguancun' /}</h4>
      </div>
      <div class="qual-card">
        <div class="qual-icon"><svg class="ico" viewBox="0 0 24 24"><path d="M12 2 4 5v6c0 5 3.5 9.5 8 11 4.5-1.5 8-6 8-11V5l-8-3z"/><path d="m9 12 2 2 4-4"/></svg></div>
        <h4>{jv:lang name='about_qual_special' /}</h4>
      </div>
      <div class="qual-card">
        <div class="qual-icon"><svg class="ico" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><path d="m9 15 2 2 4-4"/></svg></div>
        <h4>{jv:lang name='about_qual_iso' /}</h4>
      </div>
    </div>
  </div>

</div>
{jv:include file='footer.html' /}