{% extends "main.html" %}

{% block tabs %}
  {{ super() }}
  <section class="ts-hero" aria-label="tabsight">
    <div class="md-grid ts-hero__inner">
      <div class="ts-hero__copy">
        <p class="ts-hero__eyebrow">
          <img src="{{ 'assets/logo.svg' | url }}" alt="" width="28" height="28">
          tabsight
        </p>
        <h1 class="ts-hero__title">A DataFrame in.<br>A dashboard you can trust out.</h1>
        <p class="ts-hero__lede">
          tabsight reads your data the way a careful analyst would, explains every guess
          it makes, and keeps the numbers exact. No server, no LLM, no network.
        </p>
        <div class="ts-hero__actions">
          <a class="ts-hero__button ts-hero__button--primary" href="{{ 'getting-started/quickstart/' | url }}">Read the quickstart</a>
          <a class="ts-hero__button ts-hero__button--ghost" href="{{ 'guide/profiling/' | url }}">See how it reads data</a>
          <a class="ts-hero__button ts-hero__button--sponsor" href="https://github.com/sponsors/yesh069" rel="noopener">
            <svg class="ts-hero__heart" viewBox="0 0 16 16" width="15" height="15" aria-hidden="true"><path d="M8 14.25s-5.75-3.4-5.75-7.6A3.15 3.15 0 0 1 8 4.7a3.15 3.15 0 0 1 5.75 1.95c0 4.2-5.75 7.6-5.75 7.6Z"/></svg>
            Sponsor
          </a>
        </div>
      </div>
    </div>
  </section>
{% endblock %}

{% block content %}
  <div class="ts-home">{{ super() }}</div>
{% endblock %}