index.html

<style>
  .ae-root {
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    max-width: 1040px;
    margin: 0 auto;
    padding: 24px 12px;
    color: #161718;
  }

  .ae-mission {
    background: #d9e7ff;
    border: 1.5px solid #01113b;
    border-radius: 14px;
    padding: 22px 30px;
    margin-bottom: 22px;
  }

  .ae-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 4px 13px;
    margin-bottom: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .ae-badge-blue {
    background: #01113b;
    color: #d9e7ff;
  }

  .ae-title {
    margin: 0 0 10px 0;
    color: #01113b;
    font-size: 16px;
    font-weight: 600;
  }

  .ae-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
  }

  .ae-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin-bottom: 22px;
  }

  .ae-card {
    border-radius: 14px;
    padding: 22px 26px;
    border: 1.5px solid;
  }

  .ae-open {
    background: #e7ffde;
    border-color: #243907;
  }

  .ae-prop {
    background: #ffb99d;
    border-color: #b83400;
  }

  .ae-badge-open {
    background: #243907;
    color: #e7ffde;
  }

  .ae-badge-prop {
    background: #b83400;
    color: #ffb99d;
  }

  .ae-card h3 {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
  }

  .ae-open h3 {
    color: #243907;
  }

  .ae-prop h3 {
    color: #b83400;
  }

  .ae-card p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
  }

  .ae-divider {
    border: 0;
    border-top: 1px solid currentColor;
    opacity: .18;
    margin: 14px 0 10px 0;
  }

  .ae-links {
    font-size: 12px;
  }

  .ae-links a {
    color: inherit;
    text-decoration: underline;
  }

  .ae-releases {
    background: #242424;
    color: #e1e1e1;
    border: 1.5px solid #3d3d3d;
    border-radius: 14px;
    padding: 22px 30px;
  }

  .ae-badge-release {
    background: #e1e1e1;
    color: #242424;
  }

  .ae-release-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
  }

  .ae-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #e1e1e1;
    margin-top: 8px;
    flex: 0 0 auto;
  }

  .ae-release-item h3 {
    margin: 0 0 6px 0;
    font-size: 16px;
    color: #e1e1e1;
  }

  .ae-release-item p {
    margin: 0 0 12px 0;
    font-size: 13px;
    line-height: 1.5;
    color: #cfcfcf;
  }

  .ae-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    margin-right: 8px;
    margin-bottom: 8px;
    border-radius: 999px;
    background: #3d3d3d;
    border: 1px solid #555555;
    color: #f2f2f2 !important;
    text-decoration: none !important;
    font-size: 12px;
  }

  @media (max-width: 720px) {
    .ae-grid {
      grid-template-columns: 1fr;
    }

    .ae-root {
      padding: 18px 8px;
    }
  }
</style>

<div class="ae-root">
  <section class="ae-mission">
    <div class="ae-badge ae-badge-blue">🎯 Our mission</div>
    <h2 class="ae-title">Building efficient AI models</h2>
    <p class="ae-text">
      At AlphaEdge, we aim to offer AI models that can run on any type of hardware in a flexible way,
      via API or Edge, on GPU as well as CPU. Our goal is to deliver high performance on complex tasks
      while significantly reducing latency, memory consumption, and inference costs. We expose this
      vision through two channels: our open models and our proprietary models.
    </p>
  </section>

  <section class="ae-grid">
    <div class="ae-card ae-open">
      <div class="ae-badge ae-badge-open">🔓 Open source</div>
      <h3>Open Models</h3>
      <p>
        The open source models available on this Hugging Face organization are based on existing ones,
        published under permissive licenses, for which we propose improvements. The goal here is to
        showcase our expertise, particularly in state-of-the-art compression techniques, applied to
        model classes well known to the community.
      </p>
      <hr class="ae-divider">
      <div class="ae-links">
        <a href="https://huggingface.co/alphaedge-ai/models">Available models</a>
        ·
        <a href="https://huggingface.co/alphaedge-ai/datasets">Available datasets</a>
      </div>
    </div>

    <div class="ae-card ae-prop">
      <div class="ae-badge ae-badge-prop">🔒 Proprietary</div>
      <h3>Commercial Models</h3>
      <p>
        Our proprietary models are built on a new architecture that we call ELM
        (Efficient Language Models). They offer optimized performance for professional use cases
        requiring full sovereignty and real-time usage. Resource-efficient, they are available
        through our API or can be deployed on-premises on your hardware at your company.
      </p>
      <hr class="ae-divider">
      <div class="ae-links">
        <a href="https://api-docs.alphaedge-ai.com/">Our API</a>
      ·
        <a href="https://alphaedge-ai.com/">Our website</a>
      </div>
    </div>
  </section>

  <section class="ae-releases">
    <div class="ae-badge ae-badge-release">🗃️ Our main open-source releases</div>

    <div class="ae-release-item">
      <div class="ae-dot"></div>
      <div>
        <h3>Trimming</h3>
        <p>
          A key technique for effectively reducing the size of language models while preserving their
          performance, making them easier to deploy. We invite you to read the blog post written on
          the subject to learn about all the benefits of this method, and to explore the Space to
          browse the more than 7,000 models based on the trimming that we propose.
        </p>
        <a class="ae-pill" href="https://huggingface.co/blog/lbourdois/introduction-to-trimming">📖 Blog post</a>
        <a class="ae-pill" href="https://huggingface.co/spaces/alphaedge-ai/Trimming_models_search">🤗 HF Space</a>
      </div>
    </div>
  </section>
</div>