website-htmx-rustelo-code/crates/pages_htmx/templates/pages/contact.j2

<div class="ds-bg-page py-ds-6">
  <section class="ds-container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

    {# ── Header ── #}
    <div class="text-center mb-ds-8">
      <h1 class="ds-heading-1 ds-text mb-ds-4">{{ texts["contact-page-title"] }}</h1>
      <p class="mt-ds-6 ds-body ds-text-secondary max-w-2xl mx-auto">{{ texts["contact-page-subtitle"] | safe }}</p>
      {% set contact_img = "ontoref-contactar" if lang == "es" else "ontoref-contact-en" %}
      <picture>
        <source srcset="/images/{{ contact_img }}.avif" type="image/avif">
        <source srcset="/images/{{ contact_img }}.webp" type="image/webp">
        <img src="/images/{{ contact_img }}.webp"
             alt="{{ texts['contact-page-title'] }}"
             width="1536" height="1024" loading="lazy"
             class="mt-ds-8 mx-auto rounded-lg ds-shadow-sm w-full max-w-3xl h-auto" />
      </picture>
    </div>

    {# ── Main grid: sidebar (1) + form (2) ── #}
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-ds-6">

      {# ── Contact info sidebar ── #}
      <div class="lg:col-span-1">
        <div class="ds-bg ds-rounded-lg ds-shadow-sm p-ds-6">
          <h2 class="ds-heading-2 ds-text mb-ds-6">{{ texts["contact-lets-connect"] }}</h2>

          <div class="space-y-6">
            {# Email #}
            <div class="flex items-start">
              <div class="flex-shrink-0">
                <div class="w-10 h-10 ds-bg-secondary ds-rounded-lg flex items-center justify-center">
                  <span class="text-lg">📧</span>
                </div>
              </div>
              <div class="ml-4">
                <h3 class="ds-heading-4 ds-text">{{ texts["contact-email-contact"] }}</h3>
                <p class="ds-text-secondary">hello@jesusperez.pro</p>
                <p class="ds-caption ds-text-muted">{{ texts["contact-best-for-detailed"] }}</p>
              </div>
            </div>

            {# Telegram #}
            <div class="flex items-start">
              <div class="flex-shrink-0">
                <div class="w-10 h-10 ds-bg-secondary ds-rounded-lg flex items-center justify-center">
                  <span class="text-lg">💬</span>
                </div>
              </div>
              <div class="ml-4">
                <h3 class="ds-heading-4 ds-text">{{ texts["contact-telegram-contact"] }}</h3>
                <p class="ds-text-secondary">@jesusperez_dev</p>
                <p class="ds-caption ds-text-muted">{{ texts["contact-quick-questions"] }}</p>
              </div>
            </div>

            {# Schedule a call #}
            <div class="flex items-start">
              <div class="flex-shrink-0">
                <div class="w-10 h-10 ds-bg-secondary ds-rounded-lg flex items-center justify-center">
                  <span class="text-lg">📞</span>
                </div>
              </div>
              <div class="ml-4">
                <h3 class="ds-heading-4 ds-text">{{ texts["contact-schedule-call"] }}</h3>
                <p class="ds-text-secondary">{{ texts["contact-consultation-30min"] }}</p>
                <a href="https://calendly.com/jesusperez-dev" target="_blank" rel="noopener noreferrer"
                   class="ds-caption ds-text font-medium hover:ds-text-secondary">
                  {{ texts["contact-book-time-slot"] }}
                </a>
              </div>
            </div>
          </div>

          {# Professional networks #}
          <div class="mt-ds-6 pt-ds-6 border-t ds-border">
            <h3 class="ds-heading-4 ds-text mb-ds-4">{{ texts["contact-professional-networks"] }}</h3>
            <div class="space-y-2">
              <a href="https://www.linkedin.com/in/jesusperezlorenzo/" target="_blank" rel="noopener noreferrer"
                 class="no-underline block ds-text-secondary hover:ds-text ds-caption">
                {{ texts["contact-linkedin-profile"] }}
              </a>
              <a href="https://repo.jesusperez.pro/jesus/ontoref" target="_blank" rel="noopener noreferrer"
                 class="no-underline block ds-text-secondary hover:ds-text ds-caption">
                {{ texts["contact-git-profile"] }}
              </a>
              <a href="{{ texts['contact-blog-url'] | default(value='/blog') }}"
                 class="no-underline block ds-text-secondary hover:ds-text ds-caption">
                {{ texts["contact-read-my-blog"] }}
              </a>
            </div>
          </div>
        </div>
      </div>

      {# ── Contact form (2 cols) ── #}
      <div class="lg:col-span-2">
        <div class="ds-bg ds-rounded-lg ds-shadow-sm p-ds-6">
          <div class="form-header mb-ds-6">
            <h2 class="ds-heading-2 ds-text mb-2">{{ texts["contact-send-message"] }}</h2>
            <p class="ds-text-secondary">{{ texts["contact-contact-form-description"] }}</p>
          </div>

          <form class="space-y-ds-4"
                hx-post="/api/contact"
                hx-target="#contact-form-result"
                hx-swap="innerHTML">

            {# Name + Email row #}
            <div class="grid grid-cols-1 md:grid-cols-2 gap-ds-4">
              <div>
                <label for="contact-form-name" class="ds-text font-medium block mb-2">
                  {{ texts["contact-name-label"] }}
                </label>
                <input id="contact-form-name" name="name" type="text" required
                       class="ds-input w-full p-3 ds-border ds-rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                       placeholder="{{ texts['contact-name-placeholder'] }}" />
              </div>
              <div>
                <label for="contact-form-email" class="ds-text font-medium block mb-2">
                  {{ texts["contact-email-label"] }}
                </label>
                <input id="contact-form-email" name="email" type="email" required
                       class="ds-input w-full p-3 ds-border ds-rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                       placeholder="{{ texts['contact-email-placeholder'] }}" />
              </div>
            </div>

            {# Subject #}
            <div>
              <label for="contact-form-subject" class="ds-text font-medium block mb-2">
                {{ texts["contact-subject-label"] }}
              </label>
              <input id="contact-form-subject" name="subject" type="text" required
                     class="ds-input w-full p-3 ds-border ds-rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                     placeholder="{{ texts['contact-subject-placeholder'] }}" />
            </div>

            {# Message #}
            <div>
              <label for="contact-form-message" class="ds-text font-medium block mb-2">
                {{ texts["contact-message-label"] }}
              </label>
              <textarea id="contact-form-message" name="message" rows="6" required
                        class="ds-textarea w-full p-3 ds-border ds-rounded focus:outline-none focus:ring-2 focus:ring-blue-500 resize-vertical"
                        placeholder="{{ texts['contact-message-placeholder'] }}"></textarea>
            </div>

            <div class="flex justify-end">
              <button type="submit"
                      class="ds-btn-primary px-8 py-3 font-medium ds-rounded transition-colors duration-200">
                {{ texts["contact-send-message-btn"] }}
              </button>
            </div>

            <div id="contact-form-result"></div>
          </form>
        </div>

        {# Response time box #}
        <div class="mt-ds-6 p-ds-4 ds-bg-secondary ds-rounded-lg">
          <h3 class="font-semibold ds-text mb-2">{{ texts["contact-response-time"] }}</h3>
          <p class="ds-caption ds-text-secondary">{{ texts["contact-response-time-text"] }}</p>
        </div>
      </div>
    </div>

    {# ── FAQ section ── #}
    <div class="mt-ds-8">
      <div class="ds-bg ds-rounded-lg ds-shadow-sm p-ds-6">
        <h2 class="ds-heading-2 ds-text mb-ds-6 text-center">{{ texts["contact-frequently-asked-questions"] }}</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-ds-6">
          <div>
            <h3 class="ds-heading-4 ds-text mb-2">{{ texts["contact-faq-what-projects"] }}</h3>
            <p class="ds-text-secondary">{{ texts["contact-faq-what-projects-answer"] }}</p>
          </div>
          <div>
            <h3 class="ds-heading-4 ds-text mb-2">{{ texts["contact-faq-remote-teams"] }}</h3>
            <p class="ds-text-secondary">{{ texts["contact-faq-remote-teams-answer"] }}</p>
          </div>
          <div>
            <h3 class="ds-heading-4 ds-text mb-2">{{ texts["contact-faq-pricing-approach"] }}</h3>
            <p class="ds-text-secondary">{{ texts["contact-faq-pricing-answer"] }}</p>
          </div>
          <div>
            <h3 class="ds-heading-4 ds-text mb-2">{{ texts["contact-faq-existing-projects"] }}</h3>
            <p class="ds-text-secondary">{{ texts["contact-faq-existing-projects-answer"] }}</p>
          </div>
        </div>
      </div>
    </div>

    {# ── Other ways to connect ── #}
    <div class="mt-ds-8">
      <div class="text-center">
        <h2 class="ds-heading-2 ds-text mb-ds-6">{{ texts["contact-other-ways-connect"] }}</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-ds-6">

          <div class="ds-bg-secondary ds-rounded-lg p-ds-6">
            <div class="ds-text-secondary mb-ds-4">
              <span class="text-4xl">🚀</span>
            </div>
            <h3 class="ds-heading-4 ds-text mb-2">{{ texts["contact-project-consultation"] }}</h3>
            <p class="ds-text-secondary mb-ds-4">{{ texts["contact-consultation-help"] }}</p>
            <a href="{{ texts['contact-services-url'] | default(value='/services') }}#tier2"
               class="no-underline ds-btn-primary">
              {{ texts["contact-request-quote"] }}
            </a>
          </div>

          <div class="ds-bg-secondary ds-rounded-lg p-ds-6">
            <div class="ds-text-secondary mb-ds-4">
              <span class="text-4xl">🧑‍🏫</span>
            </div>
            <h3 class="ds-heading-4 ds-text mb-2">{{ texts["contact-mentoring-training"] }}</h3>
            <p class="ds-text-secondary mb-ds-4">{{ texts["contact-mentoring-help"] }}</p>
            <a href="{{ texts['contact-services-url'] | default(value='/services') }}#learn"
               class="ds-btn-primary">
              {{ texts["contact-learn-more"] }}
            </a>
          </div>

          <div class="ds-bg-secondary ds-rounded-lg p-ds-6">
            <div class="ds-text-secondary mb-ds-4">
              <span class="text-4xl">🎤</span>
            </div>
            <h3 class="ds-heading-4 ds-text mb-2">{{ texts["contact-speaking-events"] }}</h3>
            <p class="ds-text-secondary mb-ds-4">{{ texts["contact-speaking-help"] }}</p>
            <a href="mailto:hello@jesusperez.pro?subject=Speaking Opportunity"
               class="ds-btn-primary">
              {{ texts["contact-get-in-touch"] }}
            </a>
          </div>

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

  </section>
</div>

{% include "partials/image-zoom.j2" %}