{% extends "_base.html" %}{% load static %}

{% block BODY %}{# ЭТО СПЛЕШ-СКРИН! ТУТ НЕ НИКАКОЙ НАВИГАЦИИ, МЕНЮ, ШАПКИ/ПОДВАЛА И Т.П. #}
<!-- HERO -->
<section class="relative w-full h-screen flex items-center justify-center overflow-hidden">
  
  <!-- Фон из двух картинок -->
  <div class="absolute inset-0 blur-[1px]">
    <div class="absolute top-0 left-0 w-full h-1/2 bg-[url({% static 'svgs/lp.svg' %})] bg-bottom-right bg-no-repeat border-purple-950 border-b-1 border-dotted"></div>
    <div class="absolute bottom-0 right-0 w-full h-1/2 bg-[url({% static 'svgs/cc.svg' %})] bg-bottom-right bg-no-repeat  border-orange-950 border-b-1 border-dotted rotate-180"></div>
  </div>
  
  <!-- Содержимое поверх фона -->
  <div class="relative z-10 text-center max-w-2xl mx-auto px-6 bg-[#c0c0c0e0] dark:bg-[#303030e0] shadow-lg shadow-gray-300 dark:shadow-gray-900 px-40 py-20 rounded-4xl border-gray-300 dark:border-gray-700 border-2">
    <picture>
      <source srcset="{% static 'svgs/logo-lpon-d.svg' %}" media="(prefers-color-scheme: dark)" class="h-32 mx-auto mb-8">
      <img src="{% static 'svgs/logo-lpon-l.svg' %}" alt="Логотип lpon.ru" class="h-32 mx-auto mb-8">
    </picture>

    <h1 class="text-6xl font-bold mb-4 drop-shadow-lg font-serif">ДЕМО-РЕЖИМ</h1>
    <p class="text-2xl mb-8 drop-shadow font-serif">Виниловые пластинки и&nbsp;не&nbsp;только…</p>
    <a href="/catalog"  class="px-8 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-semibold drop-shadow-lg">
      Посмотреть демо-каталог
    </a>
  </div>

  <div class="absolute bottom-4 right-4 text-s text-gray-600 dark:text-gray-400 font-serif">
    &copy; 2026, Sergei Erjemin
  </div>
</section>


{% endblock %}