feat(landing): секции по DESIGN.md

Шрифты Golos Text и Martian Mono через next/font, токены @theme,
все блоки по плану: первый экран со штампом даты ближайшей обжарки,
лента недели, этикетки сортов, подписка, кто мы, доставка, форма,
подвал. Три фото Unsplash локально, priority только у первого экрана.
LeadForm перекрашена под токены, логика и data-атрибуты те же.
В site.ts и form.ts добавлены служебные подписи для вёрстки.
This commit is contained in:
2026-10-17 16:56:52 +03:00
parent 66d69c1245
commit dc70ebccd8
26 changed files with 1364 additions and 65 deletions
+5 -5
View File
@@ -409,8 +409,8 @@ const martian = Martian_Mono({ subsets: ['cyrillic', 'latin'], variable: '--font
- `aria-live="polite"` уже стоит; блок не прыгает: при появлении — только opacity 0→1, 160ms.
### StickyCta (только < 768px)
- Фиксирован снизу, `padding: 8px 20px calc(8px + env(safe-area-inset-bottom))`, bg `cream`, линейка 1px `ink` сверху, без тени. Внутри CtaButton primary на всю ширину, 52px: «Оформить подписку» + справа Martian «54 BYN/мес».
- `interest: 'subscription'`, без comment, `source="sticky"`.
- Фиксирован снизу, `padding: 8px 20px calc(8px + env(safe-area-inset-bottom))`, bg `cream`, линейка 1px `ink` сверху, без тени. Внутри слева подпись `site.stickyCta.note` («Обжарка в четверг, доставка в пятницу», small 500, `muted`, 2 строки максимум), справа CtaButton primary 52px «Заказать кофе» (`site.stickyCta.label`).
- `interest: 'one_time'`, без comment, `source="sticky"`.
- Показывается, когда главная CTA первого экрана ушла из вьюпорта; скрывается, когда в вьюпорте `#lead`, или фокус внутри формы, или открыта клавиатура (`visualViewport.height < innerHeight * 0.75`). Один IntersectionObserver на два якоря. В скрытом состоянии `aria-hidden="true"` и `inert`.
- Подвалу на мобиле — `padding-bottom: 88px`, чтобы бар не закрывал контакты.
@@ -423,9 +423,9 @@ const martian = Martian_Mono({ subsets: ['cyrillic', 'latin'], variable: '--font
### 1. Первый экран `#hero`
- **Факты:** обжарка по четвергам, развоз по пятницам, Минск. Дата ближайшей обжарки — в штампе.
- **390:** шапка 64 → H1 display (≤ 3 строк, ≤ 40 знаков) → lead (≤ 3 строк) → 24px → primary CTA на всю ширину → 12px → текстовая ссылка «Смотреть сорта» (якорь `#coffee`, 44px высота) → 32px → фото зерна во всю ширину экрана (без полей), 390×300, Stamp `lg` наезжает на верхний левый край фото (top −56px, left 20px, rotate −6°). Первый вьюпорт (≈ 750px) вмещает H1, lead, CTA и верх штампа.
- **390:** шапка 64 → H1 display (≤ 3 строк, ≤ 40 знаков) → lead (≤ 3 строк) → 24px → primary CTA на всю ширину → 12px → secondary CTA на всю ширину → 56px → фото зерна во всю ширину экрана (без полей), 390×300, Stamp на бумажной подложке (`backing`, иначе красный на тёмном зерне нечитаем) наезжает на верхний левый край фото (top −56px, left 20px, rotate −6°). Первый вьюпорт (≈ 750px) вмещает H1, lead, CTA и верх штампа.
- **1440:** 12 колонок. Кол. 1–7: H1 96px, lead (≤ 46ch), ряд CTA (primary + ссылка). Кол. 8–12: фото зерна 4:5 (≈ 500×625), выровнено по верху H1, обрезано правым полем контейнера. Stamp `lg` лежит на левом нижнем углу фото, заходя на 64px в кол. 7. Высота секции ≈ 760px.
- **CTA:** primary — CtaButton `interest: 'subscription'` (подпись CTAS.subscription). Ссылка «Смотреть сорта» — обычный `<a href="#coffee">`.
- **CTA (по site.ts):** primary — CtaButton `site.hero.ctaPrimary` (`subscription`), secondary — CtaButton `site.hero.ctaSecondary` (`one_time`, без comment). `site.hero.eyebrow` не выводится: надзаголовки запрещены (см. Don't).
- **Фото:** GDmiFs9lfrQ (Mona Jain, зерно на весь кадр). `next/image`, `priority`, `fetchPriority="high"`, `sizes="(min-width: 1024px) 500px, 100vw"`, `object-fit: cover; object-position: center`. Alt: «Обжаренное кофейное зерно крупным планом».
### 2. Почему свежесть `#fresh`
@@ -451,7 +451,7 @@ const martian = Martian_Mono({ subsets: ['cyrillic', 'latin'], variable: '--font
- **Вид:** одна большая этикетка-абонемент на `kraft`, без ленты. Внутри поля: «СОСТАВ — 2 ПАЧКИ × 250 Г», «КАК ЧАСТО — РАЗ В МЕСЯЦ», «ДОСТАВКА — БЕСПЛАТНО»; справа/снизу PriceTag крупно: «54 BYN / мес» (price ×1.5 = 48px на 1440). SVG: два силуэта пачки (прямоугольник с клапаном, 1.5px ink, без заливки), во второй пачке маленький знак «7 штрихов».
- **390:** H2 → lead → этикетка (поля столбиком, цена внизу) → primary CTA во всю ширину.
- **1440:** H2 + lead в кол. 1–5; этикетка в кол. 6–12: слева поля, справа цена и primary CTA.
- **CTA:** CtaButton `subscription`, без comment.
- **CTA:** CtaButton `site.subscription.cta` (`subscription`, comment «Подписка: 2 пачки в месяц»).
### 5. Кто мы `#about`
- **Факты:** с 2019 года, основатели Аня и Дмитрий, бывшие бариста, партии по 5 кг. Ничего больше (ни цитат, ни наград).