zero2prod/templates/home.html

{% extends "base.html" %} {% block title %}Home - zero2prod{% endblock %} {%
block content %}
<div class="max-w-4xl mx-auto">
  <div
    class="bg-gradient-to-r from-blue-600 to-indigo-700 rounded-lg shadow-lg text-white p-8 mb-8"
  >
    <div class="max-w-3xl">
      <h1 class="text-4xl font-bold mb-4">zero2prod</h1>
      <p class="text-xl text-blue-100 mb-6">
        Welcome to my newsletter! Stay updated on my latest projects and
        thoughts. Unsubscribe at any time.
      </p>
      <div class="flex flex-col sm:flex-row gap-4">
        <a
          href="#newsletter-signup"
          class="bg-white text-blue-600 hover:bg-gray-100 font-semibold py-3 px-6 rounded-md transition-colors text-center"
        >
          Subscribe
        </a>
        <a
          href="https://gitea.alphonsepaix.xyz/alphonse/zero2prod"
          target="_blank"
          class="border border-white text-white hover:bg-white hover:text-blue-600 font-semibold py-3 px-6 rounded-md transition-colors text-center"
        >
          View code
        </a>
      </div>
    </div>
  </div>

  <!-- Feature Cards -->
  <div class="grid md:grid-cols-3 gap-6 mb-8">
    <div class="bg-white rounded-lg shadow-md p-6 border border-gray-200">
      <div
        class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4"
      >
        <svg
          class="w-6 h-6 text-blue-600"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M13 10V3L4 14h7v7l9-11h-7z"
          />
        </svg>
      </div>
      <h3 class="text-lg font-semibold text-gray-900 mb-2">Idempotent</h3>
      <p class="text-gray-600 text-sm">
        Smart duplicate prevention ensures you'll never receive the same email
        twice.
      </p>
    </div>

    <div class="bg-white rounded-lg shadow-md p-6 border border-gray-200">
      <div
        class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4"
      >
        <svg
          class="w-6 h-6 text-green-600"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
          />
        </svg>
      </div>
      <h3 class="text-lg font-semibold text-gray-900 mb-2">Privacy first</h3>
      <p class="text-gray-600 text-sm">
        Zero spam, zero tracking, zero data sharing. Your email stays private
        and secure. Unsubscribe at any time.
      </p>
    </div>

    <div class="bg-white rounded-lg shadow-md p-6 border border-gray-200">
      <div
        class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4"
      >
        <svg
          class="w-6 h-6 text-purple-600"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
          />
        </svg>
      </div>
      <h3 class="text-lg font-semibold text-gray-900 mb-2">Quality content</h3>
      <p class="text-gray-600 text-sm">
        Curated insights on Rust backend development, performance tips, and
        production war stories.
      </p>
    </div>
  </div>

  <div
    id="newsletter-signup"
    class="bg-white rounded-lg shadow-md p-8 border border-gray-200"
  >
    <div class="max-w-2xl mx-auto text-center">
      <h2 class="text-2xl font-bold text-gray-900 mb-4">Stay updated</h2>
      <p class="text-gray-600 mb-6">
        Subscribe to my newsletter to get the latest updates.
      </p>

      <form
        hx-post="/api/newsletter/subscribe"
        hx-target="#subscription-result"
        hx-swap="innerHTML"
        class="max-w-md mx-auto"
      >
        <div class="flex flex-col sm:flex-row gap-3">
          <input
            type="email"
            name="email"
            placeholder="Enter your email address"
            required
            class="flex-1 px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
          />
          <button
            type="submit"
            class="bg-blue-600 text-white hover:bg-blue-700 font-medium py-3 px-6 rounded-md transition-colors"
          >
            Subscribe
          </button>
        </div>
      </form>

      <div id="subscription-result" class="mt-4"></div>
    </div>
  </div>

  <div class="mt-8 bg-gray-50 rounded-lg p-6">
    <h3 class="text-lg font-semibold text-gray-900 mb-4 text-center">Stats</h3>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
      <div>
        <div class="text-2xl font-bold text-blue-600" id="subscriber-count">
          2
        </div>
        <div class="text-sm text-gray-600">subscribers</div>
      </div>
      <div>
        <div>
          <div class="text-2xl font-bold text-orange-600">23</div>
          <div class="text-sm text-gray-600">emails sent</div>
        </div>
      </div>
      <div>
        <div class="text-2xl font-bold text-orange-600">0</div>
        <div class="text-sm text-gray-600">email opened</div>
      </div>
      <div>
        <div class="text-2xl font-bold text-purple-600">~1ms</div>
        <div class="text-sm text-gray-600">response time</div>
      </div>
    </div>
  </div>

  <!-- <script>
    document.addEventListener("DOMContentLoaded", function () {
      htmx.ajax("GET", "/api/stats/subscribers", {
        target: "#subscriber-count",
      });
    });
  </script> -->
  {% endblock %}
</div>