<div class="container mx-auto max-w-2xl py-12">
  <div class="card bg-base-100 shadow-xl mb-8">
    <div class="card-body prose max-w-none">
      <h2 class="card-title text-3xl">{gettext("Under heavy construction")}</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      </p>
      <p>
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
      </p>
      <div class="bg-base-200 p-6 rounded-lg mb-8">
        <h4 class="text-lg font-semibold mb-3">{gettext("Built with Modern Technologies")}</h4>
        <div class="flex flex-wrap gap-2">
          <span class="badge badge-primary">Elixir</span>
          <span class="badge badge-success">Phoenix</span>
          <span class="badge badge-secondary">LiveView</span>
          <span class="badge badge-warning">PostgreSQL</span>
          <span class="badge badge-error">Tailwind CSS</span>
        </div>
      </div>
      <h3 class="text-2xl font-semibold mb-4">{gettext("Join Our Community")}</h3>
      <p>
        Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.
      </p>
      <div class="text-center mt-12">
        <a href="/" class="btn btn-primary btn-lg">
          <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-1.447-.894L15 4m0 13V4m-6 3l6-3"
            />
          </svg>
          {gettext("Explore the Map")}
        </a>
      </div>
    </div>
  </div>
  <div class="text-center text-base-content/60">
    <p class="text-sm">
      &copy; 2025 aprs.me. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </p>
  </div>
</div>
