Задача: #999
Авторы: Александр (CTO, архитектура) + Илья (Python Developer, валидация)
Дата: 17.06.2026
Статус: ✅ Завершено
Артефакт: shared/design/sastik-template-mapping.md (детальный маппинг StreamField-блоков)
Шаблон Sastik — SaaS & Tech Startup HTML Template (Themeforest). Extended License. Чистый HTML/CSS/JS, без привязки к фреймворкам.
4 варианта главной со своими CSS-темами:
| Вариант | body class | Тема | Primary |
|---|---|---|---|
| index.html | help-desk |
Help Desk | #045857 |
| home-2.html | fintech-saas |
Fintech | #533afd |
| home-3.html | automation-saas |
Automation | #781afe |
| home-4.html | task-management |
Task Mgmt | #533afd |
16 HTML-страниц всего: главные + about, team, blog, career, contact, error.
| Ресурс | Размер | Состав |
|---|---|---|
| CSS | 1.7 MB | bootstrap.min.css, animate.css, swiper.min.css, odometer.css, nice-select.css, magnific-popup.css, jquery-ui.css, custom-fonts.css, fontawesome.css, main.css |
| JS | 912 KB | jquery-3.7.1, bootstrap.bundle, swiper, wow, appear, imagesloaded, isotope, nice-select, marquee, magnific-popup, jquery-ui, odometer, parallaxie, parallax, parallax-scroll, easing, scrollspy, plugin.js (GSAP 3.11.4), lenis, main.js |
| SCSS | 536 KB | Полная SCSS-структура с переменными, миксинами, компонентами |
| Шрифты | 3.5 MB | BwGradual (заголовки), NeueMontreal (тело), FontAwesome, Google Fonts (Inter, Playfair Display, Caveat) |
| Картинки | 36 MB | Демо-изображения (будут заменены) |
| Итого | ~42 MB | Картинки надо заменить ± минифицировать |
Шаблон Sastik интегрируется в Wagtail CMS без архитектурных конфликтов.
:root {
--color-primary: #6840ff; /* → наш брендовый */
--color-secondary: #a1ff62;
--color-heading: #140f26;
--color-default: #403A56;
--font-body: "Inter"; /* → Inter (уже есть) */
--font-heading: 'BwGradual'; /* → Roboto Serif */
}
4 темы в комплекте. Можно добавить нашу poreklame-theme. Ребрендинг — замена переменных, SCSS-компоненты не трогаем.
abstracts/ → _variables.scss, _mixins.scss
base/ → fonts, base, spacing, typography, animation, overlay
components/ → 30+ компонентов (hero, feature, pricing, faq, cta, testimonial, ...)
layout/ → header, navigation, footer
main.scss → точка входа
Компоненты изолированы — каждый блок в своём _*.scss. Идеально под Wagtail StreamField: блок → scss-компонент.
Wagtail-конфликты: не обнаружено. Wagtail не тащит jQuery на фронтенд. Админка — отдельный namespace.
Замена: --font-heading: 'Roboto Serif', --font-body: 'Inter'. Экономия ~2MB.
Bootstrap 5 не требует jQuery в ванильной версии. Но Sastik использует jQuery-based плагины (isotope, magnific-popup, nice-select, marquee, jquery-ui). Оставляем для MVP. Позже можно заменить на аналоги без jQuery.
| Page | URL | Источник HTML | Назначение |
|---|---|---|---|
| HomePage | / |
index.html | Главная, 10-12 блоков StreamField |
| CMOPage | /cmo/ |
home-3 (+ home-2) | Лендинг AI-CMO |
| RoleStubPage | /cpo/, /devops/, /sales/ |
— | Заглушки ролей + форма |
| CollaborationPage | /features/collaboration/ |
home-3 solution | Коллаборация агентов |
| Блок | Секция шаблона | Тип |
|---|---|---|
HeroBlock |
hero-area (hero 1-4 на выбор) | StructBlock |
BrandMarqueeBlock |
brand | StructBlock |
DashboardBlock |
dash_board | StructBlock |
TabbedFeatureBlock |
feature (табы) | StructBlock |
StoryCardBlock |
success_story | StructBlock |
CounterBlock |
funfact (odometer) | StructBlock |
TestimonialBlock |
testimonial (swiper) | StructBlock |
IntegrationBlock |
intigration | StructBlock |
PricingBlock |
pricing (месяц/год) | StructBlock |
FaqBlock |
faq (аккордеон) | StructBlock |
CtaBlock |
cta | StructBlock |
TextWithImageBlock |
problem / solution / security | StructBlock |
FeatureGridBlock |
feature (сетка) | StructBlock |
ProcessBlock |
process / work | StructBlock |
Все блоки проектируются переиспользуемыми — один и тот же HeroBlock может использоваться на разных страницах.
/ (HomePage, index.html)Секции index.html (порядок в шаблоне) → StreamField блоки:
HeroBlock (GSAP-анимация xbFadeUp)BrandMarqueeBlock (marquee логотипов)DashboardBlock (скриншоты продукта)TabbedFeatureBlock (5 табов)StoryCardBlock (метрики)IntegrationBlock (логотипы)CounterBlock (odometer-счётчики)PricingBlock (3 тарифа)FaqBlock (аккордеон)CtaBlock/cmo/ (CMOPage, home-3)На основе home-3 (automation-saas) — 11 секций:
Простая модель: название роли, иконка, описание + CTA-блок. Все с noindex.
Sastik/assets/ → static/sastik/ (css, js, fonts — без картинок)static/sastik/scss/, правим _variables.scss под брендindex.html → home/templates/home/home_page.html
includes/header.htmlincludes/footer.htmlincludes/blocks/*.htmlhome/models.py| Риск | Уровень | Действие |
|---|---|---|
| 36MB картинок для web | 🔴 | Резайз + WebP → ~3-4MB |
| GSAP в plugin.js | 🟡 | Оставить для MVP. Позже вынести отдельно |
| jQuery-зависимость | 🟡 | Оставить в MVP (87KB gzip) |
| Lenis smooth scroll | 🟢 | Проверить с Wagtail-якорями |
| Шрифт BwGradual DEMO | 🟡 | Заменить на Roboto Serif / Inter |
| Шаблон не по Figma | 🟡 | Замена переменных + контент. Дизайн качественный |
Создано: 17.06.2026 | Александр (CTO) + Илья (Python Developer)