docs/analysis - master - Valya-commits/project

docs/analysis
49 строк3 KB
Осадчая Валентина
07. Content: Full layout with articles, categories, about, subscribe and footer
28 мар 2026, 10:14
28 мар 2026, 10:148b336b1
АНАЛИЗ МАКЕТА: CAOS – Cultural Artistic Organization System
Источник: https://petal-knee-94834203.figma.site

1. ЛОГИЧЕСКИЕ БЛОКИ (структура):
   - Header: логотип CAOS, навигация (События, Пространства, Творцы, Сообщество, Услуги)
   - Hero: крупный баннер с фестивалем (Festival de Jazz no Parque)
   - Сетка карточек: события и пространства (Mostra de Cinema, Galeria Vermelho, Workshop de Fotografia)
   - Рубрикатор (категории): музыка, театр, арт-пространства, фотография, литература, город
   - О проекте: текст сообщества, достижения (10 000 участников)
   - Форма подписки
   - Footer: контакты, соцсети, авторские права

2. ЦВЕТОВАЯ ПАЛЕТРА (из визуального впечатления):
   - Основной фон: #FFFFFF
   - Акцентный цвет (кнопки, категории): #7a16d7 (пурпурный)
   - Тёмный фон подвала: #1A1A2E (тёмно-синий)
   - Текст заголовков: #16213E
   - Текст основного абзаца: #4A5568
   - Серый фон секций: #F8F9FA

3. ТИПОГРАФИКА:
   - Заголовочный шрифт: Playfair Display (жирный, кегли 36–48px)
   - Основной шрифт: Roboto (кегль 16px, межстрочный интервал 1.5)
   - Акцентный шрифт: тот же Roboto, но полужирный (500–700)

4. СЕТКА И ОТСТУПЫ:
   - Контейнер: max-width 1200px, отступы по бокам 24px
   - Сетка карточек: grid 3 колонки на десктопе, gap 24px
   - Отступы между секциями: 80px вертикальных
   - Отступы внутри карточек: padding 16px
   - Элементы навигации: gap 32px

5. АССЕТЫ ДЛЯ ЭКСПОРТА (из Figma):
   - Логотип CAOS (текстовый, но можно экспортировать SVG)
   - Иконки категорий (музыка, театр, кино и т.д.) – SVG
   - Изображения для карточек: 
        * Festival de Jazz (обложка)
        * Mostra de Cinema Independente
        * Galeria Vermelho
        * Workshop de Fotografia
        * Фото сообщества (для блока «О проекте»)
   - Иконки социальных сетей (Instagram, VK, YouTube) – SVG

   Все изображения следует оптимизировать: фото в WebP (max 200 КБ), иконки в SVG.

6. ПРИМЕЧАНИЯ ПО АДАПТИВНОСТИ:
   - На мобильных устройствах сетка становится 1 колонка
   - Меню превращается в вертикальное (или гамбургер, если потребуется)
   - Отступы уменьшаются до 16px по бокам