<div class="ds-bg-page">

  <section class="relative py-ds-4 ds-container ds-rounded-lg ds-shadow-lg">
    <div class="mx-auto max-w-4xl text-center">
      <div class="mb-8">
        <h1 class="text-balance text-4xl font-bold tracking-tight ds-text sm:text-6xl">
          {{ texts["home-hero-title"] }}
        </h1>
        <div class="flex items-center justify-center gap-8 mb-6">
          <img src="/images/logos/site-logo-b.png" alt="Site logo" class="lg:h-20 h-15" />
          <img src="/images/JesusPerez_f.jpg" alt="Site owner" class="lg:w-40 rounded-full w-32 object-cover border-2 ds-border" />
        </div>
        <div class="mt-ds-6 ds-body ds-text-secondary max-w-2xl mx-auto">
          {{ texts["home-hero-subtitle"] | safe }}
        </div>
      </div>
      <div class="flex flex-col sm:flex-row gap-4 justify-center mt-8">
        <a href="{{ texts['home-services-url'] | default('/services') }}" class="no-underline ds-btn-primary">
          {{ texts["home-view-services"] }}
        </a>
        <a href="{{ texts['home-contact-url'] | default('/contact') }}" class="no-underline ds-btn-secondary">
          {{ texts["home-get-in-touch"] }}
        </a>
      </div>
    </div>
  </section>

  <section class="pt-ds-3 py-ds-6 ds-bg ds-rounded-lg">
    <div class="ds-container-lg ds-container">
      <div class="text-center mt-ds-3">
        <h2 class="text-3xl font-bold ds-text">{{ texts["home-core-expertise"] }}</h2>
        <p class="mt-4 ds-text-secondary">{{ texts["home-core-expertise-subtitle"] }}</p>
      </div>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <div class="text-center p-ds-6">
          <div class="w-16 h-16 mx-auto mb-ds-4 ds-bg ds-rounded-lg flex items-center justify-center">
            <span class="text-2xl">🦀</span>
          </div>
          <h3 class="ds-heading-4 ds-text mb-2">{{ texts["home-rust-development"] }}</h3>
          <ul class="list-none list-inside ds-text-secondary">
            <li>{{ texts["home-web-applications"] }}</li>
            <li>{{ texts["home-high-performance-systems"] }}</li>
            <li>{{ texts["home-tooling-rust-safety"] }}</li>
          </ul>
        </div>
        <div class="text-center p-ds-6">
          <div class="w-16 h-16 mx-auto mb-ds-4 ds-bg ds-rounded-lg flex items-center justify-center">
            <span class="text-2xl">🏗️</span>
          </div>
          <h3 class="ds-heading-4 ds-text mb-2">{{ texts["home-self-hosted-infrastructure"] }}</h3>
          <ul class="list-none list-inside ds-text-secondary">
            <li>{{ texts["home-cicd-pipelines"] }}</li>
            <li>{{ texts["home-kubernetes-deployments"] }}</li>
            <li>{{ texts["home-resilient-architectures"] }}</li>
          </ul>
        </div>
        <div class="text-center p-ds-6">
          <div class="w-16 h-16 mx-auto mb-ds-4 ds-bg ds-rounded-lg flex items-center justify-center">
            <span class="text-2xl">🌐</span>
          </div>
          <h3 class="ds-heading-4 ds-text mb-2">{{ texts["home-web3-polkadot"] }}</h3>
          <ul class="list-none list-inside ds-text-secondary mb-ds-4">
            <li>{{ texts["home-blockchain-integration"] }}</li>
            <li>{{ texts["home-decentralized-applications"] }}</li>
            <li>{{ texts["home-polkadot-ecosystem-development"] }}</li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <section class="py-ds-6 ds-rounded-lg">
    <div class="ds-container-lg ds-container">
      <div class="text-center mb-ds-12">
        <h2 class="text-3xl font-bold ds-text">{{ texts["home-how-i-can-help"] }}</h2>
      </div>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <div class="ds-bg p-ds-6 ds-rounded-lg ds-shadow-sm">
          <h3 class="ds-heading-4 ds-text mb-3">{{ texts["home-project-participation"] }}</h3>
          <ul class="list-disc list-inside ds-text-secondary mb-ds-4">
            <li>{{ texts["home-requirements-definition"] }}</li>
            <li>{{ texts["home-infrastructure-setup"] }}</li>
            <li>{{ texts["home-cicd-implementation"] }}</li>
            <li>{{ texts["home-research-prototyping"] }}</li>
          </ul>
          <a href="{{ texts['home-services-projects-url'] | default('/services') }}" class="ds-text font-medium hover:ds-text-secondary">
            {{ texts["home-learn-more-arrow"] }}
          </a>
        </div>
        <div class="ds-bg p-ds-6 ds-rounded-lg ds-shadow-sm">
          <h3 class="ds-heading-4 ds-text mb-3">{{ texts["home-mentoring-guidance"] }}</h3>
          <ul class="list-disc list-inside ds-text-secondary mb-ds-4">
            <li>{{ texts["home-one-on-one-collaboration"] }}</li>
            <li>{{ texts["home-pair-programming"] }}</li>
            <li>{{ texts["home-code-review"] }}</li>
            <li>{{ texts["home-technical-guidance-team"] }}</li>
          </ul>
          <a href="{{ texts['home-services-mentoring-url'] | default('/services') }}" class="ds-text font-medium hover:ds-text-secondary">
            {{ texts["home-learn-more-arrow"] }}
          </a>
        </div>
        <div class="ds-bg p-ds-6 ds-rounded-lg ds-shadow-sm">
          <h3 class="ds-heading-4 ds-text mb-3">{{ texts["home-training-workshops"] }}</h3>
          <ul class="list-disc list-inside ds-text-secondary mb-ds-4">
            <li>{{ texts["home-custom-courses"] }}</li>
            <li>{{ texts["home-workshops"] }}</li>
            <li>{{ texts["home-technical-talks-org"] }}</li>
          </ul>
          <a href="{{ texts['home-services-training-url'] | default('/services') }}" class="ds-text font-medium hover:ds-text-secondary">
            {{ texts["home-learn-more-arrow"] }}
          </a>
        </div>
      </div>
    </div>
  </section>

  <section class="py-ds-6 ds-bg ds-rounded-lg">
    <div class="ds-container-lg ds-container">
      <div class="text-center mb-ds-12">
        <h2 class="text-3xl font-bold ds-text">{{ texts["home-latest-relevant-projects"] }}</h2>
        <p class="mt-4 ds-text-secondary">{{ texts["home-open-source-projects-desc"] }}</p>
      </div>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">

        <div class="ds-bg-page p-ds-6 ds-rounded-lg ds-shadow-sm hover:ds-shadow-md transition-shadow">
          <div class="flex flex-col items-center text-center">
            <a href="https://rustelo.dev" target="_blank" rel="noopener noreferrer" class="block mb-ds-4">
              <img src="/images/logos/rustelo_v.svg" alt="Rustelo Logo" class="h-28 w-28 hover:scale-105 transition-transform" />
            </a>
            <h3 class="ds-heading-4 ds-text mb-3">Rustelo</h3>
            <p class="ds-text-secondary mb-ds-4 ds-caption leading-relaxed">{{ texts["home-rustelo-desc"] }}</p>
            <div class="flex gap-3 mt-auto">
              <a href="https://rustelo.dev" target="_blank" rel="noopener noreferrer" class="no-underline inline-flex items-center gap-ds-2 px-3 py-2 ds-caption font-medium ds-text ds-bg border ds-border ds-rounded-md hover:ds-bg-secondary transition-colors">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
                {{ texts["home-visit-site"] }}
              </a>
              <a href="https://github.com/Rustelo-dev" target="_blank" rel="noopener noreferrer" class="no-underline inline-flex items-center gap-ds-2 px-3 py-2 ds-caption font-medium ds-text border ds-border ds-rounded-md hover:ds-bg transition-colors">
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 10 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0 0 20 10.017C20 4.484 15.522 0 10 0z" clip-rule="evenodd"/></svg>
                {{ texts["home-git-repo"] }}
              </a>
            </div>
          </div>
        </div>

        <div class="ds-bg-page p-ds-6 ds-rounded-lg ds-shadow-sm hover:ds-shadow-md transition-shadow">
          <div class="flex flex-col items-center text-center">
            <a href="https://provisioning.systems" target="_blank" rel="noopener noreferrer" class="block mb-ds-4">
              <img src="/images/logos/projects/provisioning_v.svg" alt="Provisioning Systems Logo" class="h-28 w-28 hover:scale-105 transition-transform" />
            </a>
            <h3 class="ds-heading-4 ds-text mb-3">Provisioning Systems</h3>
            <p class="ds-text-secondary mb-ds-4 ds-caption leading-relaxed">{{ texts["home-provisioning-systems-desc"] }}</p>
            <div class="flex gap-3 mt-auto">
              <a href="https://provisioning.systems" target="_blank" rel="noopener noreferrer" class="no-underline inline-flex items-center gap-ds-2 px-3 py-2 ds-caption font-medium ds-text ds-bg border ds-border ds-rounded-md hover:ds-bg-secondary transition-colors">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
                {{ texts["home-visit-site"] }}
              </a>
              <a href="https://rlung.librecloud.online/jesus/provisioning" target="_blank" rel="noopener noreferrer" class="no-underline inline-flex items-center gap-ds-2 px-3 py-2 ds-caption font-medium ds-text border ds-border ds-rounded-md hover:ds-bg transition-colors">
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 10 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0 0 20 10.017C20 4.484 15.522 0 10 0z" clip-rule="evenodd"/></svg>
                {{ texts["home-git-repo"] }}
              </a>
            </div>
          </div>
        </div>

        <div class="ds-bg-page p-ds-6 ds-rounded-lg ds-shadow-sm hover:ds-shadow-md transition-shadow">
          <div class="flex flex-col items-center text-center">
            <a href="https://vapora.dev" target="_blank" rel="noopener noreferrer" class="block mb-ds-4">
              <img src="/images/logos/projects/vapora_v.svg" alt="Vapora Logo" class="h-28 w-28 hover:scale-105 transition-transform" />
            </a>
            <h3 class="ds-heading-4 ds-text mb-3">Vapora</h3>
            <p class="ds-text-secondary mb-ds-4 ds-caption leading-relaxed">{{ texts["home-vapora-desc"] }}</p>
            <div class="flex gap-3 mt-auto">
              <a href="https://vapora.dev" target="_blank" rel="noopener noreferrer" class="no-underline inline-flex items-center gap-ds-2 px-3 py-2 ds-caption font-medium ds-text ds-bg border ds-border ds-rounded-md hover:ds-bg-secondary transition-colors">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
                {{ texts["home-visit-site"] }}
              </a>
              <a href="https://repo.jesusperez.pro/jesus/Vapora" target="_blank" rel="noopener noreferrer" class="no-underline inline-flex items-center gap-ds-2 px-3 py-2 ds-caption font-medium ds-text border ds-border ds-rounded-md hover:ds-bg transition-colors">
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 10 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0 0 20 10.017C20 4.484 15.522 0 10 0z" clip-rule="evenodd"/></svg>
                {{ texts["home-git-repo"] }}
              </a>
            </div>
          </div>
        </div>

      </div>
    </div>
  </section>

  <section class="py-ds-4 ds-bg-page ds-rounded-lg">
    <div class="mx-auto max-w-4xl ds-container text-center">
      <h2 class="text-3xl font-bold ds-text mb-ds-4">{{ texts["home-ready-start-project"] }}</h2>
      <p class="ds-text-secondary mb-8 ds-body">{{ texts["home-ready-start-project-desc"] }}</p>
      <div class="flex flex-col sm:flex-row gap-4 justify-center">
        <a href="{{ texts['home-work-request-url'] | default('/work-request') }}" class="no-underline ds-btn-primary">
          {{ texts["home-request-project-quote"] }}
        </a>
        <a href="{{ texts['home-blog-url'] | default('/blog') }}" class="no-underline ds-btn-secondary">
          {{ texts["home-read-my-blog"] }}
        </a>
      </div>
    </div>
  </section>

</div>
