122 lines
4.5 KiB
HTML
122 lines
4.5 KiB
HTML
{% extends "base.html" %}
|
||
|
||
{% block content %}
|
||
<section class="hero">
|
||
<div class="hero-bg" aria-hidden="true">
|
||
<div class="hero-mesh"></div>
|
||
<div class="hero-scan"></div>
|
||
<div class="hero-glyph">
|
||
<span></span><span></span><span></span>
|
||
</div>
|
||
</div>
|
||
<div class="hero-copy">
|
||
<p class="brand-mark">{{ app_name }}</p>
|
||
<h1>Код приходит сразу после оплаты</h1>
|
||
<p class="hero-lead">Ключи, софт и карты пополнения с автоматической выдачей.</p>
|
||
<div class="hero-actions">
|
||
<a class="btn btn-primary" href="#catalog">Открыть каталог</a>
|
||
<a class="btn btn-ghost" href="/lookup">Найти заказ</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="categories" aria-label="Категории">
|
||
<div class="section-head">
|
||
<h2>Категории</h2>
|
||
<p>Выберите тип цифрового товара</p>
|
||
</div>
|
||
<ul class="category-list">
|
||
{% for category in categories %}
|
||
<li class="reveal">
|
||
<a class="category-link" href="#catalog">
|
||
<span class="category-index">0{{ loop.index }}</span>
|
||
<span class="category-name">{{ category.name }}</span>
|
||
<span class="category-desc">{{ category.description }}</span>
|
||
</a>
|
||
</li>
|
||
{% endfor %}
|
||
</ul>
|
||
</section>
|
||
|
||
<section class="catalog" id="catalog">
|
||
<div class="section-head">
|
||
<h2>Каталог</h2>
|
||
<p>Позиции с мгновенной выдачей цифрового кода</p>
|
||
</div>
|
||
|
||
{% if featured %}
|
||
<div class="featured-rail" aria-label="Избранное">
|
||
{% for product in featured %}
|
||
<article class="product product-featured tone-{{ product.image_gradient }} reveal">
|
||
<a class="product-media" href="/product/{{ product.slug }}">
|
||
<span class="product-mark">{{ product.title[:1] }}</span>
|
||
</a>
|
||
<div class="product-body">
|
||
<p class="product-tag">{{ product.delivery_note }}</p>
|
||
<h3><a href="/product/{{ product.slug }}">{{ product.title }}</a></h3>
|
||
<p>{{ product.short_description }}</p>
|
||
<div class="product-meta">
|
||
<span class="price">{{ product.price | rub }}</span>
|
||
<form method="post" action="/cart/add/{{ product.id }}">
|
||
<button type="submit" class="btn btn-small" {% if stock_map.get(product.id, 0) < 1 %}disabled{% endif %}>
|
||
{% if stock_map.get(product.id, 0) < 1 %}Нет в наличии{% else %}В корзину{% endif %}
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
{% endfor %}
|
||
</div>
|
||
{% endif %}
|
||
|
||
<div class="product-grid">
|
||
{% for product in products %}
|
||
<article class="product tone-{{ product.image_gradient }} reveal">
|
||
<a class="product-media" href="/product/{{ product.slug }}">
|
||
<span class="product-mark">{{ product.title[:1] }}</span>
|
||
</a>
|
||
<div class="product-body">
|
||
<p class="product-tag">{{ product.delivery_note }}</p>
|
||
<h3><a href="/product/{{ product.slug }}">{{ product.title }}</a></h3>
|
||
<p>{{ product.short_description }}</p>
|
||
<div class="product-meta">
|
||
<span class="price">{{ product.price | rub }}</span>
|
||
<form method="post" action="/cart/add/{{ product.id }}">
|
||
<button type="submit" class="btn btn-small" {% if stock_map.get(product.id, 0) < 1 %}disabled{% endif %}>
|
||
{% if stock_map.get(product.id, 0) < 1 %}Нет в наличии{% else %}В корзину{% endif %}
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
{% else %}
|
||
<p class="empty">Товары скоро появятся.</p>
|
||
{% endfor %}
|
||
</div>
|
||
</section>
|
||
|
||
<section class="how" id="how">
|
||
<div class="section-head">
|
||
<h2>Как купить</h2>
|
||
<p>Три шага до цифрового кода</p>
|
||
</div>
|
||
<ol class="steps">
|
||
<li class="reveal">
|
||
<span class="step-num">01</span>
|
||
<h3>Выберите товар</h3>
|
||
<p>Добавьте ключ, подписку или карту в корзину.</p>
|
||
</li>
|
||
<li class="reveal">
|
||
<span class="step-num">02</span>
|
||
<h3>Оформите заказ</h3>
|
||
<p>Укажите email — к нему привязывается выдача.</p>
|
||
</li>
|
||
<li class="reveal">
|
||
<span class="step-num">03</span>
|
||
<h3>Получите сразу</h3>
|
||
<p>Коды открываются на странице заказа мгновенно.</p>
|
||
</li>
|
||
</ol>
|
||
</section>
|
||
{% endblock %}
|