<!DOCTYPE html>

<html lang="ru">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>UNITED BERRIES | Haifa Division</title>

    <!-- Подключаем Tailwind (шрифты и стили) -->

    <script src="https://cdn.tailwindcss.com"></script>

    <!-- Подключаем всплывающее окно оплат Gumroad -->

    <script src="https://gumroad.com/js/gumroad.js"></script>

    <style>

        /* Строгий швейцарский шрифт (по умолчанию системный без засечек) */

        body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }

    </style>

</head>

<body class="bg-zinc-100 text-black min-h-screen p-4 md:p-12 flex flex-col justify-between">

    <!-- Шапка / Логотип -->

    <header class="border-b-2 border-black pb-4 mb-12 flex justify-between items-end">

        <div>

            <h1 class="text-4xl md:text-6xl font-bold tracking-tighter uppercase">United Berries</h1>

            <p class="text-xs md:text-sm uppercase tracking-widest mt-1">Haifa Division / Memento Mori</p>

        </div>

        <div class="text-right text-xs uppercase hidden md:block">

            <p>ID: UB-WEB-01</p>

            <p>Status: Operational</p>

        </div>

    </header>

    <!-- Сетка товаров -->

    <main class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

        <!-- Карточка товара 1 -->

        <article class="border-2 border-black bg-white p-6 flex flex-col justify-between h-80">

            <div>

                <p class="text-[10px] uppercase tracking-widest text-gray-500 mb-2">SKU: PC-DOV-01</p>

                <h2 class="text-2xl font-bold uppercase leading-none mb-4">Календарь-визитка<br>«Бродский»</h2>

                <p class="text-sm">Вертикальная швейцарская сетка 2027. Черный матовый картон. Фазы луны и напоминание о конечности бытия.</p>

            </div>

            <!-- Ссылка на ваш товар в Gumroad -->

            <a class="gumroad-button block w-full border-2 border-black text-center py-3 font-bold uppercase hover:bg-black hover:text-white transition-colors" 

               href="https://ВАШ_АККАУНТ.gumroad.com/l/ССЫЛКА_НА_ТОВАР">

               Купить / ₪20

            </a>

        </article>

        <!-- Карточка товара 2 -->

        <article class="border-2 border-black bg-white p-6 flex flex-col justify-between h-80">

            <div>

                <p class="text-[10px] uppercase tracking-widest text-gray-500 mb-2">SKU: UB-CLK-01</p>

                <h2 class="text-2xl font-bold uppercase leading-none mb-4">Настенные часы<br>«Абсурд»</h2>

                <p class="text-sm">Открытый циферблат. Сбившиеся в кучу цифры. Громко и методично отмеряют оставшееся время.</p>

            </div>

            <!-- Ссылка на ваш товар в Gumroad -->

            <a class="gumroad-button block w-full border-2 border-black text-center py-3 font-bold uppercase hover:bg-black hover:text-white transition-colors" 

               href="https://ВАШ_АККАУНТ.gumroad.com/l/ССЫЛКА_НА_ТОВАР">

               Купить / ₪85

            </a>

        </article>

    </main>

    <!-- Подвал -->

    <footer class="border-t-2 border-black mt-12 pt-4 text-xs uppercase flex justify-between">

        <p>© 2026-2027 United Berries</p>

        <p>A project by Babel Books</p>

    </footer>

</body>

</html>