SeexAI — landing page
Landing page for SeexAI: desktop (Main page v5) and mobile (Main page v5 – mobile v2).
Current design sources, decisions and section status: docs/PROJECT_CONTEXT.md.
Source of truth
Current scope
- Desktop ≥ 1440 (Main page v5), the scaled desktop canvas at 768–1439 and the mobile layout
below 768 — see «Мобильная версия» below.
- The sections above (v3) are historical: the current page is v5 (
docs/PROJECT_CONTEXT.md).
Stack
- Next.js 16 (App Router,
src/ directory), React 19
- TypeScript (strict,
noUncheckedIndexedAccess)
- Tailwind CSS v4 (tokens in
src/app/globals.css via @theme)
- ESLint (
eslint-config-next)
- pnpm
Fonts
| Font | Source | Usage |
|---|
| SF Pro Text → Inter | system font on Apple devices; Inter via next/font/google elsewhere | all body text (font-sans) |
| Archivo | next/font/google | logo, SEEX / SeexAI watermarks |
| Unbounded | next/font/google | accents ("AI для каждого", "1 200+") |
| Druk Text Wide Cyr Medium | local, licensed | section headings (font-druk) |
| Neuropol | local, licensed | hero title (font-neuropol) |
font-sans is -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif.
SF Pro files are never added to the repo or served (Apple licence): Apple devices use the
installed system font.
Druk and Neuropol
The licensed WOFF2 files live in public/fonts/ (DrukTextWideCyr-Medium.woff2,
Neuropol-Regular.woff2). The .otf originals are kept outside git in design-refs/fonts/
and must never be put into public/.
To replace a font: convert it outside the project (e.g. pip install fonttools brotli in a temp
venv, then fonttools ttLib.woff2 compress -o Neuropol-Regular.woff2 Neuropol-Regular.otf), drop
it into public/fonts/ under the same name and rebuild. src/lib/brandFonts.ts checks the files
at build time and emits @font-face (font-display: swap) plus a <link rel="preload"> for each
one; a missing file is simply skipped (fallback stack, no 404).
Positions of the Druk / Neuropol text are calibrated against design-refs/final/ with the real
fonts (report 15).
Structure
src/
app/ layout, page, global CSS + design tokens
components/
layout/ desktop header
ui/ primitives: Button, IconButton, SectionHeading, Marquee, LayoutImage, InlineSvg
landing/ desktop sections
mobile/ mobile layout (< 768) and its sections
icons/ SVG icons exported from Figma
data/ section content (shared by both layouts)
lib/ fonts, site config, helpers
public/
images/ exported Figma assets per section
fonts/ licensed local fonts
Мобильная версия
| Ширина | Что показывается | Где |
|---|
| < 768 | мобильная вёрстка, резиновая 360–767, эталон 390 (design-refs/mobile/) | src/components/mobile/ (MobileLanding и секции Mobile*) |
| 768–1439 | десктопный холст 1440, масштабированный по ширине окна (CSS zoom, коэффициент --desktop-zoom ставит инлайн-скрипт в layout.tsx) | src/components/landing/ |
| ≥ 1440 | десктоп как есть, не меняется ни на пиксель | src/components/landing/ |
- Обе версии рендерятся на сервере; какую показать, решают только медиазапросы в конце
src/app/globals.css (.desktop-root / .mobile-root) — без JS-брейкпоинтов, мигания и ошибок гидратации.
- Данные общие (
src/data/); мобильные переносы и тексты — поля mobileText, mobileLabel,
mobileQuestion, mobileAnswer; блоки, которых нет на десктопе v5, — src/data/mobileArchive.ts, faqArchive.
- Якоря мобильных секций — с префиксом
m- (#m-pricing); mobileHref() в src/lib/mobileAnchors.ts
переводит десктопные ссылки, MobileHashLinks при загрузке и на hashchange ведёт /#pricing
к #m-pricing (только < 768).
- Общие механизмы: ленты —
ui/Marquee, свайп-карусели — mobile/MobileCarousel, аккордеон FAQ —
landing/FaqAccordion (с пропсами для мобильной копии), растр только одной вёрстки — ui/LayoutImage.
- iPhone:
viewport-fit=cover + env(safe-area-inset-*) (лента, header, меню, footer), поле композера
16 px (масштабировано до 13 px макета — без автоувеличения), области нажатия ≥ 44 px.
Как проверять (production-сборка на :3123, playwright-core и Chromium из кеша Playwright):
pnpm build && pnpm start -p 3123
node qa-screenshots/mobile.mjs # заход 1: экраны, header, меню, Hero
node qa-screenshots/mobile-2.mjs # заход 2: сценарии, «От идеи…», How it works
node qa-screenshots/mobile-3.mjs # заход 3: Learning, аудитория, тарифы, баннер
node qa-screenshots/mobile-4.mjs # заход 4: FAQ, Final CTA, footer, якоря, ширины 360–1920
node qa-screenshots/guard.mjs qa-screenshots/v5 -new # десктоп 1440 / 1920
python3 qa-screenshots/diff.py qa-screenshots/v5/guard-1440.png qa-screenshots/v5/guard-1440-new.png # должно быть 0
Скриншоты — qa-screenshots/mobile/ (page-360/390/430.png и по секциям). Отчёты заходов — docs/reports/20–24.
Scripts
pnpm install
pnpm dev # http://localhost:3000
pnpm lint
pnpm typecheck
pnpm build
