Карта сайта и реализация страниц

Карта построена по факту изученных макетов. Где в Figma не всё ясно — стоит 🟡 и описан наиболее вероятный вариант.

┌── ГЛОБАЛЬНЫЙ LAYOUT
│
│   <Header>
│     Logo │ Fonts ▾ │ Services │ Intro │ Lab │ T&C │ EN/RU
│
│   ─── контент конкретной страницы ───
│
│   <Footer>
│     «to the top» │ текст футера
│
│   Модалки (триггерятся откуда угодно):
│     • <E_mail_popup>   подписка на рассылку
│     • <MobileMenu>     full-screen меню на мобильном
│
└──

РАЗДЕЛЫ:
├── /                         Main
├── /fonts                    Fonts popup из хедера
│   └── /fonts/{slug}         Typeface page  (+ spec | trial | buy)
├── /services
│   └── /services/{slug}      Case page (якорь или отдельная страница)
├── /intro
├── /lab                      🟡 публичная страница с экспериментами
├── /t&c
└── /404, /500                служебное

Глобальный layout

Из макета LAB (23:3): Logo | Button_fonts_main | nav (services / intro / lab / t&c) | Menu_language_section.

Поведение:

На обычных страницах — полоса поверх контента, non-sticky (хедер крупный и визуально «основательный»).
На typeface-странице — хедер перестраивается: активная кнопка с названием шрифта (pink), рядом — spec / trial / buy. То есть <Header variant="typeface">.
Fonts — popup, а не страница. По клику на кнопку раскрывается overlay со списком шрифтов каталога. Судя по имени компонента Button_fonts_popup — именно popup. Альтернатива (отдельный URL /fonts) обсуждается.
На mobile — Logo + Icon_menu, клик → full-screen MobileMenu с навигацией.
Язык: в макете только EN в свитчере, контент русский → на сайте будет RU/EN, fallback на RU.

Из макета: to the top (кнопка скролла наверх, black pill) + общий текст + ссылки. Одна колонка, без сложной структуры.

Newsletter popup (`E_mail_popup`)

Компонент готов, но точка вызова не проставлена в макетах. Наиболее разумный паттерн — кнопка «subscribe» в футере. Автопоказ / exit-intent — опция, её решают отдельно.

Страницы

`/` — Main

Из макета OVERVIEW (группа MAIN): header → два подряд блока image/video (single или slideshow auto-play, 16:9 / 4:3 / 1:1, full-width, clickable/non) → footer.

Реализация:

N блоков MediaBlock в column-layout, каждый во всю ширину экрана.
MediaBlock — универсальный компонент: { type: 'image' | 'video' | 'slideshow', sources[], aspectRatio, href?, autoplay? }.
Слайдшоу — минимальный crossfade на <img>; auto-play по setInterval; учитывается prefers-reduced-motion.
Видео — нативный <video> с autoplay muted playsInline loop; для тяжёлых — Kinescope (S3-совместимый российский video-сервис) либо S3 + poster.

`/fonts` — каталог (popup из хедера)

В Figma как отдельная страница не представлен. Косвенные признаки — компоненты Button_fonts_main, Button_fonts_popup, карточки COMELIN, DAUMIER/COMELIN и BARBANEL, SAFAEV, BLOKLAND/BARBANEL в LAB-canvas.

Наиболее вероятно: popup-overlay, открывается по клику fonts в хедере. Список шрифтов фаундри (11+), каждая карточка с превью глифов и именем. Клик → переход на /fonts/{slug}.

Альтернатива: отдельная страница /fonts с grid. Технически это даже дешевле (нет модального слоя) и лучше для SEO. Решается на старте.

`/fonts/{slug}` — Typeface Page

Ключевая страница сайта. Состояние: default / spec / trial / buy (переключается через header-кнопки).

Состав страницы в состоянии default (по REPRO и PLASTINKA):

Header — вариант typeface: активная кнопка имени шрифта + spec / trial / buy.
Posters_frame — hero-галерея из ~7 постеров в вертикальной пропорции 1:1.333. В Figma — горизонтальная полоса / карусель.
Article — длинный редакционный контент. Блоки:
- Title (с поддержкой номерных меток [1], [2], [Bibliography])
- Paragraph (с поддержкой внешних ссылок)
- Quote (синий, с атрибуцией автора)
- Pictures_article — параметрическая галерея: type: 'square' | 'horizontal' | 'vertical', proportion: '1:1' | '1:1.333' | '1:1.5' | '1:2' | '1:3', heights (количество ячеек по вертикали), caption: boolean, images[]
- Caption — подписи под изображениями
- Bibliography — нумерованный список источников
- Footnote-ссылки — [1] в теле ведёт на якорь в библиографии, и обратно.
Credits_Fonts — Name, Release date, Version, Supported Scripts, Styles (каждый со статусом released / coming_2025 / …), Features (OpenType ss01, …), Design & Engineering, Artistic image, Say Thanks.
Footer.

Реализация:

Страница рендерится из блочного JSON (Portable Text / Payload blocks). Порядок блоков задаётся в CMS.
Pictures_article — React-компонент с пропсами под все варианты Figma. CSS Grid с динамическими grid-template-rows, aspect-ratio.
Footnote-система — якоря + плавный скролл.
Постеры preload’ятся для first-paint hero.

Состояние spec 🟡 — отдельного макета нет, но кнопка есть. Наиболее вероятно — секция с type-specimen (глиф-таблица, примеры в весах/стилях, ligatures, OpenType feature preview). Может быть scroll-секция на той же странице или отдельный URL /fonts/{slug}/spec. Возможно это и есть Type Tester — если он вообще планируется.

Состояние trial — модалка: email → бэкенд сохраняет адрес, отправляет письмо со ссылкой на trial.woff2. Файлы trial режутся на стороне PlayFaces.

Состояние buy — модалка с виджетом Option_bar:

Tier label: desktop license (+ возможно web license, app license)
USERS: — числовой ввод количества лицензий/мест
Fader On/Off — видимо regular ↔ extended лицензия

Итоговая сумма считается на клиенте, оплата — YooKassa Checkout. После оплаты webhook генерирует лицензионный PDF + email с подписанными ссылками на файлы (TTL ~7 дней).

`/services` — Services + кейсы

Из макета LAYOUTS — SERVICES (967:10518):

Header
Info_frame — заголовок раздела с CTA и контактом HI@PLAYFACES.COM. В макете плейсхолдер: “WOULD BE NICE TO ADD HERE SOME CALL TO ACTION YO” — финальный текст со стороны PlayFaces.
Hero Pic (одна большая картинка)
Cases_L2 — ряд из 13 тегов-кнопок: aliexpress, atom, цветной, ecomtech, afisha, picnic afisha, joompay, мхат, myra, polytech, постнаука, worldchess, designworkout
Content кейса: Paragraph + Pictures_article галерея + Credits_Services
Footer

Реализация, наиболее вероятная:

/services — лэндинг раздела с общим интро и списком всех 13 кейсов.
/services/{slug} — отдельная страница каждого кейса (для SEO и расшариваний лучше отдельные URL).
Cases_L2 — ряд тегов-фильтров на /services, клик ведёт на кейс.

Альтернатива: 13 кейсов — секции одной страницы /services, Cases_L2 — якорная навигация. Дешевле на 1–2 дня, но хуже для SEO. Обсуждается.

`/intro` — о студии

Из OVERVIEW: header → text info → text — interview layout → footer.

«Interview layout» — формат Q&A: вопрос жирно, ответ обычным шрифтом, возможно с фото спикера. В дампе найден вероятный копирайт: “PlayFaces is a typographic workshop that brings together font designers, typographers, and anyone passionate about letters. Founded by Vladimir Kolomeytsev and Co in 2022.”

Реализация: одна страница, контент в CMS блоками (Q / A / quote / paragraph).

`/lab` 🟡

Соответствует canvas 23:3 (LAYOUTS — LAB 🟡). В дампе — набор компонентов design system + карточки авторов/шрифтов, собранные в composition. Без чёткого контента.

Наиболее вероятная интерпретация: публичная страница-песочница, где студия показывает эксперименты: вариации букв, живые демо variable fonts, игровые композиции. Аналог «Play» у других foundries (pangrampangram.com/playground, klim.co.nz). Контент — набор интерактивных блоков, обновляется время от времени.

Реализация: страница-композиция из блоков. Контент в CMS, порядок блоков свободный. В MVP — static composition, в более поздних итерациях можно добавить интерактивные виджеты.

Назначение лучше уточнить на старте: от этого зависит, будет ли это 1 день работы или 3–5.

`/t&c` — Terms & Conditions

Из OVERVIEW: header → text info → accordion с Expand all / Collapse all → footer.

Реализация: <Accordion> компонент с массивом { title, body }, две кнопки наверху (Expand all / Collapse all) меняют open у всех элементов. Контент в CMS.

`/404`, `/500`

В макетах нет. Но нужны. Брендированные страницы ошибок с типографикой — полдня работы.

Модалки и глобальные состояния

Модалка	Где триггерится	Реализация
Newsletter popup (`E_mail_popup`)	Кнопка «subscribe» в футере	Controlled modal, email → API → Unisender / SendPulse
Buy modal	Кнопка `buy` в хедере typeface-страницы	См. `/fonts/{slug}` состояние `buy`
Trial modal	Кнопка `trial` в хедере typeface-страницы	См. `/fonts/{slug}` состояние `trial`
Fonts popup	Кнопка `fonts` в хедере	Overlay со списком шрифтов
Mobile menu	Icon_menu в хедере на мобильном	Full-screen overlay
Lightbox / full-size viewer	Клик по изображению в `Pictures_article`	Встроенная либа lightbox с `Button_control_left/right/close`

Служебное

Sitemap.xml + robots.txt — автогенерация.
OG-картинки — под каждый typeface / case / главные страницы.
JSON-LD structured data — Product (для шрифтов), CreativeWork (для кейсов), Organization (для бренда).
RSS (опционально) — если /lab будет часто обновляться.

PLAYFACES™ proposal

Проводник

02-sitemap

Карта сайта и реализация страниц

Глобальный layout

Header

Footer

Страницы

`/` — Main

`/fonts/{slug}` — Typeface Page

`/services` — Services + кейсы

`/intro` — о студии

`/lab` 🟡

`/t&c` — Terms & Conditions

`/404`, `/500`

Модалки и глобальные состояния

Служебное

PLAYFACES™ proposal

Проводник

02-sitemap

Карта сайта и реализация страниц

Глобальный layout

Header

Footer

Newsletter popup (E_mail_popup)

Страницы

/ — Main

/fonts — каталог (popup из хедера)

/fonts/{slug} — Typeface Page

/services — Services + кейсы

/intro — о студии

/lab 🟡

/t&c — Terms & Conditions

/404, /500

Модалки и глобальные состояния

Служебное

Newsletter popup (`E_mail_popup`)

`/` — Main

`/fonts` — каталог (popup из хедера)

`/fonts/{slug}` — Typeface Page

`/services` — Services + кейсы

`/intro` — о студии

`/lab` 🟡

`/t&c` — Terms & Conditions

`/404`, `/500`