Add new pages for sustainability, contacts, technical requirements, glossary, and related content
- Created a sustainability page with detailed eco-friendly practices and certifications. - Added a contacts page featuring multiple communication channels and company details. - Introduced a comprehensive technical requirements document covering Core Web Vitals and SEO best practices. - Developed a glossary of terms related to performance, SEO, technical development, and marketing.
This commit is contained in:
213
site-v2/s2-06 — Галерея проектов.md
Normal file
213
site-v2/s2-06 — Галерея проектов.md
Normal file
@@ -0,0 +1,213 @@
|
||||
---
|
||||
tags:
|
||||
- сайт
|
||||
- страница
|
||||
- проекты
|
||||
- p1
|
||||
url: /projects
|
||||
approach: Кастомная страница + новая сущность Projects в БД
|
||||
effort: ~12ч (бэкенд + фронтенд)
|
||||
created: 2026-02-17
|
||||
---
|
||||
|
||||
# 🏗️ Галерея проектів
|
||||
|
||||
> [!tip] Роль страницы
|
||||
> Самый мощный trust-сигнал для high-ticket покупателя. Человек видит реальный дом с фасадом — сразу понимает масштаб, цвет, текстуру. «Такое же, как у меня».
|
||||
|
||||
> [!warning] Реализация
|
||||
> **Кастомная страница** — нужны новые сущность `Project` в БД и API-эндпоинты.
|
||||
> Фронтенд: masonry grid + lightbox + страница отдельного проекта.
|
||||
|
||||
---
|
||||
|
||||
## Мета-данные
|
||||
|
||||
| Поле | Значение |
|
||||
|---|---|
|
||||
| **H1** | `Проєкти з фасадною плиткою GoodBrick` |
|
||||
| **Title** | `Фото проєктів — Фасади з плиткою та цеглою GoodBrick` |
|
||||
| **Description** | `Реальні проєкти з фасадною плиткою GoodBrick: котеджі, будинки, комерційні об'єкти. Фото до та після, використані матеріали, місто.` |
|
||||
| **Schema** | `CollectionPage` + `ImageObject` per project |
|
||||
| **isIndexable** | true |
|
||||
|
||||
---
|
||||
|
||||
## Макет сторінки (wireframe)
|
||||
|
||||
```
|
||||
┌──────────────────────────────────────────────────────────────────┐
|
||||
│ GoodBrick Каталог Про нас Ціни Ще КОНТАКТИ │
|
||||
├──────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ Проєкти з фасадною плиткою GoodBrick │
|
||||
│ │
|
||||
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
|
||||
│ │ │ │ │ │ │ │
|
||||
│ │ [фото] │ │ [фото] │ │ [фото] │ │
|
||||
│ │ │ │ (вищий) │ │ │ │
|
||||
│ │ Одеса · 850м²│ │ │ │ Київ · 200м² │ │
|
||||
│ └──────────────┘ │Хмельн.·450м²│ └──────────────┘ │
|
||||
│ └──────────────┘ │
|
||||
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
|
||||
│ │ [фото] │ │ │ │ [фото] │ │
|
||||
│ │ (вищий) │ │ [фото] │ │ │ │
|
||||
│ │ │ │ │ │ │ │
|
||||
│ │ Одеса · 120м²│ │ … │ │ … │ │
|
||||
│ └──────────────┘ └──────────────┘ └──────────────┘ │
|
||||
│ │
|
||||
│ ┌─────────────────── STICKY BANNER ─────────────────────────┐ │
|
||||
│ │ Хочете такий фасад? [Замовити безкоштовний зразок →] │ │
|
||||
│ └───────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ ── СТОРІНКА ПРОЕКТУ /projects/{slug} ────────────────────────── │
|
||||
│ │
|
||||
│ Breadcrumb: Головна › Проєкти › Котеджне містечко, Одеса │
|
||||
│ │
|
||||
│ # Котеджне містечко, Одеса │
|
||||
│ Приватний будинок · 850 м² · 2024 │
|
||||
│ │
|
||||
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
|
||||
│ │ [фото 1] │ │ [фото 2] │ │ [фото 3] │ │ [фото 4] │ … │
|
||||
│ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │
|
||||
│ │
|
||||
│ Комбінація травертину та фасадної плитки. Для стриманішого │
|
||||
│ вигляду було прибрано помаранчеві акценти… │
|
||||
│ │
|
||||
│ Використані матеріали: │
|
||||
│ ┌────────────────────────┐ ┌────────────────────────┐ │
|
||||
│ │ Колір Граніт · Khvylia │ │ Колір Охра · Standart │ │
|
||||
│ │ → /product/hranit │ │ → /product/okhra │ │
|
||||
│ └────────────────────────┘ └────────────────────────┘ │
|
||||
│ │
|
||||
│ ╔══════════════════════════════════════════╗ │
|
||||
│ ║ Замовити матеріали для схожого проекту ║ │
|
||||
│ ╚══════════════════════════════════════════╝ │
|
||||
│ │
|
||||
│ ── FOOTER ──────────────────────────────────────────────────── │
|
||||
│ GoodBrick │ Каталог │ Інфо │ Контакти │ Соцмережі │
|
||||
└──────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Бэкенд — новая сущность
|
||||
|
||||
### Entity `Project`
|
||||
|
||||
```csharp
|
||||
// GBSite.Data/Entities/Project.cs
|
||||
public class Project {
|
||||
public int Id { get; set; }
|
||||
public string Title { get; set; } // «Котеджне містечко Одеса»
|
||||
public string Slug { get; set; } // «kotedzhne-mistechko-odesa»
|
||||
public string Description { get; set; } // 100–300 слов о проекте
|
||||
public string City { get; set; } // «Одеса»
|
||||
public string ObjectType { get; set; } // «Приватний будинок» / «Комерційний об'єкт»
|
||||
public int? AreaSqm { get; set; } // 850 (кв.м. фасада)
|
||||
public string ImageUrls { get; set; } // JSON array ["url1", "url2"]
|
||||
public string ProductColorSlugs { get; set; } // JSON array ["shokolad", "okhra"]
|
||||
public bool IsPublished { get; set; }
|
||||
public DateTime CreatedAt { get; set; }
|
||||
}
|
||||
```
|
||||
|
||||
### API эндпоинты
|
||||
|
||||
```
|
||||
GET /api/projects → list (только IsPublished=true, desc по дате)
|
||||
GET /api/projects/{slug} → detail (public)
|
||||
POST /api/projects → create (admin)
|
||||
PUT /api/projects/{id} → update (admin)
|
||||
DELETE /api/projects/{id} → delete (admin)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Фронтенд — листинг /projects
|
||||
|
||||
### Компонент `ProjectsGallery`
|
||||
|
||||
```
|
||||
app/(site)/projects/page.tsx
|
||||
components/projects/projects-gallery.tsx
|
||||
```
|
||||
|
||||
**Верстка:**
|
||||
- Masonry grid (3 колонки desktop / 2 tablet / 1 mobile)
|
||||
- Каждая карточка: главное фото + overlay с «{Місто}, {кв.м.}»
|
||||
- При наведении — подпись + кнопка «Детальніше»
|
||||
- Lightbox при клике на фото (библиотека `yet-another-react-lightbox`)
|
||||
|
||||
**Без фильтров при запуске** — добавить позже когда проектов >10.
|
||||
|
||||
---
|
||||
|
||||
## Фронтенд — страница проекта /projects/{slug}
|
||||
|
||||
```
|
||||
app/(site)/projects/[slug]/page.tsx
|
||||
```
|
||||
|
||||
**Структура страницы:**
|
||||
|
||||
1. **Шапка:** H1 (название) + мета (город, тип объекта, площадь, год)
|
||||
2. **Галерея:** masonry / slideshow из фото проекта + lightbox
|
||||
3. **Описание:** текст о проекте, задачах, решениях
|
||||
4. **Использованные материалы:** карточки-ссылки на product-страницы
|
||||
- «Колір Шоколад, поверхня Khvylia» → `/product/shokolad`
|
||||
5. **CTA:** «Замовити такі самі матеріали» → Telegram / каталог
|
||||
|
||||
**SEO:** динамические metadata + Schema.org `Article` / `ImageObject`
|
||||
|
||||
---
|
||||
|
||||
## Контент на запуск (3–5 проектов-заготовок)
|
||||
|
||||
Заполнить реальными проектами (если есть фото) или создать «демо»-проекты из имеющихся live-фото:
|
||||
|
||||
| # | Название | Город | Тип | Площадь | Материал |
|
||||
|---|---|---|---|---|---|
|
||||
| 1 | {Назва від клієнта} | Одеса | Приватний будинок | {кв.м.} | {колір/поверхня} |
|
||||
| 2 | {Назва від клієнта} | Хмельницький | Приватний будинок | {кв.м.} | {колір/поверхня} |
|
||||
| 3 | {Назва від клієнта} | Київ | Комерційний об'єкт | {кв.м.} | {колір/поверхня} |
|
||||
|
||||
> [!important] Данные для проектов
|
||||
> Лучше 3 реальных проекта с реальными фото, чем 10 невнятных. Если нет согласия клиента — «Приватний будинок, Одеса» без имени.
|
||||
|
||||
---
|
||||
|
||||
## Конверсия
|
||||
|
||||
На странице листинга:
|
||||
- **Sticky баннер снизу**: «Хочете такий фасад? Замовте безкоштовний зразок»
|
||||
|
||||
На странице проекта:
|
||||
- **CTA после галереи**: «Замовити матеріали для схожого проекту» → Telegram
|
||||
- **Ссылки на продукты** — внутренняя перелинковка на карточки товаров
|
||||
|
||||
---
|
||||
|
||||
## Зависимости
|
||||
|
||||
- Библиотека `yet-another-react-lightbox` — установить через npm
|
||||
- Опционально: `react-masonry-css` для masonry grid (или CSS columns)
|
||||
|
||||
---
|
||||
|
||||
## Scope cuts
|
||||
|
||||
| Убрано | Причина |
|
||||
|---|---|
|
||||
| Фильтры по городу / типу объекта | Добавить когда проектов >10 |
|
||||
| 360° просмотр | Сложно технически, добавить Q2 |
|
||||
| «До/После» слайдер | Нет фото «до», добавить с новыми проектами |
|
||||
| Карта с пинами проектов | Добавить Q2 |
|
||||
|
||||
---
|
||||
|
||||
## Связанные страницы
|
||||
|
||||
- [[00 — Обзор и приоритеты]]
|
||||
- [[01 — Главная]]
|
||||
- [[05 — Блог]]
|
||||
Reference in New Issue
Block a user