{% extends "base.html" %}

{% block title %}Worktrunk — Git Worktree Manager for AI Agent Workflows{% endblock title %}

{% block hero %}
<style>
  .welcome {
    animation: welcome-animation 1s cubic-bezier(0.25, 0.1, 0.25, 1) both;
    animation-delay: 0.25s;
  }

  .hero-image {
    animation: logo-animation 2s cubic-bezier(0.25, 0.1, 0.25, 1) both;
  }

  @keyframes logo-animation {
    0% {
      transform: rotateY(-40deg) rotateZ(90deg) translateX(-50%);
      filter: blur(50px);
      opacity: 0;
    }
    50% {
      filter: blur(0);
    }
    70% {
      opacity: 1;
      transform: rotateY(-10deg) rotateZ(10deg) translateX(5%);
    }
    100% {
      transform: rotateY(0) rotateZ(0) translateX(0);
    }
  }

  @keyframes welcome-animation {
    0% {
      transform: translateY(60%);
      filter: blur(10px);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      filter: blur(0);
      opacity: 1;
    }
  }

  .hero section {
    padding: 0 5rem;
  }
  @media screen and (max-width: 768px) {
    .hero section {
      padding: 0 2rem;
    }

    .hero-image {
      display: none;
    }
  }
</style>
<section class="text-center welcome">
  <h1 class="heading-text" style="font-size: 50px"><a href="#worktrunk" class="heading-anchor">Worktrunk</a></h1>
  <h3 class="title-text">
    Git worktree management for <b style="white-space: nowrap">parallel AI agent workflows</b>
  </h3>
  <div style="display: flex; gap: 1rem; justify-content: center; align-items: center; margin-top: 1.5rem;">
    <button class="button" onclick="window.scrollTo({top: document.querySelector('main').offsetTop - document.querySelector('header').offsetHeight, behavior: 'smooth'})">Learn More</button>
    <a href="https://github.com/max-sixty/worktrunk" aria-label="GitHub stars">
      <img src="https://img.shields.io/github/stars/max-sixty/worktrunk?style=social" alt="GitHub stars">
    </a>
  </div>
</section>
<script>
  document.addEventListener('keydown', function(e) {
    if (e.key === 'Enter' && !e.target.matches('input, textarea, [contenteditable]')) {
      document.querySelector('.hero .button').click();
    }
  }, {once: true});
</script>
<img class="hero-image" src="{{ get_url(path='logo.png') }}" srcset="{{ get_url(path='logo.png') }} 1x, {{ get_url(path='logo@2x.png') }} 2x" alt="Worktrunk logo" decoding="sync" fetchpriority="high">
{% endblock hero %}

{% block toc %}
{% set docs_section = get_section(path="_index.md") %}
{{ macros::toc_nav(docs_section=docs_section) }}
{% endblock toc %}

{% block content_id %}worktrunk{% endblock content_id %}

{% block content %}
{# Display worktrunk content directly on homepage #}
{% set docs_section = get_section(path="_index.md") %}
{% set worktrunk = docs_section.pages | filter(attribute="slug", value="worktrunk") | first %}
<h1 class="heading-text"><a href="#worktrunk" class="heading-anchor">{{ worktrunk.title }}</a></h1>
{{ worktrunk.content | safe }}
{% endblock content %}