index.html

<style>
.ys-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: #17151f;
}

.ys-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #dbeafe 0%, #f1e8ff 58%, #fff7d6 100%);
  border: 1.5px solid #2f2a7c;
  border-radius: 18px;
  padding: 28px 32px;
  margin-bottom: 22px;
}

.ys-hero::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -90px;
  top: -90px;
  border-radius: 999px;
  background: rgba(88, 80, 236, 0.14);
}

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

.ys-badge-main {
  background: #2f2a7c;
  color: #f4f1ff;
}

.ys-badge-blue {
  background: #123c69;
  color: #e8f3ff;
}

.ys-badge-purple {
  background: #5a2a83;
  color: #f7ebff;
}

.ys-badge-gold {
  background: #5f4200;
  color: #fff4cf;
}

.ys-badge-dark {
  background: #25212d;
  color: #f3f0f8;
}

.ys-title {
  position: relative;
  z-index: 1;
  margin: 0 0 8px 0;
  color: #21185f;
  font-size: 30px;
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.ys-subtitle {
  position: relative;
  z-index: 1;
  margin: 0 0 16px 0;
  color: #413a6d;
  font-size: 15px;
  line-height: 1.55;
  max-width: 820px;
}

.ys-tags {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.ys-tag {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid rgba(47, 42, 124, 0.18);
  color: #21185f;
  font-size: 12px;
  font-weight: 700;
}

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

.ys-card {
  border-radius: 16px;
  padding: 22px 26px;
  border: 1.5px solid;
}

.ys-card h2,
.ys-card h3 {
  margin: 0 0 10px 0;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 750;
}

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

.ys-card ul {
  margin: 10px 0 0 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.55;
}

.ys-tatar {
  background: #eaf4ff;
  border-color: #123c69;
}

.ys-tatar h2,
.ys-tatar h3 {
  color: #123c69;
}

.ys-english {
  background: #f6ecff;
  border-color: #5a2a83;
}

.ys-english h2,
.ys-english h3 {
  color: #5a2a83;
}

.ys-projects {
  background: #fff2c9;
  border-color: #5f4200;
}

.ys-projects h2,
.ys-projects h3 {
  color: #5f4200;
}

.ys-community {
  background: #ecffe9;
  border-color: #245b1a;
}

.ys-community h2,
.ys-community h3 {
  color: #245b1a;
}

.ys-divider {
  border: 0;
  border-top: 1px solid currentColor;
  opacity: .18;
  margin: 16px 0 12px 0;
}

.ys-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.ys-link,
.ys-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none !important;
}

.ys-link {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(0, 0, 0, 0.12);
  color: inherit !important;
}

.ys-resources {
  background: #24212d;
  color: #f5f2fb;
  border: 1.5px solid #3f394d;
  border-radius: 16px;
  padding: 24px 30px;
}

.ys-resources h2 {
  margin: 0 0 10px 0;
  color: #ffffff;
  font-size: 18px;
  font-weight: 750;
}

.ys-resources p {
  margin: 0;
  color: #d9d3e6;
  font-size: 13px;
  line-height: 1.55;
}

.ys-resource-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.ys-resource {
  border-radius: 14px;
  padding: 16px;
  background: #302b3b;
  border: 1px solid #484154;
}

.ys-resource h3 {
  margin: 0 0 6px 0;
  color: #ffffff;
  font-size: 14px;
}

.ys-resource p {
  margin: 0 0 12px 0;
  font-size: 12px;
  color: #cfc8dc;
}

.ys-pill {
  background: #ffffff;
  color: #25212d !important;
  border: 1px solid #ffffff;
}

.ys-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.ys-footer-links a {
  color: #f5f2fb !important;
  background: #3b3548;
  border: 1px solid #585064;
}

@media (max-width: 760px) {
  .ys-root {
    padding: 18px 8px;
  }

  .ys-hero {
    padding: 24px 22px;
  }

  .ys-title {
    font-size: 25px;
  }

  .ys-grid,
  .ys-resource-grid {
    grid-template-columns: 1fr;
  }
}
</style>

<div class="ys-root">
  <section class="ys-hero">
    <div class="ys-badge ys-badge-main">Yasalma · formerly neurotatarlar</div>

    <h1 class="ys-title">AI for Tatar and Turkic languages</h1>

    <p class="ys-subtitle">
      Yasalma is a non-profit community building language and speech technologies for Tatar
      and other Turkic languages. Our work focuses on Natural Language Processing, speech
      technologies, LLMs, Text-To-Speech, and Machine Translation.
    </p>

    <div class="ys-tags">
      <span class="ys-tag">Tatar language</span>
      <span class="ys-tag">Turkic languages</span>
      <span class="ys-tag">NLP</span>
      <span class="ys-tag">Speech technologies</span>
      <span class="ys-tag">LLMs</span>
      <span class="ys-tag">Text-To-Speech</span>
      <span class="ys-tag">Machine Translation</span>
    </div>
  </section>

  <section class="ys-grid">
    <div class="ys-card ys-tatar">
      <div class="ys-badge ys-badge-blue">Татарча</div>

      <h2>Ясалма фәһем аша телне үстерү</h2>

      <p>
        Yasalma проектының Hugging Face'тагы рәсми битенә хуш килдегез.
        Безнең максат — табигый телне эшкәртү һәм сөйләм технологияләре ярдәмендә
        татар һәм башка төрки телләр өчен заманча ЯФ коралларын булдыру.
      </p>

      <hr class="ys-divider">

      <p>
        Без телне саклау, үстерү һәм заманча технологияләрдә куллану өчен
        ачык датасетлар, модельләр һәм практик инструментлар өстендә эшлибез.
      </p>
    </div>

    <div class="ys-card ys-english">
      <div class="ys-badge ys-badge-purple">English</div>

      <h2>Advancing language technology</h2>

      <p>
        Welcome to the official Hugging Face page of Yasalma, formerly neurotatarlar.
        Our mission is to advance the Tatar language and other Turkic languages through
        cutting-edge AI technologies.
      </p>

      <hr class="ys-divider">

      <p>
        We focus on practical open resources for Natural Language Processing and Speech
        Technologies: datasets, models, benchmarks, and tools that help bring Turkic
        languages into modern AI systems.
      </p>
    </div>
  </section>

  <section class="ys-grid">
    <div class="ys-card ys-projects">
      <div class="ys-badge ys-badge-gold">Our projects</div>

      <h2>Models and datasets</h2>

      <p>
        We are building and improving open resources for Tatar language AI, with a focus on:
      </p>

      <ul>
        <li>Grammar error correction models</li>
        <li>Conversational language models</li>
        <li>Automatic speech recognition resources</li>
        <li>Text-To-Speech and speech datasets</li>
        <li>Machine translation and language corpora</li>
      </ul>

      <div class="ys-links">
        <a class="ys-link" href="https://huggingface.co/yasalma/models">Explore models</a>
        <a class="ys-link" href="https://huggingface.co/yasalma/datasets">Explore datasets</a>
        <a class="ys-link" href="https://huggingface.co/collections/yasalma/tatar-speech-datasets">Tatar Speech Datasets</a>
      </div>
    </div>

    <div class="ys-card ys-community">
      <div class="ys-badge ys-badge-dark">How to help</div>

      <h2>Contribute to Tatar language technology</h2>

      <p>
        We welcome contributors interested in supporting Tatar language technology.
        You can help by creating and improving ML models, translating tasks,
        collecting and cleaning data, testing tools, or supporting the project financially.
      </p>

      <hr class="ys-divider">

      <p>
        No programming experience is required. If you speak Tatar or another Turkic
        language, your language knowledge is valuable for data collection, evaluation,
        translation, and community feedback.
      </p>

      <div class="ys-links">
        <a class="ys-link" href="https://t.me/neurotatarlar">Telegram</a>
        <a class="ys-link" href="https://github.com/neurotatarlar">GitHub</a>
        <a class="ys-link" href="https://boosty.to/yasalma">Donate</a>
      </div>
    </div>
  </section>

  <section class="ys-resources">
    <div class="ys-badge ys-badge-dark">Hugging Face resources</div>

    <h2>Open resources for the community</h2>

    <p>
      Browse Yasalma's public Hugging Face work: models, datasets, Spaces, and curated
      collections for Tatar speech and language technology.
    </p>

    <div class="ys-resource-grid">
      <div class="ys-resource">
        <h3>Models</h3>
        <p>
          ASR, TTS, language modeling, and other experimental AI models for Tatar language tasks.
        </p>
        <a class="ys-pill" href="https://huggingface.co/yasalma/models">View models</a>
      </div>

      <div class="ys-resource">
        <h3>Datasets</h3>
        <p>
          Corpora, speech datasets, OCR benchmarks, translation data, and other language resources.
        </p>
        <a class="ys-pill" href="https://huggingface.co/yasalma/datasets">View datasets</a>
      </div>

      <div class="ys-resource">
        <h3>Spaces</h3>
        <p>
          Interactive demos, annotation tools, experiments, and community-facing applications.
        </p>
        <a class="ys-pill" href="https://huggingface.co/yasalma/spaces">View Spaces</a>
      </div>
    </div>

    <div class="ys-footer-links">
      <a class="ys-link" href="https://huggingface.co/yasalma">Organization profile</a>
      <a class="ys-link" href="https://huggingface.co/collections/yasalma/tatar-speech-datasets">Tatar Speech Datasets collection</a>
      <a class="ys-link" href="https://t.me/neurotatarlar">Join on Telegram</a>
      <a class="ys-link" href="https://boosty.to/yasalma">Support on Boosty</a>
    </div>
  </section>
</div>